/* Beyond Parity — Addon styles
   Extends _shared.css with tier system, phase timeline, status indicators, oh-my-pi color */

:root {
  /* oh-my-pi platform color */
  --omp: oklch(0.48 0.14 75);
  --omp-bg: oklch(0.48 0.14 75 / 0.06);
  --omp-border: oklch(0.48 0.14 75 / 0.22);
  /* Build tier semantic colors */
  --tier1: oklch(0.38 0.12 160);
  --tier1-bg: oklch(0.38 0.12 160 / 0.06);
  --tier1-border: oklch(0.38 0.12 160 / 0.22);
  --tier2: oklch(0.40 0.10 245);
  --tier2-bg: oklch(0.40 0.10 245 / 0.06);
  --tier2-border: oklch(0.40 0.10 245 / 0.22);
  --tier3: oklch(0.44 0.14 55);
  --tier3-bg: oklch(0.44 0.14 55 / 0.06);
  --tier3-border: oklch(0.44 0.14 55 / 0.22);
  --tier4: oklch(0.48 0.14 75);
  --tier4-bg: oklch(0.48 0.14 75 / 0.06);
  --tier4-border: oklch(0.48 0.14 75 / 0.22);
  /* Status colors */
  --planned: oklch(0.50 0.01 55);
  --building: oklch(0.55 0.14 85);
  --shipped: oklch(0.45 0.14 160);
  --blocked: oklch(0.50 0.16 25);
  --critical: oklch(0.45 0.18 15);
  --critical-bg: oklch(0.45 0.18 15 / 0.06);
  --critical-border: oklch(0.45 0.18 15 / 0.28);
}

/* oh-my-pi variants for shared components */
.state-card--omp::before { background: var(--omp); }
.state-card--omp:hover { border-color: var(--omp-border); box-shadow: 0 4px 20px var(--omp-bg); }
.state-card--omp h4 { color: var(--omp); }
.state-card--omp .verb-chip { border-color: var(--omp-border); color: var(--omp); }
.chip--omp { border-color: var(--omp-border); color: var(--omp); background: var(--omp-bg); }
.matrix__verdict--omp { background: var(--omp-bg); color: var(--omp); border: 1px solid var(--omp-border); }
.console-verb--omp { color: var(--omp); }

/* ─── TIER BADGES ─── */
.tier-badge {
  font-family: var(--mono); font-size: 0.70rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 100px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.tier-badge--1 { background: var(--tier1-bg); color: var(--tier1); border: 1px solid var(--tier1-border); }
.tier-badge--2 { background: var(--tier2-bg); color: var(--tier2); border: 1px solid var(--tier2-border); }
.tier-badge--3 { background: var(--tier3-bg); color: var(--tier3); border: 1px solid var(--tier3-border); }
.tier-badge--4 { background: var(--tier4-bg); color: var(--tier4); border: 1px solid var(--tier4-border); }

/* ─── STATUS INDICATORS ─── */
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  vertical-align: middle; margin-right: 0.35rem;
}
.status-dot--planned { background: var(--planned); }
.status-dot--building { background: var(--building); animation: pulse 2s infinite; }
.status-dot--shipped { background: var(--shipped); }
.status-dot--blocked { background: var(--blocked); }
.status-dot--critical { background: var(--critical); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-chip {
  font-family: var(--mono); font-size: 0.70rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.18rem 0.45rem; border-radius: 100px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.status-chip--planned { color: var(--planned); border: 1px solid oklch(0.50 0.01 55 / 0.3); }
.status-chip--building { color: var(--building); border: 1px solid oklch(0.55 0.14 85 / 0.3); background: oklch(0.55 0.14 85 / 0.06); }
.status-chip--shipped { color: var(--shipped); border: 1px solid oklch(0.45 0.14 160 / 0.3); background: oklch(0.45 0.14 160 / 0.06); }

/* ─── PHASE TIMELINE ─── */
.phase-timeline {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem;
  margin: 1.5rem 0;
}
.phase-block {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 1rem 0.75rem; background: var(--bg-card);
  text-align: center; position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.phase-block:hover {
  border-color: var(--copper); box-shadow: 0 3px 12px oklch(0 0 0 / 0.3);
}
.phase-block__num {
  font-family: var(--display); font-size: 1.8rem; font-weight: 400;
  color: var(--ghost); line-height: 1; margin-bottom: 0.35rem;
}
.phase-block__title {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.25rem;
}
.phase-block__weeks {
  font-family: var(--body); font-size: 0.78rem; color: var(--text-dim);
  font-style: italic;
}

/* ─── SUPERSESSION ARROWS ─── */
.supersession {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted);
  margin: 0.5rem 0;
}
.supersession__from {
  padding: 0.2rem 0.5rem; border: 1px solid var(--border);
  border-radius: 4px; color: var(--text-dim); text-decoration: line-through;
}
.supersession__arrow { color: var(--copper); font-weight: 700; }
.supersession__to {
  padding: 0.2rem 0.5rem; border: 1px solid var(--subq-border);
  border-radius: 4px; color: var(--subq); font-weight: 600;
  background: var(--subq-bg);
}

/* ─── REQUIREMENT CARD ─── */
.req-card {
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 1.25rem 1.5rem; background: var(--bg-card);
  margin-bottom: 0.75rem; display: grid;
  grid-template-columns: auto 1fr auto; gap: 0.75rem 1rem;
  align-items: start;
}
.req-card__id {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  color: var(--copper); white-space: nowrap; padding-top: 0.15rem;
}
.req-card__body h5 {
  font-family: var(--display); font-size: 1.15rem; font-weight: 500; font-style: italic;
  color: var(--ink); margin-bottom: 0.3rem; line-height: 1.2;
}
.req-card__body p {
  font-family: var(--body); font-size: 0.85rem; color: var(--text-body);
  line-height: 1.55;
}
.req-card__meta {
  display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end;
}

/* ─── CRITICAL CONSOLE VERB ─── */
.console-verb--critical { color: var(--critical); }

/* ─── CRITICAL SECURITY CARDS ─── */
.state-card--critical::before { background: var(--critical); }
.state-card--critical:hover { border-color: var(--critical-border); box-shadow: 0 4px 20px var(--critical-bg); }
.state-card--critical h4 { color: var(--critical); }
.state-card--critical .verb-chip { border-color: var(--critical-border); color: var(--critical); }
.chip--critical { border-color: var(--critical-border); color: var(--critical); background: var(--critical-bg); }
.matrix__verdict--critical { background: var(--critical-bg); color: var(--critical); border: 1px solid var(--critical-border); }
.matrix-note--critical { border-color: var(--critical-border, var(--critical)); background: var(--critical-bg); }
.matrix-note--critical strong { color: var(--critical); }

/* ─── SAVINGS CALLOUT ─── */
.savings-callout {
  border: 2px solid var(--subq-border); border-radius: 14px;
  padding: 1.5rem; background: var(--subq-bg); text-align: center;
}
.savings-callout__number {
  font-family: var(--display); font-size: 3rem; font-weight: 400; font-style: italic;
  color: var(--subq); line-height: 1;
}
.savings-callout__label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 0.35rem;
}

/* ─── BEM ALIASES (match _shared.css flat classes) ─── */
.debugger-panel__header {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1rem; background: oklch(0.18 0.02 265);
  border-radius: 10px 10px 0 0;
}
.debugger-panel__dot { width: 9px; height: 9px; border-radius: 50%; }
.debugger-panel__dot--red { background: oklch(0.55 0.18 25); }
.debugger-panel__dot--amber { background: oklch(0.65 0.14 85); }
.debugger-panel__dot--green { background: oklch(0.50 0.14 160); }
.debugger-panel__title {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ghost);
  margin-left: auto;
}
.debugger-panel__body { padding: 1rem 1.25rem; overflow-x: auto; }

.ring__label {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 0.5rem; padding: 0 0.25rem;
}

.cap-panel__header {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copper); margin-bottom: 0.5rem;
}

/* ─── HERO IMAGE ─── */
.hero-image {
  margin: -1rem calc(-1 * var(--gutter, 1.5rem)) 2rem;
  border-radius: 12px; overflow: hidden;
  position: relative;
}
.hero-image img {
  width: 100%; height: auto; display: block;
  outline: 1px solid oklch(0 0 0 / 0.08); outline-offset: -1px;
}

/* ─── EDITORIAL TOC ─── */
.toc { margin-bottom: 2.5rem; }
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0.75rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.2s cubic-bezier(0.25,1,0.5,1), background 0.2s;
  border-radius: 6px;
  align-items: baseline;
}
.toc-item:first-child { border-top: 1px solid var(--border); }
.toc-item:hover { padding-left: 0.75rem; background: var(--bg-warm); }
.toc-item:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.toc-item:active { transform: scale(0.99); }
.toc-item__num {
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--ghost);
  line-height: 1;
  font-style: italic;
}
.toc-item__body { min-width: 0; }
.toc-item__title {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.toc-item__desc {
  font-family: var(--body);
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.45;
}
.toc-item__arrow {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--copper);
  align-self: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.toc-item:hover .toc-item__arrow,
.toc-item:focus-visible .toc-item__arrow { opacity: 1; }

/* ─── INLINE ADVANTAGES ─── */
.inline-advantages { margin-top: 0.5rem; }
.advantage-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.advantage-row__icon {
  font-size: 1rem;
  color: var(--copper);
  flex-shrink: 0;
  position: relative;
  top: 0.1em;
}
.advantage-row:first-child { border-top: 1px solid var(--border); }
.advantage-row__name {
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--subq);
  min-width: 170px;
  flex-shrink: 0;
}
.advantage-row__desc {
  font-family: var(--body);
  font-size: 0.85rem;
  color: var(--text-body);
  line-height: 1.5;
}

/* ─── PULLQUOTE ─── */
.pullquote {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--copper);
  line-height: 1.4;
  padding: 2rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 2.5rem 0;
  max-width: 720px;
}

/* ─── FEATURED-FIRST GRID ─── */
.states-grid--featured .state-card:first-child {
  grid-column: 1 / -1;
}
.states-grid--featured .state-card:first-child h5 {
  font-size: 1.5rem;
}

/* ─── SECTION BREAK ─── */
.section-break {
  border: none; border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ─── PAGE NAV STRIP ─── */
.page-nav {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.75rem 2rem; margin: 0 auto 0.5rem;
  max-width: 960px;
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 1;
  justify-content: center;
}
.page-nav a {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-label); text-decoration: none;
  padding: 0.25rem 0.55rem; border-radius: 100px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  min-height: 44px; display: inline-flex; align-items: center;
}
.page-nav a:hover {
  color: var(--copper); border-color: var(--border);
}
.page-nav a:focus-visible {
  outline: 2px solid var(--copper); outline-offset: 2px;
}
.page-nav a:active {
  transform: scale(0.96);
}
.page-nav a[aria-current="page"] {
  color: var(--nav-active); border-color: var(--nav-active-border);
  background: var(--nav-active-bg); font-weight: 700;
}

/* ─── TABULAR NUMS ─── */
.savings-callout__number,
.phase-block__num,
.req-card__id { font-variant-numeric: tabular-nums; }

/* ─── MATRIX COLUMN CLASSES ─── */
.matrix--parity .matrix__row { grid-template-columns: 2fr 1fr 1fr 1fr; }
.matrix--cost-ranking .matrix__row { grid-template-columns: 50px 1.5fr 1fr 1fr 100px; }
.matrix--model-roles .matrix__row { grid-template-columns: 1fr 2fr 1fr 1fr; }
.matrix--metrics .matrix__row { grid-template-columns: 50px 2fr 1fr 1fr 1.5fr; }
.matrix--trust .matrix__row { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.matrix--risk .matrix__row { grid-template-columns: 2fr 1fr 1fr 2fr; }
.matrix--pain .matrix__row { grid-template-columns: 2fr 1fr 1fr 1fr; }
.matrix--3col .matrix__row { grid-template-columns: 2fr 1fr 1fr; }
.matrix--4col .matrix__row { grid-template-columns: 1fr 1fr 1fr 1fr; }
.matrix--5col .matrix__row { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.matrix--supersession .matrix__row { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
.matrix--variant .matrix__row { grid-template-columns: 100px 1fr 1fr; }
.matrix--session-pain .matrix__row { grid-template-columns: 1fr 1fr 100px; }
.matrix--targets .matrix__row { grid-template-columns: 60px 1fr 120px 140px; }

/* ─── GLOSSARY ─── */
.glossary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}
.glossary__entry {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.glossary__entry:nth-child(4n+3),
.glossary__entry:nth-child(4n+4) { background: var(--bg-card); }
.glossary__term {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--copper);
  letter-spacing: 0.04em;
  margin: 0;
}
.glossary__def {
  font-family: var(--body);
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 900px) {
  .glossary { grid-template-columns: 1fr; }
  .glossary__entry:nth-child(4n+3),
  .glossary__entry:nth-child(4n+4) { background: none; }
  .glossary__entry:nth-child(odd) { background: var(--bg-card); }
}
@media (max-width: 640px) {
  .glossary__entry { grid-template-columns: 5rem 1fr; gap: 0.5rem; }
}

/* ─── HOOK-CARD ICON ─── */
.hook-card__icon {
  font-size: 1.1rem; color: var(--copper); flex-shrink: 0;
  position: relative; top: 0.05em;
}

/* ─── DIAGRAM PANEL ─── */
.diagram-panel {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.diagram-panel svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.diagram-panel__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.75rem;
}
.diagram-panel__caption {
  font-family: var(--display);
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-dim);
  text-align: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.diagram-panel--copper {
  border-color: oklch(0.45 0.12 55 / 0.3);
  background: oklch(0.45 0.12 55 / 0.03);
}
.diagram-panel--bleed { padding: 0; }
.diagram-panel--bleed .diagram-panel__caption { padding: 0.75rem 1.5rem; }
.diagram-panel--bleed .diagram-panel__label { padding: 1rem 1.5rem 0; }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .phase-timeline { grid-template-columns: repeat(3, 1fr); }
  .req-card { grid-template-columns: auto 1fr; }
  .req-card__meta { grid-column: 1 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 640px) {
  .diagram-panel { padding: 1rem; }
  .diagram-panel--bleed .diagram-panel__caption { padding: 0.75rem 1rem; }
  .phase-timeline { grid-template-columns: 1fr 1fr; }
  .req-card { grid-template-columns: 1fr; }
  .req-card__id { order: -1; }
  .page-nav { gap: 0.25rem; }
  .page-nav a { font-size: 0.65rem; padding: 0.2rem 0.4rem; min-height: 44px; }
  .matrix--cost-ranking .matrix__row,
  .matrix--metrics .matrix__row,
  .matrix--trust .matrix__row,
  .matrix--5col .matrix__row { grid-template-columns: 1fr 1fr; }
  .matrix--parity .matrix__row,
  .matrix--model-roles .matrix__row,
  .matrix--risk .matrix__row,
  .matrix--pain .matrix__row,
  .matrix--4col .matrix__row,
  .matrix--3col .matrix__row { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INTELLIGENCE COMPONENTS
   Entity dossiers, stat stacks, utterances, editorial notes, entity flows,
   fact blocks, sub-navigation, and source lists.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── ENTITY DOSSIER ─── */
.dossier {
  position: relative;
  overflow: hidden;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  background: var(--dossier-bg);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: 0 18px 45px oklch(0 0 0 / 0.3);
}
.dossier::before {
  content: attr(data-watermark);
  position: absolute;
  right: -0.4rem;
  bottom: -1.9rem;
  font-family: var(--display);
  font-size: clamp(4rem, 16vw, 11rem);
  font-style: italic;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
  white-space: nowrap;
}
.dossier--secondary {
  border-width: 1px;
  border-color: var(--border);
  background: var(--dossier-bg-secondary);
  box-shadow: none;
  opacity: 0.92;
}
.dossier--secondary::before {
  font-size: clamp(3.5rem, 14vw, 9rem);
  bottom: -1.5rem;
  opacity: 0.035;
}

.dossier__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(9rem, 4fr) minmax(0, 8fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.dossier--secondary .dossier__hero {
  grid-template-columns: minmax(7rem, 3fr) minmax(0, 9fr);
}

.dossier__mark {
  display: grid;
  gap: 0.75rem;
  align-content: center;
  justify-items: center;
}
.dossier__mark img {
  width: clamp(7rem, 15vw, 10rem);
  height: clamp(7rem, 15vw, 10rem);
  object-fit: contain;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1.1rem;
}
.dossier--secondary .dossier__mark img {
  width: clamp(5.5rem, 12vw, 8rem);
  height: clamp(5.5rem, 12vw, 8rem);
  padding: 0.9rem;
}

.dossier__name {
  font-family: var(--display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 0.95;
  color: var(--ink);
  margin: 0;
}
.dossier--secondary .dossier__name {
  font-size: clamp(2rem, 6vw, 3.8rem);
}

.dossier__subtitle {
  font-family: var(--display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--copper);
  line-height: 1.25;
  margin: 0.2rem 0 0.35rem;
}
.dossier--secondary .dossier__subtitle {
  font-size: 1.1rem;
}

.dossier__kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
}

.dossier__tag {
  display: inline-flex;
  width: fit-content;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
}

.dossier__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  gap: 1rem;
  margin-top: 1.15rem;
}
.dossier--secondary .dossier__grid {
  grid-template-columns: minmax(0, 7fr) minmax(14rem, 5fr);
}

.dossier__column {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.dossier__summary p {
  font-size: 1rem;
  line-height: 1.65;
}

/* ─── STAT STACK ─── */
.stat-stack {
  display: grid;
  gap: 0;
  margin-top: 0.35rem;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  border-top: 1px solid var(--border);
}
.stat-stack__item {
  padding: 0.3rem 0;
  text-align: center;
}
.stat-stack__label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}
.stat-stack__value {
  font-family: var(--display);
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.stat-stack__value--warn { color: var(--high); }
.stat-stack__value--dead { color: var(--dealbreaker); }
.stat-stack__value--good { color: var(--shipped); }

/* ─── UTTERANCE BLOCK ─── */
.utterance {
  display: grid;
  grid-template-columns: 2.15rem 1fr;
  gap: 0.8rem;
  align-items: start;
  margin-bottom: 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-warm);
}
.utterance--ai {
  border-color: var(--claude-border);
  background: var(--claude-bg);
}
.utterance--brand {
  background: var(--bg-warm);
}
.utterance i {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--copper);
  background: var(--bg-card);
  font-size: 1.1rem;
}
.utterance--ai i {
  color: var(--claude);
  border-color: var(--claude-border);
}
.utterance p {
  font-family: var(--mono);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
  color: var(--ink);
}

/* ─── EDITORIAL NOTE ─── */
.editorial-note {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(16rem, 5fr);
  gap: 1.5rem;
  align-items: end;
  padding: 1.45rem 0;
  margin: 1.75rem 0 2rem;
  border-top: 1.5px solid var(--border-strong);
  border-bottom: 1.5px solid var(--border-strong);
  overflow: hidden;
}
.editorial-note::before {
  content: attr(data-watermark);
  position: absolute;
  right: -0.2rem;
  top: -0.65rem;
  font-family: var(--display);
  font-size: clamp(3.8rem, 13vw, 8.5rem);
  font-style: italic;
  line-height: 0.9;
  color: var(--ink);
  opacity: 0.045;
  pointer-events: none;
  white-space: nowrap;
}
.editorial-note__kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
}
.editorial-note h3 {
  position: relative;
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.02;
  color: var(--ink);
  margin: 0.15rem 0 0.65rem;
  text-wrap: balance;
}
.editorial-note p {
  position: relative;
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

/* ─── ENTITY FLOW ─── */
.entity-flow {
  position: relative;
  display: grid;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.76rem;
}
.entity-node {
  display: grid;
  grid-template-columns: 1.8rem 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.entity-node:last-child {
  border-bottom: 0;
}
.entity-node img {
  width: 1.8rem;
  height: 1.8rem;
  object-fit: contain;
  border-radius: 6px;
}
.entity-node__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
}
.entity-node__status {
  color: var(--text-muted);
  white-space: nowrap;
}

/* ─── FACT BLOCK ─── */
.fact-block {
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}
.fact-block:first-child {
  border-top: 0;
  padding-top: 0;
}
.fact-block__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fact-block__label i {
  color: var(--copper);
  font-size: 0.95rem;
}
.fact-block p {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--text-body);
  margin: 0;
}
.fact-block--warning {
  border: 1px solid var(--high-border);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  background: var(--high-bg);
}
.fact-block--warning .fact-block__label,
.fact-block--warning .fact-block__label i {
  color: var(--high);
}
.fact-block--critical {
  border: 1px solid var(--dealbreaker-border);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
  background: var(--dealbreaker-bg);
}
.fact-block--critical .fact-block__label,
.fact-block--critical .fact-block__label i {
  color: var(--dealbreaker);
}

/* ─── SUB-NAVIGATION ─── */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.45rem 2rem;
  margin: 0 auto;
  max-width: 960px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 3.5rem;
  z-index: 10;
  background: var(--bg);
  justify-content: center;
  align-items: center;
}
.sub-nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.sub-nav a:hover {
  color: var(--copper);
  border-color: var(--border);
}
.sub-nav a:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.sub-nav a:active {
  transform: scale(0.96);
}
.sub-nav a[aria-current="page"] {
  color: var(--copper);
  border-color: oklch(0.45 0.12 55 / 0.25);
  background: oklch(0.45 0.12 55 / 0.04);
  font-weight: 700;
}
.sub-nav + header { padding-top: 1.75rem; }

/* ─── SOURCE LIST ─── */
.sources {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--border-strong);
}
.sources h2 {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.sources ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: src;
}
.sources li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--body);
  font-size: 0.82rem;
  color: var(--text-body);
  line-height: 1.5;
}
.sources li::before {
  content: counter(src) ".";
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  padding-top: 0.1rem;
}
.sources li a {
  color: var(--copper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.sources li a:hover { border-bottom-color: var(--copper); }
.sources li a:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.sources__tag {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.sources__tag--stat { color: var(--subq); background: var(--subq-bg); }
.sources__tag--quote { color: var(--cursor); background: var(--cursor-bg); }
.sources__tag--finding { color: var(--high); background: var(--high-bg); }
.sources__tag--press { color: var(--text-muted); background: var(--bg-warm); }
.fn-ref {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--copper);
  text-decoration: none;
  vertical-align: super;
  line-height: 0;
  transition: color 0.15s;
}
.fn-ref:hover { color: var(--ink); }
.fn-ref:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}

/* ─── INTELLIGENCE RESPONSIVE ─── */
@media (max-width: 820px) {
  .dossier__hero,
  .dossier__grid,
  .dossier--secondary .dossier__hero,
  .dossier--secondary .dossier__grid,
  .editorial-note {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .sub-nav { gap: 0.25rem; padding: 0.4rem 1.25rem; }
  .sub-nav a { font-size: 0.62rem; min-height: 36px; }
  .dossier { padding: clamp(1rem, 2vw, 1.5rem); }
  .dossier__name { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .dossier--secondary .dossier__name { font-size: clamp(1.5rem, 5vw, 2rem); }
  .editorial-note h3 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
}