/* Tokens follow the accepted layout (docs/design/2026-11-09-ask-and-answer, issue #63): a cool grey page,
   white cards with hairline borders, near-black ink, a teal brand, Inter + JetBrains Mono as stacks with
   system fallbacks (the page loads nothing from outside its own origin). Single-series bars are the brand
   teal (--bar), downtime minutes the orange (--bar-2); stacked series keep blue / orange / green / purple
   (--s1..--s4). Status colors (--good/--bad/--neutral/--warn) are reserved for deltas and notes, never a series.
   Light is the default whatever the OS prefers (issue #36); the dark tokens apply only under
   [data-theme="dark"], which theme.js sets from the visitor's pinned choice. Light-theme series
   colors are checked at 3:1 (WCAG 1.4.11) against the chart panel, --surface-2, where every chart
   mark, legend swatch and heatmap cell is drawn (tests/test_ui.cjs). */
:root{
 color-scheme:light;
 --bg:#f3f5f5;--surface:#ffffff;--surface-2:#f8fafa;--surface-3:#eef2f2;
 --ink:#1b1b1b;--ink-2:#3c4242;--ink-3:#5a5f5f;--line:#d5dbdb;--line-2:#eef2f2;--rule:#e3e7e7;
 --brand:#0b6e66;--brand-ink:#084f4a;--brand-soft:#e6f2f1;--accent:#0b6e66;
 --s1:#2a78d6;--s2:#e85318;--s3:#159c6b;--s4:#8a5cc7;--prev:#85857f;--grid:#e3e7e7;--target:#e85318;--bar:#0b6e66;--bar-2:#c96a2c;
 --good:#0ca30c;--good-soft:#e9f6e9;--bad:#d03b3b;--bad-soft:#fbeaea;--neutral:#8a8a84;--neutral-soft:#eef2f2;
 --warn:#fab219;--warn-soft:#fff7e3;--warn-ink:#8a5a00;
 --code-bg:#f1f4f4;--code-ink:#1b1b1b;--focus:#2a78d6;
 --radius:12px;--radius-s:8px;--gap:12px;--pad:18px;
 --sans:Inter,'Inter Tight',system-ui,-apple-system,"Segoe UI",sans-serif;--mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:16px;-webkit-font-smoothing:antialiased}
:root[data-theme="dark"]{
 color-scheme:dark;
 --bg:#121212;--surface:#1a1a19;--surface-2:#222221;--surface-3:#2a2a28;
 --ink:#ecece8;--ink-2:#b5b5af;--ink-3:#93938d;--line:#3a3a37;--line-2:#262624;--rule:#2a2a28;
 --brand:#8fd1bb;--brand-ink:#8fd1bb;--brand-soft:#1b2a25;--accent:#8fd1bb;
 --s1:#3987e5;--s2:#f0784a;--s3:#2ec48a;--s4:#a988df;--prev:#56564f;--grid:#2e2e2c;--target:#f0784a;--bar:#3fa89c;--bar-2:#e08a4f;
 --good:#3fbf6a;--good-soft:#163424;--bad:#ef6a5e;--bad-soft:#3b1f1c;--neutral:#8a8a84;--neutral-soft:#262624;
 --warn:#fab219;--warn-soft:#3a2c0e;--warn-ink:#f1c66a;
 --code-bg:#1b1b1a;--code-ink:#ecece8;--focus:#3987e5}

*{box-sizing:border-box}body{margin:0;background:var(--bg)}
[hidden]{display:none!important}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--accent)}
/* App shell, as on the paper network: a sticky header with the brand, the guide link, the mode badge,
   the theme switch and the scope strip; the page under it is the question and the evidence. */
.wrap{max-width:1380px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-right,0px))}
header.app{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--rule)}
header.app .wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0;flex-wrap:wrap;margin-right:auto}
.brand .home{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.brand .home:hover{color:var(--accent)}
.brand b{font-size:17px;font-weight:600;letter-spacing:-.2px;white-space:nowrap}
.brand span{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.nav-btn{font-family:var(--mono);font-size:12px;color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);border-radius:6px;min-height:34px;padding:0 11px;display:inline-flex;align-items:center;white-space:nowrap}
.nav-btn:hover{color:var(--accent);border-color:var(--accent)}
.badge{border:1px solid var(--rule);color:var(--ink-3);padding:0 11px;min-height:34px;display:inline-flex;align-items:center;border-radius:6px;font-size:12px;font-family:var(--mono);white-space:nowrap}
.theme-toggle{background:none;border:1px solid var(--rule);border-radius:6px;color:var(--ink-2);font-family:var(--mono);font-size:12px;min-height:34px;padding:0 11px;cursor:pointer}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}.theme-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.title{max-width:1380px;margin:0 auto;padding:22px 16px 6px}
.title .meta{font-family:var(--mono);font-size:13px;color:var(--ink-3);margin:0 0 8px}
h1{font-size:clamp(26px,3.6vw,34px);line-height:1.2;font-weight:500;letter-spacing:-.5px;margin:0 0 10px}
.title .lede{color:var(--ink-2);font-size:17px;margin:0;max-width:72ch;line-height:1.55}
h2{font-size:17px;font-weight:600;letter-spacing:-.2px;margin:0}
main.wrap{padding-top:12px;padding-bottom:64px}
.mono{font-family:var(--mono)}

/* Controls */
.controls{display:flex;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:var(--gap)}
label{display:flex;flex-direction:column;gap:7px;font-size:.875rem;font-weight:500}
select,textarea,input[type=date],input[type=password],input[type=text]{font:inherit;border:1px solid var(--line);border-radius:6px;background:var(--surface);padding:10px 11px;color:var(--ink)}
select{min-width:150px}
.check{flex-direction:row;align-items:center;margin-bottom:12px;font-weight:400}.check input{width:18px;height:18px;accent-color:var(--brand)}
button{font:inherit;font-family:var(--mono);font-size:12.5px;font-weight:500;border:1px solid var(--brand);border-radius:8px;padding:0 14px;min-height:38px;background:var(--brand);color:var(--surface);cursor:pointer}
button:hover{filter:brightness(1.15)}button:disabled{opacity:.45;cursor:not-allowed}
.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:0 12px}
.secondary:hover:not(:disabled){color:var(--accent);border-color:var(--accent);filter:none}
button:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,input:focus-visible,a:focus-visible,.table-scroll:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#api-key{min-width:260px}

/* ---- The shell (issues #63, #86; docs/design/2026-11-09-ask-and-answer): a left rail that says what you are
   looking at and offers the canned questions; beside it a transcript of answer cards, oldest at the top, the open
   (newest) card at the bottom, and the ask bar pinned under the transcript. The page itself never scrolls: the
   header, the rail and the ask bar stay put and only the transcript pane does (the rail gets its own scroll only if
   it is taller than the window, which a 720-px-tall window does not need). At 1440x1040 the open card fits. */
.shell-page header.app{position:static;background:var(--surface)}
.shell-page header.app .wrap{max-width:1440px;padding:10px 28px;gap:14px}
.shell-page .brand{align-items:center;gap:14px}
.shell-page .brand b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.shell-page .badge{border:0;background:var(--surface-3);color:var(--ink-3);border-radius:999px;font-family:var(--sans);font-size:12px;font-weight:500;min-height:26px;padding:0 10px}
.top-link,.shell-page .evals-badge{font-size:13px;color:var(--brand);text-decoration:none;border:0;margin:0;padding:0;min-height:0;font-family:var(--sans)}
.top-link:hover,.shell-page .evals-badge:hover{color:var(--brand-ink);text-decoration:underline}
.shell-page .theme-toggle{border-color:var(--line);border-radius:8px;color:var(--ink);font-family:var(--sans);font-size:13px;min-height:32px;background:var(--surface)}
.shell{display:flex;gap:20px;align-items:flex-start;max-width:1440px;margin:0 auto;padding:14px 28px 40px}
.shell>main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px}
body.shell-page{height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.shell-page header.app{flex:0 0 auto}
.shell-page .shell{flex:1 1 auto;min-height:0;width:100%;align-items:stretch;padding:14px 28px max(12px,env(safe-area-inset-bottom,0px))}
.shell-page .shell>main{min-height:0;gap:10px}
.shell-page .rail{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* The transcript pane: the one scroller. Earlier cards (DOM: after #card, newest first) stack above the open card,
   oldest at the top; app.js keeps the open card in view while it fills, unless the reader has scrolled up (#86). */
.transcript{order:1;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:auto;scrollbar-gutter:stable;position:relative;display:flex;flex-direction:column;gap:14px;padding:4px 6px 4px 4px;margin:-4px -6px -4px -4px}
.transcript>*{flex-shrink:0}
.transcript>#earlier{order:-1}
.composer{order:2;flex:0 0 auto;position:relative}
.new-pill{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);z-index:4;min-height:30px;padding:0 14px;border-radius:999px;font-family:var(--sans);font-size:13px;font-weight:600;box-shadow:0 4px 14px rgb(0 0 0 / .18)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* The rail */
.rail{flex:0 0 288px;min-width:0;display:flex;flex-direction:column;gap:12px}
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin:0;display:flex;flex-direction:column;gap:8px}
.panel-title{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0}
.panel-note{font-size:12px;line-height:1.45;color:var(--ink-3);margin:0}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:400;color:var(--ink-2)}
.field-label{font-size:13px;color:var(--ink-2);font-weight:400}
.day-picker{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--surface)}
.day-picker input{flex:1;min-width:0;border:0;border-radius:0;padding:6px 8px;min-height:34px;font-size:13px}
.day-picker .step{background:var(--surface-2);color:var(--ink-2);border:0;border-radius:0;padding:0 11px;font-size:1.05rem;line-height:1;min-height:34px;font-family:var(--sans)}
.day-picker .step:first-child{border-right:1px solid var(--line)}.day-picker .step:last-child{border-left:1px solid var(--line)}
.seg{display:inline-flex;border:1px solid var(--grid);border-radius:8px;overflow:hidden;background:var(--surface-2)}
.seg-btn{font-family:var(--mono);font-size:12px;font-weight:500;min-height:34px;padding:0 11px;white-space:nowrap;border:0;border-radius:0;background:transparent;color:var(--ink-2)}
.seg-btn+.seg-btn{border-left:1px solid var(--grid)}
.seg-btn[aria-pressed="true"]{background:var(--brand);color:var(--surface)}
.seg-btn:hover:not([aria-pressed="true"]):not(:disabled){color:var(--ink);background:var(--surface-3);filter:none}
.seg-btn:focus-visible{outline-offset:-3px}
.rail .seg{display:flex;gap:6px;border:0;border-radius:0;overflow:visible;background:none}
.rail .seg-btn,.rail .seg-btn+.seg-btn{flex:1;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:400;padding:0 2px}
.rail .seg-btn[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--surface);font-weight:600}
.scope-sentence{margin:0;padding:0;font-size:12px;line-height:1.45;color:var(--ink-3)}
.scope-sentence:empty{display:none}
.day-note{margin:0;padding:8px 10px;border-left:2px solid var(--warn);background:var(--warn-soft);color:var(--warn-ink);font-size:12.5px;line-height:1.45;border-radius:0 8px 8px 0}
.canned-list{display:flex;flex-direction:column;gap:5px}
.canned{display:flex;align-items:center;text-decoration:none;cursor:pointer;text-align:left;min-height:32px;padding:5px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--surface-2);color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:400}
.canned:hover{border-color:var(--brand);filter:none}
.canned[hidden]{display:none}
.more-questions{margin:0;border:0;padding:0}
.more-questions>summary{min-height:26px;font-family:var(--sans);font-size:12.5px;color:var(--brand)}
.more-questions[open]>summary{margin-bottom:6px}
.rates-grid{display:grid;grid-template-columns:1fr auto;gap:6px 8px;margin:0;font-size:13px}
.rates-grid dt{color:var(--ink-2)}.rates-grid dd{margin:0;text-align:right;font-weight:600}.rates-grid .unset{color:var(--warn-ink)}
.rates button{min-height:32px;font-family:var(--sans);font-size:13px}
/* The rates panel and the editor (#31b): each rate with its source; a rate of the visitor's own reads in the brand ink. */
.rates-grid dd .src{display:block;font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-3)}
.rates-grid dd.yours{color:var(--brand-ink)}.rates-grid dd.yours .src{color:var(--brand-ink)}
.rates .seg{width:100%}
.rates-form{display:flex;flex-direction:column;gap:8px;margin:0}
.rates-fields{display:flex;flex-direction:column;gap:8px}
.rate-field{display:flex;flex-direction:column;gap:3px;margin:0}
.rate-field .field-label{display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.rate-field .src{font-family:var(--mono);font-size:10.5px;font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0}
.rate-field input{min-height:32px;padding:4px 10px;font-size:14px;font-family:var(--mono);border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
.rate-field input[aria-invalid="true"]{border-color:var(--bad)}
.rate-error{font-size:12px;color:var(--bad);min-height:0}.rate-error:empty{display:none}
.rates-actions{display:flex;gap:8px;justify-content:space-between}
.advanced{display:block}
.advanced>summary{min-height:22px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.advanced>*+*{margin-top:10px}
.advanced select,.advanced input[type=password]{min-height:34px;padding:6px 10px;font-size:13px;min-width:0;width:100%}
.advanced #reset{min-height:32px;font-family:var(--sans);font-size:13px;width:100%}
.switch{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;margin:0;font-size:13px;font-weight:500}
.switch small{grid-column:2;color:var(--ink-3);font-size:12px;line-height:1.45;font-weight:400}
.rail-toggle,.rail-close{display:none}
/* Shorter windows (#86): the same rail, packed so it fits beside the transcript without its own scroll. Below 1080 px
   tall the header, the gaps and the rates panel tighten (its button moves onto its title row); below 830 px the
   canned questions also sit two to a row, and the period report button takes the free cell after the last one.
   At 1280x720 the whole rail fits under Day, Week and Month. Nothing is hidden. */
@media(min-width:851px) and (max-height:1079px){
 .shell-page header.app .wrap{padding-top:6px;padding-bottom:6px}
 .shell-page .shell{padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
 .rail{gap:6px}
 .panel{padding:7px 12px;gap:5px}
 .field{gap:2px}.field-label{line-height:1.25}
 .day-picker input,.day-picker .step,.rail .seg-btn{min-height:30px}
 .scope-sentence,.panel-note{line-height:1.3}
 .canned-list{gap:4px}.rail .canned{min-height:28px}
 .more-questions>summary{min-height:22px}
 .rates{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 8px}
 .rates>.panel-title{grid-area:1/1}.rates>#rates-change{grid-area:1/2;min-height:24px;padding:0 9px;font-size:12px}
 .rates>.rates-grid,.rates>.panel-note,.rates>.field,.rates>.rates-form{grid-column:1/-1}
 .rates-grid{grid-template-columns:repeat(4,auto);grid-template-rows:auto auto;grid-auto-flow:column;justify-content:space-between;gap:0 10px;font-size:12.5px}.rates-grid dd{text-align:left}
 /* #31b: the title row holds Show as, the last row the note and Change rates; the editor opens under the grid */
 .rates{gap:4px 8px;grid-template-columns:auto 1fr auto}
 .rates>.panel-title{grid-area:1/1}.rates>.units-field{grid-area:1/2/2/4;justify-self:end}.rates>.units-field .field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .rates>.units-field .seg{width:auto}.rates>.units-field .seg-btn{min-height:24px;font-size:12px;padding:0 9px;flex:none}
 .rates>.rates-grid{grid-area:2/1/3/4}.rates>.rates-form{grid-column:1/-1;grid-row:3}
 .rates>.panel-note{grid-area:4/1/5/3;font-size:11.5px}.rates>#rates-change{grid-area:4/3}
 .rates-grid dd .src{line-height:1.1}
 .advanced>summary{min-height:20px}
}
@media(min-width:851px) and (max-height:829px){
 .shell-page .rail{flex-basis:288px}
 .day-picker input,.day-picker .step,.rail .seg-btn{min-height:28px}
 .asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .asks>*{grid-column:1/-1}.asks>#examples{display:contents}
 .asks>#report{grid-column:auto;order:1}.asks>.more-questions{order:2}.asks>.panel-note{order:3}
 .more-questions .canned-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
 .rail .canned{padding:3px 7px;font-size:12.5px;line-height:1.15}
 .rates-grid{font-size:12px;line-height:1.2}.rates-grid dd .src{font-size:10px}
 .rates>.panel-note{font-size:11px;line-height:1.2}
 .rates{padding:5px 12px;gap:3px 8px}.rates>#rates-change,.rates>.units-field .seg-btn{min-height:22px}
}

/* The ask bar */
.askbar{display:flex;gap:10px;align-items:flex-end;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:8px 8px 8px 16px;box-shadow:0 -6px 18px -12px rgb(0 0 0 / .25)}
.askbar>#status{align-self:center}
.askbar:has(#question:focus-visible){outline:3px solid var(--focus);outline-offset:3px}   /* the input's focus ring, drawn on the bar it fills */
#card-title:focus-visible{outline-offset:4px}
#question{flex:1;min-width:0;height:40px;min-height:40px;max-height:148px;border:0;border-radius:0;padding:9px 0;background:transparent;font-size:15px;line-height:22px;resize:none;overflow-y:auto;display:block}   /* a textarea: Enter sends, Shift+Enter is a new line, it grows to about six lines (#86) */
#question:focus-visible{outline:none}
#question::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line in the empty box, however narrow */
#status{font-size:12px;color:var(--ink-3);font-family:var(--mono);white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}
.askbar button{height:40px;min-height:40px;border-radius:10px;font-family:var(--sans);font-size:14px}
#submit{padding:0 18px;font-weight:600}
button.analyst{display:inline-flex;align-items:center;gap:8px;padding:0 14px}button.analyst svg{color:var(--brand)}   /* the button only: the analyst's card is .message.analyst, a block */

/* The answer card: title line, query box, summary, charts side by side, KPI tiles, footer with the exports */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;min-width:0;max-width:100%}
.answer{border-radius:14px;padding:14px 22px 10px;display:flex;flex-direction:column;gap:10px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
#card-title{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.card-meta{font-size:12px;color:var(--ink-3)}
.answer.idle #card-title{color:var(--ink-2)}
.answer.failed{border-color:color-mix(in srgb,var(--bad) 45%,var(--rule))}
#messages{line-height:1.5;font-size:13.5px;margin:0}
#messages:empty,#charts:empty,#heatmaps:empty,#metrics:empty,#tables:empty,#context:empty{display:none}
.empty{color:var(--ink-3);border-left:2px solid var(--rule);padding:8px 14px;margin:0}
.message{padding:0}
.message+.message{margin-top:8px}
.message strong{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px;font-weight:600}
.message.error{color:var(--bad)}.message p{margin:0 0 4px}.message p:last-child{margin-bottom:0}
#charts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.card-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;border-top:1px solid var(--line-2);padding-top:10px;font-size:12px;color:var(--ink-3)}
.report-actions{display:flex;gap:8px 14px;flex-wrap:wrap;align-items:center}
.card-foot a{color:var(--brand)}
.card-foot button{min-height:28px;padding:0 10px;font-family:var(--sans);font-size:12px}
.answer #tables>details,.answer #execution{margin-top:0;border-top:1px solid var(--line-2);padding-top:6px}
.answer #tables{display:flex;flex-direction:column;gap:6px}
.answer #execution:not([open]){display:none}   /* opened from the footer link or a query's "What came back" */
.earlier-list{display:flex;flex-direction:column-reverse;gap:14px}.earlier-list:empty{display:none}   /* newest first in the DOM, oldest at the top on screen (#86) */
.earlier{display:flex;justify-content:space-between;align-items:center;gap:16px;border-radius:14px;padding:10px 22px;color:var(--ink-3)}
.earlier-text{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;min-width:0}
.earlier-text strong{font-size:15px;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}.earlier-text span{font-size:12px}
.earlier.failed .earlier-text span{color:var(--bad)}
.earlier button{min-height:30px;font-family:var(--sans);font-size:12px}
/* An earlier card keeps its whole answer under its title line (#86): the same parts as the open card, minus the
   per-step data and the exports, which come back with Open. */
.earlier.drawn{flex-wrap:wrap;padding:14px 22px;gap:10px 16px;color:var(--ink)}
.earlier.drawn .earlier-text strong{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.entry-body{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:10px}
.entry-body>:empty{display:none}
.entry-body .messages{line-height:1.5;font-size:13.5px}
.entry-body .charts{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.entry-body .tables{display:flex;flex-direction:column;gap:6px}.entry-body .tables>details{margin-top:0;border-top:1px solid var(--line-2);padding-top:6px}
/* The skeleton: grey blocks where the query box, the summary and the charts will land; the answer fills in place */
.skel-block{display:flex;flex-direction:column;gap:9px;padding:6px 0}
.skel{display:block;height:11px;border-radius:6px;background:var(--surface-3)}
.queries .skel{background:var(--rule)}
.skel.w45{width:45%}.skel.w60{width:60%}.skel.w70{width:70%}.skel.w90{width:90%}
.chart.skel-chart{height:210px}
.page-foot{margin-top:6px;padding-top:12px}
.scope-note{margin:0;padding:0;font-size:12px;color:var(--ink-3);line-height:1.5}

/* Build guide and layout */
.build-guide{background:var(--surface);border:1px solid var(--grid);border-radius:14px;padding:16px 20px;margin:0 0 24px}
.build-guide summary{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:500}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}.guide-grid h3{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}.guide-grid p{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin:0}
.muted{color:var(--ink-3);font-size:.9rem;line-height:1.55}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}

/* Shift KPI tiles: one row of the card */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.metric{padding:8px 12px;background:var(--surface);border:1px solid var(--rule);border-radius:10px;display:flex;flex-direction:column;gap:1px;min-width:0}
.metric .label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.metric .value{font-size:20px;font-weight:700;line-height:1.2}
.metric .value small{font-size:12px;font-weight:500;color:var(--ink-3);margin-left:4px}
.metric .sub{font-size:12px;color:var(--ink-3)}.metric .sub.flag{color:var(--warn-ink)}

/* KPI strip: period tiles with a delta chip colored by the tool's change label */
.kpis:empty{display:none}
.kpis{margin:0}
.kpis-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:8px;font-size:13px}
.kpis-head .mono{font-size:.72rem}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.kpi-grid:not(.expanded) .tile.extra{display:none}
.tile{background:var(--surface);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:3px;min-height:88px;border:1px solid var(--rule)}
.tile.better{border-color:color-mix(in srgb,var(--good) 45%,transparent)}.tile.worse{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.tile .l{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.tile .v{font-size:20px;font-weight:700;line-height:1.15;margin-top:2px}
.tile .v small{font-size:.72rem;font-weight:400;color:var(--ink-3);margin-left:3px;letter-spacing:0}
.tile .f{margin-top:auto;display:flex;flex-direction:column;gap:3px;padding-top:6px}
.tile .prev{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
.delta{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--neutral-soft);color:var(--neutral);white-space:nowrap}
.delta.better{background:var(--good-soft);color:var(--good)}.delta.worse{background:var(--bad-soft);color:var(--bad)}
.delta.withheld{font-weight:500;font-style:italic}
.kpis .more{margin-top:10px;font-size:.82rem;padding:7px 11px}
.prime-trail{margin-top:12px;border-top:0;padding-top:0}.prime-trail summary{font-size:.8rem;font-family:var(--mono);color:var(--ink-3);font-weight:500}

/* Charts */
.chart{margin:0;padding:10px 14px;background:var(--surface-2);border:1px solid var(--rule);border-radius:12px;position:relative;min-width:0}
.chart>.query-link{position:absolute;top:10px;right:14px;margin:0}
.chart>.muted,.chart>.warning-note{font-size:12px;line-height:1.4;margin:0 0 4px}
.chart svg{max-width:620px}
.speed-box{position:relative}.speed-box .more{position:absolute;right:0;bottom:0;margin:0;min-height:24px;padding:0 8px;font-size:11px}
.heatmap{max-width:660px}
.chart h3{font-size:14px;font-weight:600;margin:0 0 4px;letter-spacing:0;padding-right:64px}.chart .muted,.heatmap .muted{color:var(--ink-2)}   /* chart captions read at 4.5:1 on light (#36) */
.chart svg{width:100%;height:auto;display:block}
.chart text{font-family:var(--mono);font-size:11.5px;fill:var(--ink-2)}
.chart .bar,.chart .bar.cur{fill:var(--bar)}.chart .bar.minutes{fill:var(--bar-2)}.chart .bar.prev{fill:var(--prev)}.chart .bar.vital{fill:var(--bar)}.chart .bar.rest{fill:var(--prev)}.chart .incomplete,.chart .bar.incomplete{fill:var(--neutral)}
.chart .target{stroke:var(--target);stroke-width:3}
/* speed variance waterfall (#92): a loss in the warm series, an offset in the cool one, the two ends as level marks */
.chart .bar.loss{fill:var(--s2)}.chart .bar.offset{fill:var(--bar)}.chart .level{stroke:var(--prev);stroke-width:2}.chart .dot.level{fill:var(--prev);stroke:var(--surface);stroke-width:2}.chart .connector{stroke:var(--grid);stroke-width:1}
.lg .sw.loss{background:var(--s2)}.lg .sw.offset{background:var(--bar)}.lg .sw.level{background:var(--prev)}
.chart .band{fill:var(--surface-3)}.chart .bar.out{fill:var(--s2)}.chart .dot.out{fill:var(--s2)}.lg .sw.out{background:var(--s2)}.lg .sw.band{background:var(--surface-3);border:1px solid var(--grid)}
.chart .grid{stroke:var(--grid);stroke-width:1}.chart .grid.base{stroke:var(--ink-3)}
.chart .tick{font-size:11px;fill:var(--ink-2)}.chart .val.small{font-size:11px}.chart .lbl{fill:var(--ink-2)}.chart .val{fill:var(--ink)}
.chart .seg.s1{fill:var(--s1)}.chart .seg.s2{fill:var(--s2)}.chart .seg.s3{fill:var(--s3)}.chart .seg.s4{fill:var(--s4)}.chart .inseg{fill:#000;font-size:11px}.chart .inseg.s4{fill:#fff}
.chart .line{fill:none;stroke:var(--bar);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--bar);stroke:var(--surface);stroke-width:2}.chart .dot.partial{fill:var(--surface);stroke:var(--bar);stroke-width:2}
.chart text[tabindex]:focus-visible,.chart circle:focus-visible{outline:2px solid var(--focus)}
.lg{font-family:var(--mono);font-size:11px;color:var(--ink-2);display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.lg span{display:inline-flex;align-items:center;gap:5px}.lg .sw{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--bar)}.lg .sw.s1{background:var(--s1)}
.lg .sw.prev,.lg .sw.rest{background:var(--prev)}.lg .sw.s2{background:var(--s2)}.lg .sw.s3{background:var(--s3)}.lg .sw.s4{background:var(--s4)}
.subchart{margin-top:16px}.subchart h4{font-size:.85rem;margin:0 0 8px;font-weight:600;color:var(--ink-2)}
.warning-note{color:var(--warn-ink);background:var(--warn-soft);padding:10px 12px;font-size:.875rem;border-radius:8px;border-left:2px solid var(--warn)}

/* Tables */
.table-scroll{overflow:auto;max-height:440px;margin-top:10px;border:1px solid var(--grid);border-radius:8px}
table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:11.5px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--grid);min-width:90px;vertical-align:top}
th{position:sticky;top:0;background:var(--surface-2);z-index:1;white-space:nowrap;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
td{max-width:360px;overflow-wrap:anywhere;color:var(--ink-2)}td:first-child{color:var(--ink)}

/* Trace */
details{margin-top:22px;border-top:1px solid var(--rule);padding-top:14px}
summary{cursor:pointer;font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink-2);min-height:32px;display:flex;align-items:center;gap:8px}summary:hover{color:var(--accent)}
#calls{font-weight:400;font-size:.85rem;color:var(--ink-3);font-family:var(--mono)}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px;line-height:1.6;background:var(--code-bg);color:var(--code-ink);border:1px solid var(--rule);padding:14px 16px;border-radius:8px;max-height:350px;overflow:auto;font-family:var(--mono)}
.trace-step{border-left:3px solid var(--line);padding-left:12px;margin-top:12px;border-top:0;padding-top:0}
.trace-step.failed{border-left-color:var(--bad)}
.trace-sum{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-weight:500;font-size:.85rem;padding:6px 0}
.trace-sum .tool{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);background:var(--code-bg);padding:2px 6px;border-radius:4px}
.trace-sum .args{font-size:.74rem;color:var(--ink-2);overflow-wrap:anywhere;flex:1 1 200px}
.trace-sum .facts{font-size:.72rem;color:var(--ink-3);white-space:nowrap}
.trace-meta{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;margin:6px 0 8px;font-size:.78rem}
.trace-meta dt{font-family:var(--mono);color:var(--ink-3)}.trace-meta dd{margin:0;overflow-wrap:anywhere;font-family:var(--mono);color:var(--ink-2)}
.trace-sql,.trace-json,.trace-context{margin-top:6px;border-top:0;padding-top:0}
.trace-sql summary,.trace-json summary,.trace-context summary{font-size:.78rem;font-family:var(--mono);color:var(--ink-3);font-weight:500}
.trace-sql pre,.trace-json pre,.trace-context pre{margin-top:6px}
code{font-family:var(--mono)}

/* Query box (#40): the compact trace at the top of the answer, Datasette-style. One block per tool step:
   tool(arguments) · rows · ms on the summary, the SQL with its bound values and a copy button inside. Step 1
   is open; the rest are one line each with the SQL on tap. Charts and tables carry a link back to their box. */
.queries:empty{display:none}
.queries{margin:0;border:1px solid var(--rule);border-radius:10px;background:var(--surface-2);padding:6px 12px 8px;font-family:var(--mono);font-size:12px;position:relative}
.query{margin:0;border-top:0;padding:0}
.query>summary{min-height:24px;padding:2px 6px;gap:8px;font-size:12px;font-weight:500;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;color:var(--ink-2);border-radius:6px}
.query>summary .tool{font-weight:600;color:var(--brand)}
.query>summary .args{font-weight:400;overflow:hidden;text-overflow:ellipsis;min-width:0}
.query>summary .facts{font-weight:400;color:var(--ink-3);white-space:nowrap}
.query.failed>summary .tool{color:var(--bad)}
.query pre.sql{margin:2px 0 6px 12px;padding:8px 10px;border:0;border-left:2px solid var(--line);border-radius:0 6px 6px 0;background:var(--surface);font-size:12px;line-height:1.5;max-height:240px}   /* a long query scrolls inside its box; the copy button carries all of it */
.query>.muted,.query>.warning-note{margin:2px 0 6px 12px;font-size:12px;line-height:1.5}
.query-foot{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 8px 12px;font-size:11.5px}
.query-foot .copy,.queries-foot button{min-height:26px;padding:0 9px;font-size:11.5px;font-family:var(--mono)}
.query-foot a{color:var(--ink-2)}
.queries-foot{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:6px;color:var(--ink-3);font-size:11.5px}
.queries-foot .mono{color:var(--ink-2)}
@media(min-width:1180px){
 #charts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .metrics{grid-template-columns:repeat(7,minmax(0,1fr))}
 .entry-body .charts{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* the split query box: the steps down the left, the open step's SQL beside them, its buttons in the foot row */
 .queries{min-height:180px;display:flex;flex-direction:column}.queries:empty{display:none}.queries.collapsed{min-height:0}
 .queries-foot{margin-top:auto;padding-top:6px}
 .query>summary{width:46%}
 .query[open]>summary{background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
 .query[open]>pre.sql,.query[open]>.muted,.query[open]>.warning-note{position:absolute;left:48%;right:12px;top:40px;bottom:46px;margin:0;max-height:none;overflow:auto}   /* under the one-line head (#75) */
 .query[open]>.query-foot{position:absolute;right:12px;bottom:8px;margin:0;flex-wrap:nowrap}
 .queries-foot{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;padding-right:250px;min-height:26px}
 .queries-foot .fixed-note{white-space:normal;min-width:0;line-height:1.3}   /* wraps to a second line rather than losing its end under the open step's buttons */
}
.query-link{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.chart .query-link{color:var(--ink-2)}   /* 4.5:1 on the chart panel, like the captions (#36) */
.query a:focus-visible,.query-link:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.note-group{margin:4px 0;border-top:0;padding:2px 10px;background:var(--surface-2);border-radius:8px}
.note-group summary{font-size:12px;font-weight:500;color:var(--ink-2);min-height:26px}
.note-group p{margin:8px 0 2px;font-size:.85rem;color:var(--ink-2)}
footer{margin-top:48px;padding-top:18px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.answer .card-foot{margin-top:0;font-family:var(--sans)}

/* Heatmap */
.heatmap-weekdays,.heatmap-grid{display:grid;grid-template-columns:repeat(7,minmax(38px,1fr));gap:7px}
.heatmap-weekdays{margin:14px 0 7px;color:var(--ink-2);font-size:.78rem;text-align:center;font-family:var(--mono)}
/* Cells: app.js sets the teal background's alpha from the day's output (0.22 to 1) and adds .deep where the
   blended cell is dark enough that white reads better than black; both inks clear 4.5:1 at every alpha. */
.heatmap-cell{aspect-ratio:1.2;padding:8px;border:1px solid var(--line);background:rgb(8 127 117 / .22);color:#000;font-weight:700;min-width:0;border-radius:4px}
.heatmap-cell.deep{color:#fff}
.heatmap-cell:hover,.heatmap-cell:focus-visible{filter:none;outline:3px solid var(--focus);outline-offset:2px}
.heatmap-cell.missing{background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 6px,var(--surface-3) 6px,var(--surface-3) 12px);color:var(--ink-2)}
.heatmap-blank{aspect-ratio:1.2}
.heatmap-legend{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px;font-size:.78rem;color:var(--ink-2);font-family:var(--mono)}
.heatmap-scale{width:120px;height:12px;background:linear-gradient(90deg,rgb(8 127 117 / .22),rgb(8 127 117));border-radius:2px}
.heatmap-tip{min-height:3.1em;background:var(--code-bg);color:var(--code-ink);border:1px solid var(--rule);padding:11px 13px;border-radius:8px;font-size:.85rem;line-height:1.45;font-family:var(--mono)}
:root[data-theme="dark"] .heatmap-cell{color:#fff}:root[data-theme="dark"] .chart .inseg.s4{fill:#000}

/* Docs (/docs, issue #93): the repository's Markdown as pages, a table of contents on the left; on a phone the
   sections are a row of chips above the page and the current section's pages a row under them. */
.docs-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;align-items:start;padding-top:28px;padding-bottom:64px}
.docs-toc{position:sticky;top:68px;max-height:calc(100vh - 84px);overflow:auto;font-size:14px;line-height:1.4;padding:0 4px 12px 0}
.docs-toc-title{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.docs-toc ol{list-style:none;margin:0;padding:0}
.docs-section{margin:0 0 12px}
.docs-section-link{display:block;font-weight:600;color:var(--ink);text-decoration:none;padding:3px 0}
.docs-pages{border-left:1px solid var(--rule);margin:3px 0 0 1px!important;padding-left:12px!important}
.docs-pages a{display:block;color:var(--ink-2);text-decoration:none;padding:3px 0}
.docs-toc a:hover{color:var(--accent)}
.docs-pages a[aria-current=page]{color:var(--brand);font-weight:600}
.docs-headings{margin:1px 0 6px!important;padding-left:10px!important;font-size:13px}
.docs-headings a{display:block;color:var(--ink-3);text-decoration:none;padding:2px 0}
.docs-section-link[aria-current=page]{color:var(--brand)}.docs-section>.docs-headings{border-left:1px solid var(--rule);margin-left:1px!important;padding-left:12px!important}
.docs-page{min-width:0;max-width:800px;font-size:16.5px;line-height:1.65}
.docs-page h1{margin:0 0 18px}
.docs-page h2{font-size:22px;font-weight:500;letter-spacing:-.2px;margin:44px 0 12px;scroll-margin-top:76px}
.docs-page h3{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:32px 0 10px;scroll-margin-top:76px}
.docs-page h4{font-size:15px;margin:24px 0 8px}
.docs-page p,.docs-page li{color:var(--ink-2)}.docs-page strong{color:var(--ink);font-weight:600}
.docs-page ul,.docs-page ol{padding-left:22px}.docs-page li{margin:4px 0}
.docs-page code{font-size:.86em;background:var(--code-bg);color:var(--code-ink);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.docs-page pre{max-height:none;margin:14px 0}.docs-page pre code{background:none;padding:0;font-size:inherit}
.docs-page .table-scroll{max-height:none;margin:14px 0}
.docs-page table{font-family:var(--sans);font-size:13.5px;line-height:1.45}
.docs-page th{position:static;white-space:normal;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.docs-page th,.docs-page td{min-width:72px}.docs-page td{max-width:none}
.docs-page .right{text-align:right}.docs-page .center{text-align:center}
.docs-page blockquote{margin:16px 0;padding:2px 16px;border-left:3px solid var(--rule)}
.docs-page hr{border:0;border-top:1px solid var(--rule);margin:32px 0}
.docs-contents{padding-left:0!important;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px}
.docs-contents ul{padding-left:0!important;list-style:none;margin:4px 0 14px}
.docs-contents-section{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.docs-contents li:target>a{color:var(--brand);font-weight:600}
.docs-pager{display:flex;justify-content:space-between;gap:12px;margin-top:48px;padding-top:16px;border-top:1px solid var(--rule)}
.docs-pager a{display:flex;flex-direction:column;gap:2px;max-width:48%;color:var(--ink);font-weight:500;text-decoration:none}
.docs-pager a:hover{color:var(--accent)}
.docs-pager small{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.docs-next{margin-left:auto;text-align:right}
.docs-source{font-size:13px;color:var(--ink-3);margin:14px 0 0}
@media(max-width:850px){
 .docs-layout{display:block;padding-top:14px}
 .docs-toc{position:static;max-height:none;overflow:visible;margin:0 0 22px;padding:0 0 12px;border-bottom:1px solid var(--rule)}
 .docs-toc-title{display:none}
 .docs-sections{display:flex;flex-wrap:wrap;gap:6px}
 .docs-section{margin:0}.docs-section.current{display:contents}
 .docs-section-link{border:1px solid var(--rule);border-radius:6px;padding:5px 10px;font-size:13px;font-weight:500;color:var(--ink-2)}
 .docs-section.current .docs-section-link{border-color:var(--brand);color:var(--brand)}
 .docs-pages{display:none}
 .docs-section.current .docs-pages{display:flex;flex-wrap:wrap;gap:2px 14px;order:99;flex-basis:100%;border:0;margin:6px 0 0!important;padding:0!important;font-size:13.5px}
 .docs-headings{display:none}
 .docs-page{font-size:16px}
 .docs-contents{grid-template-columns:1fr}
}
.callout{border:1px solid var(--rule);border-radius:8px;padding:16px 18px;margin:0 0 20px;color:var(--ink-2)}
.back-link{display:inline-block;margin-bottom:20px}

/* Phone (390 px): one column, the card first, the rail behind the "Questions" button as a full-screen sheet */
@media(max-width:850px){
 header.app{position:static}header.app .wrap{gap:8px}.brand span{display:none}.badge{display:none}
 .shell-page header.app .wrap{padding:10px 12px}.shell-page .brand .home,.top-link{display:none}.shell-page .brand b{font-size:16px}.shell-page .evals-badge{order:3;flex-basis:100%}
 .title{padding:16px 16px 4px}
 main.wrap{padding-bottom:48px}
 .shell{display:block;padding:12px 12px 32px}
 .shell-page .shell{display:flex;flex-direction:column;padding:8px 10px max(8px,env(safe-area-inset-bottom,0px))}.shell-page .shell>main{flex:1 1 auto}   /* the transcript takes the height between the header and the ask bar (#86) */
 .rail{display:none}
 .rail.open{display:flex;position:fixed;inset:0;z-index:20;overflow:auto;background:var(--bg);padding:12px}
 .rail-toggle,.rail-close{display:inline-flex;align-items:center}.rail-close{align-self:flex-end;min-height:36px}
 .askbar{flex-wrap:wrap;padding:8px;gap:8px}
 #question{flex:1 1 55%;order:1;padding:0 6px}#submit{order:2}#status{order:3;flex:1 1 40%;max-width:none}.analyst{order:4}.rail-toggle{order:5}
 .askbar .secondary{height:36px;min-height:36px;font-size:13px}
 .answer{padding:14px}#card-title{font-size:18px}
 .earlier{padding:10px 14px}
 .guide-grid{grid-template-columns:1fr}
 .section-heading{align-items:start;flex-direction:column}
 .metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.metric{padding:8px}.metric .value{font-size:17px}.metric .value small{display:block;margin-left:0}
 .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .trace-meta{grid-template-columns:1fr}.trace-sum .facts{white-space:normal}
 .queries{padding:6px 10px 8px}.query>summary{flex-wrap:nowrap;overflow:hidden}.query>summary .args{display:none}.query>summary .tool{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.query pre.sql,.query-foot,.query>.muted,.query>.warning-note{margin-left:0}
 .tile .v{font-size:1.2rem}
 .heatmap-weekdays,.heatmap-grid{gap:4px}.heatmap-cell{padding:5px}
 td,th{min-width:80px}
}
@media(min-width:851px) and (max-width:1179px){.rail{flex-basis:264px}.shell{padding:16px 16px 40px;gap:16px}.shell-page .shell{padding:12px 16px max(12px,env(safe-area-inset-bottom,0px))}}
@media(min-width:851px) and (max-width:999px){.shell-page .badge{display:none}}   /* the header stays one row, as on a phone; the rail's mode note says the same (#86) */
@media(prefers-reduced-motion:no-preference){.answer.skeleton .skel,.answer.skeleton .skel-chart{animation:skel 1.1s ease-in-out infinite alternate}}
@keyframes skel{from{opacity:1}to{opacity:.55}}
@media(prefers-reduced-motion:no-preference){button{transition:filter .15s}}

/* Golden evals page (/evals) and its badge in the investigator's header */
.evals-badge{display:inline-flex;align-items:center;margin-top:10px;min-height:30px;padding:0 10px;border:1px solid var(--rule);border-radius:6px;font-family:var(--mono);font-size:12px;color:var(--ink-2);text-decoration:none}
.evals-badge:hover{color:var(--accent);border-color:var(--accent)}
.evals-page .card+.card{margin-top:14px}
.evals-summary{margin:0 0 6px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.evals-page .report-actions{align-items:center}
#score-table tr.total td{font-weight:600;color:var(--ink);border-bottom:0}
#trend-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#trend-charts .chart{margin-top:0}
.evals-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.evals-filter .seg{flex-wrap:wrap}.evals-filter input{flex:1 1 200px;min-height:34px;padding:6px 10px;font-size:.88rem}
.case{margin-top:0;border-top:1px solid var(--line-2);padding:4px 0}
.case-sum{flex-wrap:wrap;gap:4px 8px;padding:6px 0;min-height:36px;font-weight:400}
.case-id{font-size:12.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.type-chip{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.case-q{flex:1 1 100%;font-family:var(--sans);font-size:.9rem;color:var(--ink-2);overflow-wrap:anywhere}
.outcome{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--neutral-soft);color:var(--ink-2);white-space:nowrap}
.outcome.pass{background:var(--good-soft);color:var(--good)}.outcome.fail{background:var(--bad-soft);color:var(--bad)}.outcome.none{font-weight:500}
.case-body{padding:4px 0 12px}
.case-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px}
.case-col{min-width:0}.case-col h3{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:6px 0 8px}
.case-col h4{font-size:.85rem;margin:14px 0 6px;font-weight:600;color:var(--ink-2)}
.case-col p,.case-col li{font-size:.88rem;line-height:1.55;overflow-wrap:anywhere}.case-col p{margin:6px 0}
.case-col ul,.case-col ol{margin:6px 0;padding-left:20px}
.case-setup{font-size:12px!important;color:var(--ink-3)}.case-question{font-weight:500}
.failures{color:var(--bad)}
.run-box{border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.run-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.85rem}.run-head button{min-height:30px;font-size:12px}
.result-line{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}.result-line .mono,.turn-facts{font-size:12px!important;color:var(--ink-2)}
.turn{margin-top:10px}.recorded .tool{background:var(--code-bg);padding:2px 6px;border-radius:4px;font-size:12px}.recorded span{font-size:12px}
/* The narrative judge on /evals and the owner's grading page (issue #25) */
.judge-score{font-family:var(--mono);font-weight:700}.judge-score.s1{color:var(--good)}.judge-score.s0{color:var(--bad)}
#judge-rows td{font-size:12px;overflow-wrap:anywhere}
.grade-item{border-top:1px solid var(--line-2);padding:12px 0}.grade-item.graded .case-id::after{content:" · graded";color:var(--good);font-weight:500}
.grade-narrative p{margin:6px 0;font-size:.92rem;line-height:1.55;overflow-wrap:anywhere}
.grade-evidence{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:11.5px;line-height:1.45;background:var(--code-bg);color:var(--code-ink);padding:8px 10px;border-radius:6px;margin:6px 0;max-height:240px;overflow:auto}
.grade-lines{border:1px solid var(--line-2);border-radius:8px;margin:10px 0;padding:6px 12px 8px}.grade-lines legend{font-size:12px;color:var(--ink-3);padding:0 4px}
.grade-line{flex-direction:row;gap:8px;align-items:flex-start;font-size:.88rem;font-weight:400;line-height:1.45;padding:4px 0}.grade-line input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--brand)}
.grade-note{width:100%;box-sizing:border-box;resize:vertical;font-size:.9rem}
.grade-actions{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:8px}
#rubric li{margin:6px 0;font-size:.9rem;line-height:1.5}#rubric ul{padding-left:18px;margin:4px 0}
@media(max-width:850px){
 #trend-charts,.case-grid{grid-template-columns:1fr}
 .evals-page .card{padding:14px}
 .evals-filter .seg-btn{flex:1 1 auto;padding:0 8px}
 #score-table td:nth-child(2),#score-table th:nth-child(2){min-width:180px}
}

/* Ask the analyst (issue #23): the per-answer button, the planned queries while they run, the streamed interpretation. */
.analyst-row{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:10px}
.analyst-row .muted{font-size:12px;flex:1 1 220px;min-width:0}
.analyst-ask{min-height:30px;padding:0 12px;font-size:12.5px}
.analyst-state{font-size:12px;margin:0 0 6px}
.analyst-p{margin:8px 0}.analyst-p.streaming::after{content:" ▍";color:var(--ink-3)}
.analyst-cites{font-size:11.5px;margin:-4px 0 8px;overflow-wrap:anywhere}
.query.pending{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;min-height:30px;padding:4px 0;font-size:12px;color:var(--ink-2)}
.query.pending .tool{font-weight:600;color:var(--brand-ink)}.query.pending .args{overflow-wrap:anywhere;min-width:0}.query.pending .facts{color:var(--ink-3);white-space:nowrap;margin-left:auto}
/* The reveal (#65): the finished answer is in the DOM; these classes only pace when its parts show. Reduced motion
   never gets them (app.js skips the pacing), and the bloom is CSS-only, so no figure is drawn that a tool did not return. */
.pace-wait{visibility:hidden}
#messages p.typing:empty{display:block;height:11px;width:70%;border-radius:6px;background:var(--surface-3);animation:skel 1.1s ease-in-out infinite alternate}
#messages p.typing:not(:empty)::after{content:" ▍";color:var(--ink-3)}
.query{transition:opacity .12s}.query.pace-wait{opacity:0}
@media(prefers-reduced-motion:no-preference){
 .bloom .bar,.bloom .seg{transform-box:fill-box;transform-origin:left center;animation:bloom-x .25s ease-out both}
 .bloom .line{animation:bloom-fade .25s ease-out both}
 .bloom.heatmap,.bloom .heatmap-grid{animation:bloom-fade .25s ease-out both}
}
@keyframes bloom-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bloom-fade{from{opacity:0}to{opacity:1}}
/* ---- The answer shape (issue #75): one headline, findings as bullets with one bold figure each, small evidence
   links, small-caps labels, and where to look under the charts. The query box is one line under the answer. */
.message p.headline{margin:2px 0 8px;font-size:15px;line-height:1.4;color:var(--ink)}
.message strong.figure{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;color:var(--ink);margin:0;font-weight:650}
.message p.headline strong.figure{font-size:28px;line-height:1.15;letter-spacing:-.01em;margin-right:2px}
.message p.headline .clause{color:var(--ink-2)}
.message .ref{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;text-decoration-color:var(--rule)}
.message ul.findings,.look-list,.analyst-list{margin:0 0 6px;padding-left:20px}
.message ul.findings li,.look-list li,.analyst-list li{margin:3px 0;line-height:1.45}
.message ul.findings li::marker,.look-list li::marker,.analyst-list li::marker{color:var(--ink-3)}
.message p.label,.look .label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 2px}
.look{font-size:13.5px}.look:empty{display:none}
.look .label{margin-top:6px}.look>.label:first-child{margin-top:0}
.look p.context-line{margin:0 0 4px;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.look-list a.look-q{color:var(--brand)}
button.more-bullets{min-height:24px;padding:0 10px;margin:0 0 6px 20px;font-size:12px}
.analyst-list .kind{color:var(--ink-3);font-weight:600}
.analyst-list .analyst-cites{margin:2px 0 4px;font-size:11.5px}
.queries-line{display:flex;align-items:center;gap:10px;min-height:28px;color:var(--ink-2)}
.queries-line button{min-height:26px;padding:0 10px;font-family:var(--mono);font-size:11.5px}
.queries.collapsed{padding:4px 12px}
.queries.collapsed>.query,.queries.collapsed>.queries-foot{display:none}
#messages .headline.typing,#messages li.typing{min-height:1em}


/* ---- Money on the card (#31b): the dollar line under the headline, the opportunities panel, the arithmetic at the
   bottom, the dollar line on a tile. The money bars keep the one brand series color: the bucket is in the label. */
.dollar-line{margin:2px 0 10px;display:flex;flex-direction:column;gap:6px}
.dollar-line .dollar-lead{margin:0;font-size:15px;color:var(--ink-2)}
.dollar-line .dollar-lead .figure{color:var(--ink);font-weight:700}
.message .ledger strong,.ledger strong{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;margin:0}
.dollar-line .chips{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--rule);border-radius:999px;padding:2px 9px;white-space:nowrap}
.message .chip strong,.chip strong{display:inline;font-size:inherit;letter-spacing:0;text-transform:none;margin:0;color:var(--ink);font-weight:600}
.dollar-wait{margin:0;font-size:13px}
.money{margin-top:var(--gap)}.money:empty{display:none}
.money-panel svg{max-width:600px}
.money-panel .money-actions{display:flex;gap:8px;margin-top:8px}
.money-panel .money-actions button{min-height:28px;font-size:12px;padding:0 10px}
.money-panel .money-src{margin:8px 0 0;font-size:12px}
.chart .bar.priced{fill:var(--bar)}
.money-table td:last-child{font-size:12px;color:var(--ink-2);min-width:260px}
.ledger{margin-top:var(--gap);padding:12px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.ledger:empty{display:none}
.ledger h3{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ledger p{margin:4px 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ledger .ledger-k{font-weight:600;color:var(--ink)}
.ledger .figure{color:var(--ink);font-weight:700}
.ledger .provenance{font-size:12px;color:var(--ink-3);margin-top:8px}
.ledger .rates-open{min-height:28px;font-size:12px;padding:0 10px;margin-top:4px}
.metric .usd,.tile .usd{font-family:var(--mono);font-size:11px;color:var(--brand-ink);line-height:1.35}
.metric .usd:empty{display:none}