/* ═══════════════════════════════════════════════════════════════════════════
   theme-apple.css — the Apple HIG skin. Loaded last; overrides the tokens and
   the few component rules that carried the earlier editorial look (serif
   display type, warm paper ground, uppercase labels, dark rail).

   Type:   the system stack → SF Pro on Apple devices, Segoe/Roboto elsewhere.
           macOS text styles: body 13, headline 13/600, title 22, caption 11.
   Color:  one accent, systemBlue #007AFF. Labels and grays from the system
           palette. Semantic status colors darkened for 4.5:1 on their tints.
   Shape:  8px controls, 12px cards, 16px sheets, capsule chips. Every radius
           comes from the --r-* scale below; no component rule carries a literal.

   Density contract (THEME-2) — keep it, or the product stops being dense:
   · Table row 40px at desktop, 48px at compact width. thead th 32px.
   · No density toggle: 40px IS the density. No zebra striping. No vertical
     cell borders — a hairline under each row is the only rule.
   · Card padding 16px; a table's first and last cells line up with the card
     head title at 16px, not with the cell padding.
   · Every number tabular; money right-aligned with .r; one heading weight (600).
   · Hit targets: 44px at compact width, 32px floor at desktop (MOBILE-2).
   · Type floor 11px, except monograms (.org-badge, .avatar), the ⌘K keycap
     and count pips, whose circles cannot hold 11px, and the iOS tab bar,
     whose labels are 10pt in the HIG.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The paper stylesheet. The shells should link it themselves —
   <link rel="stylesheet" href="/css/print.css" media="print"> after this file —
   and this @import is the bridge until they do; loading it twice is harmless.
   Its token reset is specificity-scoped (html:root), so it wins over the dark
   palette below regardless of the order the two arrive in. */
@import url("/css/print.css") print;

:root{
  /* system palette */
  --sys-blue:#007AFF;    --sys-blue-2:#0066D6;   --sys-blue-tint:rgba(0,122,255,.10);
  --sys-blue-3:#0055B3;  /* pressed/hover of the filled blue */
  --info-ink:#0055B3;    /* 11px accent text ON --sys-blue-tint: 6.3:1 (the -2 ink is 4.3) */
  --sys-green:#34C759;   --sys-green-text:#1B7135; --sys-green-tint:rgba(52,199,89,.14);
  --sys-red:#FF3B30;     --sys-red-text:#B81B12;   --sys-red-tint:rgba(255,59,48,.12);
  --sys-red-text-2:#A81810;
  --sys-orange:#FF9500;  --sys-orange-text:#925200; --sys-orange-tint:rgba(255,149,0,.14);
  --sys-indigo:#5856D6;  --sys-indigo-text:#4644B8; --sys-indigo-tint:rgba(88,86,214,.12);
  --sys-gray:#8E8E93; --sys-gray2:#AEAEB2; --sys-gray3:#C7C7CC; --sys-gray4:#D1D1D6; --sys-gray5:#E5E5EA; --sys-gray6:#F2F2F7;
  --label:#1D1D1F; --label-2:#3C3C43; --label-3:#696970; --label-4:#8E8E93;   /* label-4 is icon-only: it does not carry text */
  --separator:rgba(60,60,67,.18); --separator-2:rgba(60,60,67,.10);

  /* remap the design tokens app.css and app-ext.css consume */
  --ground:var(--sys-gray6);
  --surface:#FFFFFF;
  --surface-2:#FAFAFC;
  --rail:#F5F5F7;
  --rail-2:#FFFFFF;
  --rail-ink:var(--label);
  --rail-ink-2:var(--label-3);

  --ink:var(--label);
  --ink-2:var(--label-2);
  --ink-3:var(--label-3);
  --hair:var(--sys-gray5);
  --hair-2:#EEEEF1;
  --line:var(--sys-gray4);

  --navy:var(--sys-blue);
  --navy-2:var(--sys-blue-2);
  --navy-tint:var(--sys-blue-tint);

  --ok:var(--sys-green-text);      --ok-tint:var(--sys-green-tint);
  --bad:var(--sys-red-text);       --bad-tint:var(--sys-red-tint);
  --hold:var(--sys-orange-text);   --hold-tint:var(--sys-orange-tint);
  --wait:var(--label-3);           --wait-tint:rgba(120,120,128,.12);
  --stop:var(--sys-indigo-text);   --stop-tint:var(--sys-indigo-tint);

  --shadow-1:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-2:0 2px 6px rgba(0,0,0,.06), 0 12px 32px -12px rgba(0,0,0,.18);
  --shadow-3:0 16px 48px -12px rgba(0,0,0,.28), 0 0 0 .5px rgba(0,0,0,.06);

  /* radius scale — the only place a corner size is written */
  --r-s:6px;      /* inline tokens and small tiles: code, tag, iso, org badge, segment */
  --r-c:8px;      /* controls: buttons, fields, search, icon buttons, segment shell */
  --r-m:10px;     /* nested surfaces: org switcher, deal card, certificate, compact nav */
  --r:12px;       /* cards, toasts */
  --r-l:16px;     /* sheets, auth card */
  --r-pill:999px; /* capsules: chips, status, counts */

  /* control border and focus ring — one pair, used by every input */
  --input:var(--sys-gray4);
  --ring:var(--sys-blue);
  --ring-tint:var(--sys-blue-tint);
  --ui:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
  --serif:var(--ui);
  --mono:"SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

  /* Semantic accents. A filled ground always carries --on-accent; accent TEXT
     on a page ground is a different value, because in dark they move opposite
     ways: the fill gets darker, the text gets lighter. */
  --accent:var(--sys-blue);          /* decoration: rings, sparkline, step dots */
  --accent-solid:var(--sys-blue-2);  /* filled control ground */
  --accent-solid-2:var(--sys-blue-3);/* its hover */
  --accent-ink:var(--sys-blue-2);    /* links and accent text */
  --on-accent:#FFFFFF;               /* the ink on any solid ground */
  --on-accent-dim:rgba(255,255,255,.42);
  --danger-solid:var(--sys-red-text);
  --danger-solid-2:var(--sys-red-text-2);
  --ok-solid:var(--sys-green-text);
  --tint-funded:#F7FCF8;             /* the funded deal card */
  --chrome:rgba(255,255,255,.86);    /* the translucent top bar */
  --chrome-2:rgba(255,255,255,.92);  /* its compact-width twin and the tab bar */
  --hover-fill:rgba(0,0,0,.05);      /* the rail's hover wash */

  --focus:var(--ring);
  --focus-ring:0 0 0 2px var(--surface), 0 0 0 4px var(--ring);

  /* the two select chevrons and the toast grounds: images and inks that must
     also flip with the theme, so they are tokens rather than literals */
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  --chevron-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  --toast-ground:rgba(29,29,31,.94);
  --toast-ground-solid:#1D1D1F;
  --toast-ok:rgba(30,122,58,.96);
  --toast-bad:rgba(196,30,20,.96);
}

html{-webkit-text-size-adjust:100%}
body{font:400 13px/1.45 var(--ui); letter-spacing:-.01em; color:var(--ink); background:var(--ground)}
b,strong,.who{font-weight:600}

/* ── type scale (macOS text styles) ─────────────────────────────────────── */
.page-head h1{font:600 22px/1.2 var(--ui); letter-spacing:-.02em}
.page-head p{font-size:13px; color:var(--ink-3)}
.card-head h2{font:600 13px/1.3 var(--ui); letter-spacing:-.01em}
.card-head .sub{font-size:12px; color:var(--ink-3)}
.kpi-l{font:500 11px/1.3 var(--ui); letter-spacing:0; text-transform:none; color:var(--ink-3)}
.kpi-v{font:600 26px/1.15 var(--ui); letter-spacing:-.02em; margin-top:6px}
.kpi-v small{font-weight:500; font-size:15px; color:var(--ink-3)}
.gauge-v{font:600 28px/1.1 var(--ui); letter-spacing:-.02em}
.gauge-v .u{font-weight:500}
.ring-t .pc{font:600 30px/1 var(--ui); letter-spacing:-.02em}
.fact .l{font:500 11px/1.3 var(--ui); letter-spacing:0; text-transform:none; color:var(--ink-3)}
.fact .v{font-weight:600}
.deal .a{font:600 17px/1.1 var(--ui); letter-spacing:-.015em}
.deal .n{font-weight:600}
.empty h3{margin:0 0 4px; font:600 16px/1.3 var(--ui); color:var(--ink)}
.empty.tall h1{margin:0 0 6px; font:600 24px/1.2 var(--ui); color:var(--ink)}
.auth-card h1{margin:2px 0 0; font:600 24px/1.2 var(--ui); letter-spacing:-.02em}
.auth-brand .wm,.rail-brand .wm{font:600 18px/1 var(--ui); letter-spacing:-.02em; color:var(--label)}
dialog.sheet .card-head h2{font:600 15px/1.3 var(--ui)}
table.t thead th{font:600 11px/1.2 var(--ui); letter-spacing:0; text-transform:none; color:var(--ink-3); background:var(--surface-2); border-bottom:1px solid var(--separator-2)}
.rail-sec{font:600 11px/1.3 var(--ui); letter-spacing:0; text-transform:none; color:var(--label-3); padding:16px 12px 6px}
/* The same un-uppercasing as .kpi-l / .fact .l / thead th / .rail-sec above.
   The source strings are already sentence case ("Debits this account"), so
   dropping the transform is the whole change. .doc-sub is the statement's
   section head, which prints. */
.lbl-sm,.menu-head,.doc-sub{font:600 11px/1.3 var(--ui); letter-spacing:0; text-transform:none; color:var(--ink-3)}
.doc-sub{color:var(--label-2)}
.crumb{font-size:13px}
.crumb b{font-weight:600}
.mono,.code{font-family:var(--mono)}

/* ── rail: a light macOS sidebar, one blue selection ────────────────────── */
.rail{background:var(--rail); border-right:1px solid var(--separator-2)}
.rail-brand svg{color:var(--accent)}
.rail-brand .mk-stop{fill:var(--accent)}
.org{background:var(--rail-2); border:1px solid var(--separator-2); box-shadow:var(--shadow-1); border-radius:var(--r-m)}
.org-badge{background:var(--accent-solid); color:var(--on-accent); border-radius:var(--r-s)}   /* 10px monogram: exempt from the 11px type floor */
.org-name{color:var(--label)}
.org-sub{color:var(--label-3); font-size:11px; letter-spacing:0}
.org svg{color:var(--label-4)}
.rail a{color:var(--label); border-radius:var(--r-c); font-size:13px; font-weight:400}
.rail a svg{color:var(--label-3)}
.rail a[aria-current]{background:var(--accent-solid); color:var(--on-accent); font-weight:500}
.rail a[aria-current] svg{color:var(--on-accent)}
.rail a .ct{background:rgba(120,120,128,.14); color:var(--label-2); font-weight:500; font-size:11px}
.rail a[aria-current] .ct{background:rgba(0,0,0,.25); color:var(--on-accent)}
.rail a.flag .ct{background:var(--danger-solid); color:var(--on-accent)}
.rail-foot{border-top:1px solid var(--separator-2)}
.rail-user b{color:var(--label)}
.rail-user span{color:var(--label-3); font-size:11px}
.avatar,.rail-user .avatar{background:var(--sys-gray3); color:var(--label)}   /* 10px monogram: exempt from the 11px type floor */
.rail-user .signout .btn{color:var(--label-3)}
.rail a:focus-visible{box-shadow:0 0 0 2px var(--rail), 0 0 0 4px var(--ring)}

/* ── top bar ───────────────────────────────────────────────────────────── */
.top{background:var(--chrome); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--separator-2); position:sticky; top:0; z-index:10}
/* Keyboard focus must land where it can be SEEN.
   Chrome scrolls a newly focused control flush to the layout viewport's edge,
   and nothing told it about the fixed chrome: measured at 390x844 on
   /app/settings, 45 tabs from the top put `input[name=notify_paid_off]` at
   800-844 with the tab bar starting at 786 — the checkbox and its whole focus
   ring 100% behind the bar — and Shift+Tab put the CURRENT PASSWORD field at
   0-44 under a header ending at 55, so an operator types a password into a
   field they cannot see. `scroll-padding` on the scrolling root is what
   reserves that space. The header is sticky at desk width too. */
:root{scroll-padding-top:64px}
.search{background:rgba(120,120,128,.10); border:1px solid transparent; border-radius:var(--r-c)}
.search:focus-within{background:var(--surface); border-color:var(--ring); box-shadow:0 0 0 3px var(--ring-tint)}
.search .kbd{background:transparent; border-color:var(--input)}   /* 10px keycap: exempt from the 11px type floor */
.clock{color:var(--label-3)}
.dot{background:var(--sys-green)}
.top .icon-btn{width:32px; height:32px; border-color:transparent; background:rgba(120,120,128,.10); border-radius:var(--r-c); color:var(--label-2)}
.top .icon-btn .pip{background:var(--danger-solid); color:var(--on-accent); border-color:var(--surface)}   /* 9px count pip: exempt from the 11px type floor */

/* ── surfaces ───────────────────────────────────────────────────────────── */
.card{border:1px solid var(--separator-2); border-radius:var(--r); box-shadow:var(--shadow-1)}
.card-head{border-bottom:1px solid var(--separator-2)}
/* Edge alignment: a table that is the card's own body starts and ends on the
   card's 16px gutter, so the first column's text sits under the head title.
   Scoped to a direct .t-wrap child — a table inside .card-body is already
   padded, and one inside a sheet keeps the sheet's own rhythm. */
.card>.t-wrap table.t th:first-child,.card>.t-wrap table.t td:first-child{padding-left:16px}
.card>.t-wrap table.t th:last-child,.card>.t-wrap table.t td:last-child{padding-right:16px}
.card-foot{border-top:1px solid var(--separator-2); color:var(--ink-3)}
.hr{background:var(--separator-2)}
.kpi{border-right:1px solid var(--separator-2)}
.fact{border-bottom:1px solid var(--separator-2)}
.fact:nth-child(odd){border-right:1px solid var(--separator-2)}
table.t tbody td,table.t tbody th{border-bottom:1px solid var(--separator-2)}
table.t tr.child td,table.t tr.child th{background:var(--surface-2)}
table.t tbody tr.hi{background:var(--sys-red-tint)}
table.t tbody tr.hi td,table.t tbody tr.hi th{border-bottom-color:rgba(255,59,48,.18)}
table.t tbody tr.sel{background:var(--sys-blue-tint)}
.fd{border-bottom:1px solid var(--separator-2)}
.tab-bar{border-bottom:1px solid var(--separator-2)}
.tab-bar a{color:var(--label-3)}
.tab-bar a[aria-current]{color:var(--accent-ink); border-bottom-color:var(--accent); font-weight:600}
.tab-bar .n{color:var(--label-3); font-size:11px}
.deal{background:var(--surface); border:1px solid var(--separator-2); border-radius:var(--r-m); box-shadow:var(--shadow-1)}
.deal .m{font-size:11px}
.deal .m .iso{background:var(--sys-gray6); border-color:transparent; border-radius:var(--r-s); color:var(--label-2); font-weight:500}
.deal .stip i{background:var(--sys-gray5)}
.deal .stip i.y{background:var(--sys-green)}
.deal .stip i.n{background:var(--sys-red)}
/* No coloured strip down the side of a card: the meta line already says
   'Flagged' in words, so the bar was decoration that read as template chrome.
   Colour never carries meaning on its own here (see CONVENTIONS.md). */
.deal.flag{border-left:1px solid var(--separator-2)}
.deal.funded{border-color:rgba(52,199,89,.35); background:var(--tint-funded)}
.col-h .t{font-weight:600}
.col-h .n{background:var(--sys-gray5); color:var(--label-2); font-weight:500; font-size:11px}
.col-h .amt{color:var(--label-3); font-size:11px}

/* ── controls ─────────────────────────────────────────────────────────────── */
.btn{font:500 13px/1 var(--ui); letter-spacing:-.005em; border-radius:var(--r-c); background:var(--accent-solid); border-color:var(--accent-solid); color:var(--on-accent); padding:8px 14px}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--surface); border-color:var(--input); color:var(--label)}
.btn.quiet{color:var(--accent-ink); background:transparent; border-color:transparent}
.btn.danger{background:var(--danger-solid); border-color:var(--danger-solid); color:var(--on-accent)}
.btn.ghost.danger{background:var(--surface); color:var(--sys-red-text); border-color:rgba(255,59,48,.35)}
.btn.ok{background:var(--ok-solid); border-color:var(--ok-solid); color:var(--on-accent)}
.btn.sm{font-size:12px; padding:6px 10px}
.btn[disabled]{opacity:.4}
.chip,a.chip,button.chip,.chip-select{border-radius:var(--r-pill); border-color:var(--input); color:var(--label-2); font-weight:500; background:var(--surface)}
.chip.on,.chip-select.on{background:var(--accent-solid); border-color:var(--accent-solid); color:var(--on-accent)}
.chip.on svg{color:var(--on-accent)}
.chip-select{background:var(--surface) var(--chevron) no-repeat right 9px center/11px 11px}
.chip-select.on{background:var(--accent-solid) var(--chevron-on) no-repeat right 9px center/11px 11px}
.seg{background:rgba(120,120,128,.12); border:0; border-radius:var(--r-c); padding:2px}
.seg a,.seg button,.seg span{font-size:12px; font-weight:500; border-radius:var(--r-s); color:var(--label-2); padding:5px 12px}
.seg .n{color:var(--label-2)}
.seg a[aria-current],.seg button[aria-current],.seg span[aria-current]{background:var(--surface); color:var(--label); box-shadow:0 1px 3px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.04); font-weight:600}
.field input,.field select,.field textarea{border-radius:var(--r-c); border-color:var(--input); font-family:var(--ui)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{border-color:var(--ring); box-shadow:0 0 0 3px var(--ring-tint)}
.field>span{font-weight:500}
table.t input[type="checkbox"]{accent-color:var(--sys-blue); border-radius:var(--r-s)}
dialog.sheet{border-radius:var(--r-l); border-color:var(--separator-2); box-shadow:var(--shadow-3)}
dialog.sheet::backdrop{background:rgba(0,0,0,.30)}
.toast{background:var(--toast-ground); border-radius:var(--r); backdrop-filter:blur(12px)}
.toast.ok{background:var(--toast-ok)} .toast.bad{background:var(--toast-bad)}

/* ── status vocabulary ──────────────────────────────────────────────────── */
.st{font-weight:500; border-radius:var(--r-pill)}
.st.settled{background:var(--sys-green-tint); color:var(--sys-green-text)}
.st.returned{background:var(--sys-red-tint); color:var(--sys-red-text)}
.st.retry{background:var(--sys-orange-tint); color:var(--sys-orange-text)}
.st.pending,.st.submitted{background:rgba(120,120,128,.12); color:var(--label-2)}
.st.blocked{background:var(--sys-indigo-tint); color:var(--sys-indigo-text)}
.st.info{background:var(--sys-blue-tint); color:var(--info-ink)}
.code{border-color:var(--input); background:var(--sys-gray6); color:var(--label-2); border-radius:var(--r-s); font-size:11px}
.code.bad{border-color:rgba(255,59,48,.3); background:var(--sys-red-tint); color:var(--sys-red-text)}
.code.stop{border-color:rgba(88,86,214,.3); background:var(--sys-indigo-tint); color:var(--sys-indigo-text)}
.delta.up{background:var(--sys-green-tint); color:var(--sys-green-text)}
.delta.dn{background:var(--sys-red-tint); color:var(--sys-red-text)}
.kpi.ok .kpi-v{color:var(--sys-green-text)}
.kpi.bad .kpi-v{color:var(--sys-red-text)}
.track{background:var(--sys-gray5)}
.track i.ok{background:var(--sys-green)} .track i.hold{background:var(--sys-orange)} .track i.bad{background:var(--sys-red)}
.track .mark{background:var(--label); opacity:.4}
.gauge-h .cap{font-size:11px}
.scale{font-size:11px}
.ring .bg{stroke:var(--sys-gray5)}
.ring .fg,.ring .tick{stroke:var(--accent)}
.spark path{stroke:var(--accent)}
.spark .area{fill:var(--sys-blue-tint)}
/* The default for a single-series legend. NOT !important: charts.ts writes the
   per-series colour inline (TONE_VAR), and an !important here painted "Collected"
   and "Expected" — and all eight cohort swatches — the same systemBlue while the
   lines themselves were correctly drawn in different colours. One accent governs
   interactive chrome, not data series that have to be told apart. */
.legend i{background:var(--accent)}
.step .b{border-color:var(--sys-gray3)}
.step.done .b{background:var(--sys-green); border-color:var(--sys-green)}
.step.now .b{background:var(--accent); border-color:var(--accent)}
.rail-x{background:var(--sys-gray4)} .rail-x.done{background:var(--sys-green)}
.fd.critical .sev{background:var(--sys-red)} .fd.warning .sev{background:var(--sys-orange)} .fd.info .sev{background:var(--sys-blue)}
.banner{border-radius:var(--r); font-size:13px}
.banner.warn{background:var(--sys-orange-tint); border-color:rgba(255,149,0,.3); color:var(--sys-orange-text)}
.banner.stop{background:var(--sys-indigo-tint); border-color:rgba(88,86,214,.3); color:var(--sys-indigo-text)}
.banner.ok{background:var(--sys-green-tint); border-color:rgba(52,199,89,.35); color:var(--sys-green-text)}
.row-note{color:var(--sys-red-text)}
.dot.amber{background:var(--sys-orange)}
/* servicing.css gives .day-cell.today .d the light-mode accent ink, which on the
   dark ground sits at 2.8:1 against its own tint. The border already carries the
   selection; the label only has to be legible. */
:root[data-theme="dark"] .day-cell.today .d{color:var(--accent-ink, #0A84FF)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .day-cell.today .d{color:var(--accent-ink, #0A84FF)}}
.tag{background:var(--sys-gray6); border-color:transparent; color:var(--label-3); border-radius:var(--r-s)}
.cert{background:var(--sys-gray6); border-color:var(--separator-2); border-radius:var(--r-m)}
.auth-card{border-radius:var(--r-l)}
.auth-brand svg{color:var(--accent)}
.auth-brand .mk-stop{fill:var(--accent)}
.skip{background:var(--accent-solid); color:var(--on-accent)}
.empty-row td{color:var(--label-3)}

/* ── the document shell (THEME-7): screen half ───────────────────────────
   src/web/documents.ts renders documentPage() into .doc — statements, payoff
   letters, submission packets. print.css carries the paper half; these rules
   are what makes the screen and the page agree, and they cannot live in
   print.css because that file is linked media="print". */
.doc{
  max-width:760px; width:100%; margin-inline:auto; background:var(--surface);
  border:1px solid var(--separator-2); border-radius:var(--r); box-shadow:var(--shadow-1);
  padding:24px;
}
.doc-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:start;
  padding-bottom:16px; border-bottom:1px solid var(--separator);
}
.doc-head .wm{font:600 18px/1.2 var(--ui); letter-spacing:-.02em}
.doc-head .from{font-size:12px; color:var(--label-3); margin-top:4px}
.doc-head .meta{text-align:right; font-size:12px; color:var(--label-3)}
.doc-head .meta b{display:block; font:600 13px/1.3 var(--ui); color:var(--label)}
.doc-title{font:600 17px/1.25 var(--ui); letter-spacing:-.01em; margin:20px 0 10px}
.doc-totals{margin:16px 0 0 auto; width:max-content; text-align:right; font-variant-numeric:tabular-nums}
.doc-totals .l{color:var(--label-3); padding-right:16px}
.doc-totals .g{font-weight:600; border-top:1px solid var(--separator); padding-top:6px}
.doc-note{margin-top:20px; font-size:12px; color:var(--label-3)}
.doc-acts{display:flex; gap:8px; align-items:center}
.print-only{display:none}
@media (max-width:600px){
  .doc{padding:16px}
  .doc-head{grid-template-columns:minmax(0,1fr)}
  .doc-head .meta{text-align:left}
  .doc-acts .btn{min-height:44px}
}

/* THEME-8: on a 27-inch display a 2000px scan line is unreadable, so the
   content column stops at 1560px. The top bar keeps its full-width ground and
   pads its contents onto the same column, so the crumb still sits above the
   page title. max-width self-gates: below a ~1830px window nothing changes. */
.page{max-width:1560px; width:100%; margin-inline:auto}
.top{padding-inline:max(22px, calc((100% - 1560px) / 2 + 22px))}

/* Links are blue and only blue. */
a{color:var(--accent-ink)}
table.t a{color:inherit}
.card-foot a.btn{color:var(--accent-ink)}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark (THEME-3). Two blocks, one palette: the explicit choice from Settings
   (:root[data-theme='dark']) and the OS preference, which a Light choice must
   be able to override (:root:not([data-theme='light'])).

   Only TOKENS are remapped here. No component rule below or above branches on
   the theme — if a rule needs a different colour in dark, the fix is a token,
   not a second rule. color-scheme is set here as well as in the shell's meta,
   so native scrollbars, date pickers and checkboxes follow the page.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{color-scheme:light dark}
:root[data-theme='light']{color-scheme:light}

:root[data-theme='dark']{
  color-scheme:dark;

  /* system palette, dark */
  --sys-blue:#0A84FF;    --sys-blue-2:#409CFF;   --sys-blue-tint:rgba(10,132,255,.20);
  --sys-blue-3:#0A6FE8;
  --info-ink:#6FB6FF;    /* 6.2:1 on the dark blue tint; --sys-blue-3 is 2.8 there */
  --sys-green:#30D158;   --sys-green-text:#5DD67E; --sys-green-tint:rgba(48,209,88,.14);
  --sys-red:#FF453A;     --sys-red-text:#FF6961;   --sys-red-tint:rgba(255,69,58,.12);
  --sys-red-text-2:#FF8078;
  --sys-orange:#FF9F0A;  --sys-orange-text:#FFB340; --sys-orange-tint:rgba(255,159,10,.14);
  --sys-indigo:#5E5CE6;  --sys-indigo-text:#9C9AF7; --sys-indigo-tint:rgba(94,92,230,.18);
  --sys-gray:#8E8E93; --sys-gray2:#636366; --sys-gray3:#48484A; --sys-gray4:#3A3A3C; --sys-gray5:#2C2C2E; --sys-gray6:#1C1C1E;
  --label:#F5F5F7; --label-2:rgba(235,235,245,.80); --label-3:rgba(235,235,245,.64); --label-4:rgba(235,235,245,.46);
  --separator:rgba(84,84,88,.65); --separator-2:rgba(84,84,88,.42);

  /* the design tokens app.css and app-ext.css consume */
  --ground:#000000;
  --surface:#1C1C1E;
  --surface-2:#2C2C2E;
  --rail:#1C1C1E;
  --rail-2:#2C2C2E;
  --hair-2:#2C2C2E;

  --shadow-1:none;
  --shadow-2:0 2px 8px rgba(0,0,0,.55);
  --shadow-3:0 16px 48px -12px rgba(0,0,0,.72), 0 0 0 .5px rgba(255,255,255,.08);

  /* semantic accents: the fill darkens, the text lightens */
  --accent:#0A84FF; --accent-solid:#0A5FCB; --accent-solid-2:#0A6FE8; --accent-ink:#409CFF;
  --danger-solid:#C4241A; --danger-solid-2:#D62E22; --ok-solid:#1E7C3B;
  --tint-funded:#14241A;
  --chrome:rgba(28,28,30,.86); --chrome-2:rgba(28,28,30,.92);
  --hover-fill:rgba(255,255,255,.08);
  --toast-ground:rgba(72,72,74,.96); --toast-ground-solid:#48484A;
  --toast-ok:rgba(30,124,59,.98); --toast-bad:rgba(196,36,26,.98);
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23AEAEB2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme='light']){
    color-scheme:dark;
  
    /* system palette, dark */
    --sys-blue:#0A84FF;    --sys-blue-2:#409CFF;   --sys-blue-tint:rgba(10,132,255,.20);
    --sys-blue-3:#0A6FE8;
  --info-ink:#6FB6FF;    /* 6.2:1 on the dark blue tint; --sys-blue-3 is 2.8 there */
    --sys-green:#30D158;   --sys-green-text:#5DD67E; --sys-green-tint:rgba(48,209,88,.14);
    --sys-red:#FF453A;     --sys-red-text:#FF6961;   --sys-red-tint:rgba(255,69,58,.12);
    --sys-red-text-2:#FF8078;
    --sys-orange:#FF9F0A;  --sys-orange-text:#FFB340; --sys-orange-tint:rgba(255,159,10,.14);
    --sys-indigo:#5E5CE6;  --sys-indigo-text:#9C9AF7; --sys-indigo-tint:rgba(94,92,230,.18);
    --sys-gray:#8E8E93; --sys-gray2:#636366; --sys-gray3:#48484A; --sys-gray4:#3A3A3C; --sys-gray5:#2C2C2E; --sys-gray6:#1C1C1E;
    --label:#F5F5F7; --label-2:rgba(235,235,245,.80); --label-3:rgba(235,235,245,.64); --label-4:rgba(235,235,245,.46);
    --separator:rgba(84,84,88,.65); --separator-2:rgba(84,84,88,.42);
  
    /* the design tokens app.css and app-ext.css consume */
    --ground:#000000;
    --surface:#1C1C1E;
    --surface-2:#2C2C2E;
    --rail:#1C1C1E;
    --rail-2:#2C2C2E;
    --hair-2:#2C2C2E;
  
    --shadow-1:none;
    --shadow-2:0 2px 8px rgba(0,0,0,.55);
    --shadow-3:0 16px 48px -12px rgba(0,0,0,.72), 0 0 0 .5px rgba(255,255,255,.08);
  
    /* semantic accents: the fill darkens, the text lightens */
    --accent:#0A84FF; --accent-solid:#0A5FCB; --accent-solid-2:#0A6FE8; --accent-ink:#409CFF;
    --danger-solid:#C4241A; --danger-solid-2:#D62E22; --ok-solid:#1E7C3B;
    --tint-funded:#14241A;
    --chrome:rgba(28,28,30,.86); --chrome-2:rgba(28,28,30,.92);
    --hover-fill:rgba(255,255,255,.08);
    --toast-ground:rgba(72,72,74,.96); --toast-ground-solid:#48484A;
    --toast-ok:rgba(30,124,59,.98); --toast-bad:rgba(196,36,26,.98);
    --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23AEAEB2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mobile (compact width). Rules from the HIG: 44pt targets, 16px inputs so
   Safari never zooms, sheets from the bottom, safe areas respected, horizontal
   content snaps instead of overflowing.
   ═══════════════════════════════════════════════════════════════════════════ */
*{-webkit-tap-highlight-color:transparent}
a,button,input,select,textarea,summary,[data-href]{touch-action:manipulation}

@media (max-width:920px){
  /* 56px of sticky header, 70px of fixed tab bar, plus the safe areas. */
  :root{
    scroll-padding-top:calc(56px + env(safe-area-inset-top));
    scroll-padding-bottom:calc(70px + env(safe-area-inset-bottom));
  }
  .top{position:static; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface)}
  .rail{padding-top:env(safe-area-inset-top); border-bottom:1px solid var(--separator-2); gap:6px}
  .rail a{min-height:44px; padding:10px 12px; font-size:14px}
  .rail nav{gap:4px}
  .rail-brand{padding:8px 6px}
  .org{max-width:170px; padding:6px 8px}
  .org-sub{display:none}
  .rail-user .signout .btn{min-height:44px}
  .page{padding:14px 14px calc(20px + env(safe-area-inset-bottom))}
  .btn{min-height:40px}
  .btn.sm{min-height:40px}
  .chip,a.chip,button.chip,.chip-select{min-height:36px}
  .seg a,.seg button{min-height:36px}
  .tab-bar{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tab-bar a{min-height:44px}
  table.t tbody td,table.t tbody th{height:48px}
  .board{grid-template-columns:repeat(6,minmax(240px,1fr)); scroll-snap-type:x mandatory; gap:12px; margin-inline:-14px; padding-inline:14px}
  .board>div{scroll-snap-align:start}
  .deal{padding:12px}
  .deal .a{font-size:19px}
  .deal .n{font-size:14px}
  .deal .m{font-size:12px}
  .page-head h1{font-size:24px}
  .fd{padding:12px 14px}
}
@media (max-width:600px){
  body{font-size:14px}
  .field input,.field select,.field textarea,.search input{font-size:16px}
  .search input{padding:10px 0}
  .search{min-height:40px}
  .clock{display:none}
  .kpi{padding:12px 14px}
  .kpi-v{font-size:22px}
  .facts{grid-template-columns:1fr}
  .fact:nth-child(odd){border-right:0}
  .card-head{flex-wrap:wrap; row-gap:6px}
  .card-head .acts{margin-left:0; width:100%; flex-wrap:wrap}
  .card-foot{flex-wrap:wrap; row-gap:4px}
  .card-foot a.btn{margin-left:0!important}
  dialog.sheet{width:100vw; max-width:100vw; margin:auto 0 0; border-radius:var(--r-l) var(--r-l) 0 0; max-height:92vh; overflow:auto; padding-bottom:env(safe-area-inset-bottom)}
  dialog.sheet[open]{animation:sheet-up var(--t) var(--ease)}
  @keyframes sheet-up{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}
  .form-acts{flex-direction:column-reverse}
  .form-acts .btn{width:100%; justify-content:center; min-height:44px}
  .btn.wide{min-height:44px}
  /* 44pt ladder (MOBILE-2): every control a thumb can reach is 44px. */
  .btn.sm,.chip,a.chip,button.chip,.chip-select,.seg a,.seg button{min-height:44px}
  .field input,.field select,.field textarea{min-height:44px}
  .search{min-height:44px}
  .top .icon-btn{width:44px; height:44px}
  dialog.sheet .x,.toast .x{min-width:44px; min-height:44px}
  .toast .x{padding:12px; margin-right:-8px}
  table.t input[type="checkbox"]{width:22px; height:22px}
  table.t td.act{padding-inline:16px}
  .ring{flex-direction:column; align-items:flex-start}
  .steps{gap:4px 10px}
  /* `.toasts` is position:static inside `.toast-stack` (public/css/shell.css),
     so a `bottom` on it does nothing at all. The offset belongs on the stack,
     and it lives in shell.css with the rule that positions it — one owner. */
}

/* ── compact-width navigation: tab bar + More sheet ─────────────────────── */
.tabbar{display:none}
.top-brand{display:none}
.more-nav{display:flex; flex-direction:column; gap:2px}
.more-nav .rail-sec{padding:12px 8px 4px}
.more-nav a{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border-radius:var(--r-m); color:var(--label); text-decoration:none; font-size:15px}
.more-nav a svg{width:18px; height:18px; color:var(--label-3)}
.more-nav a .ct{margin-left:auto; font-size:12px; color:var(--label-3); background:rgba(120,120,128,.14); border-radius:var(--r-pill); padding:2px 8px; min-width:24px; text-align:center}
.more-nav a[aria-current]{background:var(--sys-blue-tint); color:var(--accent-ink); font-weight:600}
.more-nav a[aria-current] svg{color:var(--accent)}
.more-nav a.flag .ct{background:var(--danger-solid); color:var(--on-accent)}
dialog.more .rail-user{margin-top:8px; padding-top:12px; border-top:1px solid var(--separator-2)}
dialog.more .rail-user .signout{margin-left:auto}

@media (max-width:920px){
  .rail{display:none}
  .app{display:block; min-height:100vh}
  .top{position:sticky; top:0; z-index:20; background:var(--chrome-2); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); padding-top:calc(10px + env(safe-area-inset-top))}
  .top-brand{display:inline-flex; align-items:center; color:var(--accent)}
  .top-brand svg{height:18px; width:auto}
  .top-brand .mk-stop{fill:var(--accent)}
  .page{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .tabbar{
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:30;
    height:calc(58px + env(safe-area-inset-bottom)); padding:0 4px env(safe-area-inset-bottom);
    background:var(--chrome-2); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--separator-2);
  }
  .tabbar a,.tabbar button{
    appearance:none; background:transparent; border:0; font-family:var(--ui); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:relative;
    min-height:44px; padding:6px 2px; color:var(--label-3); text-decoration:none; font-size:10px; font-weight:500; letter-spacing:0;
    border-radius:var(--r-m);
  }
  .tabbar svg{width:22px; height:22px; color:inherit}
  .tabbar a[aria-current]{color:var(--accent-ink)}
  .tabbar .pip{position:absolute; top:4px; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:var(--r-pill); background:var(--danger-solid); color:var(--on-accent); font:600 10px/16px var(--ui); text-align:center; padding:0 4px}
  dialog.sheet.more{max-height:88vh}
}

/* ── hover is a capability (THEME-5) ─────────────────────────────────────
   Mirrors the block in app-ext.css: every hover-only affordance the skin adds
   is gated, so a tap on a phone never leaves a control looking hovered. */
@media (hover:hover){
  .rail a:hover{background:var(--hover-fill)}
  .rail-user .signout .btn:hover{color:var(--accent-ink); background:transparent}
  .top .icon-btn:hover{background:rgba(120,120,128,.18)}
  table.t tbody tr:hover:not(.child):not(.hi):not(.sel){background:var(--surface-2)}
  .btn:hover{background:var(--accent-solid-2); border-color:var(--accent-solid-2)}
  .btn.ghost:hover{background:var(--sys-gray6); border-color:var(--sys-gray3)}
  .btn.quiet:hover{background:var(--sys-blue-tint)}
  .btn.danger:hover{background:var(--danger-solid-2); border-color:var(--danger-solid-2)}
}

/* ── Reduce Transparency (THEME-5) ───────────────────────────────────────
   Must come after the compact blocks above, which re-add the blur to the
   sticky top bar and the tab bar. prefers-reduced-transparency is Chromium
   only today; on Safari the fallback that actually ships is the opaque .top
   in the <=920 block, so a Mac with Reduce Transparency on still gets a solid
   bar there. Nothing here changes a colour — only the glass. */
@media (prefers-reduced-transparency:reduce){
  .top,.tabbar{background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none}
  /* The toast ground is pinned to the solid tokens, never to a label ink:
     --sys-*-text lightens in dark, and white toast copy on it would vanish. */
  .toast{backdrop-filter:none; background:var(--toast-ground-solid)}
  .toast.ok{background:var(--ok-solid)}
  .toast.bad{background:var(--danger-solid)}
  dialog.sheet::backdrop{backdrop-filter:none}
}