/* Scale Brand 2.0 (scale-brand skill): light-first, Aeonik, flat Evergreen / Atlas Blue accents,
   pill buttons (no Scale logo). Scale Labs semantic colours are used only for verdict and error states. */
@font-face { font-family: "Aeonik"; src: url("/static/fonts/aeonik/Aeonik-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("/static/fonts/aeonik/Aeonik-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik"; src: url("/static/fonts/aeonik/Aeonik-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aeonik Mono"; src: url("/static/fonts/aeonik-mono/Aeonik-Mono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* brand */
  --evergreen: #193A29; --atlas-blue: #273252;
  --grey-10: #212121; --grey-30: #575757; --grey-60: #929292; --grey-80: #C7C7C7; --grey-90: #EAEAEA; --grey-95: #F2F2F2;
  /* semantic (Scale Labs) */
  --positive: #79C96E; --neutral: #EDE272; --negative: #D95358;

  --bg: #F3F3F3; --panel: #FFFFFF; --ink: #000000; --muted: var(--grey-30); --line: var(--grey-90);
  --accent: var(--evergreen); --accent-soft: var(--grey-95);
  --pass: var(--positive); --nonfail: var(--neutral); --fail: var(--negative);
  --fail-soft: rgba(217, 83, 88, .10); --pass-soft: rgba(121, 201, 110, .14);
  --admin: var(--atlas-blue); --radius: 12px;
  --input-bg: #FFFFFF; --primary-hover: #10271b; --error-ink: #7d1e22; --danger-ink: #a3282d;
  --overlay: rgba(0, 0, 0, .45); --shadow: rgba(0, 0, 0, .10); --atlas-ink: var(--atlas-blue);
  --link: var(--evergreen); --focus: var(--evergreen);
  --sans: "Aeonik", "Host Grotesk", -apple-system, Arial, sans-serif;
  --mono: "Aeonik Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Dark mode: the same brand system on Scale's grey scale (toggle in the top bar, remembered per browser). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --grey-30: #A8A8A8; --grey-60: #7A7A7A; --grey-80: #3D3D3D; --grey-90: #2B2B2B; --grey-95: #1F1F1F;
  --bg: #0E0E0E; --panel: #171717; --ink: #F2F2F2; --muted: #A8A8A8; --line: #2B2B2B;
  --fail-soft: rgba(217, 83, 88, .16); --pass-soft: rgba(121, 201, 110, .12);
  --input-bg: #121212; --primary-hover: #24513a; --error-ink: #ffb4b6; --danger-ink: #ff9a9e;
  --overlay: rgba(0, 0, 0, .65); --shadow: rgba(0, 0, 0, .55); --atlas-ink: #9fb0e0;
  --link: #7cc79c; --focus: #6fbf8f;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 15px/1.5 var(--sans); font-feature-settings: "ss02" 1; letter-spacing: -0.01em; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, a.button { white-space: nowrap; font: inherit; font-weight: 500; cursor: pointer; border: 1px solid var(--grey-80); background: var(--panel); color: var(--ink);
  border-radius: 9999px; padding: 7px 16px; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
button:hover, a.button:hover { border-color: var(--ink); }
button.primary { background: var(--evergreen); border-color: var(--evergreen); color: #fff; }
button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.primary:disabled, button:disabled { opacity: .45; cursor: default; }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.ghost:hover { color: var(--ink); border-color: transparent; }
button.danger { color: var(--danger-ink); border-color: var(--negative); }
input, textarea, select { font: inherit; color: var(--ink); border: 1px solid var(--grey-80); border-radius: 10px; padding: 9px 12px; width: 100%; background: var(--input-bg); }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(25, 58, 41, .18); border-color: var(--focus); }
code, pre { font-family: var(--mono); font-size: 13px; }
a { color: var(--link); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }

/* login */
.center { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 30px; width: min(440px, 100%); }
.card h1 { font-size: 24px; line-height: 28px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 6px; }
.card p { margin: 0 0 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 5px; }
.error { color: var(--error-ink); background: var(--fail-soft); border: 1px solid rgba(217, 83, 88, .35); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* app shell */
.app { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); height: 100%; }  /* never wider than the screen */
@supports (height: 100dvh) { .app { height: 100dvh; } }  /* phones: the visible height, so the browser bar never covers the send box */
.app.has-spend { grid-template-rows: auto auto 1fr; }
/* spend bar under the top bar: the contributor's total against the limit */
.spendbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 20px; font-size: 13px; cursor: pointer;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.spendbar .spend-who { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.spendbar .spend-meter { width: 120px; height: 6px; border-radius: 9999px; background: var(--grey-90); overflow: hidden; flex: none; }
.spendbar .spend-meter span { display: block; height: 100%; width: 0; background: var(--evergreen); transition: width .4s ease; }
:root[data-theme="dark"] .spendbar:not(.near):not(.over) .spend-meter span { background: var(--link); }
.spendbar .spend-of { color: var(--muted); margin-left: -4px; }
.spendbar .spend-rule { color: var(--muted); flex: 1; min-width: 220px; }
.spendbar.near .spend-meter span { background: #c9a227; }
.spendbar.over { background: var(--fail-soft); border-bottom-color: rgba(217, 83, 88, .35); }
.spendbar.over .spend-meter span { background: var(--negative); }
.spendbar.over .spend-rule, .spendbar.over b { color: var(--error-ink); }
.blocked-note { margin: 0 auto; width: min(860px, calc(100% - 40px)); padding: 10px 14px; border-radius: 12px; font-size: 14px;
  color: var(--error-ink); background: var(--fail-soft); border: 1px solid rgba(217, 83, 88, .35); }
.blocked-note.admin-view { color: var(--ink); background: var(--grey-95); border-color: var(--line); }
/* A review paused by the time limit: continue it or start over (pause.py). Orange = attention, never a verdict colour. */
.paused-note { margin: 0 auto 8px; width: min(860px, calc(100% - 40px)); padding: 12px 14px; border-radius: 12px; font-size: 14px;
  background: rgba(232, 113, 10, .08); border: 1px solid rgba(232, 113, 10, .45); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.paused-note .grow { flex: 1; min-width: 240px; }
.paused-note .actions { display: flex; gap: 8px; }
.bubble.warnnote { border-color: rgba(217, 83, 88, .55) !important; background: var(--fail-soft) !important; }
.chip.flag { color: var(--error-ink); background: var(--fail-soft); border-color: rgba(217, 83, 88, .35); font-family: var(--sans); white-space: nowrap; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.topbar .title { font-weight: 500; font-size: 16px; }
.chip { font-size: 12px; background: var(--grey-95); border: 1px solid var(--line); border-radius: 9999px; padding: 2px 10px; font-family: var(--mono); }
button.date-chip { font-family: var(--sans); color: var(--ink); cursor: pointer; line-height: 1.5; }
.date-pick { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.date-pick button { flex: 1 1 200px; padding: 10px 14px; }
.spacer { flex: 1; }
.body { display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
.side-hidden .body { grid-template-columns: 1fr; }
.side-hidden .side { display: none; }
.side { border-right: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 16px; }
.side h3 { font-family: var(--mono); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 8px; }
.side h3:first-child { margin-top: 0; }
.cmd { display: block; width: 100%; text-align: left; margin-bottom: 6px; border-radius: 12px; padding: 8px 12px; border-color: var(--line); }
.cmd:hover { border-color: var(--grey-80); background: var(--grey-95); }
.cmd b { font-family: var(--mono); font-weight: 400; }
.cmd span { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.list-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.list-item:hover { background: var(--grey-95); }
.list-item.current { background: var(--grey-95); box-shadow: inset 3px 0 0 var(--focus); cursor: default; }
.list-item .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill { font-size: 11px; font-weight: 500; border-radius: 9999px; padding: 1px 9px; white-space: nowrap; color: #000; letter-spacing: 0; }
.pill.PASS { background: var(--positive); }
.pill.NON-FAIL { background: var(--neutral); }
.pill.FAIL { background: var(--negative); }
.pill.none { background: var(--grey-90); color: var(--muted); }

/* chat */
.main { display: grid; grid-template-rows: 1fr auto auto; min-height: 0; }
.messages { overflow: auto; padding: 24px max(20px, calc((100% - 860px) / 2)); }
.msg { margin: 0 0 14px; display: flex; }
.msg .bubble { max-width: 100%; border-radius: 14px; padding: 11px 15px; background: var(--panel); border: 1px solid var(--line); overflow-wrap: anywhere; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: var(--grey-95); border-color: var(--grey-90); white-space: pre-wrap; max-width: 85%; }
.msg.assistant .bubble { width: 100%; }
.msg.admin .bubble { width: 100%; border-left: 3px solid var(--atlas-ink); }
.msg.system { justify-content: center; }
.msg.system .bubble { background: transparent; border: 1px dashed var(--grey-80); color: var(--muted); font-size: 14px; width: 100%; }
/* The plan-your-task card (server/plan.py): a solid, readable card, not a dashed portal note. */
.msg.system .bubble.kickoff { border: 1px solid var(--grey-80); background: var(--panel); color: var(--ink); }
.who { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 3px; }
.msg.admin .who { color: var(--atlas-ink); }
.ts { font-family: var(--sans); font-size: 11.5px; color: var(--muted); text-transform: none; letter-spacing: 0; white-space: nowrap; cursor: default; }
.who .ts { margin-left: 8px; }
.ts-row { text-align: right; margin-top: 4px; line-height: 1; }
.bubble :first-child { margin-top: 0; } .bubble :last-child { margin-bottom: 0; }
.bubble h1, .bubble h2, .bubble h3 { font-weight: 500; letter-spacing: -0.01em; }
.bubble pre { background: var(--grey-95); padding: 10px; border-radius: 10px; overflow: auto; }
.bubble table { border-collapse: collapse; margin: 8px 0; font-size: 14px; display: block; overflow: auto; }
.bubble th, .bubble td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.bubble th { background: var(--grey-95); font-weight: 500; }
.more { color: var(--link); cursor: pointer; font-size: 13px; }
.attach-list { font-size: 13px; margin-top: 6px; color: var(--muted); }
.rcard { display: flex; align-items: center; gap: 10px; width: 100%; }
.rcard .grow { flex: 1; }
.proofcard { border-color: rgba(121, 201, 110, .6) !important; background: var(--pass-soft) !important; }

.runbar { border-top: 1px solid var(--line); background: var(--panel); padding: 9px 20px; font-size: 14px; }
.runbar .row { display: flex; align-items: center; gap: 10px; }
.run-progress { height: 4px; margin-top: 8px; border-radius: 2px; background: var(--grey-90); overflow: hidden; }
.run-progress.hidden { display: none; }
.run-progress span { display: block; height: 100%; width: 0; background: var(--focus); border-radius: 2px; transition: width .8s ease; }
@media (prefers-reduced-motion: reduce) { .run-progress span { transition: none; } }
.runbar .latest { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity { max-height: 220px; overflow: auto; font-family: var(--mono); font-size: 12px; margin-top: 8px; background: var(--grey-95); border: 1px solid var(--line); border-radius: 10px; padding: 8px; white-space: pre-wrap; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--grey-90); border-top-color: var(--focus); border-radius: 50%; animation: spin 0.9s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.composer { border-top: 1px solid var(--line); background: var(--panel); padding: 12px 20px; }
.composer .inner { max-width: 860px; margin: 0 auto; position: relative; }
.slash { position: absolute; left: 0; right: 0; bottom: calc(100% - 4px); margin-bottom: 8px; background: var(--panel); border: 1px solid var(--grey-80);
  border-radius: 14px; box-shadow: 0 8px 28px var(--shadow); padding: 6px; z-index: 20; }
.slash-item { display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.slash-item b { min-width: 92px; font-weight: 400; }
.slash-item span { color: var(--muted); font-size: 14px; }
.slash-item.on, .slash-item:hover { background: var(--grey-95); }
.slash-item.on { box-shadow: inset 3px 0 0 var(--focus); }
.slash-hint { font-size: 12px; color: var(--muted); padding: 6px 10px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.composer textarea { resize: none; min-height: 48px; max-height: 260px; border-radius: 14px; }
.composer .actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.composer .hint { font-size: 12px; color: var(--muted); flex: 1; }
.reply-images { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.reply-image { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.reply-image img { height: 64px; max-width: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.reply-image button { position: absolute; top: -6px; right: -6px; padding: 0 5px; line-height: 18px; border-radius: 9px; }
/* Images in messages (admin screenshots): fit the bubble, click for full size */
.bubble img { max-width: 100%; max-height: 420px; border-radius: 8px; border: 1px solid var(--line); cursor: zoom-in; display: block; margin: 6px 0; }
.att { display: inline-flex; gap: 6px; align-items: center; background: var(--grey-95); border: 1px solid var(--line); border-radius: 9999px; padding: 2px 4px 2px 10px; font-size: 13px; margin: 0 6px 6px 0; }
.att button { border: 0; padding: 0 6px; background: transparent; }

/* modals */
.overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; padding: 20px; z-index: 50; }
.modal { background: var(--panel); border-radius: 16px; width: min(920px, 100%); max-height: 92vh; display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.modal header { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.modal header .grow { flex: 1; font-weight: 500; }
.modal .content { overflow: auto; padding: 18px 22px; }

/* in-page dialogs (replace alert/confirm) */
.modal.dialog { width: min(520px, 100%); grid-template-rows: auto 1fr auto; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--grey-95); }
button.danger-solid { background: var(--negative); border-color: var(--negative); color: #000; }
button.danger-solid:hover { border-color: var(--ink); }
.review-confirm p { margin: 0 0 12px; }
.rc-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rc-row:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.rc-row .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-top: 2px; }

/* guide + saved input viewer */
.guide h4 { font-family: var(--mono); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 20px 0 8px; }
.guide h4:first-child { margin-top: 0; }
.guide p { margin: 0 0 10px; }
.guide-cmd { display: flex; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; }
.guide-cmd .grow { flex: 1; min-width: 0; }
.guide-sample { width: 100%; margin: 4px 0 12px; }
/* Guide tabs (Steps + the guideline files): the tab row stays put while the guide scrolls under it */
.guide-tabs { position: sticky; top: -18px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; margin: -18px -22px 16px; padding: 12px 22px 10px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.guide-tabs button { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 9999px; padding: 5px 14px; font-size: 14px; }
.guide-tabs button:hover { color: var(--ink); background: var(--grey-95); }
.guide-tabs button.on { color: var(--ink); background: var(--grey-95); border-color: var(--line); font-weight: 500; cursor: default; }
.guide-doc { max-width: 760px; font-size: 15px; line-height: 1.6; }
.guide-doc [data-slug] { scroll-margin-top: 70px; }
.guide-doc h1 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; }
.guide-doc h2 { font-size: 19px; line-height: 1.3; margin: 30px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.guide-doc h3 { font-size: 16px; margin: 20px 0 6px; }
.guide-doc p { margin: 0 0 12px; }
.guide-doc ul, .guide-doc ol { margin: 0 0 12px; padding-left: 22px; }
.guide-doc li { margin: 3px 0; }
.guide-doc li > ul, .guide-doc li > ol { margin: 4px 0 2px; }
.guide-top { margin: 0 0 18px; }
.guide-jump { margin: 0 0 10px; font-size: 14px; }
.guide-toc { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--grey-95); font-size: 14px; }
.guide-toc .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.guide-toc ol { list-style: none; padding: 0; margin: 0; columns: 2 260px; column-gap: 24px; }
.guide-toc li { margin: 2px 0; break-inside: avoid; }
.guide-toc a { text-decoration: none; }
.guide-toc a:hover { text-decoration: underline; }
/* "Too easy? See the hardness guide, Part 8" under a /hardness report that came back too easy */
.guide-hint { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.input-view { background: var(--grey-95); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; max-height: 60vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; margin: 0 0 14px; }

/* pass screen: flat Evergreen header with the white wordmark; the verdict badge carries the semantic colour */
/* The pass screen stays light in both themes, so every proof screenshot looks the same to whoever checks it. */
.proof { --panel: #FFFFFF; --ink: #000000; --muted: #575757; --line: #EAEAEA; --grey-95: #F2F2F2; --grey-90: #EAEAEA;
  --grey-80: #C7C7C7; --input-bg: #FFFFFF; --primary-hover: #10271b; color: #000; color-scheme: light; }
.proof { width: min(680px, 100%); max-height: 96vh; overflow: auto; background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
/* "update the taxonomy" reminder: orange, never a verdict colour; fixed light colours like the pass card */
.proof-stack { width: min(680px, 100%); max-height: 96vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.proof-stack > .proof { width: 100%; max-height: none; flex: none; }
.taxo-strip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; font-size: 14px; line-height: 1.45;
  background: #FFF1E4; color: #4A2300; border: 2px solid #E8710A; }
.taxo-icon { color: #E8710A; font-size: 18px; line-height: 1.2; flex: none; }
.taxo-step { width: min(520px, 100%); border-radius: 16px; overflow: hidden; background: #FFF; color: #000; border: 3px solid #E8710A; }
.taxo-step .mono { font-family: var(--mono); }
.taxo-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: #E8710A; color: #FFF; font-size: 20px; font-weight: 500;
  letter-spacing: -0.01em; text-transform: uppercase; }
.taxo-head .taxo-icon { color: #FFF; font-size: 22px; }
.taxo-body { padding: 18px 20px 6px; font-size: 16px; line-height: 1.5; }
.taxo-body p { margin: 0 0 12px; }
.taxo-body .taxo-note { font-size: 14px; color: #575757; }
.taxo-body .taxo-warn { font-weight: 600; color: #7d1e22; padding: 10px 12px; border-radius: 10px; background: #FDEBEC; border: 1px solid #F0B8BB; }
.taxo-check { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 4px 0 14px; border-radius: 10px; background: #FFF1E4;
  border: 1px solid #F3B37A; font-weight: 500; cursor: pointer; }
.taxo-check input { width: 18px; height: 18px; accent-color: #E8710A; flex: none; }
.inject-step { width: min(640px, 100%); max-height: 92vh; display: flex; flex-direction: column; }
.inject-step .taxo-body { overflow-y: auto; }
.inject-steps { margin: 0 0 12px; padding-left: 22px; }
.inject-steps li { margin-bottom: 14px; }
.inject-steps li p { margin: 0 0 6px; }
.inject-steps img { width: 100%; border-radius: 8px; border: 1px solid #DADADA; display: block; }
.taxo-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid #EAEAEA; background: #F7F7F7; }
.taxo-foot button:not(.primary) { background: #FFF; color: #000; border-color: #C7C7C7; }
.proof .head { padding: 18px 22px 18px; color: #fff; background: var(--evergreen); display: flex; gap: 16px; align-items: flex-end; }
.proof .head .left { flex: 1; min-width: 0; }
.proof .head .brandline { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-bottom: 12px; }
.proof .head .verdict { display: flex; align-items: center; gap: 12px; font-size: 36px; line-height: 40px; font-weight: 400; letter-spacing: -0.02em; }
.proof .head .vbadge { font-size: 30px; line-height: 34px; font-weight: 500; color: #000; border-radius: 9999px; padding: 3px 16px 4px; background: var(--positive); }
.proof .head .vbadge.NON-FAIL { background: var(--neutral); }
.proof .head .sub { opacity: .92; margin-top: 8px; font-size: 17px; }
.proof .head .codebox { text-align: right; }
.proof .fpband { padding: 16px 22px 18px; border-bottom: 1px solid var(--line); background: #F6FAF7; }
.proof .fpband .k { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.proof .fpband .fp { white-space: pre-wrap; font-family: var(--mono); font-size: 34px; line-height: 1.3; color: #000; overflow-wrap: break-word; letter-spacing: .01em; }
.proof .fpband .spell { font-size: 14px; color: #333; margin-top: 2px; }
.guide-sample .fpband { padding: 10px 14px; }
.proof .wband { padding: 8px 16px; border-bottom: 1px solid var(--line); }
.proof .wband .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 3px; }
.proof .wband .w { font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.rfp { margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-inline { display: inline-block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.proof .head .codebox .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin-bottom: 3px; }
.proof .head .codebox .c { font-family: var(--mono); font-size: 20px; letter-spacing: .04em; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; padding: 4px 10px; white-space: nowrap; }
.proof .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.proof .grid > div { background: #fff; padding: 7px 16px; }
.proof .grid .k { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.proof .grid .v { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.proof .grid .wide { grid-column: span 2; }
.proof .code { text-align: center; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 12px; }
.proof .foot { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--grey-95); }
.proof .foot .grow { flex: 1; font-size: 13px; color: var(--muted); }
.proof .foot.risky .grow { color: #7A2E0E; }

/* chat lists: sidebar sections, sort + filter chips, rows */
.side-sec + .side-sec { margin-top: 22px; }
.side .side-sec h3 { margin: 0 0 8px; }
.side-sec.folded h3 { margin-bottom: 0; }
.sec-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2px 0; background: none; border: 0;
  border-radius: 6px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-align: left; }
.sec-toggle:hover { color: var(--ink); }
.sec-toggle .chev { font-size: 11px; transition: transform .15s ease; }
.side-sec.folded .chev { transform: rotate(-90deg); }
.side-sec.folded .sec-body { display: none; }
.sec-count { font-size: 11px; letter-spacing: 0; background: var(--grey-95); border: 1px solid var(--line); border-radius: 9999px; padding: 0 7px; margin-left: 4px; }
/* known data issues (pilot): watch items are lighter */
#known-title { flex: 1; min-width: 0; white-space: normal; }  /* buttons are nowrap; a long task date wraps to a second line: "(Feb 14, 2026) 33" stays together */
#known-title .nowrap { white-space: nowrap; }
.known-intro { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 0 0 8px; }
.known-checked { display: block; font-size: 11.5px; margin-top: 3px; }
.known-hint { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
.known-list { max-height: 44vh; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.known-group { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 10px 0 2px; }
.list-item.known-item { font-size: 13px; padding: 5px 9px; }
.known-item.watch .grow { opacity: .6; }
.known-tag { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 9999px; padding: 0 7px; }
.known-fails { margin: 0 0 12px; font-weight: 500; }
.known-watch { margin: 0; font-size: 13px; color: var(--muted); }
.history-list { max-height: 44vh; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.history-list.god { max-height: 56vh; }
.list-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.list-tools.hidden { display: none; }
.list-search { width: 100%; }
.list-sort { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.list-sort span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; }
.list-sort select { width: auto; flex: 1; padding: 4px 8px; font-size: 13px; }
.fchips { display: flex; flex-wrap: wrap; gap: 4px; }
.fchip { font-size: 12px; padding: 2px 9px; border-radius: 9999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; line-height: 1.5; }
.fchip span { color: var(--muted); margin-left: 2px; }
.fchip:hover { background: var(--grey-95); }
.fchip.alert { color: var(--error-ink); border-color: rgba(217, 83, 88, .45); }
.fchip.on { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.fchip.on span { color: inherit; opacity: .7; }
.chat-row { padding: 8px 10px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; margin-bottom: 3px; transition: background-color .12s ease; }
.chat-row:hover { background: var(--grey-95); }
.chat-row.current { background: var(--grey-95); box-shadow: inset 3px 0 0 var(--focus); cursor: default; }
.chat-row .cr1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-row .cr-top { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.chat-row .cr-top.mono { font-weight: 400; }
.chat-row .cr2, .chat-row .cr-preview { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.chat-row .cr3 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.chat-row .cr-meta { font-size: 12px; color: var(--muted); margin-right: 4px; line-height: 1.6; white-space: nowrap; }
.chat-row .cr-meta b { font-weight: 500; color: var(--ink); }
.chat-row .cr-none { font-size: 12px; color: var(--muted); white-space: nowrap; }
.badge { font-size: 11px; line-height: 1.6; border-radius: 9999px; padding: 0 7px; border: 1px solid var(--line); white-space: nowrap; color: var(--ink); }
.badge.alert { background: var(--negative); color: #000; border-color: transparent; }
.badge.flag { color: var(--error-ink); background: var(--fail-soft); border-color: rgba(217, 83, 88, .35); }
.badge.archived, .badge.idle { color: var(--muted); background: var(--grey-95); }
.pill.run { background: var(--grey-90); color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.pill.run::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--focus); animation: evp-pulse 1.4s ease-in-out infinite; }
@keyframes evp-pulse { 50% { opacity: .25; } }
/* switching chats: the old one fades out while the new one loads, then it fades in */
#messages, #detail-head { transition: opacity .18s ease; }
#messages.switching, #detail.switching #messages, #detail.switching #detail-head { opacity: .25; }
@media (prefers-reduced-motion: reduce) {
  #messages, #detail-head, .chat-row, .sec-toggle .chev { transition: none; }
  .pill.run::before { animation: none; }
}

/* admin */
.admin-app { grid-template-rows: auto auto 1fr; }
.topbar .title { white-space: nowrap; display: flex; align-items: center; gap: 8px; }
#chip-attempt, #chip-task { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) { #chip-task { display: none; } }
.view-switch { display: inline-flex; padding: 3px; border-radius: 9999px; background: var(--grey-95); border: 1px solid var(--line); flex: none; }
.view-switch.hidden { display: none; }
.view-switch button { border: 0; background: transparent; padding: 4px 12px; font-size: 13px; color: var(--muted); }
.view-switch button:hover { color: var(--ink); border: 0; }
.view-switch button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); cursor: default; }
:root[data-theme="dark"] .view-switch button.on { background: var(--grey-80); box-shadow: none; }
.role-badge { font-family: var(--mono); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 9999px; background: var(--ink); color: var(--panel); }
.admin-nav { display: flex; gap: 2px; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--line); }
.navbtn { border-color: transparent; background: transparent; padding: 6px 12px; color: var(--grey-30); }
.navbtn:hover { border-color: transparent; background: var(--grey-95); color: var(--ink); }
.whoami { font-size: 13px; color: var(--muted); white-space: nowrap; }
.whoami b { color: var(--ink); font-weight: 500; }
.statusbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 20px; min-height: 42px; font-size: 13px;
  color: var(--muted); background: var(--panel); border-bottom: 1px solid var(--line); }
.statusbar { flex-wrap: nowrap; }
.sb-stats { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.sb-right { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.sb-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.sb-stats .sb-label:not(:first-child) { margin-left: 8px; }
.slack-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.slack-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grey-60); }
.slack-status.on::before { background: var(--positive); }
.slack-status.off::before { background: var(--negative); }
.statusbar .budget-chip { padding: 4px 12px; }
@media (max-width: 1100px) { .whoami { display: none; } .admin-nav { margin-left: 4px; padding-left: 8px; } }
@media (max-width: 900px) { .admin-top { flex-wrap: wrap; } }
.admin-list { overflow: auto; }
.funnel { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.side .funnel h3 { margin: 0 0 8px; }
.funnel.folded h3 { margin-bottom: 0; }
.funnel.folded .sec-body { display: none; }
.funnel-row { display: grid; grid-template-columns: 104px 28px 1fr; align-items: baseline; gap: 6px; padding: 3px 6px; border-radius: 8px; font-size: 13px; cursor: default; }
.funnel-row:hover { background: var(--grey-95); }
.funnel-row b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.funnel-row .fparts { color: var(--muted); font-size: 12px; }
.funnel-row.empty { color: var(--muted); }
.funnel-note { font-size: 11.5px; color: var(--muted); margin: 6px 6px 0; }
.funnel-row.pick { cursor: pointer; }
.funnel-row.on { background: var(--grey-95); box-shadow: inset 3px 0 0 var(--focus); }
.funnel-row.pick:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.fpart { border: 0; background: none; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; border-radius: 4px; }
.fpart:hover { border: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.fpart.on { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.funnel-pick { display: flex; align-items: center; gap: 6px; justify-content: space-between; font-size: 12.5px; padding: 4px 4px 4px 10px;
  margin-bottom: 8px; border-radius: 8px; background: var(--grey-95); box-shadow: inset 3px 0 0 var(--focus); }
.funnel-pick.hidden { display: none; }
.funnel-pick button { font-size: 12px; padding: 2px 8px; }
.fwhy { border: 0; background: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fwhy:hover { border: 0; color: var(--ink); }
.funnel-row.side-set { color: var(--muted); }
.funnel-row.idle { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--line); border-radius: 0 0 8px 8px; }
.dd-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 4px; margin-bottom: 10px; }
.dd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.dd-head button { padding: 4px 12px; font-size: 13px; }
.dd-signals { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dd-sig { font-size: 13px; padding: 4px 10px; border-radius: 8px; background: var(--grey-95); border: 1px solid var(--line); }
.dd-sig.gone { border-color: var(--grey-80); }
.dd-sig.rework { border-color: var(--link); }
.dd-sig.blocked { background: var(--fail-soft); border-color: rgba(217, 83, 88, .35); color: var(--error-ink); }
.dd-sig.quiet { border-style: dashed; }
.dd-card .rc-row { grid-template-columns: 120px 1fr; }
.budget-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.budget-chip.warn { border-color: var(--neutral); background: rgba(237, 226, 114, .18); }
.budget-chip.danger, .budget-chip.blocked { border-color: rgba(217, 83, 88, .55); background: var(--fail-soft); color: var(--error-ink); }
.bmeter { width: 44px; height: 6px; border-radius: 3px; background: var(--grey-90); overflow: hidden; display: inline-block; }
.bmeter span, .budget-meter span { display: block; height: 100%; background: var(--focus); }
.budget-chip.warn .bmeter span, .budget-meter.warn span { background: #c9b400; }
.budget-chip.danger .bmeter span, .budget-chip.blocked .bmeter span, .budget-meter.danger span, .budget-meter.blocked span { background: var(--negative); }
/* admin Cost page */
.cost-app { min-height: 100%; display: flex; flex-direction: column; }
.cost-app.refetching .cost-main > * { opacity: .55; transition: opacity .15s ease; }
.cost-main { width: min(1180px, 100%); margin: 0 auto; padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 16px; }
.cost-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.custom-range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.custom-range label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.custom-range input[type="date"] { width: auto; padding: 5px 10px; }
.custom-range .muted { font-size: 12px; }
.seg { display: inline-flex; padding: 3px; border-radius: 9999px; background: var(--grey-95); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; padding: 5px 14px; font-size: 13px; color: var(--muted); }
.seg button:hover { color: var(--ink); border: 0; }
.seg button.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme="dark"] .seg button.on { background: var(--grey-80); box-shadow: none; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.tile-label { font-size: 13px; color: var(--muted); }
.tile-value { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 2px; }
.tile-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.cost-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.cc-title { font-size: 15px; font-weight: 500; }
.cc-title .muted { font-weight: 400; }
.cc-sub { font-size: 12px; color: var(--muted); margin-top: 2px; max-width: 760px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .ln { width: 18px; border-top: 1px solid var(--muted); opacity: .7; display: inline-block; }
.cost-app { --runs: #2e7d55; --untagged: #2a78d6; --sandbox: #8fbf9f; --hint: #c98a2b; }
:root[data-theme="dark"] .cost-app { --runs: #45a674; --untagged: #3987e5; --sandbox: #6e9c7e; --hint: #d99a3b; }
.cost-app .bar.s-runs, .cost-app .sw.s-runs { fill: var(--runs); background: var(--runs); }
.cost-app .bar.s-untagged, .cost-app .sw.s-untagged { fill: var(--untagged); background: var(--untagged); }
.sc-tip .tk { display: inline-block; width: 12px; height: 0; border-top: 2px solid; margin-right: 6px; vertical-align: middle; }
.sc-tip .tk.s-runs { border-color: var(--runs); }
.sc-tip .tk.s-untagged { border-color: var(--untagged); }
.cost-app .bar.s-sandbox, .cost-app .sw.s-sandbox { fill: var(--sandbox); background: var(--sandbox); }
.cost-app .bar.s-hint, .cost-app .sw.s-hint { fill: var(--hint); background: var(--hint); }
.sc-tip .tk.s-sandbox { border-color: var(--sandbox); }
.sc-tip .tk.s-hint { border-color: var(--hint); }
/* line mode: 2px lines, 8px markers with a 2px surface ring, a hairline guide on hover */
.sc-plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sc-plot .dot { stroke: var(--panel); stroke-width: 2; }
.sc-plot .guide { stroke: var(--grey-60); stroke-width: 1; opacity: 0; }
.sc-plot .sbar:hover .guide, .sc-plot .sbar:focus .guide { opacity: 1; }
.cost-app .line.s-runs { stroke: var(--runs); } .cost-app .dot.s-runs { fill: var(--runs); }
.cost-app .line.s-untagged { stroke: var(--untagged); } .cost-app .dot.s-untagged { fill: var(--untagged); }
.cost-app .line.s-sandbox { stroke: var(--sandbox); } .cost-app .dot.s-sandbox { fill: var(--sandbox); }
.cost-app .line.s-hint { stroke: var(--hint); } .cost-app .dot.s-hint { fill: var(--hint); }
.legend .sw.swl { height: 2px; width: 16px; border-radius: 1px; }
.table-wrap { overflow-x: auto; }
.cost-table { font-size: 13px; }
.split-table .split-label { font-weight: 500; white-space: nowrap; }
.split-table .split-total td { font-weight: 600; border-top: 1px solid var(--line); }
.cost-table th.num, .cost-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.th-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort:hover { color: var(--ink); border: 0; }
.cost-foot { font-size: 12px; line-height: 1.6; margin: 0; }
@media (prefers-reduced-motion: reduce) { .cost-app.refetching .cost-main > * { transition: none; } }

/* spend-per-day chart (budget popup): one series, validated greens per mode (dataviz validate_palette) */
.spend-chart { --bar: #2e7d55; margin: 0 0 14px; }
:root[data-theme="dark"] .spend-chart { --bar: #45a674; }
.spend-chart .sc-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 500; margin: 0 0 6px; }
.sc-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.sc-key .sc-line { width: 18px; height: 0; border-top: 1px solid var(--muted); opacity: .7; }
.spend-chart .sc-title .muted { font-weight: 400; font-size: 12px; }
.sc-plot { position: relative; }
.sc-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.sc-plot .grid { stroke: var(--line); stroke-width: 1; }
.sc-plot .axis { stroke: var(--grey-80); stroke-width: 1; }
.sc-plot .ref { stroke: var(--grey-60); stroke-width: 1; }
.sc-plot .pace { stroke: var(--muted); stroke-width: 1; opacity: .7; }
.sc-plot .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.sc-plot .note { fill: var(--muted); font-size: 11px; }
.sc-plot .val { fill: var(--ink); font-size: 12px; font-weight: 500; }
.sc-plot .bar { fill: var(--bar); transition: opacity .12s ease; }
.sc-plot .hit { fill: transparent; }
.sc-plot .sbar { cursor: default; outline: none; }
.sc-plot .sbar:hover .bar, .sc-plot .sbar:focus .bar { opacity: .75; }
.sc-plot .sbar:focus-visible .hit { stroke: var(--focus); stroke-width: 1.5; }
.sc-tip { position: absolute; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px;
  font-size: 12px; line-height: 1.5; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); white-space: nowrap; z-index: 2; }
.sc-tip.hidden { display: none; }
.sc-tip b { font-weight: 600; color: var(--ink); }
.sc-table { margin-top: 6px; font-size: 13px; }
.sc-table summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.sc-table + .cc-head { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }  /* a second chart in the same card */
@media (prefers-reduced-motion: reduce) { .sc-plot .bar { transition: none; } }
.budget-meter { width: 100%; height: 8px; border-radius: 4px; background: var(--grey-90); overflow: hidden; margin: 4px 0 14px; display: block; }
.runs { width: 100%; border-collapse: collapse; font-size: 13px; }
.runs th, .runs td { border-bottom: 1px solid var(--line); padding: 6px 7px; text-align: left; }
.runs th { font-family: var(--mono); font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

@media (max-width: 820px) {
  .body { grid-template-columns: 1fr; }
  .side { display: none; }
  .side.open { display: block; position: fixed; inset: 56px 0 0 0; z-index: 30; }
}
@media (max-width: 560px) {
  /* Phones (2026-11-01): the header, spend notice and send box took ~45% of the screen. Keep them to one line each. */
  .topbar { gap: 6px; padding: 8px 10px; }
  .topbar .chip-lbl, .tlabel { display: none; }
  .topbar button { padding: 6px 10px; }
  .spendbar { gap: 8px; }
  .spendbar .spend-who { display: none; }
  .spendbar .spend-meter { flex: 1; width: auto; }
  .spendbar:not(.near):not(.over) .spend-rule { display: none; }  /* tap the bar for the full rule */
  .messages { padding: 14px 10px; }
  .msg .bubble { max-width: 92%; }
  .composer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .composer .hint { display: none; }
  .composer .actions { justify-content: space-between; margin-top: 6px; }
  .composer textarea { min-height: 44px; }
  input, textarea, select { font-size: 16px; }  /* under 16px, iPhone Safari zooms the page in on focus */
  .overlay { padding: 8px; }
  .rcard { flex-wrap: wrap; }
  .rcard .grow { flex-basis: 100%; }  /* report and pass cards: title on its own line, buttons below */
  .modal { max-height: 100%; }
  .topbar .title, #chip-task { display: none; }
  #chip-attempt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar button { padding: 6px 10px; }
  .spendbar { padding: 6px 12px; }
  .spendbar .spend-rule { min-width: 0; flex-basis: 100%; }
  .proof .grid { grid-template-columns: 1fr; }
  .proof .grid .wide { grid-column: auto; }
  .proof .head { flex-direction: column; align-items: flex-start; }
  .proof .head .codebox { text-align: left; }
}

.theme-float { position: fixed; top: 14px; right: 16px; z-index: 40; }

/* Admin chat header: open /admin requests stay one line each; long ones open in their own scroll box. */
.adm-reqs { margin-top: 6px; max-height: 45vh; overflow: auto; }
.adm-req { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-req summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-req[open] summary { white-space: normal; }
.adm-req-full { margin: 4px 0 6px; padding: 8px 10px; max-height: 40vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }

/* Broadcasts: an admin message over the chat until Acknowledge */
.overlay.broadcast .modal.dialog { width: min(640px, 100%); }
.broadcast-body { border: 0; background: none; }

/* A pass an admin issued over a non-passing review: always visible on the pass screen and /verify */
.proof .sub.override { color: var(--warn, #b26a00); font-weight: 500; margin-top: 4px; }

/* Outdated passes (an input the review read has changed since): red, on the pass screen, chat card and sidebar. */
.pill.OUTDATED { background: var(--negative); }
.proof .staleband { padding: 12px 16px; border-bottom: 1px solid rgba(217, 83, 88, .55); background: var(--fail-soft); }
.proof .staleband .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #8a1c21; margin-bottom: 4px; }
.proof .staleband .m { font-size: 15px; color: #000; }
.bubble.proofcard.stale { border-color: rgba(217, 83, 88, .55) !important; }
.proofcard .stale-line { margin-top: 6px; font-size: 13px; color: #8a1c21; }

/* pass image download / copy notes, under the pass card's buttons */
.proof .dlnote { padding: 0 22px 16px; font-size: 13px; }
.proof .dlnote.ok { color: #1E6B34; }
.proof .dlnote.bad { color: #8A1C22; }

/* screenshot-safe pass card: the four IDs stay visible, everything else folds under "More details" */
.proof .grid.ids .v { font-size: 13.5px; }
.proof details.more { border-top: 1px solid var(--line); }
.proof details.more > summary { cursor: pointer; padding: 8px 16px; font-size: 12px; color: var(--muted); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .07em; list-style: none; }
.proof details.more > summary::-webkit-details-marker { display: none; }
.proof details.more > summary::before { content: "▸ "; }
.proof details.more[open] > summary::before { content: "▾ "; }
.proof details.more > .wband { border-top: 1px solid var(--line); }

/* "Check my taxonomy" dialog (opened from the chat's pass message; the pass screen itself stays unchanged) */
.check-panel { width: min(680px, 100%); max-height: 92vh; overflow: auto; background: #FFF; color: #000; border: 1px solid #C7C7C7; border-radius: 12px; padding: 14px 18px; font-size: 14px; }
.check-panel .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #575757; }
.check-panel p { margin: 6px 0 8px; }
.check-panel textarea { width: 100%; box-sizing: border-box; font-family: var(--mono); font-size: 12px; }
.check-panel .row { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.check-panel .ok { color: #1E6B34; } .check-panel .bad { color: #8A1C22; }
.check-panel .diff { margin-top: 6px; display: grid; gap: 4px; font-size: 12px; overflow-wrap: anywhere; }
.check-panel mark { background: #F6D365; }

/* ---- CB tracker (/admin/cbs) ---- */
/* Group colours: validated (dataviz validator) for adjacent-pair CVD and normal vision in both modes; the orange is
   under 3:1 on the light surface, so every chart has direct labels and a table. */
.cbs-app { --g-qma: #2e7d55; --g-trusted: #2a78d6; --g-non: #c98a2b; }
:root[data-theme="dark"] .cbs-app { --g-qma: #45a674; --g-trusted: #3987e5; --g-non: #c0802a; }
.cbs-app .sw.g-qma, .cbs-tip .sw.g-qma { background: var(--g-qma); } .cbs-app .line.g-qma { stroke: var(--g-qma); } .cbs-app .dot.g-qma { fill: var(--g-qma); }
.cbs-app .sw.g-trusted, .cbs-tip .sw.g-trusted { background: var(--g-trusted); } .cbs-app .line.g-trusted { stroke: var(--g-trusted); } .cbs-app .dot.g-trusted { fill: var(--g-trusted); }
.cbs-app .sw.g-non, .cbs-tip .sw.g-non { background: var(--g-non); } .cbs-app .line.g-non { stroke: var(--g-non); } .cbs-app .dot.g-non { fill: var(--g-non); }
.cbs-tip { --g-qma: #2e7d55; --g-trusted: #2a78d6; --g-non: #c98a2b; position: absolute; z-index: 50; pointer-events: none; }
:root[data-theme="dark"] .cbs-tip { --g-qma: #45a674; --g-trusted: #3987e5; --g-non: #c0802a; }
.cbs-tip .tip-head { font-weight: 500; margin-bottom: 4px; }
.cbs-app .sw, .cbs-tip .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: baseline; }
.cbs-app .sw.refsw { background: none; border-top: 2px dashed var(--muted); border-radius: 0; height: 0; width: 14px; vertical-align: middle; }
.cbs-title { font-size: 18px; font-weight: 500; margin: 0; }
.cbs-title .muted { font-weight: 400; font-size: 14px; }
.cbs-tile { text-align: left; cursor: pointer; font: inherit; color: inherit; }
.cbs-tile.on { outline: 2px solid var(--ink); outline-offset: -2px; }
.st { display: inline-block; font-size: 12px; line-height: 1.6; border-radius: 9999px; padding: 0 8px; border: 1px solid var(--line); white-space: nowrap; color: var(--ink); background: var(--grey-95); }
.st-offboard { color: var(--error-ink); background: var(--fail-soft); border-color: rgba(217, 83, 88, .35); }
.st-training { background: #fbefd2; border-color: #e6c46e; color: #6b4a00; }
:root[data-theme="dark"] .st-training { background: #3d3216; border-color: #8a6d1f; color: #f0d48a; }
.st-efficient { background: #e3f3e6; border-color: #9ccfa6; color: #1f5a33; }
.st-acceptable { background: #eef4dc; border-color: #bdd08a; color: #4a5a1c; }
:root[data-theme="dark"] .st-acceptable { background: #2b3319; border-color: #6b7f35; color: #d2e0a3; }
:root[data-theme="dark"] .st-efficient { background: #1d3524; border-color: #3f7a4f; color: #a8dcb3; }
.cbs-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; }
.cbs-bars p { margin: 4px 0 0; font-size: 12px; }
.cbs-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.cbs-chart { margin: 0; }
.cbs-chart figcaption { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.cbs-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.cbs-chart .grid { stroke: var(--line); stroke-width: 1; }
.cbs-chart .refline { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cbs-chart .axis { fill: var(--muted); font-size: 10px; }
.cbs-chart .endlabel { fill: var(--ink); font-size: 11px; }
.cbs-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cbs-chart .dot { stroke: var(--panel); stroke-width: 2; }
.cbs-chart .hit { fill: transparent; cursor: crosshair; outline: none; }
.cbs-chart .hit:focus-visible { fill: var(--grey-95); fill-opacity: .5; }
.cbs-app .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 6px; }
.cbs-callout { font-size: 15px; margin: 4px 0 12px; }
.funnel { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; }
.funnel-row { display: grid; grid-template-columns: 140px 1fr 260px; gap: 12px; align-items: center; font-size: 13px; }
.funnel-track { background: var(--grey-95); border-radius: 4px; height: 18px; }
.funnel-bar { background: var(--g-trusted); height: 100%; border-radius: 4px; }
.cbs-people td { vertical-align: top; }
.cbs-row { cursor: pointer; }
.cbs-row:hover td { background: var(--grey-95); }
.cbs-detail > td { background: var(--grey-95); padding: 8px 12px 14px; }
.cbs-app .small { font-size: 12px; }
.cbs-app button.small { padding: 3px 10px; font-size: 12px; }
.cbs-app .nowrap { white-space: nowrap; }
#search { min-width: 220px; }
@media (max-width: 720px) { .funnel-row { grid-template-columns: 1fr; } }
.cbs-app .cost-table th, .cbs-app .cost-table td { padding: 5px 10px; }
.cbs-app .cost-table thead th { font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.cbs-app .cost-table tbody td, .cbs-app .cost-table tbody th { border-bottom: 1px solid var(--line); }
.cbs-app .cost-table th[scope="row"] { text-align: left; font-weight: 500; white-space: nowrap; }
.cbs-app .th-sort { all: unset; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; }
.cbs-app .th-sort:hover { color: var(--ink); text-decoration: underline; }
.cbs-app .th-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.cbs-people td.num, .cbs-people td:nth-child(2) { white-space: nowrap; }
.check-panel ul.rows { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12px; overflow-wrap: anywhere; }
.navbtn.adminreq span { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 9999px; background: var(--grey-90); color: var(--ink); font-size: 12px; text-align: center; }
.navbtn.adminreq.alert { color: var(--error-ink); font-weight: 500; }
.navbtn.adminreq.alert span { background: var(--negative); color: #000; }
.msg.user.adminmsg .bubble { border: 2px solid var(--grey-80); }
.msg.user.adminmsg.open .bubble { border-color: var(--negative); background: var(--fail-soft); }
.msg.user.adminmsg .adm-tag { color: var(--error-ink); font-weight: 600; }
.msg.user.adminmsg.flash .bubble { animation: admflash 1.6s ease-out; }
@keyframes admflash { 0% { box-shadow: 0 0 0 6px rgba(217, 83, 88, .55); } 100% { box-shadow: 0 0 0 0 rgba(217, 83, 88, 0); } }
@media (prefers-reduced-motion: reduce) { .msg.user.adminmsg.flash .bubble { animation: none; outline: 3px solid var(--negative); } }
.adm-jumpbtn.alert { border-color: var(--negative); color: var(--error-ink); font-weight: 500; }
.adm-jump { color: var(--error-ink); text-decoration: underline; }