/* Hallmark · shape: app screen · genre: modern-minimal · theme: Console (deal 2/3, seed professional-seo-marketing-audit-88a3·e8c15801·2026-11-06·r0)
 * nav: top bar, wordmark and seven links · signature: the fix ledger, one surface of issues with the fix beside the evidence · states: loading, empty, error, full · console: paper
 * axes: light/grotesk-sans/chromatic-amber · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V3 · weakest: V, the ledger is close to any audit list; made the old and new text the loudest thing in a row instead of a score
 * finish-review: subagent · 8 findings · 6 resolved 2 partial (store scores inline rather than in columns; platform tables keep their weight) · gap: no before shots, pages sit behind login
 * finish-review, search screens: subagent · 8 findings · 6 resolved 1 partial (nav still scrolls sideways on a phone) 1 dismissed (stacked notices came from the test script) · gap: none, new screens */
@import url("./tokens.css");
@import url("./base.css");

/* The shell */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); min-height: 56px; padding: var(--space-xs) var(--gutter); border-bottom: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); }
.wordmark { font-weight: 500; font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; }
.tabs { display: flex; gap: var(--space-2xs); overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-pill); color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.tabs a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.tabs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.tabs a[aria-current="page"] { color: var(--color-ink); box-shadow: inset 0 -2px 0 var(--color-accent); border-radius: 0; }
.who { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; color: var(--color-muted); font-size: var(--text-sm); }
.page { max-width: 1280px; margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-3xl); }
.page-head { display: grid; gap: var(--space-xs); margin-bottom: var(--space-xl); }
.page h1 { max-width: 34ch; overflow-wrap: break-word; min-width: 0; }
.page h2 { max-width: none; margin: var(--space-xl) 0 var(--space-sm); }
.page h3 { margin: 0; font-size: var(--text-md); }
.quiet, .note { color: var(--color-muted); font-size: var(--text-sm); }
.lede { color: var(--color-ink-2); max-width: 62ch; }
.measured, code { color: var(--color-cool); font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.page a:not(.btn) { color: var(--color-cool); }
.page a:not(.btn):hover { color: var(--color-ink); }
.page a:not(.btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Messages */
.notice { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); overflow-wrap: anywhere; }
.notice.error { border-color: var(--color-bad); background: var(--color-bad-soft); }
.notice.ok { border-color: var(--color-ok); background: var(--color-ok-soft); }
.notice.working { border-color: var(--color-cool); background: var(--color-cool-soft); }
.notice form { margin-top: var(--space-xs); }
.panel .actions + .note { margin-top: var(--space-sm); }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 500 var(--text-sm)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { border-color: var(--color-rule-2); background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: var(--color-paper-2); }
.btn--danger { border-color: var(--color-bad); background: transparent; color: var(--color-bad); }
.btn--danger:hover { background: var(--color-bad-soft); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.inline-form { display: inline; }
label.field, .field > label { display: block; margin: var(--space-md) 0 var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input[type=file], select, textarea { width: 100%; max-width: 560px; min-height: 40px; padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; }
input:disabled { opacity: 0.55; cursor: not-allowed; }
input::placeholder { color: var(--color-muted); }
textarea { min-height: 96px; }
input[type=number] { max-width: 120px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--color-accent); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.check { display: flex; align-items: flex-start; gap: var(--space-xs); min-height: 44px; padding-block: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
.check input { flex: none; margin: var(--space-3xs) 0 0; }
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm); }
.form-row .field { flex: 1 1 220px; }
.form-row .field--wide { flex: 2 1 340px; }
.form-row .field > label { margin-top: 0; }
.form-row input, .form-row select { max-width: none; }

/* Tags */
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-xs); white-space: nowrap; }
.sev-critical { border-color: var(--color-bad); background: var(--color-bad); color: var(--color-accent-ink); }
.sev-high { border-color: var(--color-bad); color: var(--color-bad); }
.sev-medium { border-color: var(--color-accent); color: var(--color-accent); }
.tag-good { border-color: var(--color-ok); color: var(--color-ok); }
.tag-warn { border-color: var(--color-accent); color: var(--color-accent); }
.tag-bad { border-color: var(--color-bad); color: var(--color-bad); }

/* Tables and panels */
.wrap { position: relative; overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data th, .data td { padding: var(--space-xs) var(--space-md) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; vertical-align: top; }
.data th { color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.data td.break { overflow-wrap: anywhere; }
.data td.name { white-space: nowrap; }
.panel { padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.panel + .panel { margin-top: var(--space-md); }
.stack > * + * { margin-top: var(--space-md); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.figures > div { padding: var(--space-md) var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule); }
.figures > div:last-child { border-right: 0; }
.figures dt { color: var(--color-muted); font-size: var(--text-sm); }
.figures dd { margin: var(--space-2xs) 0 0; font-family: var(--font-outlier); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }

/* The fix ledger: one surface, each issue divided by a rule */
.ledger { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); }
.issue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.issue:last-child { border-bottom: 0; }
.issue-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.issue-rank { display: inline-block; min-width: var(--space-xl); font-variant-numeric: tabular-nums; }
.issue-title h3, h3.issue-name { font-size: var(--text-lg); overflow-wrap: break-word; min-width: 0; }
.issue-tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: var(--space-xs) 0 0 var(--space-xl); }
.issue-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-lg); margin-left: var(--space-xl); }
.fix-summary { color: var(--color-ink); max-width: 72ch; }
.fix-steps { margin: 0; padding-left: var(--space-lg); max-width: 72ch; color: var(--color-ink-2); }
.fix-steps li + li { margin-top: var(--space-2xs); }
.needs-dev { color: var(--color-muted); font-size: var(--text-sm); }
.byline { color: var(--color-muted); font-size: var(--text-xs); }
.issue-fix { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); align-content: start; }
.issue-evidence { min-width: 0; padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.issue-evidence h4 { margin: 0 0 var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.evidence { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.evidence p { margin: var(--space-3xs) 0 0; color: var(--color-ink-2); }
.evidence-page { overflow-wrap: anywhere; }
.issue-evidence details { margin-top: var(--space-sm); }
.ledger--quiet .issue-name { color: var(--color-ink-2); font-size: var(--text-md); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); }
.pair > div { padding: var(--space-sm) var(--space-md); min-width: 0; overflow-wrap: anywhere; }
.pair > div:first-child { border-right: var(--rule-hair) solid var(--color-rule); background: var(--color-paper-3); color: var(--color-ink-2); }
.pair-label { display: block; margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; }
.pair .new { font-weight: 500; }
.suggestion-page { margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
details > summary { min-height: 32px; color: var(--color-cool); font-size: var(--text-sm); cursor: pointer; }
details > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
details[open] > summary { margin-bottom: var(--space-xs); }

/* Loading state: a placeholder in the shape of what is coming */
.skeleton { display: grid; gap: var(--space-xs); max-width: 560px; }
.skeleton span { display: block; height: 12px; border-radius: var(--radius-pill); background: var(--color-paper-3); }
.skeleton span:nth-child(2) { width: 82%; }
.skeleton span:nth-child(3) { width: 64%; }

/* Search performance */
.subtabs { margin-bottom: var(--space-lg); }
.figures--lead { margin-bottom: var(--space-2xs); }
.tag-search { border-color: var(--color-cool); color: var(--color-cool); }
.page-key { overflow-wrap: anywhere; }
td.page-key { min-width: 24ch; overflow-wrap: break-word; }
.page .tabs a:not(.btn) { color: var(--color-muted); }
.page .tabs a:not(.btn):hover, .page .tabs a[aria-current="page"]:not(.btn) { color: var(--color-ink); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart { display: block; width: 100%; min-width: 820px; height: auto; }
.chart-grid { stroke: var(--color-rule); stroke-width: 1; }
.chart-axis { stroke: var(--color-rule-2); stroke-width: 1; }
.chart-label { fill: var(--color-muted); font-family: var(--font-outlier); font-size: 12px; }
.chart-line { fill: none; stroke: var(--color-cool); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--color-cool); stroke: var(--color-paper); stroke-width: 2; }
.chart-bar { fill: var(--color-cool); }
.chart-hit { fill: transparent; }
.chart-event { stroke: var(--color-accent); stroke-width: 1; }
.chart-flag { fill: var(--color-accent); }
.chart-key { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.chart-key i { display: inline-block; width: 2px; height: 14px; background: var(--color-accent); }

/* The way in */
.front { display: grid; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.front .page-head { margin-bottom: 0; }
.front h1 { font-size: var(--text-3xl); }

@media (max-width: 60rem) {
  .top { padding-inline: var(--gutter); }
  .issue-body { grid-template-columns: minmax(0, 1fr); }
  .issue-evidence { padding: var(--space-sm) 0 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .who { margin-left: 0; }
}
@media (max-width: 40rem) {
  .page { padding-top: var(--space-lg); }
  .issue { padding: var(--space-md); }
  .issue-body, .issue-tags { margin-left: 0; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > div:first-child { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .figures > div { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .figures > div:last-child { border-bottom: 0; }
  .data { min-width: 560px; }
  /* A table of stores restacks: each row keeps its name and its figures in view. */
  .data--stack { min-width: 0; }
  .data--stack thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data--stack th { display: block; }
  .data--stack, .data--stack tbody { display: block; }
  .data--stack tr { display: block; padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .data--stack td { display: block; padding: var(--space-3xs) 0; border: 0; }
  .data--figures td[data-label] { display: flex; justify-content: space-between; gap: var(--space-sm); }
  .data--figures td[data-label]::before { display: inline; font-size: var(--text-sm); }
  .hide-narrow { display: none !important; }
  .data--stack td.name { white-space: normal; font-size: var(--text-md); }
  .data--stack td[data-label]::before { content: attr(data-label); display: block; color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); }
}
/* The front door: one box, one button, one tick */
.hero { display: grid; gap: var(--space-md); padding: var(--space-xl) 0 var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hero h1 { max-width: 18ch; font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: 1.02; overflow-wrap: break-word; min-width: 0; }
.hero .lede { font-size: var(--text-lg); }
.hero > * { min-width: 0; }
.audit { display: grid; gap: var(--space-xs); width: min(760px, 100%); margin-top: var(--space-sm); }
.audit-box { display: flex; gap: var(--space-xs); padding: var(--space-xs); border: 1.5px solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper); transition: border-color var(--dur-short) var(--ease-out); }
.audit-box:focus-within { border-color: var(--color-accent); }
.audit-box input[type=text] { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 52px; border: 0; background: transparent; font-size: var(--text-lg); }
.audit-box input[type=text]:focus-visible { outline: none; }
.btn--big { min-height: 52px; padding: 0 var(--space-lg); font-size: var(--text-md); }
.audit-options { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }

.sites, .areas, .rows, .area-scores, .health-counts { margin: 0; padding: 0; list-style: none; }
.sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-md); }
.site-link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-md); align-items: center; min-height: 96px; padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); text-decoration: none; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.page a.site-link:not(.btn) { color: var(--color-ink); }
.site-link:hover { border-color: var(--color-rule-2); background: var(--color-paper); }
.site-score { grid-row: 1 / span 3; font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); font-variant-numeric: tabular-nums; line-height: 1; }
.site-score.score-none { font-size: var(--text-md); color: var(--color-muted); }
.site-name { font-weight: 500; overflow-wrap: anywhere; }
.site-meta { color: var(--color-muted); font-size: var(--text-sm); }
.score-good { color: var(--color-ok); }
.score-fair { color: var(--color-accent); }
.score-poor { color: var(--color-bad); }
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); border-top: var(--rule-hair) solid var(--color-rule); }
.area { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.area-name { font-weight: 500; }
.area-count { color: var(--color-muted); font-size: var(--text-sm); }
.area-about { margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-sm); }

/* Overview: the score first, then what to fix first */
.page-head--split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); }
.head-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.health { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.health-score { padding: var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule); }
.health-label { color: var(--color-muted); font-size: var(--text-sm); }
.health-number { display: flex; align-items: baseline; gap: var(--space-2xs); margin: var(--space-2xs) 0; font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; }
.health-number > span:first-child { font-variant-numeric: tabular-nums; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 1; }
.health-of { color: var(--color-muted); font-size: var(--text-lg); }
.health-verdict { color: var(--color-ink); font-weight: 500; }
.health-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.count a { display: grid; align-content: center; gap: var(--space-2xs); height: 100%; min-height: 110px; padding: var(--space-lg); border-right: var(--rule-hair) solid var(--color-rule); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.count:last-child a { border-right: 0; }
.count a:hover { background: var(--color-paper); }
.count-number { font-family: var(--font-display); font-weight: 500; font-size: var(--text-3xl); font-variant-numeric: tabular-nums; line-height: 1; }
.count-label { color: var(--color-muted); font-size: var(--text-sm); }
.page .count--critical a, .page .count--high a { color: var(--color-bad); }
.page .count--medium a { color: var(--color-accent); }
.page .count--low a { color: var(--color-ink-2); }
.page .count--zero a { color: var(--color-muted); }

.rows { display: grid; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.row { padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); box-shadow: inset 3px 0 0 var(--row-edge, transparent); }
.row:last-child { border-bottom: 0; }
.row--critical, .row--high { --row-edge: var(--color-bad); }
.row--medium { --row-edge: var(--color-accent); }
.row--low { --row-edge: var(--color-rule-2); }
.row-link { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); text-decoration: none; }
.page a.row-link:not(.btn) { color: var(--color-ink); }
.page a.row-link:not(.btn):hover .row-title { text-decoration: underline; text-underline-offset: 0.16em; }
.row-title { font-size: var(--text-lg); font-weight: 500; }
.row-meta { color: var(--color-muted); font-size: var(--text-sm); }
.row-fix { margin-top: var(--space-2xs); color: var(--color-ink-2); max-width: 80ch; }

.area-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-sm); }
.area-score { display: grid; gap: var(--space-xs); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); text-decoration: none; }
.page a.area-score:not(.btn) { color: var(--color-ink); }
.area-score:hover { border-color: var(--color-rule-2); }
.area-score progress { width: 100%; height: 8px; border: 0; border-radius: var(--radius-pill); background: var(--color-paper-3); appearance: none; color: var(--color-ok); }
.area-score progress::-webkit-progress-bar { border-radius: var(--radius-pill); background: var(--color-paper-3); }
.area-score progress::-webkit-progress-value { border-radius: var(--radius-pill); background: var(--color-ok); }
.area-score progress::-moz-progress-bar { border-radius: var(--radius-pill); background: var(--color-ok); }
.area-line { color: var(--color-muted); font-size: var(--text-sm); }

/* Issues: filters as chips, each card led by what to do */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.chip { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 36px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-rule-2); border-radius: 999px; font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.page a.chip:not(.btn) { color: var(--color-ink-2); }
.chip:hover { background: var(--color-paper-2); }
.page a.chip[aria-current="true"] { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.chip[aria-current="true"] .measured { color: inherit; }
.chips + details { margin-bottom: var(--space-md); }
.issue { box-shadow: inset 3px 0 0 var(--row-edge, transparent); }
.issue--critical, .issue--high { --row-edge: var(--color-bad); }
.issue--medium { --row-edge: var(--color-accent); }
.issue--low { --row-edge: var(--color-rule-2); }
.issue-head { display: flex; gap: var(--space-sm); align-items: baseline; }
.issue-head .issue-rank { min-width: 2ch; color: var(--color-muted); font-family: var(--font-outlier); }
.issue-heading { display: grid; gap: var(--space-xs); min-width: 0; }
p.issue-tags { margin: 0; }
.issue .issue-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); margin-left: calc(2ch + var(--space-sm)); max-width: 82ch; }
.fix-why { color: var(--color-ink-2); }
.fix-box { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-pill); background: var(--color-paper-2); }
.fix-box-head { margin-bottom: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.issue-where .evidence { margin-bottom: var(--space-sm); }
.rewrite { display: grid; gap: var(--space-xs); }
.rewrite-list { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.rewrite-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.rewrite-page { min-width: 0; overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--color-ink-2); }
.btn--small { min-height: 32px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
@media (max-width: 760px) {
  .audit-box { flex-direction: column; }
  .health { grid-template-columns: minmax(0, 1fr); }
  .health-score { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .health-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count:nth-child(2) a { border-right: 0; }
  .count:nth-child(-n+2) a { border-bottom: var(--rule-hair) solid var(--color-rule); }
  .issue .issue-body { margin-left: 0; }
}

/* A running audit: an instrument panel, so motion only marks what is live. */
.run { display: grid; gap: var(--space-md); margin: 0 0 var(--space-xl); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.run-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-sm); }
.run-kicker { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.run-host { margin: 0; font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.run-time { display: flex; gap: var(--space-sm); margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); }
.run-track { position: relative; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-paper-3); }
.run-bar { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; background: transparent; appearance: none; color: var(--color-cool); }
.run-bar::-webkit-progress-bar { background: transparent; }
.run-bar::-webkit-progress-value { border-radius: inherit; background: var(--color-cool); }
.run-bar::-moz-progress-bar { border-radius: inherit; background: var(--color-cool); }
.run-sweep { position: absolute; inset: 0; width: 30%; background: linear-gradient(90deg, transparent, var(--color-sheen), transparent); transform: translateX(-100%); animation: run-sweep 1.6s var(--ease-in-out) infinite; }
@keyframes run-sweep { to { transform: translateX(340%); } }
.run-steps { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.run-step { display: grid; grid-template-columns: 20px minmax(0, auto) 1fr; align-items: center; gap: var(--space-sm); min-height: 28px; color: var(--color-muted); }
.run-step .run-detail { justify-self: end; text-align: right; color: var(--color-muted); }
.run-step.is-done { color: var(--color-ink-2); }
.run-step.is-current { color: var(--color-ink); font-weight: 500; }
.run-step.is-current .run-detail { color: var(--color-cool); font-weight: 400; }
.run-mark { position: relative; width: 14px; height: 14px; border: 1.5px solid var(--color-rule-2); border-radius: 50%; justify-self: center; }
.is-done .run-mark { border-color: var(--color-ok); background: var(--color-ok); }
.is-done .run-mark::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 4px; height: 7px; border: solid var(--color-paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.is-current .run-mark { border-color: var(--color-cool); background: var(--color-cool); }
.is-current .run-mark::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid var(--color-cool); border-radius: 50%; opacity: 0; animation: run-pulse 1.4s var(--ease-out) infinite; }
@keyframes run-pulse { 0% { transform: scale(0.6); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
.run-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.run-counts > div { padding: var(--space-sm) var(--space-md) 0 0; }
.run-counts dt { color: var(--color-muted); font-size: var(--text-sm); }
.run-counts dd { margin: var(--space-2xs) 0 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.run-feed { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-sm); }
.run-feed-head { margin: 0 0 var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.run-feed ul { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; font-family: var(--font-outlier); font-size: var(--text-sm); }
.run-feed li { display: grid; grid-template-columns: 3.5ch minmax(0, 1fr) auto; gap: var(--space-sm); color: var(--color-ink-2); }
.run-feed li:nth-child(n+4) { color: var(--color-muted); }
.run-feed li.is-new { animation: run-in var(--dur-short) var(--ease-out); }
.run-feed .run-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-feed .run-kind { color: var(--color-muted); }
.run-feed .run-wait { display: block; color: var(--color-muted); }
@keyframes run-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 640px) {
  .run { padding: var(--space-md); }
  .run-step { grid-template-columns: 20px 1fr; }
  .run-step .run-detail { grid-column: 2; justify-self: start; text-align: left; }
  .run-counts dd { font-size: var(--text-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .audit-box, .site-link, .count a, .chip { transition: none; }
  .run-sweep { display: none; }
  .is-current .run-mark::after, .run-feed li.is-new { animation: none; }
  .btn, .tabs a { transition: none; }
  .btn:active { transform: none; }
}
@media print {
  .top, .actions, .no-print, details > summary { display: none; }
  .page { max-width: none; padding: 0; }
  .issue { break-inside: avoid; }
  details > *, details::details-content { display: block; content-visibility: visible; }
}
.nil { color: var(--color-muted); }
.data .up { color: var(--color-ok); }
.data .down { color: var(--color-bad); }

/* Public information pages share the existing Console tokens. */
.public-intro { padding-block: var(--space-xl) var(--space-2xl); max-width: 70ch; }
.public-intro h1 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: var(--space-lg); }
.public-section { max-width: 74ch; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.public-section p, .public-document p { margin-block: var(--space-md); line-height: 1.65; }
.public-document { max-width: 76ch; }
.public-footer { display: flex; flex-wrap: wrap; gap: var(--space-lg); max-width: 1280px; margin-inline: auto; padding: var(--space-lg) var(--gutter); border-top: var(--rule-hair) solid var(--color-rule); }
.public-footer a { color: var(--color-cool); }
.public-footer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }