/* 2026-08-28 | queue-control | items 6/7/8 alignment + queue row actions (pause / cancel / resume / discard, inline pickers) */
/* 2026-08-16 | v5 | InSpace/NOVA design-system restyle: Geist type, DS semantic tokens,
                     positive "checked clean" confirmations. Deliberately light-theme
                     (the client deck is the dark artifact); dark topbar echoes the deck. */
/* 2026-08-15 | v4 | Collapsible cards + drill-down URL panels */
@import url('/fonts/fonts.css');

:root {
  /* NOVA DS light tokens (from @inspace/design-system@0.1.0 _ds_bundle.css) */
  --bg: #f6f8f9;            /* neutral-subtle-hover */
  --card: #ffffff;
  --ink: #0f1720;           /* neutral ink */
  --muted: #486070;         /* neutral-muted */
  --faint: #7d97a4;         /* neutral captions */
  --line: #e9eef2;          /* border-neutral-subtle */
  --line-mid: #bac8d0;      /* border-neutral-muted */
  --tile: #f6f8f9;
  --accent: #9e21fc;        /* intelligence — the NOVA brand intent */
  --accent-soft: #faf4ff;
  --accent-border: #e9d1ff;
  --action: #243542;        /* background-neutral: primary actions */
  --action-hover: #0f1720;
  /* 2026-08-19 | Status palette, re-stepped so the four states are distinguishable to a
     colourblind reader. Every value below is a documented NOVA token — same families where
     possible, a different STEP — never an eyeballed hex.
     What was wrong (dataviz validate_palette.js, all-pairs, light surface):
        ok #37941c <-> warn #e17100   ΔE 2.0 protan   — the same colour to a protanope
        bad #e7000b <-> warn #e17100  ΔE 14.0 normal  — hard work for everyone
     The green was the problem, and no STEP of it fixes that: space-green is a yellow-leaning
     green, so every step of it collapses onto amber under protan/deutan. It had to move family,
     to green-800, which keeps a blue component that colour-vision deficiency preserves.
     warn and info are untouched — the two most visible brand colours did not have to move.
     Worst all-pairs now ΔE 8.2 protan / 18.2 normal: ALL CHECKS PASS. */
  --ok: #016630;  --ok-bg: #f0fdf4;  --ok-border: #b9f8cf;   /* green-800 (was space-green-600) */
  --warn: #e17100; --warn-bg: #fffbeb; --warn-border: #fee685; /* amber-600, unchanged */
  --bad: #c10007;  --bad-bg: #fef2f2;  --bad-border: #ffc9c9;  /* red-700 (was red-600) */
  --info: #0084d1; --info-bg: #f0f9ff; --info-border: #b8e6fe; /* sky-600, unchanged */
  /* A colour bright enough to separate from green under protanopia is too light to be AA text.
     That is not a defect in the choice, it is the constraint: marks need 3:1 against the surface,
     text needs 4.5:1, and one hex cannot always do both. So warn and info get a darker step for
     TEXT. ok and bad clear 4.5:1 as they are and need no second token. */
  --track: #e3eaee;      /* unfilled meter / empty state — a step off the surface, never a status */
  --warn-ink: #bb4d00;   /* amber-700 — 5.03 on white, 4.85 on --warn-bg */
  --info-ink: #0069a8;   /* sky-700   — 5.86 on white, 5.49 on --info-bg */
  --attention: #e60076; --attention-bg: #fdf2f8;               /* attention */
  --flag: #e17100;
  --sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
}
/* Back-compat aliases used by older rules */
:root { --ok-bgc: var(--ok-bg); --warn-bgc: var(--warn-bg); --bad-bgc: var(--bad-bg); }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* 2026-08-20 | Greg: "we can have a more (in)spacious and calmer feel if you use the width of
   the screen." So the shell follows the viewport instead of stopping at 1020px, with generous
   gutters that grow with it — but a ceiling, because a 40-inch monitor stretching a line of body
   text to 2000px is not calm, it is unreadable. Anything that is prose keeps its own measure.
   One token, so the shell, the topbar, the tabs and the run header can never drift apart. */
:root { --shell: min(1680px, 100% - 6vw); --gutter: 16px; }
@media (min-width: 1100px) { :root { --gutter: 0px; } }

main { width: var(--shell); max-width: 100%; margin: 0 auto;
  padding: 0 var(--gutter) 64px; }

/* topbar — dark neutral strip, echoing the Tech Scan deck */
.topbar { background: var(--action-hover); color: #fff; padding: 22px 0 16px; }
.topbar h1, .topbar .sub { width: var(--shell); max-width: 100%; margin: 0 auto;
  padding: 0 var(--gutter); }
h1 { font-size: 21px; font-weight: 650; letter-spacing: -.01em; }
h1 .tier { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 999px; padding: 4px 10px;
  vertical-align: 3px; margin-left: 8px; }
.sub { color: #9aadb8; margin-top: 4px !important; font-size: 13.5px; }
.hidden { display: none; }
.muted { color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px; margin-top: 16px; }
.card h2 { margin: 0 0 12px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.card h3 { margin: 18px 0 8px; font: 600 11px/1.4 var(--mono); color: var(--faint);
  text-transform: uppercase; letter-spacing: .1em; }

/* form */
.crawl-form label { font-weight: 600; font-size: 13px; }
.crawl-form .row { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.crawl-form input, #queue-form input, #queue-form textarea, .meta-grid input, .meta-grid select,
.intake-form input:not([type=checkbox]):not([type=file]), .intake-form textarea, .login-card input {
  padding: 10px 12px; border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; }
/* 2026-08-20 | ...which also hit the Tier-2 checkbox, stretching a 13px box to 240px and
   shoving its label to the far side of the card. That is the "checkbox and label are justified"
   Greg saw; halving the card only made it more obvious. Text inputs grow, controls do not. */
.crawl-form input:not([type=checkbox]):not([type=radio]) { flex: 1 1 240px; }
.crawl-form input[type=checkbox] { flex: 0 0 auto; }
.crawl-form input:focus, #queue-form textarea:focus { outline: 2px solid var(--accent-border); border-color: var(--accent); }
button, .dl-btn { font-family: var(--sans); }
.crawl-form button, #queue-form button[type=submit], .login-card button, .primary-btn {
  padding: 10px 18px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--action); color: #fff; font-weight: 600; font-size: 14.5px; }
.crawl-form button:hover, #queue-form button[type=submit]:hover, .primary-btn:hover { background: var(--action-hover); }
.crawl-form button:disabled, .primary-btn:disabled { opacity: .55; cursor: default; }
.hint { color: var(--faint); font-size: 12.5px; margin: 8px 0 0; }
.msg { color: var(--muted); min-height: 1.2em; margin: 10px 0 0; font-size: 14px; }

/* workflow tabs — DS segment-control */
.tab-bar { display: flex; gap: 4px; margin: 18px auto 0; padding: 4px;
  background: #e9eef2; border-radius: 999px; width: fit-content; margin-left: auto; margin-right: auto; }
.tab-btn { font: 600 13.5px/1 var(--sans); padding: 9px 20px; border: 0; background: none;
  border-radius: 999px; cursor: pointer; color: var(--muted); }
.tab-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,32,.12); }
.tab-btn:disabled { opacity: .4; cursor: not-allowed; }
.tab-panel { display: block; }
.tab-panel.hidden { display: none; }

/* result groups (Tab 3) */
.result-group { margin: 30px 0 8px; }
.group-title { font-size: 19px; font-weight: 650; margin: 0 0 4px; padding-bottom: 8px;
  border-bottom: 2px solid var(--accent); letter-spacing: -.015em; }

/* progress + tiles */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.run-line { display: inline-flex; align-items: baseline; gap: 10px; }
.timer { font: 700 17px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--accent); }
.run-meta { color: var(--muted); font-size: 13px; }
.counts, .tiles { display: grid; gap: 10px; margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); }
.tile { background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px; text-align: center; }
.tile-v { font: 650 21px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.tile-l { font: 500 10.5px/1.35 var(--mono); text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); margin-top: 4px; }
.tile.flag { background: var(--warn-bg); border-color: var(--warn-border); }
.tile.flag .tile-v { color: var(--warn-ink); }
.rate-line { margin: 0 0 12px; font-size: 13px; }

/* positive confirmations — zeros stated as wins (growth intent) */
.clean-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  background: var(--ok-bg); border: 1px solid var(--ok-border); border-radius: var(--r-md);
  padding: 10px 14px; margin-top: 10px; }
.clean-head { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ok); margin-right: 4px; }
.clean-chip { font-size: 12.5px; color: var(--ok); background: #fff;
  border: 1px solid var(--ok-border); border-radius: 999px; padding: 3px 10px; }

/* buttons / export */
.overview-bar { margin-top: 14px; }
.dl-btn { display: inline-block; padding: 9px 16px; border-radius: var(--r-sm); border: 0;
  background: var(--action); color: #fff; font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; }
.dl-btn:hover { background: var(--action-hover); }
.dl-btn:disabled { opacity: .5; cursor: not-allowed; }
.dl-btn-sm { padding: 6px 12px; font-size: 13px; }
.file-view { max-height: 340px; overflow: auto; background: var(--tile); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; font: 12px/1.5 var(--mono);
  white-space: pre-wrap; word-break: break-word; margin: 0; }

/* collapsible cards */
.card > h2, .card > .section-head { cursor: pointer; user-select: none; }
.card > h2::after { content: '▾'; float: right; color: var(--faint); font-weight: 400; }
.card > .section-head::after { content: '▾'; color: var(--faint); }
.card.collapsed > h2::after, .card.collapsed > .section-head::after { content: '▸'; }
/* !important on purpose. This is a STATE override and has to beat any layout rule on a child,
   including ID-based ones: `#run-list-body { display: flex }` is specificity (1,0,0) and this
   selector is only (0,3,1), so "Recent crawls" flipped its arrow while its content stayed
   visible. No number of extra classes can outrank an ID, so raising specificity is not an
   option — and a future `#some-card-body { display: … }` would silently reintroduce it. */
.card.collapsed > *:not(h2):not(.section-head) { display: none !important; }

/* clickable drill rows / tiles + the URL panel */
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--tile); }
tr.clickable.open td { background: var(--tile); font-weight: 600; }
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { outline: 2px solid var(--accent-border); border-color: var(--accent); }
.drill-row td { background: var(--bg) !important; padding: 0; }
.drill { padding: 10px 12px; }
.drill-head { font: 600 10.5px/1.5 var(--mono); color: var(--faint); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .08em; }
.drill-urls { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.drill-urls a { color: var(--info-ink); text-decoration: none; word-break: break-all; font-size: 13px; }
.drill-urls a:hover { text-decoration: underline; }
.drill-slot:not(:empty) { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg); }

/* recent-crawls list */
#run-list-body { display: flex; flex-direction: column; gap: 6px; }
.run-row { display: grid; grid-template-columns: 56px 1fr auto auto auto; align-items: center; gap: 10px; cursor: pointer;
  width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: #fff; color: var(--ink); cursor: pointer; font-size: 14px; }
.run-row:hover { border-color: var(--line-mid); }
.run-row.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.run-id { font: 600 13px/1 var(--mono); color: var(--faint); }
.run-host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-state { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.run-grade { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.grade-reliable { background: var(--ok-bg); color: var(--ok); }
.grade-degraded { background: var(--warn-bg); color: var(--warn-ink); }
.grade-unreliable { background: var(--bad-bg); color: var(--bad); }
.grade-none { background: var(--tile); color: var(--muted); }

/* tier-2 render */
.tier2 { margin: 14px 0; padding: 12px; border: 1px dashed var(--line-mid); border-radius: var(--r-md); }
.render-verdict { padding: 12px 16px; margin: 10px 0; }
.render-verdict .health-grade { font-size: 18px; }

/* render-sample toggle controls */
.sample-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.ctl-label { color: var(--faint); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.toggle-btn { padding: 6px 14px; border: 1px solid var(--line-mid); border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 13.5px; cursor: pointer; }
.toggle-btn.active { background: var(--action); color: #fff; border-color: var(--action); font-weight: 600; }
.pct-input { width: 64px; padding: 6px 8px; border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font: 14px var(--mono); }

/* health banner */
.health { border-radius: var(--r-lg); padding: 20px; margin-top: 16px; border: 1px solid; }
.health-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.health-grade { font: 800 24px/1 var(--sans); letter-spacing: .02em; }
.health-host { color: var(--muted); font: 500 12px/1 var(--mono); }
.health-warn, .health-ok { margin: 12px 0 0; font-weight: 600; }
.health-detail { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.health-reliable   { background: var(--ok-bg);  border-color: var(--ok-border); }
.health-reliable   .health-grade { color: var(--ok); }
.health-degraded   { background: var(--warn-bg); border-color: var(--warn-border); }
.health-degraded   .health-grade, .health-degraded .health-warn { color: var(--warn-ink); }
.health-unreliable, .health-unknown { background: var(--bad-bg); border-color: var(--bad-border); }
.health-unreliable .health-grade, .health-unreliable .health-warn,
.health-unknown .health-grade, .health-unknown .health-warn { color: var(--bad); }

/* tables */
.table-wrap { overflow-x: auto; margin-top: 4px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--faint); font: 600 10.5px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
td { font-variant-numeric: tabular-nums; }
td:first-child { white-space: normal; word-break: break-word; }
tbody tr:last-child td { border-bottom: 0; }

/* verdict badges — DS intents: danger / intelligence / warning / information */
.badge { font: 700 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 5px; white-space: nowrap; }
.badge-must_have { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-border); }
.badge-performance_booster { color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); }
.badge-it_depends { color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.badge-nice_to_have { color: var(--info-ink); background: var(--info-bg); border: 1px solid var(--info-border); }

/* findings register */
.finding-row { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px;
  overflow: hidden; background: #fff; }
.finding-head { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 10px 12px; background: none; border: 0; cursor: pointer; font: inherit; }
.finding-head:hover { background: var(--tile); }
.finding-score { font: 700 15px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 36px; }
.finding-title { font-weight: 600; flex: 1 1 auto; font-size: 14.5px; }
.finding-meta { color: var(--faint); font: 500 11px/1.4 var(--mono); white-space: nowrap; }
.finding-detail { padding: 4px 14px 12px 58px; font-size: 14px; }
.top-findings .finding-row { border-color: var(--line-mid); border-left: 3px solid var(--accent); }

/* theme states strip */
.theme-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.theme-chip { font: 500 11px/1.6 var(--mono); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.theme-chip.state-issues_found { color: var(--bad); border-color: var(--bad-border); background: var(--bad-bg); }
.theme-chip.state-checked_clean { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); }
.theme-chip.state-not_applicable { color: var(--faint); }
.theme-chip.state-could_not_check { color: var(--warn-ink); border-color: var(--warn-border); background: var(--warn-bg); }

/* transparency + metadata */
.excluded, .meta-form { margin-top: 14px; }
.excluded summary, .meta-form summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px; margin-top: 10px; align-items: center; }

/* queue */
#queue-form textarea { width: 100%; resize: vertical; margin-bottom: 8px; }
.queue-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px;
  border-bottom: 1px solid var(--line); }
.queue-item:last-child .queue-row { border-bottom: 0; }
.queue-rm { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--bad); font-size: 14px; }
.queue-requestor input { flex: 1; margin-bottom: 8px; }
.precheck { font-size: 12px; padding: 2px 9px; border-radius: 999px; }
.precheck.ok { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border); }
.precheck.bad { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-border); }
.queue-intake { border: 1px solid var(--line-mid); background: #fff; border-radius: var(--r-sm);
  padding: 4px 11px; cursor: pointer; font-size: 12.5px; }
.queue-intake:hover { border-color: var(--accent); color: var(--accent); }
.intake-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 6px 14px 28px; }
.intake-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.intake-file { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.requestor { font-size: 12px; }

/* login overlay */
.login-overlay { position: fixed; inset: 0; background: rgba(15,23,32,.62); display: flex;
  align-items: center; justify-content: center; z-index: 50; }
.login-overlay.hidden { display: none; }
.login-card { width: min(340px, 90vw); display: flex; flex-direction: column; gap: 10px; padding: 24px; }

/* site-check history */
.history-line { font-variant-numeric: tabular-nums; }
.history-changes { background: var(--warn-bg); border: 1px solid var(--warn-border);
  border-radius: var(--r-md); padding: 9px 14px; margin: 6px 0 10px; font-size: 13.5px; }
.history-changes ul { margin: 4px 0 2px; padding-left: 18px; }

/* render toggle */
.render-toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px;
  color: var(--muted); margin: 8px 0 4px; cursor: pointer; }
.render-toggle input { accent-color: var(--accent); }

/* intake attachment list + preview */
.attach-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.attach-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-sm); }
.attach-name { font: 500 13px var(--mono); }

/* Step 5: the deck missing-data gate. */
dialog.gate {
  max-width: 34rem; border: 1px solid var(--line, #d9dde3); border-radius: 8px;
  padding: 1.4rem 1.5rem; background: var(--card, #fff); color: inherit;
}
dialog.gate::backdrop { background: rgba(16, 20, 26, .45); }
dialog.gate h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.gate-limits { margin: .8rem 0 0; padding-left: 1.1rem; font-size: .92rem; line-height: 1.5; }
.gate-limits li { margin-bottom: .35rem; }
.gate-limits li.given-up { color: #8a5a0b; }
.gate-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }
.gate-actions .ghost { background: transparent; border: 1px solid var(--line, #d9dde3); }

/* Item 3: the activity strip — what the pipeline is doing, without scrolling. */
.activity { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
.activity .act {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .6rem; border-radius: 999px; font-size: .82rem;
  background: var(--chip, #eef1f5); border: 1px solid var(--line, #d9dde3);
}
.activity .act .dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: #1f6f4a; flex: none;
}
.activity .act.queued .dot { background: #8a5a0b; }
.activity .act.running .dot { animation: act-pulse 1.4s ease-in-out infinite; }
.activity .act .el { opacity: .65; font-variant-numeric: tabular-nums; }
@keyframes act-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .activity .act.running .dot { animation: none; } }

/* Under the hood: the live rate-controller view (backlog item 10). */
.mon-host { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; }
.mon-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.mon-host-name { font: 600 13px/1 var(--mono); }
.mon-why { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }
.mon-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px;
  font: 500 11.5px/1.5 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.mon-nums b { color: var(--fg); font-weight: 600; }
.mon-ev { margin-top: 8px; font: 11px/1.6 var(--mono); color: var(--muted);
  max-height: 9.5em; overflow-y: auto; }
.mon-ev .ev-backoff, .mon-ev .ev-throttle_step { color: var(--warn, #8a5a0b); }
.mon-ev .ev-ramp, .mon-ev .ev-throttle_recover { color: var(--ok, #1f6f4a); }
.mon-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 8px; }
.mon-bar i { display: block; height: 100%; background: var(--accent); }

/* 2026-08-18 | Preflight remedy panel — why a crawl could not start, and the fix.
   Opened from the queue row's precheck badge. Deliberately quotable: the steps are meant to be
   copied into an email to whoever administers the client's CDN. */
.precheck-remedy {
  margin: 6px 0 12px 0; padding: 12px 14px;
  border: 1px solid var(--bad-border); border-left-width: 3px; border-radius: 8px;
  background: var(--bad-bg); font-size: 13px; line-height: 1.55;
}
.precheck-remedy .remedy-head { margin: 0 0 4px; font-weight: 600; color: var(--bad); }
.precheck-remedy .remedy-note { margin: 6px 0; font-style: italic; }
.precheck-remedy ol { margin: 8px 0 4px; padding-left: 20px; }
.precheck-remedy li { margin: 4px 0; }
.precheck-remedy code { font-size: 12px; }

/* 2026-08-18 | Intelligence layer — collapsed URL patterns.
   The disclosure line and its expander. Styled as ordinary prose rather than as a warning: a
   collapse is a ranking decision, not a problem, and dressing it up as an alert would train the
   reader to ignore the alerts that matter. */
.disclosure { margin-top: 10px; }
.link-button {
  background: none; border: none; padding: 0; margin: 2px 0 8px;
  color: var(--accent, #3d4fd6); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline;
}
.link-button:hover { opacity: .8; }
.link-button:focus-visible { outline: 2px solid var(--accent, #3d4fd6); outline-offset: 2px; }
.collapsed-patterns { margin-top: 8px; }
.tiny { font-size: 11px; opacity: .75; }

/* 2026-08-18 | Recurring crawls — Intake list + Crawl-tab repeat control.
   A schedule is a promise about the future, so the row leads with WHEN and states what settings
   travel with it; a paused one stays visible and greyed rather than disappearing. */
.repeat-pick { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 6px; }
.repeat-pick select { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line, #ddd); }
.hint.inline { margin: 0; font-size: 12px; }

.schedule-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 2px; border-bottom: 1px solid var(--line, #eee);
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-row.paused { opacity: .55; }
.sched-cadence {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border);
}
.sched-next { font-size: 13px; font-variant-numeric: tabular-nums; }
.sched-badge {
  font-size: 12px; padding: 2px 9px; border-radius: 999px;
  background: var(--warn-bg, #fff8e6); border: 1px solid var(--warn-border, #e8d49a);
}
.sched-carry { font-size: 12px; }
.schedule-row .ghost-btn { margin-left: auto; }
.schedule-row .ghost-btn + .ghost-btn { margin-left: 0; }
.ghost-btn {
  font-size: 12px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  background: transparent; border: 1px solid var(--line, #ddd); color: inherit;
}
.ghost-btn:hover { border-color: currentColor; }
.ghost-btn.danger:hover { color: var(--bad); border-color: var(--bad); }

.repeat-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.repeat-select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line, #ddd); }
.repeat-on { margin: 0 0 4px; font-weight: 600; }

/* 2026-08-18 | Compare with an earlier crawl.
   The narrative leads because it is the only part written to be read aloud to a client; the
   counts are secondary; caveats are visually distinct because a comparison you have to qualify
   is a different object from one you can hand over. */
.sched-cadence-select { font-size: 12px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.compare-select { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line, #ddd); font-size: 13px; }
.compare-narrative p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.compare-counts { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.compare-count { flex: 1 1 110px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line, #e3e6ec); text-align: center; }
.compare-count .cc-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.compare-count .cc-l { font-size: 12px; color: var(--muted); }
.compare-count.fixed { background: var(--ok-bg); border-color: var(--ok-border); }
.compare-count.fixed .cc-n { color: var(--ok); }
.compare-count.open { background: var(--bad-bg); border-color: var(--bad-border); }
.compare-count.open .cc-n { color: var(--bad); }
.compare-caveat, .compare-blocker {
  margin: 8px 0 0; padding: 8px 11px; border-radius: 6px; font-size: 13px;
  background: var(--warn-bg, #fff8e6); border: 1px solid var(--warn-border, #e8d49a);
}
.compare-blocker { background: var(--bad-bg); border-color: var(--bad-border); }
.compare-list { margin-top: 14px; }
.compare-list h3 { font-size: 13px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.compare-list ul { margin: 0; padding-left: 18px; }
.compare-list li { margin: 3px 0; font-size: 14px; }

/* 2026-08-19 | Accessibility panel (Results tab).
   Greg: "how can we make this more appealing instead of another list with numbers?"
   The answer is to show the failure rather than name it, so the contrast swatch renders the
   client's own button in their own colours. Everything else stays quiet around it. */
.a11y-coverage { background: var(--tile); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.a11y-coverage b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.a11y-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-bottom: 20px; }
.a11y-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 14px; }
.a11y-tile.lead { background: var(--accent-soft); border-color: var(--accent-border); }
.a11y-tile.lead .a11y-n { color: var(--accent); }
.a11y-n { font-size: 25px; font-weight: 650; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.a11y-n.small { font-size: 19px; }
.a11y-l { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.a11y-item { display: flex; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; margin-bottom: 10px; }
.a11y-stripe { width: 4px; flex: 0 0 4px; background: var(--line-mid); }
.a11y-item.critical .a11y-stripe { background: var(--bad); }
.a11y-item.high .a11y-stripe { background: var(--warn); }
.a11y-item.medium .a11y-stripe { background: var(--flag); }
.a11y-body { padding: 14px 16px; flex: 1 1 auto; min-width: 0; }
.a11y-who { font-size: 16px; line-height: 1.45; margin: 0 0 9px; }

.a11y-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.a11y-tag { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); background: var(--tile); font-variant-numeric: tabular-nums; }
.a11y-tag.sev-critical { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); font-weight: 600; }
.a11y-tag.sev-high { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-border); font-weight: 600; }
.a11y-tag.once { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); font-weight: 600; }

.a11y-evidence { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 11px; }
.a11y-ev-head { background: var(--tile); border-bottom: 1px solid var(--line); padding: 6px 11px;
  font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.a11y-swatches { display: flex; flex-wrap: wrap; }
.a11y-swatch { flex: 1 1 210px; padding: 16px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 9px; }
.a11y-swatch + .a11y-swatch { border-left: 1px solid var(--line); }
.a11y-btn { border-radius: 5px; padding: 9px 15px; display: inline-block; }
.a11y-ratio { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.a11y-ratio .fail { color: var(--bad); }
.a11y-ratio .pass { color: var(--ok); }

.a11y-sr { padding: 13px 16px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.a11y-sr-label { font-size: 12.5px; color: var(--faint); }
.a11y-sr-out { font-family: var(--mono); font-size: 12.5px; background: var(--tile);
  border: 1px dashed var(--line-mid); border-radius: var(--r-sm); padding: 8px 12px; }
.a11y-empty { color: var(--bad); }

/* Which naming case this element is, and the over-correction it invites. The caution rail is
   warn-coloured, not bad: it is not a failure we found, it is the failure the obvious fix creates. */
.a11y-branch { font-size: 13px; color: var(--muted); margin: 10px 12px 0; }
.a11y-branch-fix { font-size: 13px; color: var(--muted); margin: 6px 12px 0; }
.a11y-branch-fix b { color: var(--ink); font-weight: 620; }
.a11y-caution { font-size: 12.5px; color: var(--muted); margin: 8px 12px 12px;
  padding: 7px 11px; border-left: 2px solid var(--warn); background: var(--tile);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.a11y-rule { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.a11y-rule h3 { font-size: 13.5px; margin: 0 0 7px; font-weight: 640; }
.a11y-rule p { margin: 0; font-size: 13px; color: var(--muted); }

.a11y-fix { font-size: 13.5px; color: var(--muted); margin: 0; }
.a11y-fix b { color: var(--ink); font-weight: 600; }
.a11y-sel { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }

.a11y-limits { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md);
  background: var(--tile); border: 1px solid var(--line); }
.a11y-limits h3 { font-size: 13.5px; margin: 0 0 7px; font-weight: 640; }
.a11y-limits p { margin: 0 0 7px; font-size: 13px; color: var(--muted); }
.a11y-limits p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .a11y-swatch + .a11y-swatch { border-left: 0; border-top: 1px solid var(--line); } }

/* 2026-08-19 | Run header — which site am I looking at, on every tab. */
.run-head {
  width: var(--shell); max-width: 100%; margin: 0 auto; padding: 14px var(--gutter) 12px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.rh-domain { font-size: 20px; font-weight: 640; letter-spacing: -0.01em; }
.rh-meta { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rh-chip { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--line-mid); color: var(--muted); background: var(--tile); }
.rh-chip.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.rh-chip.warn { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-border); }
.rh-chip.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); }
.rh-chip.busy { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
.rh-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-btn { font: inherit; font-size: 12px; padding: 4px 11px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line-mid); background: var(--tile); color: var(--muted); }
.rh-btn:hover:not(:disabled) { color: var(--ink); border-color: var(--faint); }
.rh-btn:disabled { opacity: 0.5; cursor: default; }
.rh-btn.primary { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.rh-confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 10px; border: 1px solid var(--line-mid); border-radius: 8px; background: var(--tile); }
.rh-confirm-settings { font-size: 11.5px; color: var(--faint); }
.rh-confirm-opt { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.rh-note { font-size: 11.5px; color: var(--faint); }
.rh-note.bad { color: var(--bad); }
.rh-actions.busy { opacity: 0.45; pointer-events: none; }
.rh-actions.busy .rh-note { opacity: 1; }

/* 2026-08-19 | Results blocks: closed by default, with the answer in the headline.
   A grey dot means NOT MEASURED and is deliberately distinct from green — a closed block must
   never imply a clean result nobody measured. */
details.result-group { border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card); margin-bottom: 10px; }
.group-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  cursor: pointer; list-style: none; }
.group-head::-webkit-details-marker { display: none; }
.group-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-md); }
.group-caret { color: var(--faint); font-size: 10px; transition: transform .15s ease; flex: 0 0 auto; }
details.result-group[open] .group-caret { transform: rotate(90deg); }
.group-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--line-mid); }
.group-dot.ok { background: var(--ok); } .group-dot.warn { background: var(--warn); }
.group-dot.bad { background: var(--bad); } .group-dot.none { background: var(--line-mid); }
.group-head .group-title { font-size: 15px; font-weight: 620; flex: 1 1 auto; margin: 0; }
.group-sum { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.group-body { padding: 0 15px 14px; }
.group-body > .card { border: 0; padding-left: 0; padding-right: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .group-caret { transition: none; } }
@media (max-width: 620px) { .group-sum { flex-basis: 100%; text-align: left; padding-left: 28px; } }

/* Core Web Vitals — bars make the statement, the table is the reference. */
.cwv-block { margin: 16px 0 6px; }
.cwv-block h3 { font-size: 13.5px; margin: 0 0 10px; font-weight: 620; }
.cwv-bars { display: flex; flex-direction: column; gap: 9px; }
.cwv-row { display: grid; grid-template-columns: 100px 1fr 64px; align-items: center; gap: 10px; }
.cwv-name { font-size: 13px; font-weight: 500; min-width: 0; }
.cwv-name small { display: block; color: var(--faint); font-size: 11px; font-weight: 400; }
.cwv-track { position: relative; height: 26px; background: var(--tile); border-radius: 5px; }
.cwv-fill { height: 100%; border-radius: 5px 0 0 5px; }
.cwv-fill.good { background: var(--ok); } .cwv-fill.warn { background: var(--warn); }
.cwv-fill.poor { background: var(--bad); }
.cwv-thresh { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--line-mid); }
.cwv-thresh::after { content: attr(data-l); position: absolute; top: -13px; left: 3px;
  font-size: 10px; color: var(--faint); white-space: nowrap; }
.cwv-val { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.cwv-val b { color: var(--ink); }
.cwv-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); margin-top: 12px; }
.cwv-key-item { display: flex; align-items: center; gap: 5px; }
.cwv-key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cwv-key.good { background: var(--ok); } .cwv-key.warn { background: var(--warn); } .cwv-key.poor { background: var(--bad); }
.cwv-callout { margin-top: 10px; font-size: 13px; }

.cls-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.cls-cell { flex: 1 1 92px; border-radius: var(--r-sm); padding: 9px 10px; border: 1px solid var(--line); background: var(--tile); }
.cls-cell.good { background: var(--ok-bg); border-color: var(--ok-border); }
.cls-cell.warn { background: var(--warn-bg); border-color: var(--warn-border); }
.cls-cell.poor { background: var(--bad-bg); border-color: var(--bad-border); }
.cls-v { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cls-cell.good .cls-v { color: var(--ok); } .cls-cell.warn .cls-v { color: var(--warn-ink); }
.cls-cell.poor .cls-v { color: var(--bad); }
.cls-n { font-size: 11.5px; color: var(--muted); }

details.table-fold { margin-top: 14px; }
details.table-fold > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 8px 0; }
details.table-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Strata example URLs keep their line break. */
.drill-table td { white-space: pre-line; }

/* ==================================================== signals strip (Results)
   Six cards above the result groups. Design rules that are load-bearing, not taste:
   - every card ends in an .act line, because a card that only states a number is a tile;
   - .act.none is GREY and means NOT MEASURED — never green, never a zero dressed as a result;
   - marks use --ok/--warn/--bad/--info, text uses --warn-ink/--info-ink, and every band carries
     its own number so nothing depends on hue alone. */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; margin-bottom: 20px; }
.sig { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px 16px 13px; display: flex; flex-direction: column; gap: 11px;
  cursor: pointer; transition: border-color .12s, transform .12s; }
.sig:hover { border-color: var(--line-mid); transform: translateY(-1px); }
.sig:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sig-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sig-label { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); }
.sig-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.sig-go { font-size: 12px; font-weight: 500; color: var(--accent); }
.sig .hint { font-size: 12px; line-height: 1.45; color: var(--faint); margin: 0; }

/* The reason to act. The rail carries urgency; the sentence carries the meaning. */
.act { margin: auto 0 0; padding: 9px 11px; border-radius: var(--r-sm); background: var(--tile);
  border-left: 2px solid var(--line-mid); font-size: 13px; line-height: 1.45; color: var(--muted); }
.act b { color: var(--ink); font-weight: 600; }
.act.crit { border-left-color: var(--bad); }
.act.warn { border-left-color: var(--warn); }
.act.calm { border-left-color: var(--ok); }
.act.none { border-left-color: var(--line-mid); color: var(--faint); }

.stack { display: flex; gap: 2px; height: 26px; border-radius: 5px; overflow: hidden; }
.seg { min-width: 2px; }
.seg.ok { background: var(--ok); } .seg.info { background: var(--info); }
.seg.bad { background: var(--bad); } .seg.warn { background: var(--warn); }
.keys { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.key { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.key b { font-family: var(--mono); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.key .faint { color: var(--faint); }
.dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--line-mid); }
.dot.ok { background: var(--ok); } .dot.info { background: var(--info); }
.dot.bad { background: var(--bad); } .dot.warn { background: var(--warn); }
.dot.nil { background: var(--track); }

.rows { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: 112px 1fr 38px; align-items: center; gap: 8px; }
.row-name { font-family: var(--mono); font-size: 11px; line-height: 1.25; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-bar { height: 9px; border-radius: 5px; min-width: 3px; background: var(--line-mid); }
.row-bar.lead { background: var(--warn); }
.row-bar.accent { background: var(--accent-border); }
.row-bar.accent.lead { background: var(--accent); }
.row-v { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted);
  text-align: right; font-variant-numeric: tabular-nums; }
.row.lead .row-name, .row.lead .row-v { color: var(--ink); }

/* Core Web Vitals: one bar per template, split into three equal STATE segments. Equal widths on
   purpose — the bar reports which band each metric is in, not how big it is. */
.vit { display: flex; flex-direction: column; gap: 6px; }
.vit-head { display: grid; grid-template-columns: 74px 1fr; gap: 8px; font-size: 10px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.vit-head > span:nth-child(2) { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px;
  text-align: center; }
.vit-row { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px;
  cursor: help; }
.vit-name { font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; }
.vit-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; height: 11px;
  border-radius: 5px; overflow: hidden; }
.vit-bar i { display: block; height: 100%; background: var(--line-mid); }
.vit-bar i.ok { background: var(--ok); } .vit-bar i.warn { background: var(--warn); }
.vit-bar i.bad { background: var(--bad); }
.vit-row.flagged .vit-name { color: var(--ink); font-weight: 500; }

.meter { height: 12px; border-radius: 6px; background: var(--track); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 6px; background: var(--line-mid); }
.meter i.ok { background: var(--ok); } .meter i.warn { background: var(--warn); }
.meter i.bad { background: var(--bad); } .meter i.accent { background: var(--accent); }
.meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--muted); }
.big { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.big small { font-size: 13px; font-weight: 500; color: var(--faint); margin-left: 5px; }

/* Field data (CrUX): real users, whole origin, its own block — never mixed into the per-template
   lab bars, because one origin number repeated per template would imply measurements we do not
   have. This is the only place INP appears; there is no lab equivalent of it. */
.field { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 8px; background: var(--tile); }
.field-head { font-size: 12px; color: var(--muted); }
.field-head b { color: var(--ink); font-weight: 600; }
.field-head .faint { color: var(--faint); }
.field-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.field-cell { display: flex; flex-direction: column; gap: 2px; }
.field-m { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--faint); }
.field-v { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.field-v.ok { color: var(--ok); } .field-v.warn { color: var(--warn-ink); }
.field-v.bad { color: var(--bad); } .field-v.none { color: var(--faint); font-weight: 400; }

/* Template accessibility: state and reach on one row. The dot repeats the state word rather than
   replacing it — a row must be readable with the colour removed entirely. */
.tpl-a11y { display: flex; flex-direction: column; gap: 5px; }
.ta-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 7px; cursor: help; }
.ta-name { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.ta-state { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-mid); color: var(--muted); background: var(--card); }
.ta-state.ok { color: var(--ok); border-color: var(--ok-border); background: var(--ok-bg); }
.ta-state.warn { color: var(--warn-ink); border-color: var(--warn-border); background: var(--warn-bg); }
.ta-state.bad { color: var(--bad); border-color: var(--bad-border); background: var(--bad-bg); }
.ta-state.none { color: var(--faint); }
/* The accessibility state, in words next to the publishing verdict. Not a second chip: two
   pills on one row compete, and the wishlist verdict is the decision the card exists for. */
.ta-a11y { font-size: 11px; color: var(--faint); white-space: nowrap; }
.ta-a11y.bad { color: var(--bad); font-weight: 600; }
.ta-a11y.warn { color: var(--warn-ink); }
.ta-a11y.ok { color: var(--ok); }
.ta-reach { font-family: var(--mono); font-size: 11px; color: var(--faint);
  font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
@media (max-width: 380px) { .ta-a11y { display: none; } }

/* --- connected sources ------------------------------------------------------
   2026-08-20 | Greg: "a small list with a green check mark or red cross."
   It sits above the strip because it qualifies everything below it: the six cards are what our
   crawler saw, and this row says what else, if anything, is standing behind them.
   The MARK IS A SHAPE, not a colour — ✓ / ✗ / – read the same to a reader who cannot separate
   the hues, which is the same rule the strip's bars follow. */
.conn { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px; }
.conn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.conn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* A FIXED name column, not max-content. Each row is its own grid, so an intrinsic column sizes
   per row and the three details landed at three different x — a ragged left edge on a list whose
   whole job is to be scanned down. 172px clears the longest name we print. */
.conn-row { display: grid; grid-template-columns: 18px 172px 1fr;
  gap: 2px 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.conn-row:first-child { border-top: 0; padding-top: 0; }
.conn-mark { font-size: 13px; line-height: 1.3; font-style: normal; text-align: center;
  font-weight: 700; }
.conn-mark.ok { color: var(--ok); } .conn-mark.bad { color: var(--bad); }
.conn-mark.warn { color: var(--warn-ink); } .conn-mark.none { color: var(--line-mid); }
.conn-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.conn-row.none .conn-name { color: var(--muted); font-weight: 500; }
.conn-detail { font-size: 12.5px; color: var(--muted); }
.conn-note { grid-column: 2 / -1; font-size: 11.5px; line-height: 1.45; color: var(--faint);
  margin: 2px 0 0; }
/* The concrete step, on the row it belongs to. The summary underneath says why the gap matters;
   this says what to do about it, and the two must not be the same sentence. */
.conn-note.do b { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .conn-row { grid-template-columns: 18px 1fr; }
  .conn-detail, .conn-note { grid-column: 2 / -1; }
}


/* The shell got wider; running text did not. A paragraph is readable at ~75 characters and
   nowhere near it at 1600px, so prose keeps its own measure inside the wider frame. Tables,
   bars and the signals strip are scanned rather than read and use the full width. */
.card > p, .card > .muted, .hint, .act span, #report-stub p, .drill p { max-width: 88ch; }

/* The primary export, so it reads as the one you probably want. */
.dl-btn-primary { background: var(--action); color: #fff; border-color: var(--action); }
.dl-btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); }

/* --- diagnosis tab: exports + publishability -------------------------------
   2026-08-20 | The exports are a choice between three documents, so each button carries the
   sentence that decides it. The button column is fixed so the sentences share a left edge and
   the block reads as a list rather than three loose rows. */
.exps { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.exp-row { display: grid; grid-template-columns: 176px 1fr; gap: 6px 18px;
  align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.exp-row:first-child { border-top: 0; padding-top: 4px; }
.exp-ctl { display: flex; }
.exp-ctl .dl-btn { width: 100%; justify-content: center; }
.exp-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 76ch; }
@media (max-width: 640px) {
  .exp-row { grid-template-columns: 1fr; }
  .exp-note { grid-column: 1; }
}

/* Publishability. The verdict is a word, not only a colour — NO-GO and AT-RISK have to be
   separable by a reader who cannot tell the two hues apart, and this is the block where being
   wrong about that is most expensive. */
.wl-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.wl-t { border: 1px solid var(--line); border-left: 3px solid var(--line-mid);
  border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.wl-t.bad { border-left-color: var(--bad); }
.wl-t.warn { border-left-color: var(--warn); }
.wl-t.ok { border-left-color: var(--ok); }
.wl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--tile); }
.wl-type { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink); }
.wl-verdict { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid; }
.wl-verdict.ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.wl-verdict.warn { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-border); }
.wl-verdict.bad { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); }
.wl-verdict.none { color: var(--muted); background: var(--tile); border-color: var(--line-mid); }
.wl-reach { font-size: 12px; color: var(--faint); margin-left: auto; }
.wl-body { padding: 4px 14px 12px; display: flex; flex-direction: column; }
.wl-c { padding: 9px 0; border-top: 1px solid var(--line); }
.wl-c:first-child { border-top: 0; }
.wl-c-head { display: flex; align-items: center; gap: 8px; }
.wl-c-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wl-c-detail { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 4px 0 0 16px;
  max-width: 88ch; }
/* The evidence. Paths rather than full URLs — the host is the same on every row and repeating it
   pushes the part that differs off the edge. */
.wl-ex { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 0 16px; }
.wl-ex-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--faint); }
.wl-ex-url { font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  text-decoration: none; border-bottom: 1px solid var(--accent-border);
  max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-ex-url:hover { border-bottom-color: var(--accent); }
.wl-unknown, .wl-stale { font-size: 12px; color: var(--faint); margin: 8px 0 0; }
.wl-clean { font-size: 13px; color: var(--ok); margin: 8px 0 0; }

/* Provenance banner — printed before any lab number, never after. */
.prov { background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--r-sm);
  padding: 11px 14px; display: flex; flex-direction: column; gap: 3px; margin: 0 0 4px; }
.prov-head b { font-size: 13.5px; color: var(--ink); }
.prov-body { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 84ch; }

/* Page-weight breakdown by origin. */
.weight-block { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.weight-block h3 { font-size: 14px; margin: 0; }
.row.wide { grid-template-columns: 190px 1fr auto auto; }
.row-name.wide { width: auto; }
.row-pct { font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  min-width: 44px; text-align: right; }


/* Intake top row: the domain form and the Search Console box, side by side.
   2026-08-20 | Greg: the domain block was full-width after the shell widened, which justified a
   checkbox and its label across the whole screen. Half the width, and something useful beside
   it. Collapses to one column before the two get too narrow to read. */
.intake-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .intake-top { grid-template-columns: 1fr; } }
.intake-top > .card { margin: 0; }

#gsc-box { display: flex; flex-direction: column; gap: 10px; }
#gsc-box > .muted { max-width: 62ch; }
/* Echoes the one domain field, on the left. Dimmed until it has something to echo. */
.gsc-for { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13.5px; }
.gsc-for-l { color: var(--faint); font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; font-family: var(--mono); }
.gsc-for b { color: var(--ink); font-weight: 600; }
.gsc-for[data-empty="1"] b { color: var(--faint); font-weight: 500; font-style: italic; }

.gsc-drops { display: flex; flex-direction: column; gap: 8px; }
.gsc-drop { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  align-items: center; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--tile); cursor: pointer; }
.gsc-drop:hover { border-color: var(--line-mid); }
.gsc-drop:focus-within { outline: 2px solid var(--accent-border); border-color: var(--accent); }
.gsc-drop-t { font-size: 13.5px; font-weight: 600; }
.gsc-drop-h { grid-column: 1; font-size: 12px; color: var(--faint); line-height: 1.45; }
.gsc-drop input[type=file] { grid-column: 2; grid-row: 1 / span 2; font-size: 12px;
  max-width: 210px; color: var(--muted); }
.gsc-drop-s { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.gsc-drop.done { border-color: var(--ok-border); background: var(--ok-bg); }
.gsc-drop.done .gsc-drop-s { color: var(--ok); }
.gsc-drop.fail { border-color: var(--bad-border); background: var(--bad-bg); }
.gsc-drop.fail .gsc-drop-s { color: var(--bad); }
#gsc-held { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }

/* The offending page, linked. */
.a11y-example { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin: 6px 0 0; font-size: 12.5px; }
.a11y-example-l { color: var(--faint); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; }
.a11y-example-a { color: var(--accent); text-decoration: none; font-family: var(--mono);
  font-size: 12px; word-break: break-all; }
.a11y-example-a:hover { text-decoration: underline; }
.a11y-example-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================================================================ V2 · template matrix
   2026-08-23 | Ported from mockups/template-matrix.html (approved v2: brighter fills, count only,
   no state words). Five cell states; clean and not-measured must never share a colour. */
.view-toggle { display: flex; align-items: center; gap: 4px; margin: 0 0 14px; padding: 4px;
  background: #e9eef2; border-radius: 999px; width: fit-content; }
.vt-btn { font: 600 13px/1 var(--sans); padding: 8px 16px; border: 0; background: none; border-radius: 999px;
  cursor: pointer; color: var(--muted); }
.vt-btn.active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,32,.12); }
.vt-note { font-size: 12px; color: var(--faint); padding: 0 10px 0 6px; }

.mx-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; margin: 0 0 16px; }
.mx-site { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.mx-site small { display: block; font: 500 12px/1.6 var(--mono); color: var(--faint); letter-spacing: .04em; }
.mx-score { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; min-width: 340px; }
.mx-score-n { font-size: 42px; font-weight: 600; letter-spacing: -.03em; line-height: 1; grid-row: 1 / 3; }
.mx-score-n small { font-size: 15px; color: var(--faint); font-weight: 500; margin-left: 2px; }
.mx-score-l { font-size: 13px; font-weight: 600; }
.mx-score-m { font: 500 11.5px/1.5 var(--mono); color: var(--faint); }

.mx-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.mx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mx-legend-r { margin-left: auto; }
.mx-sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid transparent; flex: none; }
.mx-sw.clean { background: #d9f7e4; border-color: #9ee6ba; } .mx-sw.warn { background: #ffd34d; border-color: #f5c21a; }
.mx-sw.critical { background: #ff8a85; border-color: #ff5f5a; } .mx-sw.na { background: var(--tile); border-color: var(--line); }
.mx-sw.nm { background: repeating-linear-gradient(135deg,#fff 0 4px,#eef2f5 4px 5px); border: 1px dashed var(--line-mid); }

.mx-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
table.mx { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1120px; }
.mx th { font: 500 10.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  text-align: left; padding: 12px 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mx-th-tpl { min-width: 190px; } .mx-th-score { text-align: right; min-width: 86px; }
.mx-th-theme { text-align: center; padding-left: 6px; padding-right: 6px; }
.mx-th-theme small { display: block; font-size: 9.5px; letter-spacing: .08em; color: var(--line-mid); margin-top: 3px; text-transform: none; }
.mx td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mx tr:last-child td { border-bottom: 0; }
.mx-tpl { white-space: nowrap; }
.mx-tpl-name { font-weight: 600; font-size: 14px; }
.mx-tpl-name.unclass { color: var(--warn-ink); }
.mx-tpl-meta { font: 500 11.5px/1.4 var(--mono); color: var(--faint); }
.mx-task { font: 600 11.5px/1.4 var(--sans); color: var(--warn-ink); margin-top: 2px; }
.mx-w { font: 500 11.5px/1 var(--mono); color: var(--muted); background: var(--tile); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.mx-rowscore { font: 600 13px/1 var(--mono); text-align: right; white-space: nowrap; }
.mx-rowscore small { display: block; font-weight: 500; font-size: 10.5px; color: var(--faint); margin-top: 4px; }

.mx-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 48px; min-width: 84px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
  cursor: pointer; user-select: none; position: relative; transition: transform .08s ease, box-shadow .08s ease;
  font: 600 14px/1 var(--mono); }
.mx-cell:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(15,23,32,.08); }
.mx-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-cell small { font: 500 10.5px/1 var(--mono); letter-spacing: .02em; }
.mx-cell.clean { background: #d9f7e4; border-color: #9ee6ba; color: #015c2c; font-size: 16px; cursor: default; }
.mx-cell.clean:hover { transform: none; box-shadow: none; }
.mx-cell.warn { background: #ffe9a8; border-color: #ffd666; color: #7a3a00; }
.mx-cell.warn.h2 { background: #ffd34d; border-color: #f5c21a; }
.mx-cell.warn.h3 { background: #ffb300; border-color: #e69d00; color: #3d1f00; }
.mx-cell.critical { background: #ffc9c9; border-color: #ff9c9c; color: #7a0005; }
.mx-cell.critical.h2 { background: #ff8a85; border-color: #ff5f5a; color: #fff; }
.mx-cell.critical.h3 { background: #e30613; border-color: #b80009; color: #fff; }
.mx-cell.critical.h2 small, .mx-cell.critical.h3 small { color: #fff; }
.mx-cell.na { background: var(--tile); border-color: var(--line); color: var(--line-mid); cursor: default; font-weight: 500; font-size: 12px; }
.mx-cell.na:hover { transform: none; box-shadow: none; }
.mx-cell.nm { background: repeating-linear-gradient(135deg,#fff 0 6px,#eef2f5 6px 7px); border: 1px dashed var(--line-mid);
  color: var(--faint); font-weight: 500; }
.mx-foot { font-size: 12.5px; color: var(--faint); margin: 12px 0 0; max-width: 90ch; line-height: 1.55; }

.mx-drill { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mx-drill-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px;
  border-bottom: 1px solid var(--line); background: var(--tile); }
.mx-drill-ctl { display: flex; gap: 10px; align-items: center; }
.mx-crumb { font: 500 12px/1.4 var(--mono); color: var(--faint); }
.mx-crumb b { color: var(--ink); font-weight: 600; }
.mx-pill { display: inline-block; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid; }
.mx-pill.critical { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-border); }
.mx-pill.warn { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-border); }
.mx-close { font: 500 12.5px var(--sans); color: var(--muted); background: none; border: 1px solid var(--line-mid);
  border-radius: 6px; padding: 6px 11px; cursor: pointer; }
.mx-close:hover { border-color: var(--ink); color: var(--ink); }
.mx-drill-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 20px; }
.mx-sec { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; }
.mx-syndrome { font-size: 18px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; margin: 0; max-width: 72ch; }
.mx-sub { color: var(--muted); margin: 6px 0 0; max-width: 78ch; font-size: 14px; }
.mx-symptoms { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; max-width: 84ch; }
.mx-symptoms li span { color: var(--muted); font-size: 13px; }
.mx-urls { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.mx-fix { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 8px; padding: 14px 16px; max-width: 84ch; }
.mx-fix b { display: block; font-weight: 600; margin-bottom: 4px; }
.mx-fix p { margin: 0; color: var(--muted); font-size: 14px; }
.mx-prov { font: 500 11.5px/1.6 var(--mono); color: var(--faint); border-top: 1px solid var(--line); padding-top: 12px;
  display: flex; gap: 18px; flex-wrap: wrap; }
.mx-prov b { color: var(--muted); font-weight: 500; }

/* Site profile box — 2026-08-24 */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.profile-grid label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; }
.profile-grid select, .profile-grid input { padding: 7px 9px; border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  font: inherit; font-size: 14px; font-weight: 400; background: var(--card); color: var(--ink); }
.profile-grid .hint.inline { font-weight: 400; }

/* =====================================================================
   2026-08-24 | Pre-intake walk-through. Ported from the approved mockup onto the DS tokens.
   The stepper's per-group question bar is the load-bearing element: one segment per question,
   filled as answered, the whole bar amber when the group was skipped. */
#pi-launch #pi-open { align-self: flex-start; }
.pi-steps-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.pi-steps { display: flex; gap: 8px; flex: 1; }
.pi-step { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.pi-step-l { display: flex; align-items: center; gap: 8px; font: 600 12.5px var(--sans); color: var(--faint); }
.pi-step-n { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font: 600 11px var(--mono); background: var(--tile);
  border: 1px solid var(--line-mid); color: var(--muted); flex: none; }
.pi-step.active .pi-step-l { color: var(--ink); }
.pi-step.active .pi-step-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.pi-step.done .pi-step-n { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.pi-step.done .pi-step-l { color: var(--ok); }
.pi-step.skipped .pi-step-n { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
.pi-step.skipped .pi-step-l { color: var(--warn-ink); }
.pi-qbar { display: flex; gap: 3px; height: 5px; }
.pi-qbar i { flex: 1; border-radius: 3px; background: var(--line); }
.pi-qbar i.filled { background: var(--accent); }
.pi-qbar i.skipped { background: var(--warn-border); }
.pi-step.done .pi-qbar i.filled { background: var(--ok-border); }

.pi-card { display: flex; flex-direction: column; padding: 0; }
.pi-head { padding: 18px 22px 0; }
.pi-count { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.pi-head h2 { margin: 6px 0 4px; border: 0; padding: 0; }
.pi-body { padding: 14px 22px 20px; display: flex; flex-direction: column; gap: 14px; }
.pi-q { display: flex; flex-direction: column; gap: 6px; }
.pi-q > label { font-size: 13.5px; font-weight: 600; }
.pi-why { font-weight: 400; color: var(--faint); font-size: 12px; margin-left: 6px; }
.pi-q input[type=text], .pi-q select { max-width: 420px; }
.pi-seg { display: flex; gap: 6px; }
.pi-seg button { font: 500 13px var(--sans); padding: 7px 16px; border: 1px solid var(--line-mid);
  border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer; }
.pi-seg button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pi-seg button:focus-visible { outline: 2px solid var(--accent-border); }
.pi-hidden-ctl { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.pi-foot { display: flex; justify-content: space-between; gap: 10px; padding: 14px 22px;
  border-top: 1px solid var(--line); background: var(--tile);
  border-radius: 0 0 var(--r-lg, 12px) var(--r-lg, 12px); }
.pi-foot-r { display: flex; gap: 8px; margin-left: auto; }

.pi-sum-g { border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.pi-sum-g h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.pi-sum-g ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.pi-sum-g li { color: var(--muted); }
.pi-sum-g li b { color: var(--ink); font-weight: 600; }
.pi-mark { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px; }
.pi-mark.ok { color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-border); }
.pi-mark.skip { color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.pi-miss { color: var(--warn-ink); }
.pi-note { color: var(--warn-ink); font-size: 12.5px; }
.pi-sum-g.skipped { background: var(--warn-bg); border-color: var(--warn-border); }

/* 2026-08-24 | Regroup drilldown (template row click): URL list + move dropdowns. */
.mx-tpl-click { cursor: pointer; }
.mx-tpl-click:hover .mx-tpl-name { color: var(--accent); }
.mx-tpl-click:focus-visible { outline: 2px solid var(--accent-border); outline-offset: -2px; }
.rg-list { display: flex; flex-direction: column; margin-top: 10px; max-height: 420px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 8px; }
.rg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 12px; border-bottom: 1px solid var(--line); }
.rg-row:last-child { border-bottom: 0; }
.rg-row.rg-moved { background: var(--accent-soft); }
.rg-url { min-width: 0; display: flex; flex-direction: column; }
.rg-url a { color: var(--ink); text-decoration: none; font-size: 13px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rg-url a:hover { color: var(--accent); text-decoration: underline; }
.rg-pat { color: var(--faint); font: 400 11px var(--mono); }
.rg-sel { flex: none; font-size: 12.5px; max-width: 220px; }

/* 2026-08-24 | Skip-reason strip in the pre-intake walk-through. */
.pi-skip-why { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 22px; border-top: 1px solid var(--warn-border); background: var(--warn-bg); }
/* .hidden is a single-class rule declared earlier; without this the display:flex above wins
   the cascade and the strip can never hide. */
.pi-skip-why.hidden { display: none; }
.pi-why-l { font: 600 12.5px var(--sans); color: var(--warn-ink); }
.pi-why-cb { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.pi-skip-why input[type=text] { flex: 1; min-width: 180px; font-size: 13px; }

/* 2026-08-24 | Results-tab card evenness (Greg): claims visible, reasoning folded, cards level. */
.strip { align-items: stretch; }
.sig { display: flex; flex-direction: column; }
.sig > .act { margin-top: auto; }   /* the claim pins to the card foot — even bottoms */
.act-why { display: inline; margin-left: 6px; font-weight: 400; }
.act-why summary { display: inline; cursor: pointer; color: var(--accent); font-size: 12px;
  text-decoration: underline dotted; list-style: none; }
.act-why summary::-webkit-details-marker { display: none; }
.act-why[open] summary { display: block; margin-top: 2px; }
.act-why > span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.sig-meth { display: block; margin: 4px 0 0; }
.vit-more { font-size: 12px; padding: 4px 0 0; }

/* Executive summary strip */
.exec-sum { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 18px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.exec-head { display: flex; justify-content: space-between; align-items: baseline; }
.exec-row { display: flex; align-items: baseline; gap: 10px; }
.exec-i { font: 600 11px var(--mono); color: var(--faint); width: 14px; flex: none; }
.exec-verdict { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 8px; flex: none; }
.exec-verdict.bad { color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-border); }
.exec-verdict.warn { color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-border); }
.exec-verdict.none { color: var(--muted); background: var(--tile); border: 1px solid var(--line-mid); }
.exec-title { font-size: 13.5px; min-width: 0; }
.exec-reach { flex: none; font-size: 12px; }
.exec-go { align-self: flex-end; }

/* 2026-08-26 | Logo is a link home (Greg). Inherits the h1 look; hover hints it is clickable. */
#home-link { color: inherit; text-decoration: none; }
#home-link:hover { text-decoration: underline; text-underline-offset: 4px; }
#home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* 2026-08-27 | Top-bar Menu, closed Queue, Archive, Under-the-hood timings (Greg). */
.topbar-row { width: var(--shell); max-width: 100%; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.topbar-row h1, .topbar-row .sub { width: auto; padding: 0; margin: 0; }
.menu { position: relative; margin-top: 4px; }
.menu-btn { font: 600 13px var(--sans); color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.menu-btn:hover { background: rgba(255,255,255,.14); }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 50;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  box-shadow: 0 8px 24px rgba(15,23,32,.12); }
.menu-list [role=menuitem] { display: block; width: 100%; text-align: left; font: 500 13.5px var(--sans);
  color: var(--ink); background: none; border: 0; border-radius: 7px; padding: 9px 12px; cursor: pointer; }
.menu-list [role=menuitem]:hover, .menu-list [role=menuitem]:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }

.queue-details > summary { list-style: none; cursor: pointer; font-size: 15px; color: var(--muted);
  padding: 2px 0; display: flex; align-items: center; gap: 10px; }
.queue-details > summary::-webkit-details-marker { display: none; }
.queue-details > summary b { color: var(--accent); }
.queue-caret { display: inline-block; font-size: 11px; color: var(--faint); transition: transform .15s; }
.queue-details[open] > .queue-summary .queue-caret { transform: rotate(90deg); }
.queue-details[open] > summary { margin-bottom: 12px; color: var(--ink); }

.mon-when { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin: 4px 0 6px; }
.mon-when b { font-weight: 600; color: var(--faint); }
.mon-recent { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.mon-recent-h { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.mon-done .mon-host-name { color: var(--muted); }

/* ---- v30 | Domain settings page ------------------------------------------------------- */
.ds-crumb { font-size: 12.5px; color: var(--faint); margin: 4px 0 12px; display: flex; gap: 6px; align-items: center; }
.ds-crumb a { color: var(--accent); text-decoration: none; }
.ds-pick { margin-left: auto; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.ds-pick select { font: 500 12.5px var(--sans); padding: 4px 8px; border: 1px solid var(--line-mid, var(--line)); border-radius: 7px; background: var(--card); color: var(--ink); }
.ds-title { font: 600 20px var(--sans); margin: 0 0 2px; }
.ds-sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; max-width: 70ch; }
#ds-body .card + .card { margin-top: 14px; }
.ds-grid { display: grid; grid-template-columns: 200px 1fr; gap: 8px 18px; padding: 4px 0 8px; align-items: start; }
.ds-grid dt { font: 500 12px var(--mono); letter-spacing: .04em; color: var(--faint); padding-top: 6px; }
.ds-grid dd { margin: 0; color: var(--ink); }
.ds-grid dd b { font-weight: 600; }
.ds-help { font-size: 12px; color: var(--faint); margin-top: 4px; max-width: 64ch; }
.ds-help code { font: 500 11.5px var(--mono); }
.ds-inh { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.ds-inh input[type=number] { width: 80px; font: 400 13.5px var(--sans); padding: 5px 8px; border: 1px solid var(--line-mid, var(--line)); border-radius: 7px; background: var(--card); color: var(--ink); font-variant-numeric: tabular-nums; }
.ds-inh select, .ds-add input[type=text] { font: 400 13.5px var(--sans); padding: 6px 9px; border: 1px solid var(--line-mid, var(--line)); border-radius: 7px; background: var(--card); color: var(--ink); }
.ds-cap { font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line-mid, var(--line)); border-radius: 999px; padding: 2px 7px; color: var(--muted); margin-left: 6px; }
.ds-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ds-terms li { border: 1px solid var(--line-mid, var(--line)); border-radius: 999px; padding: 3px 10px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.ds-terms li.retired { color: var(--faint); text-decoration: line-through; border-style: dashed; }
.ds-terms li small { color: var(--faint); font: 500 10.5px var(--mono); text-decoration: none; }
.ds-terms li button { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 0; font-size: 13px; }
.ds-add { display: flex; gap: 6px; margin-top: 8px; }
.ds-add input[type=text] { flex: 1; }
.ds-btn { font: 500 13px var(--sans); padding: 6px 12px; border-radius: 7px; border: 1px solid var(--line-mid, var(--line)); background: var(--tile, var(--bg)); color: var(--ink); cursor: pointer; }
.ds-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ds-btn:disabled { opacity: .5; cursor: default; }
.ds-save { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 10px; }
.ds-save .ds-who { margin-right: auto; font-size: 12px; color: var(--faint); }
.ds-hist-wrap { overflow-x: auto; padding: 2px 0 6px; }
.ds-hist { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-hist th { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.ds-hist th:first-child, .ds-hist th:nth-child(2), .ds-hist td:first-child, .ds-hist td:nth-child(2) { text-align: left; }
.ds-hist td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--muted); }
.ds-hist td a { color: var(--accent); text-decoration: none; font-weight: 500; cursor: pointer; }
.ds-hist td.d { font-weight: 600; } .ds-hist td.new { color: var(--bad, #c10007); } .ds-hist td.ok { color: var(--ok, #016630); } .ds-hist td.cav { color: var(--faint); font-weight: 400; }
.ds-note { font-size: 12px; color: var(--faint); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---- v35 | Connected sources: live rows expand ------------------------------------------ */
.conn-row.expandable { cursor: pointer; position: relative; }
.conn-state { display: inline-block; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-right: 8px; }
.conn-caret { position: absolute; right: 0; top: 8px; border: 0; background: none; color: var(--faint); font-size: 10px; cursor: pointer; transition: transform .15s; }
.conn-row.open .conn-caret { transform: rotate(90deg); }
.conn-expand { grid-column: 2 / -1; }
.conn-note.facts { color: var(--muted); }
.conn-note.do.bad b { color: var(--bad); }
.conn-quota { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.conn-bar { flex: 0 0 160px; height: 6px; background: var(--tile); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.conn-bar i { display: block; height: 100%; background: var(--accent); }
.ds-ta { display: block; width: 100%; max-width: 640px; font: 400 12.5px var(--mono); padding: 6px 9px; border: 1px solid var(--line-mid, var(--line)); border-radius: 7px; background: var(--card); color: var(--ink); margin-top: 6px; }

/* ---- v36 | Site stack beside Connected sources: two columns at the top of Results -------- */
.top-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .top-two { grid-template-columns: 1fr; } }
.stack-chip { display: inline-block; font: 500 11.5px var(--sans); border: 1px solid var(--line-mid, var(--line));
  border-radius: 999px; padding: 1px 9px; margin: 0 6px 4px 0; color: var(--ink); background: var(--tile); }
.stack-chip.ok { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); }
.stack-chip.warn { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); }
.conn-state.bad { color: var(--bad); }
/* the stack card's rows carry chips, so the detail column needs to wrap rather than clip */
.stack-card .conn-detail { display: block; }
.stack-card .conn-detail b + .conn-state, .stack-card .conn-state { margin-left: 6px; }

/* ---- item 6: recurring crawls — fixed domain column so Run now / Check now share an axis ---- */
.schedule-row .sched-host, .schedule-row > .run-host { flex: 0 0 260px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the 'next …' column varies by date length too, so it gets a fixed width — Run now then starts on one axis */
.schedule-row .sched-next { flex: 0 0 210px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the buttons are right-aligned by margin-left:auto, so their LEFT edges only line up if they share a width */
.schedule-row .ghost-btn { min-width: 92px; text-align: center; }
/* ---- item 7: one primary button style (InSpace palette) for Start crawl, Add to queue, the sheet ---- */
.pi-foot .pi-foot-r button, .pi-foot .pi-foot-r .primary-btn, #submit.primary-btn { background: var(--action); color: #fff; border: 1px solid var(--action); border-radius: var(--r-sm); padding: 9px 16px; font-weight: 600; cursor: pointer; }
.pi-foot .pi-foot-r button:hover, #submit.primary-btn:hover { background: var(--action-hover); border-color: var(--action-hover); }
.pi-foot .pi-foot-r button.ghost-btn { background: transparent; color: var(--ink); border-color: var(--line-mid); font-weight: 500; }
.pi-foot .pi-foot-r button.ghost-btn:hover { border-color: currentColor; background: transparent; }
/* ---- item 8: takeaway block — one control column, same width, same axis for button and links ---- */
.exp-row { grid-template-columns: 200px 1fr; }
.exp-ctl { display: flex; }
.exp-ctl .dl-btn, .exp-ctl a.dl-btn, .exp-ctl button.dl-btn { box-sizing: border-box; width: 100%; margin: 0; text-align: center; justify-content: center; display: inline-flex; align-items: center; line-height: 1.2; }
/* ---- queue rows: actions and the inline pickers (no dialogs) ---- */
.queue-row { flex-wrap: wrap; }
.queue-row .run-host { flex: 0 1 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-row .run-state { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.queue-row .run-state.paused { color: var(--warn-ink); } .queue-row .run-state.running { color: var(--ok); }
.queue-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.queue-actions .ghost-btn { padding: 4px 10px; font-size: 12px; }
.queue-actions .ghost-btn.danger { color: var(--bad); border-color: var(--bad-border); }
.queue-pick { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 8px 10px 10px 30px; font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); }
.queue-pick label { display: inline-flex; gap: 6px; align-items: center; }
.queue-pick .ghost-btn { padding: 4px 10px; font-size: 12px; }
.queue-pick .why { flex-basis: 100%; font-size: 11.5px; color: var(--faint); }
.recrawl-pick { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: var(--muted); }
.recrawl-pick label { display: inline-flex; gap: 5px; align-items: center; }
.recrawl-pick .lead { flex-basis: 100%; color: var(--warn-ink); }

/* ---- 2026-08-28 | accessibility: one block per rule + "Show me" screenshot ------------------ */
.a11y-where { font-size: 12.5px; color: var(--muted); margin: -4px 0 10px; }
.a11y-show { padding: 3px 10px; font-size: 12px; margin-left: 8px; }
.a11y-shot { margin: 8px 0 4px; }
.a11y-shot img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }
.a11y-shot p { margin: 6px 0 0; font-size: 12px; }

/* 2026-08-28 | domain-settings re-crawl: the robots opt-out sits on the button's own line, so the
   choice is read before the click rather than remembered from the run head. */
.ds-inline-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ds-inline-opt input { margin: 0; }

/* 2026-08-28 | v39 | Settings → scan package. Three cards, one choice. The "not yet" chips are
   deliberately visible and muted: the package promises them, Chronos cannot type them yet, and
   the reader has to be able to see both facts at once. */
.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 6px 0 12px; }
.pkg-card { display: block; border: 1px solid var(--line, #d8dee6); border-radius: 10px; padding: 14px 16px; cursor: pointer; background: var(--panel, #fff); }
.pkg-card:hover { border-color: #9fb0c4; }
.pkg-card.on { border-color: #2f6fed; box-shadow: 0 0 0 2px rgba(47, 111, 237, .12); }
.pkg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pkg-head input { margin: 0; }
.pkg-sum { margin: 0 0 10px; font-size: 13px; color: var(--muted, #5b6673); }
.pkg-tpl, .pkg-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.pkg-lbl { font-size: 12px; color: var(--muted, #5b6673); min-width: 52px; }
.stack-chip.pend { opacity: .55; border-style: dashed; }

/* 2026-08-28 | `.hidden` is declared at the top of this file, so any later rule that sets a
   `display` on the same element wins on source order alone — and three run-head elements did.
   The visible symptom was the re-crawl confirm strip (Start / Cancel / ignore robots.txt) sitting
   permanently in the header on every tab, next to a run head that was itself never hidden. The
   file already carries `.tab-panel.hidden` and `.login-overlay.hidden` for exactly this reason;
   these are the same fix for the elements the queue-control work added. */
.run-head.hidden, .rh-actions.hidden, .rh-confirm.hidden { display: none; }

/* 2026-08-28 | Settings → package definitions: templates down, packages across, a tick per cell. */
.pk-grid th.pk-col { min-width: 150px; }
.pk-grid th.pk-col small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted, #5b6673); font-size: 11.5px; margin-top: 2px; }
.pk-grid td.pk-cell { text-align: center; }
.pk-grid td.pk-cell input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.pk-grid tr.pk-pending td { border-top: 1px dashed var(--line, #d8dee6); font-size: 12px; }
.pk-grid tr.pk-pending .stack-chip { margin: 2px 4px 2px 0; }

/* 2026-08-29 | Template readiness: the reason for an ungraded template, on the row rather than in
   a tooltip one tab away; and the unidentified bucket named below the list instead of rendered as
   a template row. */
.tpl-a11y .ta-why { margin: -3px 0 3px 15px; font-size: 12px; line-height: 1.45;
  color: var(--muted); max-width: 62ch; }
.ta-aside { margin: 8px 0 0; font-size: 12px; color: var(--faint); }