/* SITE READINESS (V7) — the screen painted by site-readiness.js.
   Tokens only (docs/brand-kit.md): no literal colour, no grey resting fill.
   A verdict carries a word and a tone; the tone is never the only signal. */

#sr-root { scrollbar-gutter: stable; }

.sr-grid {
  display: grid;
  gap: 14px;
  padding: var(--sp-7) var(--gutter) var(--sp-8);
}

.sr-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  min-width: 0;
}

.sr-bh {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--sec-head);
  padding: 0 var(--sp-7);
  border-bottom: 1px solid var(--line-light);
  flex-wrap: wrap;
}
.sr-bh .sp { flex: 1; }
.sr-title { margin: 0; font-size: var(--text-lg); font-weight: 600; color: var(--ink); }
.sr-meta { font-family: var(--mono); font-size: var(--text-xs); color: var(--faint); }

.sr-state {
  padding: var(--sp-7);
  font-size: var(--text-sm);
  color: var(--body);
  max-width: 72ch;
}
.sr-state b { color: var(--ink); font-weight: 600; }
.sr-state-err b { color: var(--danger); }
/* A read in progress sits a step quieter than a finished state: it is the screen waiting, not a finding. */
.sr-loading { color: var(--muted); }

.sr-band {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-7);
  border-bottom: 1px solid var(--line-light);
  flex-wrap: wrap;
}
.sr-band-l { flex: 1 1 320px; min-width: 0; }
.sr-headline { margin: 0 0 var(--sp-2); font-size: var(--text-xl); font-weight: 600; color: var(--ink); }
.sr-h-bad { color: var(--danger); }
.sr-h-unknown { color: var(--warn); }
.sr-cover { margin: 0; font-size: var(--text-xs); color: var(--muted); font-family: var(--mono); }

.sr-score { display: flex; align-items: baseline; gap: var(--sp-2); }
.sr-fig { font-family: var(--mono); font-size: var(--fig-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sr-of { font-family: var(--mono); font-size: var(--text-xs); color: var(--faint); }
.sr-flabel, .sr-withheld { font-size: var(--text-xs); color: var(--muted); margin-left: var(--sp-4); }

/* A label that carries its definition on hover and focus. */
.sr-tipped { position: relative; cursor: help; border-bottom: 1px dotted var(--line-hover); }
.sr-tipped:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The verdict table: fixed columns on every row, scrolling in its own box. */
.sr-table { overflow-x: auto; }
.sr-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(150px, 1fr) minmax(170px, 1.1fr) minmax(260px, 2.4fr);
  gap: var(--sp-6);
  align-items: start;
  min-width: 780px;
  padding: 10px var(--sp-7);
  border-bottom: 1px solid var(--line-light);
  font-size: var(--text-sm);
  color: var(--body);
}
.sr-row:last-child { border-bottom: 0; }
.sr-thead {
  font-size: var(--text-xs);
  color: var(--muted);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
.sr-group { border-bottom: 1px solid var(--line); }
.sr-group:last-child { border-bottom: 0; }
.sr-ghead {
  display: flex;
  align-items: baseline;
  gap: var(--sp-6);
  min-width: 780px;
  padding: var(--sp-6) var(--sp-7) var(--sp-2);
}
.sr-gname { font-size: var(--text-xs); font-weight: 600; color: var(--ink); text-transform: none; }
.sr-gnote { font-size: var(--text-xs); color: var(--muted); }

.sr-c-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-bot { color: var(--ink); font-weight: 500; }
.sr-vendor { font-size: var(--text-xs); color: var(--faint); }

.sr-v { font-weight: 500; }
.sr-v-ok { color: var(--body); }
.sr-v-bad { color: var(--danger); }
.sr-v-choice { color: var(--muted); }
.sr-v-unknown { color: var(--warn); }
.sr-v-quiet { color: var(--faint); }
.sr-code { font-family: var(--mono); font-size: var(--text-xs); color: var(--faint); }

.sr-c-ev { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.sr-ev { color: var(--body); }
.sr-rule { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); overflow-wrap: anywhere; }
.sr-honest { margin: 0; font-size: var(--text-xs); color: var(--muted); }

/* The work filed from these checks. */
.sr-work { padding: var(--sp-2) 0; }
/* Two columns, the state's fixed: a flex row let each title claim whatever the
   state word left over, and the states sat at a different x on every row. */
.sr-wrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--sec-row);
  padding: 0 var(--sp-7);
  border-bottom: 1px solid var(--line-light);
  font-size: var(--text-sm);
}
.sr-wrow:last-child { border-bottom: 0; }
.sr-wtitle { flex: 1; min-width: 0; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-wopen {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}
.sr-wopen:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* A row's work: the verdict's mark, then the door, on one line under the row's words. */
.sr-wline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); min-width: 0; }
.sr-wstate { width: 18ch; font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.sr-more { padding: var(--sp-4) var(--sp-7); font-size: var(--text-xs); color: var(--muted); border-top: 1px solid var(--line-light); }

/* Pages: the roll-up by check leads, then pages worst first (owner D5). */
.sr-notes { margin: 0; padding: var(--sp-4) var(--sp-7) var(--sp-4) calc(var(--sp-7) + 16px); font-size: var(--text-xs); color: var(--muted); border-bottom: 1px solid var(--line-light); }
.sr-sub { display: flex; align-items: baseline; gap: var(--sp-6); padding: var(--sp-6) var(--sp-7) var(--sp-2); flex-wrap: wrap; }
.sr-subt { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }

.sr-irow {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(96px, auto) minmax(0, 1.6fr);
  gap: var(--sp-6);
  align-items: start;
  padding: 10px var(--sp-7);
  border-bottom: 1px solid var(--line-light);
  font-size: var(--text-sm);
}
.sr-ititle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-it { color: var(--ink); font-weight: 500; }
.sr-ifix { font-size: var(--text-xs); color: var(--muted); }
.sr-ireach { font-family: var(--mono); font-size: var(--text-xs); color: var(--body); white-space: nowrap; }
.sr-itags { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline; }
.sr-tag { font-size: var(--text-xs); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 6px; line-height: 20px; }
.sr-tag-block { color: var(--danger); border-color: currentColor; }
.sr-ref { font-family: var(--mono); font-size: var(--text-xs); color: var(--faint); }
.sr-cited { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
/* A check's impact (WRT P3): its basis named in words. A measured gap reads in ink, the rubric's rank
   and no measured effect stay quiet; the dull direction is never drawn as a fault. */
.sr-impact { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.sr-impact-measured { color: var(--ink); }
.sr-impact-rubric, .sr-impact-no_measured_effect { color: var(--muted); }
/* The failing checks' rows, ruled off from the figure above them as the pages list is. */
.sr-issues { border-top: 1px solid var(--line-light); }
/* The owned brand in the slope's held list (RPT's shared owned marker), in ink like its drawn line. */
.sr-slope li.blk-c-owned { color: var(--ink); font-weight: 600; }

.sr-pages { border-top: 1px solid var(--line-light); }
.sr-page { border-bottom: 1px solid var(--line-light); }
.sr-page:last-child { border-bottom: 0; }
.sr-psum {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: var(--sp-6);
  align-items: center;
  min-height: var(--sec-row);
  padding: 0 var(--sp-7);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
}
.sr-psum::-webkit-details-marker { display: none; }
.sr-psum:hover { background: var(--wash-hover); }
.sr-psum:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sr-purl { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-plead { color: var(--body); }
.sr-plead-bad { color: var(--ink); font-weight: 500; }
.sr-grade { font-family: var(--mono); font-size: var(--text-xs); color: var(--faint); justify-self: end; position: relative; }
.sr-grade-none { color: var(--warn); }
.sr-pbody { padding: 0 var(--sp-7) var(--sp-6); display: grid; gap: var(--sp-4); }
.sr-flist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
/* A list of checks shares its columns: title, then up to five tags (Blocker, category, rank or impact, the
   method's section, the cited rate), each row on the list's own tracks through subgrid, so a rank or a rate
   sits under the one above it. A change list (.sr-chg rows) keeps its own two columns across the whole list.
   Narrow, the tags wrap under the title. */
.sr-flist:has(> .sr-fi) { grid-template-columns: minmax(0, 1fr) repeat(5, auto); column-gap: var(--sp-4); }
.sr-fi { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; font-size: var(--text-sm); }
.sr-flist > .sr-chg { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .sr-flist:has(> .sr-fi) { grid-template-columns: minmax(0, 1fr); }
  .sr-fi { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
}
.sr-fit { color: var(--body); }
.sr-na { margin: 0; font-size: var(--text-xs); color: var(--muted); }
.sr-doors { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

@media (max-width: 720px) {
  .sr-irow { grid-template-columns: 1fr auto; }
  .sr-itags { grid-column: 1 / -1; }
  .sr-psum { grid-template-columns: 1fr auto; row-gap: var(--sp-2); padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
  .sr-plead { grid-column: 1 / -1; grid-row: 2; }
  .sr-pchg { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 720px) {
  .sr-grid { padding-left: var(--sp-7); padding-right: var(--sp-7); }
  /* On a phone a row stacks rather than scrolling its second verdict out of
     sight: the name, then both verdicts side by side, then the evidence. The two
     verdicts use different words, which is what lets the column heads go. */
  .sr-row, .sr-ghead { min-width: 0; }
  .sr-row { grid-template-columns: 1fr 1fr; row-gap: var(--sp-2); }
  .sr-c-name, .sr-c-ev { grid-column: 1 / -1; }
  .sr-thead { display: none; }
}

/* Filters (plan §8): one row per box, a group per key. Display-only — the
   figures above a list never move with them, which is why the row sits under
   the band and above the list it narrows. */
.sr-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  padding: var(--sp-5) var(--sp-7);
  border-bottom: 1px solid var(--line-light);
}
.sr-fg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.sr-fl { font-size: var(--text-xs); color: var(--faint); margin-right: var(--sp-2); }
.sr-clear {
  font: inherit;
  font-size: var(--text-xs);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sr-clear:hover { color: var(--ink); }
.sr-ffoot { font-family: var(--mono); }
.sr-running { border-bottom: 1px solid var(--line-light); max-width: none; }

/* What changed since a page's last audit (Phase 2). The kind is a word with a
   tone, never a colour alone. */
.sr-pchg { font-size: var(--text-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-chg-box { display: grid; gap: var(--sp-3); padding-top: var(--sp-2); }
.sr-chg-h { margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--ink); }
.sr-chg { display: grid; grid-template-columns: 17ch minmax(0, 1fr); column-gap: var(--sp-4); align-items: baseline; font-size: var(--text-sm); }
.sr-chg-k { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.sr-chg-now_fails { color: var(--danger); }
.sr-chg-now_passes { color: var(--ok); }
.sr-chg-no_longer_assessed, .sr-chg-newly_assessed { color: var(--warn); }
.sr-chg-why { grid-column: 2; font-size: var(--text-xs); color: var(--faint); }

/* One page audit, in the drawer (Phase 2). */
.sr-audit { display: grid; gap: var(--sp-6); }
.sr-facts { display: grid; gap: var(--sp-2); }
.sr-fact { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: var(--sp-4); font-size: var(--text-sm); }
.sr-fk { color: var(--muted); }
.sr-fv { color: var(--ink); overflow-wrap: anywhere; }
.sr-pass summary { cursor: pointer; font-size: var(--text-xs); color: var(--muted); }
.sr-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sr-hrow { display: grid; grid-template-columns: 12ch minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; font-size: var(--text-sm); min-height: var(--ctl-h-sm); }
.sr-hd { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.sr-hg { color: var(--body); }
.sr-hhere { font-size: var(--text-xs); color: var(--faint); }

/* The access watch (Phase 3). */
.sr-watch { margin-top: var(--sp-1); }
.sr-since { margin: var(--sp-2) 0 0; font-size: var(--text-xs); color: var(--muted); }
.sr-evts { list-style: none; margin: 0; padding: 0 var(--sp-7) var(--sp-4); display: grid; }
.sr-evt { display: grid; grid-template-columns: 12ch minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: var(--sp-2) var(--sp-6); align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-light); font-size: var(--text-sm); }
.sr-evt:last-child { border-bottom: 0; }
.sr-evt .sr-honest { grid-column: 2 / -1; margin: 0; }
.sr-evd { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.sr-evb { display: flex; flex-direction: column; min-width: 0; }
.sr-evw { color: var(--ink); }
.sr-evt-blocked .sr-evw, .sr-evt-block_changed .sr-evw { color: var(--danger); }
.sr-evt-recovered .sr-evw { color: var(--ok); }
.sr-evt-choice .sr-evw { color: var(--body); }
.sr-choice { color: var(--muted); }
.sr-evr { font-size: var(--text-xs); color: var(--muted); }
@media (max-width: 720px) {
  .sr-evt { grid-template-columns: 1fr; }
  .sr-evt .sr-honest { grid-column: 1; }
}

/* The join (Phase 4): the alarm and the dull direction at the same weight. */
.sr-joins { list-style: none; margin: 0; padding: 0 var(--sp-7) var(--sp-4); display: grid; }
.sr-join { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line-light); display: grid; gap: var(--sp-2); }
.sr-join:last-child { border-bottom: 0; }
.sr-jh { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.sr-jh .sr-vendor { margin: 0; }
.sr-jsince { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); }
.sr-jls { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sr-jl { font-size: var(--text-sm); color: var(--body); padding-left: var(--sp-5); border-left: 2px solid var(--line); }
.sr-jl-stopped { border-left-color: var(--danger); color: var(--ink); }
.sr-jl-still_cited { border-left-color: var(--ok); color: var(--ink); }
.sr-jl-too_few_since, .sr-jl-couldnt_check { border-left-color: var(--warn); }
.sr-leg { margin: 0; font-size: var(--text-xs); color: var(--muted); }

/* The cited-set comparison (phase 5): one component for every verdict — no rule may key on data-verdict. */
.sr-css { list-style: none; margin: 0; padding: 0 var(--sp-7) var(--sp-4); display: grid; }
.sr-cs { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-light); display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); }
.sr-cs:last-child { border-bottom: 0; }
.sr-csv { font-weight: 600; color: var(--ink); grid-row: span 2; }
.sr-csk { color: var(--ink); }
.sr-csn { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .sr-cs { grid-template-columns: minmax(0, 1fr); } .sr-csv { grid-row: auto; } }
.sr-cs-sum { padding: 0 var(--sp-7) var(--sp-3); display: grid; gap: var(--sp-1); color: var(--muted); font-variant-numeric: tabular-nums; }
.sr-cs-sum p { margin: 0; }

/* S's bar, above the boxes (the date slot says the screen reads its latest checks). */
.sr-scope { padding: var(--sp-3) var(--gutter) 0; }

/* P10's figures (WRT): a state carries no weight where nothing is wrong; the failures and blocks read first. */
.sr-figure [data-state="none"] .st-s { color: var(--faint); }
.sr-figure [data-state="pass"] .st-s { color: var(--muted); }
.sr-figure [data-state="fail"] .st-s, .sr-figure [data-state="blocked"] .st-s { font-weight: 600; }
.sr-figure-checks > summary { cursor: pointer; padding: var(--sp-6) var(--sp-7) var(--sp-2); }
/* A wide grid scrolls under its row names and their corner; a long page path wraps in its column, its end (where
   product variants differ) never cut. */
.sr-figure .st-grid { border-collapse: separate; border-spacing: 0; }
.sr-figure .st-grid th[scope="row"], .sr-figure .st-grid thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.sr-figure-checks .st-grid thead th[scope="col"]:not(:first-child) { vertical-align: bottom; }
/* The join's slope sits inside its crawler's row, at the figure's own drawn width: scaled to the whole box, the
   figure's words outgrow the row's text and the owned line's label runs past the box's edge. */
/* P10's Citations over time: the plot scrolls sideways inside its box on a narrow screen, never the page. */
.sr-cites { display: grid; gap: var(--sp-2); }
.sr-cites-plot { overflow-x: auto; }
/* P4's dumbbell above the failing rows, inset like them, a step clear of the first. */
.sr-impact-fig { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-7) var(--sp-5); }
.sr-impact-leg { padding: 0 var(--sp-7) var(--sp-3); }
.sr-slope { display: grid; gap: var(--sp-2); }
.sr-slope .sr-sub { padding: var(--sp-2) 0 0; }
.sr-slope .mk-slope { max-width: 30rem; }