/* Visualization workstation layer. Keeps the research corpus readable while adding
   proportional, deterministic visual encodings above the audit-oriented inventory. */

:root{
  --viz-surface:#121211;
  --viz-surface-2:#181816;
  --viz-surface-3:#20201d;
  --viz-line:#34332f;
  --viz-line-soft:#282824;
  --viz-warm:#f3b879;
  --viz-warm-2:#d7855f;
  --viz-cool:#86aaf3;
  --viz-station:#7fc5a4;
  --viz-dim:#77736c;
}

html{scroll-behavior:smooth}
body{text-rendering:optimizeLegibility}
.hero{padding:44px 0 30px;gap:28px}
.hero h1{font-size:clamp(2.65rem,5.5vw,5rem);text-wrap:balance}
.lede,.section-intro>p{text-wrap:pretty}
.commandbar{backdrop-filter:blur(16px);background:rgba(17,17,17,.92)}
.viewtabs{scrollbar-width:none}
.viewtabs::-webkit-scrollbar{display:none}
.viewtab{transition:background-color .16s ease,color .16s ease,transform .16s ease}
.viewtab:focus-visible,.system-row:focus-visible,.compare-path-node:focus-visible,.compare-swap:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.viewtab.active{background:linear-gradient(180deg,#292823,#1f1f1c);box-shadow:inset 0 0 0 1px #393832}
.view{view-transition-name:atlas-view}
::view-transition-old(atlas-view),::view-transition-new(atlas-view){animation-duration:.16s}

.viz-stage{
  border:1px solid var(--viz-line);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 28%),
    var(--viz-surface);
  overflow:hidden;
  margin:8px 0 22px;
}
.viz-stage-head,.compare-subhead,.inventory-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.viz-stage-head{padding:18px 20px;border-bottom:1px solid var(--viz-line-soft)}
.viz-stage-head h3,.inventory-heading h3,.compare-subhead h3{margin:.18rem 0 0;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.025em}
.viz-key{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.74rem}
.viz-key span{display:flex;align-items:center;gap:6px}
.key-swatch{display:inline-block;width:18px;height:5px;border-radius:99px;background:var(--viz-warm)}
.key-station{height:3px;background:var(--viz-station)}

.system-map{display:grid}
.system-row{
  width:100%;
  display:grid;
  grid-template-columns:40px minmax(155px,.8fr) minmax(230px,2.4fr) minmax(180px,1.2fr) minmax(115px,.65fr);
  gap:14px;
  align-items:center;
  border:0;
  border-bottom:1px solid var(--viz-line-soft);
  background:transparent;
  color:var(--text);
  padding:11px 18px;
  text-align:left;
  min-height:70px;
  transition:background-color .14s ease;
}
.system-row:last-child{border-bottom:0}
.system-row:hover{background:#191917}
.system-rank{font-variant-numeric:tabular-nums;color:#69665f;font-size:.72rem;letter-spacing:.08em}
.system-identity{min-width:0}
.system-identity strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.system-identity small{display:block;color:var(--muted);font-size:.7rem;margin-top:3px}
.system-bars{display:grid;gap:7px;min-width:0}
.system-track,.station-track{display:block;background:#262621;border-radius:99px;overflow:hidden}
.system-track{height:10px}
.station-track{height:4px;background:#20231f}
.system-fill,.station-fill{display:block;height:100%;border-radius:inherit;transform-origin:left center}
.system-fill{background:linear-gradient(90deg,var(--viz-warm-2),var(--viz-warm))}
.station-fill{background:var(--viz-station)}
.system-tags{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.system-tags i{font-style:normal;color:#9f9a91;border:1px solid #34332e;border-radius:999px;padding:4px 6px;font-size:.63rem;white-space:nowrap}
.system-numbers{text-align:right}
.system-numbers strong{display:block;font-size:1.18rem;font-variant-numeric:tabular-nums}
.system-numbers small{display:block;color:var(--muted);font-size:.66rem;margin-top:2px}

.overlap-strip:not(:empty){margin-top:18px}
.overlap-heading{grid-column:1/-1;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;padding:2px 2px 5px}
.inventory-heading{margin:34px 0 16px;padding-top:22px;border-top:1px solid var(--line)}
.inventory-heading>p{max-width:620px;margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}
.constellation{content-visibility:auto;contain-intrinsic-size:260px}

.compare-controls{max-width:none;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;margin-bottom:18px}
.compare-swap{
  min-height:44px;
  border:1px solid var(--viz-line);
  background:var(--viz-surface-2);
  color:var(--text);
  border-radius:12px;
  padding:9px 14px;
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:center;
}
.compare-workspace{display:grid;gap:14px;margin-top:14px}
.compare-verdict{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,.9fr) minmax(0,1fr);
  border:1px solid var(--viz-line);
  border-radius:22px;
  overflow:hidden;
  background:var(--viz-surface);
}
.compare-entity,.verdict-core{padding:21px;min-width:0}
.compare-entity p{margin:0 0 9px;color:var(--muted);font-size:.66rem;letter-spacing:.11em}
.compare-entity h3{margin:0;font-size:clamp(1.25rem,2.5vw,2rem);letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-entity span,.verdict-core span{display:block;color:var(--muted);font-size:.78rem;line-height:1.5;margin-top:7px}
.compare-entity.a{background:linear-gradient(135deg,rgba(134,170,243,.08),transparent)}
.compare-entity.b{background:linear-gradient(225deg,rgba(243,184,121,.08),transparent);text-align:right}
.verdict-core{border-left:1px solid var(--viz-line);border-right:1px solid var(--viz-line);display:flex;flex-direction:column;justify-content:center;text-align:center}
.verdict-core strong{font-size:1.05rem;letter-spacing:-.01em}

.compare-paths,.compare-context,.compare-evidence{
  border:1px solid var(--viz-line);
  border-radius:18px;
  background:var(--viz-surface);
  padding:18px;
  min-width:0;
}
.compare-subhead{margin-bottom:16px}
.compare-subhead>p{max-width:650px;color:var(--muted);font-size:.76rem;line-height:1.5;margin:0}
.compare-path-lane{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--viz-line-soft)}
.lane-label{width:26px;height:26px;border:1px solid var(--viz-line);border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:.7rem;font-weight:700}
.compare-path{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:4px 3px 7px;scrollbar-width:thin}
.compare-path-step{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.compare-path-node{min-width:128px;max-width:195px;background:#171715;border:1px solid #383731;border-radius:12px;padding:9px 10px;color:var(--text);text-align:left}
.compare-path-node strong{display:block;font-size:.77rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-path-node small{display:block;color:var(--muted);font-size:.61rem;margin-top:3px}
.compare-path-node.selected{border-color:#765641;background:#201a16}
.compare-path-edge{display:flex;align-items:center;gap:7px;color:#6f6b63}
.compare-path-edge i{font-style:normal;font-size:.6rem;color:#aaa49a;max-width:112px;text-align:center}
.compare-path-edge b{font-size:1rem;font-weight:400}

.compare-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.compare-metrics article{border:1px solid var(--viz-line);border-radius:14px;background:var(--viz-surface);padding:14px;min-width:0}
.compare-metrics strong{display:block;font-size:1.35rem;font-variant-numeric:tabular-nums}
.compare-metrics span{display:block;color:var(--muted);font-size:.67rem;line-height:1.35;margin-top:4px}

.context-row{display:grid;grid-template-columns:34px minmax(80px,1fr) minmax(95px,.45fr) minmax(80px,1fr) 34px;gap:9px;align-items:center;padding:7px 0}
.context-count{font-size:.72rem;font-variant-numeric:tabular-nums;color:#c8c2b8}
.context-count.left{text-align:right}.context-count.right{text-align:left}
.context-bar{height:8px;background:#272722;border-radius:99px;display:flex;overflow:hidden}
.context-bar i{display:block;height:100%;border-radius:inherit}
.context-bar.left{justify-content:flex-end}.context-bar.left i{background:var(--viz-cool)}
.context-bar.right i{background:var(--viz-warm)}
.context-label{text-align:center;color:var(--muted);font-size:.67rem;text-transform:uppercase;letter-spacing:.07em}

.compare-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.compare-detail-grid article{border:1px solid var(--viz-line);border-radius:16px;background:var(--viz-surface);padding:18px;min-width:0}
.compare-detail-grid h3{margin:.2rem 0 .6rem;font-size:1.05rem}
.compare-detail-grid h4{margin:1rem 0 .3rem;color:#bdb6aa;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em}
.compare-detail-grid p:not(.kicker){color:var(--muted);font-size:.8rem;line-height:1.55;overflow-wrap:anywhere}
.compare-evidence .edge-evidence:last-child{margin-bottom:0}
.evidence-intro{margin-top:24px}.evidence-intro h2{font-size:2rem}

@supports (color:color-mix(in srgb,white,black)){
  .system-row:hover{background:color-mix(in srgb,var(--panel) 84%,var(--accent) 3%)}
  .compare-path-node.selected{background:color-mix(in srgb,var(--panel) 88%,var(--accent) 12%)}
}

@media(max-width:1120px){
  .system-row{grid-template-columns:32px minmax(145px,.85fr) minmax(200px,2fr) minmax(120px,.8fr)}
  .system-tags{display:none}
  .compare-metrics{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:780px){
  html{scroll-behavior:auto}
  .viz-stage-head,.compare-subhead,.inventory-heading{align-items:flex-start;flex-direction:column;gap:10px}
  .system-row{grid-template-columns:28px minmax(115px,.9fr) minmax(120px,1.5fr) 82px;gap:9px;padding:10px 11px}
  .system-identity strong{font-size:.8rem}.system-numbers small{display:none}
  .compare-verdict{grid-template-columns:1fr}
  .compare-entity.b{text-align:left}
  .verdict-core{border-left:0;border-right:0;border-top:1px solid var(--viz-line);border-bottom:1px solid var(--viz-line);text-align:left}
  .compare-detail-grid{grid-template-columns:1fr}
}

@media(max-width:620px){
  .hero{padding-top:30px}
  .compare-controls{grid-template-columns:1fr}
  .compare-swap span{display:inline}
  .compare-metrics{grid-template-columns:repeat(2,1fr)}
  .system-row{grid-template-columns:24px minmax(105px,1fr) minmax(90px,1.2fr) 55px}
  .system-rank{font-size:.62rem}.system-numbers strong{font-size:.9rem}
  .context-row{grid-template-columns:25px minmax(55px,1fr) 78px minmax(55px,1fr) 25px;gap:6px}
  .context-label{font-size:.56rem}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}