/* =====================================================
   LegalKG Demo — style.css
   Two-panel annotated brief cockpit
   ===================================================== */

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

/* ── Mobile touch polish ── */
button, [role="button"], select, summary, .para-row, .chain-back-header {
  -webkit-tap-highlight-color: transparent;
}
.para-row, .chain-back-header, .panel-header, .topnav-brand {
  user-select: none;
}

:root {
  /* ── Brand palette — omniarch.inc ──────────────────── */
  --bg:         #13141a;
  --surface:    #16171e;
  --surface2:   #1e2030;
  --surface3:   #252637;
  --border:     rgba(191,149,85,.18);
  --border2:    rgba(191,149,85,.32);
  --border3:    rgba(191,149,85,.50);
  --text:       #ede8dc;
  --text2:      rgba(237,232,220,.70);
  --text3:      rgba(237,232,220,.65);
  --gold:       #bf9555;   /* copper — primary brand accent */
  --gold-dim:   #7a5c2e;
  --green:      #22c55e;
  --green-dim:  #15803d;
  --green-bg:   rgba(34,197,94,.08);
  --red:        #ef4444;
  --red-dim:    #991b1b;
  --red-bg:     rgba(239,68,68,.07);
  --yellow:     #f59e0b;
  --amber:      #d4883a;
  --blue:       #5b8fd4;
  --blue-dim:   #1e40af;
  --purple:     #a78bfa;
  --teal:       #2dd4bf;
  --orange:     #f97316;
  --indigo:     #818cf8;
  --ghost:      rgba(237,232,220,.28);
  --accent:     #bf9555;   /* = --gold; used for interactive chrome */

  /* ── Colorblind-safe verification palette (Wong 2011 + dark-mode adaptation) ──
     Distinguishable across deuteranopia, protanopia, and tritanopia.
     Used exclusively for verification status — never for decoration.        */
  --cb-ok:      #4EC9B0;   /* teal-green  — PROMOTED / SUPPORTED             */
  --cb-ok-dim:  #267A6E;   /* darker teal for borders                        */
  --cb-ok-bg:   rgba(78,201,176,.09);
  --cb-err:     #E87040;   /* vermillion  — GHOST / UNSUPPORTED (≠ green)    */
  --cb-err-dim: #8B3A1E;
  --cb-err-bg:  rgba(232,112,64,.08);
  --cb-warn:    #F5C842;   /* amber-gold  — MISMATCH / PARTIAL               */
  --cb-warn-dim:#8A6F1A;
  --cb-warn-bg: rgba(245,200,66,.07);
  --cb-ovr:     #818CF8;   /* blue-indigo — OVERRULED                        */
  --cb-ovr-bg:  rgba(129,140,248,.07);
  --topnav-h:   56px;   /* topnav bar height */
  --chrome-h:   106px;  /* topnav + compact selector bar — cockpit offset */
  --radius:     8px;
  --radius-lg:  12px;
  --ease:       cubic-bezier(0.16,1,0.3,1);
  --mono:       'SF Mono', 'Fira Code', 'Consolas', monospace;
  --sans:       'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* ── Type scale (6 semantic sizes) ─────────────────── */
  --text-xs:    .72rem;   /* labels, stamps, metadata */
  --text-sm:    .85rem;   /* secondary body, chain steps, legend (~13.6px) */
  --text-base:  .93rem;   /* primary body, NL input (~14.9px) */
  --text-lg:    1rem;     /* subheadings, panel titles */
  --text-xl:    1.1rem;   /* headings */
  --text-2xl:   1.35rem;  /* display: section headers, verdict badges */
  /* ── Spacing scale ─────────────────────────────────── */
  --space-1:    .25rem;   /* 4px  — tight internal */
  --space-2:    .5rem;    /* 8px  — component internal */
  --space-3:    .75rem;   /* 12px — between related */
  --space-4:    1rem;     /* 16px — between components */
  --space-5:    1.5rem;   /* 24px — section gaps */
  --space-6:    2rem;     /* 32px — major breaks */
}

html { font-size: 16px; scroll-behavior: smooth; overflow-y: scroll; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Skip link ───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--surface);
  color: var(--gold);
  padding: .5rem 1rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: var(--text-base);
  font-weight: 600;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ── Top Nav ─────────────────────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-5);
  height: var(--topnav-h);
  background: linear-gradient(180deg, #1a1b23 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(191,149,85,.08), 0 4px 24px rgba(0,0,0,.45);
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}
.topnav-brand {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  text-decoration: none;
  background: rgba(191,149,85,.07);
  border: 1px solid rgba(191,149,85,.25);
  border-radius: 6px;
  padding: .32rem .8rem;
  flex-shrink: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.topnav-brand:hover {
  border-color: var(--gold);
  background: rgba(191,149,85,.12);
  box-shadow: 0 0 0 1px rgba(191,149,85,.15), 0 2px 12px rgba(191,149,85,.08);
  text-decoration: none;
}
.topnav-wordmark {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold);
  text-transform: uppercase;
  line-height: 1;
}
.topnav-tagline {
  font-size: var(--text-base);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 0;
}
.topnav-tagline em { color: var(--gold); font-style: normal; font-weight: 600; }
.topnav-desc {
  font-size: var(--text-sm);
  color: var(--text3);
  font-weight: 400;
}
@media (max-width: 600px) {
  .topnav-desc { display: none; }
  .topnav-tagline { font-size: var(--text-sm); }
  /* Brand statement in selector bar: topnav already carries the brand on mobile */
  .brand-statement { display: none; }

  /* Fix 2A: Selector bar compact mode — remove min-width that causes overflow at 320px */
  select { min-width: 0; width: 100%; }
  .selector-bar--compact .selector-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .selector-bar--compact .selector-inner .select-wrapper {
    flex-shrink: 1;
    width: 100%;
  }
  .selector-bar--compact .selector-inner select {
    min-width: 0;
    width: 100%;
  }
  /* Case badge wraps its children at narrow widths; children must be able to shrink */
  .case-badge { flex-wrap: wrap; }
  .case-badge > * { min-width: 0; }

  /* Fix 2B: Topnav breathing room at narrow viewports */
  .topnav {
    gap: var(--space-3);
    padding: 0 var(--space-3);
  }

  /* Fix 2D: Selector bar padding at narrow viewports */
  .selector-bar { padding-left: var(--space-3); padding-right: var(--space-3); }
}
.db-health {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .48rem;
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .3rem .7rem;
}
.db-health-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--text3);
  flex-shrink: 0;
  transition: background .4s;
}
.db-health-dot.ready {
  background: var(--cb-ok);
  box-shadow: 0 0 0 2px rgba(78,201,176,.18);
  animation: db-pulse 2.5s ease-in-out 2;
}
@keyframes db-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(78,201,176,.18); }
  50%       { box-shadow: 0 0 0 5px rgba(78,201,176,.08); }
}
.db-health-text {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--text3);
  white-space: nowrap;
}
.db-health-text.ready { color: var(--text2); }
/* DB health: dot-only on small screens — keeps the "live" signal, drops the text */
@media (max-width: 700px) {
  .db-health { padding: .3rem .45rem; }
  .db-health-text { display: none; }
}


/* Ghost citation pulse on case load */
@keyframes ghost-pulse {
  0%, 100% { background: var(--cb-err-bg); }
  50%       { background: rgba(232,112,64,.22); }
}
.cite-ghost.cite-pulse { animation: ghost-pulse 1.1s ease-in-out 3; }


/* ── Case Selector Bar ──────────────────────────────── */
.selector-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--space-5);
  position: sticky;
  top: var(--topnav-h);
  z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.selector-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Brand tagline — "a chain of proof" — centered in selector bar */
.brand-statement {
  width: 100%;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .68;
  margin-bottom: .45rem;
}

/* Hidden in initial centered state — placeholder covers it */
.selector-label { display: none; }
/* In compact mode show as inline prefix so user knows the dropdown switches briefs */
.selector-bar--compact .selector-label {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .65;
  white-space: nowrap;
}

.selector-inner--centered {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.selector-inner--centered .select-wrapper { width: 100%; max-width: 580px; }
.selector-inner--centered select { width: 100%; }
/* Compact mode — case selected, collapse to single row */
.selector-bar--compact {
  padding: var(--space-2) var(--space-5);
}
.selector-bar--compact .brand-statement { display: none; }
.selector-bar--compact .selector-inner {
  flex-direction: row;
  align-items: center;
  gap: .75rem;
}
.selector-bar--compact .selector-inner .select-wrapper {
  width: auto;
  max-width: none;
  flex-shrink: 0;
}
.selector-bar--compact .selector-inner select {
  width: auto;
  min-width: 280px;
}
.selector-bar--compact .select-wrapper::after {
  animation: none;
}
.select-wrapper { position: relative; flex: 1; }
select {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  border-radius: var(--radius);
  padding: .45rem 2rem .45rem .85rem;
  font-size: var(--text-base);
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  min-width: 260px;
  appearance: none;
  transition: border-color .2s var(--ease);
}
select:focus { border-color: var(--gold); }
.select-wrapper::after {
  content: '▾';
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
  font-size: var(--text-sm);
  animation: select-beckon 1.2s ease-in-out 4;
}
.case-badge { display: flex; align-items: center; gap: .5rem; }
.error-badge {
  font-size: var(--text-xs);
  padding: .2rem .55rem;
  border-radius: 99px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .04em;
}
.error-badge.not-found { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-dim); }
.error-badge.mismatch  { background: var(--cb-warn-bg); color: var(--cb-warn); border: 1px solid rgba(245,200,66,.3); }
.error-badge.entity-fraud { background: rgba(167,139,250,.08); color: var(--purple); border: 1px solid rgba(167,139,250,.3); }
.error-badge.multiple  { background: rgba(59,130,246,.08); color: var(--blue); border: 1px solid var(--blue-dim); }
.error-badge.overruled { background: rgba(129,140,248,.08); color: var(--indigo); border: 1px solid rgba(129,140,248,.3); }
.case-meta { font-size: var(--text-sm); color: var(--text3); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.agg-score {
  font-size: var(--text-xs);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 99px;
  white-space: nowrap;
}
.agg-score.agg-ok {
  color: var(--cb-ok);
  background: var(--cb-ok-bg);
  border: 1px solid var(--cb-ok-dim);
}
.agg-score.agg-warn {
  color: var(--cb-warn);
  background: var(--cb-warn-bg);
  border: 1px solid var(--cb-warn-dim);
}
.agg-score.agg-err {
  color: var(--cb-err);
  background: var(--cb-err-bg);
  border: 1px solid var(--cb-err-dim);
}

/* ── Two-Panel Cockpit ──────────────────────────────── */
.cockpit {
  display: grid;
  grid-template-columns: 55fr 45fr;
  height: calc(100dvh - var(--chrome-h));
  max-width: 1600px;
  margin: 0 auto;
  background: var(--bg);
}

/* Brief Panel (left) */
.brief-panel {
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border2);
  border-top: 2px solid var(--gold-dim);
  flex-shrink: 0;
  z-index: 40;
}
.panel-title { font-size: var(--text-sm); font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: .15em; }
.panel-stamp { font-size: var(--text-xs); color: var(--text3); font-family: var(--mono); }
.brief-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: var(--text-xs);
  color: var(--text3);
  padding: .4rem var(--space-5);
  font-style: italic;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.brief-label-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brief-paragraphs { padding: var(--space-4) var(--space-5); overflow-y: auto; flex: 1; min-height: 0; }

.brief-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 3rem var(--space-5);
  text-align: center;
  gap: .75rem;
}
.brief-empty-icon {
  font-size: 2rem;
  opacity: .18;
  font-style: normal;
}
.brief-empty-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text3);
}
.brief-empty-sub {
  font-size: var(--text-sm);
  color: var(--text3);
  opacity: .7;
  max-width: 300px;
  line-height: 1.55;
}

/* ── Case summary card — top of brief panel ── */
.case-summary-card {
  padding-bottom: .9rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.cscard-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: .25rem;
}
.cscard-court {
  font-size: var(--text-xs);
  font-family: var(--mono);
  color: var(--text3);
  margin-bottom: .5rem;
}
.cscard-summary {
  font-size: var(--text-sm);
  color: var(--text2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .5rem;
}
.cscard-status {
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .15rem;
}
.cscard-verified { color: var(--cb-ok); font-weight: 600; }
.cscard-failed { color: var(--cb-err); font-weight: 600; }
.cscard-mixed { color: var(--cb-warn); font-weight: 600; }
.cscard-sep { color: var(--text3); }
.cscard-flagged {
  font-size: var(--text-xs);
  color: var(--cb-err);
  font-family: var(--mono);
  margin-top: .3rem;
  letter-spacing: .02em;
}

/* Status legend — lives in .brief-label bar, always visible */
.brief-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .65rem;
  font-size: var(--text-xs);
  color: var(--text3);
  flex-shrink: 1;
  font-style: normal;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.legend-item .para-dot {
  /* override flex-start alignment from .para-dot-col for inline use */
  flex-shrink: 0;
}
.legend-divider {
  width: 1px;
  height: .85rem;
  background: var(--border2);
  flex-shrink: 0;
}
.cite-legend {
  font-size: var(--text-xs);
  font-family: var(--mono);
  padding: 0 1px;
  cursor: default;
}

/* Paragraph row */
.para-row {
  display: flex;
  gap: .75rem;
  margin-bottom: .9rem;
  cursor: pointer;
  border-radius: var(--radius);
  padding: .5rem .5rem .5rem 0;
  border-left: 3px solid transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.para-row:hover {
  background: rgba(191,149,85,.08);
  background: color-mix(in srgb, var(--para-status-color, var(--accent)) 8%, transparent);
}
.para-row.active {
  background: rgba(191,149,85,.28);
  background: color-mix(in srgb, var(--para-status-color, var(--accent)) 28%, transparent);
  border-left-color: var(--para-status-color, var(--accent));
  box-shadow: inset 0 0 0 1px rgba(191,149,85,.12);
}
.para-row:active,
.para-row--pressed {
  background: color-mix(in srgb, var(--para-status-color, var(--accent)) 42%, transparent);
  transition: none;
}

/* Status dot column */
.para-dot-col {
  flex-shrink: 0;
  width: 18px;
  display: flex;
  align-items: flex-start;
  padding-top: .35rem;
  position: relative;
  /* Larger invisible tap area on mobile without changing visual size */
  min-height: 44px;
}
/* Multi-issue count badge on paragraph dot */
.para-issue-count {
  position: absolute;
  top: .15rem;
  right: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cb-warn);
  color: var(--bg);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.para-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  /* Shape encodes status — color is secondary cue, not the only one */
}

/* Status dots — SVG symbols defined in index.html, only color set here */
.para-dot { display: block; width: 12px; height: 12px; flex-shrink: 0; }
.para-dot.supported   { fill: var(--cb-ok); }
.para-dot.unsupported { fill: var(--cb-err); }
.para-dot.mixed       { fill: var(--cb-warn); }
.para-dot.neutral     { fill: var(--ghost); opacity: 0; pointer-events: none; }

/* Paragraph text */
.para-text-col { flex: 1; font-size: var(--text-base); color: var(--text); line-height: 1.7; }
.para-heading { font-weight: 700; font-size: var(--text-base); color: var(--text2); text-transform: uppercase; letter-spacing: .06em; cursor: default; }
.para-heading .para-dot-col { opacity: 0; pointer-events: none; }

/* Citation spans
   Each class uses BOTH a distinct color AND a distinct underline style
   so status is never communicated by color alone.
     found     → solid underline     + teal
     mismatch  → dashed underline    + amber
     ghost     → dotted underline    + vermillion
     overruled → double underline    + indigo
*/
.cite-span {
  cursor: pointer;
  border-radius: 2px;
  padding: 0 1px;
  transition: background .1s;
}
.cite-found {
  border-bottom: 2px solid var(--cb-ok);
  color: inherit;
}
.cite-found:hover { background: var(--cb-ok-bg); }

.cite-mismatch {
  border-bottom: 2px dashed var(--cb-warn);
  color: inherit;
}
.cite-mismatch:hover { background: var(--cb-warn-bg); }

.cite-narrowed {
  /* Solid amber underline — citation is real but scope has been limited by later authority */
  border-bottom: 2px solid var(--cb-warn);
  color: inherit;
}
.cite-narrowed:hover { background: var(--cb-warn-bg); }

.cite-ghost {
  border-bottom: 2.5px dotted var(--cb-err);
  color: var(--cb-err);
  background: var(--cb-err-bg);
}
.cite-ghost:hover { background: rgba(232,112,64,.15); }

.cite-overruled {
  /* Double underline = unique to overruled; indigo ≠ teal or vermillion */
  text-decoration: underline double var(--cb-ovr);
  text-underline-offset: 2px;
  color: inherit;
}
.cite-overruled:hover { background: var(--cb-ovr-bg); }

.cite-badge {
  font-size: var(--text-xs);
  vertical-align: middle;
  margin-left: 1px;
  font-weight: 700;
}
.cite-badge.err  { color: var(--cb-err); }
.cite-badge.warn { color: var(--cb-warn); }
.cite-badge.ovr  { color: var(--cb-ovr); }

/* Repeat occurrence of the same citation — still clickable, no badge, slightly faded */
.cite-span.cite-span-dup { opacity: .65; }

/* Chain Panel (right, sticky) */
.chain-panel {
  position: sticky;
  top: var(--chrome-h);
  height: calc(100dvh - var(--chrome-h));
  overflow-y: auto;
  background: var(--bg);
}
/* Desktop-only: elevation + status border when a claim is loaded.
   Not applied on mobile where chain-panel is a full-width bottom sheet. */
@media (min-width: 769px) {
  .chain-panel--active {
    box-shadow: -4px 0 16px rgba(0,0,0,0.08);
    border-left: 3px solid var(--chain-status-color, transparent);
    transition: box-shadow 250ms ease-out, border-color 250ms ease-out;
  }
}
.chain-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  gap: .85rem;
  color: var(--text3);
  padding: 2rem;
}
.placeholder-text {
  font-size: var(--text-base);
  text-align: center;
  max-width: 220px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: -.01em;
}
.placeholder-sub {
  font-size: var(--text-sm);
  text-align: center;
  max-width: 250px;
  color: var(--text3);
  line-height: 1.6;
  margin-top: .1rem;
}
.placeholder-chain-dots {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-2);
}
.placeholder-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.placeholder-dot.promoted { background: var(--cb-ok); opacity: .5; }
.placeholder-dot.ghost    { background: var(--cb-err); opacity: .5; }
.placeholder-dot.neutral  { border: 2px solid var(--border2); opacity: .5; }
.placeholder-connector {
  width: 24px;
  height: 2px;
  background: var(--border2);
}
.nl-loading-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text3);
  font-style: italic;
}
.nl-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text2);
  flex-shrink: 0;
}

/* ── Delphi verification panel ──────────────────────── */
.nl-prose {
  font-size: var(--text-base);
  color: var(--text);
  line-height: 1.6;
  margin-bottom: .9rem;
}

/* Card wrapper — matches chain panel treatment */
.verif-panel {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .9rem 1rem;
  margin-top: .25rem;
}

/* Summary bar: dot + text + label */
.verif-summary-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.verif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.verif-dot.ok   { background: var(--cb-ok); }
.verif-dot.err  { background: var(--cb-err); }
.verif-dot.warn { background: var(--cb-warn); }
.verif-summary-text {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text2);
  flex: 1;
}
.verif-flagged-count { color: var(--cb-err); }
.verif-label {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 1px 5px;
}

/* Claims list */
/* Guard: prevent CSS resets from showing [hidden] elements */
[hidden] { display: none !important; }

.verif-claims-list { display: flex; flex-direction: column; gap: 4px; }
/* Expand/collapse spans — inline within verif-text */
.verif-short, .verif-full { display: inline; }

/* Each claim card: left-border status system mirrors .chain-step */
.verif-claim {
  border-left: 3px solid transparent;
  border-radius: 0 5px 5px 0;
  padding: .5rem .65rem;
  background: var(--surface);
}
.verif-claim.verified     { background: var(--cb-ok-bg);   border-left-color: var(--cb-ok); }
.verif-claim.overstates   { background: var(--cb-warn-bg); border-left-color: var(--cb-warn); }
.verif-claim.unsupported  { background: var(--cb-err-bg);  border-left-color: var(--cb-err); }
.verif-claim.misattributed{ background: var(--cb-warn-bg); border-left-color: var(--cb-warn); }
.verif-claim.defeated     { background: var(--cb-ovr-bg);  border-left-color: var(--cb-ovr); }
.verif-claim.inconsistent { background: var(--cb-ovr-bg);  border-left-color: var(--cb-ovr); }
.verif-claim.uncited      { border-left-color: var(--border2); }

/* Claim header: badge + text */
.verif-claim-header {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  flex-wrap: wrap;
}

/* Status badge — pill, mirrors .step-status in chain panel */
.verif-badge {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.verif-badge.verified     { color: var(--cb-ok);   background: var(--cb-ok-bg); }
.verif-badge.overstates   { color: var(--cb-warn);  background: var(--cb-warn-bg); }
.verif-badge.unsupported  { color: var(--cb-err);   background: var(--cb-err-bg); }
.verif-badge.misattributed{ color: var(--cb-warn);  background: var(--cb-warn-bg); }
.verif-badge.defeated     { color: var(--cb-ovr);   background: var(--cb-ovr-bg); }
.verif-badge.inconsistent { color: var(--cb-ovr);   background: var(--cb-ovr-bg); }
.verif-badge.uncited      { color: var(--text3);    background: transparent; border: 1px solid var(--border2); }

.verif-text {
  font-size: var(--text-xs);
  color: var(--text2);
  line-height: 1.45;
  margin: 0;
}

/* Expand/collapse */
.verif-expand-btn {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin-top: .2rem;
  font-size: var(--text-xs);
  color: var(--gold);
  cursor: pointer;
  font-family: inherit;
}
.verif-expand-btn:hover { text-decoration: underline; }

/* Pull-quote from source */
.verif-quote {
  margin: .35rem 0 .2rem .1rem;
  padding: .25rem .6rem;
  border-left: 2px solid var(--border2);
  font-size: var(--text-xs);
  color: var(--text3);
  font-style: italic;
  line-height: 1.4;
}

/* Source citation — human-readable, not raw IRI */
.verif-source {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-top: .2rem;
  font-weight: 500;
}

/* Uncovered prose note — plain language */
.verif-uncovered {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-top: .6rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}

/* Chain content */
.chain-content { padding: var(--space-4) var(--space-5); min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.chain-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.chain-meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
  opacity: .65;
}
.chain-timestamp {
  font-size: var(--text-xs);
  color: var(--text3);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.chain-source-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(191,149,85,.1);
  border: 1px solid rgba(191,149,85,.28);
  border-radius: 4px;
  padding: .1rem .45rem;
}
.chain-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.005em; line-height: 1.3; color: var(--text); margin-bottom: var(--space-1); }
.chain-subtitle { font-size: var(--text-xs); color: var(--text3); font-family: var(--mono); }
.chain-trace {
  margin-top: .6rem;
  border-top: 1px solid var(--border2);
  padding-top: .5rem;
}
.chain-trace-summary {
  font-size: var(--text-xs);
  color: var(--text2);
  font-family: var(--mono);
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-weight: 500;
}
.chain-trace-summary::-webkit-details-marker { display: none; }
.chain-trace-summary::before { content: '▶ '; font-size: .6rem; opacity: .55; }
details.chain-trace[open] .chain-trace-summary::before { content: '▼ '; }
.chain-trace-body {
  margin-top: .5rem;
  padding: .6rem .75rem;
  background: rgba(0,0,0,.22);
  border-radius: 4px;
  border: 1px solid var(--border);
}
.chain-trace-row {
  display: flex;
  gap: .75rem;
  font-size: var(--text-xs);
  font-family: var(--mono);
  color: var(--text3);
  line-height: 1.75;
}
.chain-trace-key {
  width: 4.5rem;
  flex-shrink: 0;
  color: var(--text3);
  opacity: .6;
}
.chain-trace-val { color: var(--text2); word-break: break-all; }
.chain-claim-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.55;
  margin-top: .5rem;
  margin-bottom: .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
  word-break: break-word;
}
.chain-verdict-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

/* ── Failure callout — compact inline verdict headline, no card chrome ── */
.failure-callout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  margin: .2rem 0 .4rem;
  line-height: 1.4;
}
.failure-callout-kg {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: .35em;
}
.failure-callout-msg {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
}
.failure-callout--tier1 .failure-callout-kg,
.failure-callout--tier1 .failure-callout-msg { color: var(--cb-err); }
.failure-callout--tier2 .failure-callout-kg,
.failure-callout--tier2 .failure-callout-msg { color: var(--cb-err); }
.failure-callout--tier3 .failure-callout-kg,
.failure-callout--tier3 .failure-callout-msg { color: var(--cb-warn); }

/* Verification chain steps — audit trail with connector line */
.chain-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  position: relative;
  padding-left: var(--space-2);
  border-left: 2px solid var(--border);
}
.chain-steps .chain-step { margin-bottom: 0; }
.chain-step {
  display: grid;
  grid-template-columns: 1.3rem minmax(0,1fr) auto;
  gap: .4rem .75rem;
  align-items: start;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  font-size: var(--text-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
}
/* Colour-coded left border encodes status without relying on icon colour alone */
.chain-step.step-promoted  { border-left-color: var(--cb-ok-dim); }
.chain-step.step-ghost     { border-left-color: var(--cb-err-dim); background: rgba(232,112,64,.10); box-shadow: 0 0 0 1px var(--cb-err-dim), 0 2px 8px rgba(0,0,0,.2); }
.chain-step.step-mismatch  { border-left-color: var(--cb-warn-dim); border-left-style: dashed; background: rgba(245,200,66,.10); box-shadow: 0 0 0 1px var(--cb-warn-dim), 0 2px 8px rgba(0,0,0,.2); }
.chain-step.step-overruled { border-left-color: var(--cb-ovr); border-left-style: double; border-left-width: 4px; border-right: 3px solid var(--cb-ovr); background: rgba(129,140,248,.08); opacity: .9; box-shadow: 0 0 0 1px rgba(191,149,85,.3), 0 2px 8px rgba(0,0,0,.2); }
.chain-step.step-identity-mismatch { border-left-color: var(--cb-err-dim); background: rgba(232,112,64,.10); }
.chain-step.step-identity-mismatch .step-status { color: var(--cb-err); }
.chain-step.step-incomplete { opacity: .45; }

/* ── Step expand button ───────────────────────────── */
.step-expand-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  margin-left: .25rem;
}
/* ── Step visual weight tiers ─────────────────────── */
.chain-step.step-recede {
  opacity: .72;
  padding: var(--space-2) var(--space-3);
  border-left-width: 1px;
  border-left-color: var(--border);
  border-left-style: solid;
  background: transparent;
  box-shadow: none;
}
.chain-step.step-recede .step-kg-label {
  font-weight: 500;
  color: var(--text3);
}
.step-status-text { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; }
.chain-step.step-recede .step-status-text {
  font-weight: 500;
  color: var(--text3);
}
.chain-step.step-recede .step-detail-collapsible {
  display: none;
}
.chain-step.step-recede.step-recede--expanded .step-detail-collapsible {
  display: block;
}
.chain-step.step-recede .step-expand-hint {
  font-size: var(--text-xs);
  color: var(--text3);
  transition: transform .15s var(--ease);
}
.chain-step.step-recede.step-recede--expanded .step-expand-hint {
  transform: rotate(180deg);
}
.chain-step.step-minimal {
  opacity: .45;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: var(--space-1) var(--space-3);
}
/* ── T3: NOT_APPLICABLE slim rule ─────────────────── */
.chain-step.step-slim-rule {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 28px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--text-xs);
  color: var(--text3);
  opacity: .55;
  border-bottom: 1px solid var(--border);
}
.step-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; overflow-wrap: break-word; word-break: break-word; padding: var(--space-2) var(--space-3); }
.chain-step.step-slim-rule .step-indicator { font-size: .65rem; }
.chain-step.step-slim-rule .step-body { padding: 0; gap: 0; flex-direction: row; align-items: center; }
.chain-step.step-slim-rule .step-status-text { font-size: var(--text-xs); font-weight: 400; }

/* ── NA summary row — replaces repeated not-applicable step cards ── */
.na-summary {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .2rem var(--space-3);
  margin-top: .1rem;
  margin-bottom: .6rem;
  opacity: .4;
}
.na-summary-count {
  font-size: var(--text-xs);
  font-family: var(--mono);
  color: var(--text3);
  font-weight: 600;
  white-space: nowrap;
}
.na-summary-names {
  font-size: var(--text-xs);
  color: var(--text3);
  font-style: italic;
}


.step-indicator { font-size: var(--text-base); line-height: 1; padding-top: 0; margin-top: .15rem; }
/* Symbol encodes status (●  ✕  ⚠  ⊗  —); color is a secondary cue */
.step-indicator.promoted       { color: var(--cb-ok); }
.step-indicator.ghost          { color: var(--cb-err); }
.step-indicator.mismatch       { color: var(--cb-warn); }
.step-indicator.not-reached    { color: var(--ghost); }
.step-indicator.not-applicable { color: var(--ghost); opacity: .6; }
.step-indicator.overruled      { color: var(--cb-ovr); }
.step-kg-label { font-size: var(--text-sm); font-weight: 700; color: var(--text); letter-spacing: .01em; }
.step-status-text.promoted       { color: var(--cb-ok); }
.step-status-text.ghost          { color: var(--cb-err); font-weight: 800; text-transform: uppercase; }
.step-status-text.mismatch       { color: var(--cb-warn); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.step-status-text.not-reached    { color: var(--ghost); }
.step-status-text.not-applicable { color: var(--ghost); opacity: .6; }
.step-status-text.overruled      { color: var(--cb-ovr); font-weight: 700; font-style: italic; }
/* ── T1: Failure card label strengthening ─────────── */
.chain-step.step-ghost .step-kg-label,
.chain-step.step-identity-mismatch .step-kg-label,
.chain-step.step-mismatch .step-kg-label,
.chain-step.step-overruled .step-kg-label {
  font-weight: 800;
}
.step-explanation { font-size: var(--text-sm); color: var(--text2); line-height: 1.55; overflow-wrap: break-word; word-break: break-word; margin-top: var(--space-1); }
/* ── Source verification button (pinned top-right of card) ─── */
.step-source-btn {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  line-height: 1;
  text-decoration: none;
  color: var(--text3);
  border-radius: 3px;
  padding: 2px 4px;
  transition: opacity .15s ease, background .12s ease, color .12s ease;
  opacity: 0;
  z-index: 1;
}
.step-source-btn:hover,
.step-source-btn:focus-visible {
  background: rgba(191,149,85,.15);
  color: var(--gold);
  opacity: 1;
}
.step-source-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* Failed/warned steps: always visible, tinted to match card tier */
.step-ghost .step-source-btn,
.step-mismatch .step-source-btn,
.step-overruled .step-source-btn,
.step-identity-mismatch .step-source-btn,
.step-incomplete .step-source-btn {
  opacity: 1;
}
.step-ghost .step-source-btn             { color: var(--cb-err); }
.step-mismatch .step-source-btn          { color: var(--cb-warn); }
.step-overruled .step-source-btn         { color: var(--cb-ovr); }
.step-identity-mismatch .step-source-btn { color: var(--cb-err); }
.step-incomplete .step-source-btn        { color: var(--cb-warn); }
/* Passing steps: visible on card hover or button focus */
.step-promoted .step-source-btn { opacity: 0; }
.chain-step:hover .step-source-btn,
.step-source-btn:focus-visible {
  opacity: 1;
}
/* Reserve space in step-body to prevent text flowing under the button */
.has-src .step-body {
  padding-right: calc(.5rem + 24px + .25rem);
}
/* Mobile: touch devices can't hover — show at reduced opacity */
@media (hover: none) {
  .step-source-btn { opacity: .45; }
  .step-ghost .step-source-btn,
  .step-mismatch .step-source-btn,
  .step-overruled .step-source-btn,
  .step-identity-mismatch .step-source-btn,
  .step-incomplete .step-source-btn {
    opacity: 1;
  }
}
.step-conf { font-family: var(--mono); font-size: var(--text-xs); color: var(--text3); white-space: nowrap; padding-top: .15rem; max-width: 3.5rem; font-variant-numeric: tabular-nums; }

/* Chain panel section separators — breathing room between logical sections */
.chain-steps + .completeness-row,
.completeness-row + .recommended-action,
.recommended-action + .replacement-card,
.completeness-row + .replacement-card {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border2);
}

/* Completeness bar */
.completeness-row {
  margin-top: .75rem;
  padding: var(--space-3) var(--space-3);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  font-size: var(--text-sm);
}
.completeness-verdict { font-size: var(--text-lg); font-weight: 700; letter-spacing: .02em; margin-bottom: .35rem; }
.completeness-full    { color: var(--cb-ok); }
.completeness-partial { color: var(--cb-warn); }
.completeness-failed  { color: var(--cb-err); }
.conf-bar { margin-top: .4rem; font-family: var(--mono); font-size: var(--text-xs); color: var(--text); font-variant-numeric: tabular-nums; }

/* Answer-first hero card — topmost element for UNSUPPORTED/PARTIAL claims */
.replacement-card--hero {
  border: 1px solid rgba(191,149,85,.45);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: .9rem;
  background: rgba(191,149,85,.08);
  box-shadow: 0 2px 12px rgba(191,149,85,.08);
}
.replacement-card--hero .replacement-header {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gold);
  margin-bottom: .5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.replacement-card--hero .repl-name {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.01em;
  margin-top: 0;
}
.replacement-card--hero .repl-quote {
  border-left: 2px solid rgba(191,149,85,.3);
  padding-left: .6rem;
  margin-top: .5rem;
  font-style: italic;
  color: var(--text2);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.repl-quote-wrap { position: relative; }
.repl-quote-wrap:not(.repl-quote-wrap--open) .repl-quote { max-height: 4.5em; overflow: hidden; }
.repl-quote { transition: max-height 0.3s ease; }
.repl-quote-wrap:not(.repl-quote-wrap--no-overflow):not(.repl-quote-wrap--open)::after {
  content: '';
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  height: 1.5rem;
  background: linear-gradient(to bottom, transparent 30%, rgba(19,20,26,.95) 100%);
  pointer-events: none;
}
.repl-expand-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: none;
  padding: 0;
  margin-top: .1rem;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--gold);
  font-family: var(--sans);
  letter-spacing: .03em;
  opacity: .75;
  line-height: 1;
}
.repl-expand-btn:hover { opacity: 1; }
.repl-quote-wrap--no-overflow .repl-expand-btn { display: none; }
/* Divider between hero card and failure chain */
.chain-divider {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--text-xs);
  color: var(--text3);
  letter-spacing: .05em;
  margin: .5rem 0 .75rem;
}
.chain-divider::before, .chain-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Multi-issue stepper */
.issue-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .75rem;
  margin-bottom: .6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.issue-nav-arrow {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text2);
  border-radius: 4px;
  padding: .55rem 1rem;
  min-height: 44px;
  min-width: 44px;
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color .15s, color .15s;
}
.issue-nav-arrow:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}
.issue-nav-arrow:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.issue-nav-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .04em;
}
.issue-nav-auth {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text1);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.issue-nav-count {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-left: .25rem;
  white-space: nowrap;
}

/* Citation identity — "Checking citation: [Full Case Name]" at top of chain panel */
.citation-identity {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .75rem;
  margin-bottom: .6rem;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.citation-identity-label {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
}
.citation-identity-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text1);
  line-height: 1.3;
}
.citation-identity-reporter {
  font-size: var(--text-xs);
  color: var(--text3);
  font-family: var(--mono);
}

/* Replacement authority card */
.replacement-card {
  margin-top: 1rem;
  padding: .75rem;
  background: var(--cb-ok-bg);
  border: 1px solid var(--cb-ok-dim);
  border-radius: var(--radius);
}
.replacement-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--cb-ok);
  margin-bottom: .35rem;
}
.live-kg-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cb-ok);
  background: rgba(191,149,85,.1);
  border: 1px solid rgba(191,149,85,.28);
  border-radius: 4px;
  padding: .1rem .45rem;
}
.live-kg-note {
  font-size: var(--text-xs);
  color: var(--text3);
  line-height: 1.45;
  margin-bottom: .65rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--cb-ok-dim);
  opacity: .85;
}
.replacement-item { margin-bottom: .65rem; }
.replacement-item:last-child { margin-bottom: 0; }
.repl-name { font-size: var(--text-sm); font-weight: 600; color: var(--text); }
.repl-cite { font-size: var(--text-xs); font-family: var(--mono); color: var(--text2); margin: .15rem 0; }
.repl-meta { font-size: var(--text-xs); font-family: var(--mono); color: var(--gold); margin-top: .2rem; opacity: .85; }
a.repl-cite-link { font-size: var(--text-xs); font-family: var(--mono); color: var(--text2); margin: .15rem 0; text-decoration: underline dotted; cursor: pointer; }
a.repl-cite-link:hover { color: var(--amber); text-decoration: underline; }
.repl-scope { font-size: var(--text-xs); color: var(--text3); }
.repl-quote { font-size: var(--text-sm); color: var(--text2); font-style: italic; margin-top: .3rem; border-left: 2px solid var(--cb-ok-dim); padding-left: .5rem; }
.repl-reason { font-size: var(--text-xs); color: var(--text3); margin-top: .4rem; }
.repl-source-link { font-size: var(--text-xs); margin-top: .3rem; display: block; }

/* Recommended action */
.recommended-action {
  margin-top: .75rem;
  padding: .6rem .75rem;
  background: var(--cb-warn-bg);
  border: 1px solid rgba(245,200,66,.22);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--text2);
}
.recommended-action strong { color: var(--cb-warn); }
.remediation-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: .35rem;
}
.remediation-text { color: var(--text2); line-height: 1.55; }


/* ── NL Query Section ───────────────────────────────── */
.nl-section {
  border-top: 2px solid var(--border3);
  padding: var(--space-6) 0;
  background: linear-gradient(180deg, var(--surface) 0%, #111318 100%);
}
.nl-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
}
.nl-inner > * { grid-column: 1; }
@media (max-width: 600px) {
  .nl-inner {
    grid-template-columns: 1fr;
  }
  .nl-inner > * { grid-column: 1; }
}
.nl-header {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  margin-bottom: .6rem;
}
.nl-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 4px;
  color: var(--text2);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  margin-top: .65rem;
  margin-bottom: 0;
}
.nl-trigger-btn:hover { border-color: var(--gold); color: var(--gold); }
.nl-expandable { margin-top: .85rem; }
.nl-subheader { font-size: var(--text-sm); color: var(--text3); margin-bottom: 1rem; line-height: 1.55; }
.nl-suggested { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.nl-pill {
  background: rgba(191,149,85,.06);
  border: 1px solid var(--border2);
  color: var(--text2);
  padding: .32rem .75rem;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
  white-space: normal;
  max-width: 220px;
  line-height: 1.35;
  text-align: left;
}
.nl-pill:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(191,149,85,.12);
}
.nl-pill:active {
  transform: scale(.97);
  background: rgba(191,149,85,.18);
}
.nl-pill--selected {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(191,149,85,.14);
}
.nl-pill--loading {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) { .chain-affordance-bar{ transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .nl-pill:active { transform: none; }
}
/* nl-query: trace bar */
.nl-trace-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
  font-size: var(--text-xs);
  font-family: var(--mono);
  color: var(--text3);
}
.nl-trace-label {
  color: var(--text3);
  font-size: var(--text-xs);
  font-family: var(--mono);
}
.nl-trace-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .5rem;
  border-radius: 3px;
  font-size: var(--text-xs);
  font-family: var(--mono);
  letter-spacing: .02em;
}
.nl-trace-badge--ok {
  background: var(--cb-ok-bg);
  color: var(--cb-ok);
  border: 1px solid var(--cb-ok-dim);
}
.nl-trace-badge--none {
  background: rgba(237,232,220,.05);
  color: var(--text3);
  border: 1px solid var(--border);
}
/* nl-query: conversation thread */
.nl-thread {
  margin-bottom: .75rem;
}
.nl-turn {
  margin-bottom: .5rem;
  font-size: var(--text-xs);
  line-height: 1.45;
}
.nl-turn--user {
  text-align: right;
  color: var(--gold);
  font-family: var(--mono);
}
.nl-turn--assistant {
  text-align: left;
  color: var(--text3);
}
.nl-turn--prior {
  opacity: .6;
}
/* nl-query: KG vs synthesis source labels */
.nl-source-label {
  font-size: .65rem;
  font-family: var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border-radius: 2px;
  display: inline-block;
  margin-bottom: .4rem;
}
.nl-source-label--synth {
  color: var(--cb-warn);
  background: var(--cb-warn-bg);
  border: 1px solid var(--cb-warn-dim);
}
.nl-source-label--kg {
  color: var(--cb-ok);
  background: var(--cb-ok-bg);
  border: 1px solid var(--cb-ok-dim);
}
.nl-synth-disclosure {
  font-size: .7rem;
  color: var(--text3);
  font-style: italic;
  margin-bottom: .5rem;
}
.nl-input-row { display: flex; gap: .5rem; margin-bottom: .85rem; }
.nl-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: .6rem 1rem;
  font-size: var(--text-base);
  font-weight: 400;
  font-family: var(--sans);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nl-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(191,149,85,.1);
}
.nl-btn {
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: var(--radius);
  padding: .6rem 1.3rem;
  min-height: 44px;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.nl-btn:hover {
  background: #d4aa6a;
  box-shadow: 0 4px 16px rgba(191,149,85,.3);
}
.nl-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.nl-trace-wrapper { margin-bottom: .75rem; }
.nl-trace summary { font-size: var(--text-sm); color: var(--text3); cursor: pointer; }
.nl-trace pre { font-family: var(--mono); font-size: var(--text-xs); color: var(--text2); margin-top: .4rem; white-space: pre-wrap; }
.nl-result { font-size: var(--text-base); }

/* Oracle response wrapper */
.oracle-response {
  border-left: 3px solid var(--gold);
  padding: .95rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: .85rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.oracle-response.oracle-scope {
  border-left-color: var(--ghost);
  opacity: .8;
}
.oracle-answer {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: .75rem;
}
.oracle-body {
  margin-bottom: .65rem;
}
.oracle-provenance {
  font-size: var(--text-xs);
  color: var(--text3);
  font-family: var(--mono);
  letter-spacing: .02em;
  padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.kg-answer { line-height: 1.6; color: var(--text); }
.kg-answer p { margin: 0 0 .75rem; }
.kg-answer p:last-child { margin-bottom: 0; }
.kg-answer strong { color: var(--gold); font-weight: 600; }
.kg-answer em { color: var(--text2); font-style: italic; }
.nl-offline-msg { font-size: var(--text-sm); color: var(--text3); font-style: italic; }

/* ── Source Excerpt Modal ───────────────────────────── */
@keyframes modal-in {
  from { opacity: 0; transform: scale(.96) translateY(.6rem); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 100;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 2rem 1rem;
}
.modal-box {
  background: var(--surface);
  border: 1px solid rgba(191,149,85,.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.65), 0 0 0 1px rgba(191,149,85,.08);
  width: 100%;
  max-width: 700px;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: modal-in .22s var(--ease) both;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.modal-title { font-size: var(--text-sm); font-weight: 700; color: var(--text2); }
.modal-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1rem;
  cursor: pointer;
  padding: .6rem;
  min-height: 44px;
  min-width: 44px;
  line-height: 1;
}
.modal-body {
  flex: 1 1 0;
  min-height: 0;
  padding: 1rem;
  overflow-y: auto;
  position: relative;
  font-family: var(--mono);
  font-size: var(--text-sm);
  color: var(--text2);
  white-space: pre-wrap;
  line-height: 1.6;
}
mark.modal-highlight {
  background: rgba(191,149,85,.22);
  color: var(--gold);
  border-radius: 2px;
  padding: 0 2px;
  scroll-margin-block: 8rem;
}

/* ── Footer ─────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: .35rem 1rem;
  font-size: var(--text-xs);
  color: var(--text3);
  border-top: 1px solid rgba(191,149,85,.05);
  letter-spacing: .04em;
}
.footer-link {
  color: var(--text3);
  text-decoration: none;
  transition: color .15s;
}
.footer-link:hover { color: var(--gold); }

/* ── Verdict / status helpers ───────────────────────── */
.verdict-badge {
  display: inline-block;
  font-size: var(--text-2xl);
  padding: .45rem .9rem;
  border-radius: 5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.verdict-badge.supported   { background: var(--cb-ok-bg);   color: var(--cb-ok);   border: 1px solid var(--cb-ok-dim);   border-left: 3px solid var(--cb-ok-dim); }
.verdict-badge.unsupported { background: var(--cb-err-bg);  color: var(--cb-err);  border: 1px solid var(--cb-err-dim);  border-left: 4px solid var(--cb-err-dim); }
.verdict-badge.partial     { background: var(--cb-warn-bg); color: var(--cb-warn); border: 1px solid var(--cb-warn-dim); border-left: 3px dashed var(--cb-warn-dim); }
.verdict-badge.neutral     { background: transparent;       color: var(--ghost);   border: 1px solid var(--border); }
/* Secondary symbol cues — decorative; badge text carries semantic meaning for AT */
.verdict-badge::before { margin-right: .3rem; }
.verdict-badge.supported::before   { content: '●'; }
.verdict-badge.unsupported::before { content: '✕'; }
.verdict-badge.partial::before     { content: '⚠'; }
.verdict-badge.neutral::before     { content: '—'; }
/* ── Tier 1 fabrication-class (vermillion, strong) ── */
.verdict-badge.ghost             { background: var(--cb-err-bg); color: var(--cb-err); border: 1px solid var(--cb-err-dim); border-left: 4px solid var(--cb-err-dim); }
.verdict-badge.mismatch          { background: var(--cb-err-bg); color: var(--cb-err); border: 1px solid var(--cb-err-dim); border-left: 4px solid var(--cb-err-dim); }
.verdict-badge.quote_text_mismatch { background: var(--cb-err-bg); color: var(--cb-err); border: 1px solid var(--cb-err-dim); border-left: 4px solid var(--cb-err-dim); }
.verdict-badge.ghost::before             { content: '✕'; }
.verdict-badge.mismatch::before          { content: '✕'; }
.verdict-badge.quote_text_mismatch::before { content: '✕'; }
/* ── Tier 2 overruled-class (indigo) ── */
.verdict-badge.overruled           { background: var(--cb-ovr-bg); color: var(--cb-ovr); border: 1px solid rgba(129,140,248,.3); border-left: 4px solid var(--cb-ovr); }
.verdict-badge.doctrine_superseded { background: var(--cb-ovr-bg); color: var(--cb-ovr); border: 1px solid rgba(129,140,248,.3); border-left: 4px solid var(--cb-ovr); }
.verdict-badge.overruled::before           { content: '⊘'; }
.verdict-badge.doctrine_superseded::before { content: '⊘'; }
/* ── Tier 3 warn-class (amber) ── */
.verdict-badge.context_mismatch { background: var(--cb-warn-bg); color: var(--cb-warn); border: 1px solid var(--cb-warn-dim); border-left: 3px solid var(--cb-warn-dim); }
.verdict-badge.narrowed         { background: var(--cb-warn-bg); color: var(--cb-warn); border: 1px solid var(--cb-warn-dim); border-left: 3px solid var(--cb-warn-dim); }
.verdict-badge.context_mismatch::before { content: '⚠'; }
.verdict-badge.narrowed::before         { content: '⚠'; }
/* ── Tier 4 dim-err (vermillion-dim, muted) ── */
.verdict-badge.identity_mismatch { background: var(--cb-err-bg); color: var(--cb-err-dim); border: 1px solid var(--cb-err-dim); border-left: 3px solid var(--cb-err-dim); opacity: .85; }
.verdict-badge.not_found         { background: var(--cb-err-bg); color: var(--cb-err-dim); border: 1px solid var(--cb-err-dim); border-left: 3px solid var(--cb-err-dim); opacity: .85; }
.verdict-badge.identity_mismatch::before { content: '?'; }
.verdict-badge.not_found::before         { content: '?'; }

/* ── Hero — V2 story-first entry ─────────────────────── */
.hero {
  min-height: calc(100dvh - 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem var(--space-5) 4rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  max-width: 620px;
  width: 100%;
}
.hero-tag {
  font-size: .72rem;
  font-family: var(--mono);
  color: var(--text3);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.hero-tag-link {
  color: var(--text3);
  text-decoration: none;
  transition: color .15s;
}
.hero-tag-link:hover { color: var(--text2); }
.hero-hed {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.13;
  letter-spacing: -.025em;
  color: var(--text);
  margin: 0 0 1.1rem;
}
.hero-thesis {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: .6rem;
}
.hero-thesis--reveal {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(191,149,85,.25);
}
.hero-doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: var(--space-5);
}
.hero-doc-label {
  font-size: .78rem;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.005em;
  margin-bottom: .6rem;
}
.hero-doc-text {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text2);
  margin: 0;
}
.hero-cite {
  background: rgba(191,149,85,.16);
  color: var(--accent);
  border-radius: 2px;
  padding: .1em .3em;
  border-bottom: 1px solid rgba(191,149,85,.38);
  cursor: default;
  transition: background .35s, color .35s, border-color .35s;
  text-decoration: none;
  font-style: normal;
}
.hero-cite--checking {
  animation: hero-pulse .7s ease-in-out infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.hero-cite--ghost {
  background: rgba(232,112,64,.14);
  color: var(--cb-err);
  border-bottom-color: var(--cb-err-dim);
}
.hero-cite--mismatch {
  background: rgba(245,200,66,.18);
  color: var(--cb-warn);
  border-bottom-color: var(--cb-warn-dim);
}
.hero-result--mismatch .hero-result-status {
  color: var(--cb-warn);
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius);
  padding: .72rem 1.3rem;
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  transition: opacity .15s;
  margin-bottom: var(--space-5);
  letter-spacing: .01em;
}
.hero-btn:hover:not(:disabled) { opacity: .88; }
.hero-btn:disabled { opacity: .45; cursor: default; }
.hero-result {
  border-left: 3px solid var(--cb-err);
  background: rgba(232,112,64,.06);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-bottom: 1.1rem;
  animation: hero-result-in .28s cubic-bezier(.2,.8,.3,1) both;
}
.hero-result--mismatch {
  border-left-color: var(--cb-warn-dim);
  border-left-style: dashed;
  background: rgba(245,200,66,.07);
  box-shadow: 0 0 0 1px rgba(245,200,66,.18), 0 2px 12px rgba(0,0,0,.25);
}
@keyframes hero-result-in {
  from { opacity: 0; transform: scale(.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);   }
}
.hero-result-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.hero-result-status {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cb-err);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-result-timestamp {
  font-size: .68rem;
  font-family: var(--mono);
  color: var(--text3);
  letter-spacing: .04em;
}
.hero-result-desc {
  font-size: var(--text-sm);
  color: var(--text2);
  line-height: 1.55;
}
.hero-result-source {
  font-size: .7rem;
  font-family: var(--mono);
  color: var(--text3);
  margin-top: .4rem;
}
.hero-result-verdict {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(191,149,85,.18);
}
@keyframes hero-fadein {
  from { opacity: 0; transform: translateY(.4rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-enter-btn {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #0a0a0a;
  border: none;
  border-radius: var(--radius);
  padding: .72rem 1.3rem;
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  transition: opacity .15s;
  animation: hero-fadein .45s ease both;
  letter-spacing: .01em;
}
.hero-enter-btn:hover {
  opacity: .88;
}
/* Exit: fade + slight lift; JS removes from layout after */
.hero--exit {
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity .38s ease, transform .38s ease;
  pointer-events: none;
}
@media (max-width: 600px) {
  /* On small phones the hero content exceeds viewport — compress so the
     "Audit this citation" button is visible without scrolling.         */
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding: 1.25rem 1rem 1.5rem;
  }
  .hero-tag { margin-bottom: .35rem; }
  .hero-hed { font-size: 1.25rem; line-height: 1.2; margin-bottom: .65rem; }
  .hero-doc {
    padding: .65rem .9rem;
    margin-bottom: var(--space-3);
  }
  .hero-doc-label { margin-bottom: .4rem; }
  .hero-doc-text { font-size: .8rem; line-height: 1.55; }
  .hero-btn { margin-bottom: var(--space-3); }
}

.step-expand-toggle { display: none; }

/* ── Chain empty state ───────────────────────────────── */
.chain-no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}
.chain-no-data-icon {
  font-size: 2rem;
  line-height: 1;
  color: var(--text3);
  opacity: .5;
}
.chain-no-data-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text2);
  letter-spacing: -.005em;
}
.chain-no-data-body {
  font-size: var(--text-sm);
  color: var(--text3);
  line-height: 1.6;
  max-width: 28ch;
}

/* ── Mobile bottom sheet ─────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-xs: .80rem;
    --text-sm: .85rem;
  }
  /* Cockpit fills viewport — brief panel always visible */
  .cockpit {
    display: block;
    position: relative;
    overflow: hidden;
    height: calc(100dvh - var(--chrome-h));
  }
  /* Slider is a transparent passthrough — no horizontal sliding */
  .cockpit-slider {
    display: block;
    width: 100%;
    height: 100%;
    transition: none;
    transform: none;
  }
  /* Brief panel fills full viewport width */
  .brief-panel {
    width: 100%;
    flex-shrink: unset;
    border-right: none;
    height: 100%;
  }
  .brief-paragraphs {
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Chain panel — position:fixed bottom sheet */
  .chain-panel {
    position: fixed;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 85svh;                 /* svh = small viewport height (stays within Safari toolbar) */
    width: auto;
    flex-shrink: unset;
    border-left: none;
    border-radius: 18px 18px 0 0;
    background: var(--surface);
    box-shadow: 0 -4px 32px rgba(0,0,0,.45), 0 -1px 0 rgba(191,149,85,.12);
    transform: translateY(100%);   /* JS controls position via inline style */
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    z-index: 200;
    overflow: hidden;              /* clips content to rounded corners */
    display: flex;
    flex-direction: column;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  }
  .chain-panel.sheet-no-transition {
    transition: none;              /* added/removed by JS during active drag */
  }
  /* Chain content and placeholder scroll within the sheet */
  .chain-content,
  .chain-placeholder {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 20px);
  }
  /* Sheet drag handle */
  .sheet-handle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 0 1rem;       /* 44px touch target: 20px + 4px pill + 16px */
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;            /* prevents browser scroll hijack on handle */
  }
  .sheet-handle:active { cursor: grabbing; }
  .sheet-handle-pill {
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: rgba(191,149,85,.35);
  }
  /* Backdrop — dims brief panel when sheet is open */
  .sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s cubic-bezier(.4,0,.2,1);
    z-index: 199;                  /* one below chain-panel */
  }
  .sheet-backdrop.sheet-backdrop--visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* chain-back-header sticky at top of sheet */
  .chain-back-header {
    display: flex;
    align-items: center;
    min-height: 44px;
    touch-action: none;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: none;
    border-bottom: 3px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    text-align: left;
    font-family: var(--sans);
  }
  .chain-back-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .chain-back-header { transition: border-bottom-color 250ms ease-out; }
  .chain-back-header--verdict-ok   { border-bottom-color: var(--cb-ok); }
  .chain-back-header--verdict-err  { border-bottom-color: var(--cb-err); }
  .chain-back-header--verdict-warn { border-bottom-color: var(--cb-warn); }
  .chain-back-header--verdict-ovr  { border-bottom-color: var(--cb-ovr); }
  /* Tighten chain content for small screens */
  .chain-content { padding: .65rem .9rem; }
  .chain-header { margin-bottom: .65rem; padding-bottom: .55rem; }
  .chain-step {
    padding: .6rem .75rem;
    gap: .4rem .6rem;
    font-size: var(--text-xs);
  }
  .para-row { padding-block: max(var(--space-2), .5rem); }
  .chain-step.step-slim-rule { height: 24px; font-size: .65rem; }

  /* Fix 2C: Touch targets for interactive elements */
  .nl-pill { min-height: 44px; display: inline-flex; align-items: center; }
  .nl-trigger-btn { min-height: 44px; }
  .hero-tag-link { min-height: 44px; display: inline-flex; align-items: center; }
  select { min-height: 44px; }

  /* ── Mobile content reduction ───────────────────────
     Show less on small screens to improve scannability.  */

  /* Passing steps: hide explanation prose — icon + label + status is enough.
     Failing / warned / overruled steps keep full detail so problems are readable. */
  .chain-step.step-promoted .step-explanation { display: none; }

  /* Confidence scores are too small to be useful on mobile */
  .step-conf { display: none; }

  /* Citation badges (! ×) after inline citations are visual noise on mobile —
     the underline style (solid/dashed/dotted/double) already encodes status. */
  .cite-badge { display: none; }

  /* Brief legend is too cramped on mobile; the dot column still signals status per-paragraph */
  .brief-legend { display: none; }

  /* Tighten paragraph row spacing so more paragraphs fit without scrolling */
  .para-row { margin-bottom: .45rem; }
  .brief-paragraphs { padding: var(--space-2) var(--space-3); }
  .chain-case-label {
    display: none;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text3);
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    flex-shrink: 1;
    margin-left: .5rem;
    padding-left: .5rem;
    border-left: 1px solid var(--border);
  }
  .chain-case-label.label-visible { display: inline-block; }
}

@media (min-width: 769px) {
  /* Desktop: slider is transparent passthrough, sheet elements hidden */
  .cockpit-slider { display: contents; }
  .chain-back-header { display: none; }
  .sheet-handle  { display: none; }
  .sheet-backdrop { display: none; }
  /* Restore chain-panel to desktop base values — JS may have written inline
     styles on mobile; the resize handler clears them, but CSS provides a
     safety net in case the handler fires before styles are cleared */
  .chain-panel {
    position: sticky;
    transform: none !important; /* override any JS inline style set on mobile */
    border-radius: 0;
    box-shadow: none;
    left: auto;
    right: auto;
    width: auto;
  }
}


@media (max-width: 1049px) {
  .brief-legend .cite-legend-item { display: none; }
}

/* ── Opposing Counsel Section ─────────────────────────────────────────────── */
.opp-section {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .35s var(--ease), opacity .25s var(--ease), visibility 0s .35s;
}
.opp-section > .opp-inner {
  min-height: 0;
  overflow: hidden;
}
.opp-section.opp-visible {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  border-top: 2px solid var(--border3);
  transition: grid-template-rows .35s var(--ease), opacity .25s var(--ease), visibility 0s 0s;
}
@media (prefers-reduced-motion: reduce) {
  .opp-section,
  .opp-section.opp-visible {
    transition: none;
  }
}
.opp-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5) var(--space-4) var(--space-5);
}
.opp-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.opp-label {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}
.opp-subheader {
  font-size: var(--text-sm);
  color: var(--text3);
  margin: .25rem 0 var(--space-3);
  line-height: 1.5;
}
.opp-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.opp-btn:hover { background: var(--accent); color: #0a0a0a; }
.opp-btn:disabled { opacity: .45; cursor: not-allowed; }
.opp-result {
  margin-top: .9rem;
  padding: 1rem 1.1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  max-width: 880px;
}
.opp-result h4 {
  margin: .7rem 0 .3rem;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
}
.opp-result ul { margin: .3rem 0 .3rem 1.1rem; padding: 0; }
.opp-result li { margin-bottom: .25rem; }
.opp-result p { margin: .3rem 0; }
.opp-disclosure {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-bottom: .75rem;
  padding: .3rem .6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-style: italic;
}

/* ── Side-by-side column layout ────────────────────── */
.opp-columns {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  margin-top: var(--space-3);
}
.opp-col-divider {
  background: var(--border3);
  width: 1px;
  min-height: 0;
}
.opp-col {
  padding: 0 var(--space-4);
  min-width: 0;
}
.opp-col-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text3);
  margin-bottom: var(--space-2);
}
.opp-snap-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--text-xs);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 99px;
  white-space: nowrap;
}
.opp-snap-badge--agg-ok {
  color: var(--cb-ok);
  background: var(--cb-ok-bg);
  border: 1px solid var(--cb-ok-dim);
}
.opp-snap-badge--agg-warn {
  color: var(--cb-warn);
  background: var(--cb-warn-bg);
  border: 1px solid var(--cb-warn-dim);
}
.opp-snap-badge--agg-err {
  color: var(--cb-err);
  background: var(--cb-err-bg);
  border: 1px solid var(--cb-err-dim);
}
.opp-snap-case {
  font-size: var(--text-sm);
  color: var(--text2);
  margin-top: var(--space-2);
}
.opp-snap-note {
  font-size: var(--text-xs);
  color: var(--text3);
  margin-top: var(--space-1);
}
.opp-col--right .opp-result { max-width: none; margin-top: 0; }
.opp-inner--side-by-side .opp-subheader { display: none; }
@media (max-width: 768px) {
  .opp-columns { grid-template-columns: 1fr; }
  .opp-col-divider { display: none; }
}
@media (not (prefers-reduced-motion: reduce)) {
  /* ── Content crossfade ── */
  @keyframes chainContentOut {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @keyframes chainContentIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .chain-content--exiting {
    animation: chainContentOut 150ms ease-in forwards;
  }
  .chain-content--entering {
    animation: chainContentIn 200ms ease-out forwards;
  }

  /* ── Chain header entrance ── */
  .chain-content--entering .chain-header {
    opacity: 0;
    animation: chainContentIn 200ms ease-out forwards;
    animation-delay: 50ms;
  }

  /* ── Staggered step reveal — delay capped so any-length chain finishes ≤600ms ── */
  @keyframes chainStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  .chain-content--entering .chain-step {
    opacity: 0;
    animation: chainStepIn 200ms ease-out forwards;
    animation-delay: min(100ms + var(--step-index, 0) * 50ms, 400ms);
  }

  /* ── Terminal blocks — fixed delay regardless of chain length ── */
  .chain-content--entering .completeness-row,
  .chain-content--entering .na-summary,
  .chain-content--entering .recommended-action {
    opacity: 0;
    animation: chainStepIn 200ms ease-out forwards;
    animation-delay: 400ms;
  }

  /* ── Verdict badge "verdict landing" ── */
  @keyframes badgeLand {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
  }
  .chain-content--entering .verdict-badge {
    opacity: 0;
    animation: badgeLand 180ms ease-out forwards;
    animation-delay: 200ms;
  }

  @keyframes nl-dot-pulse {
    0%, 100% { opacity: .3; }
    50%      { opacity: 1; }
  }
  .nl-loading-dot {
    animation: nl-dot-pulse 1.2s ease-in-out infinite;
  }

  @keyframes select-beckon {
    0%, 100% { transform: translateY(-50%); }
    50%      { transform: translateY(calc(-50% + 3px)); }
  }

  @keyframes dot-beckon {
    0%   { transform: scale(1);    filter: drop-shadow(0 0 0px var(--para-status-color, var(--cb-err))); }
    40%  { transform: scale(1.55); filter: drop-shadow(0 0 5px var(--para-status-color, var(--cb-err))); }
    100% { transform: scale(1);    filter: drop-shadow(0 0 0px var(--para-status-color, var(--cb-err))); }
  }
  .para-dot.dot-beckon {
    animation: dot-beckon 0.45s ease-out 3;
    transform-origin: center;
  }
}

/* ── Reduced Motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ── Screen-reader utility ───────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

/* ── Focus visibility (WCAG 2.4.7) ─────────────────────────────── */
/* Suppress outline for mouse/touch — applies globally to all interactives */
:focus:not(:focus-visible) {
  outline: none;
}

/* Keyboard focus ring — gold ring consistent across all interactives */
a[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ── DB failure error state ──────────────────────────── */
.db-error-panel {
  padding: 2rem;
  text-align: center;
  color: var(--text3);
}
.db-error-title {
  font-size: 1.2rem;
  margin-bottom: .5rem;
  color: var(--cb-err);
}
.db-error-msg {
  margin-bottom: 1rem;
  font-size: var(--text-sm);
}
.db-retry-btn {
  background: var(--gold);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  padding: .5rem 1.2rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
}

/* ── Delphi suggestion pills (dead-end recovery) ───── */
.delphi-suggestions {
  margin-top: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.delphi-suggestions-label {
  font-size: var(--text-xs);
  color: var(--text3);
  width: 100%;
  margin-bottom: .15rem;
}


/* ── Chain verification minimap ──────────────────────── */
.chain-minimap-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 6px;
}
.chain-minimap-scroll::-webkit-scrollbar { display: none; }
.chain-minimap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin: .5rem 0 .4rem;
  padding: 2rem .6rem .45rem; /* top padding gives tooltip room to render above nodes */
  background: var(--surface2);
  border-radius: 6px;
  overflow: visible;
  gap: 0;
}
@media (max-width: 768px) {
  .chain-minimap-scroll {
    /* tooltips hidden on mobile — touch can't hover, and chain-panel overflow:hidden clips them */
  }
  .chain-minimap .minimap-node[data-mmn-tip]::before { display: none; }
  .chain-minimap {
    justify-content: center;
    padding: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  /* Lettered dot-chain — KG initial from data-mmn-lbl */
  .chain-minimap .minimap-node {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    letter-spacing: 0;
  }
  .chain-minimap .minimap-node::after {
    content: attr(data-mmn-lbl);
    display: block;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--mono);
    line-height: 1;
    /* Reset mmn-fail::after pulse-ring styles so letter renders in flex flow */
    position: static;
    inset: unset;
    border: none;
    border-radius: 0;
    animation: none;
    pointer-events: none;
  }
  .chain-minimap .minimap-lbl { display: none; }
  .chain-minimap .minimap-conn {
    width: 10px;
    min-width: 10px;
    height: 2px;
    margin-top: 17px; /* center on 36px node */
  }
  /* Step counter chip — right end of back-header */
  .chain-step-counter {
    color: var(--text3);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
  }
  /* ── TL;DR peek strip (verdict summary shown in sheet peek state) ── */
  .tldr-strip-wrapper {
    border-bottom: 1px solid var(--border2);
  }
  .tldr-strip {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .tldr-strip-badge {
    margin-bottom: var(--space-1);
  }
  .tldr-strip-count {
    color: var(--text3);
    font-size: var(--text-xs);
    letter-spacing: .02em;
  }
  .tldr-strip-cta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .03em;
  }
  .tldr-cta-chevron {
    font-size: 1em;
    line-height: 1;
  }

  /* ── Mobile affordance bar + step clamp ── */
  .chain-affordance-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 198;
    height: calc(48px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex; align-items: center;
    padding: 0 var(--space-3);
    gap: var(--space-2);
    background: var(--surface2);
    border-top: 1px solid var(--border2);
    color: var(--gold);
    font-size: var(--text-base); font-weight: 600;
    cursor: pointer;
    opacity: 0; transform: translateY(100%); pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .chain-affordance-bar.bar-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .chain-affordance-bar .affordance-chevron { font-size: 1.1em; flex-shrink: 0; }
  .chain-affordance-bar .affordance-text { font-weight: 600; flex-shrink: 0; }
  .chain-affordance-bar .affordance-label { color: var(--text2); font-weight: 400; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; min-width: 0; }
  .chain-affordance-bar .affordance-dismiss { margin-left: auto; flex-shrink: 0; background: none; border: none; color: var(--text3); font-size: 1.1rem; cursor: pointer; padding: 0 var(--space-2); line-height: 1; min-height: 44px; display: flex; align-items: center; }
  /* Keep brief content scrollable above the peek bar at all times */
  .brief-paragraphs { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
  .step-explanation { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .step-body--expanded .step-explanation { -webkit-line-clamp: unset; overflow: visible; }
  .step-expand-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text3); font-size: var(--text-sm); font-family: inherit; padding: 2px 8px; margin-top: var(--space-1); cursor: pointer; transition: color .15s, border-color .15s; min-height: 44px; }
  .step-expand-toggle:hover, .step-expand-toggle:focus-visible { color: var(--gold); border-color: var(--gold); }
  .step-expand-toggle .chevron { display: inline-block; transition: transform .2s var(--ease); font-style: normal; }
  .step-body--expanded .step-expand-toggle .chevron { transform: rotate(180deg); }
  .step-expand-toggle .toggle-text::after { content: 'more'; }
  .step-body--expanded .step-expand-toggle .toggle-text::after { content: 'less'; }
  /* ── Paragraph context anchor — excerpt below sheet back-header ── */
  .chain-para-excerpt {
    display: none;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border2);
    background: var(--surface);
    font-size: var(--text-xs);
    font-weight: 400;
    font-style: italic;
    color: var(--text3);
    line-height: 1.45;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .chain-para-excerpt.excerpt-visible {
    display: block;
  }
}
.minimap-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  flex-shrink: 0;
  animation: mmn-enter 280ms var(--ease) both;
  animation-delay: calc(var(--mmn-i, 0) * 55ms);
}
.minimap-node {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .5rem;
  font-weight: 800;
  cursor: default;
  position: relative;
  transition: transform .12s var(--ease);
}
.minimap-lbl {
  font-size: var(--text-xs);
  color: var(--text3);
  white-space: nowrap;
  letter-spacing: .01em;
  max-width: 40px;
  text-align: center;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
@media (not (prefers-reduced-motion: reduce)) {
  .minimap-node:hover { transform: scale(1.3); }
}
.minimap-conn {
  width: 16px;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--border2) 30%, var(--border2) 70%, transparent);
  flex-shrink: 0;
  margin-top: 10px; /* center on 22px node */
}
/* node status colors */
.mmn-promoted { background: var(--cb-ok-bg);             border-color: var(--cb-ok);   color: var(--cb-ok); box-shadow: 0 0 7px 1px rgba(78,201,176,.30); }
.mmn-fail     { background: var(--cb-err-bg);            border-color: var(--cb-err);  color: var(--cb-err); }
.mmn-warn     { background: var(--cb-warn-bg);           border-color: var(--cb-warn); color: var(--cb-warn); }
.mmn-ovr      { background: rgba(129,140,248,.08);       border-color: var(--cb-ovr);  color: var(--cb-ovr); }
.mmn-grey     { background: transparent;                 border-color: var(--border2); color: var(--text3); border-style: dashed; }

/* mmn-fail pulse ring */
@keyframes mmn-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { transform: scale(1.9); opacity: 0;  }
  100% { transform: scale(1.9); opacity: 0;  }
}
.mmn-fail::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--cb-err);
  animation: mmn-pulse 1.67s ease-out 6;
  pointer-events: none;
}

/* entrance animation */
@keyframes mmn-enter {
  from { opacity: 0; transform: scale(.7) translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* CSS tooltip — ::before keeps it clear of the ::after pulse ring on .mmn-fail */
.minimap-node[data-mmn-tip]::before {
  content: attr(data-mmn-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface3);
  color: var(--text);
  font-size: var(--text-xs);
  font-family: var(--sans);
  font-weight: 400;
  white-space: nowrap;
  padding: .25rem .5rem;
  border-radius: 4px;
  border: 1px solid var(--border2);
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity .12s ease;
}
.minimap-node[data-mmn-tip]:hover::before {
  opacity: 1;
}

/* portal tooltip for mobile (JS-positioned, escapes chain-panel overflow) */
#mmn-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  background: var(--surface3);
  color: var(--text);
  font-size: var(--text-xs);
  font-family: var(--sans);
  font-weight: 400;
  white-space: nowrap;
  padding: .25rem .5rem;
  border-radius: 4px;
  border: 1px solid var(--border2);
  opacity: 0;
  transition: opacity .1s ease;
  transform: translateX(-50%);
}

.chain-minimap.mmn-no-enter .minimap-step { animation: none; }

/* reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .minimap-step { animation: none; }
  .mmn-fail::after { animation: none; }
}

/* ── Chain skeleton loader ──── */
.chain-skeleton {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skel-line,
.skel-badge {
  background: linear-gradient(
    90deg,
    var(--surface3) 25%,
    var(--surface2) 50%,
    var(--surface3) 75%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}

@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel-line         { height: 12px; }
.skel-line--full   { width: 100%; }
.skel-line--wide   { width: 75%; }
.skel-line--mid    { width: 50%; }
.skel-line--narrow { width: 35%; }

.skel-badge { height: 28px; width: 100px; }

.skel-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .skel-line,
  .skel-badge {
    animation: none;
  }
}