/* Qream Site Audit: styled after theqream.com (black + deep purple, acid-lime accent, bold uppercase Inter).
   Colors are tokens so the light and dark themes share every rule below. */
:root {
  --lime: #9bff00;
  --lime-hover: #b8ff4d;
  --on-lime: #000;
  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 72px;
  --font: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07050d;
  --glow-1: rgba(123, 77, 255, 0.32);
  --glow-2: rgba(32, 15, 65, 0.85);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.68);
  --faint: rgba(255, 255, 255, 0.46);
  --accent: #9bff00;
  --card: rgba(255, 255, 255, 0.045);
  --card-2: rgba(255, 255, 255, 0.085);
  --tint: rgba(255, 255, 255, 0.06);
  --tint-2: rgba(255, 255, 255, 0.1);
  --sunken: rgba(0, 0, 0, 0.28);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.5);
  --header-bg: rgba(7, 5, 13, 0.78);
  --hero: linear-gradient(135deg, rgba(32, 15, 65, 0.95), rgba(18, 8, 38, 0.9));
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --good: #9bff00; --ok: #ffb547; --bad: #ff6b6b;
  --good-bg: rgba(155, 255, 0, 0.12); --ok-bg: rgba(255, 181, 71, 0.14); --bad-bg: rgba(255, 107, 107, 0.14);
  --good-ink: #d4ff99; --ok-ink: #ffd9a0; --bad-ink: #ffb3b3;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f3fa;
  --glow-1: rgba(123, 77, 255, 0.16);
  --glow-2: rgba(155, 255, 0, 0.12);
  --ink: #140a2b;
  --muted: rgba(20, 10, 43, 0.7);
  --faint: rgba(20, 10, 43, 0.52);
  --accent: #5b2fe0;
  --card: #ffffff;
  --card-2: #f7f5fc;
  --tint: rgba(20, 10, 43, 0.05);
  --tint-2: rgba(20, 10, 43, 0.08);
  --sunken: #faf9fd;
  --line: rgba(20, 10, 43, 0.12);
  --line-strong: rgba(20, 10, 43, 0.55);
  --header-bg: rgba(245, 243, 250, 0.85);
  --hero: linear-gradient(135deg, #ffffff, #efeafc);
  --shadow: 0 16px 40px rgba(40, 20, 90, 0.14);
  --good: #2f7d00; --ok: #a35c00; --bad: #c62828;
  --good-bg: #e9f7d9; --ok-bg: #fff1dc; --bad-bg: #fde8e8;
  --good-ink: #245f00; --ok-ink: #7a4300; --bad-ink: #9b1c1c;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 700px at 85% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, var(--glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
h1, h2 { text-transform: uppercase; }
code { font-family: var(--mono); font-size: 0.82em; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--on-lime); padding: 8px 12px; z-index: 20; font-weight: 700; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

.tape {
  display: inline-block; background: var(--lime); color: var(--on-lime); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; padding: 4px 10px 3px; line-height: 1.2;
}

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; min-height: var(--header-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 24px;
  padding: 12px clamp(16px, 4vw, 40px); background: var(--header-bg); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand-q { color: var(--accent); font-weight: 900; font-size: 22px; letter-spacing: -0.04em; }
.brand .tape { font-size: 12px; }
.modes { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; justify-self: start; background: var(--tint); }
.modes a {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font: 700 13px/1 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.modes a:hover { color: var(--ink); }
.modes a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  font: 700 12px/1 var(--font); letter-spacing: 0.06em; padding: 10px 12px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; min-width: 40px;
}
.lang-switch button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.online {
  display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px;
  font: 700 12px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.online:hover { border-color: var(--good); }
.online i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer; padding: 0;
}
.icon-btn:hover { background: var(--tint-2); }
.icon-btn svg { width: 18px; height: 18px; }
:root[data-theme="light"] .icon-sun, :root[data-theme="dark"] .icon-moon { display: none; }

main { max-width: 1200px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 40px) 96px; }

button { font: inherit; cursor: pointer; }
.btn-primary {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; border: 0; border-radius: 0;
  padding: 14px 22px; background: var(--lime); color: var(--on-lime); white-space: nowrap;
}
.btn-primary:hover { background: var(--lime-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: wait; }
.btn-ghost {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; border: 1px solid var(--line); border-radius: 0;
  padding: 13px 18px; background: transparent; color: var(--ink); white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--ink); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 12px; }

/* ---------- start screens ---------- */
.start h1 { font-size: clamp(36px, 6vw, 76px); margin: 8px 0 20px; max-width: 14ch; }
.lead { color: var(--muted); max-width: 62ch; font-size: 18px; margin: 0; }
.audit-form { margin: 36px 0 56px; max-width: 760px; }
.field-label { font-weight: 700; display: block; margin-bottom: 10px; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; }
.audit-form .row { display: flex; }
.text-input {
  flex: 1; min-width: 0; width: 100%; font: 500 18px var(--font); padding: 16px 18px; border: 1px solid var(--line);
  border-radius: 0; background: var(--tint); color: var(--ink);
}
.audit-form .row .text-input { border-right: 0; }
.text-input::placeholder { color: var(--faint); }
.text-input:focus { outline: none; border-color: var(--accent); }
.hint { color: var(--faint); font-size: 14px; margin: 10px 0 0; }
.form-error { color: var(--bad); min-height: 1.5em; margin: 8px 0 0; }
.recent h2 { font-size: 18px; letter-spacing: 0.02em; margin: 0 0 14px; }
.recent-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.recent-list a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); text-decoration: none; min-width: 0;
}
.recent-list a:hover { background: var(--card-2); }
.recent-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.recent-list time, .recent-meta { color: var(--muted); font-size: 14px; white-space: nowrap; }
.score-pill { min-width: 44px; text-align: center; font-weight: 800; padding: 3px 8px; font-size: 14px; border-radius: 999px; flex: none; }
.score-pill.good { background: var(--good-bg); color: var(--good); }
.score-pill.ok { background: var(--ok-bg); color: var(--ok); }
.score-pill.bad { background: var(--bad-bg); color: var(--bad); }
.score-pill.na { background: var(--tint-2); color: var(--muted); }

/* ---------- progress ---------- */
.progress h1 { font-size: clamp(28px, 5vw, 52px); overflow-wrap: anywhere; margin: 0 0 28px; }
.steps { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 640px; }
.step {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; color: var(--faint); font-weight: 600;
}
.step small { display: block; color: var(--muted); font-weight: 400; }
.step-icon { width: 20px; flex: none; text-align: center; font-weight: 800; }
.step.running { color: var(--ink); border-color: var(--accent); }
.step.running .step-icon { color: var(--accent); animation: spin 1.2s linear infinite; }
.step.done { color: var(--ink); }
.step.done .step-icon { color: var(--good); }
.step.error .step-icon { color: var(--bad); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .step.running .step-icon { animation: none; } }

/* ---------- rings ---------- */
.ring { position: relative; width: var(--size); height: var(--size); flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--tint-2); }
.ring.good .bar { stroke: var(--good); } .ring.good .ring-num { color: var(--good); }
.ring.ok .bar { stroke: var(--ok); } .ring.ok .ring-num { color: var(--ok); }
.ring.bad .bar { stroke: var(--bad); } .ring.bad .ring-num { color: var(--bad); }
.ring.na .ring-num { color: var(--faint); }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: calc(var(--size) * 0.3); letter-spacing: -0.03em; }

/* ---------- report ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.back { color: var(--ink); text-decoration: none; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; }

.report-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 36px; align-items: center; padding: 32px;
  background: var(--hero); border: 1px solid var(--line); border-radius: var(--radius);
}
.report-meta { min-width: 0; }
.report-head h1 { font-size: clamp(28px, 3.6vw, 46px); margin: 14px 0 8px; overflow-wrap: anywhere; }
.report-head p { margin: 4px 0; overflow-wrap: anywhere; }
.site-title { color: var(--muted); }
.overall { display: flex; align-items: center; gap: 20px; margin-top: 24px; }
.overall b { display: block; font-size: 24px; text-transform: uppercase; letter-spacing: -0.01em; }
.overall span { color: var(--muted); }
.shots { display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 1fr); gap: 14px; align-items: end; min-width: 0; }
.shot { margin: 0; min-width: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.shot figcaption { font-size: 12px; color: var(--faint); margin-top: 8px; text-align: center; text-transform: uppercase; letter-spacing: 0.08em; }

.score-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.score-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-weight: 700;
  text-align: center; font-size: 14px;
}
.score-card:hover { background: var(--card-2); }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; margin-top: 14px; min-width: 0; }
.panel h2 { font-size: clamp(22px, 3vw, 32px); margin: 0 0 18px; }
.panel h3 { font-size: 17px; margin: 30px 0 12px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.issues { list-style: none; padding: 0; margin: 0; }
.issues li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.issues li:first-child { border-top: 0; }
.issues p { margin: 4px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.issues .fix { color: var(--ink); }
.cat { align-self: start; text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 6px; }
.cat.accessibility { background: #c9b6ff; color: #1b0b47; }
.cat.performance { background: #7fe3ff; color: #032733; }
.cat.seo { background: var(--lime); color: #000; }
.cat.design { background: #ff8fd8; color: #3a0029; }
.cat.content { background: #ffd166; color: #3a2800; }
.fix b { font-weight: 700; }

.risk { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 12px; margin: 18px 0 12px; }
.risk strong { text-transform: uppercase; letter-spacing: 0.02em; }
.risk span { font-size: 14px; opacity: 0.9; }
.risk.high { background: var(--bad-bg); color: var(--bad-ink); }
.risk.medium { background: var(--ok-bg); color: var(--ok-ink); }
.risk.low { background: var(--good-bg); color: var(--good-ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 14px; padding: 5px 12px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.chip.critical, .chip.fail { background: var(--bad-bg); color: var(--bad-ink); border-color: transparent; }
.chip.serious { background: rgba(255, 140, 90, 0.16); color: var(--ok-ink); border-color: transparent; }
.chip.moderate, .chip.warn { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.chip.pass { background: var(--good-bg); color: var(--good-ink); border-color: transparent; }

.violation { border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; background: var(--sunken); }
.violation summary { display: flex; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; list-style: none; }
.violation summary::-webkit-details-marker { display: none; }
.violation summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 800; font-size: 18px; flex: none; }
.violation[open] summary::after { content: "–"; }
.v-title { font-weight: 700; flex: 1; min-width: 0; }
.v-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.impact { font-size: 11px; font-weight: 800; text-transform: uppercase; padding: 3px 7px; flex: none; }
.impact.critical { background: var(--bad); color: #000; }
.impact.serious { background: #ff8c5a; color: #000; }
.impact.moderate { background: var(--ok); color: #000; }
.impact.minor { background: var(--tint-2); color: var(--ink); }
.v-body { padding: 0 16px 16px; }
.nodes { list-style: none; padding: 0; display: grid; gap: 6px; }
.nodes li { background: var(--tint); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.nodes small { display: block; color: var(--muted); font-family: var(--mono); font-size: 12px; margin-top: 2px; }
.plain { padding-left: 20px; }
.plain li { margin: 6px 0; }
.manual li::marker { content: "☐  "; color: var(--accent); }
.disclaimer { font-size: 13px; color: var(--faint); margin-top: 26px; }
.ok-note { background: var(--good-bg); color: var(--good-ink); padding: 14px 16px; border-radius: 12px; }
.warn-note { background: var(--ok-bg); color: var(--ok-ink); padding: 14px 16px; border-radius: 12px; overflow-wrap: anywhere; }

.checks { list-style: none; padding: 0; margin: 0; }
.check { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.check:first-child { border-top: 0; }
.check p { margin: 3px 0 0; font-size: 15px; overflow-wrap: anywhere; color: var(--muted); }
.check p.fix { color: var(--ink); }
.check-icon { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; }
.check.pass .check-icon { background: var(--good-bg); color: var(--good); }
.check.warn .check-icon { background: var(--ok-bg); color: var(--ok); }
.check.fail .check-icon { background: var(--bad-bg); color: var(--bad); }

.strategies { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; margin-top: 16px; }
.strategy { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--sunken); min-width: 0; }
.strategy-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.strategy-head h3 { margin: 0; text-transform: uppercase; }
.strategy-head small { text-transform: none; font-weight: 500; }
.metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.metric { border-radius: 10px; padding: 10px 12px; background: var(--tint); min-width: 0; }
.metric span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.metric b { font-size: 19px; font-weight: 800; }
.metric.good b { color: var(--good); } .metric.ok b { color: var(--ok); } .metric.bad b { color: var(--bad); }
.field-note { font-size: 13px; color: var(--muted); margin: 16px 0 0; }

.slices { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.slices img { width: 100%; display: block; border-radius: 8px; border: 1px solid var(--line); }
.tokens-inline { display: flex; flex-wrap: wrap; gap: 6px; }
.tokens { display: grid; gap: 12px; margin: 0; }
.tokens > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; }
.tokens dt { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 4px; }
.tokens dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tok { background: var(--tint); padding: 4px 10px; border-radius: 6px; font-size: 14px; overflow-wrap: anywhere; }
.tok small { color: var(--faint); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; background: var(--tint); padding: 4px 8px 4px 4px; border-radius: 6px; }
.swatch i { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--line-strong); display: inline-block; }

.report-foot { text-align: center; color: var(--faint); font-size: 13px; margin-top: 36px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- internal QA ---------- */
.qa-form { display: grid; gap: 28px; margin: 36px 0 56px; max-width: 860px; }
.qa-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.qa-form legend { padding: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); background: var(--tint);
  cursor: pointer; font-weight: 600; font-size: 14px;
}
.seg label small { color: var(--faint); font-weight: 500; }
.seg input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { border-color: var(--accent); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--accent); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.custom-w { display: flex; align-items: center; gap: 8px; }
.custom-w input { width: 96px; padding: 9px 10px; font: 600 14px var(--font); border: 1px solid var(--line); background: var(--tint); color: var(--ink); }
.source-pane { margin-top: 12px; }
.seg input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.sub-label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 14px 0 8px; }
.tech-hint { margin: -2px 0 4px; }
.toggle { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); background: var(--tint); cursor: pointer; }
.toggle input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.toggle small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.toggle:has(input:checked) { border-color: var(--accent); }

/* responsive matrix */
.matrix-wrap { overflow-x: auto; }
.matrix { border-collapse: separate; border-spacing: 8px; margin: 0 -8px; }
.matrix th[scope="row"] { position: sticky; left: 0; background: var(--card); z-index: 1; }
.matrix th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: left; padding: 0 4px; white-space: nowrap; }
.matrix th[scope="row"] { font-size: 14px; color: var(--ink); padding-right: 8px; }
.cell-btn { display: grid; gap: 6px; width: 132px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); color: var(--ink); text-align: left; }
.cell-btn:hover, .cell-btn[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cell-thumb { height: 120px; overflow: hidden; border-radius: 6px; background: var(--tint); display: flex; justify-content: center; }
.cell-thumb img { height: auto; max-width: 100%; object-fit: cover; object-position: top; align-self: flex-start; }
.cell-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.mini { font-weight: 800; font-size: 12px; padding: 1px 7px; border-radius: 999px; }
.mini.fail { background: var(--bad-bg); color: var(--bad-ink); }
.mini.warn { background: var(--ok-bg); color: var(--ok-ink); }
.mini.pass { background: var(--good-bg); color: var(--good-ink); }
.cell-detail { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.cell-detail h3 { margin: 0 0 12px; font-size: 18px; text-transform: uppercase; }

/* test cases */
.cases { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.tcase { border: 1px solid var(--line); border-radius: 12px; background: var(--sunken); padding: 16px 18px; break-inside: avoid; }
.tcase-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tcase-head strong { flex: 1; min-width: 200px; }
.badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; flex: none; }
.badge.pass { background: var(--good-bg); color: var(--good-ink); }
.badge.warn { background: var(--ok-bg); color: var(--ok-ink); }
.badge.fail { background: var(--bad-bg); color: var(--bad-ink); }
.badge.skip { background: var(--tint-2); color: var(--muted); }
.vp { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.tcase-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; margin-top: 12px; font-size: 14px; }
.tcase-body h4 { margin: 0 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.tcase-body ol { margin: 0; padding-left: 18px; }
.tcase-body p { margin: 0; overflow-wrap: anywhere; }
.tcase-items { grid-column: 1 / -1; }
.tcase-items ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.tcase-items li { overflow-wrap: anywhere; }
.evidence { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.evidence a { display: block; width: 220px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.evidence img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: top; }
@media (max-width: 720px) { .tcase-body { grid-template-columns: 1fr; } }
.dropzone {
  display: grid; place-items: center; gap: 6px; text-align: center; padding: 32px 20px; border: 2px dashed var(--line);
  background: var(--tint); cursor: pointer; color: var(--muted); transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: var(--card-2); }
.dropzone strong { color: var(--ink); font-size: 16px; }
.dropzone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-chip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--accent); background: var(--card-2); }
.file-chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-chip button { border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 8px; }

.qa-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 28px 32px; background: var(--hero); border: 1px solid var(--line); border-radius: var(--radius); }
.qa-head > div { min-width: 0; }
.qa-head h1 { font-size: clamp(26px, 3.4vw, 42px); margin: 12px 0 8px; overflow-wrap: anywhere; }
.qa-head p { margin: 2px 0; color: var(--muted); }
.qa-tabs { display: flex; gap: 4px; margin: 20px 0 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.qa-tabs button {
  border: 0; background: transparent; color: var(--muted); padding: 12px 16px; font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.qa-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.qa-tabs .n { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--tint-2); margin-left: 4px; }

.cmp-controls { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-bottom: 16px; }
.cmp-controls .seg label { padding: 8px 12px; font-size: 13px; }
.cmp-field { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.cmp-field input[type="number"] { width: 70px; padding: 7px 8px; font: 600 13px var(--font); border: 1px solid var(--line); background: var(--tint); color: var(--ink); }
.cmp-field select { padding: 7px 8px; font: 600 13px var(--font); border: 1px solid var(--line); background: var(--tint); color: var(--ink); border-radius: 0; }
.cmp-field input[type="range"] { width: 140px; accent-color: var(--accent); }
.mismatch { margin-left: auto; font-weight: 800; padding: 6px 12px; border-radius: 999px; }
.mismatch.good { background: var(--good-bg); color: var(--good-ink); }
.mismatch.ok { background: var(--ok-bg); color: var(--ok-ink); }
.mismatch.bad { background: var(--bad-bg); color: var(--bad-ink); }
.cmp-viewport { max-height: calc(100vh - var(--header-h) - 120px); min-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: repeating-conic-gradient(var(--tint) 0 25%, transparent 0 50%) 0 0 / 20px 20px; }
.cmp-stage { position: relative; margin: 0 auto; }
.cmp-stage img, .cmp-stage canvas { display: block; width: 100%; height: auto; }
.cmp-design { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; transform-origin: 0 0; }
.cmp-stage.side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-stage.side .cmp-design { position: static; opacity: 1 !important; transform: none !important; clip-path: none !important; }
.cmp-stage.difference .cmp-design { mix-blend-mode: difference; opacity: 1 !important; }
.cmp-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
.cmp-caption { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 8px; }
.figma-embed { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--tint); }

.qa-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; align-items: start; }
.qa-shot { position: sticky; top: calc(var(--header-h) + 14px); max-height: calc(100vh - var(--header-h) - 28px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--tint); }
.qa-shot-inner { position: relative; }
.qa-shot img { display: block; width: 100%; height: auto; }
.marker { position: absolute; border: 2px solid var(--bad); background: rgba(255, 80, 80, 0.12); border-radius: 2px; pointer-events: none; min-width: 6px; min-height: 6px; }
.marker.warn { border-color: #ff9d00; background: rgba(255, 157, 0, 0.1); }
.marker.flash { animation: flash 1.2s ease-out 2; z-index: 2; box-shadow: 0 0 0 4px rgba(155, 255, 0, 0.6); }
@keyframes flash { 50% { box-shadow: 0 0 0 10px rgba(155, 255, 0, 0.15); } }
.qa-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.qa-filters label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.qa-group { margin-top: 18px; }
.qa-group:first-of-type { margin-top: 0; }
.qa-group h3 { margin: 0 0 4px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.qa-items { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.qa-items button {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--tint); color: var(--ink); font-size: 13px;
}
.qa-items button:hover:not(:disabled) { border-color: var(--accent); }
.qa-items button:disabled { cursor: default; }
.qa-items code { color: var(--muted); overflow-wrap: anywhere; }
.qa-items span { overflow-wrap: anywhere; }
.qa-more { font-size: 13px; color: var(--faint); margin: 6px 0 0; }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.checklist label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); cursor: pointer; }
.checklist input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
.checklist label:has(input:checked) span { color: var(--faint); text-decoration: line-through; }
.progress-bar { height: 8px; border-radius: 999px; background: var(--tint-2); overflow: hidden; margin: 0 0 16px; }
.progress-bar i { display: block; height: 100%; background: var(--lime); transition: width 0.2s; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .report-head { grid-template-columns: 1fr; padding: 22px; }
  .qa-split { grid-template-columns: 1fr; }
  .qa-shot { position: relative; top: 0; max-height: 70vh; }
  .panel { padding: 22px; }
}
@media (max-width: 720px) {
  :root { --header-h: 116px; }
  .topbar { grid-template-columns: 1fr auto; }
  .modes { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .modes a { flex: 1; justify-content: center; padding: 9px 10px; }
  main { padding-top: 32px; }
  .cmp-stage.side { grid-template-columns: 1fr; }
  .mismatch { margin-left: 0; }
  .qa-head { padding: 22px; }
}
@media (max-width: 600px) {
  .v-meta { display: none; }
  .issues li { grid-template-columns: 1fr; gap: 8px; }
  .cat { justify-self: start; }
  .audit-form .row { flex-direction: column; gap: 8px; }
  .audit-form .row .text-input { border-right: 1px solid var(--line); }
  .tokens > div { grid-template-columns: 1fr; gap: 6px; }
  .brand .tape { display: none; }
  .online span { display: none; }
  .online { padding: 12px; }
  .overall { gap: 14px; }
  .recent-list time, .recent-meta { display: none; }
  .toolbar-actions { width: 100%; }
  .toolbar-actions button { flex: 1; white-space: normal; padding: 11px 8px; font-size: 13px; line-height: 1.2; }
}

/* ---------- print / PDF ----------
   The server renders /r/<id>?pdf=1 and /qa/<id>?pdf=1 to A4 with headless Chrome (app/pdf.py);
   Ctrl+P uses the same rules. Light paper colors, a cover page, every section on a new page. */
.print-only { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm 16mm; }
  :root, :root[data-theme] {
    color-scheme: light;
    --ink: #14102a; --muted: #4a4560; --faint: #6b6780; --line: #dcd9e6; --line-strong: #8a86a0;
    --card: #fff; --card-2: #f7f6fb; --tint: #f3f2f8; --tint-2: #e6e4ef; --sunken: #fff; --accent: #5b2fe0;
    --good: #2f7d00; --ok: #a35c00; --bad: #c62828;
    --good-bg: #ecf8de; --ok-bg: #fff3e0; --bad-bg: #fdecea;
    --good-ink: #2a5a00; --ok-ink: #7a4300; --bad-ink: #8e1b1b;
    --hero: none; --shadow: none;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: #fff !important; }
  body { font-size: 10pt; line-height: 1.45; color: var(--ink); }
  .topbar, .toolbar, .no-print, .skip, .qa-tabs { display: none !important; }
  .print-only { display: block; }
  main { padding: 0; max-width: none; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, .panel-head, .eyebrow { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* cover */
  .report-head { display: block; background: none; border: 0; border-radius: 0; padding: 0; }
  .report-head h1 { font-size: 26pt; margin: 10pt 0 4pt; }
  .report-head .muted, .site-title { font-size: 10pt; }
  .overall { margin: 14pt 0 18pt; }
  .overall b { font-size: 16pt; }
  .shots { grid-template-columns: minmax(0, 3.3fr) minmax(0, 1fr); gap: 10pt; }
  .shot img { box-shadow: none; border-radius: 6pt; }
  .score-cards { display: none; }  /* the cover's summary table carries the scores */

  /* sections: each starts a page */
  .panel { break-before: page; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
  .panel h2, .panel-head { padding-bottom: 8pt; border-bottom: 2pt solid var(--ink); margin: 0 0 10pt; }
  .panel-head h2 { border: 0; padding: 0; margin: 0; }
  .panel h2 { font-size: 17pt; }
  .panel h3 { font-size: 11pt; margin: 16pt 0 6pt; }
  .check, .issues li, .violation, .strategy, .risk, .tokens > div, .nodes li, .metric, .step, .checklist li, figure { break-inside: avoid; }
  .check { padding: 7pt 0; gap: 8pt; grid-template-columns: 20px minmax(0, 1fr); }
  .check p, .issues p { font-size: 9pt; }
  .check-icon { width: 18px; height: 18px; font-size: 10px; }
  .issues li { padding: 8pt 0; }
  .risk { margin: 10pt 0 8pt; padding: 10pt 12pt; }
  .chip { font-size: 8.5pt; padding: 2pt 8pt; }
  .violation { background: #fff; }
  .violation summary { padding: 8pt 10pt; }
  .violation summary::after { display: none; }
  .v-body { padding: 0 10pt 10pt; }
  .nodes li { background: var(--tint); }
  .strategies { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .summary { margin-top: 22pt; break-inside: avoid; }
  .summary h2 { font-size: 13pt; margin: 0 0 6pt; }
  .summary table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .summary th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 6pt 8pt; border-bottom: 1.5pt solid var(--ink); }
  .summary td { padding: 6pt 8pt; border-bottom: 1px solid var(--line); }
  .summary td:first-child { font-weight: 700; }
  .qa-print .check { break-inside: auto; }
  .strategy { background: #fff; }
  .metric { background: var(--tint); }
  .slices { grid-template-columns: repeat(4, 1fr); gap: 6pt; }
  .slices img { max-height: 75mm; object-fit: cover; object-position: top; }
  .tokens > div { grid-template-columns: 110px minmax(0, 1fr); }
  .tok, .swatch { background: var(--tint); }
  .report-foot { margin-top: 18pt; }

  /* QA print layout (built by qa.js in ?pdf=1 mode) */
  .matrix { width: 100%; table-layout: fixed; border-spacing: 4px; margin: 0; }
  .matrix th[scope="row"] { width: 62px; font-size: 9pt; }
  .cell-btn { width: 100%; padding: 3px; gap: 3px; background: #fff; }
  .cell-thumb { height: 70px; }
  .cell-meta { font-size: 7.5pt; gap: 3px; }
  .mini { font-size: 7.5pt; }
  .tcase { padding: 10pt 12pt; background: #fff; }
  .tcase-body { font-size: 9pt; gap: 8pt 16pt; }
  .evidence a { width: 48%; }
  .evidence img { height: 55mm; }
  .qa-cover .chips { margin-top: 14pt; }
  .qa-meta { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4pt 12pt; margin: 14pt 0 0; font-size: 10pt; }
  .qa-meta dt { color: var(--muted); font-weight: 700; text-transform: uppercase; font-size: 8pt; letter-spacing: 0.06em; padding-top: 2pt; }
  .qa-meta dd { margin: 0; overflow-wrap: anywhere; }
  .qa-cover-shot { margin-top: 18pt; }
  .qa-cover-shot img { width: 100%; max-height: 120mm; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 6pt; }
}
.pp-head, .pp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6pt; }
.pp-head { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 10pt 0 4pt; }
.pp-row { margin-bottom: 6pt; break-inside: avoid; }
.pp-row img { width: 100%; display: block; border: 1px solid var(--line); }
.crops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8pt; margin-top: 8pt; }
.crops figure { margin: 0; }
.crops img { display: block; max-width: 100%; max-height: 60mm; border: 1px solid var(--line); background: var(--tint); }
.crops figcaption { font-size: 8pt; color: var(--muted); margin-top: 3pt; overflow-wrap: anywhere; }
.crops figcaption code { font-size: 7.5pt; }
.item-list { margin: 6pt 0 0; padding-left: 16pt; font-size: 8.5pt; color: var(--muted); }
.item-list li { margin: 2pt 0; overflow-wrap: anywhere; }
.passed-list { columns: 2; column-gap: 20pt; padding: 0; list-style: none; font-size: 9pt; }
.passed-list li { break-inside: avoid; padding: 2pt 0; }
.passed-list li::before { content: "✓ "; color: var(--good); font-weight: 800; }
.print-checklist { list-style: none; padding: 0; margin: 0; }
.print-checklist li { padding: 5pt 0; border-top: 1px solid var(--line); display: flex; gap: 8pt; }
.print-checklist li:first-child { border-top: 0; }
.print-checklist .box { flex: none; width: 13px; height: 13px; border: 1.5px solid var(--ink); border-radius: 2px; display: grid; place-items: center; font-size: 10px; font-weight: 900; margin-top: 2px; }