/* Spectre Design System — generated by tokens.py. Do not edit by hand. */
:root {
  --ground: #f7f6f3; /* oklch(0.972 0.004 85) */
  --ground-2: #efeeeb; /* oklch(0.948 0.004 85) */
  --panel: #fdfcfb; /* oklch(0.992 0.002 85) */
  --line: #dad9d6; /* oklch(0.885 0.004 85) */
  --line-control: #7d7c79; /* oklch(0.585 0.004 85) */
  --ink: #1d1c19; /* oklch(0.225 0.005 85) */
  --ink-hover: #363532; /* oklch(0.33 0.005 85) */
  --on-ink: #f7f6f3; /* oklch(0.972 0.004 85) */
  --text-2: #605f5c; /* oklch(0.485 0.004 85) */
  --text-3: #898785; /* oklch(0.625 0.004 85) */
  --red: #bd3e37; /* oklch(0.545 0.164 27) */
  --ok: #436449; /* oklch(0.47 0.058 150) */
  --ok-wash: #e7f4e9; /* oklch(0.955 0.02 150) */
  --warn: #755f41; /* oklch(0.5 0.053 75) */
  --warn-wash: #faeede; /* oklch(0.955 0.025 75) */
  --danger: #9f413a; /* oklch(0.5 0.126 27) */
  --danger-wash: #fcecea; /* oklch(0.955 0.018 27) */
  --tint: #ddb68a; /* oklch(0.8 0.073 70) */
  --tint-2: #c8997a; /* oklch(0.72 0.071 55) */
  --shade: #171614; /* oklch(0.2 0.004 85) */
  --font-ui: Inter, "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 20px; --fs-5: 24px; --fs-6: 30px; --fs-7: 36px; --fs-8: 48px;
  --lh-body: 1.6; --lh-head: 1.25; --lh-data: 1.1;
  --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;
  --gutter: clamp(16px, 4vw, 64px);
  --frame-text: 720px; --frame-picture: 1120px; --frame-instrument: 1440px;
  --bp-1: 600px; --bp-2: 900px; --bp-3: 1280px;
  --r-control: 2px; --r-panel: 4px;
  --hit: 44px; --hit-handle: 48px;
  --t-state: 100ms; --t-move: 180ms; --t-screen: 260ms; --ease: cubic-bezier(.2, 0, 0, 1);
  --hairline: 1px solid var(--line); --control-line: 1px solid var(--line-control);
  --focus: 2px solid var(--red);
  --shadow-float: 0 1px 2px oklch(from var(--shade) l c h / .10), 0 8px 24px oklch(from var(--shade) l c h / .08);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ground: #131311; /* oklch(0.185 0.004 85) */
  --ground-2: #0d0c0a; /* oklch(0.155 0.004 85) */
  --panel: #1d1c1a; /* oklch(0.225 0.004 85) */
  --line: #32312f; /* oklch(0.315 0.004 85) */
  --line-control: #757472; /* oklch(0.56 0.004 85) */
  --ink: #ebe9e6; /* oklch(0.935 0.004 85) */
  --ink-hover: #c8c7c4; /* oklch(0.83 0.004 85) */
  --on-ink: #131311; /* oklch(0.185 0.004 85) */
  --text-2: #a9a7a5; /* oklch(0.73 0.004 85) */
  --text-3: #777673; /* oklch(0.565 0.004 85) */
  --red: #da675d; /* oklch(0.65 0.146 27) */
  --ok: #8bc195; /* oklch(0.76 0.084 150) */
  --ok-wash: #19251b; /* oklch(0.25 0.025 150) */
  --warn: #dbb787; /* oklch(0.8 0.076 75) */
  --warn-wash: #292014; /* oklch(0.25 0.025 75) */
  --danger: #d1928a; /* oklch(0.72 0.078 27) */
  --danger-wash: #2d1d1b; /* oklch(0.25 0.025 27) */
  --tint: #b79875; /* oklch(0.7 0.061 70) */
  --tint-2: #a27d65; /* oklch(0.62 0.058 55) */
  --shade: #010000; /* oklch(0.05 0.004 85) */
} }
:root[data-theme="dark"] {
  --ground: #131311; /* oklch(0.185 0.004 85) */
  --ground-2: #0d0c0a; /* oklch(0.155 0.004 85) */
  --panel: #1d1c1a; /* oklch(0.225 0.004 85) */
  --line: #32312f; /* oklch(0.315 0.004 85) */
  --line-control: #757472; /* oklch(0.56 0.004 85) */
  --ink: #ebe9e6; /* oklch(0.935 0.004 85) */
  --ink-hover: #c8c7c4; /* oklch(0.83 0.004 85) */
  --on-ink: #131311; /* oklch(0.185 0.004 85) */
  --text-2: #a9a7a5; /* oklch(0.73 0.004 85) */
  --text-3: #777673; /* oklch(0.565 0.004 85) */
  --red: #da675d; /* oklch(0.65 0.146 27) */
  --ok: #8bc195; /* oklch(0.76 0.084 150) */
  --ok-wash: #19251b; /* oklch(0.25 0.025 150) */
  --warn: #dbb787; /* oklch(0.8 0.076 75) */
  --warn-wash: #292014; /* oklch(0.25 0.025 75) */
  --danger: #d1928a; /* oklch(0.72 0.078 27) */
  --danger-wash: #2d1d1b; /* oklch(0.25 0.025 27) */
  --tint: #b79875; /* oklch(0.7 0.061 70) */
  --tint-2: #a27d65; /* oklch(0.62 0.058 55) */
  --shade: #010000; /* oklch(0.05 0.004 85) */
}

html { color-scheme: light dark; font-family: var(--font-ui); font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--ground); color: var(--ink); font-size: var(--fs-3); line-height: var(--lh-body); }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { :root { --t-state: 0ms; --t-move: 0ms; --t-screen: 0ms; } }

/* Spectre Design System — the instrument kit: every signed-in screen (dashboards,
   admin, tools). Copy this file verbatim next to tokens.css and load it after it;
   put your own screens in a third file, written on the tokens only, and check all
   three with lint.py. Do not edit the copy: change the kit in the skill.

   What is here: base type, the frame (1440, gutter), the top bar and the room
   strip, type roles, controls (buttons, fields, tabs), panels, readouts, messages,
   tags, tables, and the instruments — charts (stretched marks, HTML labels), the
   week lines, the range instrument, bars in rows, the mix bar, sparklines.
   Class names are the kit's API; the markup contract is in SKILL.md, "Instrument kit".
   Positions over a chart are integers in hundredths of a per cent: style="--x:4750". */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { font-optical-sizing: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--fs-2); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); line-height: var(--lh-head); font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-4); }
h3 { font-size: var(--fs-3); font-weight: 500; }
h4 { font-size: var(--fs-2); font-weight: 500; }
p { margin: 0 0 var(--s-3); }
b, strong { font-weight: 500; }
small { font-size: var(--fs-1); }
ul, ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
li { margin-bottom: var(--s-1); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
code, kbd { font: inherit; background: var(--ground-2); padding: 0 var(--s-1); border-radius: var(--r-control); }
img, svg, embed { max-width: 100%; }
abbr { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--on-ink); }
* { scrollbar-color: var(--line-control) transparent; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
[hidden] { display: none; }
/* ---------------------------------------------------------------- frame */
.page { min-height: 100vh; }
/* The instrument frame. The shell puts every page inside one .frame; the two
   bars run full width and frame their own contents. Nothing inside frames again. */
.frame, .page > .wrap, .nav-inner, .room-inner { width: 100%; max-width: var(--frame-instrument); margin-inline: auto; padding-inline: var(--gutter); }
.frame .wrap { max-width: none; padding-inline: 0; }
.frame > .panel:first-of-type, .frame > .card:first-of-type { margin-top: var(--s-6); }
.wrap { padding-block: var(--s-6) var(--s-8); }
.wrap.flush-top { padding-block: 0 var(--s-6); }
.wrap.flush-bottom { padding-bottom: 0; }
/* the top bar: wordmark, rooms, status, three quiet controls */
.nav { position: relative; border-bottom: 1px solid var(--line); background: var(--ground); }
.nav-inner { display: flex; align-items: stretch; gap: var(--s-5); min-height: 56px; }
.nav-id { display: flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.mark { color: var(--ink); font-size: var(--fs-2); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.org { color: var(--text-2); }
.nav-links { display: flex; align-items: stretch; gap: var(--s-5); }
.nav-links a, .nav-menu-links a { display: flex; align-items: center; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-state) var(--ease); }
.nav-links a:hover, .nav-menu-links a:hover { color: var(--ink); }
.nav-links a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.nav .spacer { flex: 1; }
.nav-status { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-1); color: var(--text-2); white-space: nowrap; }
.dot { flex: none; width: 6px; height: 6px; border-radius: 50%; }
.dot.live { background: var(--red); }
.dot.off { border: 1px solid var(--line-control); }
.nav .btn { align-self: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; min-width: 44px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-control); background: transparent; color: var(--text-2); font-size: var(--fs-2); text-decoration: none; cursor: pointer; transition: color var(--t-state) var(--ease); }
.btn:hover { color: var(--ink); }
.half { position: relative; display: block; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; overflow: hidden; }
.half::before { content: ""; position: absolute; inset: 0 50% 0 0; background: currentColor; }
.nav-menu { display: none; }
.nav-many .nav-links { display: none; }
.nav-many .nav-menu { display: block; }
.nav-menu summary { display: flex; align-items: center; min-height: 56px; color: var(--ink); }
.nav-menu-links { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; padding: var(--s-2) var(--gutter) var(--s-4); background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-float); }
.nav-menu-links a { min-height: 44px; border-bottom: 1px solid var(--line); }
.nav-menu-links a.on { color: var(--ink); font-weight: 500; }
.nav-menu:not([open]) .nav-menu-links { display: none; }
/* the room strip: where you are inside a room */
.room { border-bottom: 1px solid var(--line); }
.room-inner { display: flex; gap: var(--s-5); overflow-x: auto; scrollbar-width: none; }
.room a { display: flex; align-items: center; min-height: 48px; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-state) var(--ease); }
.room a:hover { color: var(--ink); }
.room a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--red); }
/* ---------------------------------------------------------------- type roles */
.lead, h1.lead { margin: 0 0 var(--s-2); }
.sublead { font-size: var(--fs-3); color: var(--text-2); margin: 0 0 var(--s-6); max-width: 70ch; }
.hint, .sub, .muted, .help, .note { color: var(--text-2); }
.section-lead { color: var(--text-2); max-width: 70ch; }
.hint, .note, .help { max-width: 70ch; }
.tiny, .k-target, .src { font-size: var(--fs-1); color: var(--text-3); }
.eyebrow { display: block; color: var(--text-2); margin: 0 0 var(--s-2); }
.empty, .nodata, .empty-note { color: var(--text-3); padding: var(--s-4) 0; margin: 0; }
.money { white-space: nowrap; }
.cur { color: var(--text-3); }
.up, .down, .delta { color: var(--text-2); }
section + section { margin-top: var(--s-7); }
.wrap > h2, .frame > h2, .frame > section:not(.panel):not(.card) > h2 { margin: var(--s-7) 0 var(--s-3); }
/* ---------------------------------------------------------------- controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-5); border: 1px solid var(--ink); border-radius: var(--r-control); background: transparent; color: var(--ink); font-size: var(--fs-2); font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t-state) var(--ease), color var(--t-state) var(--ease); }
.button:hover { background: var(--ground-2); }
.button:active, .btn:active { transform: translateY(1px); }
.button.primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.button.primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.button.ghost, .button.mini, .linkbtn, .button.quiet { min-height: 44px; padding: 0; border-color: transparent; background: transparent; color: var(--ink); font-weight: 400; text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.button.ghost:hover, .button.mini:hover, .linkbtn:hover, .button.quiet:hover { background: transparent; text-decoration-color: var(--ink); }
.button.secondary { border-color: var(--ink); }
.button.danger, .button.destructive { color: var(--danger); border-color: var(--danger); }
.button:disabled, .button[aria-disabled="true"] { color: var(--text-3); border-color: var(--line); background: transparent; cursor: not-allowed; }
.linkbtn { border: 0; cursor: pointer; }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.actions-end { justify-content: flex-end; }
.field { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-4); max-width: 520px; }
.field > label, .field > span, .field > b { color: var(--text-2); font-weight: 400; }
input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="range"])),
select, textarea { width: 100%; max-width: 100%; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-control); border-radius: var(--r-control); background: var(--panel); color: var(--ink); font-size: var(--fs-2); transition: border-color var(--t-state) var(--ease); }
textarea { padding: var(--s-3); min-height: 96px; resize: vertical; line-height: var(--lh-body); }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
/* A field in use is edged in ink, not red: a red ring round an empty field reads as an error. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--ink); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:disabled, select:disabled, textarea:disabled { color: var(--text-3); border-color: var(--line); background: var(--ground-2); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
input[type="file"] { max-width: 100%; color: var(--text-2); }
input[type="file"]::file-selector-button { min-height: 44px; margin-right: var(--s-3); padding: 0 var(--s-4); border: 1px solid var(--ink); border-radius: var(--r-control); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
input.mini { width: 120px; }
input.tiny { max-width: 96px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s-5); }
.grid-form .field { max-width: none; }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-1) 0; }
.inline-form input { width: auto; }
.check-stack { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.check-stack label, label.check { display: flex; align-items: center; gap: var(--s-2); }
.switch { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel); }
.switch input { margin-top: 2px; }
.switch .txt b { display: block; margin-bottom: var(--s-1); }
/* ---------------------------------------------------------------- containers */
.panel, .card { min-width: 0; margin: 0 0 var(--s-5); padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.panel > h2, .card > h2 { margin: 0 0 var(--s-2); }
.card > h3, .panel > h3 { margin: 0 0 var(--s-1); }
.panel.soft, .card.soft { background: var(--ground-2); border-color: transparent; }
.panel-top { margin-bottom: 0; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; margin-bottom: var(--s-5); }
.grid-2 > .card, .grid-2 > .panel { margin: 0; }
.card.wide { grid-column: 1 / -1; }
.panel > .hint, .card > .sub, .card > .hint { margin-bottom: var(--s-4); }
/* readouts: label, value, what it is against */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: var(--s-5) var(--s-6); margin: var(--s-5) 0 var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.kpi { display: flex; flex-direction: column; min-width: 0; }
.k-label, .kpi .k { color: var(--text-2); }
.k-value, .kpi .v { margin: var(--s-2) 0; color: var(--ink); font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; line-height: var(--lh-data); white-space: nowrap; }
.k-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); font-size: var(--fs-1); color: var(--text-2); }
/* messages: a different object from a panel — a wash, no border, a word for the kind */
.banner { position: relative; display: flex; gap: var(--s-4); align-items: flex-start; margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-7) var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); }
.banner .kind { flex: none; min-width: 80px; color: var(--text-2); }
.banner b { display: block; font-weight: 500; }
.banner.warn { background: var(--warn-wash); }
.banner.warn .kind { color: var(--warn); }
.banner.bad { background: var(--danger-wash); }
.banner.bad .kind { color: var(--danger); }
.banner.ok { background: var(--ok-wash); }
.banner.ok .kind { color: var(--ok); }
.banner .x { position: absolute; top: 0; right: 0; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--text-2); font-size: var(--fs-4); line-height: 1; cursor: pointer; }
.banner .x:hover { color: var(--ink); }
.banner-restore { border: 0; background: transparent; padding: 0; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: var(--s-5); z-index: 50; display: none; max-width: 90vw; padding: var(--s-3) var(--s-4); transform: translateX(-50%); background: var(--ink); color: var(--on-ink); border-radius: var(--r-panel); }
/* tags: a word in a quiet box; coloured only when it is news */
.pill, .tag, .state { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 20px; padding: 0 var(--s-2); border-radius: var(--r-control); background: var(--ground-2); color: var(--text-2); font-size: var(--fs-1); line-height: 1.5; white-space: nowrap; }
.pill.bad, .tag.bad, .pill.critical, .tag.critical, .state.failed, .state.blocked, .tag.failed { background: var(--danger-wash); color: var(--danger); }
.pill.warn, .tag.warn, .pill.serious, .tag.serious, .state.wait, .state.waiting { background: var(--warn-wash); color: var(--warn); }
.pill.ok, .tag.ok, .pill.good, .tag.good, .state.done, .tag.proven, .pill.proven { background: var(--ok-wash); color: var(--ok); }
.pill .ic, .tag .ic { font-style: normal; }
.empty-state { padding: var(--s-8) 0; text-align: center; color: var(--text-2); }
.empty-state .big, .big { font-size: var(--fs-4); color: var(--ink); margin-bottom: var(--s-2); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); margin: 0; }
.checklist li:last-child { border-bottom: 0; }
.checklist .mark { flex: none; width: 16px; }
.checklist .what { flex: 1; }
.checklist .why { display: block; margin-top: var(--s-1); }
.steps { margin: var(--s-3) 0 0; padding-left: var(--s-5); }
/* ---------------------------------------------------------------- tables */
.table-wrap, .scroll, .chart-scroll { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); line-height: 1.45; }
th { padding: var(--s-2) var(--s-3); background: var(--ground-2); color: var(--text-2); font-size: var(--fs-1); font-weight: 400; text-align: left; vertical-align: bottom; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: baseline; }
td.num, th.num, td.n, th.n { text-align: right; white-space: nowrap; }
tfoot td, tr.total td, tr.sum td { border-top: 1px solid var(--ink); border-bottom: 0; }
td.note { color: var(--text-2); }
/* ---------------------------------------------------------------- instruments */
/* Charts: marks in a stretched SVG with non-scaling strokes, labels in HTML, so
   a chart is crisp at 360 px and at 1440 px and its figures stay 12 px. */
.chart { position: relative; margin: var(--s-4) 0 0; min-width: 0; }
.chart .plot { position: relative; height: 200px; }
.chart.short .plot { height: 120px; }
.chart.tall .plot { height: 240px; }
.chart .plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart svg * { vector-effect: non-scaling-stroke; }
.chart .grid { fill: none; stroke: var(--line); stroke-width: 1px; }
.chart .axis { fill: none; stroke: var(--line-control); stroke-width: 1px; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.ma { stroke: var(--text-3); stroke-width: 1px; stroke-dasharray: 4 4; }
.chart .area { fill: var(--ink); fill-opacity: 0.06; stroke: none; }
.chart svg .bar { fill: var(--text-3); }
.chart svg .bar.emphasis, .chart svg .bar.now, .chart svg .bar.positive { fill: var(--ink); }
.chart svg .bar.forecast { fill: none; stroke: var(--text-3); stroke-width: 1px; stroke-dasharray: 3 3; }
.chart svg .bar.negative { fill: var(--panel); stroke: var(--ink); stroke-width: 1px; }
.chart .dot { fill: none; stroke: var(--ink); stroke-width: 5px; stroke-linecap: round; }
.chart .dot.here { stroke: var(--red); stroke-width: 7px; }
.chart .dot.forecast { stroke: var(--text-3); }
.chart .hit { fill: none; stroke: transparent; stroke-width: 20px; stroke-linecap: round; pointer-events: stroke; }
.chart .templine { fill: none; stroke: var(--ink); stroke-width: 1px; }
.chart svg .precip { fill: var(--text-3); }
.chart .zero { fill: none; stroke: var(--ink); stroke-width: 1px; }
.chart .label { position: absolute; font-size: var(--fs-1); line-height: 1; white-space: nowrap; pointer-events: none; }
.chart .label.y { left: 0; top: calc(var(--y, 0) * .01%); color: var(--text-3); transform: translateY(calc(-100% - 4px)); }
.chart .label.y.below { transform: translateY(4px); }
.chart .label.end { right: 0; top: calc(var(--y, 0) * .01%); color: var(--ink); font-weight: 500; transform: translateY(calc(-100% - 10px)); }
.chart .label.band { left: 0; color: var(--text-3); }
.chart .xaxis { position: relative; height: 16px; margin-top: var(--s-2); }
.chart .xaxis .label { top: 0; left: calc(var(--x, 0) * .01%); color: var(--text-3); transform: translateX(-50%); }
.chart .xaxis .label.first { transform: none; }
.chart .xaxis .label.last { transform: translateX(-100%); }
.chart .strip { position: relative; height: 72px; margin-top: var(--s-4); border-top: 1px solid var(--line); }
.chart .strip > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-key, .legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-1); color: var(--text-2); }
.chart-key span, .legend li { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.legend b { font-weight: 400; color: var(--ink); }
.key, .swatch { display: inline-block; flex: none; width: 10px; height: 10px; }
.swatch { height: 2px; width: 16px; background: var(--ink); }
.swatch.ma { background: var(--text-3); }
.swatch.rev { width: 10px; height: 10px; background: var(--text-3); }
.swatch.fc { width: 10px; height: 10px; border: 1px dashed var(--text-3); }
.swatch.rain { width: 4px; height: 10px; background: var(--text-3); }
.series-1 { background: var(--ink); }
.series-2 { background: var(--text-2); }
.series-3 { background: var(--text-3); }
.series-4 { background: var(--line-control); }
.series-5 { background: var(--line); }
.series-6 { background: var(--ground-2); }
/* week lines: one line per weekday over its hours, every day on one scale (the
   strongest hour rises 0.85 of a row, so days never cross); each day's strongest
   hour an ink dot, the week's strongest red. The week is never a grid of dots. */
.ridge { --pitch: 34px; }
.ridge .plot { height: calc(var(--rows, 7) * var(--pitch)); }
.ridge .dot.peak { stroke: var(--red); stroke-width: 7px; }
.chart-note { margin-top: var(--s-3); color: var(--text-2); font-size: var(--fs-1); }
.ridge .label.row { left: 0; top: calc(var(--y, 0) * .01%); color: var(--text-3); transform: translateY(calc(-100% - 3px)); }
.ridge .plot > svg { left: 40px; width: calc(100% - 40px); }
.ridge .xaxis { margin-left: 40px; }
.seq-0 { background: var(--ground-2); }
.seq-1 { background: color-mix(in oklch, var(--ink) 10%, var(--panel)); }
.seq-2 { background: color-mix(in oklch, var(--ink) 22%, var(--panel)); }
.seq-3 { background: color-mix(in oklch, var(--ink) 34%, var(--panel)); }
.seq-4 { background: color-mix(in oklch, var(--ink) 48%, var(--panel)); }
.seq-5 { background: color-mix(in oklch, var(--ink) 62%, var(--panel)); }
.seq-6 { background: color-mix(in oklch, var(--ink) 80%, var(--panel)); }
.seq-7 { background: var(--ink); }
/* small multiples and bars in rows */
svg.spark { display: inline-block; width: 104px; height: 28px; vertical-align: middle; overflow: visible; }
svg.spark .line { fill: none; stroke: var(--text-2); stroke-width: 1px; }
svg.spark .tip { fill: var(--ink); }
.hbar { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-1) 0; font-size: var(--fs-1); }
.hbar .t { color: var(--text-2); }
.hbar .track { height: 4px; background: var(--line); }
.hbar .b { display: block; height: 4px; min-width: 2px; background: var(--ink); }
.hbar .v { text-align: right; color: var(--text-2); white-space: nowrap; }
.range { position: relative; height: 24px; margin: var(--s-3) 0 var(--s-1); border-bottom: 1px solid var(--line); }
.range .span { position: absolute; bottom: 0; left: calc(var(--x, 0) * .01%); width: calc(var(--w, 0) * .01%); height: 4px; background: var(--text-3); }
.range .needle { position: absolute; bottom: 0; left: calc(var(--x, 0) * .01%); width: 2px; height: 16px; margin-left: -1px; background: var(--ink); }
.range-ends { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--text-3); }
/* ---------------------------------------------------------------- widths */
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 599px) {
  body { font-size: var(--fs-2); }
  .nav-inner { flex-wrap: wrap; gap: 0 var(--s-3); }
  .nav-id .org { display: none; }
  .nav .spacer { display: none; }
  .nav-status { order: 10; flex-basis: 100%; min-height: 32px; white-space: normal; }
  .nav .btn { margin-left: auto; }
  .nav .btn ~ .btn { margin-left: 0; }
  .wrap { padding-block: var(--s-5) var(--s-7); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .chart .plot { height: 160px; }
  .ridge { --pitch: 26px; }
  .actions-row .button:not(.ghost):not(.mini) { flex: 1 1 auto; }
  .banner { flex-direction: column; gap: var(--s-1); }
  table.grid.stack, table.grid.stack tbody, table.grid.stack tr, table.grid.stack td { display: block; width: 100%; }
  table.grid.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.grid.stack tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  table.grid.stack td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-width: 0; padding: var(--s-1) 0; border: 0; text-align: right; overflow-wrap: anywhere; }
  table.grid.stack td::before { content: attr(data-label); flex: 0 1 auto; min-width: 0; color: var(--text-2); text-align: left; white-space: nowrap; }
  table.grid.stack td:first-child { display: block; padding-bottom: var(--s-2); text-align: left; font-weight: 500; }
  table.grid.stack td:first-child::before, table.grid.stack td.setcell::before { content: none; }
  table.grid.stack td.setcell { display: block; text-align: left; padding-top: var(--s-2); }
  table.grid.stack td.setcell .inline-form input { flex: 1 1 auto; width: auto; min-width: 0; }
  table.grid.stack td.setcell input.mini { min-height: 44px; }
  table.grid.stack td.setcell .button.mini { min-height: 44px; min-width: 44px; padding: 0 var(--s-3); }
}
.doc .head .org { color: var(--text-2); font-size: 9pt; }
/* ---------------------------------------------------------------- print */
@media print {
  .nav, .room, .banner .x, .banner-restore { display: none; }
  .frame, .wrap { max-width: none; padding: 0; }
}

.why, .when, .meta { color: var(--text-2); }
/* Yamin dashboard — the one stylesheet.
   Built on spectre-tokens.css (vendored verbatim from the spectre-design-system
   skill; never edited here). Rules for this file, enforced by
   tests/test_one_stylesheet.py through spectre_lint:
   - colours only as var(--token) from spectre-tokens.css; no hex, rgb, named colours
   - no !important, no gradients, no blur, no glass, no shadows except --shadow-float
   - one family (var(--font-ui)); weights 300/400/500; sizes 12 14 16 20 24 30 36 48
   - no uppercase and no tracking, except .wordmark
   - radius 0, 2 (controls), 4 (panels) or a circle
   - no page emits its own <style>; every page is styled here, by component */

/* Yamin dashboard — this app's screens, on the instrument kit.
   Loaded after spectre-tokens.css and spectre-instrument.css (both vendored from
   the spectre-design-system skill, never edited here). Tokens only; the rules are
   checked by tests/test_one_stylesheet.py with the skill's lint.py. */

@font-face { font-family: Inter; src: url("/static/spectre-inter.woff2") format("woff2");
  font-weight: 300 500; font-style: normal; font-display: swap; }
/* which shop — a toolbar row above the page */
.dashboard-search { padding-block: var(--s-4); max-width: 48rem; }
.dashboard-search label { display: block; margin-bottom: var(--s-2); color: var(--text-2); font-size: var(--fs-1); }
.dashboard-search-controls { display: flex; gap: var(--s-2); align-items: center; }
.dashboard-search-controls input { min-width: 0; flex: 1; }
.search-results { padding: 0; list-style: none; }
.search-results > li { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.search-results h2 { margin-bottom: var(--s-3); }
.search-results p { max-width: 72ch; overflow-wrap: anywhere; }
.search-results mark { color: var(--ink); background: var(--ground-2); font-weight: 500; }
.frame :is(.alpha, .day-root, .day-wrap, .scope-switch) { max-width: none; padding-inline: 0; }
.scope-switch { display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); }
.scope-switch form { display: flex; align-items: center; gap: var(--s-2); }
.scope-switch label { color: var(--text-2); }
.scope-switch select { width: auto; min-width: 200px; }
.scope-set summary { display: flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.scope-set[open] { flex-basis: 100%; }
.scope-set form { display: block; padding: var(--s-3) 0; }
.scope-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.scope-check { display: flex; align-items: center; gap: var(--s-2); }
.badnum, .critical-text { color: var(--danger); }
.goodnum, .good { color: inherit; }
.exc { color: var(--danger); background: var(--danger-wash); padding: 0 var(--s-1); border-radius: var(--r-control); }
.stamp, .mono-stamp, .focus-stamp { color: var(--text-2); font-size: var(--fs-1); }
.scope-switch .button.mini, td .button.mini { padding: 0 var(--s-2); }
.actions-spaced, .connect-adopt, .proposal-actions { margin-top: var(--s-4); }
input.num, .amt, .money-input { text-align: right; }
.otp-block { margin: var(--s-2) 0 var(--s-4); }
.otp-block > summary, details.more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.otp-block[open] > summary { color: var(--ink); }
/* tabs and filters: the same silhouette everywhere */
.fin-nav, .price-filters { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: 0 0 var(--s-5); border-bottom: 1px solid var(--line); }
.fin-chip, .price-filters a { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.fin-chip:hover, .price-filters a:hover { color: var(--ink); }
.fin-chip.on, .price-filters a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--red); }
.price-filters a b { font-weight: 400; color: var(--text-3); }
.price-pages { margin-top: var(--s-4); }
.price-pages .price-filters { border-bottom: 0; }
.joblog { max-height: 320px; overflow: auto; padding: var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); white-space: pre-wrap; font-size: var(--fs-1); color: var(--text-2); }
.joblog-long { max-height: 600px; }
.preview { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); }
.preview .arrow { margin: 0 var(--s-2); color: var(--text-3); }
.act { margin: 0 0 var(--s-3); padding: var(--s-4) var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.act h3 { margin: 0 0 var(--s-2); }
.act form { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; }
.act .field { margin-bottom: 0; max-width: 220px; }
tr.sub td:first-child { padding-left: var(--s-6); }
td.bar { width: 26%; min-width: 96px; }
td.bar span { display: block; height: 4px; background: var(--ink); }
td.daydate { white-space: nowrap; }
table.pnl td { padding-inline: 0 var(--s-3); }
table.pnl td.num { width: 1%; }
table.entry td { padding: var(--s-1) var(--s-2); }
table.entry input { min-height: 36px; padding: 0 var(--s-2); }
.rcp { margin: var(--s-3) 0; }
.rcp td.n { width: 104px; }
.rcp input { width: 88px; min-height: 36px; text-align: right; }
.deltas { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-3) 0; }
.deltas .d { display: flex; flex-direction: column; }
.proof { margin: var(--s-2) 0; padding: var(--s-2) var(--s-3); background: var(--ground-2); border-radius: var(--r-panel); color: var(--text-2); }
/* the mix: one bar split by share, 2 px gaps, words underneath */
.mixbar, .mix-bar { display: flex; gap: 2px; height: 8px; margin: var(--s-3) 0 var(--s-2); }
.mix-bar { height: 4px; margin: 0 0 var(--s-4); }
.mixbar > span, .mix-seg { display: block; height: 100%; min-width: 2px; }
.week { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5) var(--s-7); align-items: start; }
.facts { display: grid; gap: var(--s-4); margin: var(--s-5) 0 0; }
.facts div { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.facts dt { color: var(--text-2); display: flex; align-items: center; gap: var(--s-2); }
.facts dd { margin: var(--s-1) 0 0; font-size: var(--fs-4); font-weight: 300; }
.key-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
div.spark { display: flex; align-items: flex-end; gap: 2px; height: 36px; margin: var(--s-2) 0 var(--s-1); }
div.spark i { flex: 1; background: var(--line-control); }
div.spark i:last-child { background: var(--ink); }
.hour-chart { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.hour-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 72px; align-items: center; gap: var(--s-3); font-size: var(--fs-1); }
.hour-lbl { color: var(--text-3); }
.hour-track { position: relative; height: 12px; }
.hour-bar { position: absolute; left: 0; top: 4px; height: 4px; background: var(--ink); }
.hour-bar.muted { background: var(--text-3); }
.hour-exp { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; left: var(--needle); background: var(--text-3); }
.hour-val { text-align: right; color: var(--text-2); }
.spectre-scale { position: relative; height: 16px; margin-top: var(--s-4); border-bottom: 1px solid var(--line); }
.spectre-scale::before { content: ""; position: absolute; bottom: 0; left: var(--needle); width: 2px; height: 12px; margin-left: -1px; background: var(--ink); }
.spectre-scale::after { content: ""; position: absolute; bottom: 12px; left: var(--needle); width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--red); }
/* ---------------------------------------------------------------- Focus (the owner's first screen) */
.alpha { padding-block: var(--s-6) var(--s-8); }
.alpha-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.alpha-head p { margin: 0; color: var(--text-2); }
.alpha-situation { padding: var(--s-5); margin-bottom: var(--s-6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.alpha-situation > header { margin-bottom: var(--s-5); }
.alpha-situation h2, .alpha-situation h3 { margin: 0; }
.alpha-situation-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.alpha-situation-figures, .alpha-situation-actions { min-width: 0; }
.alpha-situation-figures > .alpha-panel-head { margin-bottom: var(--s-3); }
.alpha-situation .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.alpha-situation .k-value { white-space: normal; overflow-wrap: anywhere; }
.alpha-situation-actions > h3 { margin-bottom: var(--s-3); }
.alpha-situation .alpha-priorities { border-top: 0; }
.alpha-situation .alpha-priority { grid-template-columns: 24px minmax(0, 1fr); padding: var(--s-3); margin-bottom: var(--s-2); background: var(--ground-2); border: 0; border-radius: var(--r-panel); }
.alpha-situation .alpha-impact { grid-column: 2; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); text-align: left; }
.alpha-situation .alpha-priority:last-child { margin-bottom: 0; }
.alpha-situation .alpha-priority h3 { font-size: var(--fs-3); margin-bottom: var(--s-2); }
.alpha-situation .alpha-clear { padding: var(--s-3); border: 0; background: var(--ground-2); border-radius: var(--r-panel); }
@media (min-width: 1100px) {
  .alpha-situation-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.alpha-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-bottom: var(--s-5); }
.alpha > .alpha-panel { margin-bottom: var(--s-5); }
.alpha-panel .chart { margin-top: var(--s-5); }
.alpha-panel { min-width: 0; padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.alpha-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.alpha-panel-head p, .alpha-panel > p { margin: var(--s-1) 0 0; color: var(--text-2); }
.alpha-outlook { display: grid; gap: var(--s-1); margin-top: var(--s-4); }
.alpha-outlook .v { font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; line-height: var(--lh-data); }
.alpha-outlook .s { color: var(--text-2); }
.alpha-section { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: var(--s-7) 0 var(--s-3); }
.alpha-section p { margin: 0; color: var(--text-2); }
.alpha-priorities { border-top: 1px solid var(--line); }
.alpha-priority { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.alpha-rank { color: var(--text-3); line-height: var(--lh-head); padding-top: 2px; }
.alpha-priority-main { min-width: 0; }
.alpha-priority h3 { font-size: var(--fs-4); font-weight: 400; margin: 0 0 var(--s-2); }
.alpha-priority p { color: var(--text-2); max-width: 70ch; margin: 0 0 var(--s-2); }
.alpha-next { max-width: 70ch; margin-bottom: var(--s-1); }
.alpha-next b { font-weight: 500; }
.alpha-impact { grid-column: 2; display: flex; align-items: baseline; gap: var(--s-2); }
.alpha-impact:empty { display: none; }
.alpha-impact strong { font-size: var(--fs-4); font-weight: 300; }
.alpha-impact span { color: var(--text-2); }
.alpha-clear { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.alpha-clear b { display: block; font-weight: 400; font-size: var(--fs-3); }
.alpha-clear span { display: block; margin-top: var(--s-1); color: var(--text-2); max-width: 70ch; }
.alpha-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
.cost-gap .gap-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin: var(--s-3) 0; }
.cost-gap .gap-row strong { font-size: var(--fs-5); font-weight: 300; letter-spacing: 0; }
.earned-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
/* ---------------------------------------------------------------- the report (brief) */
.masthead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding: 0 0 var(--s-5); }
.brand { display: flex; flex-direction: column; gap: var(--s-1); }
.masthead-right { display: flex; align-items: flex-end; gap: var(--s-5); }
.controls { display: flex; gap: var(--s-2); }
.verdict { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-6); padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.verdict p { max-width: 62ch; }
.hero { margin: var(--s-2) 0; font-size: var(--fs-7); font-weight: 300; letter-spacing: -0.02em; line-height: var(--lh-data); }
.hero-label { color: var(--text-2); }
.hero-delta { color: var(--text-2); }
.decomp { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); grid-column: 1 / -1; }
.decomp div { display: flex; flex-direction: column; gap: var(--s-1); }
.findings, .gaps, .focus-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.finding, .gap, .focus-card { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.finding-head, .gap-head { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; justify-content: space-between; }
.finding h4, .gap h4 { margin: 0; flex: 1 1 320px; font-size: var(--fs-3); font-weight: 500; }
.finding p, .gap p { margin: var(--s-2) 0 0; max-width: 76ch; color: var(--text-2); }
.finding .do { margin-top: var(--s-2); }
.finding .do b { display: block; margin-bottom: var(--s-1); }
.finding-foot { margin-top: var(--s-3); }
.prog { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
footer { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--text-2); }
footer p { max-width: 78ch; }
.targets { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.wf { display: flex; gap: var(--s-3); margin: var(--s-3) 0; align-items: flex-start; }
.wf-ic { flex: none; min-width: 72px; color: var(--text-2); }
.wf-tag { color: var(--text-2); }
.wf-tag-real, .wf-real .wf-ic { color: var(--ink); }
.wf-myth .wf-ic { color: var(--text-3); }
.alternative-reading { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); }
/* older focus list and day summary share these */
.focus-lede { font-size: var(--fs-4); font-weight: 300; margin: 0 0 var(--s-2); max-width: 60ch; }
.focus-sub { color: var(--text-2); margin: 0 0 var(--s-5); }
.focus-actions { margin-top: var(--s-4); }
.focus-card { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: start; }
.focus-num { color: var(--text-3); }
.focus-body h3 { margin: 0 0 var(--s-2); font-size: var(--fs-4); font-weight: 400; }
.focus-body p { color: var(--text-2); max-width: 70ch; }
.focus-do { margin-bottom: var(--s-3); }
.focus-do b { display: block; margin-bottom: var(--s-1); }
.focus-money { grid-column: 2; white-space: nowrap; }
.focus-money small { color: var(--text-2); }
.focus-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.focus-more { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding-top: var(--s-5); }
.focus-more a { display: flex; flex-direction: column; gap: var(--s-1); }
.focus-why { color: var(--text-2); }
/* ---------------------------------------------------------------- day */
.day-root { padding-block: var(--s-6) var(--s-8); }
.day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.day-head .when { margin-left: auto; }
.day-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-bottom: var(--s-5); }
.day-root .spot { padding: var(--s-4) var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.day-root .spot .v { font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; line-height: var(--lh-data); margin: var(--s-2) 0; }
.day-root .spot .s { color: var(--text-2); }
.day-note { display: flex; flex-direction: column; justify-content: center; padding: var(--s-4) var(--s-5); background: var(--ground-2); border-radius: var(--r-panel); }
.day-note p { margin: 0; }
.day-root .bar { display: flex; gap: 2px; margin-top: var(--s-3); }
.day-root .bar i { flex: 1; height: 4px; background: var(--line); }
.day-root .bar i.on { background: var(--ink); }
.day-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
/* ALIGN-A: the daily-actions section on the front page uses the same cards as the day screens, so both roots take these rules. */
:is(.day-root, #daily-actions) .card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: 0; padding: var(--s-4) 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
:is(.day-root, #daily-actions) .card h2 { font-size: var(--fs-3); font-weight: 500; margin: 0 0 var(--s-1); }
:is(.day-root, #daily-actions) .card p { margin: 0; color: var(--text-2); }
:is(.day-root, #daily-actions) .card .act { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--ground-2); border: 0; }
:is(.day-root, #daily-actions) .card .meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); align-items: center; }
:is(.day-root, #daily-actions) .impact .v { font-size: var(--fs-4); font-weight: 300; }
:is(.day-root, #daily-actions) .impact .s { color: var(--text-2); font-size: var(--fs-1); }
.day-root .more { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); }
.day-root .clear { padding: var(--s-6) 0; text-align: center; color: var(--text-2); }
.acts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
:is(.day-root, #daily-actions) .btn { border: 1px solid var(--ink); color: var(--ink); padding: 0 var(--s-4); }
:is(.day-root, #daily-actions) .btn:hover { background: var(--ground-2); }
:is(.day-root, #daily-actions) .btn.main { font-weight: 500; }
:is(.day-root, #daily-actions) .btn.quiet { border-color: transparent; padding: 0; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
:is(.day-root, #daily-actions) .btn.quiet:hover { background: transparent; color: var(--ink); }
.zone { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.zone .k { margin-bottom: var(--s-3); color: var(--text-2); }
.day-root .strip { margin-bottom: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.day-root .strip .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.day-root .strip .row b { margin-right: auto; font-weight: 500; }
.said { margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); }
.dowgrid, .waste-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-5); margin: var(--s-4) 0; }
.dowcard, .waste-card { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.dowcard .v, .waste-card .v { font-size: var(--fs-5); font-weight: 300; margin: var(--s-1) 0; }
/* ---------------------------------------------------------------- insights */
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-5); }
.ins { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.ins h3 { margin: 0; }
.ins p { margin: 0; color: var(--text-2); }
.ins .act { margin: 0; padding: var(--s-2) var(--s-3); background: var(--ground-2); border: 0; }
.ins-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-top: auto; padding-top: var(--s-2); }
.ins-ev { margin-left: auto; color: var(--text-3); font-size: var(--fs-1); }
.ins-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-5); margin: var(--s-4) 0 var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ins-tile .v { font-size: var(--fs-5); font-weight: 300; margin: var(--s-1) 0; }
.ofs { display: flex; flex-direction: column; gap: var(--s-1); }
.of { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.of form { display: contents; }
.of .why { flex: 1; min-width: 120px; }
.of .amt { width: 88px; min-height: 36px; }
.of .lock { white-space: nowrap; color: var(--text-3); font-size: var(--fs-1); }
.of-note { display: flex; gap: var(--s-1); align-items: baseline; color: var(--text-2); }
.of-pick { display: flex; flex-direction: column; gap: var(--s-1); width: 100%; margin-top: var(--s-1); }
.of-pick button { text-align: left; min-height: 36px; padding: 0 var(--s-2); border: 1px solid var(--line); border-radius: var(--r-control); background: transparent; cursor: pointer; }
.of-proof { white-space: nowrap; }
.skel { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-panel); color: var(--text-3); }
.skel .bar { display: none; }
.vision-reading, .vision-consent, .vision-other, .vision-conflicts { margin: var(--s-3) 0; }
/* ---------------------------------------------------------------- actions and workflow */
.workflow-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.workflow-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: start; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.workflow-rank { color: var(--text-3); }
.workflow-body small, .workflow-body em { display: block; font-style: normal; color: var(--text-2); }
.workflow-body b { display: block; margin: var(--s-1) 0; font-weight: 500; }
.workflow-do { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.wf-form { display: flex; gap: var(--s-2); }
.wf-btn { min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--ink); border-radius: var(--r-control); background: transparent; color: var(--ink); cursor: pointer; }
.wf-btn { border-color: var(--line-control); }
.wf-btn:hover { border-color: var(--ink); }
.wf-btn.go { border-color: var(--ink); font-weight: 500; }
.wf-btn.ghost { border-color: transparent; padding: 0; text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
a.workflow-item { color: inherit; text-decoration: none; }
a.workflow-item:hover b { text-decoration: underline; text-underline-offset: 4px; }
.wf-done .sum { color: var(--text-2); }
.wf-done { padding: var(--s-6) 0; text-align: center; color: var(--text-2); }
.wf-followup { margin-top: var(--s-2); }
.owner-shop-tasks { border-top: 1px solid var(--line); }
.owner-task { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: center; padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.owner-task h3 { margin: var(--s-1) 0; }
.owner-task p { margin: 0; color: var(--text-2); }
.owner-task form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
.owner-task label { flex: 1; color: var(--text-2); }
.owner-task select { display: block; margin-top: var(--s-1); }
.owner-task-kind { color: var(--text-2); }
.shop-label { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: end; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.shop-label:last-child { border-bottom: 0; }
.shop-label h2 { margin: 0 0 var(--s-1); font-size: var(--fs-3); font-weight: 500; }
.shop-label p { margin: 0; color: var(--text-2); }
.shop-label form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
.shop-label label { flex: 1; color: var(--text-2); }
.shop-label input { display: block; margin-top: var(--s-1); }
/* ---------------------------------------------------------------- people */
.perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-5); }
.perf-card { min-width: 0; padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.perf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-3); }
.perf-head h3 { flex: 1; min-width: 0; overflow-wrap: anywhere; margin: 0; }
.perf-share { color: var(--text-2); }
.perf-metrics { display: flex; flex-direction: column; }
.perf-metric { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.perf-metric:last-child { border-bottom: 0; }
.perf-label { flex: 1; color: var(--text-2); }
.perf-value, .perf-v { white-space: nowrap; }
.perf-idx { margin-left: var(--s-2); color: var(--text-3); font-size: var(--fs-1); }
.perf-note { display: block; width: 100%; text-align: right; color: var(--text-3); font-size: var(--fs-1); }
.perf-flag { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--warn-wash); color: var(--warn); border-radius: var(--r-panel); }
.shift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-5); }
.shift-day { display: flex; flex-direction: column; gap: var(--s-2); min-height: 120px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.shift-day.now .shift-date { color: var(--ink); }
.shift-date { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-2); }
.shift-kind { color: var(--text-3); font-size: var(--fs-1); }
.shift-col { display: flex; flex-direction: column; gap: var(--s-1); }
.shift-chip { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); padding: var(--s-2) var(--s-3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-control); }
.shift-chip span:first-child { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.shift-time { flex: 1; white-space: nowrap; color: var(--text-2); font-size: var(--fs-1); }
.shift-empty { color: var(--text-3); }
.cashwatch-people { margin-top: var(--s-3); }
.access-panel .access-person { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.access-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); }
.access-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; }
.access-label { flex: 0 0 100%; color: var(--text-2); }
.access-form { display: inline-flex; }
.access-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line-control); border-radius: var(--r-control); background: transparent; color: var(--text-2); cursor: pointer; }
.access-chip.on { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.access-chip.role, .access-chip.fixed { min-height: 0; padding: 0; border: 0; cursor: default; }
/* ---------------------------------------------------------------- money and stock */
.invoice-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.invoice-photo img, .invoice-photo embed { display: block; width: 100%; border: 1px solid var(--line); }
.invoice-photo embed { height: 420px; }
.invoice-entry, .invoice-card { min-width: 0; }
.invoice-origin { color: var(--text-2); }
.price-card { flex: 1; min-width: 200px; }
.cashflow-statement td.num { width: 1%; }
.accounting-add { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.accounting-key { max-width: 160px; }
.accounting-vat-toggle { display: flex; align-items: center; gap: var(--s-2); }
.rate-key { max-width: 180px; }
.rate-value { max-width: 120px; }
.rate-date { max-width: 150px; }
.wh-rows { display: flex; flex-direction: column; margin: var(--s-4) 0; border-top: 1px solid var(--line); }
.wh-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.wh-name { flex: 1 1 220px; min-width: 0; }
.wh-seen { white-space: nowrap; color: var(--text-2); }
.wh-pick { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; }
.wh-hint, .wh-note { flex-basis: 100%; color: var(--text-2); }
.techcards-file { flex: 1 1 220px; min-width: 0; }
.techcards-upload-note { margin-top: var(--s-4); max-width: 65ch; padding: var(--s-3) var(--s-4); background: var(--warn-wash); color: var(--warn); border-radius: var(--r-panel); }
.connect-hint, .money-hint { margin-top: var(--s-3); color: var(--text-2); }
.bill-file { margin: var(--s-2) 0; }
/* ---------------------------------------------------------------- chain */
.chain-compare { margin: var(--s-7) 0; }
.chain-compare-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-4); }
.chain-compare h2, .chain-card h3 { margin: 0; }
.chain-compare-note { margin: 0; color: var(--text-2); }
.chain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-5); }
.chain-card { min-width: 0; padding: var(--s-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.chain-card h3 { overflow-wrap: anywhere; }
.chain-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); margin-top: var(--s-4); }
.chain-metric { min-width: 0; }
.chain-label { display: block; margin-bottom: var(--s-1); color: var(--text-2); }
.chain-metric strong { font-size: var(--fs-4); font-weight: 300; overflow-wrap: anywhere; }
.chain-na, .chain-empty, .chain-card-empty { color: var(--text-3); }
.chain-down strong, .chain-critical strong { color: var(--danger); }
/* ---------------------------------------------------------------- sign in, sign up */
.auth-flow, .login-stage { max-width: 400px; margin: 0 auto; padding: var(--s-8) 0 var(--s-9); }
.auth-flow.auth-narrow { max-width: 400px; }
.auth-flow h1, .login-stage h1 { margin-bottom: var(--s-2); }
.auth-flow .sublead, .login-stage .sublead { font-size: var(--fs-2); margin-bottom: var(--s-6); }
.auth-flow .panel, .login-stage .panel { padding: 0; background: transparent; border: 0; }
.auth-flow .field, .login-stage .field { max-width: none; }
.auth-actions .button, .auth-flow .actions-row .button { width: 100%; }
.auth-return, .login-foot { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--text-2); }
.signup { max-width: 560px; margin: 0 auto; padding: var(--s-7) 0 var(--s-9); }
.signup.signup-wide { max-width: 760px; }
.signup-title { margin: var(--s-4) 0 var(--s-1); }
.signup-steps { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin: var(--s-4) 0 var(--s-6); padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.signup-steps li { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; margin: 0; color: var(--text-2); border-bottom: 2px solid transparent; }
.signup-steps li.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--red); }
.signup-steps li.done { color: var(--ink); }
.signup-steps .n { color: var(--text-3); }
.signup .actions-row .button { width: 100%; }
.signup-return { margin-top: var(--s-4); text-align: center; color: var(--text-2); }
.signup-list, .signup ul.plain { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.signup ul.plain { list-style: none; padding: 0; }
.signup ul.plain li { padding: var(--s-1) 0; }
.big-ok { font-size: var(--fs-4); margin: 0 0 var(--s-2); }
.shop-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.shop-toggle-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tenant-inactive { color: var(--text-3); }
.otp-field { margin-top: var(--s-2); }
/* ---------------------------------------------------------------- assistant */
.nathan { display: flex; align-self: stretch; }
.nathan > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); color: var(--text-2); white-space: nowrap; transition: color var(--t-state) var(--ease); }
.nathan > summary:hover, .nathan[open] > summary { color: var(--ink); }
.nathan-panel { position: absolute; z-index: 40; top: 100%; right: var(--gutter); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 80px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-float); }
.question-answer .nathan { display: block; }
.question-answer .nathan-panel { position: static; width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; }
.question-answer .nathan-rows td:empty { display: none; }
.question-answer .nathan-rows td:first-child { width: 60%; }
.question-answer .nathan-rows td { white-space: normal; }
@media (max-width: 599px) {
  .question-answer .nathan-rows tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-3); }
  .question-answer .nathan-rows td:first-child { grid-column: 1 / -1; width: auto; }
  .question-answer .nathan-rows tr:has(td:last-child:empty) td:nth-child(2) { grid-column: 1 / -1; }
}
.nathan-form { display: flex; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-2); }
.nathan-input { flex: 1; min-width: 0; }
.nathan-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-2) var(--s-4); }
.nathan-chip { min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); background: transparent; color: var(--text-2); cursor: pointer; text-align: left; }
.nathan-chip:hover { border-color: var(--ink); color: var(--ink); }
.nathan-answer { margin: var(--s-2) var(--s-4); padding: var(--s-3); background: var(--ground-2); border-radius: var(--r-panel); }
.nathan-answer p { margin: 0 0 var(--s-2); }
.nathan-rows { width: 100%; table-layout: fixed; margin-top: var(--s-2); }
.nathan-rows td { padding: var(--s-1) 0; overflow-wrap: anywhere; }
.nathan-src { margin-top: var(--s-2); color: var(--text-3); font-size: var(--fs-1); }
.nathan-tab { display: inline-block; margin-top: var(--s-2); }
.nathan-note { padding: var(--s-2) var(--s-4) var(--s-4); color: var(--text-3); font-size: var(--fs-1); }
/* ---------------------------------------------------------------- widths */
/* Six rooms plus the signed-in controls need the existing compact menu on small laptops. */
@media (min-width: 900px) and (max-width: 1599px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .nav-inner { flex-wrap: wrap; gap: 0 var(--s-3); }
  .nav-status { order: 10; flex-basis: 100%; min-height: 32px; white-space: normal; }
}
/* Wide desktop: the owner chose a 1760 px instrument frame (David, 2026-10-03). It replaces the kit's 1440 only from 1600 px up, so 1280 and 1440 screens are unchanged. */
@media (min-width: 1600px) {
  :root { --frame-instrument: 1760px; }
}
@media (min-width: 600px) {
  .alpha-priority, .workflow-item, .focus-card { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .alpha-impact, .focus-money { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
  .workflow-do { grid-column: 3; justify-content: flex-end; }
  :is(.day-root, #daily-actions) .card { grid-template-columns: minmax(0, 1fr) 176px; }
  :is(.day-root, #daily-actions) .impact { text-align: right; }
  .owner-task { grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); }
  .shop-label { grid-template-columns: minmax(0, 1fr) minmax(280px, 432px); }
}
@media (min-width: 900px) {
  .week { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .alpha-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .alpha-grid > .wide { grid-column: 1 / -1; }
  .day-hero { grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); }
  .verdict { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .prog { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .invoice-split { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .scope-switch { justify-content: stretch; }
  .scope-switch form { width: 100%; }
  .scope-switch select { flex: 1; min-width: 0; }
  .k-value, .kpi .v, .alpha-outlook .v { font-size: var(--fs-5); }
  .panel, .card, .alpha-panel, .perf-card, .chain-card { padding: var(--s-4); }
  .nav .nav-status { flex: 1 1 auto; flex-basis: auto; }
  .nathan { order: 11; }
  .nathan > summary { padding-left: 0; }
  .rcp-editor, .rcp-preview { display: block; width: 100%; }
  .rcp-editor thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rcp-editor tbody, .rcp-editor tfoot, .rcp-preview tbody { display: block; }
  .rcp-editor tbody tr, .rcp-preview tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .rcp-editor tbody td, .rcp-preview tbody td, .rcp-preview tbody th { display: block; min-width: 0; padding: 0; border: 0; text-align: left; background: transparent; overflow-wrap: anywhere; }
  .rcp-editor tbody td:first-child, .rcp-preview tbody th { grid-column: 1 / -1; }
  .rcp-editor td[data-label]::before, .rcp-preview td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--s-1); color: var(--text-2); font-size: var(--fs-1); }
  .rcp-editor input { width: 100%; min-height: 44px; }
  .rcp-editor tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3) 0; }
  .rcp-editor tfoot td { padding: 0; border: 0; }
  .rcp-editor tfoot td:nth-child(2), .rcp-editor tfoot td:nth-child(3), .rcp-editor tfoot td:nth-child(4), .rcp-preview tbody td.arrow { display: none; }
  table.rates-table, table.accounting-table, table.signup-shops-table { display: block; min-width: 0; width: 100%; }
  table.signup-shops-table td.shop-field { display: block; text-align: left; }
  table.signup-shops-table td.shop-field::before { display: block; margin-bottom: var(--s-1); }
  .chain-kpis { grid-template-columns: minmax(0, 1fr); }
}
/* ---------------------------------------------------------------- documents (A4, printed) */
@page { size: A4 portrait; margin: 20mm; }
.doc { margin: 0; background: var(--ground); color: var(--ink); font-size: 10.5pt; line-height: 1.5; }
.doc .card { margin: 0; padding: 0 0 8mm; background: none; border: 0; border-radius: 0; break-after: page; }
.doc .card:last-child { break-after: auto; }
.doc .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; margin-bottom: 5mm; padding-bottom: 4mm; border-bottom: 1px solid var(--ink); }
.doc .head h1 { margin: 2mm 0 0; font-size: 16pt; font-weight: 300; letter-spacing: 0; }
.doc .head .meta { text-align: right; color: var(--text-2); font-size: 9pt; white-space: nowrap; }
.doc .head .meta b { color: var(--ink); font-size: 10.5pt; }
.doc table { margin-bottom: 5mm; font-size: 9.5pt; }
.doc th { padding: 1.5mm 2mm; font-size: 8.5pt; }
.doc td { padding: 1.5mm 2mm; }
.doc .summary { display: flex; flex-wrap: wrap; gap: 8mm; margin-bottom: 5mm; }
.doc .summary span { display: block; color: var(--text-2); font-size: 8.5pt; }
.doc .summary b { font-size: 13pt; font-weight: 300; }
.doc h2 { margin: 0 0 2mm; padding-bottom: 1mm; font-size: 10.5pt; font-weight: 500; border-bottom: 1px solid var(--line); }
.doc .tech { margin: 0 0 6mm; min-height: 16mm; white-space: pre-wrap; }
.doc .sign { display: flex; gap: 12mm; margin-top: 10mm; color: var(--text-2); font-size: 9pt; }
.doc .sign div { flex: 1; padding-top: 1.5mm; border-top: 1px solid var(--ink); }
@media screen {
 .doc { padding: 10mm; background: var(--ground-2); }
 .doc .card { max-width: 190mm; margin: 0 auto 8mm; padding: 14mm; background: var(--panel); border: 1px solid var(--line); }
}
@media print {
 .doc { background: none; }
}
/* ---------------------------------------------------------------- print */
@media print {
  .panel, .card, .alpha-panel { break-inside: avoid; }
}
@media (max-width: 599px) {
  .alpha, .day-root { padding-block: var(--s-5) var(--s-7); }
}
@media print {
  .scope-switch, .nathan, .controls { display: none; }
  .alpha, .day-root { padding: 0; }
}
/* the outlook: the band always runs from one sixth to five sixths of its scale, so the ends sit under it */
.alpha-panel .range-ends { margin-inline: 16.667%; }
/* Vanity Dashboard toolbar & deep analysis instruments */
.vanity-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.vanity-toolbar .fin-nav { margin: 0; border-bottom: 0; }
.vanity-toolbar .inline-form { margin: 0; gap: var(--s-2); align-items: end; }
.vanity-toolbar label { display: grid; gap: var(--s-1); min-width: 0; color: var(--text-2); }
.vanity-toolbar label input[type="date"] { width: 100%; min-width: 0; }
.vanity-toolbar input[type="date"] { width: auto; min-height: 44px; color-scheme: light; }
:root[data-theme="dark"] .vanity-toolbar input[type="date"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vanity-toolbar input[type="date"] { color-scheme: dark; }
}
.deep-note { margin: var(--s-3) 0 0; color: var(--text-2); font-size: var(--fs-2); line-height: 1.5; }
.deep-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.deep-stat { padding-top: var(--s-2); border-top: 1px solid var(--line); }
.deep-stat-label { font-size: var(--fs-1); color: var(--text-2); }
.deep-stat-val { font-size: var(--fs-4); font-weight: 300; color: var(--ink); margin-top: var(--s-1); }
.abc-evidence { min-width: 0; }
.abc-evidence[open] { grid-column: 1 / -1; }
.hbar.wide-label { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; }
.hbar .track { height: 4px; background: var(--line); }
.hbar .b { height: 4px; background: var(--ink); }
.abc-name .hbar { display: block; }
.abc-name .track { display: block; width: 100%; }
/* ALIGN-B start — finance and operations pages (agent B, 2026-10-08). Layout only. */
/* A table that sits straight in a panel (no .table-wrap) scrolls inside that panel and never pushes the page sideways. */
:is(.panel, .card, .alpha-panel):has(> table) { overflow-x: auto; }
/* Tabs and filter chips: a short word ("Цены", "Все 8") is still a 44 px wide target. */
.fin-chip, .price-filters a { min-width: 44px; justify-content: center; }
/* The delete cross on a shift is a 44 px target, not the width of the glyph. */
.shift-chip .linkbtn { min-width: 44px; justify-content: center; }
/* The invoice entry table keeps a width the inputs can live in, and the item name gets the room the figures do not need; on a phone it scrolls inside its wrapper. */
table.entry { table-layout: fixed; min-width: 640px; }
table.entry th:nth-child(1) { width: 7%; }
table.entry th:nth-child(3) { width: 11%; }
table.entry th:nth-child(4) { width: 14%; }
table.entry th:nth-child(5), table.entry th:nth-child(6) { width: 17%; }
@media (min-width: 900px) and (max-width: 1279px) {
  /* The photograph takes a third of the row here, so the form column is narrower. */
  table.entry { min-width: 548px; }
}
/* Two page blocks in a row (the Finance tab strip, a lone button, then the page): one gap between them, not two paddings. */
.frame > .wrap:has(+ .wrap), .frame > .wrap:has(> .fin-nav) { padding-bottom: 0; }
/* A refusal or notice that opens a page (the "this section is not open to you" screen) does not touch the top bar. */
.frame > .banner:first-child { margin-top: var(--s-5); }
/* A banner or panel straight under the shop picker gets room above it. */
.frame > .scope-switch + :is(.banner, .panel, .card) { margin-top: var(--s-5); }
/* Readout tiles share the width of their panel: the row fills instead of leaving empty columns on the right. */
.dowgrid, .waste-cards { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
/* A tag after a figure sits at the left of its cell, so the figures in a column keep one right edge. */
@media (min-width: 600px) {
  table.grid td.num > .tag { float: left; margin-right: var(--s-3); }
}
/* A form that holds nothing but its buttons does not double the top space of its panel. */
:is(.panel, .card) > form > .actions-row:only-child { margin-top: 0; }
/* Warehouse mapping: the choice is a field, not a full-width bar, and the save button has the primary button's shape. */
.wh-row .wh-pick { width: auto; flex: 0 1 360px; max-width: 100%; }
.wh-save { min-height: 44px; margin-top: var(--s-4); padding: 0 var(--s-5); border: 1px solid var(--ink); border-radius: var(--r-control); background: var(--ink); color: var(--on-ink); font-weight: 500; cursor: pointer; }
.wh-save:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
/* The photographed document keeps its place while it loads (zero shift): the box is reserved at a portrait page's shape, the picture sits inside it whole. */
.invoice-photo img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--ground-2); }
/* A tick with its words is one 44 px target, also when the words fit on one line. */
.accounting-vat-toggle, label.check { min-height: 44px; }
/* The rates table on a tablet gives up some cell padding so its four columns fit the panel instead of scrolling by a few pixels. */
@media (min-width: 600px) and (max-width: 899px) {
  table.rates-table th, table.rates-table td { padding-inline: var(--s-2); }
}
/* Readouts that end a panel do not add the standalone gap under themselves. */
:is(.panel, .card) > .kpis:last-child { margin-bottom: 0; }
/* A button written without a class gets the outline button's shape (known by shape), not the browser's grey default. */
.frame button:not([class]) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s-5); border: 1px solid var(--ink); border-radius: var(--r-control); background: transparent; color: var(--ink); font-size: var(--fs-2); font-weight: 500; line-height: 1.2; cursor: pointer; }
.frame button:not([class]):hover { background: var(--ground-2); }
/* The three order blocks share one set of column widths, so Used per day, On hand, Days left, Order and Supplier line up from block to block. */
@media (min-width: 600px) {
  table.restock-table { table-layout: fixed; min-width: 880px; }
  table.restock-table th:nth-child(1) { width: 22%; }
  table.restock-table th:nth-child(2), table.restock-table th:nth-child(3), table.restock-table th:nth-child(4), table.restock-table th:nth-child(5) { width: 11%; }
  table.restock-table th:nth-child(6) { width: 17%; }
  table.restock-table th:nth-child(7) { width: 17%; }
  table.restock-table td { overflow-wrap: break-word; }
}
/* Touch-size fields where the kit's dense 36 px entry rows would be tapped (tablet and phone). */
@media (max-width: 899px) {
  table.entry input, .rcp input { min-height: 44px; }
  /* The name that opens a row (a client in the platform list) is a 44 px target, not the height of its text. */
  td > a:not([class]) { display: inline-block; padding-block: var(--s-3); }
}
@media (max-width: 599px) {
  /* The profit table: the figure sits on the line of its name and the explanation runs full width under them, so nothing is cut off at the edge. */
  table.pnl, table.pnl tbody { display: block; }
  table.pnl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  table.pnl td { display: block; padding: 0; border: 0; }
  table.pnl td.num { width: auto; text-align: right; }
  table.pnl td.note { grid-column: 1 / -1; margin-top: var(--s-1); font-size: var(--fs-1); }
  table.pnl td.note:empty { display: none; }
  /* The add-a-category row: every field on its own full line. */
  .accounting-add > * { flex: 1 1 100%; max-width: none; }
}
/* ALIGN-B end */
/* ALIGN-A start — owner and manager pages, shared shell (agent A, 2026-10-08). Layout only. */
/* Text written with both languages in the markup (the shop comparison) shows only the page's own language. */
#page[data-lang="ru"] [data-lang="en"], #page[data-lang="en"] [data-lang="ru"] { display: none; }
/* A section opener ("Таблица", the menu-map lists) is a 44 px target; summaries that already carry their own height keep it. */
.frame details:not(.scope-set):not(.otp-block):not(.more):not(.nathan) > summary { padding-block: var(--s-3); }
/* "Полный анализ" in a panel head is a real target, not 22 px of text. */
.alpha-panel-head > a { display: inline-flex; align-items: center; min-height: 44px; }
/* Rows of bars: the value column is one width, so every bar in a block ends in the same place. */
.hbar.wide-label:has(> .val) { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 112px; }
.hbar.wide-label > :last-child { text-align: right; white-space: nowrap; }
/* The insights offer rows: the label column is one width, so the explanations start on one line. */
.of .lock { flex: 0 0 168px; white-space: normal; }
/* A page title that sits straight in the frame (no wrapper) gets the same top and bottom space as every other title. */
.frame > h1 { margin: var(--s-6) 0 var(--s-2); }
.frame > h1 + p { margin-bottom: var(--s-4); }
.frame > section.card { margin-top: var(--s-5); }
/* A fieldset is a group in the form, not a boxed browser default. */
fieldset { min-width: 0; margin: 0 0 var(--s-4); padding: 0; border: 0; }
fieldset > legend { padding: 0; margin-bottom: var(--s-2); color: var(--text-2); }
fieldset label { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; }
fieldset p { margin: 0; }
/* Cards that sit side by side end on the same line. */
.grid-2 { align-items: stretch; }
/* The front page: the Today block and the daily actions no longer carry the page-wrapper padding twice. */
#today-hero.wrap { padding-bottom: 0; }
#daily-actions.wrap { padding-block: 0; }
#daily-actions .card:first-of-type { border-top: 1px solid var(--line); }
/* Deep Analyst: each finding is a ruled block; on a wide screen the figures sit beside their reading. */
.alpha-deep { margin-top: var(--s-5); }
.alpha-deep > h3 { margin: 0 0 var(--s-2); }
.deep-intro { margin: 0 0 var(--s-4); color: var(--text-2); max-width: 70ch; }
.deep-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3) var(--s-6); align-items: start; padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.deep-card > h4 { margin: 0; font-size: var(--fs-3); font-weight: 500; }
.deep-card > .note { margin: 0; max-width: none; }
.deep-viz { min-width: 0; }
.deep-viz > :first-child { margin-top: 0; }
.deep-stats + .deep-bar-group { margin-top: var(--s-4); }
.deep-bar-group, .deep-product-col { display: grid; gap: var(--s-1); }
.deep-products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-5); }
.deep-group-label { margin-bottom: var(--s-2); color: var(--text-2); }
.deep-narrative { display: grid; min-width: 0; margin: 0; }
.deep-card > .deep-narrative { grid-column: 1 / -1; }
.deep-narrative dt { margin: 0; color: var(--text-2); }
.deep-narrative dd { max-width: 70ch; margin: 0 0 var(--s-3); }
.deep-narrative dd:last-child { margin-bottom: 0; }
.deep-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.deep-chips .chip { padding: var(--s-1) var(--s-2); background: var(--ground-2); border-radius: var(--r-control); color: var(--text-2); font-size: var(--fs-1); }
@media (min-width: 900px) {
  .deep-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deep-card > h4, .deep-card > .note { grid-column: 1 / -1; }
  .deep-card > .deep-viz { grid-column: 1; grid-row: 2; }
  .deep-card > .deep-viz + .deep-narrative { grid-column: 2; grid-row: 2; }
}
/* A list made only of bar rows shares its columns, so the value column is as wide as the widest value and every bar in the list ends in the same place. */
@media (min-width: 600px) {
  @supports (grid-template-columns: subgrid) {
    :is(div, section, article):is(.panel, .card, .alpha-panel, .deep-bar-group, :not([class])):has(> .hbar) { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: var(--s-3); align-content: start; }
    :is(div, section, article):is(.panel, .card, .alpha-panel, .deep-bar-group, :not([class])):has(> .hbar.wide-label) { grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; }
    :is(div, section, article):is(.panel, .card, .alpha-panel, .deep-bar-group, :not([class])):has(> .hbar) > :not(.hbar) { grid-column: 1 / -1; }
    :is(div, section, article):is(.panel, .card, .alpha-panel, .deep-bar-group, :not([class])):has(> .hbar) > .hbar { grid-template-columns: subgrid; grid-column: 1 / -1; }
  }
}
.mt-header, .card > .mt-header, .panel > .mt-header { margin-top: var(--s-5); }
/* The first-run, forgot-password and reset screens are one 400 px column like the sign-in screen; the frame's wrapper rule had made them as wide as the page. */
.frame .auth-flow, .frame .login-stage { max-width: 400px; margin-inline: auto; padding-inline: 0; }
.frame .signup { max-width: 560px; margin-inline: auto; padding-inline: 0; }
.frame .signup.signup-wide { max-width: 760px; }
/* The links under a sign-in form ("Forgot password", "Back to sign in") are 44 px targets. */
.login-foot > a, .auth-return > a { display: flex; align-items: center; min-height: 44px; }
/* A panel title that sits straight in the panel has the same gap under it as a panel head has. */
.alpha-panel > h2 { margin: 0 0 var(--s-2); }
.alpha-panel > p + p { margin-top: var(--s-2); }
.alpha-panel > .table-wrap { margin-top: var(--s-3); }
.alpha-panel > .table-wrap + p { margin-top: var(--s-3); }
.ins-grid { margin-bottom: var(--s-5); }
@media (max-width: 599px) {
  /* Bars in a row: the name and the value share the first line, the bar runs full width under them. */
  .hbar.wide-label, .hbar.wide-label:has(> .val) { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); }
  .hbar.wide-label > :first-child { grid-column: 1; grid-row: 1; }
  .hbar.wide-label > :last-child { grid-column: 2; grid-row: 1; }
  .hbar.wide-label > .track { grid-column: 1 / -1; grid-row: 2; }
  .of .lock { flex-basis: 100%; }
  /* The Today block's date row: two equal columns, not four ragged controls. */
  .vanity-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .vanity-toolbar .inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .vanity-toolbar .inline-form > label { grid-column: 1 / -1; }
  .vanity-toolbar .inline-form > :is(a, input, button, span) { width: 100%; min-width: 0; }
  /* The access list: one block per person (name, role, state, the remove button) instead of four columns that scroll sideways. */
  table.table, table.table tbody { display: block; }
  table.table tr:has(> th) { display: none; }
  table.table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  table.table td { display: block; padding: 0; border: 0; }
  table.table td:first-child, table.table td.num { grid-column: 1 / -1; text-align: left; }
  table.table td:nth-child(3) { text-align: right; }
}
/* ALIGN-A end */

/* VISUAL-D start — the cash movement panel and the recorded-action cards (agent D, 2026-10-08). Presentation only; classes, no inline styles. */
/* Cash movement panel: a flow graphic that ends in the net, then stacked rows. Everything inside is allowed to shrink, so nothing pushes the page sideways. */
.cash-panel { display: grid; align-content: start; gap: var(--s-3); overflow-wrap: anywhere; container-type: inline-size; }
.cash-panel > * { margin: 0; min-width: 0; }
.cash-panel .alpha-panel-head { margin-bottom: 0; }
.cash-honest { color: var(--text-2); font-size: var(--fs-1); }
.cashflow { display: grid; gap: var(--s-2); }
.cf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: 2px; align-items: baseline; }
.cf-l { color: var(--text-2); }
.cf-v { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cf-bar { grid-column: 1 / -1; display: block; width: 100%; height: 8px; background: var(--ground-2); }
.cf-bar rect { fill: var(--text-3); }
.cf-axis { stroke: var(--line-control); stroke-width: 1; }
.cf-up .cf-bar rect { fill: var(--ok); }
.cf-down .cf-bar rect { fill: var(--danger); }
.cf-net .cf-bar rect { fill: var(--ink); }
.cf-up .cf-v, .cm-amt.cf-up { color: var(--ok); }
.cf-down .cf-v, .cm-amt.cf-down { color: var(--danger); }
.cf-net { margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.cf-net .cf-l { color: var(--ink); }
.cf-net .cf-v { font-size: var(--fs-5); font-weight: 300; letter-spacing: -0.02em; color: var(--ink); }
.cashlog { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cashlog-more > .cashlog { border-top: 0; }
.cm { min-width: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.cm-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-1) var(--s-3); }
.cm-date { color: var(--text-2); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cm-amt { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.cm-sub { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); margin-top: 2px; color: var(--text-2); font-size: var(--fs-1); }
.cm-sub > span { min-width: 0; }
.cash-note .cm-legend { color: var(--text-2); font-size: var(--fs-1); }
/* In a narrow column (a laptop's side column) the movement name drops to its own line and the net figure sits under its label, so no word is broken. */
@container (max-width: 280px) {
  .cm-top { grid-template-columns: minmax(0, 1fr) auto; }
  .cm-type { grid-column: 1 / -1; grid-row: 2; }
  .cf-net { grid-template-columns: minmax(0, 1fr); }
  .cf-net .cf-v { text-align: left; }
}
/* Recorded-action cards: status, title, the cost of leaving it as the one big figure, the owner as a chip, the buttons; the reading sits under Details. */
:is(.day-root, #daily-actions) .card.task-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.task-card .card-head { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.task-card .card-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.task-card .card-chips .pill { white-space: normal; }
:is(.day-root, #daily-actions) .task-card h2 { margin: 0; }
.task-card .state.claimed { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
:is(.day-root, #daily-actions) .task-card .impact { text-align: left; min-width: 0; }
:is(.day-root, #daily-actions) .task-card .impact .k { color: var(--text-2); font-size: var(--fs-1); }
:is(.day-root, #daily-actions) .task-card .impact .v { font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; line-height: var(--lh-data); font-variant-numeric: lining-nums tabular-nums; }
:is(.day-root, #daily-actions) .task-card .impact .v .s { margin-left: var(--s-1); font-size: var(--fs-1); letter-spacing: 0; color: var(--text-3); }
.task-card .card-acts, .task-card .card-more { min-width: 0; }
.task-card .card-acts .acts { margin-top: 0; }
.task-card .card-acts .note { margin: 0 0 var(--s-1); }
.task-card .card-more > p { margin: 0 0 var(--s-2); color: var(--text-2); }
.task-card .card-more .meta { margin-top: var(--s-2); }
.task-card .card-more .act { margin-bottom: var(--s-2); }
.task-card .role-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.task-card .invite-link { justify-self: start; padding: 0 var(--s-4); }
:is(.day-root, #daily-actions) .task-card.task-alert { padding: var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); border-bottom: 0; margin-bottom: var(--s-2); }
.task-card.task-alert .card-chips :is(.pill, .state) { background: var(--panel); }
.task-card.task-alert .role-chips .pill { background: var(--warn-wash); color: var(--warn); }
@media (min-width: 600px) {
  :is(.day-root, #daily-actions) .card.task-card { grid-template-columns: minmax(0, 1fr) 176px; column-gap: var(--s-5); }
  .task-card .card-acts, .task-card .card-more { grid-column: 1 / -1; }
  :is(.day-root, #daily-actions) .task-card .impact { text-align: right; }
}
/* VISUAL-D end */

/* VISUAL-C start — the Deep Analyst as graphs and tiles, the front-page KPI chips and the period tiles (agent C, 2026-10-09). Presentation only; classes, no inline styles. */
/* Deep Analyst: the findings are tiles on a grid; each is a title, one sentence, a picture, one next step, and a closed Details with the full reading. */
.vc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.vc-engines { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-4); container-type: inline-size; }
.deep-card.vc-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); min-width: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); container-type: inline-size; }
.deep-card.vc-card > h4 { margin: 0; color: var(--text-2); font-size: var(--fs-2); font-weight: 500; }
.vc-headline { max-width: none; margin: 0; color: var(--ink); font-size: var(--fs-4); font-weight: 300; line-height: var(--lh-head); overflow-wrap: break-word; }
.vc-card .deep-viz { width: 100%; }
.vc-next { display: grid; gap: 2px; max-width: none; margin: 0; padding: var(--s-3); background: var(--ground-2); border-radius: var(--r-control); }
.vc-next-label { color: var(--text-2); font-size: var(--fs-1); }
.vc-next-text { color: var(--ink); font-size: var(--fs-2); font-weight: 500; }
.vc-details { margin-top: auto; border-top: 1px solid var(--line); }
.vc-details > summary { display: flex; align-items: center; min-height: 44px; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; }
.vc-details[open] > summary { color: var(--ink); }
.vc-details > .deep-narrative, .vc-details > .note, .vc-details > .vc-values { margin-top: var(--s-2); }
.vc-details > :is(p, div):not(:last-child) { margin-bottom: var(--s-2); }
.vc-values { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: var(--fs-1); color: var(--text-2); }
.vc-values > li { display: flex; justify-content: space-between; gap: var(--s-3); }
.vc-lab { min-width: 0; overflow-wrap: anywhere; }
.vc-sub { display: block; color: var(--text-2); font-size: var(--fs-1); }
.vc-val { text-align: right; white-space: nowrap; }
.vc-val.up { color: var(--ok); }
.vc-val.down { color: var(--danger); }
.vc-bar { display: block; min-width: 2px; height: 12px; margin-left: var(--needle, 0%); }
.vc-prev { background: var(--line-control); }
.vc-cur { background: var(--ink); }
.vc-up { background: var(--ok); }
.vc-down { background: var(--danger); }
.vc-tag { display: inline-block; margin-left: var(--s-2); padding: 0 var(--s-1); border: 1px solid var(--line-control); border-radius: var(--r-control); color: var(--text-2); font-size: var(--fs-1); line-height: 1.5; white-space: nowrap; }
/* The bridge: previous period, the two effects floating where the one before ended, current period, then their sum. */
.vc-bridge { display: grid; gap: var(--s-3); }
.vc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--fs-2); }
.vc-row > .vc-track { grid-column: 1 / -1; grid-row: 2; }
.vc-track { display: block; background: var(--ground-2); }
.vc-sum { padding-top: var(--s-3); border-top: 1px solid var(--line); font-weight: 500; }
@container (min-width: 440px) {
  .vc-row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 112px; }
  .vc-row > .vc-lab { grid-column: 1; grid-row: 1; }
  .vc-row > .vc-track { grid-column: 2; grid-row: 1; }
  .vc-row > .vc-val { grid-column: 3; grid-row: 1; }
}
/* The movers: one chart on a centre axis; what fell grows to the left, what rose to the right. */
.vc-diverge { display: grid; gap: var(--s-3); }
.vc-dv-axis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); color: var(--text-2); font-size: var(--fs-1); }
.vc-dv-axis > .vc-dv-pos { grid-column: 2; text-align: right; }
.vc-dv-row { display: grid; gap: var(--s-1); }
.vc-dv-head { display: flex; align-items: baseline; gap: var(--s-1); min-width: 0; font-size: var(--fs-2); }
.vc-dv-head > .vc-lab { flex: 0 1 auto; }
.vc-dv-head > .vc-val { margin-left: auto; }
.vc-dv-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vc-dv-half { display: flex; min-width: 0; }
.vc-dv-half.vc-dv-neg { justify-content: flex-end; }
.vc-dv-half.vc-dv-pos { border-left: 1px solid var(--ink); }
.vc-dv-half > .vc-bar { margin-left: 0; }
/* Weekly rhythm: on a narrow card seven rows with the figure at the end; on a wide one seven columns with the figure on top. */
.vc-days { display: grid; gap: var(--s-3); }
.vc-day { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; align-items: baseline; column-gap: var(--s-3); row-gap: var(--s-1); font-size: var(--fs-2); }
.vc-d-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.vc-d-short { display: none; }
.vc-d-bar { grid-area: bar; display: block; min-width: 0; }
.vc-d-bar > .vc-bar { width: var(--needle); margin-left: 0; height: 10px; background: var(--line-control); }
.vc-d-val { grid-area: val; text-align: right; white-space: nowrap; }
.vc-day.vc-best .vc-bar { background: var(--ink); }
.vc-day.vc-worst .vc-bar { box-sizing: border-box; background: transparent; border: 1px solid var(--ink); }
@container (min-width: 580px) {
  .vc-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); }
  .vc-day { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 128px auto; grid-template-areas: "val" "bar" "name"; justify-items: center; align-items: end; align-content: start; row-gap: var(--s-1); }
  .vc-d-val { font-size: var(--fs-1); }
  .vc-d-bar { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 128px; border-bottom: 1px solid var(--line-control); }
  .vc-d-bar > .vc-bar { width: 100%; max-width: 56px; height: var(--needle); }
  .vc-d-name { flex-direction: column; justify-content: flex-start; text-align: center; }
  .vc-d-full { display: none; }
  .vc-d-short { display: inline; }
  .vc-d-name > .vc-tag { margin-left: 0; }
}
/* Hours of the day: a column for every hour; only the peaks carry their figure (the others are in the list under Details). */
.vc-hcols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; align-items: end; }
.vc-h { display: grid; grid-template-rows: 68px 120px auto; justify-items: center; min-width: 0; }
.vc-h-val { align-self: end; padding-bottom: var(--s-1); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; color: var(--ink); font-size: var(--fs-1); }
.vc-h-bar { display: flex; align-items: flex-end; width: 100%; height: 120px; border-bottom: 1px solid var(--line-control); }
.vc-h-bar { justify-content: center; }
.vc-h-bar > .vc-bar { width: 100%; max-width: 44px; height: var(--needle); margin-left: 0; background: var(--line-control); }
.vc-peak .vc-h-bar > .vc-bar { background: var(--ink); }
.vc-h-lab { color: var(--text-2); font-size: var(--fs-1); }
.vc-peak .vc-h-lab { color: var(--ink); font-weight: 500; }
.vc-h-lab.vc-skip { visibility: hidden; }
@container (min-width: 900px) {
  .vc-h { grid-template-rows: 24px 120px auto; }
  .vc-h-val { writing-mode: horizontal-tb; transform: none; }
}
/* The findings of the checks: the estimate is a big figure that says it is an estimate; the confidence is a three-step meter with its word. */
.vc-insight { display: grid; gap: var(--s-3); }
.vc-big { display: grid; gap: 2px; }
.vc-big-label, .vc-big-note { color: var(--text-2); font-size: var(--fs-1); }
.vc-big-val { color: var(--ink); font-size: var(--fs-5); font-weight: 300; line-height: var(--lh-data); overflow-wrap: anywhere; }
.vc-conf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-1); }
.vc-conf-label { margin-right: var(--s-1); }
.vc-seg { width: 28px; height: 8px; background: var(--line); }
.vc-seg.vc-on { background: var(--ink); }
.vc-conf-word { margin-left: var(--s-1); color: var(--ink); }
/* What we cannot tell: one tile per gap; a blocking gap has a solid outline on a red wash, a degraded one a dashed outline on an amber wash, the standing limit is plain. */
.vc-gaps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-2); container-type: inline-size; }
.vc-gap { display: grid; align-content: start; gap: 2px; min-width: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--ground-2); }
.vc-gap-state { color: var(--text-2); font-size: var(--fs-1); font-weight: 500; }
.vc-gap-title { color: var(--ink); font-size: var(--fs-2); overflow-wrap: anywhere; }
.vc-gap.vc-blocking { border: 1px solid var(--danger); background: var(--danger-wash); }
.vc-gap.vc-blocking .vc-gap-state { color: var(--danger); }
.vc-gap.vc-degraded { border: 1px dashed var(--warn); background: var(--warn-wash); }
.vc-gap.vc-degraded .vc-gap-state { color: var(--warn); }
/* A last row that would leave a place empty: the last tile takes the places that are left (the widths below are where the grids have two, three or four columns). */
@container (min-width: 536px) and (max-width: 811px) {
  .vc-engines > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (min-width: 448px) and (max-width: 675px) {
  .vc-gaps > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (min-width: 676px) and (max-width: 903px) {
  .vc-gaps > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .vc-gaps > :last-child:nth-child(3n+2) { grid-column: span 2; }
}
@container (min-width: 904px) and (max-width: 1131px) {
  .vc-gaps > :last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .vc-gaps > :last-child:nth-child(4n+2) { grid-column: span 3; }
  .vc-gaps > :last-child:nth-child(4n+3) { grid-column: span 2; }
}
/* A change in a figure: a small chip with an arrow; it takes a colour only when the move is ten per cent or more. */
.vc-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 24px; padding: 0 var(--s-2); border-radius: var(--r-control); background: var(--ground-2); color: var(--text-2); font-size: var(--fs-1); white-space: nowrap; }
.vc-chip.vc-pos { background: var(--ok-wash); color: var(--ok); }
.vc-chip.vc-neg { background: var(--danger-wash); color: var(--danger); }
.vc-kpi .k-foot { align-items: center; }
.vc-mini { display: grid; gap: 2px; margin-top: var(--s-1); }
.vc-mini-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-1); line-height: 1.2; }
.vc-mini-track { display: block; }
.vc-mini-bar { display: block; height: 6px; }
.vc-mini-cur { background: var(--ink); }
.vc-mini-prev { background: var(--line-control); }
/* The period tiles: revenue, checks and average check, each with its change. */
.vc-tiles { display: grid; gap: var(--s-1); margin-top: var(--s-3); }
.vc-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2) var(--s-3); min-height: 44px; padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.vc-tile-label { color: var(--text-2); font-size: var(--fs-2); }
.vc-tile-val { color: var(--ink); font-size: var(--fs-4); font-weight: 300; line-height: var(--lh-data); white-space: nowrap; }
.vc-tiles-note { margin: var(--s-2) 0 var(--s-3); color: var(--text-2); font-size: var(--fs-1); }
@media (min-width: 600px) {
  .vc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  .vc-tile { grid-template-columns: minmax(0, 1fr) auto; align-content: start; padding-top: var(--s-3); }
  .vc-tile-label { grid-column: 1 / -1; }
  .vc-tile .vc-chip { justify-self: end; }
}
@media (min-width: 900px) {
  .vc-tile-val { font-size: var(--fs-5); }
  .vc-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vc-cards > * { grid-column: 1 / -1; }
  .vc-cards > .vc-k-movement:has(+ .vc-k-products), .vc-cards > .vc-k-movement + .vc-k-products { grid-column: span 3; }
}
/* VISUAL-C end */
/* Pay report: a reason under a figure wraps under it instead of widening the table. */
td.num .hint { white-space: normal; max-width: 24ch; margin-left: auto; font-size: var(--fs-1); }

/* Spectre colour code. Owner decisions, David Kim, 2026-10-12: "add some color ... with a strict color code to their meaning", then "stick to Rams' colors" and
   "no browns in these designs. Ever." So: Braun's palette. The groups are greys, not hues; there are only three hues and each has one meaning.
     A / B / C  ink, grey, outline        the group an item is in (the skill's --ink, --text-3, --line-control; no new colour)
     green      --c-up     better than before: moved up the list or up a group, a good outcome (the existing .up class)
     red        --c-down   worse than before: moved down the list or down a group, a bad outcome (the existing .down class)
     orange     --c-watch  read with care: the data is incomplete, unknown or partly recorded; it marks a state of the data, never an item
   A hue is a fill with a plain label (--c-on) or a mark, never a tinted wash with dark coloured text: dark orange or yellow text is brown.
   Test: tests/test_colour_code.py refuses a hue between 20 and 100 degrees with low chroma or low lightness (a brown), checks contrast and tells the hues apart. */
:root {
  --c-up: oklch(0.52 0.13 150);
  --c-down: oklch(0.53 0.19 28);
  --c-watch: oklch(0.64 0.18 50);
  --c-on: oklch(0.985 0.002 85);
  --c-on-watch: oklch(0.2 0.005 85);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --c-up: oklch(0.72 0.14 150);
  --c-down: oklch(0.68 0.17 28);
  --c-watch: oklch(0.78 0.16 55);
  --c-on: oklch(0.2 0.005 85);
  --c-on-watch: oklch(0.2 0.005 85);
} }
:root[data-theme="dark"] {
  --c-up: oklch(0.72 0.14 150);
  --c-down: oklch(0.68 0.17 28);
  --c-watch: oklch(0.78 0.16 55);
  --c-on: oklch(0.2 0.005 85);
  --c-on-watch: oklch(0.2 0.005 85);
}

/* The period tabs and numbers lists of the Insights boards, the colour chips, and the accountant desk (web_accountant_desk.py).
   Written on the tokens and the colour code (spectre-colour.css); no raw colours, no inline-style hooks. Groups are greys, movement is green or red. */
.abc-headline { margin: var(--s-3) 0 var(--s-4); font-size: var(--fs-4); font-weight: 300; line-height: var(--lh-head); color: var(--ink); }
.abc-spans { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: 0 0 var(--s-3); border-bottom: 1px solid var(--line); }
.abc-span { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.abc-span:hover { color: var(--ink); }
.abc-span.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--red); }

.abc-members { margin-top: var(--s-3); }
.abc-members > summary { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; cursor: pointer; }

/* the existing good / bad outcome classes (render.arrow_class: up means good, down means bad, whichever way the number moved) take the code's green and red */
.up, .delta.up { color: var(--c-up); }
.down, .delta.down { color: var(--c-down); }

/* chips: a word on a fill or an outline, never colour alone. Groups are greys; the three hues carry movement and data state. */
.cc-chip { display: inline-block; padding: 0 var(--s-2); font-size: var(--fs-1); line-height: 20px; border-radius: var(--r-control); white-space: nowrap; }
.cc-a { color: var(--on-ink); background: var(--ink); }
.cc-b { color: var(--ink); background: var(--ground-2); border: 1px solid var(--text-3); line-height: 18px; }
.cc-c { color: var(--text-2); background: transparent; border: 1px solid var(--line-control); line-height: 18px; }
.cc-up { color: var(--c-on); background: var(--c-up); }
.cc-down { color: var(--c-on); background: var(--c-down); }
.cc-watch { color: var(--c-on-watch); background: var(--c-watch); }
.cc-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-2) var(--s-5); margin: var(--s-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-2); color: var(--text-2); }
.cc-legend li { display: flex; align-items: baseline; gap: var(--s-3); }

.desk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.desk-tile { padding: var(--s-4) var(--s-5); color: inherit; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); min-height: var(--hit); transition: border-color var(--t-state) var(--ease); }
.desk-tile[data-state="unknown"] { border-top: 3px solid var(--c-watch); }
.desk-tile:hover { border-color: var(--ink); }
.desk-tile:focus-visible { outline: var(--focus); outline-offset: 2px; }
.desk-tile[data-state="unknown"] .k-value { color: var(--text-3); }
/* David, 2026-10-12: "yes, replace the brownish warning colours". The skill's --warn (a brown text on a peach wash) and --tint tokens stay in tokens.css, byte for byte, but nothing
   in the app may show them: every rule that used them is restated here with the colour code (a solid orange chip with an ink label, or a neutral surface with an orange top edge).
   tests/test_colour_code.py fails if a rule using --warn or --tint has no restatement below. */
.banner.warn { background: var(--ground-2); border-top: 3px solid var(--c-watch); }
.banner.warn .kind { color: var(--ink); }
.pill.warn, .tag.warn, .pill.serious, .tag.serious, .state.wait, .state.waiting { background: var(--c-watch); color: var(--c-on-watch); }
.perf-flag { background: var(--ground-2); color: var(--ink); border-top: 3px solid var(--c-watch); }
.techcards-upload-note { background: var(--ground-2); color: var(--ink); border-top: 3px solid var(--c-watch); }
.task-card.task-alert .role-chips .pill { background: var(--c-watch); color: var(--c-on-watch); }
.vc-gap.vc-degraded { border: 1px dashed var(--c-watch); background: var(--ground-2); }
.vc-gap.vc-degraded .vc-gap-state { color: var(--ink); }

/* The Deep Insights page (web_grand.py): a sticky period bar, a bento of five cards and one exploration canvas, each with its plain reading. On the tokens and the colour code; no raw
   colours, no inline style. Marks are dots and lines in an SVG stretched to its box (strokes do not scale); every word is HTML. Ink for the facts, greys for context, red only for the one
   thing to see (the selected period, the peak of the surface, the first pair), orange only for a state of the data (a choice the data cannot support). A dot sits where the data puts it:
   never a lattice. */
.dp-form { margin: 0; }
.dp-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-5); padding: var(--s-2) 0; background: var(--ground); border-bottom: 1px solid var(--line); }
.dp-spans { display: flex; flex-wrap: wrap; }
.dp-span { display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 var(--s-3); color: var(--text-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.dp-span:hover { color: var(--ink); }
.dp-span.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--red); }
.dp-custom > summary, .dp-more > summary, .gr-sub > summary { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-control); text-underline-offset: 4px; cursor: pointer; }
.dp-dates { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-2) 0; }
.dp-dates label { display: flex; flex-direction: column; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-2); }
.dp-bar .button.primary { margin-left: auto; }
.dp-note { margin: calc(var(--s-4) * -1) 0 var(--s-5); color: var(--text-3); font-size: var(--fs-1); }
.dp-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.dp-card { grid-column: span 4; display: flex; flex-direction: column; gap: var(--s-3); margin: 0; min-width: 0; }
.dp-card[data-card="pulse"], .dp-card[data-card="cannibal"], .dp-card[data-card="price"], .dp-card[data-card="weather"] { grid-column: span 6; }
.dp-card[data-card="bleeder"] { grid-column: 1 / -1; }
.dp-card:only-child { grid-column: 1 / -1; }
.dp-card > h2 { margin: 0; font-size: var(--fs-3); font-weight: 500; }
.dp-read { display: flex; flex-direction: column; gap: var(--s-1); }
.dp-big { margin: 0; color: var(--ink); font-size: var(--fs-6); font-weight: 300; letter-spacing: -0.02em; line-height: var(--lh-data); }
.dp-big.dp-unknown { color: var(--text-3); }
.dp-unit { color: var(--text-3); font-size: var(--fs-1); font-weight: 400; letter-spacing: 0; }
.dp-label, .dp-delta, .dp-state { margin: 0; color: var(--text-2); font-size: var(--fs-2); }
.dp-pair { margin: 0; color: var(--ink); font-size: var(--fs-4); font-weight: 300; line-height: var(--lh-head); }
.dp-fig { margin: 0; }
.dp-fig figcaption { color: var(--text-2); font-size: var(--fs-1); line-height: 1.5; }
.dp-plot { position: relative; aspect-ratio: 2 / 1; border-bottom: 1px solid var(--line); }
.dp-plot.dp-tiny { aspect-ratio: 1 / 1; border: 1px solid var(--line); }
.dp-plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dp-svg * { vector-effect: non-scaling-stroke; }
.dp-fig figcaption { margin-top: var(--s-2); }
.dp-pairs-read { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); }
.dp-jump { display: inline-flex; align-items: center; min-height: var(--hit); }
.dp-off { margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-1); }
.dp-off li { margin: 0 0 var(--s-1); }
.dp-dots { fill: none; stroke: var(--ink); stroke-width: 5px; stroke-linecap: round; }
.dp-dots.dp-other { stroke: var(--text-3); stroke-width: 3px; }
.dp-dots.dp-b { stroke: var(--text-2); }
.dp-dots.dp-fast { stroke-width: 7px; }
.dp-dots.dp-slow, .dp-dots.dp-hollow-ring { stroke: var(--text-2); stroke-width: 8px; }
.dp-slow-in, .dp-dots.dp-hollow { fill: none; stroke: var(--panel); stroke-width: 4px; stroke-linecap: round; }
.dp-rings { fill: none; stroke: var(--text-2); stroke-width: 8px; stroke-linecap: round; }
.dp-rings-in { fill: none; stroke: var(--panel); stroke-width: 4px; stroke-linecap: round; }
.dp-trace { fill: none; stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.dp-trace.dp-b { stroke: var(--text-2); stroke-dasharray: 4 3; }
.dp-edge, .dp-split, .dp-axis { fill: none; stroke: var(--line); stroke-width: 1px; }
.dp-iso { fill: none; stroke: var(--ink); stroke-width: 1px; stroke-linejoin: round; }
.dp-iso.dp-neg { stroke: var(--text-2); stroke-dasharray: 3 3; }
.dp-peak { fill: none; stroke: var(--red); stroke-width: 9px; stroke-linecap: round; }
.dp-valley { fill: none; stroke: var(--text-3); stroke-width: 9px; stroke-linecap: round; }
.dp-pill { margin-top: auto; padding: var(--s-3) var(--s-4); background: var(--ground-2); border-radius: var(--r-panel); }
.dp-pill p { max-width: 70ch; margin: 0 0 var(--s-1); color: var(--ink); font-size: var(--fs-2); line-height: var(--lh-body); }
.dp-pill p:last-child { margin-bottom: 0; color: var(--text-2); }
.dp-pill[aria-busy="true"] p { color: var(--text-3); }
.dp-guide strong { font-weight: 500; }
.dp-chart { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-2); min-width: 0; }
.dp-axis-title { margin: 0; font-size: var(--fs-1); color: var(--text-2); }
.dp-y-title, .dp-x-title, .dp-x-ticks { grid-column: 2; }
.dp-x-title { text-align: center; }
.dp-y-ticks { position: relative; min-width: 5ch; font-size: var(--fs-1); color: var(--text-2); font-variant-numeric: tabular-nums; }
.dp-y-ticks span { position: absolute; right: 0; transform: translateY(-50%); white-space: nowrap; }
.dp-y-ticks span:nth-child(1) { top: 4%; }
.dp-y-ticks span:nth-child(2) { top: 50%; }
.dp-y-ticks span:nth-child(3) { top: 96%; }
.dp-x-ticks { position: relative; min-height: 1.5em; font-size: var(--fs-1); color: var(--text-2); font-variant-numeric: tabular-nums; }
.dp-x-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.dp-x-ticks span:nth-child(1) { left: 4%; }
.dp-x-ticks span:nth-child(2) { left: 50%; }
.dp-x-ticks span:nth-child(3) { left: 96%; }
.dp-grid-line { fill: none; stroke: var(--line); stroke-width: 1px; stroke-dasharray: 2 6; }
.dp-band-comparison { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-3) 0; }
.dp-band-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) max-content; gap: var(--s-2); align-items: center; }
.dp-band-row p { margin: 0; font-size: var(--fs-1); color: var(--text-2); }
.dp-band-row svg { width: 100%; height: var(--hit); overflow: visible; }
.dp-point-picker { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-3); font-size: var(--fs-2); color: var(--text-2); }
.dp-point-picker select { width: 100%; min-width: 0; }
.dp-point-readout { min-height: 3lh; margin: var(--s-2) 0; color: var(--ink); font-size: var(--fs-2); overflow-wrap: anywhere; }
.dp-observation { fill: none; stroke: transparent; stroke-width: 16px; stroke-linecap: round; cursor: pointer; }
.dp-observation:hover, .dp-observation:focus-visible, .dp-observation[data-selected] { stroke: var(--red); stroke-width: 9px; outline: none; }
.dp-canvas[data-contours="off"] .dp-iso, .dp-canvas[data-contours="off"] .dp-peak, .dp-canvas[data-contours="off"] .dp-valley { display: none; }
.dp-canvas .dp-peak { stroke: var(--text-2); stroke-width: 12px; }
.dp-peak-in { fill: none; stroke: var(--panel); stroke-width: 6px; stroke-linecap: round; }
.dp-canvas[data-contours="off"] .dp-peak-in { display: none; }
.dp-contour-choice { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); font-size: var(--fs-2); color: var(--text-2); }
.dp-settings > .dp-controls { margin: var(--s-3) 0; }
.gr-sub { margin-top: var(--s-3); }
.dp-canvas { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0 0; }
.dp-canvas > h2 { margin: 0; }
.dp-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-5); }
.dp-seg { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.dp-seg legend { margin-bottom: var(--s-1); padding: 0; color: var(--text-2); font-size: var(--fs-1); }
.dp-opt { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); padding: 0 var(--s-3); color: var(--ink); background: var(--panel); border: 1px solid var(--line-control); border-radius: var(--r-control); font-size: var(--fs-2); cursor: pointer; }
.dp-opt:has(input:checked) { border-color: var(--ink); font-weight: 500; }
.dp-opt:has(input:focus-visible) { outline: var(--focus); outline-offset: 2px; }
.dp-opt input, .dp-slider input { margin: 0; accent-color: var(--ink); }
.dp-opt.off { color: var(--text-3); border-style: dashed; cursor: default; }
.dp-why { color: var(--text-3); font-size: var(--fs-1); }
.dp-slider { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--hit); color: var(--text-2); font-size: var(--fs-2); }
.dp-slider output { min-width: 2ch; color: var(--ink); }
.dp-select { display: inline-flex; flex-direction: column; gap: var(--s-1); color: var(--text-2); font-size: var(--fs-2); }
.dp-refused { margin: 0; padding: var(--s-2) var(--s-3); color: var(--ink); background: var(--ground-2); border-top: 3px solid var(--c-watch); }
.dp-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--s-4); }
.dp-pair { margin: 0; min-width: 0; }
.dp-pair figcaption { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-1); line-height: 1.5; }
.dp-pair.top .dp-plot { outline: 2px solid var(--ink); outline-offset: 2px; }
.dp-mark-red { display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); background: var(--red); border-radius: 50%; }
.dp-role { margin-top: var(--s-4); }
.ins-actions { margin-top: var(--s-5); }
.ins-actions > summary { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--ink); cursor: pointer; }
@media (max-width: 899px) {
  .dp-bento { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .dp-card, .dp-card[data-card="pulse"], .dp-card[data-card="cannibal"] { grid-column: span 4; }
  .dp-card[data-card="bleeder"], .dp-card:only-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .dp-bento { grid-template-columns: minmax(0, 1fr); }
  .dp-card, .dp-card[data-card] { grid-column: auto; }
  .dp-plot.dp-big { aspect-ratio: 4 / 3; }
  .dp-bar .button.primary { margin-left: 0; }
  .dp-span { padding: 0 var(--s-2); }
  .dp-band-row { grid-template-columns: minmax(0, 1fr) max-content; }
  .dp-band-row > p:first-child { grid-column: 1 / -1; }
}

/* Owner's factual brief: no graph, extra accent, or generated reading. */
.ib-summary .ib-period { margin-top: var(--s-5); }
.ib-summary .ib-next, .ib-summary .ib-changes, .ib-summary .ib-evidence { margin-top: var(--s-7); }
.ib-summary .ib-next p { max-width: 70ch; }
.ib-summary .ib-overview table { min-width: 0; }
.ib-summary .ib-overview td { text-align: right; font-variant-numeric: tabular-nums; }
.ib-summary .ib-overview th[scope="row"] { text-align: left; font-weight: 400; }
.ib-summary .ib-limits { color: var(--text-2); }
.ib-summary .ib-changes ol { list-style: none; padding: 0; margin: 0; }
.ib-summary .ib-changes li + li { margin-top: var(--s-6); }
.ib-summary .ib-changes h3 { margin-bottom: var(--s-2); overflow-wrap: anywhere; }
.ib-summary .ib-item-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--s-4); margin: var(--s-4) 0 0; }
.ib-summary .ib-item-values dt { color: var(--text-2); }
.ib-summary .ib-item-values dd { margin: var(--s-2) 0 0; overflow-wrap: anywhere; }
.ib-summary .ib-item-values dd + dd { color: var(--text-2); }
.ib-summary .ib-evidence summary { min-height: 44px; cursor: pointer; }
@media (max-width: 640px) {
  .ib-summary .ib-overview thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ib-summary .ib-overview tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ib-summary .ib-overview th[scope="row"] { grid-column: 1 / -1; padding-bottom: var(--s-2); }
  .ib-summary .ib-overview td { text-align: left; white-space: normal; overflow-wrap: anywhere; padding-top: var(--s-2); }
  .ib-summary .ib-overview td::before { content: attr(data-label); display: block; color: var(--text-2); margin-bottom: var(--s-2); }
  .ib-summary .ib-item-values { gap: var(--s-3); }
}

.spectre-pos-0{--needle:0%}
.spectre-pos-1{--needle:1%}
.spectre-pos-2{--needle:2%}
.spectre-pos-3{--needle:3%}
.spectre-pos-4{--needle:4%}
.spectre-pos-5{--needle:5%}
.spectre-pos-6{--needle:6%}
.spectre-pos-7{--needle:7%}
.spectre-pos-8{--needle:8%}
.spectre-pos-9{--needle:9%}
.spectre-pos-10{--needle:10%}
.spectre-pos-11{--needle:11%}
.spectre-pos-12{--needle:12%}
.spectre-pos-13{--needle:13%}
.spectre-pos-14{--needle:14%}
.spectre-pos-15{--needle:15%}
.spectre-pos-16{--needle:16%}
.spectre-pos-17{--needle:17%}
.spectre-pos-18{--needle:18%}
.spectre-pos-19{--needle:19%}
.spectre-pos-20{--needle:20%}
.spectre-pos-21{--needle:21%}
.spectre-pos-22{--needle:22%}
.spectre-pos-23{--needle:23%}
.spectre-pos-24{--needle:24%}
.spectre-pos-25{--needle:25%}
.spectre-pos-26{--needle:26%}
.spectre-pos-27{--needle:27%}
.spectre-pos-28{--needle:28%}
.spectre-pos-29{--needle:29%}
.spectre-pos-30{--needle:30%}
.spectre-pos-31{--needle:31%}
.spectre-pos-32{--needle:32%}
.spectre-pos-33{--needle:33%}
.spectre-pos-34{--needle:34%}
.spectre-pos-35{--needle:35%}
.spectre-pos-36{--needle:36%}
.spectre-pos-37{--needle:37%}
.spectre-pos-38{--needle:38%}
.spectre-pos-39{--needle:39%}
.spectre-pos-40{--needle:40%}
.spectre-pos-41{--needle:41%}
.spectre-pos-42{--needle:42%}
.spectre-pos-43{--needle:43%}
.spectre-pos-44{--needle:44%}
.spectre-pos-45{--needle:45%}
.spectre-pos-46{--needle:46%}
.spectre-pos-47{--needle:47%}
.spectre-pos-48{--needle:48%}
.spectre-pos-49{--needle:49%}
.spectre-pos-50{--needle:50%}
.spectre-pos-51{--needle:51%}
.spectre-pos-52{--needle:52%}
.spectre-pos-53{--needle:53%}
.spectre-pos-54{--needle:54%}
.spectre-pos-55{--needle:55%}
.spectre-pos-56{--needle:56%}
.spectre-pos-57{--needle:57%}
.spectre-pos-58{--needle:58%}
.spectre-pos-59{--needle:59%}
.spectre-pos-60{--needle:60%}
.spectre-pos-61{--needle:61%}
.spectre-pos-62{--needle:62%}
.spectre-pos-63{--needle:63%}
.spectre-pos-64{--needle:64%}
.spectre-pos-65{--needle:65%}
.spectre-pos-66{--needle:66%}
.spectre-pos-67{--needle:67%}
.spectre-pos-68{--needle:68%}
.spectre-pos-69{--needle:69%}
.spectre-pos-70{--needle:70%}
.spectre-pos-71{--needle:71%}
.spectre-pos-72{--needle:72%}
.spectre-pos-73{--needle:73%}
.spectre-pos-74{--needle:74%}
.spectre-pos-75{--needle:75%}
.spectre-pos-76{--needle:76%}
.spectre-pos-77{--needle:77%}
.spectre-pos-78{--needle:78%}
.spectre-pos-79{--needle:79%}
.spectre-pos-80{--needle:80%}
.spectre-pos-81{--needle:81%}
.spectre-pos-82{--needle:82%}
.spectre-pos-83{--needle:83%}
.spectre-pos-84{--needle:84%}
.spectre-pos-85{--needle:85%}
.spectre-pos-86{--needle:86%}
.spectre-pos-87{--needle:87%}
.spectre-pos-88{--needle:88%}
.spectre-pos-89{--needle:89%}
.spectre-pos-90{--needle:90%}
.spectre-pos-91{--needle:91%}
.spectre-pos-92{--needle:92%}
.spectre-pos-93{--needle:93%}
.spectre-pos-94{--needle:94%}
.spectre-pos-95{--needle:95%}
.spectre-pos-96{--needle:96%}
.spectre-pos-97{--needle:97%}
.spectre-pos-98{--needle:98%}
.spectre-pos-99{--needle:99%}
.spectre-pos-100{--needle:100%}
.spectre-width-0{width:0%}
.spectre-width-1{width:1%}
.spectre-width-2{width:2%}
.spectre-width-3{width:3%}
.spectre-width-4{width:4%}
.spectre-width-5{width:5%}
.spectre-width-6{width:6%}
.spectre-width-7{width:7%}
.spectre-width-8{width:8%}
.spectre-width-9{width:9%}
.spectre-width-10{width:10%}
.spectre-width-11{width:11%}
.spectre-width-12{width:12%}
.spectre-width-13{width:13%}
.spectre-width-14{width:14%}
.spectre-width-15{width:15%}
.spectre-width-16{width:16%}
.spectre-width-17{width:17%}
.spectre-width-18{width:18%}
.spectre-width-19{width:19%}
.spectre-width-20{width:20%}
.spectre-width-21{width:21%}
.spectre-width-22{width:22%}
.spectre-width-23{width:23%}
.spectre-width-24{width:24%}
.spectre-width-25{width:25%}
.spectre-width-26{width:26%}
.spectre-width-27{width:27%}
.spectre-width-28{width:28%}
.spectre-width-29{width:29%}
.spectre-width-30{width:30%}
.spectre-width-31{width:31%}
.spectre-width-32{width:32%}
.spectre-width-33{width:33%}
.spectre-width-34{width:34%}
.spectre-width-35{width:35%}
.spectre-width-36{width:36%}
.spectre-width-37{width:37%}
.spectre-width-38{width:38%}
.spectre-width-39{width:39%}
.spectre-width-40{width:40%}
.spectre-width-41{width:41%}
.spectre-width-42{width:42%}
.spectre-width-43{width:43%}
.spectre-width-44{width:44%}
.spectre-width-45{width:45%}
.spectre-width-46{width:46%}
.spectre-width-47{width:47%}
.spectre-width-48{width:48%}
.spectre-width-49{width:49%}
.spectre-width-50{width:50%}
.spectre-width-51{width:51%}
.spectre-width-52{width:52%}
.spectre-width-53{width:53%}
.spectre-width-54{width:54%}
.spectre-width-55{width:55%}
.spectre-width-56{width:56%}
.spectre-width-57{width:57%}
.spectre-width-58{width:58%}
.spectre-width-59{width:59%}
.spectre-width-60{width:60%}
.spectre-width-61{width:61%}
.spectre-width-62{width:62%}
.spectre-width-63{width:63%}
.spectre-width-64{width:64%}
.spectre-width-65{width:65%}
.spectre-width-66{width:66%}
.spectre-width-67{width:67%}
.spectre-width-68{width:68%}
.spectre-width-69{width:69%}
.spectre-width-70{width:70%}
.spectre-width-71{width:71%}
.spectre-width-72{width:72%}
.spectre-width-73{width:73%}
.spectre-width-74{width:74%}
.spectre-width-75{width:75%}
.spectre-width-76{width:76%}
.spectre-width-77{width:77%}
.spectre-width-78{width:78%}
.spectre-width-79{width:79%}
.spectre-width-80{width:80%}
.spectre-width-81{width:81%}
.spectre-width-82{width:82%}
.spectre-width-83{width:83%}
.spectre-width-84{width:84%}
.spectre-width-85{width:85%}
.spectre-width-86{width:86%}
.spectre-width-87{width:87%}
.spectre-width-88{width:88%}
.spectre-width-89{width:89%}
.spectre-width-90{width:90%}
.spectre-width-91{width:91%}
.spectre-width-92{width:92%}
.spectre-width-93{width:93%}
.spectre-width-94{width:94%}
.spectre-width-95{width:95%}
.spectre-width-96{width:96%}
.spectre-width-97{width:97%}
.spectre-width-98{width:98%}
.spectre-width-99{width:99%}
.spectre-width-100{width:100%}
.spectre-spark-3{height:3px}
.spectre-spark-4{height:4px}
.spectre-spark-5{height:5px}
.spectre-spark-6{height:6px}
.spectre-spark-7{height:7px}
.spectre-spark-8{height:8px}
.spectre-spark-9{height:9px}
.spectre-spark-10{height:10px}
.spectre-spark-11{height:11px}
.spectre-spark-12{height:12px}
.spectre-spark-13{height:13px}
.spectre-spark-14{height:14px}
.spectre-spark-15{height:15px}
.spectre-spark-16{height:16px}
.spectre-spark-17{height:17px}
.spectre-spark-18{height:18px}
.spectre-spark-19{height:19px}
.spectre-spark-20{height:20px}
.spectre-spark-21{height:21px}
.spectre-spark-22{height:22px}
.spectre-spark-23{height:23px}
.spectre-spark-24{height:24px}
.spectre-spark-25{height:25px}
.spectre-spark-26{height:26px}
.spectre-spark-27{height:27px}
.spectre-spark-28{height:28px}
.spectre-spark-29{height:29px}
.spectre-spark-30{height:30px}
.spectre-spark-31{height:31px}
.spectre-spark-32{height:32px}
.spectre-spark-33{height:33px}
.spectre-spark-34{height:34px}
.spectre-spark-35{height:35px}
.spectre-spark-36{height:36px}