:root {
  --ink: #05090b;
  --ink-2: #0a1115;
  --panel: #0e171c;
  --panel-2: #121f25;
  --line: #23363e;
  --line-hot: #47707c;
  --text: #e7f0ed;
  --muted: #81979b;
  --cyan: #6de7e0;
  --cyan-soft: rgba(109, 231, 224, 0.12);
  --orange: #f89845;
  --orange-soft: rgba(248, 152, 69, 0.13);
  --lime: #b7dc6d;
  --red: #ff6b63;
  --yellow: #f4ca6a;
  --blue: #70aef2;
  --violet: #b78bf1;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --shadow: 0 28px 70px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 82% -10%, rgba(109, 231, 224, 0.09), transparent 31rem),
    radial-gradient(circle at 4% 30%, rgba(248, 152, 69, 0.06), transparent 28rem),
    linear-gradient(180deg, #040709 0, var(--ink) 45rem, #071014 100%);
  font-family: var(--font-mono);
  line-height: 1.5;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.18;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.055;
  background: repeating-linear-gradient(180deg, transparent 0 3px, #fff 3px 4px);
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: white; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.atlas-header {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.8fr) minmax(230px, 0.8fr);
  gap: 2rem;
  align-items: end;
  min-height: 250px;
  padding: 2rem clamp(1rem, 4vw, 4.5rem) 2.4rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(110deg, rgba(4, 9, 11, 0.96), rgba(12, 27, 32, 0.85));
  box-shadow: var(--shadow);
}
.ses-mark { align-self: start; display: inline-flex; gap: 0.8rem; align-items: center; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; }
.mark-glyph { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--cyan); color: var(--cyan); font: 600 1.25rem/1 var(--font-display); clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 20% 100%, 0 80%); }
.header-copy h1 { margin: 0; font: 700 clamp(3.4rem, 7vw, 7.7rem)/0.75 var(--font-display); letter-spacing: -0.025em; color: white; }
.header-copy > p:last-child { max-width: 50rem; margin: 1.4rem 0 0; color: #a9bbbc; font-size: 0.9rem; }
.eyebrow { margin: 0 0 0.45rem; color: var(--orange); font: 600 0.68rem/1.3 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; }
.header-status { display: flex; flex-direction: column; gap: 1rem; align-items: flex-end; font-size: 0.7rem; letter-spacing: 0.08em; }
.status-pill { border: 1px solid var(--line-hot); padding: 0.55rem 0.75rem; background: var(--panel); }
.status-pill.loading { color: var(--yellow); animation: pulse 1.4s ease-in-out infinite; }
.status-pill.online { color: var(--lime); border-color: rgba(183, 220, 109, 0.5); }
.status-pill.error { color: var(--red); }
@keyframes pulse { 50% { opacity: 0.45; } }

.lens-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 0 clamp(0.5rem, 4vw, 4.5rem);
  background: rgba(5, 9, 11, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}
.lens-tab {
  min-height: 58px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  transition: color 160ms, background 160ms;
}
.lens-tab:first-child { border-left: 1px solid var(--line); }
.lens-tab span { margin-right: 0.55rem; color: #81999f; }
.lens-tab:hover { color: white; background: rgba(109, 231, 224, 0.05); }
.lens-tab.active { color: var(--cyan); background: var(--cyan-soft); box-shadow: inset 0 -2px var(--cyan); }

main { width: min(1680px, 100%); margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 4.5rem) 5rem; }
.alert { padding: 1rem 1.2rem; border: 1px solid var(--yellow); background: rgba(244, 202, 106, 0.09); color: var(--yellow); }
.alert.error { border-color: var(--red); color: var(--red); background: rgba(255, 107, 99, 0.08); }
.authority-strip {
  display: grid;
  grid-template-columns: 0.8fr 1.7fr 0.8fr;
  gap: 2rem;
  align-items: center;
  margin: 0 0 3rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  background: rgba(14, 23, 28, 0.72);
}
.authority-strip h2 { margin: 0; font: 600 1.5rem/1 var(--font-display); }
.authority-strip > p { margin: 0; color: var(--muted); font-size: 0.75rem; }
.authority-links { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; font-size: 0.7rem; }
.overview { margin-bottom: 4rem; }
.section-heading, .view-title, .subheading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.4rem;
}
.section-heading h2, .view-title h2 { margin: 0; font: 600 clamp(2.2rem, 4vw, 4.3rem)/0.9 var(--font-display); color: white; }
.section-heading h3, .subheading h3 { margin: 0; font: 600 1.55rem/1 var(--font-display); }
.section-heading > p, .view-title > p, .subheading > span { max-width: 44rem; margin: 0; color: var(--muted); font-size: 0.72rem; text-align: right; }
.section-heading.compact { align-items: center; }
.muted { color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.metric-card { min-height: 140px; padding: 1rem; background: linear-gradient(150deg, var(--panel), #0a1216); }
.metric-card > span { color: var(--muted); font-size: 0.64rem; letter-spacing: 0.11em; }
.metric-card strong { display: block; margin: 0.6rem 0; font: 600 2.6rem/1 var(--font-display); color: white; }
.metric-card p { margin: 0; color: var(--muted); font-size: 0.65rem; }
.slot-verdict, .slot-explainer { display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; margin-top: 1rem; padding: 1.2rem 1.4rem; border: 1px solid rgba(183, 220, 109, 0.35); background: linear-gradient(90deg, rgba(183, 220, 109, 0.09), transparent); }
.slot-verdict h3, .slot-explainer h3 { margin: 0 0 0.3rem; font: 600 1.45rem/1.1 var(--font-display); }
.slot-verdict h3 em { color: var(--lime); font-style: normal; }
.slot-verdict p, .slot-explainer p { margin: 0; color: var(--muted); font-size: 0.72rem; }
.verdict-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--lime); color: var(--lime); font-size: 1.5rem; }
.text-button { border: 0; background: transparent; color: var(--cyan); cursor: pointer; font-size: 0.7rem; }

.view { min-height: 62vh; animation: reveal 260ms ease-out; }
.view[hidden] { display: none !important; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } }
.view-title { margin: 4.5rem 0 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.workbench { display: grid; grid-template-columns: minmax(270px, 0.72fr) minmax(0, 2.5fr); gap: 1rem; }
.index-panel, .evidence-panel, .slots-card, .progress-card, .raw-closure, .lineage-strip { border: 1px solid var(--line); background: rgba(12, 20, 24, 0.9); }
.index-panel { position: sticky; top: 78px; align-self: start; padding: 1rem; }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; margin-bottom: 0.65rem; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.1em; border-bottom: 1px solid var(--line); }
.filter-stack { display: grid; gap: 0.65rem; margin-bottom: 0.8rem; }
.filter-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.55rem; }
label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
input, select { width: 100%; min-height: 40px; padding: 0 0.65rem; color: var(--text); border: 1px solid var(--line); border-radius: 0; background: #081014; }
input:hover, select:hover { border-color: var(--line-hot); }
.scroll-list { overflow: auto; scrollbar-color: var(--line-hot) var(--ink); }
.resource-list { max-height: calc(100vh - 315px); min-height: 360px; }
.resource-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; gap: 0.7rem; align-items: center; padding: 0.7rem 0.5rem; text-align: left; border: 0; border-bottom: 1px solid #17272e; background: transparent; cursor: pointer; }
.resource-row:hover { background: rgba(109, 231, 224, 0.06); }
.resource-row.selected { background: var(--cyan-soft); box-shadow: inset 2px 0 var(--cyan); }
.resource-row-copy { min-width: 0; }
.resource-row-copy strong, .resource-row-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.resource-row-copy strong { font-size: 0.72rem; }
.resource-row-copy small { color: var(--muted); font-size: 0.58rem; margin-top: 0.15rem; }
.tier-marker { display: inline-grid; place-items: center; min-width: 31px; height: 27px; padding: 0 0.35rem; border: 1px solid currentColor; font-size: 0.62rem; }
.t1 { color: #9fb2b6; } .t2 { color: var(--lime); } .t3 { color: var(--cyan); } .t4 { color: var(--violet); } .t5 { color: var(--orange); }
.scarcity { font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.08em; }
.scarcity.universal { color: var(--cyan); } .scarcity.common { color: var(--lime); } .scarcity.distributed { color: var(--blue); } .scarcity.scarce { color: var(--yellow); } .scarcity.rare { color: var(--red); }

.evidence-panel { min-width: 0; padding: clamp(1rem, 2vw, 2rem); }
.detail-header { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.detail-header h2 { margin: 0; font: 700 clamp(2.8rem, 5vw, 5.6rem)/0.85 var(--font-display); color: white; }
.authored-copy { color: var(--muted); font-size: 0.72rem; }
.identity-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.giant-tier { font: 700 3.8rem/1 var(--font-display); }
.badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0.15rem 0.45rem; border: 1px solid var(--line-hot); color: #bdd0d1; background: rgba(255, 255, 255, 0.025); font-size: 0.53rem; letter-spacing: 0.06em; text-transform: uppercase; }
.badge.flag { border-color: rgba(248, 152, 69, 0.38); color: var(--orange); }
.badge.quiet { color: var(--muted); }
.badge.warning, .badge.review { color: var(--yellow); border-color: rgba(244, 202, 106, 0.4); }
.badge.consistent { color: var(--lime); border-color: rgba(183, 220, 109, 0.4); }
.badge.unresolved { color: var(--red); border-color: rgba(255, 107, 99, 0.4); }
.flag-line, .recipe-badges, .table-flags, .region-tiers { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.8rem 0; }
.metric-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 1rem 0; background: var(--line); border: 1px solid var(--line); }
.metric-strip > div { padding: 0.8rem; background: var(--ink-2); }
.metric-strip strong { display: block; font: 600 1.8rem/1 var(--font-display); }
.metric-strip strong small { color: var(--muted); font-size: 0.8rem; }
.metric-strip span { color: var(--muted); font-size: 0.55rem; text-transform: uppercase; }
.evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.brief-card { min-height: 250px; padding: 1rem; border: 1px solid var(--line); background: #0b1317; }
.brief-card.evidence { border-top-color: var(--cyan); }
.brief-card.lore { border-top-color: var(--violet); background: linear-gradient(155deg, rgba(183, 139, 241, 0.08), #0b1317 55%); }
.brief-card.tier-fit { border-top-color: var(--yellow); }
.brief-card h3 { margin: 0 0 0.7rem; font: 600 1.55rem/1 var(--font-display); }
.brief-card p, .brief-card li, .brief-card small { color: var(--muted); font-size: 0.68rem; }
.brief-card blockquote { margin: 1rem 0; padding-left: 0.8rem; border-left: 2px solid var(--violet); color: #d9c8f1; font: 500 0.72rem/1.55 var(--font-mono); }
.brief-card ul { margin: 0; padding-left: 1.1rem; }
.detail-section { margin-top: 2.2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.purpose-bars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 1rem; }
.scroll-purpose-bars { max-height: 430px; overflow: auto; padding-right: 0.4rem; scrollbar-color: var(--line-hot) var(--ink); }
.purpose-bars > div { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr 40px; gap: 0.5rem; align-items: center; font-size: 0.6rem; }
.purpose-bars > div > div { width: var(--share); height: 4px; background: linear-gradient(90deg, var(--cyan), var(--orange)); }
.purpose-bars strong { text-align: right; }
.all-output-list { margin-top: 1rem; border: 1px solid var(--line); }
.all-output-list summary { cursor: pointer; padding: 0.75rem; color: var(--cyan); font-size: 0.65rem; }
.compact-list { max-height: 360px; padding: 0.5rem; }
.compact-list button { display: flex; width: 100%; justify-content: space-between; gap: 0.5rem; padding: 0.45rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.compact-list > span { display: block; padding: 0.45rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.58rem; }
.compact-list button:hover { color: var(--cyan); }
.availability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.availability-card { padding: 0.8rem; border-left: 2px solid var(--cyan); background: var(--ink-2); }
.availability-card span, .availability-card small { display: block; color: var(--muted); font-size: 0.58rem; }
.availability-card strong { display: block; margin: 0.3rem 0; font: 600 1.7rem/1 var(--font-display); }
.table-shell { width: 100%; overflow: auto; border: 1px solid var(--line); scrollbar-color: var(--line-hot) var(--ink); }
table { width: 100%; border-collapse: collapse; font-size: 0.64rem; }
th { position: sticky; top: 0; z-index: 2; color: var(--muted); background: #091115; text-align: left; text-transform: uppercase; letter-spacing: 0.08em; }
th, td { padding: 0.7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:hover { background: rgba(109, 231, 224, 0.035); }
td small, th small { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.54rem; }
td button { border: 0; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
td button:hover { color: var(--cyan); }
.location-table { max-height: 430px; }
.complete-location-table, .complete-config-table, .complete-extraction-table { max-height: 520px; }
.table-button-list, .lineage-source-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.complete-config-table .table-button-list button { padding: 0.25rem 0.35rem; border: 1px solid var(--line); }
.raw-lineage-explorer { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.raw-lineage-explorer label { min-width: min(480px, 100%); }
.lineage-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 0.6rem; background: var(--line); border: 1px solid var(--line); }
.lineage-metrics span { padding: 0.65rem; background: var(--ink-2); color: var(--muted); font-size: 0.57rem; }
.lineage-metrics strong { display: block; color: var(--text); font: 600 1.45rem/1 var(--font-display); }
.full-lineage-table { max-height: 620px; }
.full-lineage-table td:last-child { min-width: 300px; }
.lineage-source-group { display: grid; gap: 0.3rem; }
.lineage-source-group + .lineage-source-group { margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--line); }
.lineage-source-summary, .lineage-external-source { color: var(--muted); font-size: 0.5rem; letter-spacing: 0.07em; text-transform: uppercase; }
.full-lineage-table .lineage-source-list button { display: grid; gap: 0.08rem; padding: 0.25rem 0.35rem; border: 1px solid var(--line); }
.full-lineage-table .lineage-source-list button strong { font-size: 0.55rem; font-weight: 500; }
.full-lineage-table .lineage-source-list button small { margin: 0; font-size: 0.48rem; }
.location-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.location-examples span { padding: 0.45rem; border: 1px solid var(--line); color: var(--muted); font-size: 0.56rem; }
.location-examples strong { color: var(--text); margin-right: 0.35rem; }

.control-deck { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.65rem; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); background: rgba(12, 20, 24, 0.9); }
.build-detail { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 1rem; }
.recipe-hero { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem; border: 1px solid var(--line); border-left: 3px solid var(--cyan); background: linear-gradient(100deg, var(--panel), #0b1519); }
.recipe-hero h2 { margin: 0; font: 700 clamp(2.4rem, 4.5vw, 5rem)/0.85 var(--font-display); }
.recipe-facts { display: grid; grid-template-columns: repeat(2, minmax(110px, 1fr)); gap: 1px; min-width: 390px; background: var(--line); }
.recipe-facts > div { display: flex; flex-direction: column; justify-content: center; padding: 0.8rem; background: var(--ink-2); }
.recipe-facts strong { font: 600 1.9rem/1 var(--font-display); }
.recipe-facts span { color: var(--muted); font-size: 0.54rem; }
.build-grid { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: 1rem; }
.slots-card, .progress-card, .raw-closure, .lineage-strip { padding: 1.1rem; }
.carry-forward { display: grid; gap: 0.2rem; margin-bottom: 0.7rem; padding: 0.8rem; border: 1px solid rgba(248, 152, 69, 0.4); background: var(--orange-soft); }
.carry-forward.starter { border-color: rgba(183, 220, 109, 0.4); background: rgba(183, 220, 109, 0.08); }
.carry-forward span, .carry-forward small { color: var(--muted); font-size: 0.55rem; }
.slot-list { display: grid; gap: 1px; padding: 0; margin: 0; list-style: none; background: var(--line); }
.slot-list li { display: grid; grid-template-columns: 42px 1fr auto; gap: 0.8rem; align-items: center; padding: 0.65rem; background: var(--ink-2); }
.slot-list li > span { color: var(--cyan); }
.slot-list strong, .slot-list small { display: block; }
.slot-list small { color: var(--muted); font-size: 0.54rem; }
.slot-list b { color: var(--orange); }
.progress-card dl { display: grid; gap: 1px; background: var(--line); }
.progress-card dl > div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0.5rem; padding: 0.65rem; background: var(--ink-2); }
dt { color: var(--muted); font-size: 0.57rem; } dd { margin: 0; font-size: 0.64rem; }
.config-examples { display: grid; gap: 0.3rem; margin-top: 1rem; }
.config-examples strong { font-size: 0.62rem; color: var(--orange); }
.config-examples span { padding: 0.35rem; background: var(--panel-2); color: var(--muted); font-size: 0.56rem; }
.raw-input-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.raw-input-card { display: grid; grid-template-columns: auto 1fr auto; gap: 0.55rem; align-items: center; min-height: 70px; padding: 0.65rem; border: 1px solid var(--line); background: var(--ink-2); text-align: left; cursor: pointer; }
.raw-input-card:hover { border-color: var(--cyan); transform: translateY(-1px); }
.raw-input-card small { grid-column: 2 / -1; color: var(--muted); font-size: 0.52rem; }
.raw-input-card .quantity { color: var(--orange); font-size: 0.6rem; }
.lineage-columns { display: grid; grid-template-columns: 1fr auto 2fr auto 2fr; gap: 0.7rem; align-items: center; }
.lineage-final { padding: 0.8rem; border: 1px solid var(--cyan); background: var(--cyan-soft); }
.lineage-final span, .lineage-final strong { display: block; }
.lineage-final span { color: var(--muted); font-size: 0.53rem; }
.lineage-arrow { color: var(--orange); font-size: 1.5rem; }
.lineage-nodes, .lineage-raws { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lineage-nodes span, .lineage-raws button, .lineage-raws > span { padding: 0.4rem; border: 1px solid var(--line); background: var(--ink-2); font-size: 0.55rem; }
.lineage-nodes .upgrade-carry-forward { border-color: var(--orange); }
.lineage-raws button { cursor: pointer; }
.lineage-raws button:hover { border-color: var(--cyan); }

.compare-controls { grid-template-columns: 1fr auto 1fr 1fr 1fr 0.7fr; align-items: end; }
.versus { display: grid; place-items: center; width: 42px; height: 42px; color: var(--orange); border: 1px solid var(--orange); }
.compare-summary { display: grid; grid-template-columns: 1fr 0.55fr 1fr; gap: 1px; margin-bottom: 1rem; background: var(--line); border: 1px solid var(--line); }
.compare-family, .compare-delta { min-height: 190px; padding: 1.1rem; background: var(--panel); }
.compare-family.family-a { border-top: 2px solid var(--cyan); }
.compare-family.family-b { border-top: 2px solid var(--orange); text-align: right; }
.compare-family h3 { margin: 0; font: 600 2rem/1 var(--font-display); }
.compare-family > strong { display: block; margin: 0.8rem 0 0.25rem; font: 600 2.3rem/1 var(--font-display); }
.compare-family > span, .compare-family > small { display: block; color: var(--muted); font-size: 0.6rem; }
.compare-delta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--ink-2); }
.compare-delta > strong { font: 700 3rem/1 var(--font-display); color: white; }
.compare-delta > span, .compare-delta > small { color: var(--muted); font-size: 0.57rem; }
.compare-delta div { margin: 0.8rem 0; color: var(--yellow); font-size: 0.62rem; }
.compare-slot-story { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 1px; background: var(--line); }
.compare-slot-story > div { padding: 0.8rem; background: var(--ink-2); }
.compare-slot-story h3 { margin: 0; font: 600 1.4rem/1 var(--font-display); }
.compare-slot-story strong, .compare-slot-story span { display: block; }
.compare-slot-story strong { color: var(--orange); font-size: 0.58rem; text-transform: uppercase; }
.compare-slot-story span { margin-top: 0.35rem; color: var(--muted); font-size: 0.58rem; }
.comparison-ledger .only-a { box-shadow: inset 3px 0 var(--cyan); }
.comparison-ledger .only-b { box-shadow: inset 3px 0 var(--orange); }
.comparison-ledger .shared { box-shadow: inset 3px 0 var(--muted); }
.matrix-heading { margin-top: 2rem; }
.matrix-shell { overflow: auto; border: 1px solid var(--line); }
.progression-matrix { min-width: 920px; }
.progression-matrix th:first-child { min-width: 150px; }
.progression-matrix td { padding: 0.25rem; }
.progression-matrix td button { display: grid; width: 100%; min-width: 110px; min-height: 62px; place-items: center; border: 1px solid transparent; background: var(--ink-2); }
.progression-matrix td button:hover:not(:disabled) { border-color: var(--cyan); }
.progression-matrix td button.active { border-color: var(--orange); background: var(--orange-soft); }
.progression-matrix td button:disabled { opacity: 0.25; }
.progression-matrix td span { color: var(--muted); font-size: 0.52rem; }

.slot-proof { display: grid; gap: 1rem; }
.slot-explainer { grid-template-columns: auto 1fr; }
.slot-matrix { max-height: 670px; }
.slot-matrix table { min-width: 1500px; }
.slot-matrix th:first-child { position: sticky; left: 0; z-index: 3; min-width: 180px; }
.slot-matrix td { min-width: 135px; }
.slot-matrix .carry-row td { color: var(--orange); background: var(--orange-soft); }
.slot-matrix .persistent-slot { color: var(--cyan); background: var(--cyan-soft); }
.slot-matrix .added-slot { box-shadow: inset 0 -2px var(--orange); }
.empty-slot { color: var(--muted); }
#slotExceptions { max-height: 420px; }
#slotExceptions td div { padding: 0.2rem 0; color: var(--muted); }
#slotExceptions td b { color: var(--cyan); margin-right: 0.4rem; }

.balance-toolbar { display: grid; grid-template-columns: minmax(350px, 2fr) repeat(4, minmax(105px, 0.55fr)) auto auto auto; gap: 0.6rem; align-items: end; margin-bottom: 0.8rem; }
.chip-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-chip, .export-button { min-height: 36px; padding: 0.45rem 0.6rem; border: 1px solid var(--line); background: var(--ink-2); color: var(--muted); cursor: pointer; font-size: 0.56rem; text-transform: uppercase; }
.filter-chip span { margin-left: 0.4rem; color: #8ca2a7; }
.filter-chip:hover, .filter-chip.active, .export-button:hover { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-soft); }
.count-label { align-self: center; color: var(--muted); font-size: 0.6rem; }
.balance-table { max-height: 720px; }
.balance-table table { min-width: 1050px; }
.balance-table td:first-child button { display: flex; align-items: center; gap: 0.5rem; }
.balance-table td:first-child strong { min-width: 170px; }

.geography-controls { grid-template-columns: 1.4fr 0.6fr 1fr; }
.region-summary { display: grid; grid-template-columns: 1fr 1.4fr 0.8fr; gap: 1px; margin-bottom: 1rem; border: 1px solid var(--line); background: var(--line); }
.region-summary > * { margin: 0; padding: 1rem; background: var(--panel); }
.region-summary h2 { margin: 0; font: 600 2.7rem/1 var(--font-display); }
.region-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line) !important; }
.region-metrics > div { display: grid; place-content: center; text-align: center; background: var(--ink-2); }
.region-metrics strong { font: 600 2rem/1 var(--font-display); }
.region-metrics span { color: var(--muted); font-size: 0.54rem; }
.region-summary pre { overflow: auto; color: var(--muted); font-size: 0.55rem; }
.resource-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.55rem; }
.geo-resource-card { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; min-height: 130px; padding: 0.8rem; text-align: left; border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.geo-resource-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
.geo-resource-card p, .geo-resource-card small { grid-column: 2; margin: 0; color: var(--muted); font-size: 0.58rem; }
.geo-resource-card .badge { align-self: end; }
.region-chains { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.chain-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 0.7rem; background: var(--line); border: 1px solid var(--line); }
.chain-summary article { padding: 0.9rem; background: var(--ink-2); }
.chain-summary strong, .chain-summary span { display: block; }
.chain-summary strong { font: 600 2rem/1 var(--font-display); }
.chain-summary span { color: var(--muted); font-size: 0.57rem; }
.chain-list, .constrained-list { max-height: 560px; }
.constrained-list button > span { min-width: 0; }
.constrained-list button strong, .constrained-list button small { display: block; overflow: hidden; text-overflow: ellipsis; }
.constrained-list button small { margin-top: 0.15rem; color: var(--muted); white-space: normal; }

.empty-state { padding: 2rem; text-align: center; border: 1px dashed var(--line-hot); color: var(--muted); }
.empty-state strong { display: block; color: var(--text); font: 600 1.4rem var(--font-display); }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1rem, 4vw, 4.5rem); border-top: 1px solid var(--line); background: #04080a; color: var(--muted); font-size: 0.62rem; }
footer strong, footer span { display: block; }
footer strong { color: var(--text); }
footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; }

@media (max-width: 1180px) {
  .atlas-header { grid-template-columns: 1fr 2fr; }
  .header-status { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .authority-strip { grid-template-columns: 1fr 2fr; }
  .authority-links { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .evidence-grid { grid-template-columns: 1fr 1fr; }
  .brief-card.tier-fit { grid-column: 1 / -1; min-height: 0; }
  .build-grid { grid-template-columns: 1fr; }
  .balance-toolbar { grid-template-columns: 1fr 1fr 1fr; }
  .chip-filters { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .atlas-header { display: block; min-height: 0; padding-top: 1.2rem; }
  .ses-mark { margin-bottom: 2.5rem; }
  .header-copy h1 { font-size: clamp(3.6rem, 17vw, 6rem); }
  .header-status { margin-top: 1.5rem; align-items: flex-start; }
  .lens-nav { grid-template-columns: repeat(3, 1fr); padding: 0; position: relative; }
  .lens-tab:nth-child(4) { border-left: 1px solid var(--line); }
  main { padding-inline: 0.8rem; }
  .authority-strip { display: block; }
  .authority-strip > p { margin: 1rem 0; }
  .authority-links { align-items: flex-start; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .slot-verdict { grid-template-columns: auto 1fr; }
  .slot-verdict button { grid-column: 1 / -1; text-align: left; }
  .section-heading, .view-title, .subheading { display: block; }
  .section-heading > p, .view-title > p, .subheading > span { margin-top: 0.7rem; text-align: left; }
  .workbench { display: block; }
  .index-panel { position: relative; top: auto; margin-bottom: 0.8rem; }
  .resource-list { min-height: 240px; max-height: 360px; }
  .evidence-grid, .availability-grid { grid-template-columns: 1fr; }
  .brief-card { min-height: 0; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .purpose-bars { grid-template-columns: 1fr; }
  .control-deck, .compare-controls, .geography-controls { grid-template-columns: repeat(2, 1fr); }
  .versus { display: none; }
  .recipe-hero { display: block; }
  .recipe-facts { min-width: 0; margin-top: 1rem; }
  .lineage-columns { grid-template-columns: 1fr; }
  .lineage-arrow { transform: rotate(90deg); justify-self: center; }
  .compare-summary { grid-template-columns: 1fr; }
  .compare-family.family-b { text-align: left; }
  .compare-slot-story { grid-template-columns: 1fr; }
  .lineage-metrics { grid-template-columns: 1fr 1fr; }
  .region-summary { grid-template-columns: 1fr; }
  .balance-toolbar { grid-template-columns: 1fr 1fr; }
  footer { display: block; }
  footer nav { justify-content: flex-start; margin-top: 1rem; }
}

@media (max-width: 500px) {
  .metric-grid, .control-deck, .compare-controls, .geography-controls, .filter-row, .balance-toolbar { grid-template-columns: 1fr; }
  .metric-card { min-height: 110px; }
  .detail-header { display: block; }
  .identity-stack { align-items: flex-start; margin-top: 1rem; }
  .metric-strip, .recipe-facts { grid-template-columns: 1fr 1fr; }
  .raw-input-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}