/* ═══════════════════════════════════════════════════════════════════════
   support.bankwriter.com — stylesheet
   Ported from the approved design system (subdomains/mockups-fable/
   bw-mock.css + concept-inkboard-*.html), stripped of everything
   portal-only.

   BOTH THEMES, DARK BY DEFAULT — owner ruling 2026-07-28, the "inkboard"
   redesign. The theme comes from the explicit header toggle and is
   remembered in localStorage; there is deliberately NO
   `prefers-color-scheme` rule anywhere in this file. The earlier
   "light only, never a dark block" rule was written because a docs site
   followed the reader's OS theme uninvited — a deliberate default plus a
   visible switch is a different thing.

   Every text/ground pair is WCAG-measured >= 4.5:1 (most >= 5.5:1).
   #6AA575 (--green) and #8E938A (--faint) are fills/ornament ONLY — never
   words, in either theme. Green type is --green-text: #49724D on light,
   #B4D98C on dark. The smallest mono on ink is #8F8D84 (5.9:1).

   build.py generates the page bodies, so these class names are a CONTRACT
   with it and cannot be renamed here alone: .callout / .callout.warn,
   .steps, .shot + .shot-box/.shot-tag/.shot-cap, .fig + figcaption
   (the figure/insert wrapper), .pill.ok / .pill.rv, plus ordinary markdown
   output (h2-h4, p, ul, ol, table, code, pre, blockquote, hr, a, img).
   Everything this redesign adds is namespaced `ib-` — bw-mock's bare
   `.foot` is proof of how far an unnamespaced class travels.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#F5F4EE; --surface:#FFFFFF; --outer:#E7E5DC; --alt:#FAF9F3;
  --ink:#0B0B0B; --ink2:#161616;
  --muted:#3E523F;          /* secondary text — 7.7:1 on paper            */
  --meta:#5C5F58;           /* mono metadata  — 5.9:1 on paper            */
  --faint:#8E938A;          /* ornament only, never words                 */
  --line:#E5E2D7; --line-strong:#D6D2C5;
  --green:#6AA575;          /* fill only                                  */
  --green-text:#49724D;     /* the green words are set in — 5.0:1 paper   */
  --mint:#D9EDDE; --mint-soft:#EDF5EF; --mint-line:#BFE0C9;
  --amber-text:#8A5A13; --amber-tint:#F6EEDC; --amber-line:#E8D9B5;
  --flag:#BC4B3B;           /* fill / badge ground                        */
  --flag-text:#9E3B2C;      /* red words — 5.7:1 on its tint              */
  --flag-tint:#F7E8E4; --flag-line:#E7C9C3;
  --sh:0 1px 2px rgba(11,11,11,.04), 0 14px 36px -16px rgba(11,11,11,.20);
  --sh-lg:0 2px 6px rgba(11,11,11,.05), 0 30px 60px -24px rgba(11,11,11,.28);
  --sh-sm:0 1px 2px rgba(11,11,11,.05), 0 4px 14px -8px rgba(11,11,11,.14);
  --serif:"Fraunces", Georgia, serif;
  --sans:"Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --r:14px; --r-sheet:18px; --r-soft:10px;

  /* The masthead ("ink") surface. In LIGHT it is simply the page: white
     header, paper ground, ink type, --green-text accents, --line-strong
     hairlines — the flip the concept files end on. */
  --ib-bg:var(--paper);
  --ib-head-bg:var(--surface);
  --ib-head-line:var(--line);
  --ib-fg:var(--muted);
  --ib-title:var(--ink);
  --ib-accent:var(--green-text);
  --ib-meta:var(--meta);
  --ib-nav:var(--muted);
  --ib-nav-bg:var(--alt);
  --ib-edge:var(--ink);          /* the board's strong top rule          */
  --ib-hair:var(--line-strong);  /* row hairlines                        */
  --ib-ctl:var(--line-strong);   /* borders on small header controls     */
}

/* Warm, near-black greens. Text greens flip to #B4D98C (10.9:1 on surface)
   because #49724D is only 3.4:1 on a dark ground. */
[data-theme="dark"]{
  --paper:#121110; --surface:#1C1B17; --outer:#0C0B0A; --alt:#211F1A;
  --ink:#F2F1EA; --ink2:#E4E3DA;
  --muted:#B9BDB3; --meta:#A8ACA1; --faint:#6E7268;
  --line:#2E2C26; --line-strong:#3C3A32;
  --green-text:#B4D98C;
  --mint:#243024; --mint-soft:#20281F; --mint-line:#33472F;
  --amber-text:#E5B567; --amber-tint:#2B2416; --amber-line:#4A3D22;
  --flag-text:#ED9A8C; --flag-tint:#331B17; --flag-line:#523028;
  --sh:none; --sh-lg:none; --sh-sm:none;

  /* The flat ink band promoted to the page's primary ground. Literal
     values, measured on #0B0B0B: body 9.8:1, mono metadata 5.9:1,
     green 10.9:1. */
  --ib-bg:#0B0B0B;
  --ib-head-bg:#0B0B0B;
  --ib-head-line:rgba(255,255,255,.13);
  --ib-fg:#B9B7AE;
  --ib-title:#F5F4EE;
  --ib-accent:#B4D98C;
  --ib-meta:#8F8D84;
  --ib-nav:#C9C7BE;
  --ib-nav-bg:rgba(255,255,255,.08);
  --ib-edge:rgba(255,255,255,.22);
  --ib-hair:rgba(255,255,255,.11);
  --ib-ctl:rgba(255,255,255,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--green-text);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
}

/* keyboard skip link — off-screen until focused. Literal colours: --ink
   inverts between themes and the label would vanish into it. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:#0B0B0B;color:#fff;text-decoration:none;
  font-family:var(--mono);font-size:12px;padding:11px 18px;
  border-bottom-right-radius:var(--r-soft);
}
[data-theme="dark"] .skip{background:#F5F4EE;color:#0B0B0B}
.skip:focus{left:0}

/* ─── type ──────────────────────────────────────────────────────────── */

.kicker{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green-text);
}
.display{
  font-family:var(--serif);font-weight:500;line-height:1.06;
  letter-spacing:-.018em;color:var(--ink);
}
.display em{font-style:italic;color:var(--green-text)}
h1.display{font-size:clamp(34px,4.3vw,46px)}
.lede{font-size:19px;line-height:1.6;color:var(--muted);max-width:56ch}
.mono{font-family:var(--mono)}
.meta{font-family:var(--mono);font-size:12px;color:var(--meta)}

/* ─── page frame ────────────────────────────────────────────────────── */

.shell{max-width:1200px;margin:0 auto;padding:0 32px}
/* the reading column on the pages that have no margin nav (home, FAQ, 404).
   Vertical rhythm is set by what a block IS, not by a one-off margin. */
.column{max-width:828px;margin:0 auto}
.column>.sheet{margin-top:28px}
.column>.prose{margin-top:44px}
.column>.band{margin-top:64px}
.column>.ib-help{margin-top:64px}

/* The header sits on the masthead ground, so it carries the ink treatment
   in dark and the ordinary white bar in light. */
.site-head{background:var(--ib-head-bg);border-bottom:1px solid var(--ib-head-line)}
.site-head .shell{
  display:flex;align-items:center;gap:28px;min-height:68px;
}
.logo{
  display:flex;align-items:center;gap:2px;
  text-decoration:none;white-space:nowrap;flex:none;
}
.logo img{height:38px;width:auto;display:block}
/* One wordmark per theme; display:none also drops the hidden one out of the
   accessibility tree, so the link keeps exactly one name.
   ⚠️ These MUST out-specify `.logo img` above (0,1,1) — as a bare class
   (0,1,0) the light-mode rule lost, and both wordmarks printed side by side. */
.logo img.ib-on-dark{display:none}
[data-theme="dark"] .logo img.ib-on-light{display:none}
[data-theme="dark"] .logo img.ib-on-dark{display:block}
.logo-tag{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  color:var(--ib-meta);border:1px solid var(--ib-ctl);border-radius:6px;
  padding:3px 7px;margin-left:10px;vertical-align:3px;text-transform:uppercase;
}
.head-nav{display:flex;gap:4px;align-items:center}
.head-nav a{
  font-size:14.5px;font-weight:600;color:var(--ib-nav);text-decoration:none;
  padding:9px 13px;border-radius:9px;transition:background .15s,color .15s;
}
.head-nav a:hover{background:var(--ib-nav-bg);color:var(--ib-title)}
.head-nav a[aria-current]{color:var(--ib-title);background:var(--ib-nav-bg)}
.head-spacer{flex:1}

/* the theme switch — an explicit control, never an OS query */
.mode-btn{
  width:38px;height:38px;border-radius:10px;flex:none;
  border:1px solid var(--ib-ctl);background:transparent;color:var(--ib-nav);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.mode-btn:hover{border-color:var(--ib-title);color:var(--ib-title)}

.foot{background:#0B0B0B;color:#B9B7AE;margin-top:96px}
[data-theme="dark"] .foot{background:var(--outer);border-top:1px solid var(--line)}
.foot .shell{padding-top:56px;padding-bottom:28px}
.foot-logo img{height:30px;width:auto;display:block}
/* five columns: brand + Support + the main site's Product/Resources/Legal */
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px;margin-bottom:44px}
.foot-col h5{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#8F8D84;margin-bottom:14px;font-weight:500;
}
.foot-col a{display:block;color:#C9C7BE;text-decoration:none;font-size:14px;padding:4px 0}
.foot-col a:hover{color:#fff}
.foot-note{font-size:13.5px;color:#8F8D84;max-width:34ch;margin-top:14px;line-height:1.6}
.foot-base{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;color:#8F8D84;
}
.foot-base a{color:#8F8D84;text-decoration:none}
.foot-base a:hover{color:#fff}

/* flat ink CTA band — never a gradient. In dark the page is already ink, so
   a second ink block would disappear into it: the band becomes a surface
   card with a border instead (bw-mock's dark treatment). */
.band{
  background:#0B0B0B;color:#fff;border-radius:var(--r-sheet);
  padding:36px 44px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.band h2{font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:-.015em}
.band h2 em{font-style:italic;color:#9CC7A4}
.band p{color:#C9C7BE;font-size:15px;max-width:52ch;margin-top:6px}
.band p a{color:#fff}
.band .btn{margin-left:auto;background:#fff;color:#0B0B0B;border-color:#fff}
.band .btn:hover{background:var(--mint);border-color:var(--mint);color:#0B0B0B}
[data-theme="dark"] .band{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
[data-theme="dark"] .band h2 em{color:var(--green-text)}
[data-theme="dark"] .band p{color:var(--muted)}
[data-theme="dark"] .band p a{color:var(--green-text)}
[data-theme="dark"] .band .btn{background:var(--ink);color:var(--outer);border-color:var(--ink)}
[data-theme="dark"] .band .btn:hover{background:var(--green-text);border-color:var(--green-text);color:#0C0B0A}

/* ─── buttons ───────────────────────────────────────────────────────── */

.btn{
  font-family:var(--sans);font-weight:600;font-size:15px;line-height:1;
  border-radius:11px;padding:14px 22px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
  gap:9px;transition:transform .15s,box-shadow .15s,background .2s,border-color .15s;
}
.btn.primary{background:var(--ink);color:#fff}
.btn.primary:hover{background:var(--green-text);transform:translateY(-1px);box-shadow:var(--sh-sm)}
/* on ink the primary button inverts: paper ground, ink label */
[data-theme="dark"] .btn.primary{background:#F5F4EE;color:#0B0B0B}
[data-theme="dark"] .btn.primary:hover{background:#D9EDDE;color:#0B0B0B}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--ink);transform:translateY(-1px)}
.btn.small{font-size:13.5px;padding:9px 15px;border-radius:9px}

/* ─── pills / status ────────────────────────────────────────────────── */

.pill{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;
  border-radius:999px;padding:5px 12px;border:1px solid transparent;
}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--mint);color:var(--green-text);border-color:var(--mint-line)}
.pill.rv{background:var(--flag-tint);color:var(--flag-text);border-color:var(--flag-line)}
.pill.plain::before{display:none}

/* ─── the signature: statement-style ruled meta band ────────────────── */

.metaband{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:13px 2px;margin:26px 0 40px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--meta);
}
.metaband b{font-weight:600;color:var(--ink);letter-spacing:.05em}
.metaband .push{margin-left:auto}
.metaband a{color:var(--green-text);text-decoration:none}
.metaband a:hover{text-decoration:underline}

/* ═══ the inkboard masthead ═════════════════════════════════════════════
   The flat ink band is promoted to the page's primary ground: hero, board
   and chapter head all sit on it, and the header above shares its colour so
   there is no seam. In LIGHT the whole block flips to paper + ink type, so
   only ONE set of rules exists — the --ib-* tokens carry the difference. */

.ib-mast{background:var(--ib-bg)}

/* home hero — one bright control, then the board */
.ib-hero{padding:76px 0 58px;max-width:880px}
.ib-hero .kicker{display:block;margin-bottom:16px;color:var(--ib-accent)}
.ib-hero h1{
  font-family:var(--serif);font-weight:500;line-height:1.02;
  letter-spacing:-.02em;color:var(--ib-title);font-size:clamp(40px,5.2vw,64px);
}
.ib-hero h1 em{font-style:italic;color:var(--ib-accent)}
.ib-hero .lede{color:var(--ib-fg);font-size:19px;max-width:58ch;margin-top:20px}
.ib-hero .meta{color:var(--ib-meta);margin-top:16px;letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:600}

/* the board */
.ib-board{padding:8px 0 84px;border-top:1px solid var(--ib-edge)}
.ib-cols{column-count:2;column-gap:72px}
.ib-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;
  column-gap:18px;row-gap:3px;align-items:baseline;
  padding:19px 2px 17px;border-bottom:1px solid var(--ib-hair);
  text-decoration:none;break-inside:avoid;
}
.ib-row .n{font-family:var(--mono);font-size:12px;color:var(--ib-meta)}
.ib-row .t{
  font-family:var(--serif);font-weight:500;font-size:25px;
  letter-spacing:-.012em;color:var(--ib-title);transition:color .15s;
}
.ib-row .g{
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ib-meta);
  justify-self:end;white-space:nowrap;
}
.ib-row .d{
  grid-column:2/4;font-family:var(--mono);font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ib-meta);
}
.ib-row:hover .t{color:var(--ib-accent)}

/* chapter / FAQ / 404 masthead — the same language, one screen shorter */
.ib-chap{padding:48px 0 0;max-width:1100px}
.ib-chap .kicker{display:block;margin-bottom:14px;color:var(--ib-accent)}
.ib-chap h1{
  font-family:var(--serif);font-weight:500;line-height:1.04;
  letter-spacing:-.018em;color:var(--ib-title);font-size:clamp(32px,4vw,50px);
  max-width:20ch;
}
.ib-chap h1 em{font-style:italic;color:var(--ib-accent)}
.ib-chap .lede{color:var(--ib-fg);font-size:18px;max-width:58ch;margin-top:18px}
.ib-meta{
  display:flex;align-items:center;gap:10px 28px;flex-wrap:wrap;
  border-top:1px solid var(--ib-edge);
  border-bottom:1px solid var(--ib-hair);
  padding:13px 2px;margin-top:30px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ib-meta);
}
.ib-meta b{color:var(--ib-title);font-weight:600}
.ib-meta .push{margin-left:auto}
.ib-meta a{color:var(--ib-accent);text-decoration:none}
.ib-meta a:hover{text-decoration:underline}
/* the strip is the block's own floor — no second rule under it */
.ib-chap .ib-meta{border-bottom:0;padding-bottom:34px}

/* back on the page ground: the two doors, the intro, the help card */
.ib-ground{padding:56px 0 0}
.ib-help{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sheet);box-shadow:var(--sh);
  padding:34px 40px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.ib-help h2{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.015em;color:var(--ink)}
.ib-help h2 em{font-style:italic;color:var(--green-text)}
.ib-help p{color:var(--muted);font-size:15px;max-width:52ch;margin-top:6px}
.ib-help p a{color:var(--green-text)}
.ib-help .btn{margin-left:auto}

/* ─── guide layout: margin nav + sheet ──────────────────────────────── */

.guide-grid{
  display:grid;grid-template-columns:236px minmax(0,828px);
  gap:56px;justify-content:center;padding:48px 0 0;
}
.guide-grid.tail{padding-top:72px}
.sheet{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sheet);box-shadow:var(--sh);
  padding:56px 64px 48px;
}

/* the chapter list is a book's table of contents, not a boxed rail:
   no border-right, no accent bars — ground change + type do the work  */
.toc{position:sticky;top:28px;align-self:start;padding-top:10px}
.toc .kicker{display:block;margin-bottom:18px;color:var(--meta)}
.toc-fold{border:0;background:none;padding:0}
.toc-fold summary{
  list-style:none;display:block;cursor:default;pointer-events:none;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--meta);
  margin-bottom:18px;
}
.toc-fold summary::-webkit-details-marker{display:none}
.toc a{
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:8px 2px;text-decoration:none;
  font-size:14.5px;font-weight:600;color:var(--muted);
  transition:color .15s;
}
.toc a .n{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--meta)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{color:var(--ink);font-weight:700}
.toc a[aria-current] .n{color:var(--green-text);font-weight:700}
.toc hr{border:0;border-top:1px solid var(--line-strong);margin:16px 0}
.toc .aside-link{grid-template-columns:minmax(0,1fr);font-weight:600;color:var(--green-text)}
.toc .aside-link:hover{color:var(--ink)}

/* ─── prose (markdown output from build.py) ─────────────────────────── */

.prose{max-width:700px;font-size:17px}
.prose>*+*{margin-top:1.15em}
.prose h2{
  font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.15;
  letter-spacing:-.015em;margin-top:2em;color:var(--ink);
}
.prose h3{font-family:var(--serif);font-weight:500;font-size:21.5px;letter-spacing:-.01em;margin-top:1.8em;color:var(--ink)}
.prose h4{font-family:var(--sans);font-weight:700;font-size:17.5px;margin-top:1.6em;color:var(--ink)}
.prose p{color:var(--ink2)}
.prose a{color:var(--green-text);text-decoration:underline;text-decoration-color:var(--mint-line);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--green-text)}
.prose ul,.prose ol{padding-left:24px}
.prose li{margin-top:.5em;color:var(--ink2)}
.prose li::marker{color:var(--green-text)}
.prose strong{color:var(--ink);font-weight:700}
.prose code{
  font-family:var(--mono);font-size:.85em;background:var(--alt);
  border:1px solid var(--line);border-radius:6px;padding:2px 6px;
}
.prose pre{
  background:var(--alt);border:1px solid var(--line);border-radius:var(--r-soft);
  padding:18px 22px;overflow-x:auto;
}
.prose pre code{background:none;border:0;padding:0;font-size:13.5px}
.prose blockquote{
  border-left:none;background:var(--alt);border:1px solid var(--line);
  border-radius:var(--r-soft);padding:16px 22px;font-style:italic;color:var(--muted);
}
.prose hr{border:0;border-top:1px solid var(--line-strong);margin:2.2em 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:500;color:var(--meta);text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--line-strong);
}
.prose td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink2)}

/* callouts — tinted ground + a mono tag; deliberately no accent bar    */
.callout{
  background:var(--mint-soft);border:1px solid var(--mint-line);
  border-radius:var(--r-soft);padding:20px 24px 21px;
}
.callout::before{
  content:"Note";display:block;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green-text);margin-bottom:9px;
}
.callout.warn{background:var(--amber-tint);border-color:var(--amber-line)}
.callout.warn::before{content:"Careful";color:var(--amber-text)}
.callout p,.callout li{color:var(--ink2);font-size:16px}
.callout>*+*{margin-top:.7em}
.callout ul,.callout ol{padding-left:22px}

/* :::steps — numbered because the order is genuinely the order         */
.steps ol{list-style:none;padding:0;counter-reset:step}
.steps li{
  counter-increment:step;position:relative;padding:0 0 26px 52px;margin:0;
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:1px;width:34px;height:34px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:#fff;background:var(--green-text);border-radius:50%;
}
/* the dark green is a LIGHT chip, so its number goes dark */
[data-theme="dark"] .steps li::before{color:#0C0B0A}
.steps li:not(:last-child)::after{
  content:"";position:absolute;left:16.5px;top:41px;bottom:5px;
  width:1px;background:var(--line-strong);
}
.steps li>*+*{margin-top:.6em}
.steps li ul,.steps li ol{padding-left:22px}

/* figures — scoped HTML fragments (static/figures/*.html, static/inserts/*.html)
   pasted straight into the page by build.py. Each fragment carries its own
   <style> in which every selector is scoped under .bwfig-<stem> (or .bw-* for
   an insert) and sets its own `max-width: <authored>px; width:100%`, so the
   card sizes and reflows itself. Nothing here may size it: there is no frame,
   no scale factor and no height to keep in sync.

   ⚠️ Below 820px the guide grid is a plain column, so its automatic minimum
   size is the MIN-CONTENT of everything in it — one un-shrinkable card would
   widen the column and scroll the whole page sideways on a phone. Each
   fragment defends against that itself, with `contain:inline-size` on its own
   root (see any static/figures/*.html).                                    */
.fig{margin:2em 0}
.fig>:not(figcaption){max-width:100%}
.fig figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.5;
  color:var(--meta);margin-top:12px;
}
.fig figcaption a{color:var(--green-text)}

/* 🔴 FIGURES STAY LIGHT IN BOTH THEMES — owner ruling 2026-07-28. They depict
   the app, and the app is light; a dark-tokened replica would document a
   screen nobody has. Every fragment already re-declares the light token set
   on its own root, so it resolves light on a dark page without help. This
   block is the safety net for a fragment authored WITHOUT one — it is not
   redundant, it is the thing that stops the next figure inheriting a dark
   --surface. Fragment files are never edited from here.                    */
.bwfig,.bw-statement{
  --paper:#F5F4EE; --surface:#FFFFFF; --outer:#E7E5DC; --alt:#FAF9F3;
  --ink:#0B0B0B; --ink2:#161616; --muted:#3E523F; --meta:#5C5F58;
  --faint:#8E938A; --line:#E5E2D7; --line-strong:#D6D2C5;
  --green:#6AA575; --green-text:#49724D; --green-deep:#49724D;
  --mint:#D9EDDE; --mint-soft:#EDF5EF; --mint-line:#BFE0C9;
  --amber-text:#8A5A13; --amber-tint:#F6EEDC; --amber-line:#E8D9B5;
  --flag:#BC4B3B; --flag-text:#9E3B2C; --flag-tint:#F7E8E4; --flag-line:#E7C9C3;
  --sh:0 1px 2px rgba(11,11,11,.04), 0 14px 36px -16px rgba(11,11,11,.20);
}
/* On a dark sheet a bright card needs a deliberate edge or it reads as a
   rendering fault. The frame is the DARK theme's --line-strong, written
   literally because the fragment root re-declares that token light and would
   otherwise win the cascade against itself. */
[data-theme="dark"] .fig>:not(figcaption){
  background:#EDEBE2;border:1px solid #3C3A32;
  border-radius:var(--r);padding:16px;
}

/* screenshot placeholder (unshot slots warn on build, render dashed).
   --meta, never --faint: the tag is a WORD.                            */
.shot{margin:2em 0}
.shot-box{
  border:1.5px dashed var(--line-strong);border-radius:var(--r-soft);
  background:var(--alt);min-height:180px;display:grid;place-content:center;
  gap:8px;text-align:center;padding:28px;
}
.shot-tag{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--meta);
}
.shot-cap{font-size:14px;color:var(--meta);max-width:46ch}

/* prev / next pager */
.pager{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;
  margin-top:64px;padding-top:32px;border-top:1px solid var(--line-strong);
}
.pager a{
  display:block;text-decoration:none;border:1px solid var(--line);
  border-radius:var(--r);padding:18px 22px;background:var(--surface);
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.pager a:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.pager .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.pager .ttl{display:block;font-family:var(--serif);font-weight:500;font-size:18px;margin-top:7px;color:var(--ink)}
.pager a.next{text-align:right}
[data-theme="dark"] .pager a{background:var(--alt)}

/* ─── the one glowing control: search ───────────────────────────────── */

/* ships `hidden` and is revealed by the script, so a reader without JS never
   sees a control that cannot work — an author `display` would defeat that */
.search[hidden]{display:none}
/* White in BOTH themes. It is the single bright object on the ink hero, and
   flipping it dark would leave the page with nothing to aim at. */
.search{
  display:flex;align-items:center;gap:12px;max-width:640px;
  background:#fff;border:1px solid transparent;
  border-radius:12px;padding:6px 8px 6px 20px;margin-top:34px;
  box-shadow:0 2px 6px rgba(0,0,0,.30), 0 30px 60px -24px rgba(0,0,0,.50);
}
[data-theme="light"] .search{border-color:var(--line-strong);box-shadow:var(--sh-sm)}
.search svg{color:#5C5F58;flex:none}
.search input{
  flex:1;border:0;background:none;font-family:var(--sans);
  font-size:17px;color:#0B0B0B;padding:14px 0;outline:none;min-width:0;
}
.search input::placeholder{color:#5C5F58}
/* the page ring is #B4D98C in dark — 2.0:1 on this white bar, so the bar
   states its own */
.search :focus-visible{outline-color:#49724D}
.search .btn.primary{flex:none;background:#0B0B0B;color:#fff;border-color:#0B0B0B}
.search .btn.primary:hover{background:#49724D;border-color:#49724D;color:#fff}
.search-label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* the try-hint line under the bar — the concept file's mono hint, made
   live: each term is a real button that prefills the search. Token-driven
   so it flips with the hero ground. */
.ib-hint{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ib-meta);
  margin-top:16px;
}
.ib-hint button{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--ib-nav);
}
.ib-hint button:hover{color:var(--ib-accent);text-decoration:underline;text-underline-offset:3px}

/* results render under the box; the whole corpus is eleven pages, so this
   list never needs its own scroller                                    */
.search-results{list-style:none;max-width:640px;margin-top:14px}
.search-results:empty{display:none}
.search-results li+li{margin-top:8px}
.search-results a{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-soft);padding:13px 16px;text-decoration:none;
  transition:border-color .15s;
}
.search-results a:hover{border-color:var(--green-text)}
.search-results .r-sec{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--meta);
}
.search-results .r-t{display:block;font-weight:700;font-size:15.5px;color:var(--ink);margin:2px 0 3px}
.search-results .r-d{display:block;font-size:14px;line-height:1.55;color:var(--muted)}
/* Owner-specified highlight (2026-07-29): white on the deep brand green,
   literal in both themes — 5.5:1 measured. Covers the search-result <mark>
   and ordinary text selection alike. */
.search-results mark{background:#49724D;color:#fff;border-radius:3px}
::selection{background:#49724D;color:#fff}

/* ─── home: the two doors ───────────────────────────────────────────── */

.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.door{
  /* a column so the go-link sits on the card's floor: the two doors carry
     real page descriptions of different lengths, and a ragged pair of
     call-to-actions reads as a bug */
  display:flex;flex-direction:column;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sheet);
  box-shadow:var(--sh-sm);padding:30px 34px 26px;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.door:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--sh)}
.door .kicker{display:block}
.door .kicker.alt{color:var(--amber-text)}
.door .t{
  display:block;font-family:var(--serif);font-weight:500;font-size:23px;
  letter-spacing:-.01em;color:var(--ink);margin:10px 0 8px;
}
.door p{font-size:15px;color:var(--muted);line-height:1.6}
.door .go{margin-top:auto;padding-top:16px;font-weight:700;font-size:14.5px;color:var(--green-text)}

/* the book's table of contents — used on 404 to list everything        */
.contents{list-style:none}
.contents li{border-top:1px solid var(--line)}
.contents li:first-child{border-top:0}
.contents a{
  display:grid;grid-template-columns:44px 236px minmax(0,1fr) 28px;gap:20px;
  align-items:baseline;text-decoration:none;padding:21px 6px;
  border-radius:10px;transition:background .15s;
}
.contents a:hover{background:var(--alt)}
.contents .n{font-family:var(--mono);font-size:12px;color:var(--meta);font-weight:500}
.contents .t{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.contents .d{font-size:14.5px;color:var(--muted);line-height:1.55}
.contents .arrow{font-family:var(--mono);color:var(--meta);justify-self:end;transition:color .15s,transform .15s}
.contents a:hover .arrow{color:var(--green-text);transform:translateX(3px)}

.sheet>.kicker{display:block;margin-bottom:8px}
.sheet-title{font-family:var(--serif);font-weight:500;font-size:27px;letter-spacing:-.015em;margin-bottom:22px;color:var(--ink)}
.sheet-title em{font-style:italic;color:var(--green-text)}
.sheet-note{font-size:15px;color:var(--muted);margin-top:26px;max-width:60ch}
.sheet-note a{color:var(--green-text)}

/* ─── FAQ: an accordion of serif questions on hairlines ─────────────── */

/* faq.html splits build.py's flat `## Question` run on its own h2 boundary
   and wraps each pair in <details>, so the question row IS the summary and
   the hairline hangs off the item rather than off the heading. Native
   disclosure: every answer is in the served DOM, and the fold works with JS
   off. The heading keeps its id inside the summary, so the anchors are the
   ones already in the wild.

   The h2 rules are written `.prose.qa .qa-q h2` (0,3,1) on purpose. As a
   plainer `.qa-q h2` (0,1,1) they tie with `.prose h2` in the ≤640 block far
   below, which is later in the file and would win — the questions would jump
   to 25px on a phone. Same trap the old `.prose.qa h2` was dodging.       */
.prose.qa{max-width:none}
.prose.qa>p:first-child{font-size:17.5px;color:var(--muted);max-width:62ch}
.prose.qa>.qa-list{margin-top:2.2em;border-top:1px solid var(--line-strong)}
.qa-item{border-bottom:1px solid var(--line)}
.qa-q{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:20px;padding:18px 2px 19px;
}
.qa-q::-webkit-details-marker{display:none}
.prose.qa .qa-q h2{
  flex:1;min-width:0;margin:0;border:0;padding:0;
  font-family:var(--serif);font-weight:500;font-size:21.5px;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);transition:color .15s;
}
.qa-q:hover h2{color:var(--green-text)}
/* The indicator is DRAWN — an empty box carrying two borders, rotated. It is
   ornament rather than type, but a chevron nobody can find is not an
   affordance, so it takes --meta on the sheet (6.5:1 light, 8.4:1 dark),
   never --faint.
   The translate rides in the same transform as the rotation so the two
   states animate as one move; the global prefers-reduced-motion guard kills
   both by killing the transition.                                        */
.qa-q::after{
  content:"";flex:none;width:9px;height:9px;margin:9px 3px 0 0;
  border-right:2px solid var(--meta);border-bottom:2px solid var(--meta);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .2s ease,border-color .15s;
}
.qa-q:hover::after{border-color:var(--green-text)}
.qa-item[open]>.qa-q::after{transform:translateY(2px) rotate(-135deg)}
.qa-a{padding-bottom:26px}
.qa-a>*+*{margin-top:1.15em}
.qa-item[open]>.qa-a{animation:qa-open .22s ease both}
@keyframes qa-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.prose.qa p,.prose.qa li{font-size:16.5px;max-width:68ch}

/* ─── responsive ────────────────────────────────────────────────────── */

/* Figures need no breakpoints of their own: a fragment is fluid
   (max-width + width:100%) and simply follows the prose column down.     */
@media (max-width:1080px){
  .guide-grid{grid-template-columns:210px minmax(0,1fr);gap:36px}
  .sheet{padding:44px 44px 40px}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:940px){
  /* two board columns need real width; below this the board is one list */
  .ib-cols{column-count:1}
}
@media (max-width:820px){
  body{font-size:16px}
  .shell{padding-left:20px;padding-right:20px}
  /* minmax(0,1fr), not 1fr: a bare 1fr's automatic minimum is the column's
     min-content, so one wide <pre> or table drags the whole page sideways
     on phones. Zeroing the minimum keeps overflow INSIDE its own scroller. */
  .guide-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:20px}
  .guide-grid.tail{padding-top:44px}
  .toc{position:static;padding:0 0 26px}
  .toc-fold{border:1px solid var(--line-strong);border-radius:var(--r);
    background:var(--surface);padding:6px 18px 6px}
  .toc-fold summary{
    cursor:pointer;pointer-events:auto;padding:10px 0;margin-bottom:0;
  }
  .toc-fold summary::after{content:" ▾"}
  .toc-fold[open] summary{margin-bottom:8px}
  .sheet{padding:34px 24px 32px;border-radius:var(--r)}
  /* The dark figure plate is DESKTOP-ONLY. At 390 its 32px of padding pushed
     a fragment's own table past the container, and a fragment clips rather
     than scrolls — the owner's ruling is that tables compress, never
     truncate. Without the plate the card still reads deliberate: it keeps its
     own light border and white ground against the dark sheet. */
  [data-theme="dark"] .fig>:not(figcaption){background:none;border:0;padding:0}
  .metaband{gap:14px}
  .ib-hero{padding:48px 0 38px}
  .ib-board{padding-bottom:52px}
  .ib-row .t{font-size:22px}
  .ib-chap{padding-top:34px}
  .ib-chap .ib-meta{padding-bottom:26px}
  .ib-meta .push{margin-left:0}
  .ib-ground{padding-top:40px}
  .ib-help{padding:26px 24px}
  .ib-help .btn{margin-left:0}
  .doors{grid-template-columns:minmax(0,1fr)}
  .contents a{grid-template-columns:34px minmax(0,1fr);row-gap:6px}
  .contents .d{grid-column:2}
  .contents .arrow{display:none}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager a.next{text-align:left}
  .band{padding:28px 26px}
  .band .btn{margin-left:0}
  .head-nav a{padding:9px 9px;font-size:13.5px}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:26px}
}
@media (max-width:640px){
  .prose h2{font-size:25px}
  .band h2,.ib-help h2{font-size:24px}
  .prose.qa .qa-q h2{font-size:19.5px}
  .qa-q{gap:14px}
}
@media (max-width:480px){
  .site-head .shell{gap:12px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .head-spacer{display:none}
  /* icon + field keep one row; the button drops below it full width rather
     than squeezing the placeholder down to three words */
  .search{flex-wrap:wrap;padding:12px 14px;gap:10px}
  .search input{flex:1 1 auto;padding:2px 0}
  .search .btn{flex:1 0 100%;justify-content:center}
  .sheet{padding:28px 20px 26px}
  .band{padding:24px 22px}
  .steps li{padding-left:46px}
  .ib-row{grid-template-columns:34px minmax(0,1fr);row-gap:5px}
  .ib-row .g{grid-column:2;justify-self:start}
  .ib-row .d{grid-column:2}
}

@media print{
  .site-head,.foot,.band,.ib-help,.toc,.pager,.search,.skip,.mode-btn{display:none}
  body{background:#fff;font-size:12pt}
  .ib-mast{background:#fff}
  .ib-hero h1,.ib-chap h1,.ib-hero .lede,.ib-chap .lede{color:#0B0B0B}
  .sheet{box-shadow:none;border:0;padding:0}
  .guide-grid{display:block;padding:0}
  .prose{max-width:none}
  .prose a{text-decoration:none;color:var(--ink)}
  /* A closed <details> prints closed. faq.html opens every item on
     `beforeprint` and closes it again after; this is the same fix stated in
     CSS, for the engines that support it and for a print-to-PDF path that
     never fires the event. Belt and braces — a printed FAQ with no answers
     is not a FAQ. */
  .qa-item::details-content{content-visibility:visible;display:block}
  .qa-a{animation:none}
  .qa-q::after{display:none}
  .qa-item{border-bottom:1px solid var(--line-strong)}
}

/* The theme control: the two modes by name, the current one filled, rather than an
   unlabelled icon whose state a reader has to work out. Each option is a 44px target
   (house rule). Tokens only, so it inverts with the page. Matches bankwriter.com. */
.themepick{flex:none;display:inline-flex;gap:2px;padding:2px;
  background:var(--alt);border:1px solid var(--line);border-radius:999px}
.themepick button{font-family:inherit;font-size:13px;font-weight:600;min-height:44px;
  padding:0 16px;border:0;border-radius:999px;cursor:pointer;color:var(--meta);background:none;
  transition:background-color .2s ease,color .2s ease}
.themepick button[aria-pressed="true"]{background:var(--surface);color:var(--ink)}
.themepick button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}