/* ══════════════════════════════════════════════════════════════════════════
   bwui-base.css — reset · type ladder · space ladder · elements · prose ·
   links · focus · selection · reduced-motion · print.
   Load order: tokens → BASE → components → (docs | portal) → per-property.

   WHAT THIS FILE IS
     The typographic floor every BankWriter page stands on. It styles bare
     ELEMENTS (headings, paragraphs, lists, links, code, hr, tables) and the
     two ladder applications from SPEC.md §3 — the heading rank and the
     .bwui-doc vertical rhythm. Load it and unclassed HTML is already correct.

   WHAT THIS FILE MUST NEVER CONTAIN
     · A custom property. Not one. bwui-tokens.css is the only file in the
       company that may declare `--…:` (lint T1).
     · A raw hex, rgb() or named colour. Every colour is a var(--bw-*)
       (lint T1). Every px font-size (lint F1). Every margin/padding length
       outside the --bw-s* ladder (lint P1).
     · A theme. Dark is resolved entirely in bwui-tokens.css; nothing here
       may test prefers-color-scheme or [data-theme].
     · A component. No .bwui-lrow, no card, no nav, no button.
     · Any rejected idiom: left/right accent rails, inset bars on active
       items, gradients, backdrop-filter, or a heading role that does not
       clearly outrank body copy.

   AUTHORITY
     Values come from SPEC.md §3 (Ladders) and §4.8 (code/keyline/links).
     Contrast ratios in comments are the computed WCAG 2.1 figures from
     SPEC.md §2.4 against the ground the type actually sits on.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the serif fallback (2026-10-14, from portal.css) ───────────────────────
   Georgia, width-matched to Fraunces 500 so a heading that paints in the
   fallback first does not reflow when the web font lands. Ratio measured in
   Chrome on 2026-10-14: Fraunces 500 / Georgia = 1.0382 on a 70-character
   headline. Only the width is matched. Named in --bw-serif.                  */
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia");
  size-adjust:103.82%;
}

/* ── reset ──────────────────────────────────────────────────────────────────
   Deliberately small. A heavy reset then re-declares what it just removed. */
*,*::before,*::after{box-sizing:border-box}

html{
  font-size:100%;                  /* the whole rem ladder hangs off this — a
                                      reader who raises their browser font size
                                      gets a larger site. Never set this in px. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--bw-head-h);   /* anchors clear the sticky header */
  background:var(--bw-outer);
}

body{
  margin:0;
  background:var(--bw-paper);
  color:var(--bw-ink2);                  /* 16.42:1 on --bw-paper */
  font-family:var(--bw-sans);
  font-size:var(--bw-t-body);            /* 16px */
  line-height:var(--bw-lh-body);         /* 1.75 at a ~70ch measure */
  font-weight:var(--bw-w-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,ol,ul,pre{margin:0}   /* dd sets its own below (2026-10-14) */
ol,ul{padding:0}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:where(button){cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
[hidden]{display:none!important}

/* ── headings ───────────────────────────────────────────────────────────────
   Rank check at 1280px: 40 / 30 / 22 / 19 lede / 18 / 16.
   h4 (18px, sans 700, --bw-ink) over body (16px, sans 400, --bw-ink2) is
   1.125× PLUS a weight jump PLUS a colour jump. Lint F2 asserts every step is
   ≥1.12× the one below.

   THERE IS NO HEADING ROLE BELOW 18px. h5 and h6 are therefore set at the h4
   size, not smaller: v4 ships seven heading-role elements under its own 16px
   body, which is the source of the client's "the heading look smaler than the
   body fonsts" complaint, and it is not inherited here. Anything smaller than
   18px is a LABEL — mono, --bw-t-label, and never marked up as h1–h6.        */
/* 2026-10-14, owner ruling (keep the current look): no balanced wrapping;
   the approved portal's headings broke where the line ran out. */
h1,h2,h3{
  font-family:var(--bw-serif);
  font-weight:var(--bw-w-med);
  color:var(--bw-ink);                   /* 17.86:1 on --bw-paper */
}
/* each rank sets its own tracking once (2026-10-14: the group used to set
   -.015em and two of the three overrode it on the next line) */
h1{font-size:var(--bw-t-h1);line-height:var(--bw-lh-tight);letter-spacing:-.018em}
h2{font-size:var(--bw-t-h2);line-height:var(--bw-lh-tight);letter-spacing:-.015em}
h3{font-size:var(--bw-t-h3);line-height:var(--bw-lh-head);letter-spacing:-.01em}
h4,h5,h6{
  font-family:var(--bw-sans);
  font-weight:var(--bw-w-bold);
  font-size:var(--bw-t-h4);              /* 18px — the floor, for all three */
  line-height:var(--bw-lh-head);
  letter-spacing:-.005em;
  color:var(--bw-ink);                   /* 17.86:1 on --bw-paper */
}

/* THE HOUSE ACCENT — Fraunces 500 with ONE italic --bw-green-deep phrase.
   It is AUTHORED as <em> in the content or declared in frontmatter as
   `accent:`. It is NEVER derived by splitting the title on a colon.
   RULE: at most one <em> per heading; at most one accented heading per page;
   a noun phrase of 1–3 words. build.py lint A1 enforces all three.           */
h1 em,h2 em,h3 em{
  font-style:italic;
  color:var(--bw-green-deep);            /* 5.02:1 on --bw-paper */
  font-weight:var(--bw-w-med);
}

/* ── the two type ROLES that are not elements (SPEC §3.1) ───────────────────
   Both were specified, both were used by three pages, and NEITHER was defined
   anywhere in the library until 2026-07-26 — so the lede rendered as 16px body
   copy (the one step the rank check names between h4 and body) and the kicker
   rendered as ordinary sans. They are type roles, not components, so they live
   here beside the heading ladder rather than in the component sheet.

   A lede is NOT a heading: it is the same weight as body copy and outranks it
   by SIZE and by measure alone, which is why it may sit under an h1 without
   competing with it.                                                        */
/* 2026-10-14, owner ruling (keep the current look): the approved portal's
   lede, 19px on 1.6 over 56ch, and no margin of its own (the page head
   sets the space above it). */
.bwui-lede{
  font-size:var(--bw-t-lede);            /* 19px — the step between h4 and body */
  line-height:var(--bw-lh-lede);         /* 1.6 */
  color:var(--bw-muted);                 /* 7.67:1 on --bw-paper · 7.54:1 dark */
  max-width:56ch;
  margin:0;
}

/* THE KICKER — the ONE role that owns the mono / uppercase / wide-tracking
   treatment. Everything else that used to carry it is now at
   --bw-track-label, so this stays a signature rather than becoming wallpaper.
   It is a LABEL: 11px, mono, and never marked up as h1–h6.                  */
.bwui-kicker{
  font-family:var(--bw-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--bw-t-label);           /* 11px — the floor */
  font-weight:var(--bw-w-semi);
  letter-spacing:var(--bw-track-kicker);
  text-transform:uppercase;
  color:var(--bw-green-on-ground);       /* 4.60:1 on --bw-outer, the portal's
                                            page ground, 5.70 on a card, 12.40
                                            dark. Was --bw-green-deep, 4.38 on
                                            --bw-outer (2026-10-14). */
  display:block;                         /* 2026-10-14, owner ruling: a line of */
  margin:0;                              /* its own, no margin (as approved)    */
}
.bwui-kicker a{color:inherit;text-decoration:none}
.bwui-kicker a:hover{color:var(--bw-ink)}

/* ── paragraphs, lists, definition lists ───────────────────────────────── */
/* 2026-10-14, owner ruling (keep the current look): a paragraph takes the
   width of the block it sits in, and bold is bold in the colour around it,
   as the approved portal set them. */
strong,b{font-weight:var(--bw-w-bold)}
em,i{font-style:italic}
small{font-size:var(--bw-t-micro);color:var(--bw-muted)}    /*  7.67:1 */
sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em} sub{bottom:-.25em}
abbr[title]{text-decoration:underline dotted;cursor:help}

ul,ol{padding-left:var(--bw-s5);max-width:var(--bw-measure)}
li{margin:0 0 var(--bw-s2)}
li:last-child{margin-bottom:0}
li::marker{color:var(--bw-muted)}        /* 7.67:1 — a marker is read as text */
ul ul,ol ol,ul ol,ol ul{margin:var(--bw-s2) 0 0}

dl{max-width:var(--bw-measure)}
dt{font-weight:var(--bw-w-semi);color:var(--bw-ink)}        /* 17.86:1 */
dd{margin:0 0 var(--bw-s3);color:var(--bw-ink2)}            /* 16.42:1 */

/* Quotes take no rail. A left accent bar is a rejected idiom (lint B1); the
   indent and the colour shift carry the voice.                              */
blockquote{
  max-width:var(--bw-measure);
  padding-left:var(--bw-s4);
  color:var(--bw-muted);                 /* 7.67:1 on --bw-paper */
  font-style:italic;
}
blockquote p{max-width:none}

/* ── links ──────────────────────────────────────────────────────────────────
   Ink type with a --bw-green-deep 1.5px underline at 3px offset. The COLOUR
   carries brand, the UNDERLINE carries the affordance, so the link survives
   colour-blindness and a greyscale print. Inherited from the current site;
   correct; unchanged. Components that are links (buttons, rows, nav) set
   text-decoration:none themselves — a class always beats this element rule. */
/* 2026-10-14, owner ruling (keep the current look): a link takes the colour
   of the words around it with a plain underline, as the approved portal set
   it; a link that needs a colour (a card note, a kicker) names its own. */
a{color:inherit}
/* SPEC §4.8 also specifies `.bwui-doc a` with these exact five declarations.
   It existed because the spec assumed a base sheet with no bare `a` rule; the
   rule above already covers a document link, so the duplicate is not restated
   here. One definition, one edit.                                           */

/* ── code, preformatted, keys ───────────────────────────────────────────────
   Mono is reserved for DATA and for the one kicker role. Anything data-shaped
   gets tabular figures so columns of numbers stack.                          */
/* 2026-10-14, owner ruling (keep the current look): a bare <code> keeps the
   browser's monospace, as the approved portal showed it; every classed code
   (the key, a card note) names the mono face itself. */
kbd,samp,pre,th,td.num,time{
  font-family:var(--bw-mono);
  font-variant-numeric:tabular-nums;
}
/* 2026-10-14, owner ruling (keep the current look): bare code is the mono
   face and nothing else; the key well is .bwui-key. */
pre{
  background:var(--bw-sunk);
  border:1px solid var(--bw-line);
  border-radius:var(--bw-r);
  padding:var(--bw-s4);
  overflow-x:auto;                       /* the block scrolls, the page never does */
  font-size:var(--bw-t-micro);
  line-height:var(--bw-lh-ui);           /* a code well is a UI surface, and 1.65
                                            was a fifth line-height nobody chose */
  color:var(--bw-ink2);                  /* 17.47:1 on --bw-sunk */
}
pre code{background:none;padding:0;font-size:inherit}
kbd{
  font-size:var(--bw-t-mono);
  background:var(--bw-surface);
  border:1px solid var(--bw-line-strong);
  border-bottom-width:2px;
  border-radius:var(--bw-r-xs);
  padding:.1em .4em;
  color:var(--bw-ink2);                  /* 18.10:1 on --bw-surface */
}

/* ── rules ──────────────────────────────────────────────────────────────────
   A plain <hr> is a single hairline and means "an aside ends here". The
   DOUBLE rule below is the only other horizontal rule a document body may
   carry, besides data-table row hairlines and the header/footer edges.      */
hr{
  border:0;
  height:1px;
  background:var(--bw-line);
  margin:var(--bw-s6) 0;
}

/* THE DOUBLE RULE — 1px / 1px gap / 1px. It means "this closes something".
   Legal placements, exhaustively: above a <tfoot> total row; the foot of the
   stub's chapter list, where it closes a COUNT of rows; and the foot of the
   licence summary, where it closes a seat count. Three or fewer per page;
   lint B3 counts them in the rendered HTML and errors at four.
   It does NOT mark reading position — a position is not a total.            */
.bwui-rule-total{
  border:0;
  height:3px;
  margin:var(--bw-s5) 0;
  border-top:1px solid var(--bw-line-strong);
  border-bottom:1px solid var(--bw-line-strong);
  background:transparent;
  box-sizing:border-box;
}

/* ── bare tables ────────────────────────────────────────────────────────────
   The dressed data table is .bwui-tbl in the components sheet. This is the
   floor for an unclassed <table> in authored prose: row hairlines only (data,
   not layout), mono column labels, figures right-aligned and tabular.       */
table{width:100%;font-size:var(--bw-t-small);line-height:var(--bw-lh-ui)}
caption{
  text-align:left;
  color:var(--bw-muted);                 /* 7.67:1 on --bw-paper */
  font-size:var(--bw-t-micro);
  padding:0 0 var(--bw-s2);
}
thead th{
  background:var(--bw-sunk);
  font-size:var(--bw-t-label);           /* 11px — a LABEL, never a heading */
  font-weight:var(--bw-w-semi);
  letter-spacing:var(--bw-track-label);  /* .06em — the same tracking as
                                            .bwui-tbl's column labels. It was
                                            .08em, a fifth tracking value that
                                            contradicted §4.6's own rule.     */
  text-transform:uppercase;
  color:var(--bw-muted);                 /* 8.16:1 on --bw-sunk */
}
th,td{
  text-align:left;
  padding:var(--bw-s3) var(--bw-s3);
  border-bottom:1px solid var(--bw-line);
  vertical-align:top;
}
tbody td{color:var(--bw-ink2)}           /* 16.42:1 on --bw-paper */
/* 2026-10-14, owner ruling (keep the current look): a figure column's label
   may wrap ("Commission on sales" on two lines), and a table foot is a plain
   row unless the table dresses it (the month grid does), as approved. */
th.num,td.num,td[align="right"]{text-align:right}

/* ── the vertical rhythm of a document body (SPEC §3.2) ─────────────────────
   The space ABOVE a heading is 3–4× the space below it, so a heading binds
   downward to what it introduces.
   h2 CARRIES NO RULE. v4 puts border-top on .sec — that rules off sections of
   a landing page. Moving it onto .doc h2 produced 5–8 full-width hairlines per
   article and 19 on the FAQ, roughly one every 120px: the rejected "generic
   border" instinct rotated 90°. Section separation here is space alone.     */
.bwui-doc h2{margin:var(--bw-s8) 0 var(--bw-s4)}   /* 72 / 16 = 4.5 : 1 */
.bwui-doc h3{margin:var(--bw-s6) 0 var(--bw-s3)}   /* 32 / 12 = 2.7 : 1 */
.bwui-doc h4{margin:var(--bw-s5) 0 var(--bw-s2)}   /* 24 /  8 = 3.0 : 1 */
.bwui-doc p,.bwui-doc ul,.bwui-doc ol{margin:0 0 var(--bw-s4)}
/* THE BLOCK RHYTHM MATCHES TWO PARENTS, and it has to. In the doc grid
   (§5.2/§5.3) the children of .bwui-doc are the breadcrumb, .bwui-doc__side
   and .bwui-doc__main — so a callout inside an article is a GRANDCHILD, and a
   `.bwui-doc > .bwui-callout` rule never fires. Figures and tables carried
   their own margins and hid it; the callout is what lost its rhythm.        */
:is(.bwui-doc,.bwui-doc__main) > .bwui-callout,
:is(.bwui-doc,.bwui-doc__main) > .bwui-fig,
:is(.bwui-doc,.bwui-doc__main) > .bwui-steps,
:is(.bwui-doc,.bwui-doc__main) > .bwui-tblwrap{margin:var(--bw-s6) 0}
/* …and the first child that must not push the page down is the article's h1,
   not the breadcrumb. */
.bwui-doc__main > :first-child{margin-top:0}
.bwui-doc__main > :last-child{margin-bottom:0}
.bwui-doc > :last-child{margin-bottom:0}

/* ── focus ──────────────────────────────────────────────────────────────────
   One focus treatment for the whole company: a 2px --bw-green-deep outline at
   3px offset. It is drawn OUTSIDE the box, so it never reflows a row, and it
   is a real outline rather than a shadow so Windows high-contrast keeps it.
   :focus-visible only — a mouse click on a row must not leave a ring.       */
/* 2026-10-14: the ring is INK, not green-deep. The portal measured today's
   ring at 19.68:1 on a card and 15.60:1 on the page ground in light, and
   15.52 / 17.71 in dark; green-deep is 4.38 on --bw-outer, which is the
   portal's page ground. One ring for every control, declared here once.   */
:focus-visible{
  outline:2px solid var(--bw-ink);
  outline-offset:2px;
  border-radius:var(--bw-r-xs);
}
:focus:not(:focus-visible){outline:none}

/* ── selection ──────────────────────────────────────────────────────────────
   --bw-mint is an ORNAMENT FILL: the only type that clears 4.5:1 on it is
   --bw-ink (16.04:1) / --bw-ink2 (14.75:1), and the first is what is set here.
   14.75 is the --bw-ink2 figure and was quoted here by inheritance.         */
::selection{background:var(--bw-mint);color:var(--bw-ink)}   /* 16.04:1 light · 10.47:1 dark */

/* ── reduced motion (SPEC §3.2, verbatim) ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ── print ──────────────────────────────────────────────────────────────────
   VALUES for print (the light ramp, no elevation) are re-asserted in
   bwui-tokens.css under @media print. This block is layout only: give the
   text the page, keep figures whole, and spell out where a link went.      */
@media print{
  html,body{background:var(--bw-surface)}
  body{font-size:var(--bw-t-body);line-height:var(--bw-lh-print)}
  p,ul,ol,dl,table{max-width:none}
  a{text-decoration-color:var(--bw-line-strong)}
  .bwui-doc a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-family:var(--bw-mono);
    font-size:var(--bw-t-mono);
    color:var(--bw-muted);               /* 8.46:1 on white in print */
    word-break:break-all;
  }
  h1,h2,h3,h4,h5,h6{break-after:avoid-page;page-break-after:avoid}
  p,li,blockquote,tr,figure,pre{break-inside:avoid;page-break-inside:avoid}
  thead{display:table-header-group}
  pre{white-space:pre-wrap;overflow:visible}
  @page{margin:16mm}
}