/* Ridge ships its own copies of DM Sans, DM Mono and Fraunces (SIL Open Font
   License 1.1 — see fonts/OFL.txt). They used to arrive through an @import of
   fonts.googleapis.com, which is render-blocking: nothing painted until a
   third party answered, so behind a proxy that drops the request the product
   showed a bare header and no content at all. Self-hosting also means no
   visitor IP reaches Google. DM Sans is a variable font, so one file per
   subset covers 400-700. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-sans-400-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-sans-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/dm-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/dm-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/fraunces-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-500-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/fraunces-500-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --bg:         #f4f6f1;
  --surface:    #ffffff;
  --surface-2:  #eef2ec;
  --surface-3:  #e4e9e2;
  --border:     #dce3da;
  --border-2:   #bcc8bf;
  --text:       #14201a;
  --text-2:     #47574e;
  --text-3:     #5d6d63;
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --accent:     #176b51;
  --accent-hover: #0f523e;
  --accent-bg:  #e6f4ed;
  --accent-border: #bfdbfe;
  --signal:     #d7ff64;
  --signal-ink: #183d2f;
  --on-fill:    #ffffff;
  --green:      #16784f;
  --green-bg:   #eaf7f0;
  --green-border: #bbf7d0;
  --red:        #b91c1c;
  --red-bg:     #fef2f2;
  --red-border: #fecaca;
  --amber:      #a1500b;
  --amber-bg:   #fffbeb;
  --amber-border: #fed7aa;
  --purple:     #7c3aed;
  --purple-bg:  #f5f3ff;
  --purple-border: #ddd6fe;
  --teal:       #0e7490;
  --teal-bg:    #ecfeff;
  --teal-border: #a5f3fc;
  --ink-surface: #10231b;
  --ink-surface-2: #183128;
  --on-ink:     #f5f8f2;
  --on-ink-muted: #b5c4ba;
  --on-ink-border: rgba(255,255,255,.1);
  --on-ink-soft: rgba(255,255,255,.06);
  --on-ink-accent: #9ee3c8;
  --ink-hero:   #1e3a5f;
  --ink-hero-2: #1a1916;
  --on-ink-blue:   #60a5fa;
  --on-ink-amber:  #fbbf24;
  --on-ink-purple: #d6c8ff;
  --on-ink-blue-wash:  rgba(37,99,235,.2);
  --on-ink-amber-wash: rgba(217,119,6,.2);
  --on-ink-purple-wash: rgba(124,58,237,.13);
  --on-ink-purple-border: rgba(214,200,255,.35);
  --dialog-backdrop: rgba(16,35,27,.58);
  --dialog-shadow: 0 24px 80px rgba(0,0,0,.24);
  --shadow-sm:  0 1px 2px rgba(15,23,42,0.04);
  --shadow-md:  0 8px 24px rgba(15,23,42,0.07);
  --radius:     12px;
  --radius-sm:  8px;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Visible only while focused: the first Tab stop jumps past the chrome. */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  padding: 9px 14px; border-radius: 8px;
  background: var(--accent); color: var(--on-fill);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus-visible { top: 10px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

html, body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(215,255,100,.12), transparent 24rem),
    var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }

/* ─── Animations ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate { animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-delay-1 { animation-delay: 0.05s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.10s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.15s; opacity: 0; }
.animate-delay-4 { animation-delay: 0.20s; opacity: 0; }

/* ─── Layout ─────────────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: rgba(244,246,241,0.88);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
  padding: 0 max(24px, calc((100vw - 1136px) / 2));
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; border-radius: var(--radius-sm); }
.topbar-brand:hover .brand-name { color: var(--accent); }
.topbar-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.brand-mark {
  width: 30px; height: 30px;
  background: var(--ink-surface);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--signal); font-size: 13px; font-weight: 600;
  font-family: 'DM Mono', monospace;
}

.brand-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--text); letter-spacing: -0.025em;
}

.brand-tag {
  display: inline-flex; font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--text-3);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px;
  background: var(--surface-2);
  border-radius: 4px; border: 1px solid var(--border);
}

.main { flex: 1; max-width: 1240px; margin: 0 auto; width: 100%; padding: 36px 32px 80px; }

/* ─── Upload Zone ────────────────────────────────────────────── */
.upload-section {
  max-width: 1120px; margin: 0 auto; padding-top: 54px;
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr);
  gap: clamp(42px, 7vw, 84px); align-items: start;
}
.upload-intro { min-width: 0; padding-top: 24px; }
.upload-workbench {
  min-width: 0; padding: 26px;
  border: 1px solid var(--border); border-radius: 22px;
  background: rgba(255,255,255,.94); box-shadow: 0 28px 70px rgba(16,35,27,.1);
}
.workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.workbench-kicker {
  display: block; margin-bottom: 3px; color: var(--accent);
  font: 600 9px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
}
.workbench-head h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.workbench-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-2); font: 500 9px 'DM Mono', monospace; white-space: nowrap;
}
.workbench-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }

.upload-eyebrow {
  margin-bottom: 14px; color: var(--accent);
  font: 600 11px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
}

.upload-headline {
  max-width: 620px; font-family: 'DM Sans', sans-serif;
  font-size: clamp(42px, 5vw, 58px); font-weight: 700;
  color: var(--text); letter-spacing: -0.045em;
  margin-bottom: 18px; line-height: 1.03;
}

.upload-sub { max-width: 48ch; color: var(--text-2); font-size: 15.5px; line-height: 1.7; margin-bottom: 28px; }

.upload-proof { display: grid; gap: 0; margin-bottom: 22px; border-top: 1px solid var(--border); }
.upload-proof div { display: grid; grid-template-columns: 128px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.upload-proof strong { color: var(--text); font-size: 12px; }
.upload-proof span { color: var(--text-3); font-size: 11.5px; line-height: 1.45; }

/* ─── File type pills ─────────────────────────────────────────── */
.format-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 2px 0; color: var(--text-3);
  font: 500 10px 'DM Mono', monospace; letter-spacing: .04em;
}
.format-line span { margin-right: 2px; text-transform: uppercase; letter-spacing: .08em; }
.format-line strong {
  padding: 2px 0; color: var(--text-2); font: inherit; border-bottom: 1px solid var(--border-2);
}

.analysis-mode {
  margin: 0 0 9px; padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2);
}
.analysis-mode-btn {
  min-width: 0; border: 1px solid transparent; border-radius: 9px; padding: 11px 14px;
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  background: transparent; color: var(--text-2); cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.analysis-mode-btn:hover, .analysis-mode-btn:focus-visible { color: var(--text); }
.analysis-mode-btn.active { color: var(--text); border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.analysis-mode-btn strong { display: block; flex: 0 0 auto; font-size: 13px; font-weight: 700; }
.analysis-mode-btn small { color: var(--text-3); font-size: 11.5px; font-weight: 400; line-height: 1.35; }
.analysis-mode-hint { margin: 0 0 16px; color: var(--text-3); font-size: 12px; text-align: left; }

.pill {
  font-family: 'DM Mono', monospace;
  font-size: 11px; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid; white-space: nowrap;
}

.pill-green  { background: var(--green-bg);  border-color: var(--green-border); color: var(--green); }
.pill-red    { background: var(--red-bg);    border-color: var(--red-border); color: var(--red); }
.pill-orange { background: var(--amber-bg);  border-color: var(--amber-border); color: var(--amber); }
.pill-blue   { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); }
.pill-purple { background: var(--purple-bg); border-color: var(--purple-border); color: var(--purple); }
.pill-teal   { background: var(--teal-bg);   border-color: var(--teal-border); color: var(--teal); }

/* ─── Dropzone ────────────────────────────────────────────────── */
.dropzone {
  border: 1.5px dashed var(--border-2);
  border-radius: 16px;
  padding: 38px 28px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--surface);
  position: relative;
}

.dropzone:hover, .dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.dropzone:has(input:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.dropzone.has-files { padding: 28px 24px; border-style: solid; }
.dropzone.is-comparing { background-image: linear-gradient(90deg, transparent 49.85%, var(--border) 50%, transparent 50.15%); }
.dropzone.is-comparing:not(.has-files) { background-image: none; }

.dropzone input[type="file"] {
  position: absolute; inset: 0; opacity: 0;
  cursor: pointer; width: 100%; height: 100%; z-index: 1;
}

.dropzone-icon {
  width: 44px; height: 44px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ink-surface); color: var(--signal);
  font: 600 13px 'DM Mono', monospace; transition: transform 0.2s;
}
.dropzone:hover .dropzone-icon { transform: translateY(-2px); }
.dropzone-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.dropzone-sub { font-size: 13px; color: var(--text-3); }

.upload-status {
  display: flex; align-items: flex-start; gap: 8px; min-height: 34px;
  padding: 9px 11px; color: var(--text-3); font-size: 11.5px; line-height: 1.4;
}
.upload-status-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--border-2); }
.upload-status.ready { color: var(--green); }
.upload-status.ready .upload-status-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.upload-status.error { color: var(--red); }
.upload-status.error .upload-status-dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-bg); }

.dropzone-filename {
  margin-top: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 12px; color: var(--accent);
  background: var(--accent-bg);
  padding: 4px 10px; border-radius: 4px;
  display: inline-block;
}

.question-input-wrap { margin-top: 16px; }
.input-field > label {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 2px 6px; color: var(--text-2); font-size: 12px; font-weight: 600;
}
.input-field > label span { color: var(--text-3); font: 9px 'DM Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }

.question-input {
  width: 100%; min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-family: 'DM Sans', sans-serif; font-size: 14px;
  outline: none; transition: border-color 0.2s;
}
.question-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.question-input::placeholder { color: var(--text-3); }

.analyze-btn {
  width: 100%; min-height: 46px; margin-top: 14px; padding: 12px 18px;
  background: var(--accent); color: var(--on-fill); border: none;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; letter-spacing: 0.01em;
}
.analyze-btn:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.analyze-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }

/* ─── Loading ────────────────────────────────────────────────── */
.loading-wrap {
  width: min(760px, 100%); margin: 54px auto 0; padding: 52px;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid var(--on-ink-border); border-radius: 24px;
  background: var(--ink-surface); color: var(--on-ink);
  box-shadow: 0 34px 90px rgba(16,35,27,.2); text-align: center;
}

.loading-orbit {
  width: 52px; height: 52px; padding: 6px; margin-bottom: 22px;
  border: 1px solid var(--on-ink-border); border-radius: 50%;
  background: var(--on-ink-soft); animation: spin 1.8s linear infinite;
}
.loading-orbit span { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(215,255,100,.12); }
.loading-eyebrow { color: var(--on-ink-accent); font: 9px 'DM Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.loading-title { margin-top: 7px; font: 600 31px 'Fraunces', serif; line-height: 1.2; }
.loading-file-count { max-width: 48ch; min-height: 40px; margin-top: 9px; color: var(--on-ink-muted); font-size: 13px; }
.loading-progress { width: 100%; height: 4px; margin: 24px 0 20px; overflow: hidden; border-radius: 999px; background: var(--on-ink-soft); }
.loading-progress > span { display: block; width: 25%; height: 100%; border-radius: inherit; background: var(--signal); transition: width .35s ease; }

.loading-steps { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: left; }

.loading-step {
  min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px;
  border: 1px solid var(--on-ink-border); border-radius: 10px;
  background: var(--on-ink-soft); color: var(--on-ink-muted); font-size: 10px; line-height: 1.25;
}
.loading-step > span {
  flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center;
  border: 1px solid var(--on-ink-border); border-radius: 50%; background: transparent;
  font: 9px 'DM Mono', monospace;
}
.loading-step strong { font-weight: 500; }
.loading-step.active { color: var(--on-ink); border-color: rgba(215,255,100,.34); background: rgba(215,255,100,.08); }
.loading-step.active > span { color: var(--ink-surface); border-color: var(--signal); background: var(--signal); }
.loading-step.complete { color: var(--on-ink-muted); }
.loading-step.complete > span { color: var(--ink-surface); border-color: var(--on-ink-accent); background: var(--on-ink-accent); }
.loading-step.complete > span { font-size: 0; }
.loading-step.complete > span::after { content: "✓"; font-size: 10px; }
.loading-trust { max-width: 58ch; margin-top: 26px; color: var(--on-ink-muted); font-size: 11px; }
.loading-cancel {
  margin-top: 14px; padding: 7px 12px; border: 0; background: transparent;
  color: var(--on-ink-muted); font: 500 12px 'DM Sans', sans-serif; cursor: pointer;
}
.loading-cancel:hover, .loading-cancel:focus-visible { color: var(--on-ink); }

/* ─── Error ──────────────────────────────────────────────────── */
.error-box {
  background: var(--red-bg);
  border: 1px solid var(--red-border); color: var(--red);
  border-radius: var(--radius-sm);
  padding: 14px 16px; font-size: 13px; margin-top: 16px;
}

/* ─── Dashboard ──────────────────────────────────────────────── */
.dashboard { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.dashboard > * { min-width: 0; }

.analysis-record {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.analysis-record summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 14px; cursor: pointer; list-style: none;
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.analysis-record summary::-webkit-details-marker { display: none; }
.analysis-record summary::before { content: "＋"; color: var(--accent); }
.analysis-record[open] summary::before { content: "−"; }
.analysis-record-summary { margin-left: auto; color: var(--text-3); text-align: right; }
.analysis-record-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; border-top: 1px solid var(--border); background: var(--border);
}
.analysis-record-item { min-width: 0; padding: 12px 14px; background: var(--surface); }
.analysis-record-item span {
  display: block; margin-bottom: 3px; color: var(--text-3);
  font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
}
.analysis-record-item strong {
  display: block; overflow-wrap: anywhere; color: var(--text-2); font-size: 12px; font-weight: 500;
}

.result-nav {
  position: sticky; top: 72px; z-index: 20;
  display: flex; gap: 4px; align-items: center; overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--border); border-radius: 999px;
  background: rgba(244,246,241,.94); backdrop-filter: blur(16px) saturate(140%);
}
.result-nav { scrollbar-width: none; }
.result-nav::-webkit-scrollbar { display: none; }
.result-nav a {
  flex: 0 0 auto; padding: 7px 12px; border-radius: 999px;
  color: var(--text-2); text-decoration: none; font-size: 11.5px; font-weight: 500;
}
.result-nav a:hover, .result-nav a:focus-visible { color: var(--accent); background: var(--surface); }
.result-nav a.active { color: var(--surface); background: var(--accent); box-shadow: none; }
#overviewSection, #evidenceSection, #qualitySection, #statsSection, #chartsSection, #corrSection, #askSection { scroll-margin-top: 112px; }

/* ─── Result Tiers ───────────────────────────────────────────── */
/* Four ranked bands replace twelve equally-weighted cards. Rank is carried by
   the numeral, the rule above each band and the order — not by decoration. */
#fileDashboard { display: flex; flex-direction: column; gap: 18px; }

.tier {
  min-width: 0; display: flex; flex-direction: column; gap: 18px;
  padding: 24px; border: 1px solid var(--border); border-radius: 18px;
  background: rgba(255,255,255,.82); box-shadow: 0 10px 36px rgba(16,35,27,.045);
}
.tier + .tier { padding-top: 24px; border-top: 1px solid var(--border); }

.tier-head { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.tier-heading { min-width: 0; flex: 1; }

.tier-index {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-surface); border-radius: 8px;
  background: var(--ink-surface);
  color: var(--signal); font: 600 10px 'DM Mono', monospace;
}

.tier-title { font: 700 18px 'DM Sans', sans-serif; letter-spacing: -.025em; line-height: 1.25; color: var(--text); }
.tier-note { margin-top: 2px; color: var(--text-2); font-size: 12px; line-height: 1.45; }

.tier-body { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tier-body > * { min-width: 0; }
/* Setting display above outranks the UA [hidden] rule; without this the
   collapsed tier renders open while its toggle still reads "Expand". */
.tier-body[hidden] { display: none; }

.tier-toggle {
  flex: 0 0 auto; padding: 6px 12px;
  border: 1px solid var(--border-2); border-radius: 7px;
  background: var(--surface); color: var(--text-2);
  font: 500 11.5px 'DM Sans', sans-serif; cursor: pointer;
}
.tier-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Collapsed, tier ③ still names everything inside it — one click, not a hunt. */
.tier-jump { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 38px; }
.tier-jump button {
  padding: 5px 11px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  font: 500 11.5px 'DM Sans', sans-serif; cursor: pointer;
}
.tier-jump button:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); }
.tier-jump button[hidden] { display: none; }
.tier.is-open .tier-jump { display: none; }

/* ─── Workspace: setup rail + results canvas ─────────────────── */
.workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.workspace-canvas { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.workspace-rail {
  position: sticky; top: 84px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 17px 16px 16px;
  border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 14px;
  background: rgba(255,255,255,.86); box-shadow: 0 10px 32px rgba(16,35,27,.05);
}
/* display above outranks the UA [hidden] rule — see .tier-body[hidden] */
.workspace-rail[hidden] { display: none; }

.rail-head { display: none; align-items: center; justify-content: space-between; gap: 8px; }
.rail-title { font: 600 12.5px 'DM Sans', sans-serif; color: var(--text); }
.rail-toggle {
  padding: 5px 11px; border: 1px solid var(--border-2); border-radius: 7px;
  background: var(--surface-2); color: var(--text-2);
  font: 500 11.5px 'DM Sans', sans-serif; cursor: pointer;
}
.rail-panel { display: flex; flex-direction: column; gap: 14px; }

.rail-group { display: flex; flex-direction: column; gap: 10px; }
.rail-group + .rail-group { padding-top: 14px; border-top: 1px solid var(--border); }
.rail-label {
  font: 500 9px 'DM Mono', monospace; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}

.rail-source strong { display: block; font: 600 13px 'DM Sans', sans-serif; overflow-wrap: anywhere; }
.rail-source span { display: block; margin-top: 2px; color: var(--text-2); font-size: 11.5px; }

.rail-field { display: flex; flex-direction: column; gap: 6px; }
.rail-field-label { color: var(--text-2); font: 500 11.5px 'DM Sans', sans-serif; }
.rail-field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-field .target-select { width: 100%; }
.rail-group .sheet-bar { flex-wrap: wrap; padding: 0; border: 0; background: none; }
.rail-hint { color: var(--text-2); font-size: 11px; line-height: 1.4; }
.rail-mini { padding: 0; border: 0; background: none; color: var(--accent); font: 500 11px 'DM Sans', sans-serif; cursor: pointer; }
.rail-mini:hover { text-decoration: underline; }

.rail-column-list {
  max-height: 220px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.rail-column { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.rail-column:hover { background: var(--surface-2); }
.rail-column input { flex: 0 0 auto; accent-color: var(--accent); }
.rail-column-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.rail-column-type { flex: 0 0 auto; color: var(--text-3); font: 9px 'DM Mono', monospace; text-transform: uppercase; }

.rail-foot { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.rail-rerun {
  padding: 10px 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--ink-surface); color: var(--on-ink);
  font: 600 12.5px 'DM Sans', sans-serif; cursor: pointer;
}
.rail-rerun:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: var(--surface); }
.rail-rerun.is-dirty { background: var(--accent); border-color: var(--accent); color: var(--on-fill); }
.rail-rerun.is-dirty:hover { background: var(--accent-hover); color: var(--on-fill); }

/* Stale results carry three signals — button, banner, canvas rule. None of them
   reduce contrast: degrading legibility to convey state would fail exactly the
   readers most likely to misread a stale number as a current one. */
.workspace-canvas.is-stale { padding-top: 17px; border-top: 3px solid var(--amber); }
.stale-banner {
  padding: 10px 14px; border: 1px solid var(--amber); border-radius: var(--radius-sm);
  background: var(--amber-bg); color: var(--text); font-size: 12.5px;
}
.stale-banner[hidden] { display: none; }

.exclusion-note { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.exclusion-note[hidden] { display: none; }
.exclusion-note summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  color: var(--text-2); font: 500 12px 'DM Sans', sans-serif; cursor: pointer; list-style: none;
}
.exclusion-note summary::-webkit-details-marker { display: none; }
.exclusion-note summary::before { content: "＋"; color: var(--accent); }
.exclusion-note[open] summary::before { content: "−"; }
.exclusion-list { padding: 0 14px 12px; color: var(--text-2); font-size: 12px; }
.exclusion-list ul { margin: 6px 0 0; padding-left: 18px; }

.structure-note {
  margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
}
.structure-note[hidden] { display: none; }
.structure-note summary {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  color: var(--text-2); font: 500 12px 'DM Sans', sans-serif; cursor: pointer; list-style: none;
}
.structure-note summary::-webkit-details-marker { display: none; }
.structure-note summary::before { content: "＋"; color: var(--accent); }
.structure-note[open] summary::before { content: "−"; }
/* An unsettled reading is not a footnote: it qualifies every number below it,
   so it carries the same weight as the stale-results banner. */
/* A clean read is a quiet confirmation, not an alert — it recedes, but it is
   there, so a checked file never looks like an unchecked one. */
.structure-note--clean { border-style: dashed; background: transparent; }
.structure-note--uncertain { border-color: var(--amber); background: var(--amber-bg); }
.structure-note--uncertain summary { color: var(--text); font-weight: 600; }
.structure-note--uncertain summary::before { content: "！"; color: var(--amber); }
.structure-detail { padding: 0 14px 12px; color: var(--text-2); font-size: 12px; }
.structure-detail ul { margin: 6px 0 0; padding-left: 18px; }
.structure-detail li { margin-bottom: 6px; }
.structure-detail code {
  display: inline-block; margin-top: 2px; padding: 1px 5px;
  border-radius: 4px; background: var(--surface); font-size: 11.5px; color: var(--text);
}
/* "Nothing qualified" is a finding of its own, so it is presented as one
   rather than as an absence the reader has to interpret. */
.evidence-empty {
  padding: 14px 16px; border: 1px dashed var(--border-2);
  border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2);
}
.evidence-empty strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 13px; }
.evidence-empty p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; }
.evidence-empty p:last-child { margin-bottom: 0; }

.structure-warning { margin: 0 0 8px; color: var(--text); font-weight: 500; }
.structure-fix {
  margin-left: 6px; padding: 1px 8px; border: 1px solid var(--border-2);
  border-radius: 999px; background: var(--surface); color: var(--accent);
  font: 500 11px 'DM Sans', sans-serif; cursor: pointer;
}
.structure-fix:hover { border-color: var(--accent); }

@media (max-width: 900px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace-rail { position: static; }
  .rail-head { display: flex; }
  .rail-panel { display: none; }
  .workspace-rail.is-open .rail-panel { display: flex; }
}

.result-overview {
  overflow: hidden; padding: 26px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: 0 8px 26px rgba(16,35,27,.045);
}
.result-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.result-overview-eyebrow {
  margin-bottom: 4px; color: var(--accent);
  font: 600 9.5px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
}
.result-overview h2 { font: 700 22px 'DM Sans', sans-serif; letter-spacing: -.025em; line-height: 1.2; }
.result-overview-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 20px; gap: 1px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 11px; background: var(--border);
}

/* One card, one self-contained answer: a label, a headline value, a small
   mark, and a route into the section holding the full detail. The unsettled
   card deliberately shares this exact chrome — uncertainty is a kind of
   answer here, so nothing about it may read as a demotion or a warning. */
.overview-card {
  grid-column: span 2; min-width: 0; display: flex; flex-direction: column;
  gap: 9px; padding: 16px; background: var(--surface);
}
.overview-card--columns { grid-column: span 6; }
.overview-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.overview-card-label {
  color: var(--text-3);
  font: 9px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Three text tiers per card: the headline numeral (~3× body, DM Mono is
   tabular by construction), the quiet label, and the mono supporting
   statistics. One value per card gets the headline size; everything else
   stays demoted so the eye has exactly one landing point. */
.overview-card-value { color: var(--text); font: 600 30px/1 'DM Mono', monospace; white-space: nowrap; letter-spacing: -.02em; }
.overview-card-value small { color: var(--text-3); font-size: 10.5px; font-weight: 500; letter-spacing: 0; }
.overview-card-body { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.overview-line { color: var(--text-2); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.overview-line--meter { display: flex; align-items: center; gap: 8px; }
.overview-card-link {
  align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none;
  color: var(--accent); font: 600 11px 'DM Sans', sans-serif; cursor: pointer;
}
.overview-card-link:hover, .overview-card-link:focus-visible { text-decoration: underline; }

/* The one segment-bar form for every composition on the dashboard.
   Filled = the engine settled it · hollow = it could not · muted = measured
   absence. Hollow keeps the same stroke weight everywhere: it is a different
   answer, not a lesser one. */
.segbar { display: flex; gap: 2px; height: 10px; }
.segbar .seg { min-width: 3px; border-radius: 2px; }
.seg--filled { background: var(--accent); }
.seg--muted { background: var(--border-2); }
.seg--hollow { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }

/* Rows outside the IQR fences, in the column inspector. The table is the
   form (past ~7 items a table beats more marks); the distance beyond the
   fence rides as a filled track — a flagged row is a settled measurement,
   so nothing here is hollow and nothing wears a severity colour. */
.outlier-rows { margin-top: 16px; }
.outlier-rows h3 { font-size: 12px; font-weight: 600; color: var(--text); }
.outlier-rows-basis { margin-top: 3px; font-size: 10.5px; line-height: 1.45; color: var(--text-3); }
.outlier-rows-note { margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--text-2); }
.outlier-rows-wrap { max-height: 240px; overflow: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; }
.outlier-rows-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.outlier-beyond { display: inline-flex; align-items: center; gap: 6px; }
.outlier-beyond-track { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.outlier-beyond-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }

/* Sparkline: no axes, no grid; endpoints labelled beside the line. */
.overview-spark { display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center; }
.overview-spark .sparkline { display: block; width: 100%; height: 26px; }
.overview-spark small { color: var(--text-3); font: 9.5px 'DM Mono', monospace; }

/* Evidence families: one hue for every bar — the label carries identity,
   the length carries the count. A family the file cannot support states
   what it needed, at the same size as a counted row. */
.overview-family, .overview-worst {
  display: grid; grid-template-columns: minmax(72px, 40%) 1fr auto;
  align-items: center; gap: 8px; min-height: 18px;
}
.overview-family-name {
  color: var(--text-2); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.overview-family-track { display: block; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.overview-family-track i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.overview-family strong, .overview-worst strong {
  color: var(--text); font: 600 11px 'DM Mono', monospace; white-space: nowrap;
}
.overview-family-track--hollow { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.overview-family-none { color: var(--text-3); }
.overview-family-needs { color: var(--text-2); font-size: 10px; line-height: 1.35; margin-top: -3px; }
.overview-family .segbar { min-width: 0; }

/* The target column's shape, drawn from the engine's own histogram bins.
   Tail bins collect values beyond the IQR fences and render hollow so the
   tail never masquerades as part of the central shape. */
.overview-dist { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.overview-dist-bar { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .82; }
.overview-dist-bar.is-tail { background: var(--surface); border: 1px solid var(--accent); opacity: 1; }

.overview-finding { display: grid; gap: 3px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.overview-finding:last-of-type { border-bottom: 0; padding-bottom: 0; }
.overview-finding-claim { color: var(--text); font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }
.overview-vitals { color: var(--text-2); font: 10px 'DM Mono', monospace; }
.overview-vitals-note { color: var(--text-3); font-size: 10px; }

.overview-unsettled-item p { color: var(--text); font-size: 11.5px; line-height: 1.4; }
.overview-unsettled-item small { color: var(--text-2); font-size: 10.5px; line-height: 1.4; }

.overview-empty { color: var(--text-2); font-size: 11.5px; line-height: 1.5; }

@media (max-width: 960px) {
  .overview-card { grid-column: span 3; }
  .overview-card--columns { grid-column: span 6; }
}

/* Completeness under its number, as a quiet meter. */
.overview-meter {
  flex: 0 0 auto; display: block; width: 46px; height: 8px;
  border-radius: 4px; background: var(--border); overflow: hidden;
}
.overview-meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.result-overview-focus {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin-top: 12px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-bg);
}
.result-overview-focus span { color: var(--accent); font: 600 9px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.result-overview-focus p { color: var(--text); font-size: 12.5px; line-height: 1.45; }

.dash-topbar {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 24px; border: 1px solid var(--on-ink-border); border-radius: 18px;
  background: var(--ink-surface); box-shadow: 0 20px 48px rgba(16,35,27,.13);
}

.dash-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--on-ink);
}
.dash-title:focus { outline: none; }

.dash-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

.meta-chip {
  font-family: 'DM Mono', monospace;
  font-size: 10px; padding: 3px 8px;
  background: var(--on-ink-soft);
  border: 1px solid var(--on-ink-border);
  border-radius: 999px; color: var(--on-ink-muted);
  letter-spacing: 0.04em;
}
.meta-chip--good { color: var(--green); background: var(--green-bg); }
.meta-chip--fair { color: var(--amber); background: var(--amber-bg); }
.meta-chip--poor { color: var(--red); background: var(--red-bg); }

.reset-btn {
  min-height: 38px; padding: 8px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text-2);
  font-family: 'DM Sans', sans-serif; font-size: 13px;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.feedback-btn { display: inline-flex; align-items: center; text-decoration: none; }
.reset-btn:hover { border-color: var(--border-2); color: var(--text); background: var(--surface-2); }

/* ─── Summary ────────────────────────────────────────────────── */
.summary-card {
  background: var(--text); color: var(--on-ink);
  border-radius: var(--radius); padding: 28px 32px;
}

.summary-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 10px;
}

.summary-text { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.88); }

/* ─── Text stats bar ──────────────────────────────────────────── */
.text-stats-bar {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 32px;
  gap: 0;
  box-shadow: var(--shadow-sm);
}

.text-stat-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  flex: 1;
}

.text-stat-value {
  font-family: 'Fraunces', serif;
  font-size: 28px; font-weight: 700;
  color: var(--text); letter-spacing: -0.02em;
}

.text-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
}

.text-stat-divider {
  width: 1px; height: 40px;
  background: var(--border); margin: 0 24px;
}

/* ─── Grid ───────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ─── Card ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 22px rgba(16,35,27,.035);
}

.card-title {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 16px;
  font-family: 'DM Mono', monospace;
}

/* ─── Stat Cards ─────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

.stat-card {
  width: 100%; text-align: left; color: inherit; font-family: inherit; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 17px 18px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.stat-card:hover { border-color: var(--accent); background: var(--surface); box-shadow: 0 8px 22px rgba(16,35,27,.06); transform: translateY(-1px); }
.stat-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat-card-action { flex: 0 0 auto; color: var(--text-3); font-size: 10px; }
.stat-card:hover .stat-card-action, .stat-card:focus-visible .stat-card-action { color: var(--accent); }

.stat-col-name {
  font-family: 'DM Mono', monospace;
  font-size: 11px; color: var(--accent); margin-bottom: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.stats-section-head > span { color: var(--text-3); font-size: 11px; }

.column-inspector {
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); margin: auto;
  overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
  background: var(--surface); color: var(--text); box-shadow: var(--dialog-shadow);
}
.column-inspector::backdrop { background: var(--dialog-backdrop); backdrop-filter: blur(3px); }
.column-inspector-shell { padding: 26px; }
.column-inspector-head { display: flex; justify-content: space-between; gap: 24px; }
.column-inspector-eyebrow { color: var(--accent); font: 9px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }
.column-inspector h2 { margin-top: 4px; font: 600 28px 'Fraunces', serif; overflow-wrap: anywhere; }
.column-inspector-meta { margin-top: 4px; color: var(--text-3); font: 10px 'DM Mono', monospace; }
.column-inspector-close {
  flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--text-2); font-size: 20px; cursor: pointer;
}
.column-inspector-close:hover, .column-inspector-close:focus-visible { border-color: var(--border-2); color: var(--text); }
.column-inspector-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 22px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--border); }
.column-inspector-metric { min-width: 0; padding: 13px 14px; background: var(--surface); }
.column-inspector-metric span, .column-inspector-metric small { display: block; color: var(--text-3); }
.column-inspector-metric span { font: 9px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.column-inspector-metric strong { display: block; margin-top: 3px; overflow-wrap: anywhere; font: 600 13px 'DM Mono', monospace; }
.column-inspector-metric small { margin-top: 2px; font-size: 10px; }
.column-inspector-visual { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.column-inspector-visual-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.column-inspector-visual-head h3 { font-size: 13px; }
.column-inspector-visual-head p { color: var(--text-3); font-size: 11px; text-align: right; }
.column-inspector-bars { display: flex; align-items: stretch; gap: 6px; height: 190px; overflow-x: auto; padding-bottom: 4px; }
.column-inspector-bar { min-width: 42px; flex: 1 0 42px; display: grid; grid-template-rows: 20px 1fr 34px; gap: 4px; text-align: center; }
.column-inspector-bar-value { color: var(--text-2); font: 9px 'DM Mono', monospace; }
.column-inspector-bar-track { display: flex; align-items: flex-end; overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 2px 2px; background: var(--surface-2); }
.column-inspector-bar-track > span { width: 100%; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }
.column-inspector-bar small { overflow: hidden; color: var(--text-3); font: 8px 'DM Mono', monospace; line-height: 1.25; }
.column-inspector-ranks { display: grid; gap: 10px; }
.column-inspector-rank { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr 46px; align-items: center; gap: 10px; }
.column-inspector-rank > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 11px; }
.column-inspector-rank-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.column-inspector-rank-track > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.column-inspector-rank strong { text-align: right; font: 10px 'DM Mono', monospace; }
.column-inspector-empty { padding: 24px; border-radius: var(--radius); background: var(--surface-2); color: var(--text-3); text-align: center; }
.column-inspector-note { margin-top: 20px; color: var(--text-3); font-size: 10.5px; }

.stat-row {
  display: flex; justify-content: space-between;
  align-items: center; padding: 2px 0;
  border-bottom: 1px solid var(--bg);
}
.stat-row:last-child { border-bottom: none; }
.stat-key { font-size: 11px; color: var(--text-3); }
.stat-val { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text); font-weight: 500; }

.stat-type-badge {
  display: inline-block; font-size: 10px;
  font-family: 'DM Mono', monospace;
  padding: 1px 6px; border-radius: 3px; margin-bottom: 8px;
}
.stat-type-badge.numeric     { background: var(--accent-bg); color: var(--accent); }
.stat-type-badge.categorical { background: var(--amber-bg);  color: var(--amber);  }

/* ─── Insights ───────────────────────────────────────────────── */
.insights-list { display: flex; flex-direction: column; gap: 10px; }

.insight-item {
  padding: 14px 16px; border-radius: var(--radius-sm);
  border-left: 3px solid;
  display: flex; flex-direction: column; gap: 3px;
}
.insight-item.positive { background: var(--green-bg);  border-color: var(--green);  }
.insight-item.negative { background: var(--red-bg);    border-color: var(--red);    }
.insight-item.warning  { background: var(--amber-bg);  border-color: var(--amber);  }
.insight-item.neutral  { background: var(--surface-2); border-color: var(--border-2); }

.insight-title { font-size: 13px; font-weight: 600; color: var(--text); }
.insight-detail { font-size: 13px; color: var(--text-2); line-height: 1.5; }

/* ─── Variables ──────────────────────────────────────────────── */
.var-list { display: flex; flex-direction: column; gap: 14px; }

.var-item { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.var-item:last-child { border-bottom: none; padding-bottom: 0; }

.var-name { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.var-explanation { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 4px; }
.var-notable { font-size: 12px; color: var(--text-2); font-style: italic; }

/* ─── Correlations ───────────────────────────────────────────── */
.corr-list { display: flex; flex-direction: column; gap: 8px; }

/* ─── Correlation matrix ─────────────────────────────────────── */
.corr-matrix:not(:empty) { margin-bottom: 22px; }
.corr-matrix-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.corr-matrix-head h3 { font-size: 12px; font-weight: 600; color: var(--text); }
.corr-matrix-head p { font-size: 10.5px; color: var(--text-3); }
.corr-matrix-wrap { overflow-x: auto; }
.corr-matrix-table { border-collapse: separate; border-spacing: 2px; font-family: 'DM Mono', monospace; font-size: 10.5px; }
.corr-matrix-table th {
  color: var(--text-2); font-weight: 500; text-align: right;
  padding: 4px 8px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.corr-matrix-table thead th { text-align: center; vertical-align: bottom; max-width: 64px; }
.corr-matrix-table thead th span { display: inline-block; max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.corr-matrix-table td {
  min-width: 52px; height: 34px; padding: 0 6px;
  border-radius: 4px; text-align: center; color: var(--text);
}
.corr-matrix-cell { border: 1px solid var(--border); }
.corr-matrix-diag { background: var(--surface-2); }
.corr-matrix-none { border: 1px dashed var(--border); color: var(--text-3); }
.corr-matrix-note { margin-top: 8px; font-size: 10.5px; color: var(--text-3); }

.corr-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 0; }

.corr-cols {
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--text-2); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.corr-bar-wrap { width: 100px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.corr-bar { height: 100%; border-radius: 3px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.corr-bar.positive { background: var(--green); }
.corr-bar.negative { background: var(--red); }

.corr-val { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; width: 48px; text-align: right; }
.corr-val.positive { color: var(--green); }
.corr-val.negative { color: var(--red); }
.corr-meta { flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 10.5px; color: var(--text-2); margin-top: 4px; }
.corr-caveat { flex-basis: 100%; font-size: 10.5px; color: var(--amber); margin-top: 2px; }

/* ─── Charts ─────────────────────────────────────────────────── */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }

.chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 22px rgba(16,35,27,.035);
}

.chart-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.chart-download {
  flex: 0 0 auto; min-height: 30px; padding: 4px 10px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
  font: 500 10px 'DM Mono', monospace; letter-spacing: .04em; cursor: pointer;
}
.chart-download:hover, .chart-download:focus-visible { color: var(--accent); border-color: var(--accent); }
.chart-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.chart-reason { font-size: 12px; color: var(--text-3); margin-bottom: 14px; line-height: 1.4; }
.chart-canvas { width: 100%; }

/* The pairing behind a coefficient, drawn beneath its number. */
.corr-scatter {
  flex-basis: 100%;
  margin-top: 12px; padding: 10px 12px 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.corr-scatter canvas { width: 100%; }

/* The grid stops before a wide file becomes wallpaper; this row says so. */
.charts-more-note {
  grid-column: 1 / -1;
  padding: 12px 16px;
  border: 1px dashed var(--border-2); border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 12px; line-height: 1.5;
}

/* ─── Conclusion ─────────────────────────────────────────────── */
.conclusion-card {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.conclusion-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}

.conclusion-text { font-size: 14px; line-height: 1.7; color: var(--text); }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .main        { padding: 24px 16px 60px; }
  .topbar      { padding: 0 16px; }
  .grid-2      { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
  .text-stats-bar { flex-wrap: wrap; gap: 16px; padding: 16px; }
  .text-stat-divider { display: none; }
  .text-stat-item { flex: 0 0 calc(50% - 8px); }
}

/* ─── File type pills (upload screen) ───────────────────────── */
.file-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.pill {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-2);
  font-family: 'DM Sans', sans-serif;
}

/* ─── File type chip in dashboard meta ──────────────────────── */
.file-type-chip {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}

/* ─── Topics (text-based files) ─────────────────────────────── */
.topics-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.topic-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-2);
  background: var(--surface-2);
}

.topic-item.importance-high   { border-color: var(--accent);  background: var(--accent-bg); }
.topic-item.importance-medium { border-color: var(--amber);   background: var(--amber-bg);  }
.topic-item.importance-low    { border-color: var(--border-2); background: var(--surface-2); }

.topic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.topic-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.topic-importance {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.topic-summary {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ─── Raw text preview ───────────────────────────────────────── */
.raw-text-preview {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 16px;
  border: 1px solid var(--border);
}

/* ─── File list in dropzone ──────────────────────────────────── */
.file-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
  font-size: 12px;
  color: var(--text);
}

.file-chip-icon  {
  min-width: 32px; color: var(--text-3);
  font: 500 9px 'DM Mono', monospace; letter-spacing: .04em; text-align: center;
}
.file-chip-role {
  padding: 2px 6px; border-radius: 999px; color: var(--accent); background: var(--accent-bg);
  font: 500 9px 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase;
}
.file-chip-name  { font-family: 'DM Mono', monospace; font-size: 11px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip-size  { color: var(--text-3); font-size: 10px; }
.file-chip-remove { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 16px; line-height: 1; padding: 4px; margin: -4px -4px -4px 0; }
.file-chip-remove:hover { color: var(--red); }

.add-more-btn {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px dashed var(--border-2);
  border-radius: 20px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
}
.add-more-btn:hover { background: var(--accent-bg); border-color: var(--accent); }
.swap-files-btn {
  padding: 4px 10px; border: 0; background: transparent; color: var(--text-2);
  font: 500 11px 'DM Sans', sans-serif; cursor: pointer;
}
.swap-files-btn:hover, .swap-files-btn:focus-visible { color: var(--accent); }

/* ─── Tabs ───────────────────────────────────────────────────── */
.tabs-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 24px;
}

.tab-btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--surface-2);
  color: var(--text-2);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  transition: all 0.15s;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-btn:hover  { background: var(--surface); color: var(--text); }
.tab-btn.active { background: var(--surface); color: var(--text); border-color: var(--border); font-weight: 600; }
.tab-btn.tab-error { color: var(--red); }

/* ─── Cross-file summary card ────────────────────────────────── */
.cross-summary-card {
  background: linear-gradient(135deg, var(--ink-hero) 0%, var(--ink-hero-2) 100%);
  color: var(--on-ink);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cross-summary-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.cross-summary-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
}

.cross-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.cross-col-title {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 10px;
}

.cross-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.cross-item.theme { background: var(--on-ink-blue-wash); border-left: 3px solid var(--on-ink-blue); }
.cross-item.diff  { background: var(--on-ink-amber-wash);  border-left: 3px solid var(--on-ink-amber); }
.cross-item strong { display: block; font-size: 12px; color: var(--on-ink); margin-bottom: 4px; }
.cross-item p { font-size: 12px; color: rgba(255,255,255,0.65); margin: 0; line-height: 1.5; }

.cross-conclusion {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  font-style: italic;
}

/* ─── Deterministic comparison ───────────────────────────────── */
.compare-section {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  border: 1px solid var(--border); border-radius: 18px;
  background: rgba(255,255,255,.82); box-shadow: 0 10px 36px rgba(16,35,27,.045);
}
.compare-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.compare-title { margin-top: 5px; font: 600 22px 'Fraunces', serif; }
.compare-note { max-width: 440px; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.compare-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.compare-metric { padding: 16px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.compare-metric-label { display: block; color: var(--text-3); font: 10px 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.compare-metric-value { display: block; margin-top: 5px; font: 600 20px 'DM Mono', monospace; }
.compare-metric-context { display: block; margin-top: 2px; color: var(--text-2); font-size: 11px; }
.compare-quality { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-quality-card { padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.compare-quality-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.compare-quality-name { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.compare-quality-score { font: 600 13px 'DM Mono', monospace; }
.compare-bar-row { display: grid; grid-template-columns: 82px 1fr 48px; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-3); font-size: 11px; }
.compare-bar { height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.compare-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.compare-bar-row:first-of-type .compare-bar > span { background: var(--text-3); }
.compare-bar-value { text-align: right; font: 10px 'DM Mono', monospace; color: var(--text-2); }
/* Both sides' five-number summaries on one shared scale per column. The
   baseline box is filled in the neutral tone the quality bars already use
   for "baseline", and each strip's identity rides in its row label. */
.compare-shifts { display: flex; flex-direction: column; gap: 16px; }
.compare-shift { display: flex; flex-direction: column; gap: 6px; }
.compare-shift-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.compare-shift-name { color: var(--text); font-size: 12.5px; font-weight: 600; }
.compare-shift-stat { color: var(--text-2); font: 10.5px 'DM Mono', monospace; }
.compare-shift-row { display: grid; grid-template-columns: 62px 1fr 52px; align-items: center; gap: 8px; }
.compare-shift-side { color: var(--text-3); font-size: 10.5px; }
.compare-shift-n { text-align: right; color: var(--text-2); font: 10px 'DM Mono', monospace; }
.compare-shift-box--baseline { background: var(--surface-2); border-color: var(--border-2); }
.compare-shift-row--baseline .spread-mean,
.compare-shift-row--baseline .spread-ci { background: var(--text-3); }
.compare-shift-scale { display: flex; justify-content: space-between; padding-left: 70px; color: var(--text-3); font: 10px 'DM Mono', monospace; }
.compare-shifts-empty, .compare-shifts-note { color: var(--text-2); font-size: 12px; line-height: 1.5; }

.compare-schema { display: flex; flex-direction: column; gap: 12px; }
.compare-schema-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.compare-schema-label { min-width: 66px; color: var(--text-3); font: 10px 'DM Mono', monospace; text-transform: uppercase; }
.compare-chip { padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 11px; }
.compare-chip.added { color: var(--accent); background: var(--accent-bg); }
.compare-chip.removed, .compare-chip.changed { color: var(--amber); background: var(--amber-bg); }
.compare-findings { display: flex; flex-direction: column; gap: 8px; }
.compare-finding { padding: 9px 11px; border-left: 3px solid var(--border-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); }
.compare-finding.high { border-color: var(--red); }
.compare-finding.medium { border-color: var(--amber); }
.compare-finding.low { border-color: var(--accent); }
.compare-finding strong { display: block; font-size: 12px; }
.compare-finding p { margin-top: 2px; color: var(--text-2); font-size: 11px; line-height: 1.45; }
.compare-empty { padding: 16px; border: 1px dashed var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); }
.compare-empty strong { display: block; color: var(--text); font-size: 12px; }
.compare-empty p { margin-top: 3px; color: var(--text-2); font-size: 11px; line-height: 1.45; }
.compare-columns-card { overflow: hidden; padding: 0; }
.compare-columns-card > .card-title { padding: 20px 20px 0; }
.compare-table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.compare-table th { color: var(--text-3); font: 10px 'DM Mono', monospace; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
.compare-table th, .compare-table td { padding: 12px 20px; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td:first-child { color: var(--text); font-weight: 600; }
.compare-table .change { color: var(--accent); font-family: 'DM Mono', monospace; }

@media (max-width: 768px) {
  .cross-grid { grid-template-columns: 1fr; }
  .tabs-bar   { gap: 2px; }
  .tab-btn    { font-size: 10px; padding: 6px 10px; }
  .compare-heading { align-items: flex-start; flex-direction: column; }
  .compare-metrics { grid-template-columns: 1fr 1fr; }
  .compare-quality { grid-template-columns: 1fr; }
}
/* ─── Settings panel ────────────────────────────────────────── */
.settings-btn {
  min-height: 40px; font-family: 'DM Sans', sans-serif;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.settings-btn:hover { border-color: var(--border-2); color: var(--text); }
.settings-btn.needs-key { border-color: var(--ink-surface); background: var(--ink-surface); color: var(--on-ink); }

.settings-panel {
  position: fixed; z-index: 90; top: 76px;
  right: max(24px, calc((100vw - 1180px) / 2));
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 96px); overflow-y: auto;
  margin: 0; padding: 24px;
  background: rgba(255,255,255,.98);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(16,35,27,.18);
}
.dash-topbar .reset-btn {
  background: var(--on-ink-soft); border-color: var(--on-ink-border); color: var(--on-ink-muted);
}
.dash-topbar .reset-btn:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: var(--on-ink); }
.dash-topbar #resetBtn { background: var(--signal); border-color: var(--signal); color: var(--ink-surface); font-weight: 600; }
.dash-topbar #resetBtn:hover { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink-surface); }
.settings-panel-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.settings-panel-head > span {
  color: var(--accent); font: 600 9px 'DM Mono', monospace;
  letter-spacing: .12em; text-transform: uppercase;
}
.settings-panel-head h2 { margin-top: 5px; font-size: 21px; letter-spacing: -.025em; }
.settings-panel-head p { margin-top: 7px; color: var(--text-2); font-size: 12.5px; line-height: 1.55; }
.settings-field { margin-bottom: 14px; }
.settings-label {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.settings-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
.settings-input:focus { border-color: var(--accent); }
.settings-hint { font-size: 12px; color: var(--text-3); margin-top: 6px; line-height: 1.5; }
.settings-hint a { color: var(--accent); }
.settings-actions { display: flex; align-items: center; gap: 12px; }
.settings-save {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-fill);
  background: var(--accent);
  border: none;
  border-radius: 999px;
  cursor: pointer;
}
.settings-status { font-size: 12px; color: var(--green); }

.url-input-wrap { width: 100%; margin: 14px auto 0; }

/* ─── History ───────────────────────────────────────────────── */
.history-section { width: 100%; margin: 36px auto 0; text-align: left; }
.history-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.history-list { display: flex; flex-direction: column; gap: 8px; }
.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.history-item:hover { border-color: var(--accent); }
.history-delete {
  border: none; background: none; color: var(--text-tertiary);
  font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.history-delete:hover { color: var(--red); background: var(--surface-hover, rgba(0,0,0,0.05)); }
.save-toggle {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 4px;
  font-size: 13px; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.save-toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.save-toggle-hint { font-size: 11.5px; color: var(--text-tertiary); margin: 0 0 6px 23px; }
.history-item-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item-meta { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-3); }
.dash-actions { display: flex; gap: 7px; }

/* ─── Data quality ──────────────────────────────────────────── */
.quality-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.quality-badges { display: flex; align-items: center; gap: 10px; }
.quality-grade {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
}
.quality-grade.good { color: var(--green); background: var(--green-bg); }
.quality-grade.fair { color: var(--amber); background: var(--amber-bg); }
.quality-grade.poor { color: var(--red);  background: var(--red-bg); }
.quality-meta { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-3); }
.quality-issues { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.quality-issue { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.quality-issue .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; position: relative; top: -1px; }
.quality-issue.high .dot   { background: var(--red); }
.quality-issue.medium .dot { background: var(--amber); }
.quality-issue.low .dot    { background: var(--text-3); }
.quality-clean { font-size: 13px; color: var(--green); }
.quality-columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.quality-col {
  display: grid;
  grid-template-columns: minmax(72px, auto) auto 1fr 34px;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 9px;
  font-size: 12px;
}
.quality-col-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quality-col-info { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-3); white-space: nowrap; }

/* Stacked per-column completeness: valid, then missing, then unparseable.
   The surface shows through 1px joins so adjacent states never fuse. */
.quality-col-track {
  display: flex; gap: 1px; height: 8px; min-width: 60px;
  border-radius: 4px; overflow: hidden; background: var(--surface);
}
.quality-col-track i { display: block; height: 100%; }
/* Cell states follow the dashboard's one encoding, not a severity ramp:
   valid is filled (measured), missing is muted (its absence is a settled
   fact), unparseable is hollow (the engine could not settle what it was).
   The counts ride in each row's text and title, never colour alone. */
.quality-col-track .q-valid   { background: var(--accent); }
.quality-col-track .q-missing { background: var(--border-2); }
.quality-col-track .q-invalid { background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.quality-col-pct { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-2); text-align: right; }

/* ─── Numeric spread strips ─────────────────────────────────── */
.spread-strips:not(:empty) { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.spread-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.spread-head h3 { font-size: 12px; font-weight: 600; color: var(--text); }
.spread-head p { font-size: 10.5px; color: var(--text-3); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.spread-key-median { display: inline-block; width: 2px; height: 10px; background: var(--text); border-radius: 1px; }
.spread-key-mean { display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.spread-key-ci { display: inline-block; width: 14px; height: 5px; background: var(--accent); opacity: .28; border-radius: 2px; }
.spread-key-fence { display: inline-block; width: 2px; height: 10px; background: var(--text-3); border-radius: 1px; }
.spread-row {
  display: grid; grid-template-columns: minmax(76px, 130px) auto 1fr auto auto;
  align-items: center; gap: 10px; padding: 6px 0;
}
.spread-name {
  font-size: 12px; color: var(--text); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spread-end { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-3); }
.spread-track { position: relative; height: 18px; min-width: 120px; }
.spread-track i { position: absolute; top: 50%; display: block; }
.spread-range { height: 2px; transform: translateY(-50%); background: var(--border-2); border-radius: 1px; }
.spread-box { height: 10px; transform: translateY(-50%); background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 3px; }
.spread-median { width: 2px; height: 14px; transform: translate(-1px, -50%); background: var(--text); border-radius: 1px; }
/* The mean's 95% interval as a band under the dot: the engine produced an
   interval, so the strip never shows the mean as a lone point estimate. */
.spread-ci { height: 5px; transform: translateY(-50%); background: var(--accent); opacity: .28; border-radius: 2px; }
.spread-mean { width: 7px; height: 7px; transform: translate(-3.5px, -50%); background: var(--accent); border-radius: 50%; }
/* IQR fences, drawn only where at least one value sits beyond them. A fence
   is a computed threshold, chart furniture like the median tick — it wears
   ink, not a warning colour. */
.spread-fence { width: 2px; height: 12px; transform: translate(-1px, -50%); background: var(--text-3); border-radius: 1px; }
.spread-outliers { font-size: 10px; color: var(--text-2); white-space: nowrap; }
.spread-constant { grid-column: 2 / -1; font-size: 11px; color: var(--text-3); }
.spread-note { margin-top: 6px; font-size: 10.5px; color: var(--text-3); }

/* ─── Sheet picker ──────────────────────────────────────────── */
.sheet-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.sheet-bar-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 4px;
}
.sheet-chip {
  font-size: 12px;
  padding: 5px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.sheet-chip:hover { border-color: var(--accent); color: var(--accent); }
.sheet-chip.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); cursor: default; }

/* ─── Follow-up Q&A ─────────────────────────────────────────── */
.ask-thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ask-item { display: flex; flex-direction: column; gap: 6px; }
.ask-q { font-size: 13px; font-weight: 600; color: var(--text); }
.ask-q::before { content: "You — "; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 400; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.ask-a { font-size: 13.5px; line-height: 1.65; color: var(--text-2); white-space: pre-line; }
.ask-a.pending { color: var(--text-3); font-style: italic; }
.ask-a.error { color: var(--red); }
.ask-input-row { display: flex; gap: 8px; }
.ask-input-row .question-input { flex: 1; margin: 0; }
.ask-btn {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--on-fill);
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.ask-btn:disabled { opacity: 0.5; cursor: default; }

/* ─── Keyless analysis / explain CTA ───────────────────────────── */
.explain-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 17px 20px; margin-bottom: 20px;
  background: var(--accent-bg); border: 1px solid var(--border-2); border-radius: 12px;
}
.explain-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.explain-sub { font-size: 12.5px; color: var(--text-secondary); max-width: 560px; }
.explain-btn { width: auto; padding: 10px 18px; font-size: 13px; flex-shrink: 0; }
/* ─── Provenance vocabulary ──────────────────────────────────── */
/* Exactly three values, rendered identically wherever they appear. A stamp sits
   on a tier header, and on an individual claim only when it differs from its
   tier — that rule is what keeps this from becoming badge soup. */
.prov {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border: 1px solid; border-radius: 999px;
  font: 500 9.5px 'DM Mono', monospace; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap; vertical-align: middle;
}
.prov::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.prov--computed { color: var(--text-2); border-color: var(--border-2); background: var(--surface-2); }
.prov--derived  { color: var(--accent);  border-color: var(--border-2); background: var(--accent-bg); }
.prov--written  { color: var(--purple);  border-color: var(--purple-border); background: var(--purple-bg); }

.prov-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-2); font-size: 11.5px;
}

.card-note {
  margin-left: 8px; color: var(--text-2);
  font: 400 10px 'DM Mono', monospace; text-transform: none; letter-spacing: 0;
}

/* ─── Claim strength ─────────────────────────────────────────── */
/* One scale for evidence and correlations alike, with the number always
   adjacent. The quality grade stays separate: it measures the input, not
   confidence in a claim. */
.strength { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.strength-dots { display: inline-flex; gap: 2px; }
.strength-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-2); }
.strength-dots i.on { background: currentColor; }
.strength-label { font: 500 9.5px 'DM Mono', monospace; letter-spacing: .05em; text-transform: uppercase; }
.strength[data-strength="very strong"], .strength[data-strength="strong"] { color: var(--green); }
.strength[data-strength="moderate"] { color: var(--accent); }
.strength[data-strength="weak"], .strength[data-strength="negligible"] { color: var(--text-2); }

/* ─── Interpretation on its own material ─────────────────────── */
/* Model prose is a different substance from engine output, and reads as one
   before a word is parsed. Every ink pairing here measures above 7:1. */
.tier-interpretation .tier-body {
  padding: 0; border-radius: 0;
  background: transparent; color: var(--on-ink);
}
.tier-interpretation {
  border-color: var(--on-ink-border); background: var(--ink-surface);
  box-shadow: 0 24px 60px rgba(16,35,27,.16);
}
.tier-interpretation .tier-head { border-color: var(--on-ink-border); }
.tier-interpretation .tier-index { border-color: var(--signal); background: var(--signal); color: var(--ink-surface); }
.tier-interpretation .tier-title { color: var(--on-ink); }
.tier-interpretation .tier-note { color: var(--on-ink-muted); }
.tier-interpretation > .tier-head [class~="prov--written"] { color: var(--on-ink-purple); border-color: var(--on-ink-purple-border); background: var(--on-ink-purple-wash); }
.tier-interpretation .tier-body .card,
.tier-interpretation .tier-body .summary-card,
.tier-interpretation .tier-body .conclusion-card,
.tier-interpretation .tier-body .explain-bar {
  background: var(--ink-surface-2); border-color: var(--on-ink-border);
  color: var(--on-ink); box-shadow: none;
}
.tier-interpretation .tier-body .card-title,
.tier-interpretation .tier-body .summary-label,
.tier-interpretation .tier-body .conclusion-label,
.tier-interpretation .tier-body .explain-sub { color: var(--on-ink-muted); }
.tier-interpretation .tier-body .summary-text,
.tier-interpretation .tier-body .conclusion-text,
.tier-interpretation .tier-body .explain-title,
.tier-interpretation .tier-body .insights-list,
.tier-interpretation .tier-body .var-list,
.tier-interpretation .tier-body .ask-thread { color: var(--on-ink); }
.tier-interpretation .tier-body .question-input {
  background: var(--ink-surface); border-color: var(--on-ink-border); color: var(--on-ink);
}
.tier-interpretation .tier-body .question-input::placeholder { color: var(--on-ink-muted); }
.tier-interpretation .explain-bar { background: var(--ink-surface-2); border-color: rgba(215,255,100,.24); }
.tier-interpretation .explain-btn,
.tier-interpretation .ask-btn { background: var(--signal); color: var(--ink-surface); }
.tier-interpretation .insight-item { background: var(--on-ink-soft); }
.tier-interpretation .insight-title,
.tier-interpretation .insight-detail,
.tier-interpretation .var-explanation,
.tier-interpretation .ask-q,
.tier-interpretation .ask-a { color: var(--on-ink); }
.tier-interpretation .var-name { color: var(--on-ink-accent); }
.tier-interpretation .var-notable,
.tier-interpretation .ask-q::before { color: var(--on-ink-muted); }
.tier-interpretation .var-item { border-color: var(--on-ink-border); }

/* The printed report is the artifact most likely to reach a stranger, and
   printers drop backgrounds — so the boundary is carried by a rule, not a fill. */
@media print {
  .tier-interpretation { background: #fff; color: #000; border-color: #999; box-shadow: none; }
  .tier-interpretation .tier-head { border-color: #999; }
  .tier-interpretation .tier-title,
  .tier-interpretation .tier-note { color: #000; }
  .tier-interpretation .tier-body {
    padding: 0 0 0 16px; border-left: 4px solid #000; border-radius: 0;
    background: #fff; color: #000;
  }
  .tier-interpretation .tier-body .card,
  .tier-interpretation .tier-body .summary-card,
  .tier-interpretation .tier-body .conclusion-card,
  .tier-interpretation .tier-body .explain-bar { background: #fff; color: #000; border-color: #999; }
  .tier-interpretation .tier-body .card-title,
  .tier-interpretation .tier-body .summary-label,
  .tier-interpretation .tier-body .conclusion-label { color: #333; }
  .prov { color: #000 !important; background: #fff !important; border-color: #666 !important; }
}
.settings-optional { font-size: 11px; color: var(--text-tertiary); font-weight: 400; margin-left: 6px; }
.settings-remember { margin-top: 8px; font-size: 12px; }
@media (max-width: 640px) {
  .explain-bar { flex-direction: column; align-items: stretch; }
}

/* ─── Topbar nav + doc pages ───────────────────────────────────── */
.topbar-nav { display: flex; align-items: center; gap: 18px; }
.topbar-link {
  font-size: 13px; color: var(--text-2); text-decoration: none;
  padding: 4px 2px; border-bottom: 1.5px solid transparent;
}
.topbar-link:hover { color: var(--text); border-bottom-color: var(--accent); }
.doc-page {
  max-width: 820px; margin-top: 52px; padding: 52px 56px 64px;
  border: 1px solid var(--border); border-radius: 22px;
  background: rgba(255,255,255,.88); box-shadow: 0 24px 70px rgba(16,35,27,.08);
  counter-reset: doc-section;
}
.doc-kicker { color: var(--accent) !important; font: 600 10px 'DM Mono', monospace !important; letter-spacing: .12em; text-transform: uppercase; }
.doc-title { font-family: 'Fraunces', serif; font-size: 44px; letter-spacing: -0.035em; line-height: 1.05; margin: 8px 0 10px; }
.doc-updated { max-width: 60ch; color: var(--text-2); font-size: 14.5px; line-height: 1.6; margin-bottom: 36px; }
.doc-page h2 { counter-increment: doc-section; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650; margin: 34px 0 10px; }
.doc-page h2::before { content: counter(doc-section, decimal-leading-zero); color: var(--accent); font: 500 9px 'DM Mono', monospace; }
.doc-page ul { padding: 18px 20px 18px 38px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 13.5px; }
.doc-page li strong, .doc-page li em { color: var(--text); }
.doc-page p { color: var(--text-2); font-size: 13.5px; }
.doc-page code { font-family: 'DM Mono', monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.doc-page a { color: var(--accent); }
@media (max-width: 640px) {
  .topbar-nav { gap: 10px; }
  .topbar-link { font-size: 12px; }
  .doc-page { margin-top: 18px; padding: 32px 20px 40px; border-radius: 16px; }
  .doc-title { font-size: 36px; }
  .doc-page ul { padding: 16px 16px 16px 32px; }
}

/* ─── Evidence panel ───────────────────────────────────────────── */
.evidence-list { display: flex; flex-direction: column; gap: 12px; }
.evidence-item {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 18px 18px 16px;
  box-shadow: 0 6px 18px rgba(16,35,27,.035);
}
.evidence-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.evidence-claim { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--text); }
.evidence-meta { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-3); margin-top: 8px; }
.evidence-caveat { font-size: 11.5px; color: var(--amber); margin-top: 5px; }
.evidence-provenance { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.evidence-provenance summary {
  width: fit-content; padding: 4px 9px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent); cursor: pointer;
  font: 500 10.5px 'DM Mono', monospace;
}
.evidence-provenance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }
.evidence-provenance-grid > div { display: flex; flex-direction: column; gap: 2px; }
.evidence-provenance-grid span { color: var(--text-3); font: 9px 'DM Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }
.evidence-provenance-grid strong { color: var(--text-2); font-size: 11px; font-weight: 500; }
.evidence-inference { margin-top: 9px; padding: 7px 9px; border-radius: var(--radius-sm); background: var(--accent-bg); color: var(--accent); font: 10.5px 'DM Mono', monospace; }
.evidence-source-note { margin-top: 10px; color: var(--text-3); font-size: 10px; }
.evidence-source-wrap { margin-top: 5px; overflow-x: auto; }
.evidence-source-table { width: 100%; border-collapse: collapse; font: 10px 'DM Mono', monospace; }
.evidence-source-table th, .evidence-source-table td { max-width: 240px; padding: 5px 7px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; text-align: left; }
.evidence-source-table th { color: var(--text-3); font-weight: 500; }
.evidence-source-table td { color: var(--text-2); }
@media (max-width: 640px) { .evidence-provenance-grid { grid-template-columns: 1fr; } }

/* ─── Target selector + sample button ──────────────────────────── */
.target-select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 12.5px;
}
.target-hint { font-size: 11.5px; color: var(--text-3); }
/* The fastest route to a real result, stated before the upload form asks for
   anything. Bordered, not filled: the filled button stays the analyze CTA. */
.sample-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0; padding: 16px;
  border: 1px solid var(--on-ink-border); border-radius: 16px;
  background: var(--ink-surface); color: var(--on-ink);
}
.sample-strip-text { display: grid; gap: 2px; font-size: 11.5px; color: var(--on-ink-muted); line-height: 1.45; }
.sample-strip-text strong { color: var(--on-ink); font-size: 12.5px; }
.sample-btn {
  flex: 0 0 auto; min-height: 40px; padding: 9px 15px;
  background: var(--signal); color: var(--signal-ink);
  border: 1px solid var(--signal); border-radius: 999px;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: all 0.15s;
}
.sample-btn:hover:not(:disabled), .sample-btn:focus-visible { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink-surface); }
.sample-btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 560px) {
  .sample-strip { flex-direction: column; align-items: stretch; }
  .sample-btn { width: 100%; }
}

/* Optional inputs share one quiet group instead of stacking as equals of the
   dropzone. */
.refine-group {
  margin-top: 18px; padding: 14px 16px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2);
}
.refine-group .url-input-wrap { margin-top: 10px; }
.refine-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: var(--text-2); font-size: 12px; font-weight: 600;
}
.refine-label span { color: var(--text-3); font: 9px 'DM Mono', monospace; letter-spacing: .07em; text-transform: uppercase; }

/* ─── Narrow viewports: let the top bar wrap instead of overflowing ──── */
@media (max-width: 700px) {
  .topbar {
    height: 58px;
    min-height: 58px;
    padding: 0 16px;
    flex-wrap: nowrap;
  }
  .topbar-brand { flex: 1 1 auto; }
  .topbar-nav { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; }
  .topbar-link { display: none; }
  .brand-tag { display: none; }
  .settings-btn { white-space: nowrap; }
  .settings-panel { top: 66px; right: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 74px); padding: 20px 16px; }
  .main { padding: 24px 16px 60px; }
  .dash-topbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 17px 18px; }
  .dash-title { overflow-wrap: anywhere; font-size: 20px; line-height: 1.2; }
  .dash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .dash-actions .reset-btn { width: 100%; justify-content: center; text-align: center; }
  .analysis-record summary { align-items: center; gap: 7px; padding: 10px 12px; font-size: 8.5px; }
  .analysis-record-summary { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .analysis-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upload-section { display: block; padding-top: 12px; }
  .upload-intro { padding-top: 8px; }
  .upload-workbench { margin-top: 28px; padding: 20px 16px; border-radius: 18px; }
  .workbench-head { align-items: center; }
  .upload-eyebrow { margin-bottom: 8px; font-size: 9.5px; }
  .upload-headline { font-size: 33px; line-height: 1.08; }
  .upload-sub { font-size: 14px; line-height: 1.55; }
  .upload-proof div { grid-template-columns: 116px 1fr; }
  .format-line { margin-bottom: 18px; gap: 7px; }
  .analysis-mode-btn { padding: 10px; align-items: flex-start; flex-direction: column; gap: 2px; }
  .analysis-mode-btn small { font-size: 10.5px; }
  .dropzone { padding: 28px 16px; }
  .dropzone.has-files { padding: 24px 14px; }
  .dropzone.is-comparing { background-image: none; }
  .file-list { align-items: stretch; flex-direction: column; }
  .file-chip { min-width: 0; border-radius: var(--radius-sm); }
  .file-chip-name { flex: 1; max-width: none; }
  .add-more-btn, .swap-files-btn { justify-content: center; min-height: 36px; }
  .sheet-bar { align-items: stretch; flex-direction: column; gap: 7px; padding: 12px; }
  .target-select { width: 100%; min-height: 38px; }
  .result-overview { padding: 18px 15px; }
  .result-overview-head { align-items: flex-start; flex-direction: row; gap: 10px; }
  .result-overview h2 { font-size: 20px; }
  .result-overview-grid { grid-template-columns: 1fr; }
  .overview-card, .overview-card--columns { grid-column: 1 / -1; padding: 13px; }
  .overview-card-value { font-size: 25px; }
  .result-overview-focus { grid-template-columns: 1fr; gap: 4px; }
  .result-nav { top: 64px; width: 100%; border-radius: 10px; }
  .tier { padding: 18px 15px; border-radius: 14px; }
  .tier + .tier { padding-top: 18px; }
  .tier-head { gap: 10px; padding-bottom: 14px; }
  .tier-note { font-size: 11.5px; }
  .tier-jump { padding-left: 0; }
  .prov-legend { padding: 10px 11px; gap: 6px 9px; }
  .stats-section-head { align-items: flex-start; flex-direction: column; gap: 0; margin-bottom: 12px; }
  .evidence-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .strength { order: 2; }
  .quality-header { align-items: flex-start; flex-direction: column; }
  .column-inspector { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .column-inspector-shell { padding: 20px 16px; }
  .column-inspector-metrics { grid-template-columns: 1fr 1fr; }
  .column-inspector-visual-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .column-inspector-visual-head p { text-align: left; }
  .column-inspector-rank { grid-template-columns: minmax(72px, 1fr) 1.5fr 42px; }
  .loading-wrap { margin-top: 8px; padding: 30px 16px; }
  .loading-steps { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Spread strips reflow to two lines: the name and its outlier note first,
     then the strip between its own min and max. One line squeezed all five. */
  .spread-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "name name outliers" "min track max";
    row-gap: 3px; padding: 8px 0;
  }
  .spread-name { grid-area: name; }
  .spread-row > :nth-child(2) { grid-area: min; }
  .spread-track { grid-area: track; min-width: 0; }
  .spread-row > :nth-child(4) { grid-area: max; justify-self: end; }
  .spread-outliers { grid-area: outliers; justify-self: end; }
  .spread-constant { grid-area: 2 / 1 / 3 / -1; }
}

@media (pointer: coarse) {
  .analysis-mode-btn, .reset-btn, .settings-btn, .sample-btn, .analyze-btn,
  .loading-cancel, .column-inspector-close, .file-chip-remove, .swap-files-btn,
  .chart-download, .structure-fix,
  /* The controls that open a collapsed tier or the setup drawer were left off
     this list and stayed near 27px — the smallest targets on the results
     screen, and the ones a phone visitor has to hit first to reach anything
     inside them. */
  .rail-toggle, .tier-toggle, .tier-jump button,
  .result-nav a { min-height: 45px; }
  .file-chip-remove { min-width: 36px; }
  .result-nav a { display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate, .animate-delay-1, .animate-delay-2, .animate-delay-3, .animate-delay-4,
  .loading-orbit, .corr-bar, .dropzone-icon, .loading-progress > span { animation: none; transition: none; }
  /* The delay classes hold opacity: 0 until their animation runs. With the
     animation disabled, nothing else ever shows them — so show them here.
     Without this, every result tier was invisible under reduced motion. */
  .animate, .animate-delay-1, .animate-delay-2, .animate-delay-3, .animate-delay-4 { opacity: 1; }
}

/* ─── Ridge mark ────────────────────────────────────────────────── */
.brand-glyph { width: 17px; height: 16px; display: block; color: var(--signal); }