/* Palette and layout carried over from prototypes/review-queue.html,
   without web fonts (the CSP allows no third-party origins). */
:root {
  color-scheme: light;
  --ground: #f3f5f8; --surface: #fff; --ink: #172130; --muted: #5a6677; --line: #d8dee6;
  --accent: #2a56c6; --accent-soft: #e6ecfb;
  --p0: #b01c1c; --p0-soft: #fbe3e3; --p1: #b93b12; --p1-soft: #fbe9e2;
  --p2: #9a6512; --p2-soft: #f8efdd; --p3: #667385; --p3-soft: #eceff3;
  --ok: #2c7a4f; --ok-soft: #e2f2e8;
  --add: #e6f4ea; --add-ink: #1d5b33; --del: #fbe9ea; --del-ink: #8a1f24; --hunk: #eef2fb;
  --add-word: #abf2bc; --del-word: #ffc1c0; --focus-row: #fff5b1;
  --sev-risky: #b01c1c; --sev-risky-soft: #fdecec; --sev-look: #9a6512; --sev-look-soft: #fbf3e2; --sev-note: #2a56c6; --sev-note-soft: #eaf0fc;
  --tk-keyword: #cf222e; --tk-string: #0a3069; --tk-comment: #6e7781; --tk-number: #0550ae; --tk-title: #8250df;
  --tk-type: #953800; --tk-attr: #0550ae; --tk-meta: #116329; --tk-var: #953800;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Dark by preference unless light was picked, or when dark was picked. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0e131a; --surface: #161d27; --ink: #e4e9f0; --muted: #95a1b3; --line: #29333f;
    --accent: #86a6ff; --accent-soft: #1c2842;
    --p0: #ff7070; --p0-soft: #3d1414; --p1: #ff8a63; --p1-soft: #3a1d14;
    --p2: #f0b85a; --p2-soft: #33270f; --p3: #9aa6b8; --p3-soft: #1f2631;
    --ok: #6fcf97; --ok-soft: #13291d;
    --add: #12291b; --add-ink: #8fdcab; --del: #32151a; --del-ink: #ff9ea4; --hunk: #19223a;
    --add-word: #1f5a33; --del-word: #6b2229; --focus-row: #3a3413;
    --sev-risky: #ff7b72; --sev-risky-soft: #3b1618; --sev-look: #e3b341; --sev-look-soft: #33280f; --sev-note: #86a6ff; --sev-note-soft: #1a2440;
    --tk-keyword: #ff7b72; --tk-string: #a5d6ff; --tk-comment: #8b949e; --tk-number: #79c0ff; --tk-title: #d2a8ff;
    --tk-type: #ffa657; --tk-attr: #79c0ff; --tk-meta: #7ee787; --tk-var: #ffa657;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e131a; --surface: #161d27; --ink: #e4e9f0; --muted: #95a1b3; --line: #29333f;
  --accent: #86a6ff; --accent-soft: #1c2842;
  --p0: #ff7070; --p0-soft: #3d1414; --p1: #ff8a63; --p1-soft: #3a1d14;
  --p2: #f0b85a; --p2-soft: #33270f; --p3: #9aa6b8; --p3-soft: #1f2631;
  --ok: #6fcf97; --ok-soft: #13291d;
  --add: #12291b; --add-ink: #8fdcab; --del: #32151a; --del-ink: #ff9ea4; --hunk: #19223a;
  --add-word: #1f5a33; --del-word: #6b2229; --focus-row: #3a3413;
  --sev-risky: #ff7b72; --sev-risky-soft: #3b1618; --sev-look: #e3b341; --sev-look-soft: #33280f; --sev-note: #86a6ff; --sev-note-soft: #1a2440;
  --tk-keyword: #ff7b72; --tk-string: #a5d6ff; --tk-comment: #8b949e; --tk-number: #79c0ff; --tk-title: #d2a8ff;
  --tk-type: #ffa657; --tk-attr: #79c0ff; --tk-meta: #7ee787; --tk-var: #ffa657;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 15px/1.5 var(--sans); padding: 0 16px 48px; }
.wrap { max-width: 900px; margin: 0 auto; }
a { color: var(--accent); }
header.top { position: sticky; top: 0; z-index: 5; background: var(--ground); padding: 12px 0 8px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
header.top h1 { font-size: 20px; margin: 0; }
header.top h1 a { color: inherit; text-decoration: none; }
.meta { font: 12px var(--mono); color: var(--muted); flex: 1; }
.notice, .warn { padding: 10px 12px; border: 1px solid var(--p1); background: var(--p1-soft); border-radius: 6px; }
.note { color: var(--muted); font-size: 14px; }
.empty { color: var(--muted); text-align: center; padding: 24px 0; }
.group-h { font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.card { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; color: inherit; text-decoration: none; }
.card:hover { border-color: var(--accent); }
.card.answered { opacity: .7; }
.card h3, .item h2 { margin: 0; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.why { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.hdr { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.pill { font: 11px var(--mono); font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.pill.p0 { color: var(--p0); background: var(--p0-soft); } .pill.p1 { color: var(--p1); background: var(--p1-soft); }
.pill.p2 { color: var(--p2); background: var(--p2-soft); } .pill.p3, .pill.pn { color: var(--p3); background: var(--p3-soft); }
.tag { font: 12px var(--mono); color: var(--muted); }
.state { margin-left: auto; font: 11px var(--mono); padding: 2px 7px; border-radius: 4px; color: var(--ok); background: var(--ok-soft); }
.state.done { color: var(--muted); background: var(--p3-soft); }
.item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 12px; }
.item section { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px; overflow-wrap: anywhere; }
.item h3 { font-size: 13px; font-family: var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.md pre, pre { overflow-x: auto; background: var(--ground); padding: 8px; border-radius: 6px; font: 13px var(--mono); }
.md code { font: .92em var(--mono); }
.md table { border-collapse: collapse; display: block; overflow-x: auto; }
.md td, .md th { border: 1px solid var(--line); padding: 2px 6px; }
form.answer, form.signin { display: grid; gap: 8px; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
legend { font: 12px var(--mono); color: var(--muted); margin-bottom: 4px; }
label.opt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
label.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
label.opt input { margin-top: 4px; }
.rec { font: 11px var(--mono); color: var(--ok); margin-left: 6px; white-space: nowrap; }
textarea, input[type=password] { width: 100%; font: 15px/1.45 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.target { font-size: 13px; color: var(--muted); margin: 0; }
.actions { display: flex; gap: 8px; }
button, .button { font: 14px var(--sans); font-weight: 500; border-radius: 6px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); }
button:disabled { opacity: .5; cursor: default; }
.status { font-size: 14px; margin: 0; overflow-wrap: anywhere; }
.comment { border-top: 1px solid var(--line); padding: 6px 0; }
.comment.your-answer { border-left: 3px solid var(--ok); padding-left: 8px; }
.comment .meta { font: 12px var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
label.check input { margin-top: 4px; }
details.help { font-size: 14px; color: var(--muted); }
details.help summary { cursor: pointer; color: var(--accent); }
.scopes code { font: .92em var(--mono); }

/* The ranked queue */
.summary { font: 12px var(--mono); color: var(--muted); margin: 12px 0 0; }
.filters { display: grid; gap: 6px; margin: 12px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chips-h { font: 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 64px; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; font-size: 13px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; }
.chip:hover { border-color: var(--accent); }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.chip.preset { font-size: 14px; padding: 4px 14px; }
.chip .count { font: 11px var(--mono); color: var(--muted); }
.chip.on .count { color: inherit; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; color: inherit; text-decoration: none; }
.row:hover { border-color: var(--accent); }
.row.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.row.answered, .row.done, .row.v-approved-older { opacity: .75; }
.row.child { margin-left: 28px; }
.sub-issues ul { list-style: none; padding: 0; margin: 8px 0; }
.sub-issue { margin: 4px 0; }
.sub-state { font: 11px var(--mono); padding: 1px 6px; border-radius: 4px; color: var(--accent); background: var(--accent-soft); }
.sub-issue.closed .sub-state { color: var(--muted); background: var(--p3-soft); }
.sub-issue.closed a { color: var(--muted); }
.row .main { display: grid; gap: 3px; min-width: 0; }
.row .title { font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.row .sub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.row .why { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .age { font: 12px var(--mono); color: var(--muted); }
.kind { font: 11px var(--mono); font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 3.2em; text-align: center; border: 1px solid var(--line); }
.kind.k-pr { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.kind.k-question { color: var(--p1); background: var(--p1-soft); border-color: transparent; }
.kind.k-review { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.kind.k-chore { color: var(--p2); background: var(--p2-soft); border-color: transparent; }
.kind.k-item { color: var(--muted); }
.state.bug { color: var(--p0); background: var(--p0-soft); }
.asks ul, .review-asks, .runs ul { list-style: none; padding: 0; margin: 8px 0; }
.asks li, .review-asks li { margin: 6px 0; }
.asks .state { margin-left: 8px; }
.runs .run { margin: 8px 0 14px; }
.runs .jobs { list-style: disc; padding-left: 20px; margin: 4px 0; }
.ask { margin: 0; }
.row .state { margin-left: 0; }
.state.pending { color: var(--muted); background: var(--p3-soft); }
.state.v-approved-older, .state.v-changes-requested-older { color: var(--p2); background: var(--p2-soft); }
.state.v-changes-requested { color: var(--p1); background: var(--p1-soft); }
.state a { color: inherit; }
button.small, header.top button { font-size: 12px; padding: 4px 9px; }

/* The PR review pane */
.ci { font: 11px var(--mono); padding: 2px 7px; border-radius: 4px; background: var(--p3-soft); color: var(--p3); }
.ci-success .dot, .ci.ci-success { color: var(--ok); background: var(--ok-soft); }
.ci.ci-failure { color: var(--p0); background: var(--p0-soft); }
.ci.ci-pending { color: var(--p2); background: var(--p2-soft); }
.checklist { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; font-size: 14px; }
.checklist .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--p3); }
.checklist .ci-success .dot { background: var(--ok); }
.checklist .ci-failure .dot { background: var(--p0); }
.checklist .ci-pending .dot { background: var(--p2); }
form.review { display: grid; gap: 8px; position: sticky; bottom: 0; z-index: 4; background: var(--ground); padding: 8px 0; border-top: 1px solid var(--line); }
form.review .actions { flex-wrap: wrap; }
details.commit { border-top: 1px solid var(--line); padding: 6px 0; }
details.commit summary { cursor: pointer; overflow-wrap: anywhere; }
details.commit .subject { font-weight: 600; }
pre.msg { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
@media (max-width: 600px) {
  body { padding: 0 10px 48px; }
  header.top .meta { flex-basis: 100%; order: 3; }
  .row { grid-template-columns: auto 1fr; }
  .row .age { grid-column: 2; }
  .row.child { margin-left: 14px; }
  table.diff td.ln { padding: 0 4px; }
  details.file > summary { position: static; }
  .guided-bar { position: static; }
  form.review { position: static; }
  form.review .target { display: none; }
}

/* News */
.nav { display: flex; gap: 10px; font-size: 14px; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a.on { color: var(--ink); font-weight: 600; }
.news-item { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; margin-bottom: 8px; overflow-wrap: anywhere; }
.news-item.harness { border-left: 4px solid var(--p1); }
.news-item h3 { margin: 4px 0; font-size: 15px; }
.news-item h3 a { color: inherit; }
.news-item .md p { margin: 4px 0; color: var(--muted); font-size: 14px; }
.news-item .sub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.news-item .age { margin-left: auto; font: 12px var(--mono); color: var(--muted); }
.kind.k-harness { color: var(--p1); background: var(--p1-soft); border-color: transparent; }

/* The diff viewer. The PR pane is wider than the rest, for split diffs. */
.wrap:has(main.pr) { max-width: 1500px; }
.files { padding-bottom: 8px !important; }
.files-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.plus { color: var(--ok); } .minus { color: var(--p0); }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 8px; font-size: 13px; }
.toolbar .group { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.toolbar select { font: 13px var(--sans); max-width: 26em; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.toolbar .seg button.on, button.small.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.files-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 12px; align-items: start; }
nav.tree { position: sticky; top: var(--header-h, 52px); max-height: calc(100vh - var(--header-h, 52px) - 16px); overflow: auto; font: 12px var(--mono); padding: 6px 0; }
nav.tree ul { list-style: none; margin: 0; padding-left: 10px; }
nav.tree > ul { padding-left: 0; }
nav.tree .dname { color: var(--muted); display: block; padding: 2px 4px; overflow-wrap: anywhere; }
button.tfile { display: flex; gap: 6px; align-items: center; width: 100%; text-align: left; font: 12px var(--mono); padding: 2px 4px; border: 0; border-radius: 4px; background: none; }
button.tfile:hover, button.tfile.sel { background: var(--accent-soft); }
button.tfile .tname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.tfile.viewed .tname { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
button.tfile.s-added .tname { color: var(--ok); } button.tfile.s-removed .tname { color: var(--p0); }
.tcounts { font-size: 11px; white-space: nowrap; }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
details.file { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 10px; background: var(--surface); }
details.file.sel { border-color: var(--accent); }
details.file > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 6px 10px; font: 13px var(--mono); position: sticky; top: var(--header-h, 52px); background: var(--surface); border-radius: 6px; z-index: 2; }
details.file[open] > summary { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.fname { overflow-wrap: anywhere; flex: 1; min-width: 12em; }
.fstatus { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.counts { white-space: nowrap; }
.badge { font: 11px var(--mono); padding: 1px 6px; border-radius: 4px; color: var(--muted); background: var(--p3-soft); }
.badge.skim { color: var(--ok); background: var(--ok-soft); }
.hs-badge { font: 11px var(--mono); padding: 1px 6px; border-radius: 4px; }
label.viewed-l { font: 12px var(--sans); color: var(--muted); display: inline-flex; gap: 4px; align-items: center; cursor: pointer; white-space: nowrap; }
.diffwrap { overflow-x: auto; }
table.diff { border-collapse: collapse; width: 100%; font: 12px/1.5 var(--mono); tab-size: 4; }
table.diff td { padding: 0 8px; vertical-align: top; }
table.diff td.ln { color: var(--muted); text-align: right; user-select: none; width: 1%; white-space: nowrap; min-width: 3.5em; }
table.diff td.ln.can-comment { cursor: pointer; }
table.diff td.ln.can-comment:hover { color: var(--surface); background: var(--accent); }
table.diff td.code { white-space: pre; }
table.diff.split td.code { width: 50%; white-space: pre-wrap; overflow-wrap: anywhere; }
table.diff .sign { user-select: none; color: var(--muted); padding-right: 4px; }
table.diff tr.add, table.diff td.add { background: var(--add); }
table.diff tr.del, table.diff td.del { background: var(--del); }
table.diff td.empty { background: var(--ground); }
table.diff tr.add .wd, table.diff td.add .wd { background: var(--add-word); border-radius: 2px; }
table.diff tr.del .wd, table.diff td.del .wd { background: var(--del-word); border-radius: 2px; }
table.diff tr.expanded td { opacity: .92; }
table.diff tr.focus td.ln, table.diff tr.focus td.code { box-shadow: inset 0 0 0 9999px var(--focus-row); }
table.diff tr.gap td { background: var(--hunk); color: var(--muted); padding: 2px 8px; }
table.diff tr.gap .gap-buttons { display: inline-flex; gap: 4px; margin-right: 10px; }
table.diff tr.gap button.expand { font: 11px var(--sans); padding: 1px 7px; }
table.diff tr.gap .section { white-space: pre; }
.nonl, .bidi { color: var(--p0); }
details.orphans summary { cursor: pointer; font-size: 13px; color: var(--p1); }
/* Review-guide hotspots: a severity bar at the line numbers, and a callout under the lines. */
.sev-risky { --sev: var(--sev-risky); --sev-soft: var(--sev-risky-soft); }
.sev-look-closely { --sev: var(--sev-look); --sev-soft: var(--sev-look-soft); }
.sev-note { --sev: var(--sev-note); --sev-soft: var(--sev-note-soft); }
.chip, .hs-badge { color: var(--sev); background: var(--sev-soft); font: 11px var(--mono); font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.hs-dot { background: var(--sev); }
table.diff tr.hs td.ln:first-child { box-shadow: inset 3px 0 0 var(--sev); }
table.diff tr.hs.ctx td.code, table.diff tr.hs td.code.ctx { background: var(--sev-soft); }
table.diff tr.callout td { padding: 4px 8px 8px; background: var(--surface); }
tr.callout .box, tr.composer .box, tr.draft .box { font: 13px/1.45 var(--sans); white-space: normal; border: 1px solid var(--line); border-left: 4px solid var(--sev, var(--accent)); border-radius: 6px; padding: 6px 10px; background: var(--surface); max-width: 80ch; }
tr.callout.on .box { box-shadow: 0 0 0 2px var(--sev); }
tr.callout .reason { margin: 4px 0 0; overflow-wrap: anywhere; }
tr.composer td, tr.draft td { padding: 4px 8px 8px; }
tr.composer textarea { font: 13px/1.45 var(--sans); margin: 4px 0; }
tr.composer .actions, tr.draft .actions { gap: 6px; align-items: center; }
tr.draft pre.msg { background: none; padding: 0; font: 13px/1.45 var(--sans); }
.guided-bar { position: sticky; top: var(--header-h, 52px); z-index: 3; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 6px; padding: 6px 10px; margin-bottom: 8px; font-size: 14px; }
.guided-bar[hidden] { display: none; }
.files.guided details.file > summary, .files.guided nav.tree { top: calc(var(--header-h, 52px) + 42px); }
table.diff tr { scroll-margin-top: calc(var(--header-h, 52px) + 110px); }
.guided-bar .group { margin-left: auto; display: inline-flex; gap: 4px; }
section.guide .guide-h { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
section.guide .guide-h h3 { margin-right: auto; }
section.guide .state { margin-left: 0; }
.summary-text { white-space: pre-wrap; overflow-wrap: anywhere; }
ol.hotspots { padding-left: 1.6em; margin: 6px 0; display: grid; gap: 4px; }
button.hotspot { display: block; width: 100%; text-align: left; font: 14px/1.4 var(--sans); padding: 6px 8px; border: 1px solid var(--line); background: var(--surface); }
button.hotspot:hover, button.hotspot.on { border-color: var(--accent); }
button.hotspot.seen { opacity: .75; }
button.hotspot code { font: 12px var(--mono); overflow-wrap: anywhere; }
button.hotspot .reason { display: block; margin-top: 2px; color: var(--ink); }
details.skim summary { cursor: pointer; color: var(--accent); font-size: 14px; margin: 6px 0; }
ul.skim { font-size: 13px; padding-left: 1.4em; }
ul.skim code { font: 12px var(--mono); overflow-wrap: anywhere; }
.drafts ul.draft-list { margin: 0 0 4px; padding-left: 1.2em; font-size: 13px; }
button.linkish { border: 0; background: none; padding: 0; color: var(--accent); font: 12px var(--mono); cursor: pointer; }
/* Syntax colors (highlight.js classes). */
.hljs-keyword, .hljs-selector-tag, .hljs-built_in.hljs-keyword, .hljs-doctag, .hljs-template-tag, .hljs-template-variable, .hljs-type.hljs-keyword { color: var(--tk-keyword); }
.hljs-string, .hljs-regexp, .hljs-meta .hljs-string, .hljs-char.escape_ { color: var(--tk-string); }
.hljs-comment, .hljs-quote, .hljs-code { color: var(--tk-comment); font-style: italic; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-operator { color: var(--tk-number); }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-name { color: var(--tk-title); }
.hljs-type, .hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title { color: var(--tk-type); }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-params, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: var(--tk-attr); }
.hljs-meta, .hljs-meta .hljs-keyword, .hljs-link, .hljs-addition { color: var(--tk-meta); }
.hljs-variable, .hljs-subst, .hljs-variable.language_, .hljs-deletion { color: var(--tk-var); }
.hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: 600; }
@media (max-width: 900px) {
  .files-layout { grid-template-columns: minmax(0, 1fr); }
  nav.tree { position: static; max-height: 30vh; border: 1px solid var(--line); border-radius: 6px; }
  table.diff.split td.code { white-space: pre; }
}
@media (max-width: 600px) {
  details.file > summary, .guided-bar, nav.tree { position: static; }
}

/* Ops: what the bot is running now */
.ops { display: grid; gap: 12px; padding-top: 12px; }
.ops .summary { margin: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: grid; gap: 2px; align-content: start; }
.tile .big { font: 600 26px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.tile .label { font: 12px var(--mono); color: var(--muted); }
.tile .sub { font-size: 13px; color: var(--muted); }
.tile .bad { color: var(--p0); font-weight: 600; }
.spark { display: block; margin-top: 6px; max-width: 100%; }
.spark rect.on { fill: var(--accent); }
.spark rect.off { fill: var(--line); }
.ops-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px 14px 10px; overflow-wrap: anywhere; }
.ops-sec h2 { font: 13px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 8px; }
.ops-sec .group-h { margin: 12px 0 4px; }
.ops-sec .note { margin: 6px 0; }
.ops-sec .fine { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.st { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--mono); white-space: nowrap; --dot: var(--muted); }
.st .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); flex: none; }
.st.s-ready { --dot: var(--ok); color: var(--ok); }
.st.s-ready .dot { box-shadow: 0 0 0 3px var(--ok-soft); animation: ops-pulse 2s ease-in-out infinite; }
.st.s-starting, .st.s-queued { --dot: var(--p2); color: var(--p2); }
.st.s-ending { --dot: var(--p3); color: var(--muted); }
.st.o-stopped { --dot: var(--p3); color: var(--muted); }
.st.o-expired { --dot: var(--accent); color: var(--accent); }
.st.o-failed { --dot: var(--p0); color: var(--p0); font-weight: 600; }
.st.o-other { --dot: var(--p2); color: var(--p2); }
.st.s-unknown .dot { background: transparent; border: 1.5px dashed var(--muted); }
@keyframes ops-pulse { 50% { box-shadow: 0 0 0 5px transparent; } }
@media (prefers-reduced-motion: reduce) { .st.s-ready .dot { animation: none; } }
.ds-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 3em 11em 10em auto; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ds-row:first-of-type { border-top: 0; }
.ds-row .who { display: grid; min-width: 0; }
.ds-row .who strong { overflow-wrap: anywhere; }
.ds-row .host { font: 12px var(--mono); color: var(--muted); }
.ds-row .cores, .past .cores { font: 12px var(--mono); color: var(--muted); }
.ds-row .up, .ds-row .left { font: 12px var(--mono); font-variant-numeric: tabular-nums; }
.ds-row .left { display: grid; gap: 3px; }
.ds-row .bar { width: 100%; height: 4px; display: block; }
.ds-row .bar .track { fill: var(--line); }
.ds-row .bar .tick-bar { fill: var(--ok); }
.ds-row.p-ending .bar .tick-bar, .ds-row.p-starting .bar .tick-bar { fill: var(--p2); }
details.history { margin-top: 6px; font-size: 14px; }
details.history summary { cursor: pointer; color: var(--accent); }
.past-list, .work-list, .ev-list { list-style: none; margin: 4px 0 0; padding: 0; }
.past { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 3em 5em 4em auto; gap: 2px 10px; align-items: center; padding: 4px 0; font-size: 14px; }
.past .ran, .past .age { font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.past-list .past .name { overflow-wrap: anywhere; }
.ops-sec .coord { font-size: 14px; margin: 4px 0 8px; color: var(--muted); }
.ops-sec .coord .loop { color: var(--ink); font-weight: 500; }
.lw { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto 5em; gap: 2px 10px; align-items: center; padding: 4px 0; font-size: 14px; }
.lw .name { overflow-wrap: anywhere; }
.lw .ds { font: 12px var(--mono); color: var(--muted); }
.lw .up { font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.past-list.stale { opacity: 0.6; }
.work { padding: 6px 0; border-top: 1px solid var(--line); display: grid; gap: 3px; }
.work:first-child { border-top: 0; }
.work .title { font-weight: 500; }
.work .age { margin-left: auto; font: 12px var(--mono); color: var(--muted); }
.work .links { font: 12px var(--mono); }
.work .why { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev { display: grid; grid-template-columns: 3em 5.5em minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 3px 0; font-size: 14px; }
.ev .age { font: 12px var(--mono); color: var(--muted); text-align: right; }
.ev .kind { min-width: 0; }
.ev .what { overflow-wrap: anywhere; }
.ev .times { font: 12px var(--mono); color: var(--muted); }
.ev .etitle { color: var(--muted); }
.kind.ev-push, .kind.ev-branch { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.kind.ev-pr, .kind.ev-review { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.kind.ev-comment { color: var(--p2); background: var(--p2-soft); border-color: transparent; }
.kind.ev-issue { color: var(--muted); }
@media (max-width: 640px) {
  .ds-row { grid-template-columns: 5.5em minmax(0, 1fr) auto; }
  .ds-row .cores { grid-column: 3; grid-row: 1; }
  .ds-row .up, .ds-row .left { grid-column: 2 / 4; }
  .ds-row > a { grid-column: 2 / 4; }
  .past { grid-template-columns: 7.5em minmax(0, 1fr) auto; }
  .past .ran, .past .age { grid-column: 2; }
  .lw { grid-template-columns: 7.5em minmax(0, 1fr) auto; }
  .lw .ds { grid-column: 2; }
}
/* Data shown from the browser's cache until GitHub confirms it. */
.meta .cached { color: var(--ink); background: var(--p1-soft); border: 1px solid var(--p1); border-radius: 4px; padding: 0 5px; }

/* Make it mine: his text for a forge PR, then a confirmation of every change. */
details.mine { margin: 16px 0; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--surface); }
details.mine > summary { cursor: pointer; font-weight: 600; }
.mine-edit, .mine-confirm { display: grid; gap: 10px; margin-top: 10px; }
label.mine-field { display: grid; gap: 4px; font-size: 14px; }
.mine-title, .mine-who input { width: 100%; font: 15px/1.45 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
textarea.mine-msg { font: 13px/1.45 var(--mono); }
.mine-who { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.mine-who label { flex: 1 1 14em; display: grid; gap: 4px; }
.mine-change h4 { margin: 8px 0 4px; font-size: 14px; }
pre.mine-diff { margin: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font: 13px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
pre.mine-diff span { display: block; min-height: 1.45em; }
pre.mine-diff .d-add { background: var(--add); color: var(--add-ink); }
pre.mine-diff .d-del { background: var(--del); color: var(--del-ink); }
pre.mine-diff .d-same { color: var(--muted); }