/* Model console — Command Grid language (.agents/skills/command-grid-ui).
   Colours are ALIASES onto the generated /brand/tokens.css. No brand hex is
   typed here; change lib/brand.js and run `npm run gen:brand` instead. */
:root {
  --bg-2: var(--surface);
  --bg-3: color-mix(in srgb, var(--surface) 90%, white 10%);
  --bg-4: color-mix(in srgb, var(--surface) 84%, white 16%);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --muted-2: color-mix(in srgb, var(--ink-muted) 70%, var(--bg));
  --hair: rgba(240, 237, 230, 0.08);
  --line: color-mix(in srgb, var(--accent) 18%, transparent);
  --wash: color-mix(in srgb, var(--accent) 10%, transparent);
  --r-sm: 5px; --r-md: 9px; --r-lg: 14px; --r-pill: 999px;
  /* Type scale in rem, so the browser's text-size setting reaches every
     label. Each step is the px size it replaced ÷ 16, so at the default
     text size nothing moves. Use a token; never type a font size. */
  --fs-4xs: 0.625rem; /* 10px at the default 16px root */
  --fs-3xs: 0.65625rem; /* 10.5px at the default 16px root */
  --fs-2xs: 0.6875rem; /* 11px at the default 16px root */
  --fs-xs: 0.71875rem; /* 11.5px at the default 16px root */
  --fs-sm: 0.75rem; /* 12px at the default 16px root */
  --fs-sm2: 0.78125rem; /* 12.5px at the default 16px root */
  --fs-md: 0.8125rem; /* 13px at the default 16px root */
  --fs-base: 0.875rem; /* 14px at the default 16px root */
  --fs-lg: 1rem; /* 16px at the default 16px root */
  --fs-xl: 1.375rem; /* 22px at the default 16px root */
  --fs-2xl: 1.5rem; /* 24px at the default 16px root */
  --fs-3xl: 1.625rem; /* 26px at the default 16px root */
  --fs-4xl: 1.75rem; /* 28px at the default 16px root */
  --fs-5xl: 2.125rem; /* 34px at the default 16px root */
  --fs-6xl: 2.25rem; /* 36px at the default 16px root */
  /* Chart series, in the dataviz reference order (CVD-checked for adjacent
     pairs, dark steps). Identity only — state keeps --good/--warn/--bad. */
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70;
  --series-4: #c98500; --series-5: #d55181; --series-6: #9085e9;
  --series-other: color-mix(in srgb, var(--ink-muted) 55%, var(--bg));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: var(--fs-base); line-height: 1.5; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
a { color: var(--accent); }
.tnum, .num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: var(--r-md); font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.cg { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: 100vh; }
.cg__side { background: var(--bg-2); border-right: 1px solid var(--hair); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.cg__brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.cg__brand b { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: .5px; line-height: 1; }
.cg__brand span { display: block; font-family: var(--font-mono); font-size: var(--fs-4xs); color: var(--muted-2); letter-spacing: 1px; text-transform: uppercase; margin-top: 3px; }
.mark { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-lg); flex: none; }
.navsec { font-family: var(--font-mono); font-size: var(--fs-4xs); letter-spacing: 1.4px; color: var(--muted-2); text-transform: uppercase; padding: 12px 10px 5px; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.navitem { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-md); color: var(--muted); font-size: var(--fs-md); font-weight: 500; text-decoration: none; }
.navitem .n { font-family: var(--font-mono); font-size: var(--fs-4xs); color: var(--muted-2); width: 16px; }
.navitem:hover { background: var(--bg-3); color: var(--text); }
.navitem[aria-current="page"] { background: var(--wash); color: var(--accent); font-weight: 600; }
.navitem .badge { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-4xs); background: var(--bad); color: var(--ink); border-radius: var(--r-pill); padding: 1px 7px; }
.cg__foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--hair); font-size: var(--fs-xs); color: var(--muted-2); }
.cg__wrap { display: flex; flex-direction: column; min-width: 0; }
.cg__util { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--hair); background: var(--bg-2); flex-wrap: wrap; }
.cg__crumb { font-size: var(--fs-md); color: var(--muted); }
.cg__crumb b { color: var(--text); font-weight: 600; }
.cg__sp { flex: 1; }
.cg__main { flex: 1; padding: 20px; min-width: 0; }
.cg__main:focus { outline: none; }
.save { font-size: var(--fs-xs); color: var(--muted-2); display: inline-flex; align-items: center; gap: 6px; }
.save .d { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.save.off .d { background: var(--warn); }

/* ── page + panels ─────────────────────────────────────────────────────── */
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-h h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5xl); letter-spacing: .5px; line-height: 1; margin: 0; }
.page-h p { margin: 6px 0 0; color: var(--muted); max-width: 70ch; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .span4 { grid-column: 1 / -1; }
.panel { position: relative; background: var(--bg-2); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 15px 16px; min-width: 0; }
.panel__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.panel__t { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin: 0; }
.panel p { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-md); }
.panel p:last-child { margin-bottom: 0; }
.kpi .v { font-family: var(--font-display); font-size: var(--fs-6xl); line-height: 1; letter-spacing: .3px; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: var(--fs-sm); color: var(--muted-2); }
.kpi .v.neg { color: var(--bad); } .kpi .v.pos { color: var(--good); }
.scroll { overflow-x: auto; position: relative; }
.hint { font-size: var(--fs-sm); color: var(--muted-2); }
.formula { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); word-break: break-word; }

/* ── chips ─────────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); white-space: nowrap; vertical-align: middle; }
.chip .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--good { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.chip--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.chip--bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.chip--info { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.chip--neutral { color: var(--muted); background: rgba(240, 237, 230, .06); }
.chip--accent { color: var(--accent); background: var(--wash); }
.nullv { color: var(--muted-2); }

/* ── tables ────────────────────────────────────────────────────────────── */
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.dtable caption { text-align: left; font-size: var(--fs-sm); color: var(--muted-2); padding-bottom: 8px; }
.dtable th { text-align: left; font-size: var(--fs-4xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); padding: 0 6px 8px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.dtable th.num, .dtable td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable td { padding: 6px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.dtable tbody th { text-transform: none; letter-spacing: 0; font-size: var(--fs-md); color: var(--text); font-weight: 500; border-bottom: 1px solid var(--hair); padding: 6px; white-space: normal; }
.dtable tr.total td, .dtable tr.total th { font-weight: 700; border-top: 1px solid var(--line); }
.dtable tr.sub th { padding-left: 18px; color: var(--muted); font-weight: 400; }
.dtable tr.sect th { color: var(--accent); font-size: var(--fs-3xs); letter-spacing: 1px; text-transform: uppercase; padding-top: 14px; }
.dtable tr.how td { padding-top: 0; }
.dtable td.act { width: 1%; white-space: nowrap; text-align: right; }

/* ── inputs ────────────────────────────────────────────────────────────── */
.in { width: 100%; min-width: 0; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-sm); padding: 6px 8px; color: var(--text); font-family: var(--font-body); font-size: var(--fs-md); }
.in:focus { outline: none; border-color: var(--accent); }
.in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.in.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.in.w-xs { width: 64px; } .in.w-sm { width: 88px; } .in.w-md { width: 120px; }
.in.missing { border-color: var(--bad); }
/* A long name wraps and the box grows taller, never cut off mid-word. */
.in--grow { display: block; resize: none; min-height: calc(1lh + 14px); line-height: 1.35; overflow-wrap: anywhere; white-space: pre-wrap; overflow: hidden; } /* height set by fitGrow() in app.js */
select.in { padding-right: 4px; }
.in[type="date"] { color-scheme: dark; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label, .field .lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.field .hint { font-size: var(--fs-xs); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); }
.months { display: grid; grid-template-columns: repeat(12, minmax(52px, 1fr)); gap: 6px; }
.months label { font-size: var(--fs-3xs); color: var(--muted-2); display: block; text-align: center; font-family: var(--font-mono); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-md); padding: 8px 14px; border-radius: var(--r-md); cursor: pointer; border: 1px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--hair); }
.btn--ghost:hover { background: var(--bg-3); }
.btn--danger { background: var(--bad); color: var(--ink); }
.btn--sm { padding: 4px 9px; font-size: var(--fs-sm); }
.iconbtn { background: transparent; border: 1px solid var(--hair); color: var(--muted); border-radius: var(--r-sm); padding: 3px 8px; cursor: pointer; font-size: var(--fs-sm); }
.iconbtn:hover { color: var(--bad); border-color: var(--bad); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }

/* ── template cards ────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { text-align: left; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 14px; color: var(--text); cursor: pointer; font-family: var(--font-body); display: flex; flex-direction: column; gap: 6px; }
.card:hover { border-color: var(--line); background: var(--bg-3); }
.card b { font-size: var(--fs-base); } .card span { font-size: var(--fs-sm2); color: var(--muted); }
.card.is-current { border-color: var(--accent); }

/* ── banners ───────────────────────────────────────────────────────────── */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-md); margin-bottom: 14px; }
.banner--warn { background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); }
.banner--info { background: color-mix(in srgb, var(--info) 9%, transparent); color: var(--info); border: 1px solid color-mix(in srgb, var(--info) 22%, transparent); }
.banner--bad { background: color-mix(in srgb, var(--bad) 10%, transparent); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); }
.banner p { margin: 0; color: inherit; }
.missing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.missing-list li { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-md); }
.flags { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.flags li { font-size: var(--fs-sm2); color: var(--warn); }

/* ── cost steps: Staff, Rent or mortgage, Insurance & costs, Startup ───── */
.cs-sec + .cs-sec { margin-top: 14px; }
.cs-wage { color: var(--text); }
.cs-none { font-size: var(--fs-md); color: var(--muted); margin: 4px 0 0 !important; }
.cs-sec .omc-tl { padding-bottom: .9rem; }
.cs-sec .omc-body > .formula { margin-top: 10px; }
.cs-sec .omc-body > .omc-legend:first-child { margin: 0 0 10px; }
.cs-stat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.cs-stat__v { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: 1; }
.cs-stat__l { font-size: var(--fs-md); color: var(--muted); }
.cs-mini { margin: 14px 0 6px; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.cs-empty { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr); gap: 20px; align-items: center; }
.cs-empty__t { font-size: var(--fs-lg); color: var(--text) !important; font-weight: 600; }
@media (max-width: 820px) { .cs-empty { grid-template-columns: minmax(0, 1fr); } }
.cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 12px; margin-top: 12px; }
.cs-card { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-card__t { margin: 0; font-size: var(--fs-base); font-weight: 600; overflow-wrap: anywhere; }
.cs-card__s { margin: 0 !important; font-size: var(--fs-sm) !important; }
.cs-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.cs-kv dt { font-size: var(--fs-4xs); text-transform: uppercase; letter-spacing: .6px; color: var(--muted-2); font-weight: 600; }
.cs-kv dd { margin: 2px 0 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-md); overflow-wrap: anywhere; }
.cs-card .omc-stack__bar { height: 1.1rem; }
/* Small multiples share the legend above them; an in-bar label would clip. */
.cs-card .omc-stack__seg span { display: none; }
.cs-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.cs-flags .chip { white-space: normal; }
.cs-kind { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; white-space: nowrap; vertical-align: middle; }
.cs-setas { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-setas select.in { width: auto; min-width: 8rem; }
/* The staff tables: names never clip, selects never collapse, and on a
   narrow panel (small window, or a large browser text size — the query is
   in rem) each row stacks into labelled fields instead of hiding columns. */
.cs-stackwrap { container-type: inline-size; }
.cs-sec td.cs-name { width: 100%; min-width: 12rem; }
.cs-sec td.cs-name .in { width: 100%; }
.cs-roles td.cs-name { min-width: 12rem; }
.cs-roles td.cs-name .in { width: 100%; }
.cs-roles td.cs-sel select.in { min-width: 7rem; }
.cs-roles td.cs-wc select.in { min-width: 11rem; }
.cs-costs th.cs-name { min-width: 10rem; }
@container (max-width: 66rem) {
  .dtable--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dtable--stack, .dtable--stack tbody { display: block; }
  .dtable--stack tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); align-items: end; }
  .dtable--stack tr.how { padding-top: 0; }
  .dtable--stack td, .dtable--stack tbody th { display: block; border: 0; padding: 0; min-width: 0 !important; text-align: left !important; }
  .dtable--stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-body); font-size: var(--fs-4xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; white-space: normal; }
  .dtable--stack tr.how td, .cs-costs.dtable--stack .cs-name, .cs-loans.dtable--stack td.cs-name { grid-column: 1 / -1; }
  .cs-roles.dtable--stack tr { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
  .cs-roles.dtable--stack td.cs-name { grid-column: span 2; }
  .cs-roles.dtable--stack td.cs-wc { grid-column: span 2; }
  .cs-costs.dtable--stack tr { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 6px 12px; }
  .dtable--stack td.cs-skip { display: none; }
  .dtable--stack td .in, .dtable--stack.cs-roles td select.in, .dtable--stack.cs-roles td .in { width: 100%; min-width: 0; }
  .dtable--stack td.act { width: auto; text-align: right !important; }
  .dtable--stack tr.total { border-top: 1px solid var(--line); }
}
/* Short lists (insurance, costs, build-out) stack only when really narrow. */
@container (max-width: 36rem) {
  .dtable--stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dtable--stack-sm, .dtable--stack-sm tbody { display: block; }
  .dtable--stack-sm tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 8px 14px; padding: 12px 0; border-bottom: 1px solid var(--hair); align-items: end; }
  .dtable--stack-sm tr.how { padding-top: 0; }
  .dtable--stack-sm td, .dtable--stack-sm tbody th { display: block; border: 0; padding: 0; min-width: 0 !important; text-align: left !important; }
  .dtable--stack-sm td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-body); font-size: var(--fs-4xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; white-space: normal; }
  .dtable--stack-sm td.cs-name { grid-column: 1 / -1; }
  .dtable--stack-sm td.cs-skip { display: none; }
  .dtable--stack-sm td .in, .dtable--stack-sm td select.in { width: 100%; min-width: 0; }
  .dtable--stack-sm td.act { width: auto; text-align: right !important; }
  .dtable--stack-sm tr.total { border-top: 1px solid var(--line); }
}
/* Tax category on each cost line (OMExpenses): the category, then how much
   of it counts for tax. A typed-in line gets a picker instead of the chip. */
.xp-taxcell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 8.5rem; max-width: 13rem; }
.xp-taxcell select.in { width: 100%; }
/* With the Tax column the name gives up a little width, so Remove stays on screen. */
.cs-list tr:has(td.xp-tax) td.cs-name { min-width: 8rem; }
.xp-cat { white-space: normal; text-align: left; }
.xp-taxline { font-size: var(--fs-2xs); color: var(--muted-2); }
.xp-ded { color: var(--text); font-weight: 600; }
.xp-ded--part { color: var(--warn); }
.xp-ded--none { color: var(--bad); }
.xp-need { color: var(--warn); font-weight: 600; }
.xp-addrow { align-items: flex-start; }
.xp-pick { flex: 0 1 auto; }
.xp-pick[open] { flex-basis: 100%; }
.xp-pick > summary { list-style: none; width: max-content; }
.xp-pick > summary::-webkit-details-marker { display: none; }
.xp-pick > summary::after { content: '▾'; font-size: var(--fs-2xs); }
.xp-pick[open] > summary::after { content: '▴'; }
.xp-pick__box { margin-top: 10px; background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; }
.xp-pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 14px 22px; }
.xp-pick__g ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xp-pick__t { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.xp-pick__i { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-sm); min-width: 0; }
.xp-pick__i .btn { white-space: normal; text-align: left; }
.xp-pick__i.is-else .xp-pick__n { color: var(--text); padding: 4px 0; }
.xp-pick__i .hint { flex-basis: 100%; }
.xp-pick__m { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-2xs); }
.xp-custom { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hair); }
.xp-custom__f { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.xp-custom__f .field { flex: 1 1 14rem; max-width: 22rem; }
.xp-true__txt { margin-top: 12px; max-width: 75ch; }
.xp-benefit { color: var(--text) !important; font-size: var(--fs-base) !important; }
/* Your own pay (Staff) and How this is taxed (Rent or mortgage). */
.op-ent { color: var(--text) !important; }
.op-why { margin: 10px 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); color: var(--muted); }
.op-lands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 12px; margin: 14px 0 10px; }
.op-lands__c { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.op-lands__t { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.op-lands__c p { margin: 8px 0 0; }
.op-warn { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--text) !important; }
#owner-pay .fields, #occ-tax .fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
#owner-pay .in.w-md, #occ-tax .in.w-md { width: 100%; max-width: 9rem; }
.disclaimer { font-size: var(--fs-sm); color: var(--muted-2); border-top: 1px solid var(--hair); margin-top: 24px; padding-top: 12px; max-width: 90ch; }

/* ── recipe editor ─────────────────────────────────────────────────────── */
details.recipe summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); padding: 2px 0; }
details.recipe summary:hover { color: var(--text); }
details.recipe[open] summary { color: var(--accent); }
.recipe-box { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 10px; margin: 6px 0 4px; }

/* ── menu, jobs, traffic, capacity steps ───────────────────────────────── */
.pg-sec + .pg-sec { margin-top: 14px; }
.panel .omc-sub, .panel .tr-find, .panel .recipe-cost__t, .panel .me-find { color: var(--text); }
.panel .tr-find { font-size: var(--fs-base); font-weight: 500; }
.m-none { color: var(--muted); font-size: var(--fs-md); }
/* Name columns take the free width, so names are not cut off. */
.dtable td.nm { width: 100%; }
.in.w-name { width: 100%; min-width: 11rem; }
.dtable--stack-sm .in.w-name { min-width: 7rem; }
/* Same widths as .w-xs/.w-sm/.w-md at the default text size, but in rem, so
   a number still fits its box when the text is made bigger. */
.pg-sec .fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.pg-sec .in.w-xs { width: 4rem; } .pg-sec .in.w-sm { width: 5.5rem; } .pg-sec .in.w-md { width: 100%; min-width: 6.5rem; max-width: 7.5rem; } /* min: a 100%-wide cell next to a name column must not squeeze $1,000,000 to ",000" */
.in.w-cat { width: auto; min-width: 8rem; max-width: 16rem; field-sizing: content; }
/* Narrow table, or large text: each row becomes a labelled block. The
   container is measured in rem, so a bigger text size stacks sooner. */
.stack-host { container-type: inline-size; }
@container (max-width: 62rem) {
  .dtable--stack:not(.dtable--stack-sm) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable--stack:not(.dtable--stack-sm), .dtable--stack:not(.dtable--stack-sm) tbody { display: block; }
  .dtable--stack:not(.dtable--stack-sm) tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .dtable--stack:not(.dtable--stack-sm) td, .dtable--stack:not(.dtable--stack-sm) td.num { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 0; padding: 0; text-align: left; white-space: normal; width: auto; }
  .dtable--stack:not(.dtable--stack-sm) td[data-label]::before { content: attr(data-label); font-size: var(--fs-4xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); font-family: var(--font-body); }
  .dtable--stack:not(.dtable--stack-sm) td.nm { grid-column: 1 / -1; }
  .dtable--stack:not(.dtable--stack-sm) td.act { grid-column: 1 / -1; align-items: flex-end; justify-content: flex-end; }
  .dtable--stack:not(.dtable--stack-sm) .in.num { text-align: left; }
  .dtable--stack:not(.dtable--stack-sm) .in { width: 100%; max-width: 14rem; }
  .dtable--stack:not(.dtable--stack-sm) .in.w-cat { max-width: 100%; }
  .dtable--stack:not(.dtable--stack-sm) tr.mrow { border-bottom: 0; padding-bottom: 4px; }
  .dtable--stack:not(.dtable--stack-sm) tr.how { display: block; padding: 0 0 10px; }
  .dtable--stack:not(.dtable--stack-sm) tr.how td { display: block; }
}
/* A short table (few columns) stays a table down to 36rem. */
@container (max-width: 36rem) {
  .dtable--stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable--stack-sm, .dtable--stack-sm tbody { display: block; }
  .dtable--stack-sm tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .dtable--stack-sm td, .dtable--stack-sm td.num { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; border: 0; padding: 0; text-align: left; white-space: normal; width: auto; }
  .dtable--stack-sm td[data-label]::before { content: attr(data-label); font-size: var(--fs-4xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted-2); font-family: var(--font-body); }
  .dtable--stack-sm td.nm { grid-column: 1 / -1; }
  .dtable--stack-sm td.act { grid-column: 1 / -1; align-items: flex-end; justify-content: flex-end; }
  .dtable--stack-sm .in.num { text-align: left; }
  .dtable--stack-sm .in { width: 100%; max-width: 14rem; }
  .dtable--stack-sm .in.w-cat { max-width: 100%; }
  .dtable--stack-sm tr.mrow { border-bottom: 0; padding-bottom: 4px; }
  .dtable--stack-sm tr.how { display: block; padding: 0 0 10px; }
  .dtable--stack-sm tr.how td { display: block; }
}
.months { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }

/* recipe editor: paging and the plate-cost bar */
.recipe-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.recipe-nav .hint { flex: 1 1 10rem; text-align: center; }
.recipe-cost { margin-bottom: 12px; }
.recipe-cost__t { font-size: var(--fs-md); margin: 0 0 6px; }

/* category and job cards */
.mcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 12px; }
.mcat { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mcat__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mcat__t { margin: 0; font-size: var(--fs-base); font-weight: 600; overflow-wrap: anywhere; }
.mcat__n { font-size: var(--fs-sm); color: var(--muted); }
.mcat__age-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 1.4em; }
.mcat__age { font-size: var(--fs-sm); color: var(--muted); }
.mcat__body { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mcat .omc-ring { gap: 10px; }
.mcat .omc-ring__fig { width: 6.5rem; }
.mcat .omc-ring__c b { font-size: var(--fs-lg); }
.mcat__stats { margin: 0; display: grid; gap: 4px; flex: 1 1 8rem; }
.mcat__stats div { display: flex; justify-content: space-between; gap: 10px; }
.mcat__stats dt { font-size: var(--fs-sm); color: var(--muted); }
.mcat__stats dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-md); }
.mcat__stats--row { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 8px; }
.mcat__stats--row div { flex-direction: column; justify-content: flex-start; gap: 0; }
.mcat__flags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.panel .mcat__warn { color: var(--warn); font-size: var(--fs-sm); margin: 0; }
.mcat .btn { align-self: flex-start; margin-top: auto; white-space: normal; }

/* menu engineering: marks on a 0–100 grid, every word in HTML (rem) */
.me-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.me-filter .btn[aria-pressed="true"] { background: var(--wash); border-color: var(--accent); color: var(--accent); }
.me-wrap { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: flex-start; }
.me { flex: 3 1 26rem; min-width: 0; }
.me-side { flex: 1 1 14rem; min-width: 0; max-width: 30rem; }
.panel .me-ytitle, .panel .me-xtitle { font-size: var(--fs-2xs); color: var(--muted); margin: 0 0 6px; }
.panel .me-xtitle { text-align: center; margin: 2px 0 0; }
.me-xy { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 8px; }
.me-yax { position: relative; min-width: 1.8rem; font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono-stack); }
.me-yax span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.me-plot { position: relative; height: clamp(14rem, 36vw, 30rem); border: 1px solid var(--hair); border-radius: 4px; }
.me-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.me-grid { stroke: var(--hair); stroke-width: 1; }
.me-line { stroke: var(--muted); stroke-width: 1; }
.me-xax { grid-column: 2; position: relative; height: 1.6em; font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono-stack); }
.me-xax span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.me-xax span:first-child { transform: none; } .me-xax span:last-child { transform: translateX(-100%); }
.me-q { position: absolute; padding: 5px 7px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.me-q b { color: var(--text); margin-left: 2px; }
.me-q--tl { top: 0; left: 0; } .me-q--tr { top: 0; right: 0; } .me-q--bl { bottom: 0; left: 0; } .me-q--br { bottom: 0; right: 0; }
.me-dot { position: absolute; width: 10px; height: 10px; transform: translate(-50%, -50%); cursor: pointer; }
.me-dot::before { content: ''; position: absolute; inset: -7px; }
.me-dot::after { content: ''; position: absolute; inset: 0; background: var(--k); border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-2); }
.me-dot--star { --k: var(--good); }
.me-dot--plow { --k: var(--info); } .me-dot--plow::after { border-radius: 1px; }
.me-dot--puzzle { --k: var(--warn); } .me-dot--puzzle::after { border-radius: 1px; transform: rotate(45deg) scale(.9); }
.me-dot--dog { --k: var(--bad); } .me-dot--dog::after { background: var(--bg-2); border: 2px solid var(--k); }
.me-dot.is-pinned::after { outline: 2px solid var(--text); outline-offset: 2px; }
.me-dot:hover { z-index: 4; }
.me-lab { display: none; position: absolute; white-space: nowrap; font-size: var(--fs-2xs); line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--bg-2) 88%, transparent); padding: 0 4px; border-radius: 3px; pointer-events: none; z-index: 2; }
.me-dot.is-labelled .me-lab { display: block; }
.me-dot.is-crowded .me-lab { display: none; }
.me-dot:hover .me-lab { display: block; background: var(--bg); outline: 1px solid var(--line); }
.me-lab[data-side="r"] { left: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
.me-lab[data-side="l"] { right: calc(100% + 4px); top: 50%; transform: translateY(-50%); }
.me-lab[data-side="t"] { bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); }
.me-lab[data-side="b"] { top: calc(100% + 3px); left: 50%; transform: translateX(-50%); }
.panel .me-find { font-size: var(--fs-base); }
.me-key { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.me-key li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); }
.me-key .me-dot--key { position: relative; transform: none; flex: none; margin-top: 4px; cursor: default; }
.me-key__n { font-family: var(--font-mono); margin-left: 4px; }
.me-key .hint { display: block; }
.me-pin[aria-pressed="true"] { background: var(--wash); border-color: var(--accent); color: var(--accent); }

/* menu size, empty states */
.m-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.m-tags li { font-size: var(--fs-sm); background: var(--bg-3); border-radius: var(--r-pill); padding: 2px 9px; }
.m-dogs { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.m-dogs > div { flex: 1 1 14rem; min-width: 0; }
.m-empty { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 24px; }
.m-empty .om-art { flex: 0 1 13rem; }
.m-empty__b { flex: 1 1 20rem; min-width: 0; }
.m-empty__t { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); margin: 0 0 6px; }
.m-steps { margin: 8px 0 14px; padding-left: 1.3em; color: var(--muted); font-size: var(--fs-md); display: flex; flex-direction: column; gap: 4px; }
.m-empty--in { padding: 6px 0; gap: 12px; }
.m-empty--in .om-art { flex: 0 0 4.5rem; }

/* traffic and capacity: finding + chart side by side */
.tr-split { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: flex-start; margin-bottom: 12px; }
.tr-split > div:first-child { flex: 1 1 16rem; min-width: 0; }
.tr-chart { flex: 2 1 24rem; min-width: 0; }
.pay-bars { display: flex; flex-direction: column; gap: 12px; }
.cap-over { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.panel .cap-over__note { color: var(--bad); margin-top: 10px; }

/* ── charts ────────────────────────────────────────────────────────────── */
.chart { width: 100%; height: auto; display: block; }
.chart text { fill: var(--muted); font-family: var(--font-mono); font-size: var(--fs-4xs); }
.chart .grid-l { stroke: var(--hair); }
.chart .axis { stroke: var(--muted-2); }
.chart .zero { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart .bar-pos { fill: color-mix(in srgb, var(--good) 55%, transparent); }
.chart .bar-neg { fill: color-mix(in srgb, var(--bad) 55%, transparent); }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.chart .area { fill: var(--wash); }
.chart .dot { fill: var(--accent); }
.chart .q-star { fill: var(--good); } .chart .q-plow { fill: var(--info); } .chart .q-puzzle { fill: var(--warn); } .chart .q-dog { fill: var(--bad); }
.chart .qlabel { fill: var(--muted-2); font-size: var(--fs-2xs); font-family: var(--font-body); font-weight: 600; letter-spacing: .5px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* ── results + locations ─────────────────────────────────────────────────── */
.res-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.res-side--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; }
.res-subh { margin: 14px 0 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.omc-body > .res-subh:first-child, .loc-cmp .res-subh:first-child { margin-top: 0; }
.res-finding { margin: 10px 0 !important; color: var(--text) !important; }
.res-wait { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.res-empty { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.res-empty > svg { flex: 0 0 auto; width: 7rem; }
.res-empty > div { flex: 1 1 18rem; min-width: 0; }
.res-empty__t { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 600; color: var(--text); }
.panel .res-empty__t { color: var(--text); }
.res-first { margin: 0 0 8px; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-md); }
.loc-cards { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 10px; }
.loc-card { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.loc-card__n { margin: 0; font-size: var(--fs-base); font-weight: 600; overflow-wrap: anywhere; }
.loc-card__open, .loc-card__age { margin: 0 !important; font-size: var(--fs-sm) !important; }
.loc-card__age { color: var(--muted-2) !important; }
.loc-card__kv { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.loc-card__kv dt { font-size: var(--fs-2xs); color: var(--muted); }
.loc-card__kv dd { margin: 2px 0 0; font-family: var(--font-mono-stack); font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.loc-card__kv dd.neg { color: var(--bad); } .loc-card__kv dd.pos { color: var(--good); }
.loc-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 18px 28px; }
.loc-tl .omc-tl--loan { top: auto; bottom: 0; height: 3px; }
.loc-tl .omc-tl--loan span { display: none; }
#money-goes .omc-stack__seg span { display: none; } /* the legend carries every label and value */
#loc-edit td:first-child .in { width: 12rem; }
#loc-edit .in.w-xs { width: 5.5rem; }
#loc-edit .in.w-sm { width: 7.5rem; }
.loc-shared { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hair); max-width: 40rem; }

/* ── what if? ──────────────────────────────────────────────────────────── */
.wi-presets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 8px 10px; }
.wi-presets li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wi-preset { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; }
.wi-preset:disabled { opacity: .55; cursor: not-allowed; }
.wi-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wi-card { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; min-width: 0; }
.wi-card__h { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.wi-card__t { margin: 0; font-size: var(--fs-base); font-weight: 600; flex: 1 1 14rem; overflow-wrap: anywhere; }
.wi-card__eff { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); color: var(--muted); }
.wi-card__eff.is-pos { color: var(--good); } .wi-card__eff.is-neg { color: var(--bad); }
.wi-card__issue { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--text) !important; }
.wi-card .hint { display: block; margin-top: 8px; }
.wi-fields { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.wi-fields .in.w-md { width: 100%; max-width: 9rem; } .wi-fields .in.w-sm { width: 100%; max-width: 7rem; } .wi-fields .in.w-xs { width: 100%; max-width: 5rem; }
.wi-head__s { font-size: var(--fs-lg) !important; line-height: 1.45; color: var(--text) !important; max-width: 80ch; margin-top: 4px !important; }
.wi-cmp tr.how td { padding-top: 0; }
.wi-modal { max-width: 34rem; }
.wi-modal__list { margin: 0 0 12px; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-md); }
.wi-modal .dtable { margin-bottom: 10px; }
.wi-modal .row { margin-top: 14px; }
.wi-done .row { margin-top: 8px; }
/* CPA handoff (VIEWS.cpa) */
.cpa-draft { color: var(--text); }
.cpa-draft b { color: var(--warn); letter-spacing: .6px; }
.cpa-forms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cpa-forms li { font-size: var(--fs-md); line-height: 1.5; }
.cpa-off { margin-top: 10px; }
.cpa-rows { table-layout: auto; }
.cpa-rows th.cpa-line { width: 5.5rem; white-space: nowrap; font-family: var(--font-mono-stack); font-weight: 600; }
.cpa-rows td.cpa-label { min-width: 16rem; }
.cpa-rows td.num { white-space: nowrap; }
.cpa-note { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); max-width: 44rem; }
.cpa-ns { color: var(--muted-2); font-style: italic; }
.cpa-src { font-family: var(--font-mono-stack); font-size: var(--fs-xs); color: var(--muted); overflow-wrap: anywhere; }
.cpa-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-md); }
.cpa-acts { margin-bottom: 8px; }
.cpa-status { min-height: 1.4em; margin: 8px 0 0; font-size: var(--fs-md); }
.cpa-status--good { color: var(--good); } .cpa-status--bad { color: var(--bad); } .cpa-status--info { color: var(--info); }
.cpa-links td { vertical-align: middle; }
.cpa-ttl { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 8px 12px 10px; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cpa-ttl legend { padding: 0 4px; font-size: var(--fs-sm); color: var(--muted); }
.cpa-url { width: 100%; font-family: var(--font-mono-stack); }
.cpa-foot { margin-top: 14px; }
#cpa-send .btn[aria-disabled="true"], .cpa-modal .btn[aria-disabled="true"] { opacity: .55; cursor: progress; }
/* ── taxes + valuation ─────────────────────────────────────────────────── */
.tx-basis-pick { min-width: 12rem; }
.tx-fields { margin-top: 12px; }
.tx-f { display: block; margin-top: 2px; font-weight: 400; }
.tx-sm { display: block; font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-body); }
.tx-est th { white-space: normal; }
.tx-due .tx-date { white-space: nowrap; }
.tx-due td, .tx-tot td { vertical-align: top; }
.tx-basis { font-size: var(--fs-sm); color: var(--muted); min-width: 12rem; }
.tx-src { font-size: var(--fs-sm); white-space: nowrap; }
.tx-tot { margin-top: 4px; }
.tx-box { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; margin-top: 14px; min-width: 0; }
.tx-box > .res-subh:first-child { margin-top: 0; }
.tx-employer { border-left: 3px solid var(--good); }
.tx-lead { color: var(--text) !important; font-size: var(--fs-base) !important; font-weight: 600; }
.tx-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 14px; align-items: start; }
.tx-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-md); }
.tx-check li { display: flex; flex-direction: column; gap: 3px; padding-left: 12px; border-left: 2px solid var(--hair); }
.tx-check li.is-key { border-left-color: var(--accent); color: var(--text); }
.tx-check__m { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--fs-sm); }
.tx-notes { margin: 12px 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.tx-caveat { margin-top: 12px !important; font-size: var(--fs-sm) !important; color: var(--text) !important; font-weight: 600; }
.tx-conf td { font-size: var(--fs-sm); }
.tx-tips .how td, .tx-ot .how td { border-bottom: 1px solid var(--hair); }
.dtable.tx-tips thead th, .dtable.tx-ot thead th, .dtable.tx-due thead th { white-space: normal; vertical-align: bottom; }
/* The calendar's amount labels would collide in a narrow box or at large
   text; there the marks stay and the table under the chart carries the amounts. */
#tx-calendar .omc-tl { container-type: inline-size; }
@container (max-width: 48rem) { #tx-calendar .omc-tl__ptl { display: none; } }
.val-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 12px; align-items: start; }
.val-card { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.val-card p { margin: 0 !important; }
.val-card .fields { margin-top: 4px; }
.val-card__l { font-size: var(--fs-md); color: var(--text) !important; }
.val-x { font-family: var(--font-mono-stack); font-variant-numeric: tabular-nums; white-space: nowrap; }
.val-caveat { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-sm) !important; }
.val-kv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.val-build .in.val-name { width: 100%; min-width: 9rem; }
.val-build .num .in { margin-left: auto; }
.val-row { margin-top: 10px; }

/* "On this page" (page-index.js) and Back to top */
.om-toc { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--hair); border-radius: var(--r-md); }
.om-toc__h { flex: none; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.om-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; }
.om-toc__list a { display: block; padding: 3px 8px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--muted); text-decoration: none; white-space: nowrap; }
.om-toc__list a:hover { color: var(--text); background: var(--bg-3); }
.om-toc__list a[aria-current="location"] { color: var(--accent); background: var(--wash); font-weight: 600; }
.om-toc__toggle { display: none; background: none; border: 0; padding: 2px 0; color: var(--text); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left; }
.om-toc__toggle::after { content: " ▾"; color: var(--muted); }
.om-toc.is-open .om-toc__toggle::after { content: " ▴"; }
.om-toc.is-compact .om-toc__h { display: none; }
.om-toc.is-compact .om-toc__toggle { display: block; }
.om-toc.is-compact .om-toc__list { display: none; position: absolute; left: -1px; right: -1px; top: 100%; flex-direction: column; flex-wrap: nowrap; padding: 6px; background: var(--bg-2); border: 1px solid var(--hair); border-radius: 0 0 var(--r-md) var(--r-md); max-height: 60vh; overflow-y: auto; }
.om-toc.is-compact.is-open .om-toc__list { display: flex; }
.om-toc.is-compact .om-toc__list a { white-space: normal; padding: 6px 8px; }
[data-index-title] { scroll-margin-top: calc(var(--om-toc-h, 3rem) + 12px); }
[data-index-title]:focus { outline: none; }
[data-index-title]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.om-top { position: fixed; right: 20px; bottom: 20px; z-index: 30; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); padding: 8px 14px; border-radius: var(--r-pill); background: var(--bg-3); color: var(--text); border: 1px solid var(--line); cursor: pointer; }
.om-top:hover { background: var(--bg-4); }
.om-top[hidden] { display: none; }
@media (max-width: 820px) { .om-toc .om-toc__h { display: none; } .om-toc .om-toc__toggle { display: block; } .om-toc .om-toc__list { display: none; position: absolute; left: -1px; right: -1px; top: 100%; flex-direction: column; flex-wrap: nowrap; padding: 6px; background: var(--bg-2); border: 1px solid var(--hair); max-height: 60vh; overflow-y: auto; } .om-toc.is-open .om-toc__list { display: flex; } }

/* ── chart primitives (public/model/charts.js → window.OMCharts) ───────── */
/* Text is HTML in rem, so it follows the browser's text size; SVG draws marks
   only. Colours arrive as --k from a named tone, never a literal. */
ul.legend { list-style: none; padding: 0; margin: 8px 0 0; }
.omc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.omc-legend__v { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.omc-key { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--k); }
.omc-key--line { height: 2px; width: 14px; border-radius: 1px; }
.omc-key--dot { border-radius: 50%; }
.omc-hatch, .omc-key--hatch { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink-muted) 45%, transparent) 0 1.5px, transparent 1.5px 6px); outline: 1px dashed color-mix(in srgb, var(--ink-muted) 55%, transparent); outline-offset: -1px; }
.omc-sub { margin: -6px 0 10px; font-size: var(--fs-md); color: var(--muted); }
.omc-note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.omc-body { min-width: 0; }
.omc-table { margin-top: 10px; }
.omc-table summary, .omc-fold summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); }
.omc-table summary:hover, .omc-fold summary:hover { color: var(--text); }
.omc-fold ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-sm); color: var(--muted); }
.omc-fold b { color: var(--text); font-variant-numeric: tabular-nums; }

/* compare bars */
.omc-cmp__mode { margin: 0 0 10px; font-size: var(--fs-md); color: var(--muted); }
.omc-cmp__mode b { color: var(--text); font-weight: 600; }
.omc-cmp__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(5rem, max-content) minmax(8rem, 1fr) max-content; gap: 6px 12px; align-items: center; }
.omc-cmp__row { display: contents; }
.omc-cmp__label { font-size: var(--fs-md); max-width: 16rem; overflow-wrap: anywhere; }
.omc-cmp__label small { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.omc-cmp__track { position: relative; height: 1.1rem; background: color-mix(in srgb, var(--ink-muted) 8%, transparent); border-radius: 3px; }
.omc-cmp__bar { position: absolute; top: 15%; bottom: 15%; background: var(--k); border-radius: 3px; }
.omc-cmp__row:hover .omc-cmp__bar { filter: brightness(1.2); }
.omc-cmp__zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--muted); }
.omc-cmp__null { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font-size: var(--fs-2xs); color: var(--muted); border-radius: 3px; }
.omc-cmp__val { text-align: right; font-family: var(--font-mono-stack); font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.omc-cmp__d { display: inline-block; min-width: 6.5em; font-size: var(--fs-2xs); color: var(--muted); }

/* ring */
.omc-ring { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.omc-ring__fig { position: relative; width: 8.5rem; flex: none; }
.omc-ring__svg { display: block; width: 100%; height: auto; }
.omc-ring__track { fill: none; stroke: color-mix(in srgb, var(--ink-muted) 16%, transparent); stroke-width: 12; }
.omc-ring__track--null { stroke-dasharray: 3 4; stroke: color-mix(in srgb, var(--ink-muted) 50%, transparent); }
.omc-ring__arc { fill: none; stroke: var(--k); stroke-width: 12; }
.omc-ring__tick { fill: none; stroke: var(--text); stroke-width: 2.5; }
.omc-ring__c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22%; }
.omc-ring__c b { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; }
.omc-ring__c span, .omc-ring__c small { font-size: var(--fs-2xs); color: var(--muted); line-height: 1.2; }
.omc-ring__c small.omc-ring__flag { color: var(--warn); font-weight: 600; }
.omc-flag { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 10px; font-size: var(--fs-sm); }
.omc-ring .omc-legend { flex-direction: column; gap: 4px; margin: 0; }

/* waffle */
.omc-waffle__grid { display: grid; grid-template-columns: repeat(var(--cols, 10), 1fr); gap: 2px; max-width: 12rem; }
.omc-waffle__grid i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--k); }

/* one 100% bar */
.omc-stack__bar { display: flex; gap: 2px; height: 1.9rem; border-radius: 4px; overflow: hidden; }
.omc-stack__seg { flex: 0 0 0; min-width: 2px; background: var(--k); display: flex; align-items: center; padding: 0 8px; overflow: hidden; }
.omc-stack__seg span { font-size: var(--fs-2xs); font-weight: 600; color: var(--bg); white-space: nowrap; }
.omc-fold { margin-top: 6px; }
.omc-stack--compact .omc-stack__bar { height: 0.75rem; border-radius: 3px; }
.omc-stack__wrap { position: relative; }
/* A loss: the stated total (sales) is the 100% line; the band past it is the overrun. */
.omc-stack__over { position: absolute; top: -4px; bottom: -4px; right: 0; border-left: 2px solid var(--text); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bad) 55%, transparent) 0 2px, transparent 2px 6px); pointer-events: none; }
.omc-stack__scale { display: flex; margin-top: 4px; font-size: var(--fs-2xs); color: var(--muted); }
.omc-stack__scale > span { flex: none; min-width: 0; border-top: 1px solid var(--hair); padding-top: 2px; overflow-wrap: anywhere; }
.omc-stack__scale .omc-stack__scale-over { flex: 1 1 0; display: flex; justify-content: flex-end; white-space: nowrap; border-top: 2px solid var(--bad); color: var(--text); font-weight: 600; } /* a narrow band: the words run left, never wrap per digit */
/* Total not known: no shares, and a hatched "not stated" end with no width of its own to claim. */
.omc-stack--unknown .omc-stack__seg:not(.omc-stack__unknown) { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bg) 35%, transparent) 0 1.5px, transparent 1.5px 6px); }
.omc-stack__unknown { flex: 0 0 5.5rem; justify-content: center; }
.omc-stack__unknown span { color: var(--text); font-weight: 600; }
.omc-stack--compact .omc-stack__unknown { flex-basis: 1.5rem; }
.omc-stack--compact .omc-stack__unknown span { display: none; }

/* timeline */
.omc-tl__grid { display: grid; grid-template-columns: minmax(5rem, max-content) 1fr; column-gap: 12px; row-gap: 6px; align-items: center; }
.omc-tl__lab { font-size: var(--fs-md); max-width: 14rem; overflow-wrap: anywhere; }
.omc-tl__track { position: relative; height: 2.4rem; grid-column: 2; background: linear-gradient(var(--hair), var(--hair)) 0 72% / 100% 1px no-repeat; }
.omc-tl__span { position: absolute; top: 55%; bottom: 10%; background: color-mix(in srgb, var(--k) 70%, transparent); border-radius: 3px; display: flex; align-items: center; padding: 0 6px; overflow: hidden; }
.omc-tl__span span { font-size: var(--fs-2xs); color: var(--text); white-space: nowrap; }
.omc-tl--ramp { background: color-mix(in srgb, var(--k) 35%, transparent); }
.omc-tl__pt { position: absolute; top: 72%; width: 11px; height: 11px; background: var(--k); transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--bg-2); box-sizing: content-box; }
.omc-tl__ptl { position: absolute; top: 0; transform: translateX(-4px); font-size: var(--fs-2xs); color: var(--text); white-space: nowrap; }
.omc-tl__ptl--r { transform: translateX(4px); }
.omc-tl__ns { font-size: var(--fs-2xs); color: var(--muted); line-height: 2.4rem; }
.omc-tl__marks { grid-column: 2; position: relative; align-self: stretch; pointer-events: none; }
.omc-tl__mk { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px solid var(--k); }
.omc-tl__mkl { position: absolute; bottom: 100%; left: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text); white-space: nowrap; }
.omc-tl__mkl--r { left: auto; right: 4px; }
.omc-tl__axis { grid-column: 2; position: relative; height: 1.4em; border-top: 1px solid var(--hair); font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono-stack); }
.omc-tl__axis span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.omc-tl__axis span:first-child { transform: none; }
.omc-tl { padding-top: 1.2em; }

/* ranges: a low–high band per row on one money scale */
.omc-rng__rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(6rem, max-content) minmax(10rem, 1fr) max-content; gap: 8px 14px; align-items: center; }
.omc-rng__row { display: contents; }
.omc-rng__label { font-size: var(--fs-md); max-width: 16rem; overflow-wrap: anywhere; }
.omc-rng__label small { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.omc-rng__row--strong .omc-rng__label, .omc-rng__row--strong .omc-rng__val { font-weight: 700; }
.omc-rng__track { position: relative; height: 1.4rem; background: linear-gradient(var(--hair), var(--hair)) 0 50% / 100% 1px no-repeat; }
.omc-rng__band { position: absolute; top: 20%; bottom: 20%; min-width: 3px; background: color-mix(in srgb, var(--k) 75%, transparent); border-radius: 3px; }
.omc-rng__row--strong .omc-rng__band { top: 8%; bottom: 8%; }
.omc-rng__mid { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); }
.omc-rng__pt { position: absolute; top: 50%; width: 11px; height: 11px; background: var(--k); transform: translate(-50%, -50%) rotate(45deg); border: 2px solid var(--bg-2); box-sizing: content-box; }
.omc-rng__zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--muted); }
.omc-rng__null { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font-size: var(--fs-2xs); color: var(--muted); border-radius: 3px; }
.omc-rng__val { text-align: right; font-family: var(--font-mono-stack); font-size: var(--fs-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
.omc-rng__val small { display: block; font-size: var(--fs-2xs); color: var(--muted); }
.omc-rng__axis { position: relative; height: 1.4em; border-top: 1px solid var(--hair); font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono-stack); }
.omc-rng__axis span { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.omc-rng__axis span:first-child { transform: none; }
.omc-rng__axis span:last-child { transform: translateX(-100%); }
.omc-rng { container-type: inline-size; }
/* Narrow box or large text: the label goes above its band. */
@container (max-width: 36rem) {
  .omc-rng__rows { grid-template-columns: minmax(0, 1fr) max-content; }
  .omc-rng__label { grid-column: 1 / -1; max-width: none; }
  .omc-rng__axisrow > span:first-child { display: none; }
}

/* x/y: monthly bars and the running line */
.omc-xy { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: var(--h) auto; column-gap: 8px; }
.omc-xy__y { position: relative; min-width: 3.9rem; font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono-stack); text-align: right; }
.omc-xy__y span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.omc-plot { position: relative; min-width: 0; cursor: crosshair; }
.omc-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.omc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.omc-grid { stroke: var(--hair); stroke-width: 1; }
.omc-zero { stroke: var(--muted); stroke-width: 1; }
.omc-pos { fill: color-mix(in srgb, var(--good) 65%, transparent); }
.omc-neg { fill: color-mix(in srgb, var(--bad) 65%, transparent); }
.omc-line { fill: none; stroke: var(--k); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.omc-area { fill: color-mix(in srgb, var(--k) 10%, transparent); stroke: none; }
.omc-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 2px var(--bg-2); transform: translate(-50%, -50%); pointer-events: none; }
.omc-null { position: absolute; top: 0; bottom: 0; }
.omc-mk { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--k); pointer-events: none; }
.omc-mk span { position: absolute; top: 2px; left: 5px; font-size: var(--fs-2xs); font-weight: 600; color: var(--text); background: var(--bg-2); padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.omc-mk--r span { left: auto; right: 5px; }
.omc-band { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--info) 9%, transparent); border-left: 1px solid color-mix(in srgb, var(--info) 30%, transparent); border-right: 1px solid color-mix(in srgb, var(--info) 30%, transparent); pointer-events: none; }
.omc-band span { position: absolute; bottom: 2px; left: 4px; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.omc-cross { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--text); pointer-events: none; }
.omc-tip { position: absolute; top: 4px; transform: translateX(10px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 9px; pointer-events: none; z-index: 2; min-width: 9rem; }
.omc-tip--l { transform: translateX(calc(-100% - 10px)); }
.omc-tip__h { font-size: var(--fs-2xs); color: var(--muted); margin-bottom: 2px; white-space: nowrap; }
.omc-tip__r { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); white-space: nowrap; }
.omc-tip__r b { font-family: var(--font-mono-stack); font-variant-numeric: tabular-nums; }
.omc-tip__r span { color: var(--muted); font-size: var(--fs-2xs); }
.omc-xy__x { grid-column: 2; position: relative; height: 1.6em; font-size: var(--fs-2xs); color: var(--muted); font-family: var(--font-mono-stack); }
.omc-xy__x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.omc-xy + .sr-only + .sr-only + .omc-xy { margin-top: 18px; }
/* line illustrations (public/model/illustrations.js → window.OMArt) */
.om-art { display: block; width: 100%; max-width: 15rem; height: auto; color: var(--muted); }
.om-art--sm { max-width: 8rem; } .om-art--lg { max-width: 20rem; }
.om-art__a { stroke: var(--accent); }
.om-art__f { fill: var(--wash); }
@media (forced-colors: active) { .omc-cmp__bar, .omc-stack__seg, .omc-waffle__grid i, .omc-key { forced-color-adjust: none; } }

/* ── account: top bar, banners, dialog ─────────────────────────────────── */
.acct { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.acct .who { font-size: var(--fs-sm); color: var(--muted); max-width: 14rem; overflow: hidden; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* wraps between words at large text; past two lines it ends in … and the title has it all */
.navitem .badge.lock { background: var(--wash); color: var(--accent); }
.banner .row { margin-left: auto; }
.banner--good { background: color-mix(in srgb, var(--good) 10%, transparent); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 25%, transparent); }
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .7); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; width: 100%; max-width: 620px; max-height: 90vh; overflow-y: auto; }
.modal:focus { outline: none; }
.modal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.modal__h h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3xl); margin: 0; }
.modal p { color: var(--muted); font-size: var(--fs-md); margin: 0 0 10px; }
.modal form { display: flex; flex-direction: column; gap: 10px; }
.modal .field input { font-size: var(--fs-base); padding: 8px 10px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: var(--fs-md); cursor: pointer; text-decoration: underline; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.plan { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 12px 14px; background: var(--bg); }
.plan.is-paid { border-color: var(--line); }
.plan h3 { margin: 0 0 4px; font-size: var(--fs-base); }
.plan .price { font-family: var(--font-display); font-size: var(--fs-2xl); margin: 2px 0 6px; }
.plan ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: var(--fs-sm2); display: flex; flex-direction: column; gap: 3px; }
.upgrade { border: 1px dashed var(--line); background: var(--wash); }
.upgrade ul { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: var(--fs-md); }
/* Plans: Free · Plan · Operate side by side, prices from /api/model/config. */
.modal.modal--wide { max-width: 920px; }
.plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { display: flex; flex-direction: column; gap: 4px; }
.plan > .row { margin-top: auto; padding-top: 10px; }
.plan.is-mine { border-color: var(--accent); }
.plan__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan .price--none { font-family: var(--font-body); font-size: var(--fs-md); color: var(--muted); }
.modal .plan__save { color: var(--good); font-size: var(--fs-sm2); margin: 0 0 4px; }
.modal .plan__trial { margin: 0 0 4px; }
.modal .plan .hint { margin: 6px 0 0; }
.billrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.billsw { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--bg); }
.billsw__b { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); padding: 4px 14px; cursor: pointer; }
.billsw__b:hover { color: var(--text); background: var(--bg-3); }
.billsw__b[aria-pressed="true"] { color: var(--text); background: var(--bg-4); border-color: var(--line); }
.billsw__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 860px) { .plans--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* ── responsive: phone is a read surface ───────────────────────────────── */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span3, .span4 { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .cg { grid-template-columns: minmax(0, 1fr); }
  .cg__side { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 10px; gap: 6px; border-right: 0; border-bottom: 1px solid var(--hair); }
  .cg__brand { padding: 0 8px 0 0; }
  .cg__brand span, .navsec, .cg__foot { display: none; }
  .nav { flex-direction: row; }
  .navitem { white-space: nowrap; padding: 6px 9px; }
  .navitem .n { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .span2, .span3, .span4 { grid-column: 1 / -1; }
  .cg__main { padding: 14px; }
  .months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .page-h h1 { font-size: var(--fs-4xl); }
}

/* ── app shell: brand, loading, errors, navigation, search (nav group) ─── */
/* The mark is drawn from OMBrand.MARK_PATH as inline SVG (never an image). */
.mark svg { width: 74%; height: 74%; display: block; }
kbd { font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.4; padding: 0 6px; border: 1px solid var(--hair); border-bottom-width: 2px; border-radius: 4px; background: var(--bg); color: var(--text); white-space: nowrap; }

/* top bar: sticky, so the readout and the save state stay in view */
.cg__util { position: sticky; top: 0; z-index: 40; }
.kbtn kbd { margin-left: 2px; }
.readout { display: inline-flex; align-items: center; gap: 16px; padding: 4px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); color: var(--text); text-decoration: none; min-width: 0; flex-wrap: wrap; }
.readout[hidden] { display: none; }
.readout:hover, .readout[aria-current="page"] { border-color: var(--accent); }
.readout__i { display: flex; flex-direction: column; line-height: 1.2; }
.readout__i small { font-size: var(--fs-4xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.readout__i b { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.readout__i b.is-null { font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.readout.is-neg .readout__i:first-child b { color: var(--bad); }
.readout__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-right: 5px; vertical-align: 1px; }
.readout.is-flag { border-color: color-mix(in srgb, var(--warn) 60%, var(--line)); }
.cg__foot .linkbtn { font-size: var(--fs-xs); }

/* loading skeleton, in the shape of the page that is coming */
.skb { display: block; background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%); background-size: 200% 100%; border-radius: var(--r-md); animation: om-skb 1.4s ease-in-out infinite; }
@keyframes om-skb { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* nothing in the top bar works until the model has loaded, so none of it shows */
.cg__wrap:has(> main[aria-busy="true"]) .cg__util > :not(#crumb) { visibility: hidden; }
.skb--nav { height: 30px; margin: 2px 0; list-style: none; }
.skb--line { display: inline-block; width: 11rem; height: .9rem; vertical-align: middle; }
.skb--h1 { height: 2.1rem; width: 40%; margin-bottom: 10px; }
.skb--p { height: .9rem; width: 60%; margin-bottom: 18px; }
.skb--kpi { height: 6.5rem; border-radius: var(--r-lg); }
.skb--panel { height: 16rem; border-radius: var(--r-lg); }

/* boot failure: chromeless, the whole page */
body.is-broken .cg, body.is-broken .skip { display: none; }
.bootfail { min-height: 100vh; max-width: 36rem; margin: 0 auto; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.bootfail[hidden] { display: none; }
.bootfail__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: .5px; }
.bootfail__art { width: 100%; display: flex; justify-content: center; }
.bootfail h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5xl); line-height: 1.05; margin: 0; }
.bootfail h1:focus { outline: none; }
.bootfail p { margin: 0; color: var(--muted); max-width: 60ch; }
.bootfail #boot-error-safe { color: var(--text); }
.bootfail__meta { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* previous / next at the foot of every step */
.stepfoot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; margin-top: 24px; }
.stepfoot__a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--hair); border-radius: var(--r-lg); background: var(--bg-2); color: var(--text); text-decoration: none; min-width: 0; }
.stepfoot__a:hover { border-color: var(--line); background: var(--bg-3); }
.stepfoot__a--next { text-align: right; border-color: var(--line); }
.stepfoot__a--none, .stepfoot__a--none:hover { border: 0; background: none; }
.stepfoot__a small { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .5px; color: var(--muted); }
.stepfoot__a b { font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.stepfoot__a--next b { color: var(--accent); }
.stepfoot__a small kbd { margin: 0 4px; }

/* a row picked from search or a Missing inputs link, marked for a moment */
@keyframes om-flash { from { background-color: color-mix(in srgb, var(--accent) 24%, transparent); } to { background-color: transparent; } }
tr.is-flash > *, .is-flash:not(tr) { animation: om-flash 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) { tr.is-flash > *, .is-flash:not(tr) { background-color: color-mix(in srgb, var(--accent) 14%, transparent); } }

/* number boxes: 1,250,000 when not being edited (the value stays raw) */
.numfmt { position: absolute; top: anchor(top); bottom: anchor(bottom); left: anchor(left); right: anchor(right); display: flex; align-items: center; justify-content: flex-end; padding: 0 9px; overflow: hidden; white-space: nowrap; pointer-events: none; font-family: var(--font-mono); font-size: var(--fs-md); font-variant-numeric: tabular-nums; color: var(--text); }
.numfmt::before { content: attr(data-fmt); }
.in.num.has-fmt:not(:focus) { color: transparent; }
/* No spinners on number boxes: they shift the digits and a stray scroll
   or click nudges a price. Typing is the only way to change a number. */
.in.num { appearance: textfield; -moz-appearance: textfield; }
.in.num::-webkit-inner-spin-button, .in.num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.in.num.has-fmt:focus + .numfmt { display: none; }

/* dialogs: keyboard shortcuts, search */
.modal--keys { max-width: 480px; }
.keys tbody th { width: 42%; }
.keys td { color: var(--muted); }
.modal-overlay--top { align-items: flex-start; padding-top: 12vh; }
.pal { max-width: 640px; padding: 0; display: flex; flex-direction: column; max-height: 72vh; overflow: hidden; }
.pal__bar { display: flex; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--hair); }
.pal__in { font-size: var(--fs-lg); padding: 9px 12px; }
.pal__list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.pal__grp { padding: 10px 10px 4px; font-size: var(--fs-4xs); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.pal__o { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 10px; border-radius: var(--r-md); cursor: pointer; }
.pal__o[aria-selected="true"] { background: var(--wash); box-shadow: inset 2px 0 0 var(--accent); }
.pal__l { min-width: 0; overflow-wrap: anywhere; }
.pal__m { flex: none; max-width: 45%; text-align: right; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pal__none { padding: 16px 10px; color: var(--muted); }
.pal__foot { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 8px 12px; border-top: 1px solid var(--hair); font-size: var(--fs-2xs); color: var(--muted); }

/* Start */
.start-hero { align-items: center; flex-wrap: nowrap; }
.start-hero > div:first-child { max-width: 62ch; }
.start-hero p { font-size: var(--fs-base); }
.start-hero__art { flex: none; width: min(18rem, 34%); }
.start-hero__art .om-art { max-width: 100%; }
.cards--t { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.tcard { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
.tcard__art { flex: none; width: 6rem; }
.tcard__art .om-art { max-width: 100%; }
.tcard__txt { flex: 1 1 9rem; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.card .chip--accent { color: var(--accent); }
.blanks { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.blanks li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filebox { display: flex; align-items: flex-start; gap: 14px; }
.filebox__art { flex: none; width: 6rem; }
.start-confirm { margin-top: 12px; }

/* step picker for narrow screens */
.stepsel { display: none; }
@media (max-width: 820px) {
  .nav { display: none; }
  .cg__side { overflow: visible; }
  .stepsel { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
  .stepsel label { font-size: var(--fs-sm); font-weight: 600; }
  .stepsel select { flex: 1; min-width: 0; font-size: var(--fs-base); padding: 7px 8px; }
  .kbtn kbd, .stepfoot__a small kbd { display: none; }
  .start-hero { flex-wrap: wrap; }
  .start-hero__art { width: min(14rem, 60%); }
}
@media (max-width: 560px) {
  .cg__brand b { display: none; }
  .tcard__art, .filebox__art { width: 4.5rem; }
}

/* ── v2 shell: Demo / Live, business profile, actuals (nav group) ─────── */
/* The mode switch: two buttons, one pressed. Pressed = filled, not just a
   colour; the note shows on hover and focus, and Escape hides it. */
.modesw { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--hair); border-radius: var(--r-pill); background: var(--bg); }
.modesw__b { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); padding: 3px 11px; cursor: pointer; white-space: nowrap; }
.modesw__b:hover { color: var(--text); background: var(--bg-3); }
.modesw__b[aria-pressed="true"] { color: var(--text); background: var(--bg-4); border-color: var(--line); }
.modesw__b[data-setmode="live"][aria-pressed="true"] { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 14%, transparent); }
.modesw__lock { font-weight: 500; color: var(--muted); }
.modesw__lock[hidden] { display: none; }
.modesw__tip { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: min(22rem, calc(100vw - 24px)); transform: translateX(var(--shift, 0)); padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); color: var(--text); font-size: var(--fs-sm); line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); display: none; }
.modesw:hover .modesw__tip, .modesw:has(:focus-visible) .modesw__tip { display: block; }
.modesw.is-quiet .modesw__tip { display: none; }
/* the mode chip in the top bar's crumb: on every step */
.chip--mode { color: var(--muted); background: rgba(240, 237, 230, .06); margin-left: 4px; }
.chip--mode.is-live { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.chip--mode .d { background: transparent; border: 1px solid currentColor; }
.chip--mode.is-live .d { background: currentColor; }
.modal--mode { max-width: 540px; }
.modeperks { margin: 0 0 12px; padding-left: 18px; color: var(--muted); font-size: var(--fs-md); display: flex; flex-direction: column; gap: 3px; }

/* Start: Demo or Live, and the plan journey */
.modecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 10px; }
.modecard { border: 1px solid var(--hair); border-radius: var(--r-md); background: var(--bg); padding: 12px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.modecard.is-on { border-color: var(--accent); }
.modecard__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.modecard h3 { margin: 0; font-size: var(--fs-base); }
.modecard p { margin: 0; }
.journey { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: jn; }
.journey__s { position: relative; counter-increment: jn; padding: 0 0 12px 2.2rem; min-width: 0; }
.journey__s::before { content: counter(jn); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); background: var(--bg); }
.journey__s:not(:last-child)::after { content: ""; position: absolute; left: .75rem; top: 1.6rem; bottom: 2px; border-left: 1px solid var(--hair); }
.journey__s.is-on::before { border-color: var(--accent); color: var(--accent); }
.journey__h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.journey__h b { font-size: var(--fs-base); }
.journey__p { display: block; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .4px; color: var(--muted); margin: 2px 0 4px; }
.journey__s p { margin: 0; }

/* Business profile: what each output still needs */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 14px; margin-bottom: 14px; }
.pcard { background: var(--bg-2); border: 1px solid var(--hair); border-left: 3px solid var(--warn); border-radius: var(--r-lg); padding: 13px 15px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pcard.is-ready { border-left-color: var(--good); }
.pcard__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pcard__t { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.pcard p { margin: 0; color: var(--muted); font-size: var(--fs-md); }
.pcard__miss { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-md); }
.pcard__miss a { overflow-wrap: anywhere; }
.pcard .pcard__go { margin-top: auto; font-size: var(--fs-sm); }
.pcard .badge.lock { font-family: var(--font-mono); font-size: var(--fs-4xs); border-radius: var(--r-pill); padding: 1px 7px; }
.pf-err { color: var(--bad); }
.pf-owners td:first-child { width: 50%; }
.pf-owners tfoot td, .pf-owners tfoot th { border-bottom: 0; }

/* Actuals */
.act-sub { margin: 8px 0 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.act-sub:first-child { margin-top: 0; }
.act-pick select.in { width: auto; min-width: 9rem; }
.in--month { color-scheme: dark; width: 100%; min-width: 10.5rem; max-width: 12rem; }
.act-entry td.nm { min-width: 6rem; }
.act-entry .act-dup { display: inline-flex; margin-top: 4px; white-space: normal; }
.act-entry td.act-profit { font-weight: 600; }
/* Nine money columns (interest and depreciation are the two parts of Other):
   narrow enough to sit in one row at desktop widths; the host scrolls, never
   the page, in the band just above where the table stacks. */
.act-entry .in.w-md { width: 100%; min-width: 4.5rem; max-width: 6.25rem; }
.act-entry .in--month { min-width: 9rem; max-width: 9rem; }
.act-entry td, .act-entry th { padding-left: 4px; padding-right: 4px; }
#act-entry .stack-host { overflow-x: auto; }