:root {
  --bg: var(--brand-ink);
  --panel: var(--brand-surface);
  --panel-soft: var(--brand-surface-raised);
  --line: rgba(255,255,255,.12);
  --line-strong: rgba(255,255,255,.22);
  --text: #f4f6f7;
  --muted: #aeb8c3;
  --subtle: #74808d;
  --incident: #ff654a;
  --technology: #f7b84b;
  --structural: #32d5e6;
  --accent: var(--brand-cyan);
  --strip-height: 26px;
  --topbar-height: 54px;
  --toolbar-height: 64px;
  --filters-width: 318px;
  --detail-width: 468px;
  --legend-height: 56px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mockup-strip { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--strip-height); display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: #efd08e; border-bottom: 1px solid rgba(247,184,75,.25); background: #1d190c; font-size: 10px; font-weight: 680; text-align: center; }
.mockup-strip span { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--technology); }

.topbar { position: fixed; inset: var(--strip-height) 0 auto; z-index: 30; height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--brand-ink); }
.brand-block, .topbar-actions, .panel-heading, .filter-title-row, .section-title-row, .evidence-heading { display: flex; align-items: center; }
.brand-block { gap: 10px; min-width: 190px; }
.brand-mark { position: relative; width: 29px; height: 29px; flex: 0 0 auto; }
.brand-mark i { position: absolute; inset: 50%; border: 1px solid var(--accent); border-radius: 50%; transform: translate(-50%,-50%); }
.brand-mark i:nth-child(1) { width: 28px; height: 28px; opacity: .35; }
.brand-mark i:nth-child(2) { width: 18px; height: 18px; opacity: .7; }
.brand-mark i:nth-child(3) { width: 7px; height: 7px; border: 0; background: var(--accent); }
.brand-block h1 { margin: 0; font-size: 19px; font-weight: 680; line-height: 1; letter-spacing: -.02em; }
.brand-subtitle { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.header-summary { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.header-summary span + span { padding-left: 18px; border-left: 1px solid var(--line); }
.header-summary strong { color: var(--text); font-size: 14px; }

.app-shell { position: fixed; inset: calc(var(--strip-height) + var(--topbar-height)) 0 0; display: grid; grid-template-rows: var(--toolbar-height) minmax(0,1fr); }
.view-toolbar { display: grid; grid-template-columns: 110px minmax(0,1fr) 120px; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--brand-surface); }
.filters-toggle, .reset-button { height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255,255,255,.04); cursor: pointer; font-size: 12px; font-weight: 600; }
.filters-toggle:hover, .reset-button:hover { border-color: var(--accent); background: rgba(0,176,240,.08); }
.filter-icon { position: relative; display: inline-block; width: 15px; height: 11px; margin-right: 7px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; vertical-align: -1px; }
.filter-icon:after { content: ""; position: absolute; left: 4px; right: 4px; top: 3px; border-top: 2px solid currentColor; }
.reset-button span { margin-right: 6px; color: var(--accent); }
.view-selector { display: grid; grid-template-columns: repeat(5,minmax(108px,1fr)); gap: 7px; min-width: 0; }
.view-selector button { min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.025); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap; }
.view-selector button:hover { color: var(--text); border-color: var(--line-strong); }
.view-selector button.active { color: #071014; border-color: var(--accent); background: var(--accent); }

.content-row { position: relative; display: flex; min-width: 0; min-height: 0; overflow: hidden; }
.filters-panel { position: relative; z-index: 22; width: 0; flex: 0 0 auto; padding: 0; overflow: hidden auto; border-right: 0 solid var(--line); background: var(--panel); opacity: 0; transition: width .28s ease, padding .28s ease, opacity .18s ease, border-width .28s ease; scrollbar-width: thin; scrollbar-color: #35404d transparent; }
.filters-panel.open { width: var(--filters-width); padding: 22px 20px 26px; border-right-width: 1px; opacity: 1; }
.filters-panel > * { min-width: 276px; }
.panel-heading { justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.panel-heading h2 { margin: 0; font-size: 21px; line-height: 1.15; }
.panel-intro { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.close-button { width: 36px; height: 36px; flex: 0 0 auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.04); cursor: pointer; font-size: 21px; }
.close-button:hover { background: rgba(255,255,255,.1); }
.filter-section { padding: 18px 0; border-top: 1px solid var(--line); }
.filter-section h3 { margin: 0 0 12px; font-size: 13px; }
.filter-title-row { justify-content: space-between; gap: 10px; }
.filter-title-row .text-button { margin-bottom: 12px; }
.text-button { padding: 0; border: 0; color: var(--accent); background: none; cursor: pointer; font-size: 11px; }
.category-filters { display: grid; gap: 8px; }
.category-option { display: grid; grid-template-columns: 13px 1fr auto; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); cursor: pointer; font-size: 13px; }
.category-option input { position: absolute; opacity: 0; pointer-events: none; }
.category-option:has(input:not(:checked)) { opacity: .42; filter: grayscale(.8); }
.category-option:has(input:focus-visible) { outline: 3px solid var(--accent); }
.category-dot, .dot { display: block; width: 10px; height: 10px; border-radius: 50%; }
.category-option.incident .category-dot { background: var(--incident); }
.category-option.technology .category-dot { background: var(--technology); }
.category-option.structural .category-dot { background: var(--structural); }
.incident { background-color: var(--incident); }
.technology { background-color: var(--technology); }
.structural { background-color: var(--structural); }
.category-option.incident, .category-option.technology, .category-option.structural { background-color: rgba(255,255,255,.025); }
.category-option b { color: var(--muted); font-size: 11px; }
.sector-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 7px; }
.sector-option { display: flex; align-items: flex-start; gap: 7px; color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1.25; }
.sector-option input { appearance: none; flex: 0 0 auto; width: 16px; height: 16px; margin: 0; border: 1px solid #667382; border-radius: 3px; }
.sector-option input:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--panel); }
.level-output { margin-bottom: 12px; color: var(--accent); font-size: 11px; font-weight: 650; text-align: right; }
.range, .depth-range { width: 100%; height: 5px; margin: 7px 0 10px; appearance: none; border-radius: 8px; background: linear-gradient(90deg,var(--accent) 0%,rgba(255,255,255,.17) 0%); }
.range::-webkit-slider-thumb, .depth-range::-webkit-slider-thumb { width: 17px; height: 17px; appearance: none; border: 4px solid var(--panel); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; min-height: 29px; color: var(--muted); font-size: 10px; text-align: center; }
.range-labels small { color: var(--subtle); font-size: 8px; }
.segmented { display: grid; grid-template-columns: .9fr 1.2fr .9fr; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.2); }
.segmented button { min-height: 34px; padding: 4px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; line-height: 1.1; }
.segmented button.active { color: var(--text); background: rgba(0,176,240,.14); }
.clear-button { width: 100%; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255,255,255,.04); cursor: pointer; font-size: 12px; }

.radar-stage { flex: 1 1 auto; min-width: 0; display: grid; grid-template-rows: minmax(0,1fr) var(--legend-height); background: #06090d; }
.plot-area { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 52% 48%,#101820 0%,#080c12 48%,#05070b 100%); }
#canvas-host, #canvas-host canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.axis-overlay { position: absolute; z-index: 5; inset: 0; pointer-events: none; opacity: 1; transition: opacity .25s; }
.axis-overlay[data-view="free"] { opacity: 0; }
.axis-overlay:before { content: ""; position: absolute; left: var(--plot-left,86px); right: var(--plot-right,30px); top: var(--plot-top,28px); bottom: var(--plot-bottom,68px); border-left: 1px solid rgba(255,255,255,.16); border-bottom: 1px solid rgba(255,255,255,.16); }
.y-axis-title { position: absolute; left: 7px; top: var(--plot-mid-y,50%); width: 70px; transform: translateY(-50%) rotate(-90deg); text-align: center; white-space: nowrap; }
.x-axis-title { position: absolute; left: var(--plot-left,90px); right: var(--plot-right,30px); bottom: 4px; text-align: center; }
.y-axis-title strong, .x-axis-title strong { display: block; color: var(--text); font-size: 12px; }
.y-axis-title span, .x-axis-title span { display: block; color: var(--muted); font-size: 10px; }
.y-axis-ticks { position: absolute; inset: 0; color: #c5cdd5; font-size: 11px; font-weight: 650; }
.y-axis-ticks span { position: absolute; left: 48px; width: 32px; transform: translateY(-50%); text-align: right; }
.x-axis-ticks { position: absolute; inset: 0; color: #c5cdd5; font-size: 10px; font-weight: 650; text-align: center; }
.x-axis-ticks span { position: absolute; bottom: 38px; width: min(180px,18vw); padding: 0 4px; transform: translateX(-50%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axis-overlay[data-view="front"] .x-axis-ticks span, .axis-overlay[data-view="top"] .x-axis-ticks span { text-transform: uppercase; letter-spacing: .04em; }
.free-axis-overlay { position: absolute; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; }
.free-axis-overlay.visible { opacity: 1; }
.free-axis-label, .free-axis-title { position: absolute; max-width: min(190px,28vw); overflow: hidden; border: 1px solid rgba(145,203,211,.20); border-radius: 5px; color: #d7e1e5; background: rgba(5,9,13,.82); box-shadow: 0 3px 12px rgba(0,0,0,.22); white-space: nowrap; text-overflow: ellipsis; }
.free-axis-label { padding: 3px 6px; font-size: 9px; font-weight: 650; line-height: 1.1; }
.free-axis-label.stage { transform: translate(-50%,8px); text-transform: uppercase; letter-spacing: .035em; }
.free-axis-label.level { min-width: 28px; transform: translate(calc(-100% - 8px),-50%); color: #f0f5f6; text-align: center; }
.free-axis-label.time { transform: translate(8px,-50%); }
.free-axis-title { top: 16px; width: 180px; padding: 5px 8px; border-left: 2px solid #91cbd3; }
.free-axis-title strong { display: block; color: #f0f5f6; font-size: 10px; letter-spacing: .055em; }
.free-axis-title span { display: block; margin-top: 1px; color: #aebcc3; font-size: 9px; }
.free-axis-title.stage-title { left: 50%; transform: translateX(-50%); text-align: center; }
.free-axis-title.gravity-title { left: 18px; }
.free-axis-title.time-title { right: 18px; }
.hover-label { position: absolute; z-index: 20; display: none; grid-template-columns: 1fr auto; width: 250px; padding: 11px 13px; border: 1px solid var(--line-strong); border-left: 3px solid var(--hover-color,var(--accent)); border-radius: 8px; background: rgba(10,14,20,.97); box-shadow: 0 12px 30px rgba(0,0,0,.38); pointer-events: none; }
.hover-label.visible { display: grid; }
.hover-label span { grid-column: 1 / 3; margin-bottom: 3px; color: var(--hover-color,var(--accent)); font-size: 10px; font-weight: 650; }
.hover-label strong { font-size: 13px; line-height: 1.3; }
.hover-label b { margin-left: 9px; color: var(--hover-color,var(--accent)); font-size: 16px; }
.hover-label small { grid-column: 1 / 3; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.empty-state { position: absolute; z-index: 10; inset: 50% auto auto 50%; width: 290px; padding: 24px; transform: translate(-50%,-50%); border: 1px solid var(--line-strong); border-radius: 10px; text-align: center; background: rgba(10,14,20,.95); }
.empty-state strong { display: block; font-size: 16px; }
.empty-state p { margin: 5px 0 14px; color: var(--muted); font-size: 12px; }
.empty-state button { min-height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: rgba(255,255,255,.05); cursor: pointer; font-size: 11px; }

.list-overlay { position: absolute; inset: 0; z-index: 8; overflow: auto; background: #06090d; scrollbar-width: thin; scrollbar-color: #35404d transparent; }
.list-inner { min-width: 640px; padding: 18px 22px 26px; }
.list-caption { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.list-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.list-table th { position: sticky; top: 0; z-index: 2; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); background: #06090d; color: var(--muted); font-size: 10px; font-weight: 650; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
.list-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted); }
.list-table tbody tr { cursor: pointer; }
.list-table tbody tr:hover td { background: rgba(255,255,255,.035); }
.list-open { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; font-size: 13px; line-height: 1.3; }
.list-open .dot { flex: 0 0 auto; }
.list-level { color: var(--text); font-weight: 650; }
.list-confidence, .list-momentum { text-transform: capitalize; }

.legend-bar { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 0 18px; overflow: hidden; border-top: 1px solid var(--line); background: #0b1016; color: var(--muted); font-size: 11px; }
.legend-category { display: flex; align-items: center; gap: 7px; color: var(--text); white-space: nowrap; }
.legend-note { padding-left: 20px; border-left: 1px solid var(--line); white-space: nowrap; }

.detail-panel { position: relative; z-index: 30; width: 0; flex: 0 0 auto; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; border-left: 0 solid var(--line); background: #111720; opacity: 0; transition: width .32s ease, opacity .2s ease, border-width .32s ease; }
.detail-panel.open { width: var(--detail-width); border-left-width: 1px; opacity: 1; }
.detail-panel > *:not(.detail-close) { min-width: 420px; }
.detail-topline { position: absolute; z-index: 2; inset: 0 0 auto; height: 3px; background: var(--detail-color,var(--accent)); }
.close-button.detail-close { position: absolute; z-index: 5; top: 17px; right: 17px; width: auto; min-width: 0; height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 0; border-radius: 5px; color: var(--muted); background: rgba(255,255,255,.055); font-size: 11px; font-weight: 600; }
.detail-close b { color: var(--text); font-size: 17px; font-weight: 400; line-height: 1; }
.close-button.detail-close:hover { color: var(--text); background: rgba(255,255,255,.10); }
.detail-scroll { min-height: 0; padding: 30px 28px 26px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #35404d transparent; }
.detail-heading { padding-right: 82px; }
.category-badge { display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border: 1px solid color-mix(in srgb,var(--detail-color) 45%,transparent); border-radius: 6px; color: var(--detail-color); background: color-mix(in srgb,var(--detail-color) 10%,transparent); font-size: 11px; font-weight: 650; }
.detail-heading h2 { margin: 12px 0 7px; font-size: 27px; font-weight: 630; line-height: 1.15; letter-spacing: -.025em; }
.detail-id { margin: 0 0 20px; color: var(--muted); font-size: 11px; }
.impact-card { display: grid; grid-template-columns: 92px 1fr; align-items: center; min-height: 96px; padding: 14px 16px; border: 1px solid color-mix(in srgb,var(--detail-color) 32%,var(--line)); border-radius: 10px; background: color-mix(in srgb,var(--detail-color) 8%,transparent); }
.impact-level { border-right: 1px solid var(--line-strong); }
.impact-level span { display: block; color: var(--detail-color); font-size: 37px; font-weight: 650; line-height: 1; }
.impact-level small { display: block; margin-top: 7px; color: var(--muted); font-size: 9px; font-weight: 650; }
.impact-card p { margin: 0; padding-left: 17px; font-size: 13px; }
.detail-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 10px 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--line); overflow: hidden; }
.pipeline-card { display: grid; gap: 3px; margin: 0 0 22px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); }
.pipeline-card small { color: var(--muted); font-size: 9px; font-weight: 650; }
.pipeline-card strong { font-size: 13px; }
.pipeline-card span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.detail-metrics div { padding: 13px 14px; background: var(--panel-soft); }
.detail-metrics small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 650; }
.detail-metrics strong { font-size: 13px; text-transform: capitalize; }
.detail-section { padding: 21px 0; border-top: 1px solid var(--line); }
.detail-section h3 { margin: 0 0 13px; font-size: 15px; }
.stage-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.stage-node { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; text-transform: capitalize; }
.stage-node.primary { border-color: color-mix(in srgb,var(--detail-color) 45%,transparent); color: var(--detail-color); }
.stage-arrow { color: var(--muted); font-size: 11px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list span { padding: 5px 8px; border-radius: 20px; background: rgba(255,255,255,.06); font-size: 11px; }
.section-kicker { margin: 0 0 3px; color: var(--muted); font-size: 9px; font-weight: 700; }
.section-title-row { justify-content: space-between; }
.section-title-row h3 { margin-bottom: 0; }
.detail-summary { margin: 17px 0 0; color: var(--text); font-size: 15px; font-weight: 620; line-height: 1.55; }
.description { margin: 11px 0 18px; color: #c0cbd1; font-size: 14px; line-height: 1.7; }
.technical-toggle { width: 100%; min-height: 58px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 10px 13px; border: 1px solid color-mix(in srgb,var(--detail-color) 52%,var(--line)); border-radius: 8px; color: var(--text); background: color-mix(in srgb,var(--detail-color) 10%,transparent); cursor: pointer; text-align: left; }
.technical-toggle:hover { background: color-mix(in srgb,var(--detail-color) 16%,transparent); }
.technical-toggle strong { color: var(--detail-color); font-size: 13px; }
.technical-toggle span { color: var(--muted); font-size: 10px; }
.technical-toggle[aria-pressed="true"] { border-color: var(--detail-color); background: color-mix(in srgb,var(--detail-color) 16%,transparent); }
.evidence-heading { justify-content: space-between; gap: 9px; }
.evidence-heading span { margin-bottom: 13px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.evidence-heading span b { color: var(--detail-color); font-size: 15px; }
.source-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 10px; min-height: 52px; border-top: 1px solid var(--line); }
.source-row > i { width: 7px; height: 7px; border-radius: 50%; background: var(--detail-color); opacity: var(--source-opacity); }
.source-row p { margin: 0; }
.source-row p b { display: block; font-size: 12px; }
.source-row p small { color: var(--muted); font-size: 10px; }
.confidence-chip { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 9px; text-transform: capitalize; }
.detail-footer { padding: 14px 28px 17px; border-top: 1px solid var(--line); background: #0e141c; }
.export-button { width: 100%; min-height: 45px; border: 1px solid color-mix(in srgb,var(--detail-color) 55%,transparent); border-radius: 8px; background: color-mix(in srgb,var(--detail-color) 12%,transparent); cursor: pointer; font-size: 13px; font-weight: 650; }
.export-button span { margin-right: 7px; color: var(--detail-color); font-size: 17px; }
.detail-footer small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; text-align: center; }
.mobile-only { display: none; }

@media (max-width: 1100px) {
  :root { --filters-width: 290px; --detail-width: 420px; }
  .view-toolbar { grid-template-columns: 96px minmax(0,1fr) 92px; gap: 8px; padding-inline: 10px; }
  .view-selector button { min-width: 0; padding-inline: 5px; font-size: 10px; }
  .header-summary { gap: 10px; font-size: 9px; }
  .header-summary span + span { padding-left: 10px; }
  .legend-bar { gap: 12px; font-size: 9px; }
  .legend-note { padding-left: 12px; }
}

@media (max-width: 899px) {
  :root { --strip-height: 28px; --topbar-height: 52px; --toolbar-height: 98px; --legend-height: 78px; }
  .mockup-strip { font-size: 9px; line-height: 1.15; }
  .topbar { padding: 0 12px; }
  .brand-subtitle { display: none; }
  .header-summary { gap: 7px; font-size: 8px; }
  .header-summary span:nth-child(1) { display: none; }
  .header-summary .updated-note { display: none; }
  .header-summary span + span { padding-left: 7px; }
  .header-summary strong { font-size: 11px; }
  .view-toolbar { grid-template-columns: 86px minmax(0,1fr) 44px; grid-template-rows: 40px 42px; gap: 6px; padding: 7px 9px; }
  .filters-toggle { grid-column: 1; grid-row: 1; height: 38px; }
  .reset-button { grid-column: 3; grid-row: 1; width: 44px; height: 38px; font-size: 0; }
  .reset-button span { margin: 0; font-size: 16px; }
  .view-selector { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .view-selector::-webkit-scrollbar { display: none; }
  .view-selector button { min-width: 136px; min-height: 40px; flex: 0 0 auto; font-size: 10px; }
  .filters-panel, .detail-panel { position: absolute; inset: 0; z-index: 50; width: 100%; height: 100%; border: 0; opacity: 1; transition: transform .3s ease, visibility .3s; }
  .filters-panel { padding: 22px 20px 26px; transform: translateX(-102%); visibility: hidden; }
  .filters-panel.open { width: 100%; border: 0; transform: translateX(0); visibility: visible; }
  .filters-panel > * { min-width: 0; }
  .detail-panel { transform: translateX(102%); visibility: hidden; }
  .detail-panel.open { width: 100%; border: 0; transform: translateX(0); visibility: visible; }
  .detail-panel > *:not(.detail-close) { min-width: 0; }
  .legend-bar { flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: 5px 13px; padding: 7px 12px; font-size: 9px; line-height: 1.15; }
  .legend-category { gap: 5px; }
  .legend-note { width: auto; padding-left: 0; padding-right: 9px; border-left: 0; border-right: 1px solid var(--line); }
  .y-axis-title { left: -9px; width: 65px; }
  .y-axis-title strong, .x-axis-title strong { font-size: 10px; }
  .y-axis-title span, .x-axis-title span { font-size: 8px; }
  .y-axis-title { left: 10px; top: calc(var(--plot-top,70px) - 46px); width: 150px; transform: none; text-align: left; white-space: normal; }
  .y-axis-ticks { font-size: 9px; }
  .y-axis-ticks span { left: 18px; width: 29px; }
  .x-axis-ticks { font-size: 8px; }
  .x-axis-ticks span { bottom: 34px; width: 20vw; padding: 0 2px; }
  .x-axis-title { bottom: 2px; }
  .free-axis-label { max-width: 105px; padding: 3px 4px; font-size: 7px; }
  .free-axis-title { max-width: 140px; padding: 4px 6px; }
  .free-axis-title strong { font-size: 8px; }
  .free-axis-title span { font-size: 7px; }
  .free-axis-title.gravity-title { top: 8px; left: 8px; }
  .free-axis-title.stage-title { top: 43px; left: 8px; transform: none; text-align: left; }
  .free-axis-title.time-title { top: 78px; right: auto; left: 8px; }
  .hover-label { width: 220px; }
}

@media (max-width: 520px) {
  .brand-block { min-width: 130px; }
  .brand-block h1 { font-size: 17px; }
  .brand-mark { width: 25px; height: 25px; }
  .brand-mark i:nth-child(1) { width: 24px; height: 24px; }
  .header-summary span:nth-child(3) { display: none; }
  .detail-scroll { padding: 26px 20px 22px; }
  .detail-footer { padding-inline: 20px; }
  .detail-heading h2 { font-size: 25px; }
  .impact-card { grid-template-columns: 80px 1fr; padding-inline: 13px; }
  .impact-level span { font-size: 34px; }
  .impact-card p { padding-left: 13px; font-size: 12px; }
  .description { font-size: 14px; }
}

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

/* Temporal radar. Retains the original orthographic views and detail components. */
:root { --legend-height: 136px; --filters-width: 288px; --detail-width: 400px; --toolbar-height: 58px; }
[hidden] { display: none !important; }
select { width:100%; min-height:38px; border:1px solid #334454; border-radius:6px; padding:8px 28px 8px 10px; background:#101b26; color:#dce6ee; font:inherit; font-size:11px; text-overflow:ellipsis; }
select:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
label[for] { display:block; margin-bottom:8px; font-size:12px; font-weight:600; }
.filters-panel.open { padding:20px 18px; }
.filters-panel > * { min-width:250px; }
.panel-heading h2 { font-size:17px; }
.panel-intro { font-size:11px; }
.company-filter { padding:14px; border:1px solid #397070; border-radius:8px; background:linear-gradient(140deg,#16333277,#122028); }
.company-filter label { color:#c1eee6; line-height:1.5; }
.company-filter p { font-size:11px; color:#bfced6; margin:10px 0 5px; }
.company-filter small,.trace-filters small,.taxonomy-note { color:#8d9eac; font-size:10px; line-height:1.5; }
.taxonomy-note { margin:-5px 0 12px; }
.trace-filters label { font-weight:400; color:#aeb8c3; margin-top:12px; }
.trace-filters small { display:block; margin-top:12px; }
.trace-filters a { color:var(--brand-link); }
.category-option { min-height:34px; padding:0 9px; font-size:11px; }
.category-filters { gap:6px; }
.filter-section { padding:16px 0; }
.orbit-button { padding:8px 12px; border:1px solid #33404b; border-radius:6px; background:transparent; color:#93a6b5; cursor:pointer; font-size:11px; white-space:nowrap; }
.orbit-button[aria-pressed=true] { color:#c7afff; border-color:#8970ba; background:#241a35; }
.view-selector { gap:3px; }
.view-selector button { font-size:11px; padding:8px 12px; }
.plot-area { background:radial-gradient(ellipse at 50% 50%,#142431 0%,#09131f 37%,#060b12 74%); }
.axis-overlay[data-view=tunnel] { display:none; }
.tunnel-overlay { position:absolute; inset:0; pointer-events:none; z-index:6; }
.tunnel-heading { position:absolute; top:22px; left:26px; }
.tunnel-heading p { margin:0 0 6px; color:#7b9aaa; font-size:9px; letter-spacing:.16em; }
.tunnel-heading h2 { margin:0 0 5px; font-size:28px; font-weight:500; letter-spacing:-.04em; }
.tunnel-heading > span { font-size:11px; color:#a9bbc8; }
.quadrant-control { position:absolute; right:24px; top:22px; pointer-events:auto; text-align:right; }
.quadrant-control > span { font-size:10px; color:#9cafbf; }
.quadrant-control > div { display:flex; padding:3px; margin-top:6px; border:1px solid #314151; border-radius:7px; background:#0c1521; }
.quadrant-control button { border:0; padding:6px 15px; background:transparent; color:#99aebb; border-radius:4px; cursor:pointer; font-size:11px; }
.quadrant-control button[aria-pressed=true] { color:#c3f4ef; background:#203c41; }
.quadrant-control small { display:block; margin-top:5px; color:#8297a6; font-size:9px; }
.quadrant { position:absolute; width:160px; color:var(--quadrant-color); }
.quadrant span { display:block; color:#708797; font-size:9px; letter-spacing:.12em; }
.quadrant strong { font-size:15px; font-weight:500; }
.q0 { top:26%; right:5%; text-align:right; } .q1 {top:26%;left:5%;} .q2 {bottom:19%;left:5%;} .q3 {bottom:19%;right:5%;text-align:right;}
.company-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-25%); text-align:center; max-width:155px; }
.company-center i { display:block; margin:-10px auto 5px; width:10px; height:10px; border:2px solid #c3f9ee; border-radius:50%; background:#4d9b98; box-shadow:0 0 0 6px #5acfbd12,0 0 30px #5acfbdaa; }
.company-center strong { display:block; font-size:8px; letter-spacing:.15em; color:#c2eae3; }
.company-center small { display:block; font-size:8px; color:#90a5b5; max-width:110px; line-height:1.3; margin:2px auto; }
#ring-labels span { position:absolute; transform:translate(-90%,-70%); font-size:9px; color:#96afbf; background:#0a1520cf; padding:1px 5px; border-radius:3px; white-space:nowrap; }
.tunnel-bottom { position:absolute; bottom:16px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:10px; color:#849bab; }
.present-badge { border:1px solid #477576; border-radius:20px; color:#abd9d0; background:#102825b0; padding:4px 10px; letter-spacing:.03em; }
.point-label { position:absolute; transform:translateY(-50%); padding:3px; pointer-events:auto; border:0; background:transparent; color:#9baebc; font-size:8px; line-height:1.3; cursor:pointer; text-align:left; }
.point-label strong { display:none; max-width:115px; font-size:10px; font-weight:500; color:#dce7ef; text-shadow:0 1px 4px #000; }
.point-label.featured strong { display:block; }
.point-label.featured > span { display:none; }
.point-label:hover,.point-label:focus-visible { z-index:12; background:#111e2a; border-radius:4px; }
.point-label:hover strong,.point-label:focus-visible strong { display:block; }
.point-label:hover > span,.point-label:focus-visible > span { display:none; }
.radar-stage { grid-template-rows:minmax(0,1fr) auto; }
.radar-footer { background:#0b131d; border-top:1px solid #243543; }
.time-navigation { display:flex; gap:16px; padding:12px 24px 7px; align-items:center; }
.time-navigation > button { width:27px; height:27px; padding:0; border:1px solid #354a59; border-radius:50%; background:#17232d; cursor:pointer; color:#c3d6df; }
.time-navigation button:disabled { opacity:.3; cursor:default; }
.time-track { flex:1; }
.time-track label { margin:0; display:flex; justify-content:space-between; color:#8199aa; font-size:10px; font-weight:400; }
#time-output { color:var(--brand-pale); }
#time-travel { width:100%; accent-color:var(--brand-cyan); height:4px; margin:11px 0 6px; display:block; cursor:ew-resize; }
.year-stops { display:flex; justify-content:space-between; }
.year-stops button { border:0; background:none; color:#adc1cf; font-size:9px; padding:2px 0; cursor:pointer; }
.legend-bar { min-height:32px; padding:5px 15px; border:0; background:transparent; gap:12px; flex-wrap:wrap; overflow:visible; font-size:9px; }
#domain-legend { display:flex; flex-wrap:wrap; gap:13px; }
#domain-legend span { display:flex; align-items:center; gap:5px; white-space:nowrap; }
#domain-legend i { width:6px; height:6px; border-radius:50%; }
.legend-note { font-size:9px; padding-left:12px; }
.view-explanation { text-align:center; font-size:9px; color:#849aab; padding:0 12px 9px; }
.orbit-notice { position:absolute; top:70px; left:50%; transform:translateX(-50%); color:#cfb5ff; font-size:11px; padding:7px 12px; background:#171626dd; border-radius:5px; z-index:8; }
.detail-panel > *:not(.detail-close) { min-width:390px; }
.detail-heading h2 { font-size:24px; }
.detail-scroll { padding:28px 20px; }
.impact-level span { font-size:22px; }
.attack-title { margin-top:18px !important; }
.x-axis-ticks span { white-space:normal; font-size:9px; width:110px; }
.y-axis-ticks span { width:62px; left:10px; font-size:9px; }
@media (max-width:1100px) {
  .tunnel-heading h2 {font-size:23px;} .tunnel-heading > span {display:none;}
  .quadrant-control {right:16px;} .q0,.q3 {right:3%;} .q1,.q2 {left:3%;}
  .quadrant {width:125px;} .quadrant strong {font-size:12px;}
  .point-label.featured strong {max-width:85px;font-size:9px;}
  .topbar .header-summary {gap:10px; font-size:10px;}
}
@media (max-width:899px) {
  :root {--toolbar-height:96px;}
  .view-toolbar {flex-wrap:wrap; gap:7px; padding:8px 12px; align-content:center;}
  .view-selector {order:3; width:100%; overflow-x:auto;}
  .view-selector button {white-space:nowrap; flex:none;}
  .orbit-button {margin-left:auto;} .reset-button {font-size:10px;}
  .filters-panel.open {width:288px;} .filters-panel > * {min-width:250px;}
  .tunnel-heading {top:15px;left:16px;} .tunnel-heading h2 {font-size:22px;}
  .tunnel-heading p {font-size:7px;} .quadrant-control {top:12px;}
  .quadrant-control small {max-width:125px;} .quadrant-control button {padding:6px 10px;}
  .tunnel-bottom {bottom:10px; left:12px; right:12px; font-size:8px;}
  .q0,.q1 {top:25%;} .q2,.q3 {bottom:19%;} .quadrant {width:105px;}
  .quadrant span {font-size:7px;} .quadrant strong {font-size:11px;}
  .point-label.featured strong {max-width:76px; font-size:8px;}
  .time-navigation {padding:10px 16px 5px;gap:10px;}
  #domain-legend {gap:6px 12px;justify-content:center;} .legend-bar {gap:4px;}
  .legend-note {border:0;padding-left:0;} .view-explanation {font-size:8px;}
  .detail-panel > *:not(.detail-close) {min-width:0;} .detail-panel.open {max-width:100%;}
}
@media (max-height:650px) {
  .tunnel-heading {top:10px;} .tunnel-heading h2 {font-size:21px;} .tunnel-heading > span {display:none;}
  .time-navigation {padding-top:6px;} .point-label.featured strong {display:none;}
  .point-label.featured > span {display:block;}
}
.point-label { width:24px; height:24px; padding:0; transform:translate(-50%,-50%); border-radius:50%; }
.point-label > span, .point-label.featured > span { display:none; }
.point-label strong { position:absolute; left:28px; top:4px; width:130px; max-width:130px; padding:3px 5px; background:#08121bcc; border-left:1px solid var(--point-color); border-radius:2px; }
.point-label.label-left strong { left:auto; right:28px; text-align:right; border-left:0; border-right:1px solid var(--point-color); }
.point-label.featured strong {max-width:130px;}
.point-label:hover,.point-label:focus-visible {background:transparent;}
.company-center {max-width:105px;pointer-events:none;}
@media (max-width:899px) {
  .point-label strong,.point-label.featured strong {width:85px;max-width:85px;font-size:8px;left:20px;}
  .point-label.label-left strong {left:auto;right:20px;}
}
.axis-overlay .y-axis-title {left:-20px;width:80px;}
.axis-overlay .y-axis-title span {display:none;}
.axis-overlay .y-axis-ticks span {left:32px;width:75px;}
.axis-overlay[data-view=top] .y-axis-ticks span {font-size:8px;}
.detail-metrics strong {text-transform:none;}
@media (max-width:899px) {
  .view-toolbar {display:grid;grid-template-columns:86px minmax(0,1fr) 38px;grid-template-rows:38px 42px;gap:6px;}
  .orbit-button {grid-column:2;grid-row:1;justify-self:end;max-width:100%;font-size:10px;padding:7px 10px;}
  .reset-button {grid-column:3;grid-row:1;font-size:0;width:38px;min-width:0;overflow:hidden;padding:0;}
  .view-selector {grid-column:1 / -1;grid-row:2;}
  .axis-overlay .y-axis-title {left:10px;width:160px;}
  .axis-overlay .y-axis-ticks span {left:0;width:57px;font-size:8px;}
  .x-axis-ticks span {max-width:60px;font-size:7px;line-height:1.3;}
}

/* A single, spatial temporal instrument. */
.plot-area {background:radial-gradient(ellipse at 48% 65%,#0b162c 0%,#060c19 48%,#040813 100%);}
.tunnel-heading {top:24px;left:30px;}
.tunnel-heading h2 {font-size:30px;font-weight:450;letter-spacing:-.04em;}
.tunnel-heading p {font-size:9px;letter-spacing:.19em;color:#7d96af;}
.tunnel-heading > span {font-size:11px;color:#90a7ba;}
#quadrant-labels {position:absolute;bottom:13px;left:28px;display:flex;gap:24px;}
#quadrant-labels .quadrant {position:static;min-width:82px;width:auto;text-align:left;}
#quadrant-labels .quadrant span {font-size:7px;letter-spacing:.12em;}
#quadrant-labels .quadrant strong {font-size:11px;color:#c1d2df;}
.tunnel-bottom {bottom:61px;left:28px;right:28px;}
.tunnel-bottom > span:last-child {font-size:9px;}
#ring-labels span {padding:0;background:none;transform:translateX(-50%);text-align:center;white-space:nowrap;color:#acc1d7;}
#ring-labels span b {font-size:21px;letter-spacing:-.04em;font-weight:450;display:block;line-height:1;}
#ring-labels span[data-ring-year="0"] b {font-size:11px;color:#c6efec;letter-spacing:.08em;}
#ring-labels span small {display:block;font-size:7px;letter-spacing:.17em;margin-top:5px;color:#738fa9;}
#ring-labels span i {display:block;margin:7px auto 0;width:1px;background:linear-gradient(#7188a880,#7188a820);}
.company-center {transform:translate(-50%,0);padding-top:10px;}
.company-center i {margin-top:-15px;width:7px;height:7px;}
.company-center strong {font-size:8px;}
.company-center small {font-size:8px;background:#091121b0;border-radius:3px;}
.point-label strong,.point-label.featured strong,.point-label.label-left strong {left:var(--label-x,25px);top:var(--label-y,-8px);right:auto;width:140px;max-width:140px;border:0;background:transparent;text-align:left;padding:0;font-size:10px;font-weight:450;line-height:1.4;color:#d0dced;text-shadow:0 1px 8px #02040d,0 1px 3px #02040d;}
.point-label:hover strong,.point-label:focus-visible strong {background:#091426ee;outline:1px solid #50738b;padding:5px;border-radius:4px;}
.orbit-notice {top:auto;bottom:62px;left:auto;right:26px;transform:none;background:#10182be8;font-size:9px;padding:5px 9px;z-index:7;}
@media(max-width:899px){
 .tunnel-heading {left:17px;top:17px;} .tunnel-heading h2 {font-size:21px;max-width:210px;}
 .tunnel-heading p {font-size:6px;letter-spacing:.1em;}
 #quadrant-labels {left:15px;right:15px;gap:8px;justify-content:space-between;bottom:14px;}
 #quadrant-labels .quadrant {min-width:0;max-width:90px;}
 #quadrant-labels .quadrant strong {font-size:9px;line-height:1.2;display:block;}
 .tunnel-bottom {left:15px;right:15px;bottom:68px;} .tunnel-bottom>span:last-child {display:none;}
 .point-label strong,.point-label.featured strong,.point-label.label-left strong {left:var(--label-x,22px);top:var(--label-y,-8px);width:96px;max-width:96px;font-size:8px;}
 #ring-labels span b {font-size:15px;} #ring-labels span[data-ring-year="0"] b{font-size:8px;}
}
.tunnel-heading > span {display:none;}
#quadrant-markers span {position:absolute;transform:translate(-50%,-50%);width:17px;height:17px;text-align:center;border:1px solid #8abac047;border-radius:50%;font-size:8px;line-height:15px;color:#9bbccf;background:#0a172466;}
/* Portal: the volume owns the stage, not an inset chart. */
.plot-area {background:radial-gradient(ellipse at 66% 48%,#11233a 0%,#071323 42%,#030815 100%);}
.tunnel-heading {z-index:9;top:24px;left:30px;max-width:350px;}
.tunnel-heading h2 {font-size:36px;font-weight:450;letter-spacing:-.055em;}
.tunnel-heading p {font-size:9px;letter-spacing:.18em;color:#96b7cf;}
#ring-labels span {transform:none;text-align:left;display:flex;align-items:baseline;gap:4px;padding:3px 6px;background:#071423b0;border-left:1px solid #6689a5;border-radius:0 3px 3px 0;}
#ring-labels span b {font-size:12px;color:#d9e8f6;font-weight:500;}
#ring-labels span small {font-size:7px;letter-spacing:.09em;margin:0;}
#ring-labels span i {display:none;}
.company-center {padding:8px 9px;background:#061221be;border:1px solid #8ec9c13d;border-radius:6px;min-width:112px;}
.company-center i {margin:-13px auto 5px;}
.company-center strong {letter-spacing:.13em;}
.company-center small {background:none;}
.point-label strong,.point-label.featured strong {background:#07111f6b;border-radius:3px;padding:3px 5px;}
#quadrant-labels {padding:9px 13px;background:#05101dbf;border:1px solid #49708c30;border-radius:6px;gap:23px;bottom:12px;}
.quadrant-control {background:#06111ed9;padding:8px 10px;border-radius:8px;top:17px;right:20px;}
.quadrant-control > span {font-size:9px;}
@media(max-width:899px){.tunnel-heading{left:17px;top:23px;max-width:195px;}.tunnel-heading h2{font-size:27px;}.tunnel-heading p{font-size:6px;}.quadrant-control{top:15px;right:10px;padding:5px;}#quadrant-labels{gap:10px;padding:8px 10px;}}
#year-leaders {position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;}
#year-leaders path {fill:none;stroke:#6b91ac;stroke-width:.7;opacity:.38;}

/* Default company-centered radar; the temporal tunnel remains a separate view. */
.axis-overlay[data-view=radar] {display:none;}
.tunnel-overlay[data-view=radar] #quadrant-labels {inset:0;display:block;background:none;border:0;padding:0;pointer-events:none;}
.tunnel-overlay[data-view=radar] #quadrant-labels .quadrant {position:absolute;width:145px;max-width:30%;min-width:0;padding:10px 12px;border-left:2px solid var(--quadrant-color);background:linear-gradient(90deg,#0b1c2ae6,transparent);}
.tunnel-overlay[data-view=radar] .q0 {top:25%;right:5%;bottom:auto;left:auto;}
.tunnel-overlay[data-view=radar] .q1 {top:25%;left:5%;bottom:auto;right:auto;}
.tunnel-overlay[data-view=radar] .q2 {bottom:14%;left:5%;top:auto;right:auto;}
.tunnel-overlay[data-view=radar] .q3 {bottom:14%;right:5%;top:auto;left:auto;}
.tunnel-overlay[data-view=radar] #quadrant-labels .quadrant strong {font-size:14px;display:block;margin-top:4px;}
.tunnel-overlay[data-view=radar] #quadrant-markers {display:none;}
.tunnel-overlay[data-view=radar] .tunnel-heading h2 {font-size:29px;max-width:240px;}
@media(max-width:650px){
 .tunnel-overlay[data-view=radar] #quadrant-labels .quadrant {width:112px;padding:7px 8px;}
 .tunnel-overlay[data-view=radar] #quadrant-labels .quadrant strong {font-size:11px;}
 .tunnel-overlay[data-view=radar] .tunnel-heading h2 {font-size:23px;max-width:170px;}
}
.tunnel-overlay[data-view=radar] .tunnel-bottom {bottom:16px;}

.year-stops button.current-year {color:#cbfff1;background:#234b50;border-radius:4px;box-shadow:0 0 12px #75d8ce24;}

.journey-status {display:flex;align-items:center;gap:20px;padding:10px 24px;border-top:1px solid #669ab51f;color:#bed6e2;background:#07121d;}
.journey-status[hidden] {display:none;}
.journey-kicker {display:block;font-size:8px;letter-spacing:.13em;color:#7498ae;margin-bottom:4px;}
.journey-status strong {display:block;font-size:11px;font-weight:500;}
.journey-next {flex:1;min-width:0;}
.journey-next strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#journey-count {font-size:10px;white-space:nowrap;color:#8eb8c2;}
@media(max-width:650px){.journey-status {padding:8px 15px;gap:12px;}.journey-status strong{font-size:9px;}#journey-count{font-size:8px;}.journey-kicker{font-size:6px;}}

.research-link {color:var(--brand-link);font-size:11px;white-space:nowrap;text-decoration:none;margin-right:15px;}

/* Controls occupy layout space; the renderer never competes with navigation. */
.app-shell {grid-template-rows:auto minmax(0,1fr);overflow:auto;}
.view-toolbar {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 16px;}
.view-toolbar > button {flex:0 0 auto;height:38px;min-height:38px;min-width:90px;font-size:11px;}
.view-selector {display:flex;flex:1 1 650px;width:auto;min-width:0;overflow-x:auto;gap:4px;order:0;scrollbar-width:thin;}
.view-selector button {flex:1 0 auto;min-width:94px;min-height:38px;padding:8px 12px;font-size:11px;}
.view-toolbar .reset-button {width:auto;overflow:visible;padding:0 12px;font-size:11px;}
.view-toolbar .orbit-button {max-width:none;}
.radar-stage {grid-template-rows:auto minmax(260px,1fr) auto;min-height:0;}
.scene-header {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 24px;background:#09121c;border-bottom:1px solid #29414e;}
.scene-header[hidden] {display:none;}
.radar-stage:has(.scene-header[hidden]) {grid-template-rows:minmax(260px,1fr) auto;}
.scene-header .tunnel-heading {position:static;max-width:none;}
.scene-header .tunnel-heading p {font-size:8px;margin:0 0 5px;}
.scene-header .tunnel-heading h2 {font-size:22px;letter-spacing:-.035em;max-width:none;margin:0;}
.scene-header .quadrant-control {position:static;flex:0 0 auto;padding:0;background:none;}
.scene-header .quadrant-control > span,.scene-header .quadrant-control small {display:none;}
.scene-header .quadrant-control > div {margin:0;}
.company-center {padding:0!important;min-width:0!important;width:5px;height:5px;border:0!important;background:none!important;transform:translate(-50%,-50%)!important;}
.company-center i {margin:0;width:5px;height:5px;border:1px solid var(--brand-cyan);background:var(--brand-blue);box-shadow:none;opacity:.6;}
#company-center-label {font-size:11px;color:#a3d8d5;border-top:1px solid #31505b;padding-top:10px;}
@media(max-width:1100px){.view-selector{flex:1 1 100%;order:2;}.view-toolbar .orbit-button{margin-left:auto;}}
@media(max-width:650px){
 .view-toolbar {padding:8px 12px;}.view-toolbar > button{min-width:75px;font-size:10px;}.view-selector button{min-width:107px;font-size:10px;}
 .scene-header{padding:11px 15px;gap:10px;}.scene-header .tunnel-heading h2{font-size:18px;}.scene-header .tunnel-heading p{font-size:6px;}
 .radar-stage{grid-template-rows:auto minmax(260px,1fr) auto;}
 .header-summary{display:none;}.research-link{font-size:10px;}
}
@media(max-height:740px){.content-row{overflow:auto;}.radar-stage{min-height:510px;}.radar-footer{flex-shrink:0;}}
.app-shell {grid-template-columns:minmax(0,1fr);overflow-x:hidden;}
.view-toolbar {min-width:0;max-width:100%;}
.content-row {overflow-x:hidden;}

/* Frontal radar reading: two fixed axes and four spatially labelled quadrants. */
#radar-plane {display:none;}
.tunnel-overlay[data-view=tunnel] #radar-plane {display:block;position:absolute;inset:0;pointer-events:none;background:conic-gradient(from 0deg at 50% 50%,#6097b609 0deg 90deg,#65899704 90deg 180deg,#6c91ad09 180deg 270deg,#65899704 270deg 360deg);}
#radar-plane i {position:absolute;display:block;background:#60d2ff;opacity:.8;box-shadow:0 0 3px #8bbfbe33;}
#radar-plane i:first-child {top:50%;left:14px;right:14px;height:1px;}
#radar-plane i:last-child {left:50%;top:14px;bottom:14px;width:1px;}
.tunnel-overlay[data-view=tunnel] #quadrant-labels {position:absolute;inset:0;display:block;padding:0;background:none;border:0;pointer-events:none;}
.tunnel-overlay[data-view=tunnel] #quadrant-labels .quadrant {position:absolute;width:165px;max-width:30%;min-width:0;padding:9px 12px;border-left:2px solid #60d2ff;background:linear-gradient(90deg,#071824ed,#07182455);}
.tunnel-overlay[data-view=tunnel] #quadrant-labels .quadrant strong {font-size:15px;display:block;margin-top:3px;color:#e0efed;}
.tunnel-overlay[data-view=tunnel] #quadrant-labels .quadrant span {font-size:8px;letter-spacing:.1em;}
.tunnel-overlay[data-view=tunnel] .q0 {left:auto;right:105px;top:16px;bottom:auto;}
.tunnel-overlay[data-view=tunnel] .q1 {left:18px;right:auto;top:16px;bottom:auto;}
.tunnel-overlay[data-view=tunnel] .q2 {left:18px;right:auto;top:auto;bottom:62px;}
.tunnel-overlay[data-view=tunnel] .q3 {left:auto;right:105px;top:auto;bottom:62px;}
.tunnel-overlay[data-view=tunnel] #quadrant-markers,.tunnel-overlay[data-view=tunnel] #year-leaders {display:none;}
.tunnel-overlay[data-view=tunnel] .tunnel-bottom {bottom:14px;}
@media(max-width:650px){
 .tunnel-overlay[data-view=tunnel] #quadrant-labels .quadrant {width:110px;max-width:27%;padding:7px 8px;}
 .tunnel-overlay[data-view=tunnel] #quadrant-labels .quadrant strong{font-size:11px;}
 .tunnel-overlay[data-view=tunnel] #quadrant-labels .quadrant span{font-size:6px;}
 .tunnel-overlay[data-view=tunnel] .q0,.tunnel-overlay[data-view=tunnel] .q3{right:88px;}
 .tunnel-overlay[data-view=tunnel] .q1,.tunnel-overlay[data-view=tunnel] .q2{left:12px;}
}

/* Fixed comparisons share a chart-sized canvas and projected label coordinates. */
#radar-stage:is([data-view="front"], [data-view="side"], [data-view="top"]) {
  grid-template-rows: minmax(380px, 1fr) auto;
}
.content-row:has(.orthographic-plot) { overflow-y: auto; }
.orthographic-plot { overflow: auto hidden; scrollbar-color: #466574 #09131f; scrollbar-width: thin; }
.orthographic-plot #canvas-host, .orthographic-plot .axis-overlay { width: max(100%, 760px); }
.orthographic-plot .axis-overlay { opacity: 1; }
.orthographic-plot .axis-overlay .y-axis-title {
  left: var(--plot-left); top: 12px; width: auto; transform: none; text-align: left; white-space: normal;
}
.orthographic-plot .axis-overlay .y-axis-title span { display: block; }
.orthographic-plot .axis-overlay .y-axis-title strong, .orthographic-plot .x-axis-title strong { font-size: 12px; }
.orthographic-plot .axis-overlay .y-axis-title span, .orthographic-plot .x-axis-title span { font-size: 10px; }
.orthographic-plot .axis-overlay .y-axis-ticks span {
  left: calc(var(--plot-left) - 128px); width: 116px; max-width: none; padding: 0;
  font-size: 10px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere;
}
.orthographic-plot .y-axis-ticks span::after {
  content: ""; position: absolute; right: -12px; top: 50%; width: 6px; border-top: 1px solid #65818f;
}
.orthographic-plot .x-axis-ticks span {
  top: calc(var(--plot-bottom-y) + 14px); bottom: auto; width: var(--x-tick-width); max-width: none;
  padding: 0 2px; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
  font-size: 11px; line-height: 1.4; text-transform: none; letter-spacing: normal;
}
.orthographic-plot .axis-overlay:is([data-view="front"], [data-view="top"]) .x-axis-ticks span {
  text-transform: none; letter-spacing: normal;
}
.orthographic-plot .x-axis-ticks span::before {
  content: ""; position: absolute; top: -14px; left: 50%; height: 6px; border-left: 1px solid #65818f;
}
.orthographic-plot .x-axis-title { top: calc(var(--plot-bottom-y) + 82px); bottom: auto; }
.chart-scroll-hint { margin: 0; padding: 8px 16px 2px; color: #afc3cf; font-size: 11px; text-align: center; }
.orthographic-plot:focus-visible { outline: 2px solid #f4f6f7; outline-offset: -4px; }

/* Selection is persistent; the keyboard focus indicator stays inside its control. */
.view-selector { gap: 6px; }
.view-toolbar button:focus-visible, .quadrant-control button:focus-visible {
  outline: 2px solid #f4f6f7; outline-offset: -5px; box-shadow: none;
}
.view-selector button[aria-pressed="true"]:focus-visible { outline-color: #071014; }
.view-selector button[aria-pressed="true"] { color: #071014; border-color: var(--accent); background: var(--accent); }

/* An empty reviewed library has its own reading state, without an empty data grid. */
#radar-stage[data-library-empty="true"] { grid-template-rows: minmax(380px, 1fr); }
.radar-stage[data-library-empty="true"] .scene-header,
.radar-stage[data-library-empty="true"] .radar-footer,
.radar-stage[data-library-empty="true"] .tunnel-overlay,
.radar-stage[data-library-empty="true"] .axis-overlay,
.radar-stage[data-library-empty="true"] .orbit-notice,
.radar-stage[data-library-empty="true"] .list-overlay { display: none; }
.radar-stage[data-library-empty="true"] #canvas-host { visibility: hidden; width: 100%; }
.radar-stage[data-library-empty="true"] .plot-area { overflow: hidden; background: radial-gradient(ellipse at 50% 44%, #102330, #080f18 72%); }
.radar-stage[data-view="list"] .axis-overlay { display: none; }
.empty-state { width: min(340px, calc(100% - 32px)); }
.radar-stage[data-library-empty="true"] .empty-state {
  width: min(620px, calc(100% - 40px)); padding: 32px; border-color: #304852;
  border-radius: 16px; background: #0c1822; box-shadow: 0 20px 64px #02070e55;
}
.radar-stage[data-library-empty="true"] .empty-state > div > strong { font-size: clamp(21px, 2vw, 28px); letter-spacing: -.025em; }
.radar-stage[data-library-empty="true"] .empty-state p { max-width: 470px; margin: 10px auto 24px; font-size: 14px; line-height: 1.65; }
.empty-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 20px 0 0; margin: 0; list-style: none; border-top: 1px solid #2b414d; text-align: left; counter-reset: evidence-step; }
.empty-workflow li { counter-increment: evidence-step; }
.empty-workflow li::before { content: counter(evidence-step, decimal-leading-zero); display: block; margin-bottom: 8px; color: #78dce8; font-size: 11px; }
.empty-workflow b { display: block; font-size: 12px; }
.empty-workflow span { display: block; margin-top: 5px; color: #a0b4c3; font-size: 11px; line-height: 1.5; }
@media (max-width: 600px) {
  .radar-stage[data-library-empty="true"] { min-height: 510px; }
  .radar-stage[data-library-empty="true"] .empty-state { padding: 24px 20px; }
  .radar-stage[data-library-empty="true"] .empty-state p { font-size: 13px; margin-bottom: 18px; }
  .empty-workflow { grid-template-columns: 1fr; gap: 12px; padding-top: 16px; }
  .empty-workflow li { position: relative; padding-left: 30px; }
  .empty-workflow li::before { position: absolute; left: 0; top: 1px; margin: 0; }
  .empty-workflow span { margin-top: 2px; }
  .content-row:has([data-library-empty="true"]) { overflow-y: auto; }
}
.variable-table{margin-top:14px}.variable-row{display:grid;grid-template-columns:38px minmax(0,1fr) 58px;gap:8px;border-bottom:1px solid #263641;padding:9px 0;font-size:11px;line-height:1.5}.variable-row>b{color:#9bd3c7}.variable-row>span{color:#9bb2c1}.variable-row>strong{text-align:right;font-size:10px;color:#a6d9c3}.variable-row.unknown>strong{color:#8c9da9}.variable-row details{grid-column:2/-1;font-size:10px}.variable-row summary{cursor:pointer;color:#91bbbe}.variable-row blockquote{font-size:11px;line-height:1.6;color:#9fbcc8;border-left:2px solid #426776;padding-left:12px;margin:10px 0}.filter-section select{max-width:100%}

/* Compact display titles; complete source titles remain in the detail panel. */
.point-label strong,.point-label.featured strong,.point-label.label-left strong {width:160px;max-width:160px;max-height:34px;overflow:hidden;font-size:11px;line-height:1.4;}
@media(max-width:500px){.point-label strong,.point-label.featured strong,.point-label.label-left strong{width:112px;max-width:112px;font-size:10px;max-height:30px;}}

/* Sweep application chrome. */
.brand-subtitle{color:var(--brand-pale);font-size:9px;letter-spacing:.035em;margin-top:4px;}
.topbar{background:var(--brand-ink);}
.scene-header,.time-navigation,.time-journey,.legend-bar{background-color:var(--brand-surface);}
.present-badge{border-color:var(--brand-blue);background:#0070c026;color:var(--brand-pale);}
.quadrant-control button[aria-pressed=true]{background:#0070c040;color:var(--brand-pale);}
#time-travel{accent-color:var(--brand-cyan);}

.dataset-switch{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025)}.dataset-switch a{padding:5px 10px;border-radius:6px;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}.dataset-switch a.active,.dataset-switch a[aria-current="page"]{color:var(--text);background:rgba(255,255,255,.08)}.dataset-switch a:hover{color:var(--text)}

/* Quieter chrome (workspace-24): same views, controls and messages, less weight around the plot. */
:root{--strip-height:22px;--toolbar-height:50px;--legend-height:112px;}
.mockup-strip{background:var(--brand-ink);border-bottom:1px solid var(--line);color:#8fa3b3;font-size:10px;font-weight:500;letter-spacing:.01em;}
.mockup-strip span{background:#5b7386;width:5px;height:5px;}
.mockup-strip.is-error{background:#1d190c;color:#efd08e;border-bottom-color:rgba(247,184,75,.25);font-weight:650;}
.view-toolbar{padding:8px 16px;gap:8px;}
.view-toolbar > button,.view-toolbar .view-selector button,.view-toolbar .filters-toggle,.view-toolbar .reset-button,.view-toolbar .orbit-button{height:32px;min-height:32px;padding:0 12px;border-radius:6px;font-size:11px;font-weight:500;}
.view-toolbar .filters-toggle{min-width:0;}
.view-selector{display:inline-flex;flex:0 1 auto;gap:2px;padding:2px;border:1px solid var(--line);border-radius:7px;background:rgba(255,255,255,.02);}
.view-toolbar .orbit-button{margin-left:auto;}
.view-selector button{min-width:0;height:28px;min-height:28px;border:0;background:transparent;color:var(--muted);}
.view-selector button:hover{color:var(--text);background:rgba(255,255,255,.05);}
.view-selector button.active{color:#071014;background:var(--accent);}
.view-toolbar .orbit-button{border-color:var(--line);color:var(--muted);}
.view-toolbar .reset-button{border-color:var(--line);background:transparent;color:var(--muted);}
.view-toolbar .reset-button span{margin-right:5px;}
.scene-header{padding:7px 24px;gap:16px;background:transparent;border-bottom:1px solid #1d2b37;}
.tunnel-heading{position:static;display:flex;align-items:baseline;gap:10px;}
.scene-header .tunnel-heading h2{margin:0;font-size:13px;font-weight:600;letter-spacing:0;color:var(--text);max-width:none;}
.tunnel-heading > span{display:inline;font-size:11px;color:#8399ab;}
.quadrant-control{position:static;display:flex;align-items:center;gap:8px;text-align:left;}
.quadrant-control > span{font-size:10px;color:#8399ab;}
.quadrant-control > div{margin:0;padding:2px;}
.quadrant-control button{padding:4px 11px;font-size:11px;}
.quadrant-control small{margin:0;font-size:10px;color:#6f8798;}
.quadrant span{display:none;}
.quadrant strong{font-size:13px;font-weight:500;opacity:.85;}
#ring-labels span{opacity:.8;}
.tunnel-bottom{font-size:10px;color:#7a91a1;}
.present-badge{padding:3px 9px;font-size:10px;}
.time-navigation{padding:9px 24px 4px;}
.journey-status{display:flex;align-items:center;gap:18px;padding:3px 24px 6px;font-size:10px;color:#8399ab;}
.journey-status > div:first-child{display:none;}
.journey-status .journey-kicker{display:inline;margin:0 8px 0 0;font-size:8px;}
.journey-status strong{display:inline;font-size:11px;font-weight:500;}
.journey-status .journey-next{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.journey-status > span{margin-left:auto;}
.legend-bar{min-height:0;padding:4px 16px 8px;gap:8px 18px;flex-wrap:wrap;justify-content:center;font-size:10px;}
.legend-category{gap:6px;font-size:10px;}
.legend-bar .view-explanation{padding:0 0 0 18px;border-left:1px solid var(--line);text-align:left;font-size:10px;color:#7f95a6;}
@media (max-width:760px){
 .legend-bar .view-explanation{border:0;padding:0;width:100%;text-align:center;}
 .scene-header{padding:6px 12px;flex-wrap:wrap;gap:6px;}
 .scene-header .tunnel-heading h2{font-size:12px;}
 .tunnel-heading > span{display:none;}
 .journey-status{padding:2px 12px 5px;}
}

/* Provenance: where each plotted value comes from (workspace-25). */
.provenance-toggle{display:flex;align-items:center;gap:8px;width:100%;margin:8px 0 0;padding:7px 11px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;text-align:left;}
.provenance-toggle:hover{color:var(--text);border-color:var(--line-strong);}
.provenance-toggle[aria-expanded=true]{color:var(--text);border-color:color-mix(in srgb,var(--detail-color) 52%,var(--line));}
.provenance-toggle span{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid currentColor;border-radius:50%;font-size:10px;font-weight:650;}
.detail-provenance{margin:8px 0 0;padding:4px 11px;border:1px solid var(--line);border-radius:7px;background:var(--panel-soft);}
.detail-provenance[hidden]{display:none;}
.detail-provenance dl{margin:0;}
.detail-provenance dl > div{display:grid;grid-template-columns:118px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);}
.detail-provenance dl > div:first-child{border-top:0;}
.detail-provenance dt{margin:0;color:var(--muted);font-size:10px;font-weight:650;line-height:1.35;}
.detail-provenance dd{margin:0;font-size:11px;line-height:1.45;}
.detail-provenance dd b{display:block;font-weight:600;color:var(--text);}
.detail-provenance dd span{display:block;color:var(--muted);}

/* Help button instead of the permanent strip and legend line (workspace-25). */
:root{--strip-height:0px;}
body.has-strip{--strip-height:22px;}
.mockup-strip:not(.is-error):not(.is-synthetic){display:none;}
.legend-bar{display:none;}
.radar-stage{grid-template-rows:auto minmax(0,1fr) auto;}
.help-toggle{width:24px;height:24px;margin-left:6px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:650;line-height:1;}
.help-toggle:hover,.help-toggle[aria-expanded=true]{color:var(--text);border-color:var(--accent);}
.help-panel{position:absolute;top:52px;right:16px;z-index:14;width:min(340px,calc(100% - 32px));padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;background:#0a121bf2;color:var(--text);font-size:11px;line-height:1.45;box-shadow:0 12px 32px #00000080;}
.help-panel[hidden]{display:none;}
.help-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:12px;}
.help-head .close-button{width:24px;height:24px;}
.help-panel p{margin:0 0 8px;color:var(--muted);}
.help-panel dl{margin:0;}
.help-panel dl > div{display:grid;grid-template-columns:96px 1fr;gap:8px;padding:5px 0;border-top:1px solid var(--line);}
.help-panel dt{margin:0;color:var(--muted);font-weight:650;font-size:10px;}
.help-panel dd{margin:0;}
.help-domains{display:flex;flex-wrap:wrap;gap:4px 10px;}
.help-domains span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.help-domains i{width:7px;height:7px;border-radius:50%;}
.help-hint{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);}
.radar-stage{position:relative;}
.mockup-strip.is-synthetic{display:flex;background:#1d190c;color:#efd08e;border-bottom-color:rgba(247,184,75,.25);font-weight:650;}
.mockup-strip.is-synthetic span{background:var(--technology);}
.hover-label em{grid-column:1 / 3;margin-top:5px;font-style:normal;font-size:10px;line-height:1.4;color:var(--muted);}
.detail-metrics{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
.detail-metrics strong{text-transform:none;}
.momentum-mark{display:inline-block;margin-right:4px;font-style:normal;font-weight:700;color:#dbe7f0;}