/* ── src/ui/tokens.css ── */
/* ==========================================================================
   TOKENS — the only file in the app allowed to contain a raw colour.
   (UI brief §4–§8, 12 Sep 2026.) Two layers:

   PRIMITIVES never change between themes and are never named by a
   component. SEMANTICS are what a thing is FOR and flip with the theme.
   Dark is authored first (:root); light is the variant (body.light).
   --text-on-dark and --text-on-accent never flip — that is what keeps the
   header readable in both themes (#68, the "email invisible in dark mode"
   bug, cannot happen with a token that does not move).

   The legacy names (--ink, --bone, --paper …) are kept as aliases of the
   semantic layer so the 700 rules that still use them keep working while
   they are migrated. They are aliases, not values: uicheck.js fails the
   build if a raw hex appears anywhere outside this file.
   ========================================================================== */

/* ── PRIMITIVES ─ never referenced by a component ───────────────────────── */
:root{
  --n-950:#100D0A; --n-900:#14110E; --n-850:#1A1712; --n-800:#1F1B16;
  --n-750:#252118; --n-700:#2E2A22; --n-600:#3A352D; --n-500:#4A4439;
  --n-400:#6B6760; --n-300:#8F887D; --n-200:#B5ADA1; --n-150:#DED6C6;
  --n-100:#EFE9DC; --n-050:#F7F4ED; --n-000:#FBF9F4; --white:#FFFFFF;

  --ox-700:#6B2A21; --ox-600:#8E3A2E; --ox-500:#B04A3B; --ox-400:#C8604F; --ox-300:#D87A6A; --ox-200:#F0A89C;

  --gr-700:#1E3226; --gr-600:#2F6B43; --gr-500:#2F5A3A; --gr-400:#7FC79A; --gr-300:#8FD4A2; --gr-150:#BCD9C4; --gr-050:#E9F3EC;
  --am-700:#322A1E; --am-600:#8A6111; --am-500:#5A4A2F; --am-400:#D9A441; --am-300:#D4B98F; --am-250:#8A6A2F; --am-150:#E0CDB0; --am-050:#F6EFE6;
  --bl-700:#26313A; --bl-600:#5B8DB8; --bl-500:#33424E; --bl-400:#7FB0D8; --bl-300:#CFE0EE; --bl-150:#C9D3DD; --bl-050:#EEF1F4;
  --pu-700:#332A3A; --pu-500:#4A3D52; --pu-300:#E6D3EF; --pu-150:#DCCCDF; --pu-050:#F3EEF6;
  --wa-600:#1A9E54; --wa-400:#3AD07F;

  /* type — seven steps, IBM Plex (the CI). Shorthand order is weight size/line family. */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --font-serif:"IBM Plex Serif",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  --t-display:400 28px/1.15 var(--font-serif);
  --t-title:400 21px/1.25 var(--font-serif);
  --t-heading:500 17px/1.35 var(--font-serif);
  --t-body:400 15px/1.55 var(--font-sans);
  --t-small:400 13px/1.5 var(--font-sans);
  --t-meta:400 12px/1.4 var(--font-sans);
  --t-micro:500 10.5px/1.3 var(--font-mono);
  --fs-display:28px; --fs-title:21px; --fs-heading:17px; --fs-body:15px; --fs-small:13px; --fs-meta:12px; --fs-micro:10.5px;
  --track-tight:-0.011em; --track-micro:0.12em;

  /* space — 4px base, nine steps */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* radius — four values */
  --r-1:6px; --r-2:10px; --r-3:14px; --r-full:999px;

  /* motion — four durations, four easings (brief §8.1). Nothing over 320ms. */
  --d-instant:90ms; --d-fast:140ms; --d-base:200ms; --d-slow:280ms;
  --e-out:cubic-bezier(.2,.8,.2,1); --e-in:cubic-bezier(.4,0,1,1);
  --e-inout:cubic-bezier(.4,0,.2,1); --e-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ── SEMANTICS — DARK, the primary theme ───────────────────────────────── */
:root{
  --bg:var(--n-900); --surface:var(--n-850); --surface-2:var(--n-800); --surface-3:var(--n-750);
  --surface-sunk:var(--n-950); --field:var(--n-850); --chrome:var(--n-950);
  --border:var(--n-600); --border-quiet:var(--n-700); --border-strong:var(--n-500);
  --text:var(--n-100); --text-2:var(--n-200); --text-3:var(--n-300);
  --text-on-dark:var(--n-100); --text-on-accent:var(--white); --border-on-dark:var(--n-500);   /* on --chrome; never flips */
  --accent:var(--ox-400); --accent-hover:var(--ox-300); --accent-soft:var(--ox-200);
  --accent-quiet:color-mix(in srgb,var(--ox-400) 16%,transparent);
  --accent-border:color-mix(in srgb,var(--ox-400) 38%,transparent);
  --positive:var(--gr-400); --warning:var(--am-400); --info:var(--bl-400); --whatsapp:var(--wa-400); --negative:var(--ox-400);
  --focus:var(--ox-300); --overlay:rgba(0,0,0,.62);
  --shadow-1:0 1px 2px rgba(0,0,0,.45); --shadow-2:0 4px 16px -4px rgba(0,0,0,.55); --shadow-3:0 18px 48px -12px rgba(0,0,0,.70);
  /* tinted chips: background / border / text, per meaning */
  --tint-blue-bg:var(--bl-700); --tint-blue-bd:var(--bl-500); --tint-blue-fg:var(--bl-300);
  --tint-purple-bg:var(--pu-700); --tint-purple-bd:var(--pu-500); --tint-purple-fg:var(--pu-300);
  --tint-green-bg:var(--gr-700); --tint-green-bd:var(--gr-500); --tint-green-fg:var(--gr-300);
  --tint-amber-bg:var(--am-700); --tint-amber-bd:var(--am-500); --tint-amber-fg:var(--am-300);
  --past:rgba(255,255,255,.03);
  --total-bg:var(--surface); --total-fg:var(--n-100); --major-fg:var(--white);

  /* legacy aliases — the old names, now pointing at the semantic layer */
  --ink:var(--text); --bone:var(--surface-2); --bone-tint:var(--surface-3); --charcoal:var(--n-800);
  --granite:var(--text-2); --stone:var(--text-3); --paper:var(--bg); --line:var(--border); --card:var(--surface);
  --oxblood:var(--accent); --oxblood-dark:var(--ox-500); --wa:var(--whatsapp); --hist:var(--info); --good:var(--positive);
  --pastcol:var(--past); --paper-ink:var(--total-fg);
}

/* ── SEMANTICS — LIGHT, the variant ────────────────────────────────────── */
body.light{
  --bg:var(--n-000); --surface:var(--white); --surface-2:var(--n-050); --surface-3:var(--white);
  --surface-sunk:var(--n-050); --field:var(--white); --chrome:var(--n-950);
  --border:var(--n-150); --border-quiet:#EAE4D7; --border-strong:#C9BFAB;
  --text:#1F1A14; --text-2:var(--n-400); --text-3:var(--n-300);
  --accent:var(--ox-600); --accent-hover:var(--ox-700); --accent-soft:var(--ox-200);
  --accent-quiet:color-mix(in srgb,var(--ox-600) 8%,transparent);
  --accent-border:color-mix(in srgb,var(--ox-600) 26%,transparent);
  --positive:var(--gr-600); --warning:var(--am-600); --info:var(--bl-600); --whatsapp:var(--wa-600); --negative:var(--ox-600);
  --focus:var(--ox-600); --overlay:rgba(31,26,20,.35);
  --shadow-1:0 1px 2px rgba(31,26,20,.06); --shadow-2:0 4px 16px -4px rgba(31,26,20,.12); --shadow-3:0 18px 48px -12px rgba(31,26,20,.20);
  --tint-blue-bg:var(--bl-050); --tint-blue-bd:var(--bl-150); --tint-blue-fg:var(--bl-600);
  --tint-purple-bg:var(--pu-050); --tint-purple-bd:var(--pu-150); --tint-purple-fg:var(--pu-500);
  --tint-green-bg:var(--gr-050); --tint-green-bd:var(--gr-150); --tint-green-fg:var(--gr-600);
  --tint-amber-bg:var(--am-050); --tint-amber-bd:var(--am-150); --tint-amber-fg:var(--am-250);
  --past:rgba(0,0,0,.028);
  --total-bg:var(--n-100); --total-fg:var(--text); --major-fg:var(--text);

  --ink:var(--text); --bone:var(--n-100); --bone-tint:var(--n-150); --charcoal:#2B2722;
  --granite:var(--text-2); --stone:var(--text-3); --paper:var(--bg); --line:var(--border); --card:var(--surface);
  --oxblood:var(--accent); --oxblood-dark:var(--ox-700); --wa:var(--whatsapp); --hist:var(--info); --good:var(--positive);
  --pastcol:var(--past); --paper-ink:var(--total-fg);
}

/* ── src/app.css ── */
/* colours, type, space, radius and motion tokens live in src/ui/tokens.css,
   which the build places before this file. Nothing here names a raw colour. */
*{box-sizing:border-box}
/* the focus ring: on :focus-visible only, so a mouse click never shows it and a
   keyboard never loses it (brief §10, §13) */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
html,body{margin:0;padding:0}
body{font-family:"IBM Plex Sans","Verdana",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:15px;line-height:1.45;min-height:100vh}
h1,h2,h3,.serif{font-family:"IBM Plex Serif","Georgia",serif;font-weight:400}
.mono{font-family:"IBM Plex Mono","Courier New",monospace}
.eyebrow{font-family:"IBM Plex Mono","Courier New",monospace;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--oxblood)}
a{color:var(--oxblood);text-decoration:none}a:hover{text-decoration:underline}
header{background:var(--chrome);color:var(--text-on-dark);padding:14px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
header .brand{font-family:"IBM Plex Serif","Georgia",serif;font-size:21px;color:inherit}
header .brand small{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:2px;color:inherit;opacity:.55;display:block;text-transform:uppercase}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav button{background:transparent;border:1px solid transparent;color:inherit;opacity:.72;padding:8px 14px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:13px}
nav button:hover,nav button.active{opacity:1}
nav button:hover{background:rgba(255,255,255,.08)}
nav button.active{background:var(--accent);color:var(--text-on-accent)}
.capbar{background:var(--surface-sunk);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:12px}
.capgroup{display:flex;align-items:center;gap:8px}
.capgroup .cg-lbl{white-space:nowrap;color:var(--granite);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase}
.meter{width:120px;height:14px;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.meter .fill{height:100%;background:var(--granite);transition:transform var(--d-slow) var(--e-spring),background var(--d-instant)}
.meter.over .fill{background:var(--oxblood)}
.meter.ok .fill{background:var(--positive)}
.capbar input.num{width:48px;padding:3px 6px;border:1px solid var(--line);border-radius:6px;font-family:inherit}
.spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.seg button{border:none;background:transparent;padding:5px 12px;cursor:pointer;font-family:inherit;font-size:12px;color:var(--ink)}
.seg button.active{background:var(--ink);color:var(--bone)}
main{padding:22px 24px;max-width:none;margin:0;width:100%}
.view{display:none}.view.active{display:block}
h2.title{font-size:28px;margin:0 0 4px}
.sub{color:var(--granite);margin:0 0 18px;font-size:13px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:20px}
.panel h3{margin:0 0 12px;font-size:17px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
label.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--granite)}
input,select,textarea{font-family:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink)}
textarea{resize:vertical}
.btn{background:var(--ink);color:var(--bone);border:none;padding:9px 16px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:13px}
.btn:hover{background:var(--charcoal)}
.btn.ox{background:var(--oxblood)}.btn.ox:hover{background:var(--oxblood-dark)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bone)}
.btn.sm{padding:4px 9px;font-size:12px}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:500;background:var(--bone);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 10px;white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.paused td{opacity:.5}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.pill.work{background:var(--tint-blue-bg);border-color:var(--tint-blue-bd);color:var(--tint-blue-fg)}
.pill.personal{background:var(--tint-purple-bg);border-color:var(--tint-purple-bd);color:var(--tint-purple-fg)}
.pill.done{background:var(--tint-green-bg);border-color:var(--tint-green-bd);color:var(--tint-green-fg)}
.pill.dropped{background:var(--tint-amber-bg);border-color:var(--tint-amber-bd);color:var(--tint-amber-fg)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:6px}
.typetag{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--granite)}
.toggle{cursor:pointer;user-select:none;border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;display:inline-block}
.toggle.live{background:var(--tint-green-bg);border-color:var(--tint-green-bd);color:var(--tint-green-fg)}
.toggle.paused{background:var(--tint-amber-bg);border-color:var(--tint-amber-bd);color:var(--tint-amber-fg)}
.warn{color:var(--oxblood);font-size:12px}
.muted{color:var(--stone)}
.iconbtn{background:none;border:none;cursor:pointer;color:var(--granite);font-size:15px;padding:2px 5px;border-radius:6px}
.iconbtn:hover{background:var(--bone);color:var(--oxblood)}
/* ---- wheelhouse launcher ---- */
body.tool-launcher .capbar,body.tool-launcher footer,body.tool-launcher #revealBar{display:none}
body.tool-launcher #nav button{display:none}
body.tool-launcher main{padding:0}
body.tool-cashflow .capbar,body.tool-rundown .capbar{display:none}
#navHome{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
  border:1px solid currentColor;color:inherit;background:none;opacity:.7;border-radius:6px;padding:4px 10px;
  cursor:pointer;margin-right:6px}
#navHome:hover{opacity:1;background:rgba(127,127,127,.16)}
.wh-wrap{min-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center}
.wh-wrap .eyebrow{margin-bottom:14px}
.wh-wrap h1{font-family:"IBM Plex Serif","Georgia",serif;font-weight:400;font-size:clamp(28px,5vw,46px);margin:0 0 10px;color:var(--ink)}
.wh-wrap .wh-sub{color:var(--granite);font-size:15px;margin:0 0 40px}
.wh-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;width:100%;max-width:860px}
.wh-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 22px;text-align:left;cursor:pointer;transition:border-color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out)}
.wh-card:hover{border-color:var(--oxblood);transform:translateY(-2px);box-shadow:0 10px 30px rgba(31,26,20,.10)}
.wh-card h3{font-family:"IBM Plex Serif","Georgia",serif;font-weight:400;font-size:21px;margin:0 0 6px;color:var(--ink)}
.wh-card p{margin:0;font-size:13px;color:var(--granite);line-height:1.5}
.wh-card .wh-mark{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--oxblood);display:block;margin-bottom:12px}
.wh-card.soon{cursor:not-allowed;opacity:.45}
.wh-card.soon:hover{border-color:var(--line);transform:none;box-shadow:none}
.wh-card.soon .wh-mark{color:var(--stone)}
.wh-foot{margin-top:38px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--stone)}
.cf-snapgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:14px}
.cf-big{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.cf-big .cf-k{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--granite);margin-bottom:6px}
.cf-bigv{font-size:21px;font-variant-numeric:tabular-nums}
.cf-bigv.neg{color:var(--oxblood)}
.cf-note{background:var(--bone);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:12px;color:var(--granite);margin-bottom:14px}
tr.cf-acct{cursor:pointer}
tr.cf-acct:hover td{background:var(--bone)}
td.cf-chev{width:18px;color:var(--granite)}
table.cf-mini{width:100%;border-collapse:collapse;font-size:12px}
table.cf-mini td{padding:4px 8px;border-bottom:1px solid var(--line)}
table.cf-mini td.num{text-align:right;font-variant-numeric:tabular-nums}
table.cf-mini td.neg{color:var(--oxblood)}
table.cf-mini td.mono{font-family:"IBM Plex Mono",monospace;color:var(--granite);white-space:nowrap}
#whoami{display:flex;align-items:center;gap:8px;margin-left:auto;padding:4px 6px 4px 10px;white-space:nowrap;border:1px solid currentColor;border-radius:10px;opacity:.9}
/* Nothing here names a colour. The header already stays dark in both themes
   and sets its own text colour to suit; --bone does NOT — it is a pale cream
   in light mode and a near-black in dark, which is how the email came to be
   painted dark-on-dark. Inherit, and use opacity for the hierarchy. */
#whoami{color:inherit}
#whoami .cg-lbl{color:inherit;opacity:.55}
#whoami #userEmail{font-size:12px;color:inherit;opacity:.8;max-width:230px;overflow:hidden;text-overflow:ellipsis}
#whoami .cg-lbl,#whoami #userEmail,#whoami .btn{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:0}   /* one font for the three, as Craig asked */
#whoami .btn{background:none;border-color:currentColor;color:inherit;opacity:.7;padding:2px 9px}
#whoami .btn:hover{opacity:1;background:rgba(127,127,127,.16)}
body.tool-launcher #whoami{display:none}   /* the home screen has its own */
body.tool-launcher #dkToggle{display:none} /* nothing to assist with on the home screen */
@media(max-width:820px){ #whoami #userEmail{display:none} }
.wh-admin{width:100%;max-width:1100px;margin-top:52px;text-align:left;border-top:1px solid var(--line);padding-top:28px}
.wh-signout{margin-top:34px}
th.cf-sort{cursor:pointer;user-select:none}
th.cf-sort:hover{color:var(--oxblood)}
tr.cf-xfer td{opacity:.6;font-style:italic}
td.cf-carried{color:var(--granite)}
.cf-asat{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--stone);letter-spacing:.5px}
input.cf-catin{width:210px;font-size:12px;padding:4px 6px}
.cf-batch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--bone);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:13px}
/* ---- cashflow ---- */
.cf-strip{display:flex;gap:26px;flex-wrap:wrap;background:var(--bone);border:1px solid var(--line);border-radius:10px;padding:10px 16px;margin-bottom:14px;font-size:12px}
.cf-strip .cf-k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--granite);margin-right:8px}
.cf-strip .cf-v{font-size:15px}
.cf-strip .cf-v.bad{color:var(--oxblood)}
.cf-ctl{display:flex;gap:6px;align-items:center;margin-bottom:10px}
/* #156 A two-finger swipe on a horizontally scrollable pane triggers the
   browser's back gesture once it runs out of scroll, which threw Craig back to
   the Wheelhouse home page mid-grid. Containing the overscroll keeps the
   gesture inside the pane. */
html,body{overscroll-behavior-x:none}
.cf-gridwrap,.rd-card--focus .rd-pane:first-child,.dk-body,#chatLog,table.cf-list,.tlwrap{overscroll-behavior-x:contain}
/* The grid scrolls inside itself rather than taking the page with it. That is
   what keeps the week headings — which are sticky to this box — on screen
   while you are down among the rows. */
.cf-gridwrap{overflow:auto;max-height:calc(100vh - 232px);min-height:320px;border:1px solid var(--line);border-radius:10px;background:var(--card);scrollbar-gutter:stable}
/* and the controls stay at the top of the window. z-index below the header, so
   when the header is showing it sits over this rather than the other way up. */
.cf-gridbar{position:sticky;top:0;z-index:45;background:var(--paper);
  padding:6px 0 7px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.cf-gridbar .cf-ctl{margin:0;row-gap:4px}
.cf-gridbar .btn.sm{padding:2px 8px;font-size:12px}
.cf-gridbar .field{font-size:12px}
@media(max-width:900px){ .cf-gridwrap{max-height:none} .cf-gridbar{position:static} }
table.cf-grid tr.cf-spacer td{height:16px;border-bottom:none;background:var(--card)}
.cf-chart{margin:14px 0}
.cf-chart h4{margin:0 0 6px;font-size:12px;font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.5px;color:var(--granite);font-weight:500}
.cf-chart svg{width:100%;height:200px;display:block;background:var(--card);border:1px solid var(--line);border-radius:10px}
.cf-chartbox{position:relative;cursor:crosshair;user-select:none}
/* The figures sit OVER the chart rather than inside it. Inside, they are
   scaled with the drawing — which stretches them horizontally by however much
   the chart has been widened, and makes any spacing calculated in chart units
   wrong by the same factor. */
.cf-pts{position:absolute;inset:0;pointer-events:none;font-size:10.5px;line-height:1;font-family:inherit}
.cf-pts span{position:absolute;white-space:nowrap;padding:0 2px;border-radius:6px;
  background:var(--card);transform:translate(-50%,-150%)}
.cf-pts span.pl{transform:translate(0,-150%)}
.cf-pts span.pr{transform:translate(-100%,-150%)}
.cf-pts span.pb{transform:translate(-50%,50%)}
.cf-pts span.off{display:none}
.cf-readout{position:absolute;top:8px;left:10px;right:10px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:12px;font-family:"IBM Plex Mono",monospace;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:4px 9px;opacity:0;transition:opacity var(--d-instant);pointer-events:none}
.cf-readout i{display:inline-block;width:8px;height:3px;border-radius:6px;margin-right:5px;vertical-align:middle}
.cf-readout strong{font-weight:600}
/* ---- rundown ---- */
.daycard [draggable="true"]{cursor:grab}
.daycard.wkover{outline:2px dashed var(--oxblood);outline-offset:-2px}
/* ---- Deckhand drawer (#109) ---- */
/* It lived in the header, and the header scrolls away — so the way into the
   assistant disappeared exactly when you were deep in a page and most likely
   to want it. Fixed, top right, and it moves aside when the drawer it opens
   is covering that corner. */
/* It has to stay OUTSIDE the header — inside, the header's slide-away
   transform becomes its containing block and carries it off. So it cannot be
   laid out beside the row it should line up with; instead the header's real
   height is measured into --hdrh and the button is centred against that,
   which survives the header reflowing onto two lines. */
body #dkToggle{position:fixed;top:calc(var(--hdrh,64px)/2);transform:translateY(-50%);right:14px;z-index:70;
  /* --bone goes cream -> near-black between themes while oxblood only
     lightens, so this fell from 6.2:1 to 3.4:1. The button is always on
     oxblood, which is a mid-dark red either way, so the label is pinned. */
  background:var(--accent);color:var(--text-on-accent);border:1px solid var(--accent);
  border-radius:10px;padding:6px 14px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.25)}
#dkToggle:hover{filter:brightness(1.1)}
body.dk-open #dkToggle{right:calc(var(--dkw,380px) + 14px)}
header{padding-right:130px}
@media(max-width:760px){ body.dk-open #dkToggle{display:none} }
#dkDrawer{position:fixed;top:0;right:0;bottom:0;width:var(--dkw,380px);background:var(--paper);
  border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(31,26,20,.10);z-index:70;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform var(--d-fast) var(--e-out)}
body.dk-open #dkDrawer{transform:none}
body.dk-open main,body.dk-open .capbar,body.dk-open footer{margin-right:var(--dkw,380px)}
#dkGrip{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize}
#dkGrip:hover{background:var(--oxblood);opacity:.35}
.dk-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);
  font-family:"IBM Plex Serif",Georgia,serif;font-size:17px}
/* #167 The composer belongs at the foot of the drawer, always reachable.
   Only the conversation above it scrolls. */
.dk-body{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;min-height:0}
.dk-body>.panel{display:flex;flex-direction:column;flex:1;min-height:0}
.dk-body #chatLog{flex:1;overflow:auto;min-height:120px}
.dk-body .dk-compose{flex:none;padding-top:8px;border-top:1px solid var(--line);background:var(--paper)}
.dk-body .panel{padding:0;border:none;background:none}
.dk-body .chatlog{max-height:none;min-height:220px}
#dkDrawer.dragging{transition:none;user-select:none}
@media(max-width:760px){#dkDrawer{width:100vw}body.dk-open main,body.dk-open .capbar,body.dk-open footer{margin-right:0}}
.tagmgr{display:flex;flex-wrap:wrap;gap:8px}
.tagchip{border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px;background:var(--card)}
.tagchip a{font-size:12px;margin-left:6px}
.rd-stats{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 6px}
.rd-stats .s{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 13px;min-width:74px}
.rd-stats .s b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.rd-stats .s small{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--granite)}
.rd-cmdbar{display:flex;gap:8px;margin:8px 0}
.rd-cmdbar input{flex:1;min-width:0}
/* the toolbar: every control the same height, so Run, the scope and the
   toggles sit on one line instead of three different ones */
.rd-tools{--ctl:34px}
.rd-tools .field input,.rd-tools .field select,.rd-tools .btn,.rd-tools .seg{height:var(--ctl);box-sizing:border-box}
.rd-tools .btn{padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
.rd-tools .seg{align-items:stretch}
.rd-tools .seg button{padding-top:0;padding-bottom:0}
.rd-morewrap{position:relative}
.rd-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:190px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 36px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column}
.rd-menu[hidden]{display:none}
.rd-menu button{text-align:left;background:transparent;border:none;padding:8px 10px;border-radius:6px;font-family:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.rd-menu button:hover,.rd-menu button.active{background:var(--bone)}
/* a status line that says its piece and goes: the text fades out five
   seconds after it lands, unless it is a spinner still doing something.
   CSS, not a timer, so it never fights the harness's clocks. */
.rd-stline.fade{animation:rd-stfade 0s 5s forwards}
@keyframes rd-stfade{to{visibility:hidden;opacity:0}}
.rd-stats .x{margin-left:auto;align-self:center;font-size:12px;color:var(--stone);cursor:pointer;padding:4px 8px}
.rd-stats .x:hover{color:var(--oxblood)}
.rd-status{min-height:20px;font-size:12px;color:var(--granite);margin-bottom:6px}
.rd-crumbs{font-size:12px;color:var(--granite);margin-bottom:8px}
.rd-crumbs a{cursor:pointer}
.rd-empty{color:var(--granite);text-align:center;padding:34px 10px;font-size:13px}
.rd-empty a{cursor:pointer}
/* lanes — the landing screen after a run. A row per entity you can read
   down: name, how many, how many owe a reply, the first subject. */
.rd-lanes{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.rd-batch{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;font-size:13px;border-bottom:1px solid var(--line);background:var(--bone)}
.rd-batch b{font-size:15px}
.rd-batchsep{color:var(--stone);margin:0 2px}
.rd-lanehead{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;font-size:12px;color:var(--granite);border-bottom:1px solid var(--line);background:var(--paper)}
.rd-lane{display:grid;grid-template-columns:minmax(160px,1.2fr) 70px minmax(120px,.9fr) 2fr;gap:12px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer;border-left:3px solid transparent}
.rd-lane:last-child{border-bottom:none}
.rd-lane:hover{background:var(--paper)}
.rd-lane.sel{border-left-color:var(--oxblood);background:var(--paper)}
.rd-lane.noise{color:var(--granite)}
.rd-lane.follow{border-left-color:var(--oxblood)}
.rd-lanename{font-family:"IBM Plex Serif",Georgia,serif;font-size:15px}
.rd-lanecount{font-variant-numeric:tabular-nums;font-size:15px;text-align:right}
.rd-lanemeta{font-size:12px}
.rd-lanereply{color:var(--oxblood);font-weight:600}
.rd-lanedigest{font-size:12px;color:var(--granite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:860px){.rd-lane{grid-template-columns:1fr 60px 1fr}.rd-lanedigest{display:none}}
/* the shortcut on the button, until he has used the keys enough to know them */
kbd{font-family:"IBM Plex Mono",monospace;font-size:10.5px;border:1px solid var(--line);border-radius:6px;padding:0 4px;margin-left:3px;color:var(--granite);background:var(--paper);vertical-align:1px}
.btn.ox kbd{color:var(--paper);border-color:rgba(255,255,255,.35);background:transparent}
body.rd-kbd-learned kbd,body.rd-kbd-learned .rd-kbdhint{display:none}
.rd-kbdhint{font-size:12px;color:var(--stone)}
/* the palette */
.rd-palette{position:fixed;inset:0;z-index:96;background:rgba(20,17,14,.45);display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.rd-palette[hidden]{display:none}
.rd-palbox{width:min(560px,92vw);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.4);overflow:hidden}
.rd-palbox input{width:100%;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:13px 16px;font-size:15px;background:var(--card);color:var(--ink)}
.rd-pallist{max-height:50vh;overflow:auto}
.rd-palitem{display:flex;justify-content:space-between;align-items:center;padding:9px 16px;font-size:13px;cursor:pointer;color:var(--ink)}
.rd-palitem.sel,.rd-palitem:hover{background:var(--bone)}
.rd-rail{width:5px;background:var(--line);border-radius:6px;position:relative;flex:none}
.rd-rail .thumb{position:absolute;left:0;width:5px;background:var(--oxblood);border-radius:6px;transition:transform var(--d-fast) var(--e-out)}
.rd-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.rd-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.rd-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:860px){.rd-split{grid-template-columns:1fr}}
.rd-pane{min-width:0}
.rd-plabel{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--granite);margin-bottom:6px}
.rd-subj{font-weight:600;margin-bottom:6px;font-size:15px}
.rd-msg{white-space:pre-wrap;font-size:13px;line-height:1.55;max-height:280px;overflow:auto;color:var(--ink);
  background:var(--bone);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.rd-draft{width:100%;min-height:190px;font-family:inherit;font-size:13px;line-height:1.55;resize:vertical}
.rd-arow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.rd-arow .grp{display:flex;gap:5px;align-items:center}
.rd-badge{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:6px;border:1px solid var(--line);color:var(--granite)}
.rd-badge.wa{color:var(--whatsapp);border-color:var(--whatsapp)}
.rd-badge.cal{color:var(--good);border-color:var(--good)}
.rd-brief{background:var(--bone);border:1px solid var(--line);border-left:3px solid var(--oxblood);
  border-radius:10px;padding:10px 13px;margin-bottom:12px}
.rd-brieftext{font-size:15px;line-height:1.5}
/* ---- focus mode: one card, everything else out of the way ---- */
/* View Transitions: the browser tweens between the DOM before and after a
   render. The stage and the card get names so a card leaving and the next
   arriving read as one movement rather than a cut. */
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--d-base);animation-timing-function:var(--e-out)}
#rdStage{view-transition-name:rd-stage}
::view-transition-old(rd-stage){animation:var(--d-fast) var(--e-in) both rd-out}
::view-transition-new(rd-stage){animation:var(--d-base) var(--e-out) both rd-in}
@keyframes rd-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes rd-in{from{opacity:0;transform:translateY(8px)}}
.rd-lane,.rd-entrow,.btn{transition:background var(--d-instant) var(--e-out),border-color var(--d-instant) var(--e-out),transform var(--d-instant) var(--e-out)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* Everything behind the focus card is blurred and dead — except the things
   that belong in FRONT of it. The send-confirmation bar was not on this list,
   so in assistant mode it came up blurred and could not be pressed (Craig,
   24 Sep 2026); toasts, the palette and pop-ups were caught the same way. */
body.rd-focused > *:not(#rdFocus):not(#rdLearn):not(#rdSend):not(#toastWrap):not(#rdPalette):not(#rdFloatPop){filter:blur(7px) saturate(.7);pointer-events:none;user-select:none}
body.rd-focused #rdSend,body.rd-focused #rdLearn{z-index:97}
body.rd-focused #toastWrap{z-index:200}
.rd-floatpop{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:97;max-width:min(720px,92vw);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.rd-floatpop:empty{display:none}
body.rd-focused{overflow:hidden}
.rd-focus{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--overlay)}
/* The focus state of the one card component (RD.card with opts.focus): the
   same markup as the stack, restyled — bigger, one column, the message
   scrolling inside a fixed-height sheet. Anything here that names a colour
   sits on a background it names itself; the head inherits. */
.rd-card.rd-card--focus{background:var(--paper);border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);width:min(900px,100%);max-height:92vh;
  display:flex;flex-direction:column;padding:18px 20px}
.rd-card--focus .rd-head{flex-wrap:nowrap;align-items:center;margin-bottom:10px}
.rd-card--focus .rd-head>.row:first-child{flex:1;min-width:0}
.rd-card--focus .rd-brief{border-radius:10px;padding:12px 14px;margin-bottom:10px}
.rd-card--focus .rd-brieftext{font-size:17px}
.rd-meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--stone);margin-bottom:6px}
.rd-card--focus .rd-subj{font-size:15px;margin-bottom:8px}
/* one column; only the message scrolls, the draft stays pinned beneath it */
.rd-card--focus .rd-split{display:flex;flex-direction:column;gap:0;flex:1;min-height:0;overflow:auto}
.rd-card--focus .rd-draft{min-height:120px}
.rd-card--focus .rd-pane:first-child{flex:1;overflow:auto;min-height:140px}
.rd-card--focus .rd-pane+.rd-pane{flex:none}
.rd-card--focus .rd-plabel{display:none}
.rd-card--focus .rd-msg{max-height:none;font-size:13px;line-height:1.6;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.rd-draftfold{margin-top:10px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rd-draftbar{display:flex;width:100%;gap:10px;align-items:center;justify-content:space-between;
  background:var(--bone);border:none;padding:9px 12px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink);text-align:left}
.rd-draftbar:hover{background:var(--bone-tint)}
.rd-draftbar .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%}
.rd-draftbody{padding:11px 12px;background:var(--card)}
.rd-focus-cmd{display:flex;gap:8px;margin-top:12px}
.rd-focus-cmd input{flex:1;min-width:0;font-size:15px;padding:10px 12px}
.rd-card--focus .rd-arow{margin-top:10px;padding-top:10px}
@media(max-width:760px){.rd-focus{padding:0}.rd-card.rd-card--focus{max-height:100vh;border-radius:0}}
.btn.rec{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent);animation:rdpulse 1.1s var(--e-inout) infinite /* motion-exempt: a repeating indicator, not a transition */}
@keyframes rdpulse{0%,100%{opacity:1}50%{opacity:.62}}
.rd-gchip{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:1px 9px;cursor:pointer;color:var(--granite)}
.rd-gchip:hover{border-color:var(--oxblood);color:var(--oxblood)}
.rd-gchip.none{border-style:dashed;color:var(--stone)}
.rd-lanewa{font-size:12px;color:var(--whatsapp);font-weight:600;margin-left:4px}
.rd-why{font-size:12px;color:var(--stone);font-style:italic}
/* the learn bar names its own colours (ink on cream in both themes) so a
   theme flip cannot make it unreadable — the header lesson, see darkcheck */
.rd-learnbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;background:var(--chrome);color:var(--text-on-dark);
  padding:10px 14px;border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.35);display:flex;gap:10px;align-items:center;max-width:92vw;font-size:13px}
.rd-learnbar[hidden]{display:none}
#rdSend{bottom:70px}   /* above the learn bar if both are up */
.rd-burn{font-size:13px;color:var(--granite);margin:0 0 8px;min-height:0}
.rd-burn b{color:var(--ink);font-variant-numeric:tabular-nums}
.rd-burn.over b{color:var(--oxblood)}
.rd-burnover{color:var(--oxblood);font-weight:600}
.rd-burn.done{color:var(--positive)}
.rd-learnbar b{color:var(--text-on-accent)}
.rd-learnbar .btn.ghost{color:var(--text-on-dark);border-color:var(--border-on-dark);background:transparent}
.rd-ent{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.rd-entrow{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid var(--line)}
.rd-entrow.off .rd-entname{color:var(--stone);text-decoration:line-through}
.rd-entname{font-weight:600;font-size:13px}
.rd-entform{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:4px 0 8px}
.rd-entform .field{margin-top:6px}
.rd-entform input,.rd-entform textarea,.rd-entform select{width:100%}
.rd-rule{font-size:12px;padding:2px 0}
.rd-rule a{cursor:pointer;color:var(--oxblood);margin-left:6px}
/* ---- WhatsApp media in the transcript (#132) ---- */
.rd-line{margin:3px 0}
.rd-media{max-width:280px;max-height:300px;border-radius:10px;display:block;margin:4px 0;
  border:1px solid var(--line);cursor:pointer}
.rd-media-a{display:block;margin:4px 0;max-width:280px;height:32px}
.rd-quote{border-left:2px solid var(--line);padding-left:7px;margin:2px 0;font-size:12px;color:var(--stone)}
/* ---- the assistant's side of the conversation (#139) ---- */
.rd-state{display:flex;align-items:center;gap:9px;font-size:13px;min-height:22px;
  margin:0 0 10px;color:var(--granite)}
.rd-state.listening{color:var(--oxblood);font-weight:600}
.rd-state.speaking{color:var(--oxblood)}
.rd-dot{width:9px;height:9px;border-radius:50%;background:var(--oxblood);flex:none;
  animation:rdpulse 1.1s var(--e-inout) infinite /* motion-exempt: a repeating indicator, not a transition */}
.rd-eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;flex:none}
.rd-eq i{width:3px;background:var(--oxblood);animation:rdeq .9s var(--e-inout) infinite /* motion-exempt: a repeating indicator, not a transition */}
.rd-eq i:nth-child(2){animation-delay:.15s}
.rd-eq i:nth-child(3){animation-delay:.3s}
@keyframes rdeq{0%,100%{height:3px}50%{height:12px}}
.rd-vu{flex:1;height:4px;background:var(--line);border-radius:6px;overflow:hidden;max-width:150px}
.rd-vu i{display:block;height:100%;width:0;background:var(--oxblood);transition:opacity var(--d-instant)}
.rd-hint{font-size:12px;color:var(--stone)}
.rd-preview{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 13px;margin-top:8px;opacity:.72}
.rd-preview.p2{opacity:.45;padding:7px 13px}
.rd-atts{margin-top:8px;font-size:12px}
.rd-att{color:var(--granite)}
.rd-pop{background:var(--card);border:1px solid var(--oxblood);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:8px}
.rd-pop a{cursor:pointer}
.rd-spin{display:inline-block;width:10px;height:10px;border:2px solid var(--line);border-top-color:var(--oxblood);border-radius:50%;animation:rdspin .7s linear infinite /* motion-exempt: a repeating indicator, not a transition */;vertical-align:-1px}
@keyframes rdspin{to{transform:rotate(360deg)}}
.cf-xaxis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--stone);font-family:"IBM Plex Mono",monospace;margin-top:4px}
.cf-legend{display:flex;gap:14px;font-size:12px;color:var(--granite);margin-top:6px}
.cf-legend i{display:inline-block;width:10px;height:3px;border-radius:6px;margin-right:5px;vertical-align:middle}
/* #100 the header lifts out of the way on the way down, comes back on the way up */
body:not(.sidemenu) header{position:sticky;top:0;z-index:50;transition:transform var(--d-base) var(--e-inout)}
body:not(.sidemenu).hdr-away header{transform:translateY(-100%)}
table.cf-grid td.cf-carried{color:var(--granite)}
/* #164 This read "tdtd.cf-sel" — a typo for an element that does not exist, so
   the rule matched nothing and a selection was made but never drawn. The whole
   feature looked dead because the only thing missing was the outline. */
table.cf-grid td.cf-sel{outline:2px solid var(--oxblood);outline-offset:-2px;background:var(--pastcol)}
/* The grid is 52 columns wide and taller than the screen, so a total printed
   underneath it was off-screen at the moment it was made. It sticks. */
.cf-selbar{display:flex;gap:10px;align-items:center;padding:8px 12px;margin-top:8px;
  position:sticky;bottom:10px;z-index:40;box-shadow:0 4px 14px rgba(0,0,0,.18);
  border:1px solid var(--oxblood);border-radius:10px;background:var(--card);font-size:13px}
.cf-selbar .neg{color:var(--oxblood)}
/* #170 the lines a history chart is drawn from, each one removable */
.cf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.cf-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 8px;
  border:1px solid var(--oxblood);border-radius:999px;background:var(--card);color:var(--ink)}
.cf-chip a{cursor:pointer;opacity:.5;font-size:13px;line-height:1;text-decoration:none}
.cf-chip a:hover{opacity:1;color:var(--oxblood)}
.cf-chipclr{cursor:pointer;font-size:12px;color:var(--granite);text-decoration:underline;margin-left:8px}
/* #174 tiles the user builds. Two across on a wide screen, one on a narrow. */
.cf-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.cf-kitem i.cf-kdash{background:none;background-image:repeating-linear-gradient(90deg,var(--hist) 0 4px,transparent 4px 7px)}
.cf-legend span i.cf-kdash{background:none;background-image:repeating-linear-gradient(90deg,var(--hist) 0 4px,transparent 4px 7px)}
.cf-tile{border:1px solid var(--line);border-radius:10px;padding:10px 12px 12px;background:var(--card);min-width:0}
/* a total reads differently from a single line, so it looks different */
.cf-dismiss{float:right;color:var(--granite);cursor:pointer;font-size:17px;line-height:1;padding:0 2px}
.cf-dismiss:hover{color:var(--oxblood)}
.cf-chip.cf-tot{border-style:dashed;font-weight:600}
.cf-chip input.cf-sw{width:15px;height:15px;padding:0;border:none;background:none;
  vertical-align:-2px;margin-right:5px;cursor:pointer}
.cf-chip input.cf-sw::-webkit-color-swatch-wrapper{padding:0}
.cf-chip input.cf-sw::-webkit-color-swatch{border:1px solid var(--line);border-radius:6px}
.cf-tilegrip{cursor:grab;color:var(--granite);letter-spacing:-3px;padding-right:4px;user-select:none}
.cf-tilegrip:active{cursor:grabbing}
.cf-tile.cf-dragover{outline:2px dashed var(--oxblood);outline-offset:2px}
.cf-fixedwin{font-size:12px;color:var(--granite);border:1px solid var(--line);border-radius:10px;
  padding:1px 7px;margin-left:6px;white-space:nowrap}
.cf-tileedit input.cf-dt{font:inherit;font-size:12px;padding:2px 5px;border:1px solid var(--line);
  border-radius:6px;background:var(--field);color:var(--ink)}
.cf-tilehd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cf-tilehd h4{margin:0;flex:1;font-family:"IBM Plex Serif",Georgia,serif;font-size:13px}
.cf-tilehd a{cursor:pointer;font-size:12px;color:var(--granite);text-decoration:none;opacity:.75}
.cf-tilehd a:hover{opacity:1;color:var(--oxblood)}
.cf-tilehd a.off{opacity:.2;pointer-events:none}
.cf-tilehd a.cf-tilex{font-size:15px;line-height:1}
.cf-tileedit{border:1px dashed var(--line);border-radius:10px;padding:6px 8px;margin-bottom:8px}
.cf-big{font-family:"IBM Plex Mono",monospace;font-size:28px;line-height:1.15;margin-top:4px}
.cf-big.neg{color:var(--oxblood)}
.cf-bigsub{font-size:12px;color:var(--granite)}
.cf-pie{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.cf-pie svg{width:150px;height:150px;flex:0 0 auto}
.cf-pieleg{display:flex;flex-direction:column;gap:3px;font-size:12px;min-width:0}
.cf-pieleg i{display:inline-block;width:9px;height:9px;border-radius:6px;margin-right:6px}
.cf-bcell{cursor:pointer}
/* the account name and the headings stay put while the weeks scroll under them */
.cf-bankwrap{max-height:none;margin-bottom:4px}
table.cf-bank{min-width:100%}
table.cf-bank thead th{position:sticky;top:0;z-index:3;background:var(--card)}
table.cf-bank th:first-child,table.cf-bank td:first-child{position:sticky;left:0;z-index:2;
  background:var(--card);box-shadow:1px 0 0 var(--line)}
table.cf-bank thead th:first-child{z-index:4}
table.cf-bank thead th.now{border-left:2px solid var(--ink)}
table.cf-bank td,table.cf-bank th{white-space:nowrap}
/* worked back, not reported: grey, so it never reads as something the bank said */
.cf-derived,td.cf-derived{color:var(--granite)}
.cf-derived .cf-asat{font-style:italic}
.cf-bcell:hover{outline:1px solid var(--oxblood);outline-offset:-1px}
#savedFlash{position:fixed;right:16px;bottom:16px;z-index:120;background:var(--ink);color:var(--bone);
  font-size:12px;letter-spacing:.5px;padding:5px 12px;border-radius:999px;opacity:0;
  transform:translateY(6px);transition:opacity var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out);pointer-events:none;
  font-family:"IBM Plex Mono",monospace}
#savedFlash.show{opacity:.92;transform:translateY(0)}
.cf-refile{font-size:12px;max-width:190px;padding:2px 4px}
.cf-tcell{cursor:pointer}
.cf-tcell:hover{outline:1px solid var(--oxblood);outline-offset:-1px}
.cf-acell{cursor:pointer}
.cf-acell:hover{outline:1px solid var(--oxblood);outline-offset:-1px}
.cf-recon td{font-size:12px;color:var(--granite);border-top:1px dashed var(--line)}
.cf-open{opacity:.35;cursor:pointer;font-size:12px;margin-left:3px;text-decoration:none}
.cf-open:hover{opacity:1;color:var(--oxblood)}
.cf-cell{cursor:pointer}
table.cf-grid td.cf-cell:hover{outline:1px solid var(--oxblood);outline-offset:-1px}
table.cf-grid td.cf-drag{cursor:grab}
table.cf-grid td.cf-drop{outline:2px dashed var(--oxblood);outline-offset:-2px}
table.cf-grid td input.cf-cellin{width:100%;box-sizing:border-box;text-align:right;font-family:inherit;font-size:12px;border:1px solid var(--oxblood);border-radius:6px;padding:1px 4px;background:var(--field);color:var(--ink)}
/* #176 A week holding more than one obligation opens in place rather than
   sending you to the Payment queue. Floated over the grid, so 52 narrow
   columns keep their widths and nothing on screen shifts while you type. */
/* min-width and no max, with a first cell asking for 100% — inside a 52-week
   grid there is a lot of slack to fill, and it filled it. */
.cf-pop{position:absolute;z-index:60;min-width:290px;max-width:420px;width:max-content;background:var(--bone);border:1px solid var(--oxblood);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.22);padding:8px 10px;white-space:normal;text-align:left;font-size:12px}
.cf-pop h5{margin:0 0 6px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--granite)}
.cf-pop table{border-collapse:collapse;width:100%}
.cf-pop td{border:0;padding:2px 0;text-align:left;white-space:nowrap}
.cf-pop td.cf-pi{width:auto;min-width:150px;padding-right:8px;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.cf-pop .cf-pnamed{cursor:text;border-bottom:1px dotted transparent}
.cf-pop .cf-pnamed:hover{border-bottom-color:var(--granite)}
.cf-pop .cf-pnamed.derived{color:var(--granite)}
.cf-pop input.cf-pname{width:100%;box-sizing:border-box;border:1px solid var(--oxblood);border-radius:6px;
  background:var(--field);color:var(--ink);font:inherit;padding:1px 3px;margin:-1px -3px}
.cf-pop input.cf-pname::placeholder{color:var(--granite);opacity:1}
.cf-pop input.cf-pname:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cf-pop td.cf-pi .cf-m{font-size:10.5px;color:var(--granite)}
.cf-pop input.cf-popin{width:96px;box-sizing:border-box;text-align:right;font-family:inherit;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:2px 5px;background:var(--field);color:var(--ink)}
.cf-pop input.cf-popin:focus{border-color:var(--oxblood)}
.cf-pop .cf-px{cursor:pointer;opacity:.4;padding-left:7px;font-size:13px;text-decoration:none}
.cf-pop .cf-px:hover{opacity:1;color:var(--oxblood)}
.cf-pop .cf-ptot{border-top:1px solid var(--line);font-weight:600}
.cf-pop .cf-ptot td{padding-top:5px}
.cf-pop .cf-pfoot{margin-top:8px;display:flex;gap:8px;align-items:center}
.cf-pop .cf-padd{cursor:pointer;font-size:12px;color:var(--oxblood);text-decoration:none}
.cf-pop .cf-phint{font-size:10.5px;color:var(--granite);margin-left:auto}
table.cf-grid{border-collapse:separate;border-spacing:0;font-size:12px;white-space:nowrap}
table.cf-grid th{position:sticky;top:0;z-index:3;background:var(--bone);border-bottom:1px solid var(--ink);padding:6px 10px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.5px}
.cf-ok{font-size:10.5px;color:var(--good);line-height:1}
.cf-timing{color:var(--granite);font-size:12px}
.cf-kitem{cursor:pointer;user-select:none}
.cf-kitem:hover{text-decoration:underline}
.cf-kitem.off{opacity:.5;text-decoration:line-through}
.cf-kctl{display:inline-flex;gap:10px;margin-left:6px}
.cf-kctl a{cursor:pointer;font-size:12px;color:var(--granite);text-decoration:underline}
.cf-kctl a:hover{color:var(--oxblood)}
.cf-recon-chip{cursor:pointer}
.cf-recon-chip:hover .cf-k{color:var(--oxblood)}
table.cf-list th.cf-now,table.cf-list td.cf-now{border-left:2px solid var(--border-strong);font-weight:600}
.cf-list td.cf-carried{opacity:.45}
table.cf-grid th.past{color:var(--stone)}
table.cf-grid th.now{background:var(--accent);color:var(--text-on-accent)}
table.cf-grid td{padding:3px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
/* scratchpad, 12 Sep: expenses are not red in the grid — a negative in the
   same formatting as revenue; the major totals keep their colour */
table.cf-grid td.neg{color:inherit}
table.cf-grid tr.cf-major td.neg,table.cf-grid tr.cf-tot td.neg{color:var(--oxblood)}
/* Expected rows carry the plan, Actual rows carry the bank: a touch lighter
   for Actual so the eye tells them apart without a colour */
table.cf-grid tr.act td{color:var(--granite);font-weight:400}
table.cf-grid tr.act td.cf-ea{font-style:italic}
table.cf-grid tr.cf-sec td{font-family:"IBM Plex Serif",Georgia,serif;font-size:13px;font-weight:600;background:var(--bone);padding-top:9px}
table.cf-grid td.bad{font-weight:600}
table.cf-grid td .z{color:var(--stone)}
table.cf-grid .cf-name{position:sticky;left:0;z-index:2;background:var(--card);text-align:left;min-width:230px;max-width:230px;overflow:hidden;text-overflow:ellipsis}
table.cf-grid .cf-ea{position:sticky;left:230px;z-index:2;background:var(--card);text-align:left;width:64px;color:var(--granite);font-size:10.5px;font-family:"IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.5px}
table.cf-grid th.cf-name{z-index:4;background:var(--bone)}
table.cf-grid th.cf-ea{z-index:4;left:230px;background:var(--bone)}
table.cf-grid tr.act td{color:var(--granite)}
table.cf-grid tr.cf-sec td{background:var(--bone-tint);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;text-align:left;padding:6px 10px}
/* the section name holds its place while the weeks scroll under it, the same
   way the category names do */
table.cf-grid tr.cf-sec td{padding-left:0;padding-right:0}
table.cf-grid .cf-seclbl{position:sticky;left:0;display:inline-block;padding:0 10px}
/* #155 A total row is marked by weight and a rule, not by a slab of light:
   --total-bg/--total-fg are the surface and the text in both themes. */
table.cf-grid tr.cf-tot td,table.cf-grid tr.cf-tot .cf-name,table.cf-grid tr.cf-tot .cf-ea{background:var(--total-bg);color:var(--total-fg);font-weight:500}
table.cf-grid tr.cf-major td,table.cf-grid tr.cf-major .cf-name,table.cf-grid tr.cf-major .cf-ea{background:var(--total-bg);color:var(--major-fg);font-weight:500;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
table.cf-grid tr.cf-major td.neg{color:var(--accent-soft)}
/* Expected and Actual totals used to be set identically (18 Sep 2026): the
   rule above outranks the plain tr.act rule, so the pair read as one bold
   block. Expected is the plan, set heavier; Actual is the bank's answer,
   set lighter and in italic like its label, so the eye can tell them apart. */
table.cf-grid tr.cf-tot:not(.act) td,table.cf-grid tr.cf-major:not(.act) td{font-weight:600}
table.cf-grid tr.cf-tot.act td,table.cf-grid tr.cf-major.act td{font-weight:400;font-style:italic;color:var(--granite)}
table.cf-grid tr.cf-tot.act td.neg,table.cf-grid tr.cf-major.act td.neg{color:var(--accent-soft)}
table.cf-list tr.cf-tot td{background:var(--total-bg);color:var(--total-fg)}
table.cf-grid tr.cf-truth td{background:var(--bone-tint);font-weight:600}
table.cf-grid tr.cf-truth .cf-name,table.cf-grid tr.cf-truth .cf-ea{background:var(--bone-tint)}
.cf-m{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--stone)}
table.cf-list{width:100%;border-collapse:collapse;font-size:13px}
table.cf-list th{text-align:left;background:var(--bone);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:7px 10px;font-weight:500}
table.cf-list td{padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.cf-list td.num,table.cf-list th.num{text-align:right;font-variant-numeric:tabular-nums}
table.cf-list td.bad{color:var(--oxblood)}
table.cf-list tr.cf-unfunded td{background:rgba(142,58,46,.07)}
table.cf-list td.cf-act{white-space:nowrap;text-align:right}
/* ---- timeline full-bleed ---- */
#view-timeline{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:0 22px}
.tl-controls{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tl-scales button,.tl-types label{font-size:12px}
.tl-scales{display:flex;gap:4px;flex-wrap:wrap}
.tl-scales button{border:1px solid var(--line);background:var(--card);color:var(--text-2);border-radius:14px;padding:4px 10px;cursor:pointer;font-family:inherit}
.tl-scales button.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.tl-scales button:hover{background:var(--bone);color:var(--text)}
.tl-types{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tl-types label{display:flex;gap:4px;align-items:center;color:var(--granite)}
.tl-range{color:var(--granite);font-family:"IBM Plex Mono",monospace;font-size:12px}
.tl-body{position:relative;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px 12px;user-select:none;overflow:hidden}
.tl-ruler{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--line);margin-bottom:4px;height:20px}
.tl-axis{position:relative}
.tl-axis .tick{position:absolute;top:0;font-size:10.5px;color:var(--granite);transform:translateX(2px);white-space:nowrap}
.tl-row{display:grid;grid-template-columns:220px 1fr;align-items:center;height:24px}
.tl-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:8px;font-size:12px}
/* the bar carries an inline colour and an inline opacity, so the done state
   has to outrank them — the same !important the other views already use */
.tl-row.eff-done .tl-label,.tl-row.eff-verified .tl-label,.tl-row.eff-done .tl-label *,.tl-row.eff-verified .tl-label *{color:var(--stone)}
.tl-row.eff-verified .tl-label{text-decoration:line-through}
/* the faint bar carries its opacity as a class, not inline, so a done row's
   rule can outrank it without !important */
.tl-bar.faint{opacity:.5}
.tl-row.eff-done .tl-bar,.tl-row.eff-done .tl-bar.faint,.tl-row.eff-done .tl-mark{opacity:.3}
.tl-row.eff-verified .tl-bar,.tl-row.eff-verified .tl-bar.faint,.tl-row.eff-verified .tl-mark{opacity:.22}
.tl-plot{position:relative;height:24px}
.tl-plot .gl{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,.05)}
.tl-bar{position:absolute;top:4px;height:16px;border-radius:6px;opacity:.94;cursor:pointer;overflow:hidden}
.tl-bar .m{position:absolute;right:4px;top:0;font-size:10.5px;color:rgba(255,255,255,.92);line-height:16px}
.tl-bar .ms{position:absolute;left:4px;top:0;font-size:10.5px;color:rgba(255,255,255,.92);line-height:16px}
/* a pale bar (yellow, cream) gets dark text — decided per bar from its colour, see timeline.js */
.tl-bar.pale .m,.tl-bar.pale .ms{color:rgba(20,17,14,.85)}
.tl-bar.tl-ong{opacity:.65;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0,rgba(255,255,255,.18) 4px,transparent 4px,transparent 8px)}
.tl-occ{position:absolute;top:9px;width:5px;height:5px;border-radius:50%;background:var(--ink);transform:translateX(-2px);opacity:.55;z-index:2}
.tl-today{position:absolute;top:20px;bottom:0;width:2px;background:var(--oxblood);opacity:.7;z-index:3}
.tl-sel{position:absolute;top:20px;bottom:8px;background:rgba(142,58,46,.14);border-left:1px solid var(--oxblood);border-right:1px solid var(--oxblood);pointer-events:none;z-index:4;display:none}
.tl-hint{font-size:12px;color:var(--granite);margin-top:6px}
/* ---- session planner ---- */
.overlay{position:fixed;inset:0;background:rgba(31,26,20,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto;z-index:50}
.overlay.show{display:flex}
.modal{background:var(--paper);border-radius:14px;max-width:660px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
/* side mode: the panel explains something on the page behind it, so it stands
   out of the way and the page is left readable rather than dimmed out */
.overlay.side{background:none;justify-content:flex-end;padding:14px;pointer-events:none}
.overlay.side .modal{pointer-events:auto;max-width:430px;max-height:calc(100vh - 28px);overflow:auto;
  border:1px solid var(--oxblood);box-shadow:0 12px 44px rgba(0,0,0,.34)}
table.cf-grid td.cf-hl{outline:2px solid var(--oxblood);outline-offset:-2px;background:var(--wash,rgba(142,58,46,.10))}
.cf-list tr.cf-flat td{color:var(--granite)}
.modal h3{margin:0 0 2px;font-size:21px}
.modal .close{float:right;font-size:21px;cursor:pointer;color:var(--granite);border:none;background:none}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:13px;margin:12px 0}
.kv .k{color:var(--granite)}
.sessiongrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.daychip{position:relative;border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:12px;cursor:pointer;font-family:"IBM Plex Mono",monospace}
.daychip.on{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}
.daychip.booked{background:var(--bone-tint);border-color:var(--stone)}
.daychip .badge{position:absolute;top:-6px;right:-6px;background:var(--charcoal);color:var(--text-on-dark);border-radius:10px;font-size:10.5px;padding:0 4px}
.daydetail{margin-top:10px;padding:10px;border:1px dashed var(--line);border-radius:10px;font-size:12px;background:var(--card)}
.daydetail ul{margin:6px 0;padding-left:16px}
.tabbar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabbar button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 14px;cursor:pointer;font-family:inherit;font-size:12px}
.tabbar button.active{background:var(--ink);color:var(--bone);border-color:var(--ink)}
/* ---- week view ---- */
.weekgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.daycard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:120px}
.daycard.dbl{border-color:var(--oxblood);box-shadow:0 0 0 1px var(--oxblood) inset}
.daycard h4{margin:0 0 2px;font-size:15px;font-family:"IBM Plex Serif",serif}
.daycard .dnum{font-family:"IBM Plex Mono",monospace;color:var(--granite);font-size:12px}
.daycard .sec{margin-top:8px;font-size:12px}
.daycard .sec .lbl{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--granite)}
.daycard .item{display:flex;gap:6px;align-items:center;margin:2px 0}
.wkdiv{height:1px;background:var(--line);margin:8px 0}
.dayopen{font-size:10.5px;color:var(--oxblood);margin-left:6px}
.dupflag{font-size:10.5px;color:var(--oxblood);border:1px solid var(--oxblood);border-radius:6px;padding:0 4px;margin-left:4px}
.eff-done,.eff-done *{color:var(--stone);opacity:.9}
.eff-verified,.eff-verified *{color:var(--stone);opacity:.85;text-decoration:line-through}
.chatlog{border:1px solid var(--line);border-radius:10px;background:var(--card);min-height:240px;max-height:52vh;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.cbub{max-width:82%;padding:8px 12px;border-radius:14px;font-size:15px;line-height:1.45;word-wrap:break-word}
.cbub.me{align-self:flex-end;background:var(--accent);color:var(--text-on-accent);border-bottom-right-radius:3px}
.cbub.ai{align-self:flex-start;background:var(--bone-tint);color:var(--ink);border-bottom-left-radius:3px}
.cact{align-self:flex-start;font-size:12px;color:var(--granite);font-style:italic;padding-left:2px}
.cact.warn{color:var(--oxblood)}
.cthink{align-self:flex-start;background:var(--bone-tint);color:var(--granite);border-radius:14px;border-bottom-left-radius:3px;padding:8px 12px;font-size:13px;font-style:italic;display:flex;gap:7px;align-items:center}
.cthink .cdots{display:inline-flex;gap:3px}
.cthink .cdots i{width:5px;height:5px;border-radius:50%;background:var(--granite);display:inline-block;animation:cblink 1s infinite /* motion-exempt: the typing cursor */}
.cthink .cdots i:nth-child(2){animation-delay:.2s}.cthink .cdots i:nth-child(3){animation-delay:.4s}
@keyframes cblink{0%,80%,100%{opacity:.2}40%{opacity:1}}
.cconfirm{align-self:flex-start;background:var(--card);border:1px solid var(--oxblood);border-radius:14px;border-bottom-left-radius:3px;padding:10px 12px;font-size:15px;max-width:82%;color:var(--ink)}
.tl-mark{position:absolute;top:5px;height:14px;width:8px;border-radius:6px;transform:translateX(-4px);cursor:pointer;z-index:2}
details.collapse{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:var(--card)}
details.collapse>summary{cursor:pointer;padding:10px 0;font-family:"IBM Plex Serif",Georgia,serif;font-size:15px;list-style:none;user-select:none}
details.collapse>summary::-webkit-details-marker{display:none}
details.collapse>summary::before{content:'\25B8';margin-right:8px;color:var(--oxblood);display:inline-block;transition:transform var(--d-fast) var(--e-out)}
details.collapse[open]>summary::before{transform:rotate(90deg)}
details.collapse[open]{padding-bottom:12px}
.menudrop{position:relative;display:inline-block}
.menupanel{position:absolute;right:0;top:112%;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(0,0,0,.20);padding:6px;min-width:200px;z-index:80;display:none;flex-direction:column}
.menudrop.open .menupanel{display:flex}
.menuitem{display:flex;align-items:center;gap:8px;background:none;border:none;text-align:left;padding:8px 10px;border-radius:6px;cursor:pointer;font-family:inherit;font-size:13px;color:var(--ink)}
.menuitem:hover{background:var(--bone)}
.menusep{height:1px;background:var(--line);margin:4px 6px}
.flag{display:inline-block;background:var(--accent);color:var(--text-on-accent);font-size:10.5px;border-radius:6px;padding:1px 6px;margin-left:6px}
.metrics{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:16px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 16px;text-align:center;min-width:120px}
.metric .n{font-size:28px;font-family:"IBM Plex Serif",serif}
.metric .l{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--granite);font-family:"IBM Plex Mono",monospace}
footer{max-width:none;margin:10px 0 30px;padding:0 24px;color:var(--granite);font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:1px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hint{font-size:12px;color:var(--granite);margin-top:4px}
.wkacts{margin-left:auto;font-size:10.5px;white-space:nowrap;opacity:.55;transition:opacity var(--d-fast) var(--e-out)}
.daycard .item:hover .wkacts{opacity:1}
.wkacts a{color:var(--granite);margin-left:7px}
.wkacts a:hover{color:var(--oxblood)}
/* ---- welcome guide ---- */
#popStack{position:fixed;inset:0;background:rgba(31,26,20,.55);display:none;flex-direction:column;align-items:center;gap:16px;padding:36px 16px;overflow:auto;z-index:120}
#popStack.show{display:flex}
#welcomeTpl{display:none}
#welcomeOverlay.show{display:flex}
.welcome{background:var(--paper);border-radius:14px;max-width:720px;width:100%;padding:30px 34px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.welcome h2{font-family:"IBM Plex Serif",Georgia,serif;font-size:28px;margin:6px 0 4px}
.welcome h3{font-family:"IBM Plex Serif",Georgia,serif;font-size:17px;margin:20px 0 6px}
.welcome p{margin:8px 0;font-size:13px;line-height:1.55}
.welcome ul{margin:6px 0;padding-left:18px;font-size:13px;line-height:1.55}
.welcome li{margin:5px 0}
.wprin{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:10px 0}
.wprin div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.wprin b{display:block;font-family:"IBM Plex Serif",serif;font-size:15px;margin-bottom:3px}
.wprin span{font-size:12px;color:var(--granite)}
/* ---- admin ---- */
.adminwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}

/* ---- amendments: hover polish ---- */
.btn,.tabbar button,.tl-scales button,.seg button,.daychip,.iconbtn{transition:transform var(--d-instant) var(--e-out),box-shadow var(--d-instant) var(--e-out),background var(--d-instant) var(--e-out),color var(--d-instant) var(--e-out)}
.btn:hover,.tabbar button:hover,.tl-scales button:hover{transform:translateY(-1px);box-shadow:0 3px 12px rgba(31,26,20,.18)}
.btn:active,.tabbar button:active,.tl-scales button:active{transform:translateY(0);box-shadow:none}
.daychip:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(31,26,20,.15)}
.iconbtn:hover{transform:translateY(-1px)}
.panel,.daycard,.metric{transition:box-shadow var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-out)}
.daycard:hover,.metric:hover{box-shadow:0 8px 22px rgba(31,26,20,.10);transform:translateY(-1px)}
.tl-bar{transition:filter var(--d-instant) var(--e-out)}.tl-bar:hover{filter:brightness(1.08)}
nav button{transition:background var(--d-instant) var(--e-out),opacity var(--d-instant) var(--e-out)}
/* ---- amendments: toasts ---- */
#toastWrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--bone);padding:11px 18px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.30);opacity:0;transform:translateY(10px);transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out);max-width:min(92vw,460px);line-height:1.4}
.toast.show{opacity:1;transform:translateY(0)}
.toast.warn{background:var(--oxblood)}
/* ---- amendments: side menu ---- */
body.sidemenu header{position:fixed;top:0;left:0;bottom:0;width:186px;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 14px;z-index:60;overflow-y:auto}
body.sidemenu header nav{flex-direction:column;margin-left:0;width:100%;gap:4px}
body.sidemenu header nav button{width:100%;text-align:left}
body.sidemenu .capbar{margin-left:186px}
body.sidemenu main{margin-left:186px}
body.sidemenu footer{margin-left:186px}
body.sidemenu #view-timeline{position:static;left:auto;right:auto;margin:0;width:auto;padding:0}

/* ---- amendments 2: capbar rows + CI selects ---- */
.capbar{flex-direction:column;align-items:stretch;gap:0}
.caprow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.caprow+.caprow{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--card);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%238E3A2E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding:7px 30px 7px 10px;cursor:pointer;min-height:34px;line-height:1.2;transition:border-color var(--d-instant) var(--e-out),box-shadow var(--d-instant) var(--e-out)}
select:disabled{opacity:.5;cursor:not-allowed;background-color:var(--bone)}
select:hover{border-color:var(--stone)}
select:focus{border-color:var(--oxblood);box-shadow:0 0 0 2px rgba(142,58,46,.15)}

/* ---- amendments 3: hide menus + reveal strip ---- */
#revealBar{display:none;position:fixed;top:0;left:0;right:0;height:6px;background:var(--oxblood);cursor:pointer;z-index:70}
#revealBar:hover{height:9px}
body.menuhidden header{display:none}
body.menuhidden #revealBar{display:block}
body.menuhidden.sidemenu .capbar,body.menuhidden.sidemenu main,body.menuhidden.sidemenu footer{margin-left:0}
body.menuhidden.sidemenu #view-timeline{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding:0 22px}

/* ── src/ui/components.css ── */
/* ==========================================================================
   COMPONENTS — the vocabulary every tool uses (UI brief §5–§7, §10–§12).
   Loads after app.css on purpose: this sheet is the system, app.css is the
   history it is replacing one tool at a time. Airy on reading surfaces,
   compact on the lists he scans; the Cashflow grid is exempt throughout
   (§3 — airy in a spreadsheet means scrolling, and scrolling in a forecast
   means he cannot see the shape of the year).
   ========================================================================== */

/* ── base ─────────────────────────────────────────────────────────────── */
body{font:var(--t-body);color:var(--text);background:var(--bg)}
h1,h2,h3,.serif{font-family:var(--font-serif);font-weight:400}
h2.title{font:var(--t-display);letter-spacing:var(--track-tight);margin:0 0 var(--s-2)}
h3{font:var(--t-heading);margin:0 0 var(--s-4)}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-2)}
/* one content column, centred; the grid and the dashboard are full-bleed (§12) */
main{padding:var(--s-6) var(--s-6) var(--s-8);max-width:1280px;margin:0 auto;width:100%}
body.tool-cashflow main{max-width:none}
@media(max-width:900px){main{padding:var(--s-4)}}
/* prose never runs the width of the window */
.rd-msg,.rd-draft,.rd-brieftext,.chatlog .cbub,.cf-pop p,.dk-body .cbub{max-width:68ch}

/* ── panels and cards ───────────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);padding:var(--s-5);margin-bottom:var(--s-6)}
.panel .panel,.panel .rd-ent,.rd-card .rd-brief,.rd-card .rd-msg{border:none;background:var(--surface-2)}   /* one hairline, never two */
.panel>h3:first-child{margin-top:0}

/* ── controls: one height, one radius, four button variants (§11.1) ──── */
.btn{font:var(--t-small);font-weight:500;height:34px;padding:0 var(--s-4);border-radius:var(--r-1);border:1px solid transparent;
  display:inline-flex;align-items:center;gap:var(--s-2);cursor:pointer;white-space:nowrap;
  background:var(--surface-2);color:var(--text);border-color:var(--border);
  transition:background var(--d-instant) var(--e-out),border-color var(--d-instant) var(--e-out),transform var(--d-instant) var(--e-out)}
.btn:hover{background:var(--surface-3);border-color:var(--border-strong)}
.btn:active{transform:scale(.985)}
.btn.ox{background:var(--accent);color:var(--text-on-accent);border-color:transparent}
.btn.ox:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--text-2);border-color:transparent}
.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.danger{background:transparent;color:var(--negative);border-color:transparent}
.btn.danger:hover{background:var(--accent-quiet)}
.btn.sm{height:28px;padding:0 var(--s-3);font:var(--t-meta);font-weight:500}
.btn.lg{height:40px;padding:0 var(--s-5)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn kbd{margin-left:var(--s-1)}
input,select,textarea{font:var(--t-small);height:34px;padding:0 var(--s-3);border:1px solid var(--border);border-radius:var(--r-1);background:var(--field);color:var(--text)}
textarea{height:auto;padding:var(--s-2) var(--s-3);line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--border-strong)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
.field{display:flex;flex-direction:column;gap:var(--s-1);font:var(--t-meta);color:var(--text-2)}
.seg{display:inline-flex;height:34px;border:1px solid var(--border);border-radius:var(--r-full);overflow:hidden;background:var(--surface)}
.seg button{font:var(--t-small);padding:0 var(--s-4);border:none;background:transparent;color:var(--text-2);cursor:pointer;transition:background var(--d-instant) var(--e-out),color var(--d-instant) var(--e-out)}
.seg button:hover{color:var(--text)}
.seg button.active{background:var(--text);color:var(--bg)}
.row{display:flex;gap:var(--s-2);align-items:flex-end;flex-wrap:wrap}
.row>.grp{display:flex;gap:var(--s-2);align-items:center}
.pill,.rd-gchip,.rd-badge{display:inline-flex;align-items:center;gap:var(--s-1);height:22px;padding:0 var(--s-2);border-radius:var(--r-full);font:var(--t-meta);border:1px solid var(--border);color:var(--text-2)}
.rd-gchip{cursor:pointer}
.rd-gchip:hover{border-color:var(--accent-border);color:var(--text)}
.rd-gchip.none{border-style:dashed;color:var(--text-3)}
.rd-badge{font:var(--t-micro);letter-spacing:var(--track-micro);text-transform:uppercase}
kbd{font:var(--t-micro);letter-spacing:0;border:1px solid var(--border);border-radius:var(--r-1);padding:0 var(--s-1);color:var(--text-3);background:var(--surface)}

/* ── layers: menu, popover, drawer, modal, toast (§7, §11.6–11.8) ─────── */
.rd-menu,.menupanel,.rd-palbox{background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--r-3);box-shadow:var(--shadow-2)}
.rd-menu button{font:var(--t-small);padding:var(--s-2) var(--s-3);border-radius:var(--r-1);color:var(--text)}
.rd-menu button:hover,.rd-menu button.active{background:var(--surface-2)}
#dkDrawer{background:var(--surface-3);border-left:1px solid var(--border-strong);box-shadow:var(--shadow-3);border-radius:var(--r-3) 0 0 var(--r-3);transition:transform var(--d-slow) var(--e-spring)}
.rd-focus{background:var(--overlay)}
.rd-card.rd-card--focus{background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--r-3);box-shadow:var(--shadow-3);padding:var(--s-5) var(--s-6)}
#toastWrap{position:fixed;right:var(--s-5);bottom:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);z-index:96;align-items:flex-end}
.toast{background:var(--chrome);color:var(--text-on-dark);font:var(--t-small);padding:var(--s-3) var(--s-4);border-radius:var(--r-2);box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(8px);transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out);max-width:min(92vw,460px)}
.toast.show{opacity:1;transform:translateY(0)}
.toast.warn{background:var(--accent)}
.rd-learnbar{font:var(--t-small);padding:var(--s-3) var(--s-4);border-radius:var(--r-2);box-shadow:var(--shadow-3);gap:var(--s-3)}

/* ── Rundown, rebuilt on the system (§3, §11) ─────────────────────────── */
#view-rundown .rd-tools{gap:var(--s-2)}
#view-rundown .rd-tools .spacer{flex:1}
#view-rundown .rd-tools>*+.field,#view-rundown .rd-tools .seg+.seg{margin-left:var(--s-3)}
.rd-stats{gap:var(--s-2);margin:var(--s-5) 0 var(--s-2)}
.rd-stats .s{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);padding:var(--s-2) var(--s-4);min-width:78px}
.rd-stats .s b{font:var(--t-heading);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.rd-stats .s small{font:var(--t-micro);letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--text-3)}
.rd-burn{font:var(--t-small);color:var(--text-2);margin:0 0 var(--s-3)}
.rd-cmdbar{gap:var(--s-2);margin:var(--s-2) 0 var(--s-4)}
.rd-cmdbar input{font:var(--t-body);height:40px;padding:0 var(--s-4)}
.rd-cmdbar .btn{height:40px}
.rd-status{font:var(--t-meta);color:var(--text-2);min-height:20px;margin-bottom:var(--s-2)}
.rd-crumbs{font:var(--t-meta);color:var(--text-2);margin-bottom:var(--s-3)}
/* lanes: compact, scannable — this is a list he reads down, not a reading surface */
.rd-lanes{border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface)}
.rd-batch{font:var(--t-small);padding:var(--s-3) var(--s-4);gap:var(--s-2);background:var(--surface-2);border-bottom:1px solid var(--border-quiet)}
.rd-batch b{font:var(--t-heading);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.rd-lanehead{font:var(--t-meta);color:var(--text-2);padding:var(--s-2) var(--s-4);background:var(--surface);border-bottom:1px solid var(--border-quiet)}
.rd-lane{padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--border-quiet);border-left:3px solid transparent}
.rd-lane:hover{background:var(--surface-2)}
.rd-lane.sel{border-left-color:var(--accent);background:var(--surface-2)}
.rd-lanename{font:var(--t-heading);font-weight:400}
.rd-lanecount{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-heading)}
.rd-lanemeta{font:var(--t-small)}
.rd-lanereply{color:var(--accent);font-weight:500}
.rd-lanedigest{font:var(--t-small);color:var(--text-2)}
/* the card: airy inside */
.rd-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2);padding:var(--s-5)}
.rd-head{gap:var(--s-3);margin-bottom:var(--s-4)}
.rd-head .row{gap:var(--s-2)}
.rd-why{font:var(--t-meta);color:var(--text-3);font-style:italic}
.rd-brief{background:var(--surface-2);border:none;border-left:3px solid var(--accent);border-radius:var(--r-1);padding:var(--s-4) var(--s-5);margin-bottom:var(--s-4)}
.rd-brieftext{font:var(--t-body)}
.rd-split{gap:var(--s-6)}
.rd-plabel{font:var(--t-micro);letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s-2)}
.rd-meta{font:var(--t-meta);font-family:var(--font-mono);color:var(--text-3);margin-bottom:var(--s-2)}
.rd-subj{font:var(--t-heading);font-family:var(--font-sans);margin-bottom:var(--s-3)}
.rd-msg{font:var(--t-body);background:var(--surface-2);border:none;border-radius:var(--r-1);padding:var(--s-4) var(--s-5);max-height:420px}
.rd-draft{font:var(--t-body);min-height:200px;padding:var(--s-3) var(--s-4)}
.rd-arow{gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--border-quiet)}
.rd-arow .grp{gap:var(--s-1)}
.rd-arow .grp>span{font:var(--t-meta);color:var(--text-3)}
.rd-preview{font:var(--t-small);color:var(--text-2);padding:var(--s-3) var(--s-5)}
.rd-kbdhint{font:var(--t-meta);color:var(--text-3)}
.rd-draftbar{font:var(--t-small);padding:var(--s-3) var(--s-4);background:var(--surface-2)}
.rd-draftbar:hover{background:var(--surface-3)}
.rd-draftbody{padding:var(--s-4);background:var(--surface)}
.rd-focus-cmd{gap:var(--s-2);margin-top:var(--s-4)}
.rd-focus-cmd input{font:var(--t-body);height:44px}
.rd-ent{border-radius:var(--r-2);padding:var(--s-4) var(--s-5)}
.rd-entrow{padding:var(--s-2) 0;gap:var(--s-2);border-top:1px solid var(--border-quiet)}
.rd-entname{font:var(--t-small);font-weight:500}
.rd-entform{background:var(--surface-2);border:none;border-radius:var(--r-1);padding:var(--s-4)}
.rd-palbox input{font:var(--t-body);height:48px;border:none;border-bottom:1px solid var(--border);border-radius:0;padding:0 var(--s-5);background:var(--surface-3)}
.rd-palitem{font:var(--t-small);padding:var(--s-2) var(--s-5)}
.rd-palitem.sel,.rd-palitem:hover{background:var(--surface-2)}

/* ── the Cashflow grid keeps its density (§3) ─────────────────────────── */
table.cf-grid,table.cf-grid td,table.cf-grid th{font-size:var(--fs-meta);line-height:1.35}
table.cf-grid .cf-ea,table.cf-grid tr.cf-sec td{font-size:var(--fs-micro)}

/* Compose: writing to someone who has not written to you. The suggestion list
   is a menu, so it has to sit above the card behind it and be reachable with
   the keyboard, not just the mouse. */
.rd-comp{border:1px solid var(--line);border-radius:var(--r-3);padding:12px;background:var(--surface)}
.rd-sug{position:relative;margin:-6px 0 8px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);overflow:hidden}
.rd-sugrow{display:block;width:100%;text-align:left;padding:6px 10px;background:none;border:0;color:var(--text);cursor:pointer;font:inherit}
.rd-sugrow:hover,.rd-sugrow.on{background:var(--surface-2)}
.rd-sugrow:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}