/* Legible — page-specific. Tokens and chrome live in /base.css. */

/* ---- scan bar -------------------------------------------------------------- */
.scanbar { margin-top: clamp(1.75rem, 5vh, 2.75rem); max-width: 40rem; }
.scanbar .t-label { display: block; margin-bottom: 0.5rem; }
.scanrow { display: flex; gap: 0; border: var(--rule) solid var(--line); background: var(--bg-raised); }
.scanrow:focus-within { border-color: var(--signal); }
.scanrow input {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none;
  padding: 0.85rem 1rem; font-family: var(--mono); font-size: 15px; color: var(--ink);
}
.scanrow input::placeholder { color: var(--ink-4); }
.scanrow button {
  flex: 0 0 auto; background: var(--signal); color: var(--n-00); border: 0;
  padding: 0.85rem 1.5rem; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
:root[data-theme="light"] .scanrow button { color: var(--n-99); }
.scanrow button:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.scanbar .t-meta { margin: 0.6rem 0 0; color: var(--ink-4); }
.scanbar .err { color: var(--sev-critical); }

/* ---- THE STRIP ------------------------------------------------------------- */
.strip-section {
  border-top: var(--rule) solid var(--line);
  padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(2rem, 5vh, 3rem);
}
.strip-head { max-width: 46rem; }
.strip-head .t-label { display: block; margin-bottom: 0.85rem; }
.strip-head .t-h2 { margin-bottom: 0.75rem; max-width: 24ch; }
.strip-head .t-meta { max-width: 52ch; color: var(--ink-3); }

.strip-control {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 1.25rem;
  padding: 0.9rem 0; border-block: var(--rule) solid var(--line);
}
.strip-control label { flex: 0 0 auto; }
.strip-control input[type="range"] {
  flex: 1 1 14rem; min-width: 10rem; appearance: none; background: none; height: 1.5rem; cursor: grab;
}
.strip-control input[type="range"]:active { cursor: grabbing; }
.strip-control input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--line);
}
.strip-control input[type="range"]::-moz-range-track { height: 2px; background: var(--line); }
.strip-control input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 12px; height: 22px; background: var(--signal);
  margin-top: -10px; border: 0; border-radius: 1px;
}
.strip-control input[type="range"]::-moz-range-thumb {
  width: 12px; height: 22px; background: var(--signal); border: 0; border-radius: 1px;
}
.stripstate {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--signal); min-width: 15rem; text-align: right;
}

/* ---- the stage: live page | transcript ------------------------------------ */
.stage {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border: var(--rule) solid var(--line); background: var(--bg-sunk);
}
@media (min-width: 60rem) {
  .stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.demo {
  background: oklch(0.99 0.008 70); color: oklch(0.22 0.02 40);
  font-family: var(--sans); overflow: hidden; min-height: 27rem;
}
.demo-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.2rem; border-bottom: 1px solid oklch(0.9 0.01 70);
}
.demo-logo { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.demo-icons { display: flex; gap: 0.9rem; }
.demo-icon { font-size: 18px; line-height: 1; color: oklch(0.45 0.02 40); }
.demo-hero {
  background: linear-gradient(oklch(0.42 0.06 40), oklch(0.3 0.05 35));
  color: oklch(0.98 0.01 70); padding: 2.1rem 1.2rem; text-align: center;
}
.demo-kicker { margin: 0 0 0.3rem; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.82; }
.demo-title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.demo-body { padding: 1.3rem 1.2rem 1.6rem; }
.demo-h { margin: 0 0 0.8rem; font-size: 19px; font-weight: 700; }
.demo-menuimg, .demo-contactimg {
  position: relative; background: oklch(0.96 0.012 70);
  border: 1px solid oklch(0.89 0.012 70); padding: 0.9rem 1rem; margin-bottom: 0.9rem;
}
.demo-menuimg-inner { display: grid; gap: 0.15rem; font-size: 13px; }
.demo-menuimg-inner b { margin-top: 0.4rem; font-size: 11px; letter-spacing: 0.12em; }
.demo-menuimg-inner b:first-child { margin-top: 0; }
.demo-contactimg { display: grid; gap: 0.15rem; font-size: 14px; font-weight: 600; }
.demo-imgtag {
  position: absolute; right: 0.35rem; bottom: 0.3rem;
  font-family: var(--mono); font-size: 9px; color: oklch(0.6 0.02 60);
}
.demo-p { margin: 0 0 0.9rem; font-size: 14px; }
.demo-cta {
  display: inline-block; background: oklch(0.48 0.13 35); color: oklch(0.99 0.01 70);
  padding: 0.6rem 1.2rem; font-weight: 600; font-size: 14px;
}

/* stripped state: an element the machine never receives */
.demo [data-strip].gone {
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px,
    color-mix(in oklab, var(--sev-critical) 22%, transparent) 5px,
    color-mix(in oklab, var(--sev-critical) 22%, transparent) 6px);
  color: transparent !important;
  border-color: color-mix(in oklab, var(--sev-critical) 40%, transparent) !important;
  position: relative;
  transition: color var(--t-long) var(--ease), background var(--t-long) var(--ease),
              opacity var(--t-long) var(--ease);
}
.demo [data-strip].gone > *, .demo [data-strip].gone .demo-imgtag { opacity: 0; transition: opacity var(--t-long) var(--ease); }
.demo [data-strip].gone.demo-hero { background-image: none; background-color: oklch(0.93 0.01 60); }
.demo [data-strip].gone.demo-cta { background: transparent; }
.demo [data-strip] { transition: color var(--t-long) var(--ease), background var(--t-long) var(--ease); }

/* ---- transcript ------------------------------------------------------------ */
.transcript {
  border-top: var(--rule) solid var(--line); padding: 1.1rem 1.2rem 1.4rem;
  background: var(--bg-sunk); min-height: 12rem;
}
@media (min-width: 60rem) {
  .transcript { border-top: 0; border-left: var(--rule) solid var(--line); }
}
.transcript-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-bottom: 0.7rem; border-bottom: var(--rule) solid var(--line-soft);
}
.transcript-count { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.transcript-list {
  list-style: none; margin: 0.85rem 0 0; padding: 0;
  font-family: var(--mono); font-size: 12px; line-height: 1.75;
  display: grid; gap: 0.1rem;
}
.transcript-list li { color: var(--ink-2); display: flex; gap: 0.6rem; }
.transcript-list li::before {
  content: attr(data-i); color: var(--ink-4); flex: 0 0 1.6rem; text-align: right;
  font-variant-numeric: tabular-nums;
}
.transcript-list li.bad { color: var(--sev-critical); }
.transcript-list li.bad::before { color: color-mix(in oklab, var(--sev-critical) 60%, var(--ink-4)); }
.transcript-list li.empty { color: var(--ink-4); font-style: italic; }

.strip-verdict {
  margin: 1.25rem 0 0; font-size: 15px; color: var(--ink-2);
  max-width: 56ch; min-height: 3rem;
}
.strip-verdict b { color: var(--ink); font-weight: 600; }

/* ---- argument + facts ------------------------------------------------------ */
.argument, .nots {
  border-top: var(--rule) solid var(--line);
  padding: clamp(2.5rem, 7vh, 4.5rem) 0;
}
.arg-grid { display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .arg-grid { grid-template-columns: 13rem minmax(0, 1fr); } }
.arg-grid .t-lead { margin: 0 0 1rem; max-width: 48ch; }
.arg-grid p { margin: 0 0 0.9rem; max-width: var(--measure); color: var(--ink-2); }
.arg-grid p:last-child { margin-bottom: 0; }

.facts {
  margin-top: clamp(2rem, 5vh, 3rem);
  border-top: var(--rule) solid var(--line);
}
/* A specification table, not a card grid. Four pixel-identical cells in a row is
   the card-grid tell; a spec table is also what an instrument actually ships. The
   lead figure gets its own row and more air, so the rhythm is uneven on purpose. */
.fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem 2rem;
  padding: 1.15rem 0;
  border-bottom: var(--rule) solid var(--line-soft);
  align-items: baseline;
}
@media (min-width: 50rem) {
  .fact { grid-template-columns: 9.5rem minmax(0, 1fr); }
  .fact.lead { grid-template-columns: 13rem minmax(0, 1fr); padding: 2rem 0 2.1rem; }
}
.fact:last-child { border-bottom: 0; }
.fact-n {
  font-size: 26px; font-weight: 700; letter-spacing: -0.03em;
  line-height: 1; color: var(--ink); font-stretch: 92%;
}
.fact.lead .fact-n { font-size: clamp(34px, 6vw, 56px); color: var(--signal); }
.fact-s { font-size: 14px; color: var(--ink-3); line-height: 1.55; max-width: 62ch; }
.fact.lead .fact-s { font-size: 15px; color: var(--ink-2); }

.notlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.notlist li { color: var(--ink-2); max-width: 58ch; padding-left: 1.1rem; border-left: 2px solid var(--line); }
.notlist b { color: var(--ink); font-weight: 600; }

/* ---- report ---------------------------------------------------------------- */
.report { border-top: var(--rule) solid var(--line); padding: clamp(2.5rem, 7vh, 4rem) 0 0; }
.report[hidden] { display: none; }

.rep-head { display: grid; gap: 1.25rem; }
.rep-url { font-family: var(--mono); font-size: 13px; color: var(--ink-3); word-break: break-all; }
.scores { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule) solid var(--line); }
.scorecell { padding: 1.3rem 1.4rem 1.5rem; }
.scorecell + .scorecell { border-left: var(--rule) solid var(--line); }
.scorecell .t-label { display: block; margin-bottom: 0.5rem; }
.score {
  font-size: clamp(44px, 9vw, 76px); font-weight: 700; letter-spacing: -0.04em;
  line-height: 0.9; font-stretch: 88%; display: block;
}
.score .of { font-size: 0.28em; font-weight: 400; color: var(--ink-4); letter-spacing: 0; }
.score.s-good { color: var(--good); }
.score.s-mid  { color: var(--sev-moderate); }
.score.s-bad  { color: var(--sev-critical); }
.scorecell .t-meta { margin: 0.5rem 0 0; color: var(--ink-4); }

.tallies { display: flex; gap: 0; flex-wrap: wrap; border: var(--rule) solid var(--line); border-top: 0; }
.tally { flex: 1 1 7rem; padding: 0.9rem 1rem; border-right: var(--rule) solid var(--line); }
.tally:last-child { border-right: 0; }
.tally .n { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tally .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-4); display: block; margin-top: 0.3rem; }
.tally.critical .n { color: var(--sev-critical); }
.tally.serious  .n { color: var(--sev-serious); }
.tally.moderate .n { color: var(--sev-moderate); }
.tally.minor    .n { color: var(--ink-3); }

.rep-cols { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); margin-top: 2rem; border-top: var(--rule) solid var(--line); }
@media (min-width: 64rem) { .rep-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.rep-col { padding: 1.5rem 0; }
@media (min-width: 64rem) {
  .rep-col + .rep-col { border-left: var(--rule) solid var(--line); padding-left: 2rem; }
}
.rep-col > .t-label { display: block; margin-bottom: 1rem; }

.finding { border-top: var(--rule) solid var(--line-soft); padding: 1.1rem 0; }
.finding:first-of-type { border-top: 0; }
.finding-top { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; margin-bottom: 0.4rem; }
.chip {
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 0.15rem 0.4rem; border: 1px solid currentColor;
}
.chip.critical { color: var(--sev-critical); }
.chip.serious  { color: var(--sev-serious); }
.chip.moderate { color: var(--sev-moderate); }
.chip.minor    { color: var(--ink-4); }
.finding-wcag { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.finding-count { font-family: var(--mono); font-size: 11px; color: var(--ink-4); margin-left: auto; }
.finding-msg { margin: 0 0 0.45rem; font-weight: 600; color: var(--ink); }
.finding-why { margin: 0 0 0.7rem; font-size: 13px; color: var(--ink-3); max-width: 62ch; }
.finding-code {
  font-family: var(--mono); font-size: 11.5px; background: var(--bg-sunk);
  border: var(--rule) solid var(--line-soft); padding: 0.55rem 0.7rem;
  overflow-x: auto; white-space: pre; color: var(--ink-2); margin: 0 0 0.5rem;
}
.finding-fix { display: grid; gap: 0.3rem; }
.finding-fix .t-label { font-size: 10px; }
.finding-fix .finding-code { border-left: 2px solid var(--good); color: var(--ink); }

.srlist { font-family: var(--mono); font-size: 12px; line-height: 1.7; display: grid; gap: 0.05rem; list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow-y: auto; }
.srlist li { display: flex; gap: 0.5rem; color: var(--ink-2); }
.srlist li.bad { color: var(--sev-critical); }
.srlist .mark { flex: 0 0 0.8rem; color: var(--ink-4); }

.limits { border-top: var(--rule) solid var(--line); margin-top: 2rem; padding: 1.4rem 0 0; }
.limits ul { margin: 0.8rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.limits li { font-size: 13px; color: var(--ink-3); max-width: 68ch; }

/* ---- loading / empty / error states, per design-craft §8 ------------------- */
.state { padding: 2.5rem 0; display: grid; gap: 0.6rem; }
.state .t-label { color: var(--signal); }
.state p { margin: 0; color: var(--ink-3); max-width: 52ch; }
.bar { height: 2px; background: var(--line); overflow: hidden; margin-top: 0.9rem; max-width: 22rem; }
.bar i { display: block; height: 100%; width: 35%; background: var(--signal); animation: slide 1.15s var(--ease) infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .bar i { animation: none; width: 100%; opacity: 0.5; } }
.state.error .t-label { color: var(--sev-critical); }

/* ---- site crawl ------------------------------------------------------------ */
.upsell {
  border-top: var(--rule) solid var(--line);
  margin-top: 2rem; padding: 1.6rem 0 0;
  display: grid; gap: 0.7rem; justify-items: start;
}
.upsell p { margin: 0; max-width: 58ch; color: var(--ink-2); }
.upsell b { color: var(--ink); font-weight: 600; }
.upsell button {
  background: var(--signal); color: var(--n-00); border: 0;
  padding: 0.7rem 1.3rem; font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
:root[data-theme="light"] .upsell button { color: var(--n-99); }
.upsell button:hover:not(:disabled) { background: var(--ink); color: var(--bg); }

/* a template fault is the headline finding, so it is marked as one */
.finding.template { border-left: 2px solid var(--signal); padding-left: 0.9rem; }

.pagelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.pagelist li {
  display: flex; gap: 0.7rem; align-items: baseline;
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  padding: 0.3rem 0; border-bottom: var(--rule) solid var(--line-soft);
}
.pagelist li:last-child { border-bottom: 0; }
.pagelist li span:last-child { word-break: break-all; }
.pl-score {
  flex: 0 0 2.2rem; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--ink-3);
}
.pl-score.s-good { color: var(--good); }
.pl-score.s-mid  { color: var(--sev-moderate); }
.pl-score.s-bad  { color: var(--sev-critical); }
.pagelist li.bad { color: var(--ink-4); }

/* The first report column sat flush against the divider — the finding count read
   as clipped because its right edge and the column's were the same pixel. */
@media (min-width: 64rem) {
  .rep-cols > .rep-col:first-child { padding-right: 2rem; }
}
.finding-top { min-width: 0; }
.finding-count { flex: 0 0 auto; }

/* A "fix" is usually a sentence, not code. Making the reader scroll sideways to
   finish reading the instruction is worse than letting it wrap. Real markup
   snippets (.finding > .finding-code) still scroll, because breaking a tag is worse. */
.finding-fix .finding-code {
  white-space: pre-wrap;
  overflow-x: visible;
  word-break: break-word;
}

/* ---- share row ------------------------------------------------------------- */
.sharerow { display: grid; gap: 0.5rem; justify-items: start; margin-top: 0.4rem; }
.sharerow .t-meta { margin: 0; max-width: 58ch; color: var(--ink-4); }
.sharerow .err { color: var(--sev-critical); }
button.ghost {
  background: none; border: var(--rule) solid var(--line); color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
button.ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-4); }
.upsell .sharerow a.linkish { font-family: var(--mono); font-size: 13px; word-break: break-all; }