/* New Watermark: one stylesheet, no external resources (the CSP allows style-src 'self' only).
 * Mobile first. Calm paper-and-ink look: warm off-white, deep petrol accent, serif headings,
 * crop-mark corners on the drop zone. Every text colour pair is checked for WCAG AA in both colour
 * schemes by test/e2e/harness/ui-contrast.mjs, which reads the tokens below.
 * State is never shown by colour alone: tones also change the icon shape and carry words. */

:root {
  color-scheme: light dark;

  --bg: #f5f3ec;
  --bg-2: #ebe8dd;
  --surface: #fffefa;
  --ink: #18212b;
  --ink-2: #44505d;
  --line: #d6d0c0;
  --line-strong: #8d8676;
  --accent: #14505c;
  --accent-ink: #ffffff;
  --accent-hover: #0c3a44;
  --accent-tint: #e0edef;
  --focus: #0a3f4a;
  --hatch: rgba(20, 80, 92, 0.09);

  /* Result tones: text on tint, plus a border. Each tone also has its own icon shape. */
  --trusted-fg: #145a3a; --trusted-bg: #e5f2ea; --trusted-bd: #6fae90;
  --legacy-fg: #23477c;  --legacy-bg: #e7edf8;  --legacy-bd: #8aa4d0;
  --neutral-fg: #2f3b48; --neutral-bg: #ebeef1; --neutral-bd: #a4b0bb;
  --warning-fg: #6e4300; --warning-bg: #fbefd5; --warning-bd: #d2a64d;
  --alert-fg: #8a2820;   --alert-bg: #fbe8e4;   --alert-bd: #d4867c;
  --muted-fg: #474f59;   --muted-bg: #efede7;   --muted-bd: #bdb7a8;

  --chk-a: #f0eee8;
  --chk-b: #dcd9d0;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-head: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, "Noto Serif", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --measure: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11161b;
    --bg-2: #171d23;
    --surface: #1a2128;
    --ink: #e9edf0;
    --ink-2: #aab5c0;
    --line: #2c3640;
    --line-strong: #6f7d8a;
    --accent: #78c8d6;
    --accent-ink: #072a31;
    --accent-hover: #a2dde7;
    --accent-tint: #16343a;
    --focus: #9adbe6;
    --hatch: rgba(120, 200, 214, 0.08);

    --trusted-fg: #93dfb8; --trusted-bg: #14281e; --trusted-bd: #2f6d4c;
    --legacy-fg: #adc6f4;  --legacy-bg: #17233a;  --legacy-bd: #3b5b92;
    --neutral-fg: #cbd4dd; --neutral-bg: #1f272f; --neutral-bd: #475562;
    --warning-fg: #f0cb7e; --warning-bg: #2d2310; --warning-bd: #7d6020;
    --alert-fg: #f6aaa1;   --alert-bg: #33191a;   --alert-bd: #8a403a;
    --muted-fg: #b6bdc5;   --muted-bg: #1f2226;   --muted-bd: #4c5159;

    --chk-a: #232a31;
    --chk-b: #2b333b;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}
main { flex: 1 0 auto; width: min(100% - 2rem, 72rem); margin-inline: auto; padding-block: 1.5rem 3.5rem; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 8vw + 0.4rem, 3.6rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.5rem, 3vw + 0.8rem, 2.15rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
kbd { font-family: var(--font-mono); font-size: 0.85em; padding: 0.05em 0.4em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-2); padding: 0.1em 0.35em; border-radius: 5px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 0.5rem; top: -4rem; z-index: 10; background: var(--accent); color: var(--accent-ink); padding: 0.6rem 1rem; border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; }
.skip:focus { top: 0.5rem; }
.muted { color: var(--ink-2); }

/* ---------- Header and footer ---------- */
.bar { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header .bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; min-height: 44px; }
.brand:hover { color: var(--accent); }
.brand-mark { flex: none; display: block; }
.bm-bg { fill: var(--accent); }
.bm-ring { fill: none; stroke: var(--accent-ink); stroke-width: 2.6; }
.bm-dot { fill: var(--accent-ink); fill-opacity: 0.55; }
.bm-handle { stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.5rem; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 0.88rem; font-weight: 500; }
.site-header nav a:hover { color: var(--ink); background: var(--bg-2); }
body[data-path="/"] nav a[href="/"],
body[data-path="/how-to-tell-if-an-image-is-ai/"] nav a[href="/how-to-tell-if-an-image-is-ai/"],
body[data-path="/what-is-synthid/"] nav a[href="/what-is-synthid/"],
body[data-path="/what-are-content-credentials/"] nav a[href="/what-are-content-credentials/"],
body[data-path="/visible-ai-watermarks/"] nav a[href="/visible-ai-watermarks/"] { color: var(--ink); background: var(--bg-2); box-shadow: inset 0 -3px 0 var(--accent); }

.site-footer { flex: none; border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 1.5rem 2rem; font-size: 0.88rem; color: var(--ink-2); }
.site-footer p { margin: 0 0 0.6rem; max-width: 60rem; }
.site-footer p:last-child { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.55rem 1.3rem; border: 2px solid var(--accent); border-radius: 999px; background: transparent; color: var(--accent); font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.btn:hover { background: var(--accent-tint); color: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-small { min-height: 44px; padding: 0.4rem 1rem; font-size: 0.95rem; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Content pages: .prose .lead .note .faq .table-wrap .callout ---------- */
.prose { max-width: var(--measure); margin-inline: auto; }
.prose > h1 { margin-bottom: 1rem; }
.prose h2 { margin: 2.6rem 0 0.8rem; padding-top: 0.2rem; }
.prose h3 { margin: 1.8rem 0 0.5rem; }
.prose h4 { margin: 1.4rem 0 0.4rem; }
.prose p, .prose li { font-size: 1.05rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.prose li { margin-bottom: 0.4rem; }
.prose li > ul, .prose li > ol { margin-top: 0.4rem; }
.prose blockquote { margin: 1.5rem 0; padding: 0.2rem 0 0.2rem 1.1rem; border-left: 4px solid var(--line-strong); color: var(--ink-2); font-family: var(--font-head); font-size: 1.1rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.prose img { height: auto; border-radius: var(--radius-sm); }
.prose strong { font-weight: 650; }
.lead { font-family: var(--font-head); font-size: clamp(1.1rem, 0.9vw + 0.95rem, 1.3rem); line-height: 1.55; color: var(--ink); margin-bottom: 1.5rem; }
.prose .lead { font-size: clamp(1.1rem, 0.9vw + 0.95rem, 1.3rem); }
.note { margin: 1.5rem 0; padding: 0.9rem 1.1rem; border-left: 4px solid var(--line-strong); background: var(--bg-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 0.95rem; color: var(--ink-2); }
.note p, .note li { font-size: inherit; }
.note > :last-child { margin-bottom: 0; }
.callout { margin: 1.75rem 0; padding: 1.1rem 1.25rem; background: var(--accent-tint); border: 1px solid var(--accent); border-radius: var(--radius); color: var(--ink); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3, .callout h4 { margin-top: 0; }
.faq { margin: 1.5rem 0; }
.faq dt, .faq summary { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.faq dt { margin: 1.4rem 0 0.35rem; }
.faq dd { margin: 0 0 1rem; padding-left: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 0.9rem 2rem 0.9rem 0; position: relative; list-style: none; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.7rem; font-family: var(--font-body); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--accent); }
.faq details[open] > summary::after { content: "\2212"; }
.faq details > :not(summary) { padding-bottom: 0.5rem; }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 30rem; }
.table-wrap caption { text-align: left; padding: 0.7rem 0.9rem; font-weight: 650; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 0.65rem 0.9rem; border-top: 1px solid var(--line); }
.table-wrap thead th { background: var(--bg-2); border-top: 0; font-weight: 650; white-space: nowrap; }
.table-wrap tbody th { font-weight: 650; }

/* ---------- Home: hero ---------- */
.hero { position: relative; overflow: hidden; padding: 1.75rem 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); }
.hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 70%; pointer-events: none; background: repeating-radial-gradient(circle at 78% 62%, transparent 0 30px, var(--hatch) 30px 32px), repeating-linear-gradient(-38deg, transparent 0 15px, var(--hatch) 15px 16px); -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 95%); mask-image: linear-gradient(to left, #000 30%, transparent 95%); }
.hero > * { position: relative; }
.eyebrow { margin: 0 0 0.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.hero h1 { margin-bottom: 1rem; }
.hero .lead { max-width: 40rem; margin-bottom: 1.25rem; }
.privacy-line { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.4rem 0.9rem 0.4rem 0.7rem; background: var(--accent-tint); color: var(--ink); border-radius: 999px; font-weight: 600; font-size: 0.95rem; }
.privacy-line .icon { color: var(--accent); }

/* ---------- Home: checker ---------- */
.checker { margin-top: 1.25rem; }
.drop { position: relative; padding: 2.25rem 1.1rem 1.75rem; text-align: center; background: var(--surface); border: 2px dashed var(--line-strong); border-radius: calc(var(--radius) + 6px); transition: background-color 0.15s, border-color 0.15s; cursor: pointer; }
.drop.is-dragging { background: var(--accent-tint); border-color: var(--accent); }
.corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--accent); pointer-events: none; transition: width 0.15s, height 0.15s; }
.corner.tl { top: 12px; left: 12px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.corner.tr { top: 12px; right: 12px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 8px; }
.corner.bl { bottom: 12px; left: 12px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 8px; }
.corner.br { bottom: 12px; right: 12px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }
.drop.is-dragging .corner { width: 38px; height: 38px; }
.drop-art { width: 64px; height: 64px; margin: 0 auto 0.5rem; display: block; color: var(--accent); }
.drop-art .art-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.drop-art .art-fill { fill: currentColor; fill-opacity: 0.14; stroke: none; }
.drop-title { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; line-height: 1.25; margin: 0 0 0.9rem; }
.drop-hint { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--ink-2); }
.drop-fine { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--ink-2); }
.coarse-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .fine-only { display: none; }
  .coarse-only { display: inline; }
  .drop-hint { display: none; }
}
.notice { min-height: 0; margin: 0.9rem 0 0; font-weight: 600; color: var(--ink); }
.notice:empty { display: none; }
.checker-fine { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--ink-2); }
.noscript-note { margin: 1rem 0 0; padding: 0.9rem 1.1rem; border: 1px solid var(--warning-bd); background: var(--warning-bg); color: var(--warning-fg); border-radius: var(--radius-sm); font-weight: 600; }

/* ---------- Progress ---------- */
.progress { margin: 1.25rem 0 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.progress-title { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.6rem; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.stages li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 0.7rem; align-items: start; }
.stage-mark { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; border-radius: 50%; border: 2px solid var(--line-strong); }
.stages li[data-state="run"] .stage-mark { border-color: var(--line); border-top-color: var(--accent); animation: nw-spin 0.9s linear infinite; }
.stages li[data-state="done"] .stage-mark { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.stages li[data-state="skip"] .stage-mark, .stages li[data-state="fail"] .stage-mark { border-style: dashed; }
.stage-name { font-weight: 600; }
.stage-state { font-weight: 400; color: var(--ink-2); }
.stage-note { display: block; font-size: 0.9rem; color: var(--ink-2); }
.stage-note:empty { display: none; }
@keyframes nw-spin { to { transform: rotate(360deg); } }

/* ---------- Result ---------- */
.result { margin-top: 1.5rem; scroll-margin-top: 1rem; }
.result-grid { display: grid; gap: 1.25rem; align-items: start; }
.result-main { display: grid; gap: 1.5rem; min-width: 0; }
.result-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.preview { margin: 0; min-width: 0; }
.preview:empty { display: none; }
.preview-frame { display: flex; align-items: center; justify-content: center; min-height: 120px; max-height: 280px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: repeating-conic-gradient(var(--chk-a) 0% 25%, var(--chk-b) 0% 50%) 50% / 18px 18px; }
.preview-img { display: block; max-width: 100%; max-height: 280px; width: auto; height: auto; object-fit: contain; }
.preview-fallback { padding: 1.5rem 1rem; text-align: center; font-size: 0.92rem; color: var(--ink-2); background: var(--surface); width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.preview-cap { margin-top: 0.55rem; font-size: 0.88rem; color: var(--ink-2); line-height: 1.45; }
.cap-name { display: block; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.cap-meta { display: block; }

.verdict { --t-fg: var(--neutral-fg); --t-bg: var(--neutral-bg); --t-bd: var(--neutral-bd); }
.verdict[data-tone="trusted"] { --t-fg: var(--trusted-fg); --t-bg: var(--trusted-bg); --t-bd: var(--trusted-bd); }
.verdict[data-tone="legacy"] { --t-fg: var(--legacy-fg); --t-bg: var(--legacy-bg); --t-bd: var(--legacy-bd); }
.verdict[data-tone="warning"] { --t-fg: var(--warning-fg); --t-bg: var(--warning-bg); --t-bd: var(--warning-bd); }
.verdict[data-tone="alert"] { --t-fg: var(--alert-fg); --t-bg: var(--alert-bg); --t-bd: var(--alert-bd); }
.verdict[data-tone="muted"] { --t-fg: var(--muted-fg); --t-bg: var(--muted-bg); --t-bd: var(--muted-bd); }
.verdict:not(:empty) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.9rem; align-items: start; padding: 1.15rem 1.15rem 1.25rem; background: var(--t-bg); border: 1px solid var(--t-bd); border-left: 8px solid var(--t-bd); border-radius: var(--radius); color: var(--ink); }
.verdict-icon { width: 2rem; height: 2rem; margin-top: 0.1rem; color: var(--t-fg); stroke-width: 1.8; }
/* A field name such as "(Iptc4xmpExt:DigitalSourceType)" has no break opportunity; with a wide system font it
   pushed the page past 320 px. "anywhere" lets it wrap and keeps it out of the column's minimum width. */
.verdict-text { min-width: 0; overflow-wrap: anywhere; }
.verdict-headline { font-size: clamp(1.35rem, 2.2vw + 0.9rem, 1.85rem); color: var(--t-fg); margin-bottom: 0.45rem; }
.verdict-detail { margin: 0; font-size: 1.05rem; }
.verdict-note { margin: 0.6rem 0 0; font-weight: 600; }

.result-section h3 { font-size: 1.15rem; margin-bottom: 0.7rem; }
.tier { margin-bottom: 1.1rem; }
.tier:last-child { margin-bottom: 0; }
.tier-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin-bottom: 0.4rem; }
.tier-chip { display: inline-block; padding: 0.15rem 0.7rem; border-radius: 999px; border: 1px solid var(--c-bd); background: var(--c-bg); color: var(--c-fg); font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; }
.tier[data-tone="trusted"] { --c-fg: var(--trusted-fg); --c-bg: var(--trusted-bg); --c-bd: var(--trusted-bd); }
.tier[data-tone="legacy"] { --c-fg: var(--legacy-fg); --c-bg: var(--legacy-bg); --c-bd: var(--legacy-bd); }
.tier[data-tone="warning"] { --c-fg: var(--warning-fg); --c-bg: var(--warning-bg); --c-bd: var(--warning-bd); }
.tier[data-tone="neutral"] { --c-fg: var(--neutral-fg); --c-bg: var(--neutral-bg); --c-bd: var(--neutral-bd); }
.tier[data-tone="muted"] { --c-fg: var(--muted-fg); --c-bg: var(--muted-bg); --c-bd: var(--muted-bd); }
.tier-caption { margin: 0; font-size: 0.88rem; color: var(--ink-2); }
.finding-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.finding { padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c-bd); border-radius: var(--radius-sm); }
.finding-label { display: block; font-weight: 650; overflow-wrap: anywhere; }
.finding-text { display: block; color: var(--ink); overflow-wrap: anywhere; }
.empty-note { margin: 0; padding: 0.8rem 0.9rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-2); }

.check-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.check-row { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 0.7rem; padding: 0.8rem 1rem; border-top: 1px solid var(--line); }
.check-row:first-child { border-top: 0; }
.check-row .icon { margin-top: 0.15rem; }
.check-row[data-status="ran"] .icon { color: var(--trusted-fg); }
.check-row[data-status="failed"] .icon { color: var(--alert-fg); }
.check-row[data-status="skipped"] .icon, .check-row[data-status="not-available"] .icon { color: var(--muted-fg); }
.check-name { font-weight: 650; }
.check-status { display: inline-block; margin-left: 0.5rem; padding: 0 0.55rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-2); vertical-align: 0.1em; }
.check-note { display: block; margin-top: 0.1rem; font-size: 0.92rem; color: var(--ink-2); }
.retry { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.retry p { margin: 0; font-size: 0.92rem; color: var(--ink-2); flex: 1 1 14rem; }

.result-rest { margin-top: 1.5rem; display: grid; gap: 1.75rem; }
.limits { padding: 1rem 1.15rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); }
.limits p { margin: 0 0 0.5rem; }
.limits p:last-child { margin: 0; }
.limits-main { font-weight: 700; }
.limits-sub { font-size: 0.95rem; color: var(--ink-2); }

.router-intro { max-width: 46rem; color: var(--ink-2); }
.route-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.9rem; }
.route { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.route-name { font-size: 1.1rem; }
.route-why { margin: 0; }
.route-notes { margin: 0.2rem 0 0.4rem; padding-left: 1.1rem; font-size: 0.88rem; color: var(--ink-2); }
.route-notes li { margin: 0; }
.route-link { align-self: flex-start; margin-top: auto; }
.check-toggle { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.7rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; max-width: 46rem; }
.check-toggle input { width: 1.4rem; height: 1.4rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.toggle-help { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-2); max-width: 46rem; }

.tech { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tech > summary { cursor: pointer; padding: 0.9rem 1.1rem; font-weight: 650; min-height: 48px; border-radius: var(--radius); }
.tech[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.tech-body { padding: 0.5rem 1.1rem 1.1rem; }
.tech-group { margin-top: 1rem; }
.tech-group h4 { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.4rem; }
.kv { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.kv dt { margin: 0; padding: 0.5rem 0 0; font-size: 0.85rem; font-weight: 650; color: var(--ink-2); }
.kv dd { margin: 0; padding: 0 0 0.5rem; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.86rem; overflow-wrap: anywhere; }
.kv ul { margin: 0; padding-left: 1.1rem; }

/* ---------- Home: reading guide, visible marks, links ---------- */
.band { margin-top: 3rem; }
.band > h2 { margin-bottom: 0.75rem; }
.band-lead { max-width: 44rem; color: var(--ink-2); font-size: 1.05rem; }
.readme { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.readme li { padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c-bd); border-radius: var(--radius-sm); }
.readme .tier-chip { margin-bottom: 0.35rem; }
.readme p { margin: 0.2rem 0 0; }
.readme [data-tone="trusted"] { --c-fg: var(--trusted-fg); --c-bg: var(--trusted-bg); --c-bd: var(--trusted-bd); }
.readme [data-tone="legacy"] { --c-fg: var(--legacy-fg); --c-bg: var(--legacy-bg); --c-bd: var(--legacy-bd); }
.readme [data-tone="warning"] { --c-fg: var(--warning-fg); --c-bg: var(--warning-bg); --c-bd: var(--warning-bd); }
.readme [data-tone="neutral"] { --c-fg: var(--neutral-fg); --c-bg: var(--neutral-bg); --c-bd: var(--neutral-bd); }
.readme [data-tone="muted"] { --c-fg: var(--muted-fg); --c-bg: var(--muted-bg); --c-bd: var(--muted-bd); }

.marks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.mark { display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mark h3 { font-size: 1.15rem; }
.mark-art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.art-sky { fill: #cfe0e4; }
.art-hill-a { fill: #9fbfaa; }
.art-hill-b { fill: #6f9d86; }
.art-sun { fill: #f3dca0; }
.art-mark { fill: #ffffff; fill-opacity: 0.92; }
.art-badge { fill: #1c2a33; fill-opacity: 0.78; }
.art-label { fill: #ffffff; font-family: var(--font-body); font-size: 9px; font-weight: 600; }
.art-ink { fill: #ffffff; font-family: var(--font-head); font-size: 13px; font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .art-sky { fill: #31464e; }
  .art-hill-a { fill: #44695a; }
  .art-hill-b { fill: #2f5444; }
  .art-sun { fill: #b99f5d; }
}
.mark-facts { margin: 0; }
.mark-facts dt { margin: 0.5rem 0 0.1rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--ink-2); }
.mark-facts dd { margin: 0; }
.drawn-note { margin-top: 1rem; font-size: 0.88rem; color: var(--ink-2); }
.links-grid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.links-grid a { display: block; height: 100%; padding: 0.9rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.links-grid a:hover { border-color: var(--accent); background: var(--accent-tint); }
.links-grid strong { display: block; font-family: var(--font-head); font-size: 1.05rem; color: var(--accent); }
.links-grid span { display: block; margin-top: 0.15rem; font-size: 0.92rem; color: var(--ink-2); }

/* ---------- Wider screens ---------- */
@media (min-width: 40rem) {
  main { padding-block: 2rem 4.5rem; }
  .hero { padding: 2.75rem 2.5rem 2.25rem; }
  .drop { padding: 2.75rem 2rem 2.25rem; }
  .route-list { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
  .marks, .readme, .links-grid { grid-template-columns: repeat(2, 1fr); }
  .site-header nav a { font-size: 0.95rem; padding: 0 0.75rem; }
}
@media (min-width: 56rem) {
  .result-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.75rem; }
  .preview { position: sticky; top: 1rem; }
  .marks { grid-template-columns: repeat(3, 1fr); }
  .readme { grid-template-columns: repeat(2, 1fr); }
  .links-grid { grid-template-columns: repeat(3, 1fr); }
  .kv { grid-template-columns: minmax(10rem, 14rem) 1fr; }
  .kv dt { padding: 0.5rem 1rem 0.5rem 0; border-bottom: 1px solid var(--line); }
  .kv dd { padding: 0.5rem 0; }
}

/* ---------- Reduced motion, forced colours ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .stages li[data-state="run"] .stage-mark { border-color: var(--accent); border-style: dotted; }
}
@media (forced-colors: active) {
  .verdict:not(:empty), .finding, .route, .check-list, .tech, .limits, .drop, .mark, .progress { border: 1px solid CanvasText; }
  .btn { border: 2px solid ButtonText; }
  .corner { border-color: CanvasText; }
  .stage-mark { forced-color-adjust: none; border-color: CanvasText; }
  .stages li[data-state="done"] .stage-mark { background: Highlight; border-color: Highlight; }
}
@media print {
  .site-header nav, .drop, .progress { display: none; }
  body { background: #fff; color: #000; }
}