/* Scoped to /sf-182 and /sf-182/sign only. Everything reuses the site's custom
   properties from styles.css, so this file carries layout and nothing about
   brand colour. Loaded per page rather than added to styles.css: it is a form
   UI no other page has, and every other page would pay for it. */

.sf-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Prose does not get the full 1320px. Only the grids do. */
.sf-info > .sf-wrap > p, .sf-panel > .sf-wrap > p { max-width: 74ch; }

/* Hero */
.sf-hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: 56px 0 52px; }
.sf-hero h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; text-wrap: balance; }
/* Same shape as the vertical pages: copy left, the thing you came for on
   the right. There the right column is a photo; here it is the two PDF
   downloads, which are what a search for "SF-182" is actually after. */
.sf-herogrid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 48px; align-items: center; }
.sf-herocopy { min-width: 0; }
.sf-herodl { min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px; padding: 22px 22px 20px; box-shadow: 0 20px 46px rgba(0,0,0,.28); }
.sf-herodl .sf-dl-h { color: #fff; font-size: 19px; margin: 0 0 14px; }
.sf-herodl .sf-dl-row { grid-template-columns: 1fr; gap: 10px; }
.sf-herodl .sf-dl-n { color: rgba(255,255,255,.72); margin: 14px 0 0; }
.sf-herocta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.sf-herocta .btn-ghost { border: 1px solid rgba(255,255,255,.55); color: #fff; background: transparent; }
.sf-herocta .btn-ghost:hover { background: rgba(255,255,255,.1); }
.sf-lede { font-size: 18px; line-height: 1.6; margin: 18px 0 0; color: #dbe6f2; max-width: 68ch; }
.sf-meta { font-size: 14.5px; margin: 20px 0 0; color: #b9cbe0; }
.sf-hero a { color: #fff; text-decoration: underline; }

/* Practice areas. Three across on desktop, one on a phone. auto-fill rather
   than a fixed column count so the last row does not strand a lone card. */
.sf-areas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin: 22px 0 0; padding: 0; list-style: none;
}
.sf-areas .sf-area-card {
  display: block; height: 100%; padding: 16px 18px; text-decoration: none;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 10px;
}
.sf-areas .sf-area-card:hover { border-color: var(--accent); text-decoration: none; }
.sf-area-t { display: block; font-size: 16px; font-weight: 800; color: var(--navy); }
.sf-area-n { display: block; font-size: 13px; font-weight: 700; color: var(--accent); margin: 3px 0 0; }
.sf-area-p { display: block; font-size: 14px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }

/* Vendor identifiers, in the stat-band shape the vertical pages use. These are
   the five things an agency has to copy off us and cannot look up on the form
   itself, so they earn the spot directly under the hero. */
.sf-facts { background: var(--panel); border-bottom: 1px solid var(--line); padding: 22px 0; }
.sf-factrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.sf-factrow li { text-align: center; }
.sf-fact-n { display: block; font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.sf-fact-l { display: block; font-size: 12.5px; color: #5c6e80; margin: 3px 0 0; }
@media (max-width: 760px) {
  .sf-factrow { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .sf-factrow li:last-child { grid-column: 1 / -1; }
}

/* Chooser */
.sf-choose { padding: 48px 0 8px; }
.sf-h2 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; color: var(--navy); margin: 0 0 12px; }
.sf-h3 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 32px 0 12px; }
.sf-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 22px 0 0; }
.sf-card {
  display: block; text-align: left; font: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 22px; color: var(--ink);
}
.sf-card:hover { border-color: var(--accent); }
.sf-card[aria-expanded="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sf-card-h { display: block; font-size: 18px; font-weight: 800; color: var(--navy); }
.sf-card-p { display: block; font-size: 15px; color: var(--muted); margin: 8px 0 0; line-height: 1.55; }
.sf-card-go { display: block; font-size: 14.5px; font-weight: 700; color: var(--accent); margin: 14px 0 0; }
.sf-alt { font-size: 14.5px; color: var(--muted); margin: 20px 0 0; }

/* Panels */
.sf-panel { padding: 8px 0 56px; }
.sf-panel[hidden] { display: none; }
.sf-note { font-size: 15.5px; color: var(--muted); margin: 10px 0 26px; max-width: 70ch; }
.sf-help { font-size: 13.5px; color: var(--muted); margin: 12px 0 0; }

/* Form */
.sf-fs { border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px 22px; margin: 0 0 18px; }
.sf-fs legend { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); padding: 0 8px; }
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-span { grid-column: 1 / -1; }
.sf-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--subtle); margin-bottom: 5px; }
.sf-field input, .sf-field textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px 12px; background: #fff;
}
.sf-field textarea { resize: vertical; }
.sf-field input:focus, .sf-field textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent); }
.sf-field input[aria-invalid="true"] { border-color: var(--red); }
.sf-req { color: var(--red); margin-left: 2px; }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sf-radios { display: grid; gap: 10px; margin: 0 0 18px; }
.sf-radio { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; cursor: pointer; }
.sf-radio input { margin: 3px 0 0; flex: none; }
.sf-radio:has(input:checked) { border-color: var(--accent); background: var(--panel); }

.sf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; align-items: center; }
.btn-ghost-dark { background: transparent; color: var(--navy); border: 1px solid var(--border-strong); }
.btn-ghost-dark:hover { border-color: var(--navy); }
.sf-consent { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.sf-error { font-size: 14.5px; color: var(--red); font-weight: 700; margin: 14px 0 0; }
.sf-error[hidden] { display: none; }

/* Preview: deliberately looks like a document, not like the form they just
   filled in, so "check this" reads as a different act from "type this". */
.sf-preview-doc { border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.sf-pv-sec { border-bottom: 1px solid var(--line); }
.sf-pv-sec:last-child { border-bottom: 0; }
.sf-pv-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--navy); padding: 8px 16px; margin: 0; }
.sf-pv-rows { display: grid; grid-template-columns: 240px 1fr; }
.sf-pv-k { font-size: 13px; font-weight: 700; color: var(--subtle); padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.sf-pv-v { font-size: 15px; padding: 10px 16px; border-bottom: 1px solid var(--line); word-break: break-word; }
.sf-pv-rows > :nth-last-child(-n+2) { border-bottom: 0; }
.sf-pv-empty { color: var(--muted); font-style: italic; }

/* Upload */
.sf-drop { border: 2px dashed var(--border-strong); border-radius: 10px; padding: 40px 24px; text-align: center; background: var(--panel); margin: 0 0 18px; }
.sf-drop.is-over { border-color: var(--accent); background: #eaf2fb; }
.sf-drop-h { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0; }
.sf-drop-p { font-size: 15px; color: var(--muted); margin: 8px 0 0; }
.sf-drop-file { font-size: 15px; font-weight: 700; color: var(--navy); margin: 14px 0 0; }
.sf-drop-file[hidden] { display: none; }
.sf-linkbtn { font: inherit; font-size: 15px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* Result panels */
.sf-result { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: var(--panel); }
.sf-result p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; }
.sf-result p:last-child { margin-bottom: 0; }
.sf-linkbox { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.sf-linkbox input { flex: 1 1 320px; font: inherit; font-size: 14px; border: 1px solid var(--border-strong); border-radius: 6px; padding: 9px 11px; background: #fff; }
.sf-flags { margin: 14px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.sf-flags h4 { margin: 0 0 8px; font-size: 14px; color: var(--navy); }
.sf-flags ul { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.6; }
.sf-ok { color: var(--navy); font-weight: 700; }

/* Prose */
.sf-info { background: #fff; padding: 56px 0; border-top: 1px solid var(--line); }
.sf-prose h2 { font-size: 21px; font-weight: 800; color: var(--navy); margin: 32px 0 10px; }
.sf-prose h2:first-child { margin-top: 0; }
.sf-prose p, .sf-prose li { font-size: 16px; line-height: 1.7; color: var(--ink); }
.sf-prose ul { padding-left: 22px; }
.sf-prose li { margin: 0 0 8px; }

@media (max-width: 720px) {
  .sf-cards { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr; }
  .sf-pv-rows { grid-template-columns: 1fr; }
  .sf-pv-k { border-bottom: 0; padding-bottom: 0; background: #fff; }
  .sf-pv-v { padding-top: 4px; }
}

/* ---- typeahead ---------------------------------------------------------- */
/* The list is positioned against .sf-ta rather than the field, so the label
   does not push it out of alignment. */
.sf-ta { position: relative; }
.sf-ta-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(6,21,43,.14);
  max-height: 320px; overflow-y: auto;
}
.sf-ta-list[hidden] { display: none; }
.sf-ta-opt { padding: 9px 11px; border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1.35; }
.sf-ta-opt[aria-selected="true"], .sf-ta-opt:hover { background: var(--panel); }
.sf-ta-opt b { color: var(--navy); }
.sf-ta-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sf-ta-empty { padding: 10px 11px; font-size: 14.5px; color: var(--muted); }

.sf-field select {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 10px 12px;
}
.sf-field select:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent); }
.sf-field select:disabled { background: var(--panel); color: var(--muted); }
.sf-opt { font-weight: 400; text-transform: none; color: var(--muted); font-size: 12px; }

/* ---- signature pad ------------------------------------------------------ */
.sf-sig { margin: 20px 0 0; }
.sf-sig-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sf-sig-label { font-size: 12.5px; font-weight: 700; color: var(--subtle); }
.sf-sig-pad {
  display: block; width: 100%; height: 180px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: #fff;
  /* The pad must own the gesture or a touch drag scrolls the page instead of
     drawing, which is the whole interaction on a phone. */
  touch-action: none; cursor: crosshair;
}
.sf-sig-pad.is-empty { background:
  linear-gradient(#fff,#fff) padding-box,
  repeating-linear-gradient(45deg, #f7f9fc 0 8px, #fff 8px 16px) border-box; }

/* ---- sign page: the result panel used to sit under a full-height hero with
   a wide gap. Tighten the band and give the confirmation real room. -------- */
.sf-hero-slim { padding: 40px 0 34px; }
.sf-hero-slim h1 { font-size: clamp(26px, 3.4vw, 36px); }
.sf-hero-slim .sf-lede { font-size: 16.5px; margin-top: 12px; }
#sign-panel { padding: 34px 0 64px; }
#sign-done .sf-result { margin-top: 4px; }
#sign-done .sf-h2 { margin-bottom: 14px; }

/* Delivery-mode radios sit side by side: two short choices read better as a
   row than as a stack, and it keeps the Section B grid from getting tall. */
.sf-radios-row { grid-template-columns: 1fr 1fr; display: grid; }
.sf-lab { display: block; font-size: 12.5px; font-weight: 700; color: var(--subtle); margin-bottom: 6px; }
#f-mode-wrap[hidden] { display: none; }
@media (max-width: 720px) { .sf-radios-row { grid-template-columns: 1fr; } }

/* The hidden attribute has to win.
   [hidden] { display: none } comes from the user-agent stylesheet, and an
   author rule beats the UA origin no matter how weak its specificity. So
   `.sf-grid { display: grid }` silently defeated `officialFields.hidden = true`
   and the approving-official fields stayed on screen, 271px tall, for anyone
   who chose "I am the approving official". Same trap waits for any future
   element that gets both a display rule and a hidden toggle, which is why this
   is scoped to the page rather than to the one class that hit it. */
[hidden] { display: none !important; }

/* Take-away downloads. Two options because the thing an agency cannot look up
   is Section B, our vendor block; the plain form is here for anyone whose
   office insists on an untouched copy. */
.sf-dl { margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--sf-border, #dfe7ef); }
/* A real heading, not an uppercase micro-label: this block is what someone
   searching for the fillable PDF came for, so it gets a heading crawlers and
   skim-readers both see. */
.sf-dl-h { margin: 0 0 14px; font-size: 20px; line-height: 1.3; color: var(--navy); font-weight: 800; }
.sf-dl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sf-dl-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #dfe7ef; border-radius: 10px; padding: 18px 20px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sf-dl-card:hover { border-color: #9db4ca; box-shadow: 0 2px 10px rgba(6, 21, 43, .07); }
.sf-dl-card:focus-visible { outline: 2px solid #003e75; outline-offset: 2px; }
.sf-dl-t { font-weight: 700; color: #06152b; font-size: .98rem; line-height: 1.35; }
.sf-dl-p { font-size: .87rem; line-height: 1.6; color: #44566b; }
.sf-dl-go { margin-top: auto; padding-top: 6px; font-size: .82rem; font-weight: 700; color: #003e75; }
.sf-dl-go::after { content: " \2193"; }
.sf-dl-n { margin: 14px 0 0; font-size: .82rem; line-height: 1.6; color: #5c6e80; }
@media (max-width: 720px) { .sf-dl-row { grid-template-columns: minmax(0, 1fr); } }

/* ---- Reference material below the form ----
   This used to be one long prose block. It is the part a training officer
   actually scans rather than reads, so it is set as components: the values
   they have to copy, the places they have to look things up, the six sections
   of the form, and the questions that come in by phone. */

.sf-h2 + .sf-note { margin-top: 0; }
.sf-note-tight { margin-top: 14px; }

/* Copyable vendor block */
.sf-vend { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; margin: 20px 0 44px; }
.sf-vend-block { background: #fff; border: 1px solid #dfe7ef; border-radius: 12px; padding: 22px 24px; }
.sf-vend-alt { background: #f5f8fb; }
.sf-vend-h { margin: 0 0 4px; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: #5c6e80; font-weight: 800; }
.sf-vend-n { margin: 16px 0 0; font-size: .84rem; line-height: 1.6; color: #5c6e80; }
.sf-vend-n a { color: #003e75; text-decoration: underline; text-underline-offset: 2px; }
.sf-copy { margin: 0; }
.sf-copy-row { padding: 12px 0; border-bottom: 1px solid #eef2f7; }
.sf-copy-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sf-copy dt { font-size: .76rem; color: #5c6e80; font-weight: 600; margin: 0 0 5px; }
.sf-copy dd { margin: 0; display: flex; align-items: flex-start; gap: 10px; }
.sf-copy-v { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.45; color: #10243d; font-weight: 600; word-break: break-word; }
.sf-copy-b {
  flex: none; font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; cursor: pointer; color: #003e75; background: #eef4fa;
  border: 1px solid #d5e2ee; border-radius: 6px; padding: 6px 11px; min-height: 28px; min-width: 58px;
}
.sf-copy-b:hover { background: #e2ecf7; }
.sf-copy-b:focus-visible { outline: 2px solid #003e75; outline-offset: 2px; }
.sf-copy-b.is-done { background: #06152b; border-color: #06152b; color: #fff; }

/* Where to look things up */
.sf-find { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0 0; }
.sf-find-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #dfe7ef; border-radius: 11px; padding: 18px 20px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.sf-find-card:hover { border-color: #9db4ca; box-shadow: 0 2px 10px rgba(6, 21, 43, .07); }
.sf-find-card:focus-visible { outline: 2px solid #003e75; outline-offset: 2px; }
.sf-find-t { font-weight: 700; color: #06152b; font-size: .98rem; line-height: 1.3; }
.sf-find-p { font-size: .85rem; line-height: 1.55; color: #44566b; }
.sf-find-go { margin-top: auto; padding-top: 6px; font-size: .8rem; font-weight: 700; color: #003e75; }
.sf-find-go::after { content: " \2192"; }

/* The six sections of the form */
.sf-sections { list-style: none; margin: 20px 0 44px; padding: 0; display: grid; gap: 2px; background: #dfe7ef; border: 1px solid #dfe7ef; border-radius: 12px; overflow: hidden; }
.sf-sections li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 18px; background: #fff; padding: 18px 22px; align-items: start; }
.sf-sec-k { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--red); color: #fff; font-size: 1.15rem; font-weight: 800; }
.sf-sections h3 { margin: 0 0 4px; font-size: 1rem; color: #06152b; }
.sf-sections p { margin: 0; font-size: .92rem; line-height: 1.65; color: #44566b; }
.sf-sections strong { color: #10243d; }

/* Copy beside a photo, the same shape the vertical pages use for .sec-grid.
   The image is the only one on the page, so it earns the process section
   rather than being sprinkled around for decoration. */
.sf-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; margin: 0 0 48px; }
.sf-split-copy { min-width: 0; }
.sf-split-media { min-width: 0; }
.sf-split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; box-shadow: 0 16px 40px rgba(3, 62, 117, .16); display: block; }
.sf-steps { margin: 16px 0 0; padding: 0 0 0 20px; display: grid; gap: 13px; }
.sf-steps li { font-size: .95rem; line-height: 1.62; color: #44566b; padding-left: 4px; }
.sf-steps strong { color: #10243d; }
@media (max-width: 900px) {
  .sf-split { grid-template-columns: 1fr; gap: 28px; }
  .sf-split-media { order: -1; }
}

/* FAQ */
.sf-faq { max-width: 84ch; border-top: 1px solid #dfe7ef; margin: 20px 0 44px; }
.sf-faq details { border-bottom: 1px solid #dfe7ef; }
.sf-faq summary { cursor: pointer; padding: 17px 40px 17px 0; font-size: 1rem; font-weight: 600; color: #06152b; position: relative; list-style: none; }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #5c6e80; border-bottom: 2px solid #5c6e80; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.sf-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.sf-faq summary:focus-visible { outline: 2px solid #003e75; outline-offset: 2px; }
.sf-faq details > div { padding: 0 40px 19px 0; }
.sf-faq p { margin: 0; color: #44566b; line-height: 1.7; }
.sf-faq a { color: #003e75; text-decoration: underline; text-underline-offset: 2px; }

/* Blockers list */
.sf-block { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; max-width: 88ch; }
.sf-block li { position: relative; padding-left: 20px; font-size: .94rem; line-height: 1.65; color: #44566b; }
.sf-block li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #d21437; }
.sf-block strong { color: #10243d; }
.sf-block a { color: #003e75; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1080px) {
  .sf-vend { grid-template-columns: minmax(0, 1fr); }
  .sf-find { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sf-find { grid-template-columns: minmax(0, 1fr); }
  .sf-vend-block { padding: 18px 20px; }
  .sf-sections li { grid-template-columns: 46px minmax(0, 1fr); gap: 13px; padding: 16px 18px; }
  .sf-sec-k { width: 36px; height: 36px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sf-faq summary::after, .sf-find-card { transition: none; } }

/* Every link inside the reference prose gets an underline. Navy on the body
   grey is about 2.2:1, well under the 3:1 that would let colour carry it on
   its own (WCAG 1.4.1), and this section is nearly all prose. */
.sf-info a:not(.sf-find-card):not(.sf-dl-card):not(.sf-area-card) {
  color: #003e75;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Disabled buttons must look disabled. .btn had no disabled state, so a submit
   button mid-request stayed full brand red, kept cursor: pointer and still
   lifted on hover while doing nothing. The site already does this for its own
   controls (.lead-submit:disabled, .gal-btn:disabled); .btn was the gap. */
.btn:disabled,
.btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; }

/* A read-only field that looks editable invites people to type in it. The
   signing link is the only one on the page. */
.sf-linkbox input[readonly] { background: var(--panel); color: var(--subtle); }

.sf-prose-lead { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }

@media (max-width: 900px) {
  .sf-herogrid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- the optional agency block ----------
   Every field in here is one only the requester's agency reliably knows. It is
   collapsed by default and nothing in it is required: on the nine real forms
   agencies sent us, Section F was blank on 9, the CSA indicator answered on 1,
   and a real station symbol appeared on 1. Making any of it required would stop
   a submission over a box the agency itself routinely leaves empty. */
.sf-fs-optional { border-style: dashed; }
/* A closed <details> hides its non-summary children through a UA rule, and a UA
   rule loses to any author rule. `.sf-grid { display: grid }` therefore leaves
   the whole block rendered while the disclosure reports itself closed. This is
   the same shape as the `[hidden]` bug already fixed further up this file, and
   it is invisible in review because the markup looks right. */
.sf-fs-optional > details:not([open]) > *:not(summary) { display: none !important; }
.sf-fs-optional > details > summary {
  cursor: pointer; list-style: none; padding: 2px 0 2px 26px; position: relative;
  border-radius: 6px;
}
.sf-fs-optional > details > summary::-webkit-details-marker { display: none; }
.sf-fs-optional > details > summary::before {
  content: "+"; position: absolute; left: 4px; top: 0;
  font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--accent);
}
.sf-fs-optional > details[open] > summary::before { content: "\2212"; }
.sf-fs-optional > details > summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sf-sum-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--navy); }
.sf-sum-sub { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; max-width: 62ch; }
.sf-opt-grid { margin-top: 18px; }
.sf-opt-foot { border-top: 1px solid var(--line); padding-top: 12px; max-width: 70ch; }

/* Block references, so a requester holding the paper form can find the box. */
.sf-blk { font-weight: 400; text-transform: none; color: var(--muted); font-size: 11.5px; margin-left: 4px; }

/* Four short boxes on one row on desktop, two up on narrow screens. */
.sf-quad { grid-column: span 1; }
@media (min-width: 720px) { .sf-opt-grid { grid-template-columns: repeat(4, 1fr); } .sf-quad { grid-column: span 1; } .sf-opt-grid > .sf-field:not(.sf-quad):not(.sf-span) { grid-column: span 2; } }

/* The explanation for the option currently selected. Empty until something is
   chosen, so it does not occupy space by default. */
.sf-optnote { margin-top: 8px; }
.sf-optnote:empty { display: none; }

/* The full code list. A hover tooltip cannot explain 28 options, and cannot be
   reached by touch or by keyboard at all, so the meanings live in a disclosure
   that anyone can open. */
.sf-codes { margin-top: 8px; }
.sf-codes > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.sf-codes > summary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.sf-codes dl { margin: 10px 0 0; font-size: 13px; max-height: 260px; overflow-y: auto; padding-right: 6px; }
.sf-codes dt { font-weight: 700; color: var(--navy); margin-top: 9px; }
.sf-codes dt:first-child { margin-top: 0; }
.sf-codes dd { margin: 2px 0 0; color: var(--muted); }

/* The two boxes that actually bounce a form.
   Amber rather than red: this is a warning about what the agency will probably
   do, not an error in what the requester typed, and it never blocks. */
.sf-warn {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #b7791f;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fffbeb;
  color: #4a3410;
  font-size: 14px;
  line-height: 1.55;
}
.sf-warn strong { display: block; margin-bottom: 4px; color: #3d2a08; }
@media (prefers-color-scheme: dark) {
  .sf-warn { background: rgba(183, 121, 31, .12); color: #f3e6cd; }
  .sf-warn strong { color: #fff4de; }
}