/* ============================================================================
   THE DOCKET — Talent Crafters design system stylesheet
   Implements DOCKET-SPEC.md §1 (tokens), §3 (component kit), §4 (accessibility).
   Mobile-first. No !important. No external @import — fonts are loaded by
   build.mjs via a <link> tag; this file only declares the font stacks.
   Section banners below mirror the spec's own numbering so a human can jump
   straight from the contract to the rule that implements it.
   ============================================================================ */

/* ============================================================================
   § 1.1–1.2  TOKENS — colour (light default, dark via media query, dark via
   explicit [data-theme] override). Every token in the light block is repeated,
   key-for-key, in BOTH dark blocks — verified by qa/contrast.mjs's parity
   check before any contrast maths runs. Non-colour tokens (§1.3–1.5) are
   theme-invariant but are still repeated in all three blocks for the same
   reason: the spec draws no exception, and a mechanical diff is cheaper than
   a debate about which tokens "count".
   ============================================================================ */

:root{
  /* -- colour: light (approved Docket palette) --

     BRASS DISCIPLINE (spec §2 / audit finding 7): --cta/--cta-hover are
     RESERVED for button fills (.btn) and genuinely interactive affordances
     (hover underlines/borders, the active-nav indicator, the .skip border —
     things that are either clickable or are signalling a clickable thing's
     state). --cta also fails 4.5:1 read as small BODY TEXT (nav-active
     label, ledger numerals), because it was tuned to sit on a filled button
     against --cta-ink, not as text on --bg/--bg-alt. --cta-text is a
     separate, darker brass for exactly that "brass as text" role, so brass
     stays legible without lightening the button fill. Brass is also used a
     few places as plain structural decoration (the .step counter rule, the
     .firewall-strip divider, the footer top border) — those are thin lines,
     never a filled radiused .btn-shaped block, so nothing non-clickable can
     be mistaken for a button. Full audit in the fix report. */
  --bg:               #F6F2E7;
  --bg-alt:           #ECE4D3;
  --surface:          #FFFFFF;
  --surface-sunk:     #F1EBDC;
  --ink:              #171A33;
  --ink-soft:         #2B3050;
  --muted:            #565A70;
  --rule:             #D8CFB8;
  --rule-strong:      #887953; /* darkened from spec's #B9AE92 — needed 3:1 UI-border contrast */
  --seal:             #8C2A20;
  --seal-wash:        #F5E5E1;
  --verdigris:        #2B6E5E;
  --verdigris-wash:   #E3EFEA;
  --cta:              #966D22; /* moved from approved #B8842B — see docket.css header note + report */
  --cta-hover:        #8F651D;
  --cta-ink:          #FFFFFF;
  --cta-text:         #7A5717; /* NEW — brass tuned for small text-on-page use (nav active state, .ledger-row__n): 5.86:1 on --bg, 5.18:1 on --bg-alt. --cta itself stays reserved for fills. */
  --focus:            #1968E6; /* moved from approved #1F5FBF — needed 3:1 against --ink too */
  --on-ink:           #F6F2E7;
  --on-ink-muted:     #B9BDD1;
  --on-ink-verdigris: #4DB39B;
  --on-ink-seal:      #E39288;
  --shadow:           0 1px 2px rgba(23,26,51,.06), 0 8px 24px -12px rgba(23,26,51,.18);

  /* -- NEW: the "slab" pattern — any component with a dark, page-
     interrupting ground (the closing CTA band, the notice/register header
     strips) draws from these instead of hand-rolling
     `background:var(--ink); color:var(--on-ink)`. In light mode the slab
     ground IS --ink; in dark mode --ink is repurposed as body-text colour
     (see §1.2 below), so the slab ground moves to a ground that stays
     visually distinct from --bg. Every slab-based component inherits that
     for free — a future 4th slab component cannot reintroduce the
     ink-on-ink bug, because it never hand-rolls the old pattern. */
  --slab-bg:          var(--ink);
  --slab-ink:         var(--on-ink);
  --slab-muted:       var(--on-ink-muted);
  --slab-seal:        var(--on-ink-seal);
  --slab-verdigris:   var(--on-ink-verdigris);

  /* -- § 1.3 type -- */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-h1:      clamp(2.05rem, 1.35rem + 2.6vw, 3.35rem);
  --t-h2:      clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
  --t-h3:      clamp(1.1rem, .98rem + .45vw, 1.3rem);
  --t-h4:      1.02rem;
  --t-lede:    clamp(1.08rem, 1rem + .4vw, 1.28rem);
  --t-body:    1.0rem;
  --t-small:   .9rem;
  --t-mono:    .75rem;
  --t-mono-lg: .85rem;

  /* -- § 1.4 spacing, measure, radii -- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;    --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;    --s-9: 6rem;

  --wrap:       1120px;
  --wrap-tight: 780px;
  --gutter:     clamp(1.15rem, 4vw, 2.5rem);
  --band-y:     clamp(3rem, 6vw, 5.5rem);

  --measure:       68ch;
  --measure-tight: 58ch;
  --measure-wide:  80ch;

  --radius:    3px;
  --radius-lg: 5px;
  --hairline:  1px;

  /* -- § 1.5 motion -- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .5s;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* -- colour: dark (system preference) -- */
    --bg:               #0E1020;
    --bg-alt:           #161A2D;
    --surface:          #1C2138;
    --surface-sunk:     #232941;
    --ink:              #EDE7D8;
    --ink-soft:         #CFC9BC;
    --muted:            #A2A8C0;
    --rule:             #2E3450;
    --rule-strong:      #6F789F; /* lightened from spec's #454C6C — needed 3:1 UI-border contrast */
    --seal:             #E58C80;
    --seal-wash:        #2E1B1A;
    --verdigris:        #4DB39B;
    --verdigris-wash:   #12302A;
    --cta:              #D9A54A;
    --cta-hover:        #EFC072;
    --cta-ink:          #171A33;
    --cta-text:         var(--cta); /* dark --cta already clears 4.5:1 as text (8.47:1 on --bg, 7.73:1 on --bg-alt) */
    --focus:            #7FB2FF;
    --on-ink:           #EDE7D8;
    --on-ink-muted:     #A2A8C0;
    --on-ink-verdigris: #4DB39B;
    --on-ink-seal:      #E58C80;
    --shadow:           0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);

    --slab-bg:          var(--surface-sunk); /* distinct dark ground — --ink is repurposed as body text here, see §1.2 */
    --slab-ink:         var(--on-ink);
    --slab-muted:       var(--on-ink-muted);
    --slab-seal:        var(--on-ink-seal);
    --slab-verdigris:   var(--on-ink-verdigris);

    /* -- type / spacing / motion: theme-invariant, repeated for token parity -- */
    --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
    --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --t-h1:      clamp(2.05rem, 1.35rem + 2.6vw, 3.35rem);
    --t-h2:      clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
    --t-h3:      clamp(1.1rem, .98rem + .45vw, 1.3rem);
    --t-h4:      1.02rem;
    --t-lede:    clamp(1.08rem, 1rem + .4vw, 1.28rem);
    --t-body:    1.0rem;
    --t-small:   .9rem;
    --t-mono:    .75rem;
    --t-mono-lg: .85rem;

    --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;    --s-5: 1.5rem;
    --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;    --s-9: 6rem;

    --wrap:       1120px;
    --wrap-tight: 780px;
    --gutter:     clamp(1.15rem, 4vw, 2.5rem);
    --band-y:     clamp(3rem, 6vw, 5.5rem);

    --measure:       68ch;
    --measure-tight: 58ch;
    --measure-wide:  80ch;

    --radius:    3px;
    --radius-lg: 5px;
    --hairline:  1px;

    --ease: cubic-bezier(.22,.61,.36,1);
    --dur:  .5s;
  }
}

:root[data-theme="dark"]{
  /* -- colour: dark (explicit override) -- */
  --bg:               #0E1020;
  --bg-alt:           #161A2D;
  --surface:          #1C2138;
  --surface-sunk:     #232941;
  --ink:              #EDE7D8;
  --ink-soft:         #CFC9BC;
  --muted:            #A2A8C0;
  --rule:             #2E3450;
  --rule-strong:      #6F789F; /* lightened from spec's #454C6C — needed 3:1 UI-border contrast */
  --seal:             #E58C80;
  --seal-wash:        #2E1B1A;
  --verdigris:        #4DB39B;
  --verdigris-wash:   #12302A;
  --cta:              #D9A54A;
  --cta-hover:        #EFC072;
  --cta-ink:          #171A33;
  --cta-text:         var(--cta); /* dark --cta already clears 4.5:1 as text (8.47:1 on --bg, 7.73:1 on --bg-alt) */
  --focus:            #7FB2FF;
  --on-ink:           #EDE7D8;
  --on-ink-muted:     #A2A8C0;
  --on-ink-verdigris: #4DB39B;
  --on-ink-seal:      #E58C80;
  --shadow:           0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);

  --slab-bg:          var(--surface-sunk); /* distinct dark ground — --ink is repurposed as body text here, see §1.2 */
  --slab-ink:         var(--on-ink);
  --slab-muted:       var(--on-ink-muted);
  --slab-seal:        var(--on-ink-seal);
  --slab-verdigris:   var(--on-ink-verdigris);

  /* -- type / spacing / motion: theme-invariant, repeated for token parity -- */
  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-h1:      clamp(2.05rem, 1.35rem + 2.6vw, 3.35rem);
  --t-h2:      clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem);
  --t-h3:      clamp(1.1rem, .98rem + .45vw, 1.3rem);
  --t-h4:      1.02rem;
  --t-lede:    clamp(1.08rem, 1rem + .4vw, 1.28rem);
  --t-body:    1.0rem;
  --t-small:   .9rem;
  --t-mono:    .75rem;
  --t-mono-lg: .85rem;

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;    --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;    --s-9: 6rem;

  --wrap:       1120px;
  --wrap-tight: 780px;
  --gutter:     clamp(1.15rem, 4vw, 2.5rem);
  --band-y:     clamp(3rem, 6vw, 5.5rem);

  --measure:       68ch;
  --measure-tight: 58ch;
  --measure-wide:  80ch;

  --radius:    3px;
  --radius-lg: 5px;
  --hairline:  1px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .5s;
}

/* ============================================================================
   § 0. RESET / BASE
   ============================================================================ */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.62;
  overflow-x: hidden;      /* belt-and-braces: no page-level horizontal scroll at 360px */
  overflow-wrap: anywhere; /* long words/URLs never force overflow; inherits to all descendants */
  -webkit-font-smoothing: antialiased;
}
img, svg{ max-width: 100%; height: auto; }
main{ display: block; }
button{ font: inherit; }
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin: 0 0 var(--s-4); }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.14;
  color: var(--ink);
}
h1{ font-size: var(--t-h1); }
h2{ font-size: var(--t-h2); }
h3{ font-size: var(--t-h3); }
h4{ font-size: var(--t-h4); }

a{ color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .15em; }

/* Global focus-visible safety net — every interactive element gets a ring
   that clears 3:1 against BOTH page grounds (--focus/--bg, --focus/--ink are
   both checked by qa/contrast.mjs). Component rules below may refine offset. */
:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ============================================================================
   § 1.25 LAYOUT UTILITIES — .wrap / .band family
   ============================================================================ */

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band{ padding: var(--band-y) 0; background: var(--bg); }
.band--alt{ background: var(--bg-alt); }
.band--sunk{ background: var(--surface-sunk); }

/* § 3.16 — the dark CTA band. Uses the --slab-* pattern (§1.1/§1.2) instead
   of hand-rolled var(--ink)/var(--on-ink) so its dark-mode ground swap is
   automatic — see the --slab-bg token comment. Every colour inside it MUST
   come from a --slab-* (or --on-ink-*) token; grouped selector below is reused
   verbatim by the print block so the override wins the specificity tie there
   too. This same selector list is shared, verbatim, by .notice__bar and
   .register__band below (§3.24/§3.22) — the three components that render a
   dark slab all draw from the identical token set on purpose, so a fourth
   slab component only has to reuse --slab-* to be dark-mode-safe by
   construction, not by remembering to copy an override block. */
.band--ink{ background: var(--slab-bg); color: var(--slab-ink); }
.band--ink :is(h1,h2,h3,h4,p,li,dt,dd,.lede){ color: var(--slab-ink); }
.band--ink .label{ color: var(--slab-muted); }
.band--ink a:not(.btn){ color: var(--slab-ink); }
.band--ink .stat{ color: var(--slab-seal); }
.band--ink .btn--ghost{ border-color: var(--slab-muted); color: var(--slab-ink); }
.band--ink .btn--ghost:hover{ border-color: var(--cta); color: var(--cta); }
.band--ink .status-pill{ border-color: currentColor; }
.band--ink .status-pill[data-status="unresolved"]{ color: var(--slab-seal); }
.band--ink .status-pill[data-status="resolved"]{ color: var(--slab-verdigris); }
.band--ink .ph{ background: var(--surface-sunk); color: var(--muted); }

/* ============================================================================
   § 3.1  .pagehead
   ============================================================================ */

.pagehead{
  position: relative;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--rule-strong);
  padding: var(--band-y) 0 var(--s-7);
}
.pagehead::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--seal);
}
.pagehead h1{ margin-top: var(--s-3); }
.pagehead .lede{ margin-top: var(--s-3); margin-bottom: 0; }

.crumbs{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.crumbs a{ color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover{ border-bottom-color: var(--cta); }
.crumbs [aria-current]{ color: var(--ink); }

.label{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--s-3) 0 var(--s-2);
}

/* ============================================================================
   § 3.3  .head
   ============================================================================ */

.head{ margin-bottom: var(--s-6); }
.head .label{
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-strong);
  margin: 0 0 var(--s-4);
}
.head h2{ margin: 0 0 var(--s-3); }
.head p{ color: var(--ink-soft); max-width: var(--measure); margin: 0; }

/* ============================================================================
   § 3.4  .matrix
   ============================================================================ */

.matrix{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--s-5);
}
.matrix > div{ border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); }
.matrix h3{
  font-family: var(--font-mono);
  font-size: var(--t-mono-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.matrix p{ margin: 0; color: var(--ink-soft); }

/* ============================================================================
   § 3.5  .cards / .card / .go
   ============================================================================ */

/* Flex, not grid: a grid track that no item occupies still reserves its own
   row-width in an incomplete final row (the "8 cards in a 3-up grid leaves a
   phantom 3rd column" bug). Flex-wrap just runs out of items and stops —
   the last row's cards keep their natural size and left-align, with no
   empty track ever drawn — so this degrades cleanly whether a page has 2,
   5, 7, 8 or 10 cards, with no per-count tuning. */
.cards{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.cards > .card{ flex: 1 1 16rem; max-width: 24rem; }
@media (min-width: 900px){
  /* .cards.three still means "3-up, edge to edge" on a full row — but on an
     incomplete final row (e.g. 5 cards → 3+2) the basis holds two cards to
     their normal third-of-row size instead of stretching to fill the row,
     so the same phantom-column problem can't recur here either. */
  .cards.three > .card{
    flex-basis: calc((100% - 2 * var(--s-5)) / 3);
    max-width: calc((100% - 2 * var(--s-5)) / 3);
  }
}
.card{
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.card:hover, .card:focus-visible{ border-left-color: var(--cta); }
.card h3{ margin: 0; font-size: var(--t-h4); font-family: var(--font-display); }
.card p{ margin: 0; color: var(--ink-soft); flex: 1; }
.go{
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cta);
}
/* ============================================================================
   § 3.6  .deflist
   ============================================================================ */

.deflist{ display: grid; gap: var(--s-4); }
.deflist > div{
  display: grid;
  gap: var(--s-1);
  padding-bottom: var(--s-4);
  border-bottom: 1px dotted var(--rule);
}
.deflist > div:last-child{ border-bottom: none; padding-bottom: 0; }
.deflist .label{ margin: 0; }
.deflist p{ margin: 0; color: var(--ink-soft); }
@media (min-width: 720px){
  .deflist > div{
    grid-template-columns: 14rem 1fr;
    gap: var(--s-4);
    align-items: baseline;
    padding-bottom: var(--s-3);
  }
}

/* ============================================================================
   § 3.7  .tblwrap + table
   ============================================================================ */

.tblwrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
table{
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
caption{
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: var(--s-3) var(--s-4);
}
thead th{
  background: var(--surface-sunk);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule-strong);
}
tbody td, tbody th{
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  background: var(--surface);
}
tbody tr:last-child td, tbody tr:last-child th{ border-bottom: none; }
td.mono, td.stat{ white-space: nowrap; }

/* ============================================================================
   § 3.8  .faq / .faqitem — static, never an accordion
   ============================================================================ */

.faq{ display: flex; flex-direction: column; }
.faqitem{ padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.faqitem:first-child{ padding-top: 0; }
.faqitem:last-child{ border-bottom: none; }
.faqitem h2, .faqitem h3{ margin: 0 0 var(--s-2); font-size: var(--t-h4); }
.faqitem p{ margin: 0 0 var(--s-2); color: var(--ink-soft); }
.faqitem p:last-child{ margin-bottom: 0; }

/* ============================================================================
   § 3.9  .callout
   ============================================================================ */

.callout{
  background: var(--surface-sunk);
  border-left: 3px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.callout .label{ margin: 0 0 var(--s-2); }
.callout p:last-child{ margin-bottom: 0; }
.callout--seal{ background: var(--seal-wash); border-left-color: var(--seal); }
.callout--seal .label{ color: var(--seal); }
.callout--verdigris{ background: var(--verdigris-wash); border-left-color: var(--verdigris); }
.callout--verdigris .label{ color: var(--verdigris); }

/* ============================================================================
   § 3.10  blockquote.quote
   ============================================================================ */

blockquote.quote{
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1.3;
  max-width: var(--measure-tight);
  border-left: 3px solid var(--cta);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: var(--s-7) 0;
  color: var(--ink);
}
blockquote.quote p{ margin: 0; }

/* ============================================================================
   § 3.11  .figure / .media-split
   ============================================================================ */

.figure{
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-5);
  margin: 0;
}
.figure .ill, .figure svg{ display: block; width: 100%; height: auto; }
.figure figcaption{
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--muted);
}
.hero-figure{ width: 100%; }

.media-split{ display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 820px){
  .media-split{ grid-template-columns: 1fr 1fr; }
  .media-split.rev > :first-child{ order: 2; }
  .media-split.rev > :last-child{ order: 1; }
}

/* ============================================================================
   § 3.12  .split
   ============================================================================ */

.split{ display: grid; gap: var(--s-6); }
@media (min-width: 820px){
  .split{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* ============================================================================
   § 3.13  .panelcard
   ============================================================================ */

.panelcard{
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s-5);
}

/* ============================================================================
   § 3.14  .article / .artmeta
   ============================================================================ */

.article{ max-width: var(--wrap-tight); }
.article h2{
  border-top: 1px solid var(--rule);
  padding-top: var(--s-4);
  margin-top: var(--s-7);
}
.article h2:first-child{ margin-top: 0; border-top: none; padding-top: 0; }
.artmeta{
  font-family: var(--font-mono);
  font-size: var(--t-mono-lg);
  color: var(--muted);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-5);
}

/* ============================================================================
   § 3.15  .form / .field — styling only; the <form> opening tags are frozen
   ============================================================================ */

.form{ max-width: 34rem; }
.field{ display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.field label{
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.field input,
.field select,
.field textarea{
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  font-family: var(--font-body);
  font-size: 1rem; /* never below 16px — iOS zoom */
  color: var(--ink);
  min-height: 44px;
}
.field textarea{ min-height: 8rem; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.field--check{ flex-direction: row; }
/* The checkbox and its label text are children of ONE <label> so the
   association is native (nesting), not a for/id pair — and so the whole
   row, not just the input, is the click/tap target. The label is a
   wrapping flex row: the input sits on its own axis (fixed size, never
   part of the text's line-wrapping), and the text lives in a single
   wrapping span so it reflows as one paragraph, never interleaved with
   the checkbox mid-line. */
.field--check label{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 44px;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.field--check input{
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  margin-top: .55rem; /* optically aligns with the first line of the wrapping text */
}
.field--check label > span{ flex: 1 1 16rem; min-width: 0; }
/* The "Required" marker must never break mid-word — the page-wide
   overflow-wrap:anywhere reset (see body{}) would otherwise split it
   under a squeezed flex row. Scoped to this row only. */
.field--check .mono{ white-space: nowrap; }

/* Submission failure notice, injected by app.js. Empty until something goes
   wrong, so it must not reserve space or announce itself when blank. */
.form-error:empty{ display: none; }
.form-error{
  margin: 0 0 var(--s-4);
  padding: var(--s-3);
  border-left: 3px solid var(--seal);
  background: var(--seal-wash);
  color: var(--ink);
  font-size: .92rem;
}

/* ============================================================================
   § 3.16  .cta-row / .btn — and the dark CTA band (background rules above)
   ============================================================================ */

.cta-row{ display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .8rem 1.4rem;
  background: var(--cta);
  color: var(--cta-ink);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--t-mono);
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
}
.btn:hover{ background: var(--cta-hover); }
.btn--ghost{ background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn--ghost:hover{ border-color: var(--cta); color: var(--cta); }

/* ============================================================================
   § 3.17  .stat / .ph
   ============================================================================ */

.stat{ color: var(--seal); font-weight: 600; }
.ph{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--muted);
  background: var(--surface-sunk);
  border-bottom: 1px dotted var(--rule-strong);
  border-radius: var(--radius);
  padding: 0 .3rem;
}

/* ============================================================================
   § 3.18  .status-pill
   ============================================================================ */

.status-pill{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: .4rem .75rem;
  min-height: 44px;
  color: var(--seal);
}
.status-pill[data-status="resolved"]{ color: var(--verdigris); }
.status-pill__dot{ width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference){
  .status-pill__dot{ animation: docket-pulse 2s var(--ease) infinite; }
}
@keyframes docket-pulse{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .35; }
}

/* ============================================================================
   § 3.19  .ledger / .ledger-row
   ============================================================================ */

.ledger{ list-style: none; margin: 0; padding: 0; }
.ledger-row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--rule);
}
.ledger-row:last-child{ border-bottom: none; }
.ledger-row__n{
  font-family: var(--font-mono);
  font-size: var(--t-mono-lg);
  color: var(--cta-text);
  padding-top: .2rem;
}
.ledger-row h3{ margin: 0 0 var(--s-2); }
.ledger-row p{ margin: 0; color: var(--ink-soft); }

/* ============================================================================
   § 3.20  .step — four-step process
   ============================================================================ */

.step{
  display: grid;
  gap: var(--s-6);
  counter-reset: docket-step;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step > *{ position: relative; padding-top: var(--s-6); margin: 0; }
.step > *::before{
  counter-increment: docket-step;
  content: counter(docket-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--t-mono-lg);
  color: var(--cta-text); /* brass-as-text, not the button fill — see --cta-text note in §1.1 */
  margin-bottom: var(--s-2);
}
.step > * + *{ border-top: 1px solid var(--rule-strong); }
@media (min-width: 900px){
  /* auto-fit, not a hard 4-up: a 2-item instance (home page's "Reach" /
     "Continuity commitment" pair) fills the row instead of leaving two
     dead columns, while a genuine 4-step page still gets 4 columns at this
     width (4 × 14rem + 3 × gap comfortably fits --wrap). align-items:stretch
     (grid's default, stated explicitly here) equalises each item's height
     to the tallest in its row so mismatched content doesn't look ragged. */
  .step{
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    align-items: stretch;
    gap: var(--s-5);
  }
  .step > *{ padding-top: 0; }
  .step > * + *{ border-top: none; border-left: 1px solid var(--rule-strong); padding-left: var(--s-5); }
}

/* ============================================================================
   § 3.21  .clock family — home only, string-frozen (the id="days" span, see build.mjs)
   ============================================================================ */

.clock{
  background: var(--surface-sunk);
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: var(--band-y) 0;
}
.clock__in{ display: grid; gap: var(--s-3); }
.clock .label{ margin: 0; }
.clock__line{ font-size: var(--t-lede); margin: 0; color: var(--ink); }
.clock__due{ font-weight: 600; }
.clock__days{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  letter-spacing: -.015em;
  color: var(--seal); /* the one place a large number earns seal-red */
}
.clock__meta{ margin: 0; color: var(--ink-soft); }
.clock__foot{
  margin: 0;
  color: var(--muted);
  padding-top: var(--s-3);
  border-top: 1px dotted var(--rule-strong);
}

/* ============================================================================
   § 3.22  .register family — /panel/ only
   ============================================================================ */

.register__band{
  background: var(--slab-bg);
  color: var(--slab-ink);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: var(--s-3) var(--gutter);
}
.register__intro{ padding: var(--s-6) 0; }
.register__intro p{ margin: 0; color: var(--ink-soft); max-width: var(--measure); }

.disclose{ display: grid; gap: var(--s-5); padding-bottom: var(--s-6); }
@media (min-width: 720px){
  .disclose{ grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
.disclose .label{ margin: 0 0 var(--s-2); }

.roll{ padding: var(--s-7) 0; border-top: 1px solid var(--rule); }
.roll:first-of-type{ border-top: none; padding-top: 0; }
.roll__head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.roll__head .label{ margin: 0; }
.roll__head h3{ margin: 0; }
.roll__note{ margin: 0 0 var(--s-4); color: var(--ink-soft); }

.firewall-strip{ position: relative; display: grid; gap: var(--s-6); }
@media (min-width: 720px){
  .firewall-strip{ grid-template-columns: 1fr 1fr; }
  .firewall-strip::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 2px;
    background: var(--cta);
    transform: translateX(-1px);
  }
}

.verify-slip{
  background: var(--surface-sunk);
  border-top: 2px dashed var(--rule-strong);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--s-5);
}

.shebox-slot, .slot{
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4);
}

/* ============================================================================
   § 3.23  .case family — /case-studies/ only
   ============================================================================ */

.case{
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--seal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s-6);
}
.case__cite{
  font-family: var(--font-display);
  font-size: var(--t-h3);
  margin: 0 0 var(--s-2);
  color: var(--ink);
}
.case__cite .mono, .case .mono{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: var(--s-1);
}
.case__body{ margin: var(--s-4) 0; color: var(--ink-soft); }
.case__means{
  background: var(--verdigris-wash);
  border-left: 3px solid var(--verdigris);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-top: var(--s-4);
}
.case__means p{ margin: 0; }

/* ============================================================================
   § 3.24  .notice family — home hero
   ============================================================================ */

.notice{ position: relative; }
.notice__frame{
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--seal);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.notice__bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  background: var(--slab-bg);
  color: var(--slab-ink);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: var(--s-3) var(--s-5);
}
.notice__bar .status-pill{ margin-left: auto; }
.notice__bar .status-pill[data-status="unresolved"]{ color: var(--slab-seal); }
.notice__bar .status-pill[data-status="resolved"]{ color: var(--slab-verdigris); }
.notice__body{ padding: var(--s-6) var(--s-5); }
.notice__body h1{ margin: 0 0 var(--s-4); }
.notice__body .lede{ margin: 0; }

/* ============================================================================
   § 3.25  Utilities: .mono, .lede, .prose, ul.plain, .langs/.lang, .seal-ring
   ============================================================================ */

.mono{
  font-family: var(--font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-size: var(--t-mono);
}
.lede{
  font-size: var(--t-lede);
  max-width: var(--measure-tight);
  color: var(--ink-soft);
}
.prose{ max-width: var(--measure); color: var(--ink); }
.prose:last-child{ margin-bottom: 0; }

ul.plain{ list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-2); }
ul.plain li{ position: relative; padding-left: var(--s-4); color: var(--ink-soft); }
ul.plain li::before{
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: .45rem;
  height: 1px;
  background: var(--rule-strong);
}

.langs{ display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lang{
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .3rem .65rem;
}

.seal-ring{
  position: absolute;
  top: -1.75rem;
  right: clamp(1rem, 4vw, 2.5rem);
  z-index: 2;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  border: 2px solid var(--seal);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .62rem;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--seal);
}
@media (max-width: 640px){
  .seal-ring{ display: none; } /* decorative + aria-hidden: safe to drop on small screens */
}

/* ============================================================================
   HEADER / MASTHEAD, FOOTER, MOBILE NAV, SKIP LINK
   (folded into this file per the build note — build.mjs no longer ships its
   own CSS for these; they were previously appended at build time.)
   ============================================================================ */

.skip{
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--cta);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
}
.skip:focus{
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

.masthead{
  position: relative;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.masthead__in{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-4) 0;
}
.brandlogo{
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  border-radius: var(--radius);
}
.brandlogo img{
  display: block;
  height: 34px;
  width: auto;
}
.est{
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
nav.top{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-left: auto;
}
nav.top a{
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: .2rem;
}
nav.top a:hover{ border-bottom-color: var(--cta); }
nav.top a[aria-current="page"]{ border-bottom-color: var(--cta); color: var(--cta-text); }

.nav-toggle{
  display: none;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 680px){
  .nav-toggle{ display: inline-flex; }
  .est{ display: none; }
  .masthead__in{ gap: var(--s-2) var(--s-4); }
  nav.top{
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    margin-top: var(--s-3);
    margin-left: 0;
  }
  nav.top.open{ display: flex; }
  nav.top a{
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .7rem 0;
    border-bottom: 1px solid var(--rule);
  }
}
@media (max-width: 400px){
  .brandlogo img{ height: 28px; }
}

/* Logo dark-mode treatment: the PNG is dark ink on transparent, so it
   disappears on a dark ground. A fixed light "plate" behind it (not a CSS
   filter) keeps the wordmark's real colours legible without distortion —
   the plate colour is intentionally literal, not a theme token, because its
   entire job is to stay light regardless of theme. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brandlogo{
    background: #F6F2E7;
    padding: .3rem .55rem;
  }
}
:root[data-theme="dark"] .brandlogo{
  background: #F6F2E7;
  padding: .3rem .55rem;
}

footer{
  background: var(--bg-alt);
  border-top: 3px solid var(--cta);
  padding: var(--s-8) 0 var(--s-6);
}
.foot-grid{ display: grid; gap: var(--s-6); grid-template-columns: 1fr; }
@media (min-width: 760px){
  .foot-grid{ grid-template-columns: 1fr 1fr; }
}
/* Four columns from 1024px up: the address block plus POSH / Firm / Other
   services. Below that they stack two-up rather than squeezing to ~150px each. */
@media (min-width: 1024px){
  .foot-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.foot-grid h2{
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 var(--s-3);
}
.foot-grid p{ margin: 0 0 var(--s-2); color: var(--ink-soft); }
/* Scoped to the nav-style column link lists ONLY (direct-child <a>s of a
   .foot-grid column) — NOT `.foot-grid a` broadly. The address column's
   tel:/wa.me/mailto: links live inside a <p> alongside plain text ("·", "(",
   ")"); those <a>s are descendants of that <p>, not direct children of the
   column div, so this selector never catches them and they stay inline. */
.foot-grid > div > a{
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: .15rem 0;
}
.foot-grid a:hover{ color: var(--cta); }
/* Privacy/Terms are wrapped in .foot-legal so they sit on one line as a
   pair — nesting them takes them out of the `.foot-grid > div > a` direct-
   child selector above (which forces one link per full-width row), so they
   need their own row-flex treatment instead of stacking. */
.foot-legal{ display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.foot-legal a{
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: .15rem 0;
}
.foot-legal a:hover{ color: var(--cta); }

.colophon{
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ============================================================================
   § 1.5  MOTION — reveal system, and its mandatory fallbacks
   ============================================================================ */

[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  /* --reveal-i is a page-wide counter (reaches 20+ on longer pages), not a
     per-section index — capped at 5 so the delay never grows past 100ms
     regardless of how far down the page an element sits. Duration is a
     dedicated .3s here (not --dur, which is .5s and governs hover/other
     transitions elsewhere) so worst case delay+duration is 400ms: nothing
     takes longer than ~400ms to reach full opacity after entering the
     viewport, however high --reveal-i climbs. */
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  transition-delay: calc(min(var(--reveal-i, 0), 5) * 20ms);
}
[data-reveal].is-in{ opacity: 1; transform: none; }

/* No-JS fallback: app.js adds .js to <html> as its first statement. If JS
   never runs, [data-reveal] content must still be visible. */
html:not(.js) [data-reveal]{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .status-pill__dot{ animation: none; }
  .card, .btn, .btn--ghost{ transition: none; }
}

@media (max-width: 768px){
  [data-reveal]{ transition-duration: 0s; transition-delay: 0s; transform: none; }
}

/* ============================================================================
   PRINT — hide chrome, flatten to black-on-white, surface link URLs.
   Kept short deliberately; the old sheet had no print styles at all.
   ============================================================================ */

@media print{
  .masthead, .nav-toggle, .skip, .cta-row{ display: none; }
  body{ background: #fff; }
  .band--ink{ background: #fff; }
  .band--ink :is(h1,h2,h3,h4,p,li,dt,dd,.lede),
  .band--ink .label,
  .band--ink a:not(.btn),
  .band--ink .stat{ color: #000; }
  .card, .panelcard, .notice__frame, .figure, .case, .callout{ box-shadow: none; }
  a{ color: #000; }
  a[href^="http"]::after{
    content: " (" attr(href) ")";
    font-size: .85em;
    color: #333;
  }
  .wrap{ max-width: 100%; }
}


/* ============================================================================
   § 3.30  .wa — floating WhatsApp enquiry
   ============================================================================
   The only position:fixed component on the site. z-index 50 puts it above the
   masthead (40) but below the skip link (100), so keyboard users still reach
   "Skip to content" first.

   Colour: background --verdigris with --bg as the foreground. Both tokens
   inverse together across themes, so the pair stays legible without a
   dedicated token — 5.37:1 in light (#F6F2E7 on #2B6E5E) and 7.40:1 in dark
   (#0E1020 on #4DB39B). Do not hard-code either value.

   The trigger is a real <a href="https://wa.me/..."> carrying a usable
   fallback message, upgraded by app.js into a panel toggle. With JS off it
   still opens WhatsApp — the panel is an enhancement, never the only path. */
/* display:flex on a container beats the UA sheet's [hidden]{display:none},
   so any hidden descendant here needs saying explicitly. */
.wa [hidden]{ display: none !important; }
.wa{
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-3);
}
.wa__fab{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: .7rem 1.1rem;
  background: var(--verdigris);
  color: var(--bg);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 0 2px 12px rgb(0 0 0 / .20);
  cursor: pointer;
}
.wa__fab:hover{ background: var(--ink); color: var(--bg); }
.wa__fab svg{ width: 20px; height: 20px; flex: none; fill: currentColor; }

/* The wordmark is dropped on narrow screens; the icon plus aria-label carries
   the meaning, and a 48px circle keeps the tap target legal. */
@media (max-width: 559px){
  .wa__fab{ padding: 0; width: 48px; justify-content: center; }
  .wa__fab-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

.wa__panel{
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(30rem, calc(100vh - 8rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  box-shadow: 0 6px 28px rgb(0 0 0 / .22);
  padding: var(--s-5);
}
.wa__head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.wa__title{
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.wa__close{
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}
.wa__close:hover{ color: var(--ink); }
.wa__panel .field{ margin-bottom: var(--s-3); }
.wa__panel .btn{ width: 100%; }
.wa__note{
  margin: var(--s-3) 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}
.wa__note a{ color: inherit; }