.viz-page { background: var(--paper); }
.viz-hero { padding: 3.2rem max(1.5rem, calc((100% - 86rem) / 2)) 2.8rem; color: white; background: var(--ink); border-top: 1px solid rgba(255,255,255,.14); }
.viz-hero h1 { margin-bottom: .7rem; font-size: clamp(3rem, 6vw, 5.2rem); }
.viz-hero > p:last-child { max-width: 49rem; margin: 0; color: #cbd5df; font: 1.08rem/1.65 var(--serif); }
.viz-layout { width: min(100% - 3rem, 86rem); margin: 0 auto; padding: 2.5rem 0 6rem; display: grid; grid-template-columns: 15rem minmax(0,1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.viz-tools { position: sticky; top: 1rem; display: grid; border-top: 1px solid var(--line); }
.viz-tools button { padding: .72rem .3rem; display: grid; grid-template-columns: 2rem 1fr; gap: .45rem; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); background: transparent; cursor: pointer; text-align: left; font: 700 .76rem/1.25 var(--sans); }
.viz-tools button span { color: var(--rust); font-size: .63rem; letter-spacing: .08em; }
.viz-tools button:hover, .viz-tools button[aria-pressed="true"] { color: var(--ink); background: var(--paper-deep); }
.viz-tools button[aria-pressed="true"] { box-shadow: inset 3px 0 var(--rust); }
.viz-workspace { min-width: 0; }
.viz-loading { padding: 5rem 0; color: var(--ink-soft); font: 1.25rem var(--serif); }
.tool-head { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.tool-head h2 { margin-bottom: .6rem; font-size: clamp(2.4rem, 5vw, 4.25rem); }
.tool-head p { max-width: 50rem; margin: 0; color: var(--ink-soft); font: 1.02rem/1.65 var(--serif); }
.viz-controls { margin-bottom: 2rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; align-items: end; }
.viz-controls label { display: grid; gap: .45rem; color: var(--ink); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.viz-controls input, .viz-controls select { width: 100%; min-height: 3rem; border: 1px solid var(--line); border-radius: 0; padding: .7rem .8rem; color: var(--ink); background: var(--paper-light); }
.viz-controls .button { min-height: 3rem; }
.viz-note { margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: 3px solid var(--gold); color: var(--ink-soft); background: var(--paper-light); font-size: .79rem; }
.viz-metrics { margin: 0 0 2rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--line); }
.viz-metrics div { padding: 1rem; border-right: 1px solid var(--line); }
.viz-metrics div:last-child { border-right: 0; }
.viz-metrics dt { color: var(--ink-soft); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.viz-metrics dd { margin: .25rem 0 0; font: 2rem/1 var(--serif); }
.viz-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
.chart-block { min-width: 0; }
.chart-block.wide { grid-column: 1 / -1; }
.chart-block h3 { margin-bottom: .65rem; font-size: 1.35rem; }
.chart-block > p { color: var(--ink-soft); font-size: .75rem; }
.chart-svg { width: 100%; min-height: 18rem; overflow: visible; background: var(--paper-light); border: 1px solid var(--line); }
.chart-svg text { fill: var(--ink); font: 11px var(--sans); }
.chart-svg .axis path, .chart-svg .axis line { stroke: var(--line); }
.chart-svg .axis-title { font-size: 11px; font-weight: 700; }
.chart-svg .mark { fill: var(--rust); }
.chart-svg .mark-secondary { fill: var(--gold); }
.chart-svg .country { fill: var(--paper-deep); stroke: var(--paper-light); stroke-width: .5; }
.chart-svg .graticule { fill: none; stroke: rgba(23,44,69,.12); }
.chart-svg .route { fill: none; stroke: var(--rust); stroke-width: 2; stroke-dasharray: 5 4; }
.viz-tooltip { position: fixed; z-index: 20; max-width: 19rem; padding: .65rem .75rem; pointer-events: none; color: white; background: var(--ink); box-shadow: var(--shadow); font-size: .72rem; line-height: 1.4; }
.bar-list { display: grid; gap: .7rem; }
.bar-row { display: grid; grid-template-columns: minmax(7rem, .7fr) minmax(8rem,1.3fr) 3.2rem; gap: .7rem; align-items: center; font-size: .75rem; }
.bar-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.bar-track { height: .65rem; background: var(--paper-deep); }
.bar-fill { height: 100%; background: var(--rust); }
.bar-value { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.dispersion-list { display: grid; gap: .85rem; }
.dispersion-row { display: grid; grid-template-columns: minmax(9rem,.7fr) minmax(12rem,1.3fr) 3rem; gap: .7rem; align-items: center; font-size: .72rem; }
.dispersion-row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.dispersion-track { position: relative; height: 1rem; border-block: 1px solid var(--line); background: var(--paper-light); }
.dispersion-hit { position: absolute; top: 0; width: 2px; height: 100%; background: var(--rust); }
.result-list { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.result-line { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.result-line p { margin: .25rem 0; color: var(--ink-soft); font: .95rem/1.55 var(--serif); }
.result-line a { color: var(--rust-dark); font-size: .75rem; font-weight: 800; }
.path-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.path-card { min-height: 14rem; padding: 1.5rem; border: 0; color: var(--ink); background: var(--paper-light); cursor: pointer; text-align: left; }
.path-card:hover { background: var(--paper-deep); }
.path-card h3 { margin-bottom: .75rem; }
.path-card p { color: var(--ink-soft); }
.coverage { margin-top: 1rem; color: var(--rust-dark); font-size: .72rem; font-weight: 800; }
@media (max-width: 64rem) { .viz-layout { grid-template-columns: 12rem minmax(0,1fr); gap: 2rem; } .viz-grid { grid-template-columns: 1fr; } .chart-block.wide { grid-column: auto; } }
@media (max-width: 48rem) { .viz-layout { width: min(100% - 2rem,86rem); grid-template-columns: 1fr; padding-top: 1.25rem; } .viz-tools { position: sticky; z-index: 5; top: 0; margin-inline: -1rem; padding: 0 1rem; display: flex; overflow-x: auto; border-block: 1px solid var(--line); background: var(--paper); scrollbar-width: thin; } .viz-tools button { flex: 0 0 10rem; min-height: 3.4rem; border-bottom: 0; border-right: 1px solid var(--line); } .viz-tools button[aria-pressed="true"] { box-shadow: inset 0 -3px var(--rust); } .viz-controls { grid-template-columns: 1fr; } .viz-metrics { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 34rem) { .viz-metrics { grid-template-columns: 1fr; } .viz-metrics div { border-right: 0; border-bottom: 1px solid var(--line); } .bar-row, .dispersion-row { grid-template-columns: minmax(6rem,.7fr) minmax(7rem,1.3fr) 2.5rem; } .path-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }