/* 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 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; }
.lead-legend {
  font-family: 'IBM Plex Mono',monospace; font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: #5A6457; padding: 0; margin-bottom: 12px;
}
/* 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;
  border: 1px solid #E2E6DF; padding: 14px 16px; cursor: pointer;
}
.lead-topic:hover { border-color: #155138; }
.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; }

/* One row on a wide screen, stacked on a narrow one. The button never shrinks below its label. */
.lead-fields { display: grid; gap: 12px; align-items: end; }
@media (min-width: 620px) { .lead-fields { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .lead-fields { grid-template-columns: 1fr 1fr 1fr auto; } }
@media (min-width: 620px) {
  .lead-fields { grid-template-columns: 1fr 1fr auto; }
}
.lead-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lead-field-label {
  font-family: 'IBM Plex Mono',monospace; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #5A6457;
}
.lead-optional {
  font-weight: 400; letter-spacing: 0; text-transform: none; color: #8A8F86;
}
.lead-input {
  font-family: inherit; font-size: 16px; /* 16px keeps iOS from zooming the viewport on focus */
  padding: 11px 12px; border: 1px solid #C9D0C5; border-radius: 2px; background: #fff;
  width: 100%; box-sizing: border-box;
}
.lead-input:focus-visible { outline: 2px solid #FAC700; 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: 12px 24px; cursor: pointer; white-space: nowrap;
}
.lead-send:hover { background: #0E3A28; border-color: #0E3A28; }
.lead-send:focus-visible { outline: 2px solid #FAC700; outline-offset: 2px; }

.lead-note { font-size: 13px; color: #5A6457; line-height: 1.55; margin: 16px 0 0; }
.lead-alt { font-size: 14px; line-height: 1.6; margin: 10px 0 0; }
.lead-alt a { color: #155138; }
.lead-wa { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.lead-wa:hover { text-decoration: underline; }
.wa-glyph { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }

/* Sidebar panel. Not a second form: it jumps to the block below, which is the placement the
   measurement asks for, since readers leave mid-page through a citation link. */
.sidebar-panel-ask { border-color: #155138; }
.sidebar-ask-lead { font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.sidebar-ask-button {
  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;
}
.sidebar-ask-button:hover { background: #0E3A28; }
.sidebar-ask-note {
  font-family: 'IBM Plex Mono',monospace; font-size: 12px; line-height: 1.45; color: #5A6457;
  margin: 10px 0 0;
}

/* ---- /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; }
.wa-button {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'IBM Plex Mono',monospace; font-size: 14px; font-weight: 600;
  background: #155138; color: #fff; text-decoration: none;
  padding: 12px 18px; border: 1px solid #155138; border-radius: 2px; width: fit-content;
}
.wa-button:hover { background: #0E3A28; border-color: #0E3A28; }
.wa-button:focus-visible { outline: 2px solid #FAC700; outline-offset: 2px; }