/* Lead capture, shared by three page families that do not share a stylesheet.
   ------------------------------------------------------------------------------------------------
   The state guides and /updates/ articles load state.css, the course lessons load course.css, and
   the block sits on all of them. Putting these rules in either stylesheet would have meant keeping
   a second copy in the other, which is the kind of duplication that drifts silently: a colour
   changed in one file and not the other is invisible until someone photographs both pages.

   It is one small file rather than an inlined <style> because it is identical on 175 pages and gets
   the immutable year-long cache every /assets/ path gets, so it is fetched once per visitor rather
   than parsed once per page.

   Three measured facts shape what is here, and the CSS carries two of them.

   No JavaScript at all: the topic choice is radio inputs styled with :checked, so the feedback that
   keeps a visitor's sense of progress costs nothing at parse time. Those pages load zero
   third-party script and Lighthouse sits at 99 on desktop; a widget would spend that.

   The form is the primary action and WhatsApp is a line below it, because on the pages that rank
   desktop outnumbers mobile 81 to 6. Someone filing a state report is at a keyboard, and for a
   desktop visitor with no WhatsApp account wa.me is a dead end no browser can detect in advance.

   Colours match state.css deliberately (#155138 for actions, #E2E6DF for borders, #FAC700 for
   focus) so the block does not read as bolted on. On the course pages, whose palette is its own,
   it reads as a distinct panel, which is acceptable: it is a distinct thing. */

/* ---- the panel -------------------------------------------------------------------------------
   Everything below is scoped to .lead-capture and sets its own type, because the block cannot rely
   on the page it sits on. The reference pages load state.css, which styles .state-section and
   .state-direct-answer; the course pages load course.css, which has never heard of either, and the
   block sits outside .lesson-body so even the course's own heading rules miss it. Before this it
   rendered with a browser-default 2em h2 on 77 pages.

   It is a tinted, bordered panel rather than another white section because on a reference page it
   was reading as one more article heading. The one commercial thing on a page of citations has to
   be visibly a different kind of thing, and a reader skimming for a filing deadline has to be able
   to tell at a glance that this is not more of the deadline. The tint is barely green rather than
   the site's #155138: a dark panel would need every input, label and border inside it restyled for
   contrast, and would shout on a design whose restraint is its credibility. */
.lead-capture {
  background: #F4F8F5;
  border: 1px solid #C6D6CA;
  border-top: 3px solid #155138;
  padding: 30px 32px 32px;
  border-radius: 2px;
}
@media (max-width: 640px) { .lead-capture { padding: 22px 18px 24px; } }

/* Own heading rules, and no border-top: that rule exists on .state-section h2 to separate one
   article section from the next, and inside a panel it reads as a stray line. */
.lead-capture h2 {
  font-family: Archivo,sans-serif; font-weight: 700; font-size: 25px; letter-spacing: -.01em;
  line-height: 1.2; color: #0B0F0A; margin: 0 0 16px; padding-top: 0; border-top: 0;
}
.lead-capture > p { font-size: 16px; line-height: 1.65; color: #2A302A; margin: 0 0 14px; }
.lead-capture > p:last-child { margin-bottom: 0; }

/* ---- the block itself ------------------------------------------------------------------------
   The block that turns a reference page into a route to a conversation. Three measured facts shape
   it, and the CSS carries two of them.

   No JavaScript anywhere: the topic choice is radio inputs styled with :checked, so the visual
   feedback that keeps the sense of progress costs nothing at parse time. Those 99 pages load zero
   third-party script and Lighthouse sits at 99 on desktop; a widget would spend that.

   The form is the primary action and WhatsApp is a line below it, because on the pages that rank
   desktop outnumbers mobile 81 to 6. Someone filing a state report is at a keyboard, and for a
   desktop visitor with no WhatsApp account wa.me is a dead end no browser can detect in advance. */
.lead-capture .state-direct-answer { margin-bottom: 22px; }
.lead-form { margin: 0; }

.lead-topics { border: 0; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
/* A question, set as one. It was 11px uppercase mono, identical to the NAME and EMAIL labels below
   it, which made the only question on the page read as a caption for a text field. */
.lead-legend {
  font-family: Archivo,sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.005em;
  line-height: 1.3; color: #0B0F0A; padding: 0; margin-bottom: 14px; text-transform: none;
}
/* Whole row is the target, not just the dot. On a phone the dot alone is a 14px tap area. */
.lead-topic {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid #D3DDD5; padding: 14px 16px; cursor: pointer;
  border-radius: 2px;
}
.lead-topic:hover { border-color: #155138; }
/* Deliberately not :has(:checked): support is close but not universal, and a selected state that
   silently does nothing on some browsers is worse than relying on the radio itself. */
.lead-topic input { margin: 3px 0 0; flex: 0 0 auto; accent-color: #155138; width: 17px; height: 17px; }
/* :has() would be neater but is not universal enough to carry a selected state alone, so the
   contrast comes from the radio itself plus this border, which every browser renders. */
.lead-topic:focus-within { border-color: #155138; outline: 2px solid #FAC700; outline-offset: 1px; }
.lead-topic-body { display: flex; flex-direction: column; gap: 3px; }
.lead-topic-title { font-weight: 600; font-size: 16px; line-height: 1.35; }
.lead-topic-sub { font-size: 14px; line-height: 1.45; color: #5A6457; }

/* Stacked, then two up, then everything on one row with the button. Exactly one rule may match at a
   time: an earlier edit left a stale `1fr 1fr auto` query below the wide one, and because both matched
   above 900px the later one won, giving three columns for four items. The button wrapped to its own
   row and the phone field landed in an `auto` column that sized to its content, so the three inputs
   were neither the same width nor on the same baseline. */
.lead-fields { display: grid; gap: 12px 14px; align-items: end; }
@media (min-width: 620px) and (max-width: 899px) {
  .lead-fields { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .lead-fields { grid-template-columns: 1fr 1fr 1fr auto; }
}
/* Two fixed rows rather than a flex column, so the label's slot is 18px whatever is inside it and a
   field's height can never again be decided by its own label. See the note below for what went wrong
   when it could. */
.lead-field { display: grid; grid-template-rows: 18px auto; gap: 5px; min-width: 0; }
/* nowrap because "NAME optional" and "PHONE optional" wrap in a narrow column while "EMAIL" does not,
   which made those two fields taller than the middle one and lifted their labels. With the inputs
   bottom-aligned by align-items:end, the visible result was one column sitting higher than its
   neighbours for no reason a reader could see.

   That reappeared for a second reason, and this one is worth writing down because it is invisible in
   the markup. Measured in Chrome: "NAME optional" and "PHONE optional" were 19px tall against
   EMAIL's 18px. The cause is the inline <span>, which switches IBM Plex Mono from weight 600 to
   weight 400, and the two faces do not report matching metrics. At 11px the 600 face reports ascent
   15 and descent 4, the 400 face reports 11 and 3. A line box holding both has to cover both, so it
   grows by a pixel, and with the row bottom-aligned that pixel lifted exactly the two labels
   carrying the word "optional" and nothing else. Fixing it by matching the weights would have
   flattened a distinction that is doing real work, so the label's slot is pinned instead: 18px of
   grid row above, 18px of line-height inside, and a mixed-weight line box now overflows a millimetre
   into the 5px gap where nobody can see it.

   The inputs themselves were never out of line. They measured 441 to 483 in all three columns before
   any of this, which is why the fix is here and not on them. */
.lead-field-label {
  font-family: 'IBM Plex Mono',monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #5A6457; white-space: nowrap; line-height: 18px;
}
/* #8A8F86 measured 3.08:1 on the form panel and 3.31:1 on white, against the 4.5:1 that 11px text
   needs. It was the ONLY WCAG AA failure left on a state page, found on the Kentucky publish and left
   alone then because editing this file rewrites its ?v= hash and rebuilds every page carrying the
   form, which would have buried a state deployment in unrelated diff. Those pages have since been
   rebuilt twice for the honeypot and the phone field, so that argument had nothing left to buy. */
.lead-optional {
  font-weight: 400; letter-spacing: 0; text-transform: none; color: #686E63;
}
/* The honeypot, see functions/api/_lead-spam.js. It has to be invisible to a person and present in
   the DOM for a bot that fills what it finds, so this is the standard clip technique rather than
   display:none, which some bots skip on purpose.

   Deliberately NOT `left: -9999px`: these pages are checked at 390px for scrollWidth == clientWidth,
   and a 9999px offset inside a positioned ancestor is a way to fail that check for a field nobody can
   see. A 1px clipped box cannot affect layout at any width. */
.lead-trap {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.lead-input {
  font-family: inherit; font-size: 16px; /* 16px keeps iOS from zooming the viewport on focus */
  padding: 10px 12px; border: 1px solid #C0CCC3; border-radius: 2px; background: #fff;
  width: 100%; box-sizing: border-box; height: 42px;
}
/* The ring is drawn INSIDE the field, which is the only way it does not appear to move.
   An outline grows outward from its offset, so at offset 0 a 2px ring still extends 2px past the top
   edge and the field reads as jumping up the moment it is clicked. Nothing actually moved: focusing
   each input measured a delta of 0 on all three. The apparent movement was the ring itself, so the
   ring is now inset and the field's outer bounds never change.
   Dark green rather than the site's #FAC700, because yellow on a white field is about 1.6:1 and was
   close to invisible as a focus indicator. At offset -1px it merges with the focused border into one
   solid 3px green edge, roughly 9:1 against both the field and the panel. */
.lead-input:focus-visible { outline: 2px solid #155138; outline-offset: -1px; border-color: #155138; }
.lead-send {
  font-family: 'IBM Plex Mono',monospace; font-size: 14px; font-weight: 600;
  background: #155138; color: #fff; border: 1px solid #155138; border-radius: 2px;
  padding: 0 26px; cursor: pointer; white-space: nowrap; height: 42px;
}
.lead-send:hover { background: #0E3A28; border-color: #0E3A28; }
.lead-send:focus-visible { outline: 2px solid #FAC700; outline-offset: 2px; }

/* Qualified by the block, and it has to be. `.lead-capture > p` above is 0-1-1 and a bare .lead-note
   is 0-1-0, so in the open variant, where the note is a direct child, the blanket paragraph rule won
   and the disclaimer rendered at 16px with no margin above it: the same size as the offer it
   qualifies, sitting flush against the button. The collapsed variant was correct all along, because
   there the note is nested inside .lead-capture-body and the > selector never reached it, which is
   exactly the kind of difference that survives a visual check of one page. The descendant selector
   here is 0-2-0 and matches both. */
.lead-capture .lead-note { font-size: 13px; color: #5A6457; line-height: 1.55; margin: 16px 0 0; }

/* WhatsApp, given a row of its own under the form.
   It used to be an inline link in the closing line of the block, labelled with the phone number,
   which made it the least visible thing in a block whose whole purpose is to be acted on. It is the
   route worth the most per lead, so it now gets a button.
   Green rather than the site's #155138, so it is recognised as a WhatsApp button before it is read
   and cannot be mistaken for a second Send.

   Not WhatsApp's own #25D366, though, and the reason is measurable. White on #25D366 is 1.98:1, and
   AA wants 4.5:1 for a label this size; near-black on it gets 9.7:1 but reads heavy, which is the
   complaint that started this. Green is the worst hue for that trade because its luminance is high,
   so the only way to have a white label is to bring the fill down. #0B8043 gives white 5.02:1 with
   room to spare, stays 1.85:1 away from the Send green, and keeps the saturation that says WhatsApp.
   Hover #0A7038 still holds 6.2:1, so the contrast does not fail on the way down. */
.lead-wa-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid #D8E2DB;
}
.lead-wa {
  display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box;
  font-family: 'IBM Plex Mono',monospace; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  background: #0B8043; color: #fff; text-decoration: none; white-space: nowrap;
  padding: 0 24px; height: 46px; border: 1px solid #0A7038; border-radius: 2px;
}
.lead-wa:hover { background: #0A7038; border-color: #095F30; }
.lead-wa:focus-visible { outline: 2px solid #0B0F0A; outline-offset: 2px; }
.lead-wa .wa-glyph { width: 19px; height: 19px; }
.lead-wa-hint { font-size: 14px; line-height: 1.5; color: #5A6457; max-width: 34em; }
.wa-glyph { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

/* The ask above the fold, on two surfaces. Neither is a second form: both jump to the block below,
   which is the placement the measurement asks for, since readers leave mid-page through a citation
   link. The rail carries it from 1040px up; the inline strip carries it below that, where the rail
   does not exist at all. See build/lib/render-lead-capture.mjs for why they are two and not one. */

/* Shared by both, so the thing a reader presses looks the same wherever they meet it. */
.ask-cta {
  display: block; text-align: center; font-family: 'IBM Plex Mono',monospace; font-size: 13px;
  font-weight: 600; background: #155138; color: #fff; text-decoration: none;
  padding: 10px 14px; border-radius: 2px;
}
.ask-cta:hover { background: #0E3A28; }
/* Second button, not a link: on the pages where the block is collapsed this is the only WhatsApp
   route a reader can see without opening anything. */
.ask-cta-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
  font-family: 'IBM Plex Mono',monospace; font-size: 13px; font-weight: 600;
  background: #0B8043; color: #fff; text-decoration: none;
  padding: 10px 14px; border-radius: 2px;
}
.ask-cta-wa:hover { background: #0A7038; }
.ask-cta:focus-visible,
.ask-cta-wa:focus-visible { outline: 2px solid #0B0F0A; outline-offset: 2px; }
.ask-cta-wa .wa-glyph { width: 16px; height: 16px; }
.ask-note {
  font-family: 'IBM Plex Mono',monospace; font-size: 12px; line-height: 1.45; color: #5A6457;
  margin: 10px 0 0;
}

/* The rail panel. Its wrapper lives inside .state-sidebar, which state.css already hides below
   1040px, so this surface needs no width rule of its own. */
.sidebar-panel-ask { border-color: #155138; }
.sidebar-ask-lead { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }

/* The inline strip. Deliberately self-contained rather than borrowing .sidebar-panel from
   state.css: the page families that load only this stylesheet can then carry it too. */
.ask-inline { border: 1px solid #155138; padding: 16px; margin: 0 0 28px; }
.ask-inline-title {
  font-family: 'IBM Plex Mono',monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #5A6457; margin-bottom: 12px;
}

/* Past the width of a phone the two buttons sit side by side rather than stacked. Vertical space is
   what this surface spends, and stacked they push the article itself off the first screen. */
@media (min-width: 520px) {
  .ask-inline {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 10px;
    align-items: center;
  }
  .ask-inline-title { grid-column: 1 / -1; margin-bottom: 0; }
  .ask-inline .ask-cta-wa { margin-top: 0; }
  .ask-inline .ask-note { grid-column: 1 / -1; margin-top: 0; }
}

/* Must stay AFTER the rule above, not before it. Both match at 1200px, both set `display` on the
   same selector, so the later one wins and the strip disappears where the rail takes over. Written
   the other way round the grid rule would bring it back and every desktop reader would be asked
   twice on one screen. */
@media (min-width: 1040px) {
  .ask-inline { display: none; }
}

/* ---- /thank-you/ (build/lib/render-thank-you.mjs) -------------------------------------------- */
.thanks-page { max-width: 720px; }
.thanks-next { border: 1px solid #155138; padding: 20px; margin: 28px 0; }
.thanks-next-title {
  font-family: 'IBM Plex Mono',monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #155138; margin-bottom: 8px;
}
.thanks-next p { font-size: 15px; line-height: 1.6; margin: 0 0 16px; }
.thanks-meanwhile { font-size: 14px; line-height: 1.6; color: #5A6457; }
.thanks-meanwhile a { color: #155138; }
/* Same brand green as the block's button, so the two surfaces of one funnel do not disagree about
   what a WhatsApp button looks like. Its label used to be the phone number, which read as a detail
   rather than an action. */
.wa-button {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'IBM Plex Mono',monospace; font-size: 15px; font-weight: 600;
  background: #0B8043; color: #fff; text-decoration: none;
  padding: 13px 22px; border: 1px solid #0A7038; border-radius: 2px; width: fit-content;
}
.wa-button:hover { background: #0A7038; border-color: #095F30; }
.wa-button:focus-visible { outline: 2px solid #0B0F0A; outline-offset: 2px; }
.wa-button .wa-glyph { width: 19px; height: 19px; }

/* ---- the collapsed variant, course lessons only ----------------------------------------------
   A <details>, so it costs no JavaScript, the same mechanism the site already uses for its mobile
   table of contents and its per-fact citations.

   It exists because the block is identical on sixty lessons a reader moves through in sequence. Open
   on each of them it is a screenful of the same offer over and over, which is the fastest way to make
   someone stop reading it at all. On a state guide or an article it stays open: there it is the one
   call to action on a page reached deliberately, and it has earned the space. */
.lead-capture-collapsed { padding: 0; }
.lead-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 16px 20px; cursor: pointer;
  font-family: Archivo,sans-serif; font-size: 17px; font-weight: 600; color: #0B0F0A;
  list-style: none;
}
/* The default marker is replaced rather than kept: a disclosure triangle beside a sentence this long
   reads as a file tree. The chevron is drawn after the text, which is where the eye ends up. */
.lead-summary::-webkit-details-marker { display: none; }
.lead-summary::after {
  content: '▾'; margin-left: auto; color: #155138; font-size: 14px; flex: 0 0 auto;
  transition: transform .15s ease;
}
.lead-capture-collapsed[open] .lead-summary::after { transform: rotate(180deg); }
.lead-summary:hover { background: #EDF4EF; }
.lead-summary:focus-visible { outline: 2px solid #FAC700; outline-offset: -2px; }
.lead-summary-hint {
  font-family: 'IBM Plex Mono',monospace; font-size: 12px; font-weight: 400; letter-spacing: .04em;
  color: #155138; text-transform: uppercase;
}
/* Padding lives on the body rather than the container, so the closed state is one tidy row. */
.lead-capture-body { padding: 4px 20px 24px; border-top: 1px solid #C6D6CA; }
.lead-capture-body > p:first-child { margin-top: 16px; }
@media (max-width: 640px) {
  .lead-summary { padding: 14px 16px; font-size: 16px; }
  .lead-capture-body { padding: 4px 16px 20px; }
}