/* Kurrent · Lesesaal design system — tokens first, then components. */

:root {
  --paper: #ffffff;
  --panel: #ffffff;
  --ink: #000000;
  --ink-soft: #444444;
  --line: rgba(0,0,0,.14);
  --accent: #000000;          /* iron-gall sepia — interaction only */
  --accent-soft: rgba(230, 229, 254, .7);
  --ok: #2e7d4f;      --ok-bg: rgba(201,234,202,.5);      --ok-line: #9ed4a0;
  --warn: #9a6b00;    --warn-bg: #fdf3d8;    --warn-line: #e0b64f;
  --bad: #b3372c;     --bad-bg: #fbe7e4;     --bad-line: #d4756b;
  --radius: 6px;
  --shadow: none;
  --font-ui: Case, sans-serif, -apple-system, "system-ui";
  --font-display: Case, sans-serif, -apple-system, "system-ui";
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; display: block; }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; gap: 28px;
  height: 52px;
  padding: 0 clamp(20px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; }
a.brand:hover { text-decoration: none; color: var(--ink); }
.brand small {
  display: block; font-family: var(--font-ui); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-top: 2px;
}
.site-nav { display: flex; gap: 20px; margin-left: auto; }
.site-nav a { color: var(--ink-soft); font-weight: 500; font-size: 14px; padding: 4px 2px; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.gpu-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); }
.gpu-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #bbbbbb; }
.gpu-chip.online::before { background: var(--ok); }
.gpu-chip.offline::before { background: #bbbbbb; }

main { padding: 18px clamp(20px, 5vw, 56px) 80px; }

.page-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px); }
.page-lede { color: var(--ink-soft); max-width: 62ch; margin-top: 10px; font-size: 15.5px; }

/* ---------- specimen shelf (demo) ---------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; margin-top: 6px; }
.specimen {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; text-align: left; padding: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.specimen:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.07), 0 10px 28px rgba(0,0,0,.09); }
.specimen figure { background: rgba(230, 229, 254, .45); aspect-ratio: 3 / 4; overflow: hidden; }
.specimen figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.specimen .caption { padding: 12px 14px 14px; }
.specimen h3 { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.specimen .meta { color: var(--ink-soft); font-size: 12.5px; margin-top: 3px; }
.badge {
  display: inline-block; margin-top: 9px; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 99px; background: var(--ok-bg); color: var(--ok);
  border: 1px solid var(--ok-line);
}
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }

/* ---------- compare view ---------- */
.compare { display: none; margin-top: 4px; }
.compare.open { display: block; }
.compare-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.back-link { color: var(--ink-soft); font-size: 14px; }
.compare-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.compare-grid { display: grid; grid-template-columns: minmax(320px, 46%) 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }
.scan-frame {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px; position: sticky; top: 20px;
  max-height: calc(100vh - 60px); overflow: auto;
}
.text-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.text-panel .panel-bar {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.summary-line { font-size: 13px; color: var(--ink-soft); }
.summary-line b { color: var(--ink); font-weight: 600; }

.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented button { padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.segmented button + button { border-left: 1px solid var(--line); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.doc-text {
  font-family: var(--font-mono); font-size: 14.5px; line-height: 2.05;
  padding: 22px 24px 26px; white-space: pre-wrap; word-break: break-word;
}
.doc-text mark { background: none; color: inherit; border-radius: 3px; }
.doc-text mark.sub  { background: var(--warn-bg); box-shadow: inset 0 -2px 0 var(--warn-line); }
.doc-text mark.extra { color: var(--accent); text-decoration: line-through; opacity: .75; }
.doc-text mark.miss  { color: var(--accent); text-decoration: line-through; opacity: .6; }

.diff-legend { display: flex; gap: 18px; padding: 10px 24px 16px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.diff-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- product: upload ---------- */
.dropzone {
  margin-top: 36px; border: 1px dashed var(--line); border-radius: 6px;
  background: var(--panel); padding: clamp(36px, 6vw, 64px) 24px; text-align: center;
  color: var(--ink-soft); cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone strong { color: var(--ink); font-size: 17px; display: block; margin-bottom: 6px; }
.dropzone .zone-glyph { font-family: var(--font-display); font-size: 40px; color: #000; margin-bottom: 10px; }
.dropzone.disabled { pointer-events: none; opacity: .55; }

.caps-row { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; }
.cap { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); }
.cap input { width: 16px; height: 16px; accent-color: var(--accent); }
.cap small { color: var(--ink-soft); }

.offline-note {
  display: none; margin-top: 16px; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); color: var(--ink-soft); font-size: 14px;
}
body.gpu-offline .offline-note { display: block; }
body.gpu-offline .dropzone { pointer-events: none; opacity: .5; }
body.gpu-offline .caps-row { opacity: .5; pointer-events: none; }

/* ---------- journey timeline ---------- */
.journey { margin-top: 34px; display: none; }
.journey.open { display: block; }
.job-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.job-head h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.job-head .file { color: var(--ink-soft); font-size: 13.5px; }
.mock-chip { font-size: 11px; font-weight: 600; letter-spacing: .05em; color: var(--accent);
  border: 1px solid var(--accent-soft); background: var(--accent-soft); padding: 2px 8px; border-radius: 99px; }

.timeline { list-style: none; }
.timeline li {
  position: relative; padding: 0 0 18px 34px; color: var(--ink-soft); font-size: 14.5px;
}
.timeline li::before {
  content: ""; position: absolute; left: 9px; top: 22px; bottom: 0; width: 1.5px; background: var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline li::after {
  content: ""; position: absolute; left: 3px; top: 5px; width: 13px; height: 13px;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel);
}
.timeline li.active { color: var(--ink); }
.timeline li.active::after { border-color: var(--accent); animation: pulse-dot 1.2s ease-in-out infinite alternate; }
.timeline li.done { color: var(--ink); }
.timeline li.done::after {
  border-color: var(--ok); background: var(--ok);
  box-shadow: inset 0 0 0 2.5px var(--panel);
}
.timeline .fact { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
@keyframes pulse-dot { from { box-shadow: 0 0 0 0 rgba(0,0,0,.15); } to { box-shadow: 0 0 0 6px rgba(0,0,0,0); } }

/* ---------- result view ---------- */
.result { display: none; margin-top: 10px; }
.result.open { display: block; }
.result-grid { display: grid; grid-template-columns: minmax(320px, 46%) 1fr; gap: 24px; align-items: start; margin-top: 8px; }
@media (max-width: 900px) { .result-grid { grid-template-columns: 1fr; } }
.result-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 14px; }
.stat { font-size: 13px; color: var(--ink-soft); }
.stat b { color: var(--ink); }
.stat b.warn { color: var(--warn); } .stat b.bad { color: var(--bad); } .stat b.violet { color: var(--accent); }

.scan-wrap { position: relative; }
.scan-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wbox { fill: transparent; stroke: rgba(0,0,0,.28); stroke-width: 1; cursor: pointer; }
.overlay-off .wbox:not(.hl) { stroke: transparent; fill: transparent; }
.wbox.warn { fill: rgba(212,160,23,.14); stroke: rgba(154,107,0,.5); stroke-width: 1.2; }
.wbox.bad  { fill: rgba(179,55,44,.13); stroke: rgba(179,55,44,.55); stroke-width: 1.2; }
.wbox.hl   { fill: rgba(138,90,43,.22); stroke: #8a5a2b; stroke-width: 2; }

.transcript {
  font-family: var(--font-mono); font-size: 14.5px; line-height: 2.05;
  white-space: pre-wrap; word-break: break-word; padding: 22px 24px 26px;
}
.transcript .w { border-radius: 4px; padding: 1px 2px; margin: -1px -2px; cursor: pointer; }
.transcript .w:hover { background: var(--accent-soft); }
.transcript .w.warn { background: var(--warn-bg); box-shadow: inset 0 -2px 0 var(--warn-line); }
.transcript .w.bad  { background: var(--bad-bg); box-shadow: inset 0 -2px 0 var(--bad-line); }
.transcript .w.review { background: var(--bad-bg); box-shadow: inset 0 -2px 0 var(--bad-line); }
.mk-wash { background: var(--bad-bg); box-shadow: inset 0 -2px 0 var(--bad-line); border-radius: 3px; padding: 0 4px; }
.transcript .w.hl   { background: var(--accent-soft); outline: 2px solid var(--accent); }
.transcript .w.upgraded { animation: settle 2.4s ease; }
@keyframes settle { 0% { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
                    100% { background: transparent; box-shadow: none; } }

.tier-legend { display: flex; gap: 18px; padding: 10px 24px 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.g { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.sw.y { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.sw.r { background: var(--bad-bg); border: 1px solid var(--bad-line); }
.sw.a { background: var(--accent-soft); border: 1px solid var(--accent); }

.word-pop {
  position: fixed; z-index: 40; display: none; min-width: 230px; max-width: 320px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.16); padding: 14px 16px; font-size: 13px;
}
.word-pop h3 { font-family: var(--font-mono); font-size: 16px; margin-bottom: 8px; }
.word-pop table { width: 100%; border-collapse: collapse; }
.word-pop td { padding: 2.5px 0; color: var(--ink-soft); }
.word-pop td:last-child { text-align: right; color: var(--ink); font-weight: 500; }
.word-pop .cands { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.word-pop .cand { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12.5px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 6px;
  background: var(--ink); color: #fff; font-weight: 600; font-size: 14px;
}
.btn.secondary { background: var(--panel); color: var(--ink); border: 1px solid var(--line); }

.site-footer { padding: 26px clamp(20px, 5vw, 56px); border-top: 1px solid var(--line);
  color: var(--ink-soft); font-size: 12.5px; display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .grow { flex: 1; }

.adot { fill: #8a5a2b; opacity: 0; pointer-events: none; }
.adot.hl { opacity: 1; }
.scan-tools { position: absolute; top: 10px; right: 12px; z-index: 5; }
.scan-tools button { background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
  padding: 5px 11px; font-size: 12px; box-shadow: var(--shadow); }
.scan-tools button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* word spans inside demo text panel (same semantics as .transcript .w) */
.doc-text .w { border-radius: 4px; padding: 1px 2px; margin: -1px -2px; }
.doc-text .w.warn { background: var(--warn-bg); box-shadow: inset 0 -2px 0 var(--warn-line); }
.doc-text .w.bad  { background: var(--bad-bg); box-shadow: inset 0 -2px 0 var(--bad-line); }
.doc-text .w.hl   { background: var(--accent-soft); outline: 2px solid var(--accent); }