:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root {
  --bg: #ecebe5; --panel: #ffffff; --head: #f7f6f2; --ink: #1d1d1b; --muted: #6b6a64; --line: #e3e1d9; --edge: #d6d3c9;
  --shadow: 0 1px 2px rgb(30 28 20 / .06), 0 1px 1px rgb(30 28 20 / .03);
  --accent: #f38020; --ok: #2f8f5b; --warn: #b7791f; --bad: #c53030; --info: #2b6cb0;
  --chip: #efede6; --code: #faf9f6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0c; --panel: #1b1b19; --head: #222220; --ink: #ecebe6; --muted: #9a988f; --line: #2c2b28; --edge: #34332f;
    --shadow: 0 1px 2px rgb(0 0 0 / .5);
    --ok: #4fbf84; --warn: #e0a640; --bad: #f06363; --info: #63a4f0; --chip: #262522; --code: #161614;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0d0c; --panel: #1b1b19; --head: #222220; --ink: #ecebe6; --muted: #9a988f; --line: #2c2b28; --edge: #34332f;
  --shadow: 0 1px 2px rgb(0 0 0 / .5);
  --ok: #4fbf84; --warn: #e0a640; --bad: #f06363; --info: #63a4f0; --chip: #262522; --code: #161614;
}
/* Type sizes. Desktop keeps its sizes; phones get the larger set at the end of this file. */
:root { --fs-9: 9px; --fs-10_5: 10.5px; --fs-11: 11px; --fs-11_5: 11.5px; --fs-12: 12px; --fs-12_5: 12.5px; --fs-13: 13px; --fs-13_5: 13.5px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-code: 12.5px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-14)/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-code); }
header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; z-index: 2; }
.brand { font-weight: 700; font-size: var(--fs-18); letter-spacing: .2px; }
.logo { color: var(--accent); }
.tag { font-weight: 400; color: var(--muted); font-size: var(--fs-13); margin-left: 8px; }
.proj { display: flex; gap: 10px; align-items: center; }
select { background: var(--chip); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
.live { font-size: var(--fs-12); padding: 3px 8px; border-radius: 99px; background: var(--chip); }
.live.on { color: var(--ok); }
.live.on::before { content: "● "; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 14px 20px 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.stat b { display: block; font-size: var(--fs-22); }
.stat span { color: var(--muted); font-size: var(--fs-12); }

main { display: grid; grid-template-columns: minmax(320px, 1.5fr) minmax(320px, 1.2fr) minmax(280px, 1.1fr); gap: 16px; padding: 16px 20px 40px; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } }
.col { min-width: 0; }
h2 { font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 0 8px; }
h2:first-child { margin-top: 0; }
h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.agent { display: flex; align-items: center; gap: 10px; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.agent .meta { color: var(--muted); font-size: var(--fs-12); }
.role { font-size: var(--fs-11); padding: 1px 6px; border-radius: 99px; background: var(--chip); color: var(--muted); margin-left: 4px; }

.tree { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; max-height: 420px; overflow: auto; }
.file { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.file .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file.hot .name { color: var(--bad); font-weight: 600; }
.chips { display: flex; gap: 3px; flex: none; }
.chip { font-size: var(--fs-10_5); padding: 0 6px; border-radius: 99px; color: #fff; white-space: nowrap; }

.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 700px) { .board { grid-template-columns: 1fr 1fr; } }
.lane { background: var(--chip); border-radius: 10px; padding: 8px; min-height: 80px; }
.lane h3 { margin: 0 0 6px; font-size: var(--fs-11); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.task { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: var(--fs-13); }
.task .who { font-size: var(--fs-11_5); color: var(--muted); }

.change { cursor: pointer; margin-bottom: 8px; }
.change:hover { border-color: var(--accent); }
.change .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pill { font-size: var(--fs-11); padding: 1px 8px; border-radius: 99px; background: var(--chip); white-space: nowrap; }
.pill.merged { color: var(--ok); } .pill.conflict, .pill.changes_requested, .pill.checks_failed { color: var(--bad); }
.pill.queued, .pill.merging { color: var(--info); } .pill.review { color: var(--warn); }
.files { color: var(--muted); font-size: var(--fs-12); margin-top: 3px; }
.why { margin-top: 6px; font-size: var(--fs-12_5); border-left: 3px solid var(--bad); padding-left: 8px; }
.warn { margin-top: 6px; font-size: var(--fs-12_5); border-left: 3px solid var(--warn); padding-left: 8px; }

.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 80vh; overflow: auto; }
.ev { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-12_5); }
.ev time { color: var(--muted); font-size: var(--fs-11); margin-right: 6px; }
.ev.collision, .ev.conflict { border-left-color: var(--bad); }
.ev.merged { border-left-color: var(--ok); }
.ev.stale, .ev.review { border-left-color: var(--warn); }
.ev.message { border-left-color: var(--info); }
.ev.new { animation: flash 1.2s; }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 25%, var(--panel)); } }

dialog { width: min(900px, 94vw); max-height: 88vh; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); padding: 18px 20px; }
dialog::backdrop { background: rgb(0 0 0 / .4); }
dialog button { margin-top: 10px; background: var(--chip); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
pre.diff { background: var(--code); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow: auto; max-height: 50vh; }
.add { color: var(--ok); } .del { color: var(--bad); } .hunk { color: var(--info); }
.empty { color: var(--muted); font-size: var(--fs-13); padding: 6px 0; }

button { background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 6px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: var(--fs-13); }
button.ghost { background: var(--chip); color: var(--ink); border-color: var(--line); }
button.bad { background: var(--bad); border-color: var(--bad); }
button.ghost.bad-text { color: var(--bad); }
button.mini, select.mini { padding: 2px 8px; font-size: var(--fs-11_5); margin-top: 4px; }
input, textarea { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: var(--fs-13); min-width: 0; }
textarea { width: 100%; }
.row { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.row input { flex: 1; }
.grow { flex: 1; min-width: 0; }
.role.bad { color: var(--bad); }
.agent.paused { opacity: .7; border-style: dashed; }
#me { display: flex; gap: 8px; align-items: center; font-size: var(--fs-13); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 20px 0; padding: 10px 14px; background: var(--panel); border: 1px solid var(--accent); border-radius: 10px; }
.controls[hidden] { display: none; }
.controls #dir-body { flex: 2; min-width: 200px; }
.controls #protect-paths { flex: 1; min-width: 180px; }
.controls .sep { width: 1px; align-self: stretch; background: var(--line); }
.inbox { margin-bottom: 8px; }
.inbox.q { border-left: 3px solid var(--warn); }
.kicker { font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.post { font-size: var(--fs-13); padding: 2px 0; white-space: pre-wrap; }
.ev.question { border-left-color: var(--warn); }
.ev.directive { border-left-color: var(--accent); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; z-index: 10; font-size: var(--fs-13); }
@media (max-width: 700px) { .controls .sep { display: none; } }
.opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.opts button.mini { margin-top: 0; }
dialog#jev { width: min(560px, 94vw); }
.jev-form h3 { margin: 0 0 4px; font-size: var(--fs-16); }
.jev-form label { display: grid; gap: 3px; margin: 8px 0; font-size: var(--fs-13); }
.jev-form label small { color: var(--muted); font-weight: 400; }
.jev-form label.check { display: flex; gap: 6px; align-items: center; }
.jev-form fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; padding: 4px 12px 6px; }
.jev-form legend { padding: 0 4px; }
.jev-form legend label { margin: 0; font-weight: 600; }
.jev-form input[type=range] { width: 100%; }
.jev-form label.jev-master { flex-wrap: wrap; font-weight: 600; font-size: var(--fs-14); }
.jev-form label.jev-master small { flex-basis: 100%; margin-left: 22px; }
.jev-form fieldset .meta { margin: 2px 0 4px; font-size: var(--fs-12); }
.jev-summary { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: var(--fs-12_5); }
.jev-summary ul { margin: 2px 0 6px; padding-left: 18px; }
.jev-summary li { margin: 2px 0; }
.jev-context { margin: 6px 0 8px; font-size: var(--fs-12_5); }
.jev-context summary { cursor: pointer; color: var(--muted); }
.jev-context #jev-context { display: grid; gap: 2px; margin: 6px 0 2px; }
.jev-off { border-left: 3px solid var(--warn); padding: 6px 10px; margin: 8px 0; font-size: var(--fs-13); }
.jev-form.off fieldset, .jev-form.off > label:not(.jev-master) { opacity: .5; }
.jev-form .row button { margin-top: 4px; }
.agent.delegate .dot { outline: 2px dashed var(--accent); outline-offset: 1px; }
.decisions { margin-top: 6px; max-height: 420px; overflow: auto; }
.decision { font-size: var(--fs-13); }
.decision .meta { font-size: var(--fs-12); margin-bottom: 2px; }
#decision-add { padding: 8px; }
#decision-add[hidden] { display: none; }
.side { font-size: var(--fs-13); padding: 3px 0; }
.side button.mini { margin-top: 0; margin-left: 4px; }
.meta { color: var(--muted); }

/* ── scale-first overview ─────────────────────────────────────────────── */
header { gap: 16px; }
.finder { position: relative; flex: 1; min-width: 140px; max-width: 520px; }
.finder input { width: 100%; padding: 7px 10px; }
.results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); max-height: 70vh; overflow: auto; z-index: 5; }
.results[hidden] { display: none; }
.results .kicker { margin: 6px 6px 2px; }
.hit { display: block; padding: 5px 6px; border-radius: 6px; cursor: pointer; color: var(--ink); text-decoration: none; }
.hit:hover { background: var(--chip); }
a.who, a[data-change], a[data-find] { cursor: pointer; text-decoration: none; font-weight: 600; }
a[data-change], a[data-find] { color: var(--info); }
a.who:hover, a[data-change]:hover, a[data-find]:hover { text-decoration: underline; }

.health { display: grid; grid-template-columns: 1.6fr 1.6fr repeat(6, 1fr); gap: 10px; padding: 14px 20px 0; }
@media (max-width: 1100px) { .health { grid-template-columns: repeat(2, 1fr); } }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; min-width: 0; }
.tile b { display: block; font-size: var(--fs-22); line-height: 1.2; }
.tile b small { font-size: var(--fs-13); color: var(--muted); font-weight: 400; }
.tile > span { color: var(--muted); font-size: var(--fs-12); }
.tile .bad, td.bad, b.bad { color: var(--bad); }
.states { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
button.state { background: var(--chip); color: var(--ink); border: 1px solid var(--line); font-size: var(--fs-11_5); padding: 1px 8px; border-radius: 99px; }
button.state::before { content: "●"; margin-right: 4px; color: var(--muted); }
button.state.ok::before { color: var(--ok); } button.state.warn::before { color: var(--warn); } button.state.bad::before { color: var(--bad); }
.bar { display: flex; gap: 2px; height: 8px; margin: 8px 0 4px; border-radius: 4px; overflow: hidden; background: var(--chip); }
.bar span { display: block; min-width: 3px; }
.seg-ok { background: var(--ok); } .seg-info { background: var(--info); } .seg-warn { background: var(--warn); } .seg-muted { background: var(--line); }
.tile .meta { font-size: var(--fs-11_5); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); vertical-align: middle; }
.dot.working { background: var(--ok); } .dot.waiting, .dot.paused { background: var(--warn); } .dot.conflict, .dot.quiet { background: var(--bad); }
.q { font-weight: 600; margin: 2px 0; }
.card.stuck { border-left: 3px solid var(--bad); margin-bottom: 6px; font-size: var(--fs-13); }

.legend { display: flex; gap: 14px; font-size: var(--fs-12); margin-bottom: 6px; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.chart { width: 100%; height: 80px; display: block; }
.m-ok { fill: var(--ok); background: var(--ok); } .m-bad { fill: var(--bad); background: var(--bad); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart g:hover rect[fill="transparent"] { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.axis-labels { display: flex; justify-content: space-between; font-size: var(--fs-11); color: var(--muted); }

.qrow { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-13); padding: 3px 0; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.areas, table.dir { width: 100%; border-collapse: collapse; font-size: var(--fs-12_5); }
table.areas th, table.dir th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--fs-11_5); padding: 0 6px 4px 0; }
table.areas td, table.dir td { padding: 4px 6px 4px 0; border-top: 1px solid var(--line); vertical-align: top; }
table.areas td:not(:first-child), table.areas th:not(:first-child) { text-align: right; width: 58px; font-variant-numeric: tabular-nums; }
.heat { height: 4px; background: var(--chip); border-radius: 2px; margin-top: 3px; }
.heat span { display: block; height: 4px; border-radius: 2px; background: var(--accent); }

.seg { float: right; display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-transform: none; letter-spacing: 0; }
.seg button { background: var(--panel); color: var(--muted); border: 0; border-radius: 0; padding: 1px 8px; font-size: var(--fs-11_5); }
.seg button.on { background: var(--chip); color: var(--ink); font-weight: 600; }
.feed-filter { width: 100%; margin-bottom: 6px; }

/* contribution grid: one hue, light to dark (dark mode: dark to light) */
:root { --h0: #ebe9e2; --h1: #b9e1c6; --h2: #7cc596; --h3: #3f9a63; --h4: #23663f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --h0: #262522; --h1: #1d4a31; --h2: #2a7147; --h3: #3f9e64; --h4: #74d39b; }
}
:root[data-theme="dark"] { --h0: #262522; --h1: #1d4a31; --h2: #2a7147; --h3: #3f9e64; --h4: #74d39b; }
.contrib-card { padding: 10px 12px; }
.grid-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.grid-head .seg { margin-left: auto; }
.grid-scroll { overflow-x: auto; }
svg.contrib { display: block; }
svg.contrib text { fill: var(--muted); font-size: var(--fs-9); }
.gc.g0 { fill: var(--h0); background: var(--h0); } .gc.g1 { fill: var(--h1); background: var(--h1); }
.gc.g2 { fill: var(--h2); background: var(--h2); } .gc.g3 { fill: var(--h3); background: var(--h3); }
.gc.g4 { fill: var(--h4); background: var(--h4); }
svg.contrib rect:hover { stroke: var(--ink); stroke-width: 1; }
.grid-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 1px; vertical-align: -1px; }
.knows > div { padding: 2px 0; }

/* code browser */
a.button { display: inline-block; text-decoration: none; cursor: pointer; border-radius: 6px; padding: 2px 8px; font-size: var(--fs-11_5); margin-top: 4px; background: var(--chip); color: var(--ink); border: 1px solid var(--line); }
.code-row { gap: 6px; margin: 6px 0; }
/* highlight.js token colors, on the app's existing palette (both themes).
   hljs-* spans only appear in the file viewer, diffs and the full-file view. */
.hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-selector-id, .hljs-selector-class, .hljs-tag, .hljs-name, .hljs-doctag, .hljs-meta .hljs-keyword { color: var(--info); }
.hljs-string, .hljs-regexp, .hljs-attribute, .hljs-meta .hljs-string, .hljs-selector-attr { color: var(--ok); }
.hljs-number, .hljs-literal, .hljs-meta, .hljs-built_in, .hljs-symbol { color: var(--warn); }
.hljs-title, .hljs-function, .hljs-section, .hljs-bullet { color: var(--accent); font-weight: 500; }
.hljs-type, .hljs-title.class_, .hljs-title.function_, .hljs-params, .hljs-property, .hljs-variable, .hljs-template-variable { color: inherit; }
.hljs-deletion { color: var(--bad); } .hljs-addition { color: var(--ok); }
/* In a colored diff the tint says added or removed; the text reads in ink so the tokens show. */
.dl.add .hl, .dl.del .hl, .sl code.add .hl, .sl code.del .hl { color: var(--ink); }
.dl.add .mk, .dl.add .ln { color: var(--ok); } .dl.del .mk, .dl.del .ln { color: var(--bad); }
.mk { user-select: none; }
pre.copy { white-space: pre-wrap; overflow-wrap: anywhere; }

/* code: its own page, a folder tree beside the file */
.code-bar { flex-wrap: wrap; margin-top: 10px; }
.code-bar .button { margin-top: 0; }
.code-tabs { float: none; }
.rv-page .seg.code-tabs a[role] { padding: 3px 12px; font-size: var(--fs-12_5); color: var(--muted); background: var(--panel); text-decoration: none; }
.rv-page .seg.code-tabs a[role].on { background: var(--chip); color: var(--ink); font-weight: 600; }
.code-grid { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 14px; align-items: start; }
.code-grid.wide { grid-template-columns: minmax(0, 1fr); }
.code-grid.wide .code-side { display: none; }
.code-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.code-side input { width: 100%; margin: 0; }
.code-tree, .code-tree ol { list-style: none; margin: 0; padding: 0; }
.code-tree { position: relative; padding: 6px 0; overflow: auto; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-tree ol { padding-left: 14px; }
.code-tree summary { cursor: pointer; padding: 2px 10px; color: var(--ink); list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-tree summary::-webkit-details-marker { display: none; }
.code-tree summary::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); }
.code-tree details[open] > summary::before { content: "▾"; }
.code-tree summary:hover, .code-tree a:hover { background: var(--chip); }
.code-tree a { display: block; padding: 2px 10px 2px calc(10px + 1.1em); color: var(--ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.code-tree a.flat { padding-left: 10px; white-space: normal; overflow-wrap: anywhere; }
.code-tree a.on { background: var(--chip); font-weight: 650; box-shadow: inset 3px 0 0 var(--accent); }
.code-main { padding: 12px 14px; min-height: 50vh; }
.code-main > .meta { margin: 4px 0 10px; }
.crumbs { font-size: var(--fs-13_5); margin-bottom: 10px; overflow-wrap: anywhere; }
.code-list { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-list td { padding: 6px 12px; border-top: 1px solid var(--line); }
.code-list tr:first-child td { border-top: 0; }
.code-list td:last-child { text-align: right; white-space: nowrap; }
.code-list a.dir { font-weight: 600; }
.code-file { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 14px; }
.crumbs + .code-file { margin-top: 0; }
.code-fhead { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--head); border-bottom: 1px solid var(--line); }
.code-src, .code-readme { margin: 0; border: 0; border-radius: 0; background: var(--code); overflow: auto; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-src { padding: 8px 0; }
.code-src .cl { display: block; padding-right: 16px; }
.code-src .cl:hover { background: var(--chip); }
.code-src .ln::before { content: attr(data-ln); display: inline-block; width: 4.5em; padding-right: 1.2em; text-align: right; color: var(--muted); user-select: none; }
.code-readme { padding: 14px 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-13); }
@media (max-width: 760px) { .code-grid { grid-template-columns: 1fr; } .code-side { position: static; max-height: 40vh; } .code-grid.reading .code-side { order: 2; } .code-src .ln::before { width: 3em; padding-right: .8em; } }

/* diff with line comments */
.diffview { background: var(--code); border: 1px solid var(--line); border-radius: 8px; padding: 6px 0; overflow: auto; max-height: 60vh; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.dl { display: flex; white-space: pre; min-width: max-content; }
.dl .ln { width: 44px; flex: none; text-align: right; padding-right: 10px; color: var(--muted); user-select: none; }
.dl code { font: inherit; padding-right: 12px; }
.dl.file { padding: 4px 10px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); }
.dl.file:first-child { border-top: 0; }
.dl.hunk code { color: var(--info); }
.dl.add { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.dl.del { color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.dl.can { cursor: pointer; }
.dl.can:hover .ln { color: var(--accent); }
.dl.can:hover .ln::before { content: "+ "; }
.dc, .dc-new { margin: 4px 12px 6px 54px; padding: 6px 10px; border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: 6px; background: var(--panel); font: var(--fs-13)/1.45 ui-sans-serif, system-ui, sans-serif; white-space: normal; }
.dc.request_changes { border-left-color: var(--bad); } .dc.approve { border-left-color: var(--ok); } .dc.pending { border-left-color: var(--accent); }
.dc-new textarea { width: 100%; }
.skill { max-height: 50vh; }

/* history */
.commits { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
details.commit { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 6px 10px; }
details.commit summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; min-width: 0; }
details.commit summary::-webkit-details-marker { display: none; }
.sha { color: var(--info); }
pre.msg { margin: 6px 0; white-space: pre-wrap; color: var(--muted); font-size: var(--fs-12_5); }
.commit .files { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.fs.added { color: var(--ok); } .fs.deleted { color: var(--bad); } .fs.modified { color: var(--warn); }
#detail-body label { display: block; margin: 6px 0; }
#detail-body label input { width: 100%; }
[hidden] { display: none !important; }
#detail-body label.check { display: flex; align-items: center; gap: 6px; }
#detail-body label.check input { width: auto; }
.key-card .row { margin-top: 6px; } .key-card input { flex: 1; }
.avatar { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
details.alt { margin-top: 14px; }
details.alt summary { cursor: pointer; color: var(--muted, #888); font-size: var(--fs-13); }
body.setup { display: grid; place-items: start center; padding: 10vh 16px; }
.setup-card { max-width: 520px; width: 100%; background: var(--card, #fff); border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 24px; }
.setup-card label { display: block; margin: 12px 0; }
.setup-card input { width: 100%; }

/* contests */
.votebar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--line, #8883); overflow: hidden; vertical-align: middle; }
.votebar span { display: block; height: 100%; background: var(--ok, #2da44e); }
.attempts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.attempt.won { outline: 2px solid var(--ok, #2da44e); }
.attempt.lost { opacity: 0.6; }
.attempt .votes { margin: 6px 0; }
.attempt details { margin-top: 6px; }
.add { color: var(--ok, #2da44e); }
.del { color: var(--bad, #cf222e); }

/* ── visual hierarchy: each group is a panel with its own header ─────── */
header .nav { display: flex; gap: 2px; padding-left: 12px; border-left: 1px solid var(--line); }
header .nav button { background: transparent; border-color: transparent; color: var(--ink); }
header .nav button:hover { background: var(--chip); }
header .proj { padding-left: 12px; border-left: 1px solid var(--line); }
header .brand { flex: none; }

main { gap: 20px; padding-top: 20px; }
.col { display: flex; flex-direction: column; gap: 20px; }
.panel { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.panel-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; background: var(--head); border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font-size: var(--fs-14); font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); }
.panel-head small { color: var(--muted); font-size: var(--fs-12); }
.panel-head .seg { float: none; margin-left: auto; align-self: center; }
.panel-tools { padding: 8px 14px; border-bottom: 1px solid var(--line); }
.panel-tools .feed-filter { margin: 0; }

/* inside a panel, items are rows split by rules rather than cards on cards */
.panel > .card, .panel-body > .card { background: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 12px 14px; }
.panel-body > .card + .card { border-top: 1px solid var(--line); }
.panel > .card + .panel-body, .panel > .card + .card { border-top: 1px solid var(--line); }
.panel-body.list { gap: 0; }
.panel-body > .empty, .panel-body > p.meta { margin: 0; padding: 12px 14px; }
.panel > .card > .empty:only-child { padding: 0; }
.panel-body > .card.inbox.q, .panel-body > .card.stuck { border-left: 3px solid var(--warn); padding-left: 11px; }
.panel-body > .card.stuck { border-left-color: var(--bad); }
.panel .decisions { max-height: 460px; margin-top: 0; }
.panel-body > .card > .empty:first-child { padding-top: 0; }
.card.q { font-weight: inherit; }
.panel .kicker { margin-bottom: 6px; }

/* the exceptions panel stands out when something is waiting */
.panel.attn.hot { border-color: color-mix(in srgb, var(--warn) 55%, var(--edge)); }
.panel.attn.hot .panel-head { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.panel.attn.hot .panel-head small { color: var(--warn); font-weight: 600; }

/* activity: one list with rules between entries */
.feed { gap: 0; }
.ev { border: 0; border-radius: 0; border-left: 3px solid transparent; border-top: 1px solid var(--line); padding: 8px 12px 8px 11px; background: transparent; }
.ev:first-child { border-top: 0; }
.panel .feed { max-height: 70vh; }
dialog .feed { border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: 40vh; }

/* health tiles sit on the page background like the panels */
.health { gap: 12px; padding-top: 18px; }
.tile, .stat { border-color: var(--edge); box-shadow: var(--shadow); border-radius: 12px; }
.controls { box-shadow: var(--shadow); border-radius: 12px; }

/* dialogs: sections separated by rules, headed in the same voice as panels */
dialog { padding: 22px 24px; border-color: var(--edge); box-shadow: 0 20px 60px rgb(0 0 0 / .25); }
#detail-body > h3:first-child { margin-top: 0; font-size: var(--fs-18); }
#detail-body h2 { margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--fs-13_5); font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--ink); }
#detail-body h2 small { color: var(--muted); font-size: var(--fs-12); font-weight: 400; }
#detail-body .card + .card { margin-top: 8px; }
#detail-body .card { border-radius: 10px; }

/* theme switch */
button.theme { min-width: 34px; padding: 5px 8px; }

/* review: a change on its own page */
body.reviewing > main, body.reviewing > #health, body.reviewing > #controls, body.reviewing > #more, body.reviewing > #tour { display: none !important; }
.rv-page { padding: 16px 20px 40px; max-width: 1800px; margin: 0 auto; }
.rv-page .panel-body { padding: 10px 14px; }
.rv-page .panel-body > p.meta { padding: 0; margin: 4px 0; }
.rv-page .panel-body h3 { margin: 12px 0 4px; font-size: var(--fs-12); color: var(--muted); font-weight: 600; }
.rv-top { margin-bottom: 12px; }
.rv-top h1 { margin: 10px 0 4px; font-size: var(--fs-22); font-weight: 650; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rv-top h1 .meta { font-weight: 400; font-size: var(--fs-18); }
.rv-summary { margin: 8px 0; max-width: 90ch; }
.rv-brief { border: 1px solid var(--edge); border-left: 4px solid var(--ok); border-radius: 10px; background: var(--panel); padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.rv-brief.person { border-left-color: var(--warn); }
.rv-brief ul { margin: 6px 0 0; padding-left: 18px; columns: 2 320px; font-size: var(--fs-13); }
.rv-brief li { margin: 2px 0; break-inside: avoid; }
.rv-brief li.ok { color: var(--ok); list-style: "✓ "; }
.rv-brief li.thr-r { color: var(--bad); }
.rv-brief.mini { box-shadow: none; padding: 6px 10px; margin: 0 0 8px; font-size: var(--fs-12_5); }
.rv-verdict { font-size: var(--fs-14); }
.badge { display: inline-block; font-size: var(--fs-11); font-weight: 650; padding: 1px 8px; border-radius: 99px; color: #fff; background: var(--ok); margin-right: 6px; white-space: nowrap; }
.rv-brief.person .badge, .badge.person { background: var(--warn); }
.badge.agents { background: var(--ok); }
.rv-grid { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(260px, 340px); gap: 14px; align-items: start; }
@media (max-width: 1200px) { .rv-grid { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); } .rv-why { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
@media (max-width: 760px) { .rv-grid { grid-template-columns: 1fr; } .rv-files { position: static !important; max-height: none !important; } .rv-page { padding: 12px 16px 40px; } }
.rv-files { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.rv-files ol { list-style: none; margin: 0; padding: 4px 0; overflow: auto; }
.rv-files li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--fs-12_5); cursor: pointer; min-width: 0; }
.rv-files li:hover { background: var(--chip); }
.rv-files li.on { background: var(--chip); box-shadow: inset 3px 0 0 var(--accent); }
.rv-files li.seen .fname { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.rv-files li input { margin: 0; flex: none; }
.rv-files .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-12); }
.rv-files .add, .rv-files .del { font-size: var(--fs-11); flex: none; }
.rv-files .keys { padding: 6px 12px 10px; margin: 0; border-top: 1px solid var(--line); }
kbd { font: 11px ui-monospace, monospace; border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--chip); }
.risk { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line); }
.risk.r1 { background: color-mix(in srgb, var(--warn) 55%, transparent); } .risk.r2 { background: var(--warn); } .risk.r3 { background: var(--bad); }
.tcount { flex: none; font-size: var(--fs-10_5); min-width: 16px; text-align: center; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; }
.rv-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rv-tools .seg { float: none; }
.rv-tools .seg button { padding: 3px 10px; font-size: var(--fs-12_5); }
.grow { flex: 1; min-width: 0; }
.since { margin: -4px 0 10px; }
.rv-file { background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; margin-bottom: 14px; overflow: hidden; scroll-margin-top: 80px; box-shadow: var(--shadow); }
.rv-fhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--head); border-bottom: 1px solid var(--line); }
.flag { font-size: var(--fs-11); padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--ink); }
.flag.protected { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.rv-dv { border: 0; border-radius: 0; max-height: none; }
.rv-dv .dl .ln { width: 40px; }
.rv-orphans { padding: 6px 0; border-bottom: 1px solid var(--line); background: var(--code); }
.sl { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px minmax(0, 1fr); white-space: pre-wrap; overflow-wrap: anywhere; }
.sl .ln { text-align: right; padding-right: 8px; color: var(--muted); user-select: none; }
.sl code { font: inherit; padding-right: 8px; }
.sl code.del { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); }
.sl code.add { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.sl code.empty { background: color-mix(in srgb, var(--muted) 6%, transparent); }
.sl.hunk { display: block; padding: 2px 10px; color: var(--info); }
.sl.can { cursor: pointer; } .sl.can:hover .ln:nth-of-type(3) { color: var(--accent); }
.thr { margin: 6px 12px 8px 92px; padding: 8px 12px; border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: 8px; background: var(--panel); font: var(--fs-13)/1.45 ui-sans-serif, system-ui, sans-serif; white-space: normal; }
.rv-orphans .thr { margin-left: 12px; }
.thr.blocking { border-left-color: var(--bad); }
.thr.pending { border-left-color: var(--accent); }
.thr.resolved { border-left-color: var(--ok); color: var(--muted); }
.thr.resolved summary { cursor: pointer; }
.thr-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.tp + .tp { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.thr .row { margin-top: 6px; }
.thr .row input:not([type]) { flex: 1; min-width: 0; }
.thr textarea { width: 100%; }
.thr label.check { display: flex; gap: 4px; align-items: center; }
.rv-why { display: flex; flex-direction: column; gap: 12px; }
.meter { height: 8px; background: var(--chip); border-radius: 99px; overflow: hidden; margin: 2px 0 6px; }
.meter span { display: block; height: 100%; background: var(--ok); }
.touched { list-style: none; margin: 8px 0 0; padding: 0; font-size: var(--fs-12); }
.touched li { overflow-wrap: anywhere; }
.touched li.in::before { content: "✓ "; color: var(--ok); }
.touched li.out::before { content: "! "; color: var(--warn); font-weight: 700; }
.actx + .actx { margin-top: 8px; }
.actx ul { margin: 2px 0 0; padding-left: 18px; font-size: var(--fs-13); }
.actx p { margin: 2px 0; white-space: pre-wrap; font-size: var(--fs-13); }
.rv-rev + .rv-rev { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.rv-submit { position: sticky; bottom: 12px; padding: 10px 12px; z-index: 1; box-shadow: 0 6px 24px rgb(0 0 0 / .18); }
.rv-submit textarea { width: 100%; resize: vertical; }
.rv-submit .row { align-items: center; }
.attempts-page { display: grid; grid-template-columns: repeat(var(--n), minmax(300px, 1fr)); gap: 12px; overflow-x: auto; align-items: start; margin-bottom: 14px; }
.attempts-page .diffview { max-height: 70vh; margin-top: 8px; }
.file-full { max-height: 75vh; overflow: auto; white-space: pre; }
.file-full .ln { display: inline-block; width: 40px; color: var(--muted); text-align: right; padding-right: 10px; user-select: none; }
.card.rq.person { border-left: 3px solid var(--warn); }
.card.rq + .card.rq { margin-top: 6px; }
.rv-page a:not(.button):not(.who) { color: var(--info); text-decoration: none; cursor: pointer; }

/* First-visit tour for signed-out visitors. */
.tour { margin: 14px 20px 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--accent); border-radius: 8px; display: grid; gap: 12px; font-size: var(--fs-13); line-height: 1.5; }
.tour[hidden] { display: none; }
.tour-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.tour-projects a { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; }
.tour-projects a:hover { border-color: var(--accent); }
.tour-projects a.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tour-projects span { color: var(--muted); font-size: var(--fs-12); }
.tour-actions { display: flex; gap: 8px; }
.inbox .default { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: color-mix(in srgb, var(--info) 8%, transparent); font-size: var(--fs-12); }
.inbox .default button { margin-left: 4px; }

/* Help: a ? beside each panel title, and the glossary. */
.help-dot { margin-left: 6px; width: 18px; height: 18px; padding: 0; border-radius: 50%; font-size: var(--fs-11); line-height: 16px; background: transparent; color: var(--muted); border: 1px solid var(--edge); cursor: pointer; vertical-align: 2px; }
.help-dot:hover { color: var(--ink); border-color: var(--accent); }
.panel-help { margin: 0; padding: 10px 14px; font-size: var(--fs-12_5); line-height: 1.5; color: var(--muted); background: color-mix(in srgb, var(--accent) 5%, transparent); border-bottom: 1px solid var(--line); }
.help-btn { font-weight: 600; min-width: 2em; }
.gl { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13); line-height: 1.45; }
@media (max-width: 600px) { .gl { grid-template-columns: 1fr; gap: 2px; } }
.nav button, .proj button, .proj .role { white-space: nowrap; }
@media (max-width: 1500px) { .brand .tag { display: none; } }

/* our confirm/prompt dialog: small, the action named on the main button */
dialog.ask { width: min(440px, 92vw); padding: 20px 22px 16px; }
dialog.ask h3 { margin: 0 0 6px; font-size: var(--fs-16); }
dialog.ask p.meta { margin: 0 0 12px; font-size: var(--fs-13); line-height: 1.45; }
dialog.ask label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-12_5); color: var(--muted); }
dialog.ask textarea { resize: vertical; color: var(--ink); }
dialog.ask .ask-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
dialog.ask .ask-actions button { margin-top: 0; }
dialog.ask .ask-actions button:not(.ghost) { background: var(--accent); border-color: var(--accent); color: #fff; }
dialog.ask .ask-actions button.bad { background: var(--bad); border-color: var(--bad); }
.key-card label.si-scope { justify-content: flex-start; align-items: baseline; flex-wrap: wrap; }
.key-card label.si-scope input { flex: 0 0 auto; }

/* tasks: the list behind the count, and a task on its own page */
a.tile-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.tile-link:hover span { color: var(--accent); text-decoration: underline; }
.tile .meta a { color: inherit; cursor: pointer; text-decoration: none; }
.tile .meta a:hover { color: var(--accent); }
.bar span[data-tasks] { cursor: pointer; }
.tasks-tools { gap: 8px; align-items: center; margin: 6px 0 10px; flex-wrap: wrap; }
.tasks-tools .seg { float: none; }
.tasks-tools .seg button { padding: 3px 10px; font-size: var(--fs-12_5); margin-top: 0; }
.tasks-tools input { flex: 1; min-width: 160px; }
table.dir.tasks td:first-child { min-width: 220px; }
table.dir.tasks .mono { font-size: var(--fs-11_5); }
#detail:has(table.tasks) { width: min(1100px, 96vw); }
.task-page { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.task-main, .task-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.task-page .files { margin: 2px 0 8px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .task-page { grid-template-columns: 1fr; } }
table.dir.tasks td:last-child, table.dir.tasks td:nth-child(2) { white-space: nowrap; }
.card.fresh { border-color: var(--accent, #e8772e); }

/* attachments: screenshots, builds, logs and documents agents posted */
.attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 8px 0; }
#attachments > .attachments { padding: 12px 14px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
#attachments .att img, #attachments .att video { height: 90px; }
#attachments .att-icon { height: 44px; }
.att { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); display: flex; flex-direction: column; min-width: 0; }
.att img, .att video { display: block; width: 100%; height: 130px; object-fit: cover; background: var(--head); }
.att.image img { object-fit: contain; }
.att audio { width: 100%; margin: 8px 0 0; }
.att-icon { display: flex; align-items: center; justify-content: center; height: 64px; background: var(--head); color: var(--muted); font-weight: 600; font-size: var(--fs-14); text-decoration: none; }
.att figcaption { padding: 6px 8px; font-size: var(--fs-12); min-width: 0; }
.att figcaption > div:not(.meta) { margin-top: 2px; }
.att-name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-unattach] { cursor: pointer; }
.att-name { color: inherit; text-decoration: none; }
.att-name:hover { text-decoration: underline; }
.key-section { margin: 22px 0 6px; padding: 4px 14px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
#detail-body .key-section h2 { border-top: 0; padding-top: 0; margin-top: 10px; }
.attempt .approach { margin: 6px 0 8px; padding: 8px 10px; border-left: 3px solid var(--accent, #f58220); background: var(--panel-2, rgba(127,127,127,.08)); }
.attempt .approach b { display: block; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.glance { margin-bottom: 14px; }
.glance table { width: 100%; border-collapse: collapse; }
.glance th { text-align: left; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .04em; opacity: .7; padding: 6px 8px; }
.glance td { padding: 8px; border-top: 1px solid var(--line, rgba(127,127,127,.2)); vertical-align: top; }
.glance td:nth-child(2) { width: 60%; }
.glance tr.won td { background: rgba(45,164,78,.08); }
.glance tr.lost { opacity: .6; }
@media (max-width: 700px) { .glance td:nth-child(3), .glance th:nth-child(3), .glance td:nth-child(4), .glance th:nth-child(4) { display: none; } }

/* Approve, ready from an email link. */
button.ready { outline: 3px solid var(--accent, #1f6feb); outline-offset: 2px; }

a.who-me { color: inherit; text-decoration: none; }
a.who-me:hover { text-decoration: underline; }

/* ── the dashboard: what needs a person and the live feed up top; reference material in tabs below ── */
main.home { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
@media (max-width: 1000px) { main.home { grid-template-columns: 1fr; } }
.health { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .health { grid-template-columns: 1fr 1fr; padding: 12px 12px 0; gap: 8px; } }
.health .warnings { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.warning { font-size: var(--fs-12_5); padding: 5px 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.warning.bad { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.warning .mini { margin-left: 6px; }
.quiet { margin: 0; color: var(--muted); font-size: var(--fs-13); padding: 2px 4px; }
.quiet[hidden] { display: none; }

/* Questions: two lines until clicked. */
.inbox .q { font-weight: 550; }
.inbox .q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox .q.more { cursor: pointer; }
.inbox .q.open { display: block; overflow: visible; }

/* One color for agents' names; the name is what matters. */
a.who { color: var(--info); }

/* Panel help shows when you're at the panel, not all the time. */
.panel-head .help-dot { opacity: 0; transition: opacity .15s; }
.panel-head:hover .help-dot, .panel-head .help-dot:focus-visible { opacity: 1; }
@media (hover: none) { .panel-head .help-dot { opacity: .6; } }

/* Work, Memory and Files: one tab at a time. */
.more { padding: 0 20px 40px; }
.more[hidden] { display: none; }
.more-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.more-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; color: var(--muted); font-weight: 600; }
.more-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.more-tabs small { color: var(--muted); font-weight: 400; margin-left: 2px; }
.more-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; align-items: start; }
.more-body[hidden] { display: none; }
main.home { padding-bottom: 20px; }

/* The tour: one line, not a panel. */
.tour { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; }
.tour .tour-text { flex: 1 1 360px; }
.tour > a { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: var(--fs-12_5); }
.tour > a:hover, .tour > a.on { border-color: var(--accent); }
.tour .tour-import { display: flex; gap: 6px; flex: 1 1 340px; margin: 0; }
.tour .tour-import input { flex: 1; min-width: 0; }
main > .empty form { max-width: 560px; margin: 10px auto; }

.inbox .q:not(.open) { max-height: 2.9em; white-space: normal; }

/* Only shown where they're needed: the phone menu's extra items and the Steer button. */
.menu-only, .menu-btn, .steer-toggle, #detail-body .jump { display: none; }

/* ── Phones ─────────────────────────────────────────────────────────────
   One row of header (logo, project, live, ☰) with everything else in the menu;
   "Needs a person" first; dialogs fill the screen; nothing wider than the
   screen; text big enough to read; controls big enough to tap. */
@media (max-width: 700px) {
  :root { --fs-9: 10px; --fs-10_5: 12px; --fs-11: 13px; --fs-11_5: 13px; --fs-12: 14px; --fs-12_5: 15px; --fs-13: 15px; --fs-13_5: 16px; --fs-14: 16px; --fs-16: 17px; --fs-18: 19px; --fs-22: 24px; --fs-code: 13px; }
  /* iOS zooms into any field with text under 16px. */
  input, select, textarea, input.mono, textarea.mono { font-size: 16px; }

  /* Header */
  header { flex-wrap: wrap; gap: 8px; padding: 6px 12px; }
  header .proj { display: contents; }
  header .brand { order: 0; }
  header .brand .tag { display: none; }
  header #project { order: 1; flex: 1 1 0; min-width: 0; max-width: none; }
  header .live { order: 2; flex: none; font-size: 0; padding: 6px; background: none; }
  header .live::before { content: "●"; font-size: 14px; color: var(--muted); animation: none; }
  header .live.on::before { color: var(--ok); animation: pulse 1.6s infinite; }
  header .menu-btn { display: inline-block; order: 3; flex: none; width: 44px; padding: 0; font-size: 20px; }
  header:not(.menu) .finder, header:not(.menu) .nav, header:not(.menu) #np-open, header:not(.menu) #me, header .theme { display: none; }
  header.menu { max-height: 100dvh; overflow-y: auto; }
  header.menu .finder { order: 10; flex: 1 1 100%; max-width: none; }
  header.menu .nav { order: 11; flex: 1 1 100%; flex-direction: column; border-left: 0; padding: 0; gap: 0; }
  header.menu .nav button { text-align: left; padding: 10px 4px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
  header.menu .menu-only { display: inline; }
  header.menu .nav button.menu-only { display: block; }
  header.menu .menu-hide { display: none; }
  header.menu .help-btn { font-weight: inherit; }
  header.menu #np-open { order: 12; flex: 1 1 100%; text-align: left; }
  header.menu #me { order: 13; flex: 1 1 100%; justify-content: space-between; padding: 4px 0 6px; }
  header.menu .theme { display: inline-block; order: 14; }

  /* The dashboard: what needs a person, then Steer and the numbers, then the rest. */
  body { display: flex; flex-direction: column; }
  body > header { order: 0; }
  body > .tour { order: 1; }
  main.home, main.home > .col { display: contents; }
  main.home .col > * { order: 5; margin: 12px 12px 0; }
  main.home #attention-panel { order: 2; }
  body > .controls { order: 3; }
  body > .health { order: 4; }
  main.home .col:last-child > * { order: 6; }
  body > .more { order: 7; margin-top: 16px; }
  body > #review { order: 8; }
  main.home > .empty, main > .empty { margin: 12px; }

  /* Steer: one button until opened. */
  .controls { margin: 12px 12px 0; }
  .controls:not(.open) { padding: 0; border: 0; background: none; }
  .controls:not(.open) > :not(.steer-toggle), .controls > b { display: none; }
  .controls .steer-toggle { display: block; flex: 1 1 100%; text-align: left; }
  .controls.open .steer-toggle { border-color: transparent; padding-left: 0; }
  .controls #dir-to, .controls #dir-body, .controls #protect-paths { flex: 1 1 100%; min-width: 0; }

  /* Numbers: a compact two-by-two. */
  .health { grid-template-columns: 1fr 1fr; padding: 12px 12px 0; gap: 8px; }
  .health .tile { padding: 8px 12px; min-width: 0; }
  .health .tile b { font-size: 20px; }
  .health .tile b, .health .tile .n { white-space: normal; }
  main.home, .more { padding-left: 12px; padding-right: 12px; }
  .more { padding-left: 12px; padding-right: 12px; }
  .more-body { grid-template-columns: minmax(0, 1fr); }
  .tour { margin: 12px 12px 0; }
  .tour .tour-text { flex-basis: 100%; }
  .tour .tour-import { flex-wrap: wrap; flex-basis: 100%; }
  .tour .tour-import input { flex: 1 1 10em; }
  .panel-head { flex-wrap: wrap; }
  .panel-head .help-dot { display: none; }

  /* Controls you can hit with a thumb. */
  button, a.button, select, input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: 44px; }
  button { padding: 8px 14px; }
  a.button { display: inline-flex; align-items: center; }
  button.mini, a.button, .seg button, button.state, .more-tabs button { min-height: 40px; padding: 6px 12px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; flex: none; }
  label.check { min-height: 40px; }
  .row { flex-wrap: wrap; }
  .row > input, .row > select, .row > textarea { flex: 1 1 10em; min-width: 0; }
  .row > label.check { flex: 1 1 100%; justify-content: space-between; }
  label.check input[type=number] { flex: none; width: 6em !important; }
  .seg { display: inline-flex; flex-wrap: wrap; }

  /* Dialogs fill the screen, with Close always at the top. */
  dialog#detail, dialog#jev { width: 100% !important; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: 0 16px 24px; }
  dialog#detail[open] { display: flex; flex-direction: column; }
  #detail-body { flex: none; min-width: 0; }
  dialog#detail > form { order: -1; position: sticky; top: 0; z-index: 3; margin: 0 -16px 8px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; justify-content: flex-end; }
  dialog#detail > form button { margin: 0; }
  dialog#detail > form button::before { content: "✕ "; }
  #jev .jev-form > .row:last-child { position: sticky; bottom: -24px; margin: 0 -16px -24px; padding: 8px 16px 12px; background: var(--panel); border-top: 1px solid var(--line); }
  #jev .jev-form > h3 { padding-top: 16px; }
  dialog.ask { width: calc(100% - 24px); max-width: none; }

  #detail-body .jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
  #detail-body .jump button { margin: 0; }
  #detail-body h2 { scroll-margin-top: 64px; }

  /* Tasks: cards, not a five-column table. */
  table.tasks thead { display: none; }
  table.tasks, table.tasks tbody { display: block; }
  table.tasks tr { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.tasks td { display: block; padding: 0; border: 0; }
  table.tasks td:nth-child(1) { flex: 1 1 100%; }
  table.tasks td:nth-child(4) { order: 5; flex: 1 1 100%; overflow-wrap: anywhere; }
  .tasks-tools .seg { flex: 1 1 100%; }

  /* Pages: nothing wider than the screen. */
  .rv-page { padding: 12px 12px 40px; }
  .rv-page, .rv-grid, .rv-grid > *, .rv-page .panel { min-width: 0; max-width: 100%; }
  .thr { margin: 6px 8px 8px; }
  .dc, .dc-new { margin: 4px 8px 6px; }
  .rv-page summary, .thr summary { white-space: normal; overflow-wrap: anywhere; }
}

/* Session traces on a change */
.rv-traces { margin: 8px 0; }
.file-intent { padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--head); font-size: var(--fs-12_5, 12.5px); }
.file-intent.none { color: var(--muted); border-left: 3px solid var(--warn); }
.fi-row { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 2px 0; }
.fi-row .k { font-weight: 600; }
.fi-jump { margin-left: auto; cursor: pointer; white-space: nowrap; }
.int-mark { font-size: 11px; font-weight: 700; width: 1em; text-align: center; }
.int-mark.ok { color: var(--good, #2e7d32); }
.int-mark.no { color: var(--warn, #b26a00); }
.int-a.flash { background: color-mix(in srgb, var(--warn, #f5c542) 25%, transparent); transition: background 0.3s; }
.intent [data-tocode] { cursor: pointer; }
.intent { border: 1px solid var(--line, #ddd); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.intent h3 { font-size: 14px; margin: 8px 0 4px; }
.int-list { margin: 0; padding-left: 22px; }
.int-list li { margin: 4px 0; }
.int-list .k { font-weight: 600; margin-right: 4px; }
.int-a .what { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; word-break: break-word; }
.int-a .int-why { font-style: italic; margin: 2px 0; color: var(--muted, inherit); }
.int-a.refused .k, .int-a.failed .k { color: var(--del, #c0392b); }
.traces { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.traces > li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); min-width: 0; }
.steps { margin: 6px 0 0; padding-left: 22px; max-height: 480px; overflow: auto; }
.step { margin: 4px 0; }
.step .k { font-weight: 600; margin-right: 6px; }
.step pre { margin: 2px 0 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; max-height: 8em; overflow: auto; background: var(--head); padding: 4px 6px; border-radius: 4px; }
.step.thought pre { font-style: italic; }
.step.error .k { color: var(--del, #c0392b); }
.step.loom .k code { font-weight: 700; }

/* Asking Loom, the incident view and the factory report */
.ask-box { margin: 8px 0; }
.ask-box .ask-out p { margin: 6px 0; }
.ask-box .cite { font-size: var(--fs-11_5); padding: 0 3px; border-radius: 3px; background: var(--line); text-decoration: none; }
table.report { width: 100%; border-collapse: collapse; font-size: var(--fs-12_5); display: block; overflow-x: auto; }
table.report th { text-align: right; font-weight: 500; color: var(--muted); font-size: var(--fs-11_5); padding: 0 6px 4px 0; }
table.report td { text-align: right; padding: 4px 6px 4px 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.report th:first-child, table.report td:first-child { text-align: left; }
pre.out { max-height: 220px; overflow: auto; font-size: var(--fs-11_5); white-space: pre-wrap; }
.evals { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }