/* One research workspace: an atlas first, supporting analytical tools close at hand. */
:root { --paper: #f5f3ee; --surface: #fffefa; --surface-cool: #f1f5f2; --rule: #ded9dc; --ink: #302838; --muted: #6c6371; }
body { background: var(--paper); }
.shell { max-width: none; width: 100%; border: 0; background: var(--paper); }
.site-header { min-height: 64px; padding: 12px 32px; border: 0; background: var(--paper); gap: 24px; }
.identity-name { font-family: Bricolage, var(--sans); font-size: 23px; font-weight: 500; }
.identity-note { color: var(--muted); letter-spacing: .1em; font-size: 9px; }
.log-pose-mark { border-color: var(--accent); width: 33px; height: 33px; }
.desk-status { opacity: .82; }
.desk-status div { border-color: var(--rule); }
.desk-status dt { font-size: 9px; }
.desk-status dd { font-size: 10px; }
.source-link { font: 10px var(--mono); color: var(--muted); }
.tabs { margin: 0 32px; padding: 0; gap: 24px; display: flex; border: 0; border-bottom: 1px solid var(--rule); background: none; overflow-x: auto; }
.tabs button { flex: 0 0 auto; min-height: 46px; padding: 12px 2px; border: 0; border-bottom: 2px solid transparent; color: var(--muted); background: transparent; font: 12px var(--sans); font-weight: 450; box-shadow: none; }
.tabs button span { display: none; }
.tabs button:hover { color: var(--ink); background: transparent; }
.tabs button[aria-current="page"] { color: var(--accent-deep); background: transparent; border-bottom-color: var(--accent); box-shadow: none; }
.tabs button[data-view="topology"] { order: 1; font-weight: 550; }
.tabs #pin-count { font-size: 9px; background: var(--accent-soft); color: var(--accent-deep); }
#view { padding: 26px 32px 40px; max-width: 1800px; margin: 0 auto; }
.view-title { border: 0; padding-bottom: 12px; }
.view-title h2 { font-family: Bricolage, var(--sans); font-weight: 450; letter-spacing: -.04em; }
body[data-layer="temporal"] .topology-layer-nav { margin: 0 0 16px; border: 0; gap: 6px; }
.topology-layer-button { border-radius: 18px; font-size: 11px; padding: 8px 13px; border: 1px solid var(--rule); background: transparent; }
.topology-layer-button[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
body[data-layer="temporal"] #view > .view-title { display: none; }
body[data-layer="temporal"] .temporal-constellation { border-radius: 10px; }
body[data-layer="temporal"] .temporal-constellation h3 { text-transform: none; }
body[data-layer="temporal"] .temporal-constellation .constellation-map { min-height: 520px; }
body[data-layer="temporal"] .temporal-constellation .constellation-note { font-size: 9px; }
button:focus-visible, select:focus-visible, summary:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.shell > footer { padding: 16px 32px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 10px; }
@media (max-width: 780px) {
  .site-header { padding: 12px 18px; grid-template-columns: 1fr auto; }
  .site-header .desk-status { display: none; }
  .tabs { margin-inline: 18px; gap: 20px; }
  #view { padding: 18px 14px 28px; }
  body[data-layer="temporal"] .temporal-constellation .constellation-map { min-height: 380px; }
  .shell > footer { padding: 16px 18px; }
}
/* Shared light surfaces keep the graph and evidence tools in one workspace. */
:root {
  color-scheme: light;
  --ink: #302838; --ink-soft: #574d62; --muted: #6c6371; --muted-strong: #574d62;
  --paper: #f5f3ee; --paper-deep: #f0ede8; --surface: #fffefa; --surface-cool: #f1f5f2;
  --rule: #ded9dc; --rule-strong: #c9c1ca; --white: #fff;
  --accent: #76558b; --accent-deep: #5a3c6e; --accent-soft: #eee5f1;
  --teal: #b9ddd5; --teal-deep: #326c68; --cyan: #accddd; --cyan-soft: #e5f2f7;
  --link: #5d4e8b; --link-hover: #3b2e68; --focus: #8965a5;
  --surface-raised: #fff; --surface-alt: #eeebf0; --surface-hover: #f1edf4;
  --warning-soft: #fbeddc; --warning: #8d5735; --positive: #28715b; --negative: #a64c48;
  --shadow: 0 10px 30px rgb(64 48 74 / 9%);
}
body, .shell, .site-header { background: var(--paper); color: var(--ink); }
.site-header .identity h1 { color: var(--ink); }
.identity-note, .source-link { color: var(--muted); }
.topology-layer-button { color: var(--muted); }
.topology-layer-button[aria-current="page"] { color: var(--ink); }
.temporal-constellation { --focus: #8965a5; color: var(--ink); }
.temporal-constellation h3 { color: var(--ink); }
@font-face { font-family: 'Atlas Sans'; src: url('./fonts/manrope-latin-wght-normal.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
:root { --sans: 'Atlas Sans', Manrope, ui-sans-serif, system-ui, sans-serif; --heading: var(--sans); --mono: var(--sans); }
html, body, button, input, select, textarea, output, summary, code, pre, .eyebrow,
.identity-name, .constellation-heading h3, .constellation-count strong { font-family: var(--sans); }
.temporal-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; }
.temporal-main, .temporal-sidebar { min-width: 0; }
.temporal-sidebar { padding-top: 24px; max-height: 760px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.temporal-frame-summary { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; min-height: 28px; color: var(--muted); font: 11px/1.5 var(--sans); }
.temporal-graph-heading { display: none; }
.temporal-controls { margin-bottom: 16px; padding: 0; }
.temporal-controls-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 9px; }
.temporal-controls-head > .eyebrow { font-size: 10px; color: var(--muted); letter-spacing: .04em; }
.temporal-controls-head > .muted { display: none; }
.temporal-stop-detail { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--muted); }
.temporal-stop-detail strong { font-size: 14px; font-weight: 650; color: var(--ink); }
.temporal-stop-detail time { font-size: 10px; }
.temporal-facets { display: grid; grid-template-columns: 1fr 1.5fr 1fr 1.3fr; gap: 10px; }
.temporal-facets select { width: 100%; min-width: 0; height: 36px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); padding: 0 10px; border-radius: 4px; font: 11px var(--sans); }
.temporal-rail { display: flex; align-items: center; gap: 18px; margin-top: 10px; }
.temporal-rail input[type=range] { flex: 1; min-width: 60px; accent-color: var(--accent); cursor: ew-resize; }
.temporal-rail button, .temporal-search-submit { height: 32px; background: none; color: var(--ink-soft); border: 1px solid var(--rule-strong); padding: 0 12px; border-radius: 4px; font: 11px var(--sans); }
.temporal-rail button:disabled { opacity: .35; cursor: default; }
.temporal-coverage-note { margin: 7px 0 0; color: var(--warning); font: 10px/1.5 var(--sans); }
.temporal-search > .eyebrow, .temporal-ledger > .eyebrow, .temporal-inspector > .eyebrow { font-size: 10px; letter-spacing: .04em; color: var(--muted); margin-top: 0; }
.temporal-search-form { display: flex; gap: 7px; }
.temporal-search-form input { width: 100%; min-width: 0; background: var(--surface); border: 1px solid var(--rule); padding: 10px; border-radius: 3px; color: var(--ink); font-size: 11px; }
.temporal-search-submit { height: 37px; }
.temporal-suggestions { margin: 12px 0 24px; display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.temporal-suggestion { padding: 5px 9px; border: 1px solid var(--rule); background: transparent; border-radius: 15px; color: var(--ink-soft); font: 10px var(--sans); }
.temporal-suggestion:hover { background: var(--surface-hover); }
.temporal-ledger { margin-top: 20px; max-height: 310px; overflow-y: auto; scrollbar-width: thin; }
.temporal-change { display: flex; flex-direction: column; width: 100%; align-items: start; gap: 4px; padding: 12px 5px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); }
.temporal-change strong { font-size: 12px; font-weight: 620; }
.temporal-change span { font-size: 10px; color: var(--muted); }
.temporal-change small { font-size: 9px; color: var(--muted); }
.temporal-change[aria-pressed=true] { background: var(--accent-soft); border-left: 2px solid var(--accent); padding-left: 10px; }
.temporal-change[data-status=newly_observed_in_selected_frame] strong::before { content: '◇ '; color: var(--cyan); }
.temporal-change[data-status=absent_from_selected_frame] strong::before { content: '◌ '; color: var(--muted); }
.temporal-inspector { margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 20px; }
.temporal-inspector h3 { font: 550 23px/1.3 var(--sans); letter-spacing: -.045em; color: var(--ink); margin: 8px 0 12px; }
.temporal-inspector p, .temporal-ledger > p:not(.eyebrow) { font: 12px/1.65 var(--sans); color: var(--muted); }
.temporal-inspector h4 { font: 650 11px var(--sans); margin-top: 20px; }
.temporal-status-label { color: var(--accent-deep) !important; }
.temporal-evidence-card { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.temporal-evidence-card .eyebrow { font: 650 10px/1.6 var(--sans); letter-spacing: 0; }
.temporal-evidence-card a { font-size: 11px; }
.temporal-evidence-card small { display: block; font-size: 9px; line-height: 1.7; overflow-wrap: anywhere; margin: 7px 0; color: var(--muted); }
.temporal-row-link { display: block; width: 100%; text-align: left; margin: 8px 0; padding: 9px 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-soft); border-radius: 3px; font: 11px/1.5 var(--sans); }
.temporal-limitations { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); max-width: 1100px; }
.temporal-limitations summary { font-size: 11px; cursor: pointer; }
.temporal-limitations p { font-size: 11px; line-height: 1.6; }
.temporal-missing, .temporal-loading { min-height: 440px; padding: 65px 40px; background: var(--surface-alt); border: 1px solid var(--rule); }
@media (max-width: 1000px) {
  .temporal-workspace { grid-template-columns: minmax(0,1fr) 250px; gap: 18px; }
  .temporal-stop-detail time { display: none; }
  .temporal-facets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .temporal-workspace { display: flex; flex-direction: column; }
  .temporal-main, .temporal-sidebar { width: 100%; }
  .temporal-sidebar { max-height: none; overflow: visible; }
  .temporal-controls-head { display: block; }
  .temporal-stop-detail { margin-top: 8px; }
  .temporal-stop-detail time { display: block; max-width: 150px; }
  .temporal-rail { gap: 8px; }
  .temporal-rail button { min-height: 40px; padding-inline: 8px; }
  .temporal-facets select { height: 42px; }
  .temporal-suggestion { min-height: 34px; padding: 8px 10px; }
}
/* The atlas is the first large surface; the time instrument stays directly below it. */
.shell { position: relative; }
.site-header { min-height: 74px; padding: 18px 4.1%; }
.site-header .desk-status { display: none; }
.site-header { grid-template-columns: 1fr auto; }
.tabs { position: absolute; top: 17px; left: 300px; right: 160px; margin: 0; border: 0; justify-content: center; gap: 26px; }
#view { padding-top: 18px; }
body[data-layer=temporal] .view-heading { padding: 12px 0 20px; border-bottom: 0; grid-template-columns: 1fr 1fr; align-items: end; }
body[data-layer=temporal] .view-heading h2 { font: 500 clamp(32px, 4vw, 66px)/1.05 var(--sans); letter-spacing: -.07em; }
body[data-layer=temporal] .view-heading .eyebrow { color: var(--muted); font: 11px var(--sans); letter-spacing: .025em; }
body[data-layer=temporal] .view-heading .view-note { max-width: 470px; font-size: 12px; line-height: 1.7; justify-self: end; }
body[data-layer=temporal] .topology-layer-nav { margin-bottom: 6px; }
body[data-layer=temporal] .topology-layer-button { padding: 6px 10px; font-size: 10px; background: transparent; border: 0; border-radius: 0; }
body[data-layer=temporal] .topology-layer-button[aria-current=page] { border-bottom: 1px solid var(--accent); }
.temporal-view-state { display: flex; flex-direction: column; }
.temporal-workspace { order: 1; }
.temporal-controls { order: 2; margin-top: 15px; max-width: calc(100% - 318px); }
.temporal-limitations { order: 3; }
.temporal-loading, .temporal-missing { order: 1; }
body[data-layer=temporal] .temporal-constellation { border-radius: 3px; }
body[data-layer=temporal] .temporal-constellation .constellation-map { min-height: 440px; height: min(58vh, 650px); max-height: none; aspect-ratio: auto; }
.constellation-heading h3 { font-size: clamp(24px, 2vw, 36px); letter-spacing: -.05em; }
.temporal-controls-head > .eyebrow { display: none; }
.temporal-controls-head { margin-bottom: 8px; }
.temporal-stop-detail { width: 100%; justify-content: space-between; }
.temporal-sidebar { max-height: 660px; }
@media (max-width:1000px) { .temporal-controls { max-width: calc(100% - 268px); } .tabs { left: 230px; right: 100px; gap: 16px; } }
@media (max-width:720px) {
  .site-header { min-height: 65px; padding: 14px 18px; }
  .tabs { position: static; margin-inline: 18px; justify-content: start; gap: 24px; border-bottom: 1px solid var(--rule); }
  body[data-layer=temporal] .view-heading { display: block; padding-top: 0; }
  body[data-layer=temporal] .view-heading h2 { font-size: 38px; }
  body[data-layer=temporal] .view-heading .view-note { margin-top: 10px; font-size: 11px; }
  .temporal-controls { max-width: none; order: 0; margin-top: 10px; }
  .temporal-workspace { order: 1; }
  .temporal-sidebar { max-height: none; }
  body[data-layer=temporal] .temporal-constellation .constellation-map { height: 390px; min-height: 390px; }
}
/* Monospace marks literal provenance, not generic small UI copy. */
:root { --source-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; }
.temporal-stop-detail time,
.temporal-evidence-card small,
.temporal-row-link,
.temporal-frame-id,
.source-foot code,
.source-foot small,
code, pre, .source-token {
  font-family: var(--source-mono);
  font-variant-numeric: tabular-nums;
}
/* Typography: display → reading → controls → literal evidence. */
:root {
  --font-interface: 'Atlas Sans', Manrope, ui-sans-serif, system-ui, sans-serif;
  --font-source: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --type-display: clamp(2.4rem, 4.4vw, 4.5rem);
  --type-title: clamp(1.5rem, 2.2vw, 2.25rem);
  --type-section: 1.125rem;
  --type-body: .875rem;
  --type-control: .8125rem;
  --type-caption: .75rem;
  --type-source: .6875rem;
  --leading-reading: 1.65;
  --leading-compact: 1.35;
  --tracking-display: -.065em;
  --tracking-title: -.04em;
}
body { font-family: var(--font-interface); font-size: var(--type-body); line-height: var(--leading-reading); }
button, input, select, textarea { font-family: var(--font-interface); }
.identity-name { font-size: 23px; line-height: 1.1; letter-spacing: -.065em; font-weight: 750; }
.identity-note { font-size: 11px; letter-spacing: .015em; line-height: 1.4; }
.tabs button { font-size: var(--type-control); line-height: var(--leading-compact); font-weight: 550; letter-spacing: -.015em; }
.view-heading h2, body[data-layer=temporal] .view-heading h2 {
  font: 520 var(--type-display)/1.08 var(--font-interface); letter-spacing: var(--tracking-display);
}
.view-heading .view-note, body[data-layer=temporal] .view-heading .view-note {
  font: 450 var(--type-body)/var(--leading-reading) var(--font-interface); color: var(--muted);
}
.eyebrow, body[data-layer=temporal] .view-heading .eyebrow {
  font: 650 var(--type-caption)/1.5 var(--font-interface); letter-spacing: .02em; text-transform: lowercase;
}
.constellation-heading h3 { font: 480 var(--type-title)/1.15 var(--font-interface); letter-spacing: var(--tracking-title); }
.constellation-eyebrow { font: 550 11px/1.5 var(--font-interface); letter-spacing: .055em; }
.constellation-count strong { font: 450 28px/1.1 var(--font-interface); letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.constellation-count span { font: 450 11px/1.4 var(--font-interface); }
.constellation-label { font: 450 13px/1 var(--font-interface); letter-spacing: -.01em; }
.constellation-legend, .constellation-note, body[data-layer=temporal] .temporal-constellation .constellation-note,
.constellation-tuning, .constellation-camera-controls output { font-family: var(--font-interface); font-size: 11px; line-height: 1.55; letter-spacing: 0; }
body[data-layer=temporal] .topology-layer-button { font: 550 var(--type-caption)/1.4 var(--font-interface); }
.temporal-frame-summary { font: 450 var(--type-caption)/1.5 var(--font-interface); font-variant-numeric: tabular-nums; }
.temporal-stop-detail { font: 450 var(--type-caption)/1.5 var(--font-interface); }
.temporal-stop-detail strong { font: 650 15px/1.35 var(--font-interface); letter-spacing: -.025em; }
.temporal-stop-detail time { font: 400 var(--type-source)/1.55 var(--font-source); }
.temporal-facets select, .temporal-rail button, .temporal-search-submit { font: 550 var(--type-caption)/1.35 var(--font-interface); }
.temporal-search-form input { font: 450 var(--type-control)/1.4 var(--font-interface); }
.temporal-search > .eyebrow, .temporal-ledger > .eyebrow, .temporal-inspector > .eyebrow {
  font: 650 var(--type-caption)/1.5 var(--font-interface); letter-spacing: .01em;
}
.temporal-suggestion { font: 500 11px/1.4 var(--font-interface); }
.temporal-change strong { font: 650 var(--type-control)/1.4 var(--font-interface); letter-spacing: -.015em; }
.temporal-change span { font: 500 var(--type-caption)/1.45 var(--font-interface); }
.temporal-change small { font: 450 11px/1.5 var(--font-interface); font-variant-numeric: tabular-nums; }
.temporal-inspector h3 { font: 550 24px/1.2 var(--font-interface); letter-spacing: var(--tracking-title); }
.temporal-inspector h4 { font: 650 var(--type-control)/1.45 var(--font-interface); letter-spacing: -.01em; }
.temporal-inspector p, .temporal-ledger > p:not(.eyebrow) { font: 450 var(--type-control)/var(--leading-reading) var(--font-interface); }
.temporal-evidence-card .eyebrow { font: 600 var(--type-caption)/1.6 var(--font-source); letter-spacing: -.025em; text-transform: none; }
.temporal-evidence-card small, .temporal-row-link, .temporal-frame-id, code, pre, .source-token,
.source-foot code, .source-foot small, .data-fact dd { font: 400 var(--type-source)/1.65 var(--font-source); font-variant-numeric: tabular-nums; letter-spacing: 0; overflow-wrap: anywhere; }
.temporal-evidence-card a { font: 550 var(--type-caption)/1.5 var(--font-interface); }
.temporal-limitations p, .temporal-limitations summary, .temporal-coverage-note { font: 450 var(--type-caption)/1.65 var(--font-interface); }
.temporal-limitations summary { font-weight: 600; }
.table-wrap table { font-family: var(--font-interface); font-size: var(--type-control); line-height: 1.5; }
.table-wrap th { font-weight: 650; letter-spacing: .01em; }
.table-wrap td { font-variant-numeric: tabular-nums; }
.source-quote, .record-raw, .record-json { font-family: var(--font-source); line-height: 1.7; font-size: var(--type-caption); }
@media (max-width: 720px) {
  :root { --type-display: 2.35rem; --type-title: 1.65rem; }
  body[data-layer=temporal] .view-heading h2 { font-size: var(--type-display); }
  body[data-layer=temporal] .view-heading .view-note { font-size: var(--type-control); }
  .temporal-facets select { font-size: 12px; }
  .temporal-search-form input { font-size: 16px; }
}
@font-face { font-family: 'Atlas Slab'; src: url('./fonts/rokkitt-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
/* A single expressive slab heading; analytical and interface text remain sans. */
body[data-layer=temporal] .view-heading h2 {
  font-family: 'Atlas Slab', Rockwell, var(--font-interface);
  font-weight: 600;
  letter-spacing: -.035em;
  font-size: clamp(2.6rem, 4.7vw, 4.9rem);
  line-height: 1.02;
}
/* The time control stays mounted; pending evidence never collapses the map. */
.temporal-frame-content { order: 1; min-width: 0; }
@media (min-width: 721px) {
  /* Reserve the graph, its captions, and the bounded inspector above the time rail. */
  .temporal-frame-content { min-height: max(660px, calc(clamp(440px, 58vh, 650px) + 160px)); }
}
.temporal-transition-status {
  order: 3;
  min-height: 24px;
  margin: 4px 0 0;
  color: var(--muted);
  font: 450 var(--type-caption)/1.5 var(--font-interface);
  font-variant-numeric: tabular-nums;
}
.temporal-transition-status[data-state="error"] { color: var(--warning); }
.temporal-limitations { order: 4; }
.temporal-stop-detail { min-height: 26px; }
.temporal-stop-detail > .temporal-coverage-note { margin: 0; }
.temporal-stop-detail strong { min-width: 100px; font-variant-numeric: tabular-nums; }
.temporal-rail input[type="range"] {
  appearance: none;
  height: 36px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}
.temporal-rail input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--rule-strong);
  border-radius: 3px;
}
.temporal-rail input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.temporal-rail input[type="range"]::-moz-range-track { height: 3px; background: var(--rule-strong); }
.temporal-rail input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border: 2px solid var(--paper);
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
.temporal-rail input[type="range"]:disabled { opacity: .4; cursor: default; }
@media (max-width: 720px) {
  .temporal-transition-status { order: 0; }
  .temporal-rail input[type="range"] { height: 44px; }
}

/* Decorative color never encodes evidence. */
:root {
  --ink: #302838;
  --ink-soft: #574d62;
  --muted: #6c6371;
  --paper: #f5f3ee;
  --paper-deep: #f0ede8;
  --surface: #fffefa;
  --surface-cool: #f1f5f2;
  --surface-raised: #ffffff;
  --surface-alt: #eeebf0;
  --surface-hover: #f1edf4;
  --rule: #ded9dc;
  --rule-strong: #c9c1ca;
  --accent: #76558b;
  --accent-deep: #5a3c6e;
  --accent-soft: #eee5f1;
  --cyan: #accddd;
  --cyan-soft: #e5f2f7;
  --teal: #b9ddd5;
  --teal-deep: #326c68;
  --violet: #9b9ae5;
  --coral: #e18479;
  --gold: #e4bd73;
  --yellow: #e4bd73;
  --link: #5d4e8b;
  --link-hover: #3b2e68;
  --focus: #8965a5;
  --focus-ring: rgba(137, 101, 165, .24);
  --shadow-low: 0 5px 20px rgba(64, 48, 74, .07);
  --shadow-raised: 0 10px 28px rgba(64, 48, 74, .09);
}

body {
  background:
    radial-gradient(circle at 12% 4%, rgba(117, 185, 230, .08), transparent 28rem),
    radial-gradient(circle at 88% 16%, rgba(155, 154, 229, .07), transparent 30rem),
    var(--paper);
}

.shell {
  background: transparent;
}

.site-header {
  background:
    radial-gradient(circle at 14% -80%, rgba(110, 202, 180, .16), transparent 18rem),
    linear-gradient(100deg, #f5f3ee, #eeebf0);
  border-bottom-color: var(--rule);
  box-shadow: none;
}

.identity-mark,
.log-pose-mark {
  color: var(--accent);
  border-color: rgba(117, 185, 230, .62);
  filter: drop-shadow(0 0 10px rgba(117, 185, 230, .24));
}

.identity-note,
.desk-status,
.view-heading .eyebrow {
  color: var(--muted);
}

.tabs {
  gap: 8px;
}

.tabs button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
}

.tabs button:hover {
  background: rgba(117, 185, 230, .08);
  color: var(--ink);
}

.tabs button[aria-current="page"] {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: none;
}

.view-heading {
  border-bottom-color: var(--rule);
}

.view-heading h2 {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .04);
}
body[data-view="data"] .view-heading,
body[data-view="explore"] .view-heading,
body[data-view="overview"] .view-heading { margin-bottom: 16px; padding-bottom: 8px; }
body[data-view="data"] .view-heading h2,
body[data-view="explore"] .view-heading h2,
body[data-view="overview"] .view-heading h2 { font-size: clamp(25px, 2.7vw, 36px); }

body[data-view="data"] .view-heading .eyebrow { color: var(--teal-deep); }
body[data-view="overview"] .view-heading .eyebrow { color: var(--accent-deep); }
body[data-view="compare"] .view-heading .eyebrow { color: #c8c7f3; }
body[data-view="explore"] .view-heading .eyebrow { color: #efada5; }

.topology-layer-nav,
.toolbar,
.section-controls,
.search-controls,
.search-filters,
.compare-picker,
.temporal-controls {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-low);
}

.topology-layer-button,
.text-button,
.quiet-button,
.temporal-search-submit,
.temporal-rail button {
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink-soft);
  box-shadow: 0 3px 10px rgba(5, 6, 14, .18);
}

.topology-layer-button:hover,
.text-button:hover,
.quiet-button:hover,
.temporal-search-submit:hover,
.temporal-rail button:hover {
  border-color: rgba(117, 185, 230, .62);
  background: var(--surface-hover);
  color: var(--ink);
}

.topology-layer-button[aria-current="page"],
body[data-layer="temporal"] .topology-layer-button[aria-current="page"],
.temporal-rail button[aria-pressed="true"] {
  border-color: rgba(117, 185, 230, .72);
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(117, 185, 230, .1);
}

input[type="search"],
input[type="text"],
select,
textarea,
.temporal-search-form input,
.temporal-facets select {
  border-color: var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--focus-ring);
}

.search-summary,
.search-aggregation,
.candidate-detail,
.detail-panel,
.comparison-panel,
.ranking-panel,
.trend-panel,
.market-panel,
.identity-review,
.location-review,
.universe-scope,
.year-card,
.temporal-sidebar,
.temporal-missing,
.temporal-loading {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  box-shadow: var(--shadow-raised);
}

.search-summary,
.universe-scope,
.temporal-sidebar {
  border-top-color: rgba(117, 185, 230, .68);
}

.search-aggregation,
.trend-panel,
.ranking-panel {
  border-top-color: rgba(110, 202, 180, .58);
}

.comparison-panel,
.market-panel,
.candidate-detail {
  border-top-color: rgba(155, 154, 229, .62);
}

.readiness-grid,
.overview-grid,
.search-aggregate-grid {
  gap: 12px;
}

.metric,
.overview-grid > *,
.search-aggregate-grid > *,
.occurrence,
.funding-event,
.market-source,
.temporal-evidence-card,
.temporal-row-link {
  border-color: var(--rule);
  background: var(--surface-alt);
  border-radius: 9px;
}

.metric:nth-child(3n + 1) { box-shadow: inset 3px 0 0 rgba(117, 185, 230, .78); }
.metric:nth-child(3n + 2) { box-shadow: inset 3px 0 0 rgba(110, 202, 180, .72); }
.metric:nth-child(3n) { box-shadow: inset 3px 0 0 rgba(155, 154, 229, .72); }

.search-result {
  border-color: var(--rule);
  background: var(--surface);
  box-shadow: 0 5px 16px rgba(5, 6, 14, .16);
}

.search-result:hover,
.temporal-row-link:hover,
.temporal-suggestion:hover,
.temporal-change:hover {
  border-color: rgba(117, 185, 230, .48);
  background: var(--surface-hover);
}

.search-result[aria-selected="true"],
.temporal-change[aria-pressed="true"] {
  border-color: rgba(228, 189, 115, .7);
  background: rgba(228, 189, 115, .09);
  box-shadow: inset 3px 0 0 var(--gold);
}

.table-wrap {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-alt);
  box-shadow: var(--shadow-low);
}

.table-wrap th {
  background: var(--surface-alt);
  color: var(--ink-soft);
}

.table-wrap tr:hover td {
  background: rgba(117, 185, 230, .055);
}

.pill {
  border-color: var(--rule-strong);
  background: rgba(155, 154, 229, .1);
  color: var(--accent-deep);
}

.quiet-button[aria-pressed="true"],
.pin-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(32, 116, 171, .2);
}

.bar-track {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
}

.bar-fill {
  background: linear-gradient(90deg, var(--accent), var(--teal));
}

.trend-chart .series-line,
.mini-series .series-line {
  stroke: var(--accent);
}

.trend-chart .series-point,
.mini-series .series-point {
  stroke: var(--teal);
}

.data-chart-line {
  stroke: var(--teal-deep);
}

/* Evidence desk: five decorative family accents follow the fixed family order. */
.desk-toy {
  border-color: var(--rule-strong);
  border-radius: 12px;
  background:
    radial-gradient(circle at 76% 0%, rgba(117, 185, 230, .12), transparent 42%),
    linear-gradient(115deg, var(--surface-raised), var(--surface-alt));
  box-shadow: var(--shadow-low);
}

.desk-toy-pendulum:nth-child(1) { --family-color: #75b9e6; }
.desk-toy-pendulum:nth-child(2) { --family-color: #6ecab4; }
.desk-toy-pendulum:nth-child(3) { --family-color: #9b9ae5; }
.desk-toy-pendulum:nth-child(4) { --family-color: #e18479; }
.desk-toy-pendulum:nth-child(5) { --family-color: #e4bd73; }

.desk-toy-string {
  background: linear-gradient(var(--rule-strong), var(--family-color));
}

.desk-toy-ball {
  border-color: color-mix(in srgb, var(--family-color) 72%, white);
  background: radial-gradient(circle at 31% 26%,
    color-mix(in srgb, var(--family-color) 36%, white),
    var(--family-color) 43%,
    color-mix(in srgb, var(--family-color) 48%, var(--paper-deep)) 78%);
  box-shadow: inset -4px -3px 8px rgba(17, 18, 27, .42), 0 5px 13px rgba(5, 6, 14, .5);
}

.desk-toy-pendulum[aria-pressed="true"] {
  color: var(--family-color);
}

.desk-toy-pendulum[aria-pressed="true"] .desk-toy-ball,
.desk-toy-pendulum:hover .desk-toy-ball,
.desk-toy-pendulum:focus-visible .desk-toy-ball {
  border-color: var(--family-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--family-color) 22%, transparent),
    0 7px 18px color-mix(in srgb, var(--family-color) 24%, transparent);
}

.data-coverage {
  gap: 6px;
  margin-bottom: 9px;
  border: 0;
  background: transparent;
}

.data-coverage-card {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--family-color);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: none;
  min-height: 58px;
  padding: 8px 10px;
}

.data-coverage-card:nth-child(1) { --family-color: #75b9e6; }
.data-coverage-card:nth-child(2) { --family-color: #6ecab4; }
.data-coverage-card:nth-child(3) { --family-color: #9b9ae5; }
.data-coverage-card:nth-child(4) { --family-color: #e18479; }
.data-coverage-card:nth-child(5) { --family-color: #e4bd73; }

.data-coverage-card strong,
.data-coverage-card > .eyebrow {
  color: var(--accent-deep);
}
.data-coverage-card strong { font-size: 16px; margin: 3px 0 0; }
.data-coverage-card small, .data-coverage-card > span:not(.eyebrow) { display: none; }
.data-coverage-card .eyebrow { font-size: 10px; letter-spacing: 0; }

.data-coverage-card:hover,
.data-coverage-card:focus-visible {
  border-color: color-mix(in srgb, var(--family-color) 68%, var(--rule));
  background: var(--surface-hover);
}

.data-controls {
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}

.data-controls input,
.data-controls select,
.data-market-day select {
  border-radius: 8px;
  background: var(--paper-deep);
}

.data-controls input {
  border-left-color: var(--accent);
}

.data-results,
.data-inspector {
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

.data-results-head {
  background: linear-gradient(100deg, rgba(117, 185, 230, .11), var(--surface-cool));
}

.data-results-head .eyebrow {
  color: var(--accent-deep);
}

.data-result[aria-pressed="true"] {
  background: rgba(117, 185, 230, .1);
  box-shadow: inset 3px 0 var(--accent);
}

.data-inspector {
  border-top-color: var(--violet);
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
}

.data-inspector h4 {
  color: #c8c7f3;
}

.inspector-numbers .metric strong {
  color: var(--ink);
}

/* Source inventory uses year cells and retained-row cards rather than year cards. */
.inventory-coverage,
.full-inventory {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  box-shadow: var(--shadow-raised);
  overflow: hidden;
}

.inventory-coverage {
  border-top-color: rgba(225, 132, 121, .65);
}

.inventory-year-grid {
  gap: 8px;
}

.inventory-year-cell {
  border-radius: 9px;
  background: var(--surface-alt);
}

.inventory-year-cell:nth-child(4n + 1) { border-top: 2px solid rgba(117, 185, 230, .72); }
.inventory-year-cell:nth-child(4n + 2) { border-top: 2px solid rgba(110, 202, 180, .7); }
.inventory-year-cell:nth-child(4n + 3) { border-top: 2px solid rgba(155, 154, 229, .72); }
.inventory-year-cell:nth-child(4n) { border-top: 2px solid rgba(225, 132, 121, .66); }

.inventory-year-cell strong {
  color: var(--ink);
}

.full-inventory summary {
  color: #efada5;
  background: rgba(225, 132, 121, .055);
}

.full-inventory-controls select,
.full-inventory-controls input {
  border-radius: 8px;
  background: var(--paper-deep);
}

.full-inventory-row {
  border-radius: 9px;
  background: var(--surface-alt);
}

.caveat,
.excerpt {
  border-color: var(--rule);
  background: var(--surface-cool);
}
.caveat { color: var(--muted-strong); }
.excerpt { color: var(--ink-soft); }
.view-heading h2 { font-size: clamp(25px, 2.7vw, 36px); }

.temporal-controls {
  padding: 12px;
}

.temporal-sidebar {
  padding: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .tabs button,
  .topology-layer-button,
  .text-button,
  .quiet-button,
  .search-result,
  .temporal-row-link {
    transition: background-color 140ms ease, border-color 140ms ease,
      color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  }

  .topology-layer-button:hover,
  .text-button:hover,
  .quiet-button:hover {
    transform: translateY(-1px);
  }

  .topology-layer-button:active,
  .text-button:active,
  .quiet-button:active {
    transform: translateY(1px);
  }
}

@media (max-width: 480px) {
  .ranking-panel {
    padding-inline: 9px;
  }

  .rank-row,
  .rank-legend {
    grid-template-columns: minmax(72px, 1fr) minmax(36px, .65fr) 56px 44px 44px;
    gap: 3px;
  }

  .rank-row {
    padding-inline: 1px;
    font-size: 8px;
  }

  .rank-legend {
    font-size: 7px;
  }
}

@media (max-width: 720px) {
  .tabs {
    gap: 6px;
    padding-bottom: 8px;
    overflow-x: auto;
  }

  .tabs button,
  .topology-layer-button,
  .text-button,
  .quiet-button,
  .temporal-search-submit,
  .temporal-rail button,
  .temporal-facets select {
    min-height: 44px;
  }

  .topology-layer-nav,
  .toolbar,
  .section-controls,
  .search-controls,
  .search-filters,
  .compare-picker {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* The overview caps stay beside the evidence filters, with exact visible values. */
.temporal-density { min-width: 0; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); }
.temporal-density legend { padding: 0 5px; color: var(--ink-soft); font: 11px var(--sans); }
.temporal-density-inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.temporal-density label { display: grid; min-width: 0; gap: 6px; color: var(--muted); font: 11px var(--sans); }
.temporal-density select { width: 100%; min-width: 0; min-height: 44px; padding: 0 10px; color: var(--ink); background: var(--surface-raised, #262638); border: 1px solid var(--rule-strong); border-radius: 6px; font: 12px var(--sans); }
.temporal-density button { min-height: 44px; }
.temporal-density-note { margin: 9px 0 0; color: var(--muted); font: 10px/1.5 var(--sans); }
@media (max-width: 600px) {
  .temporal-density-inputs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .temporal-density button { grid-column: 1 / -1; justify-self: end; }
}