/* STARS Observatory — mission-control / observatory aesthetic */
:root {
  --bg: #05070d;
  --bg-panel: rgba(10, 14, 22, 0.82);
  --bg-panel-solid: #0a0e16;
  --bg-elev: rgba(18, 24, 36, 0.9);
  --line: rgba(120, 160, 210, 0.16);
  --line-strong: rgba(120, 160, 210, 0.32);
  --txt: #d6e2f2;
  --txt-dim: #8a9bb5;
  --txt-faint: #7c8aa2; /* 5.8:1 on --bg (was #5d6b83, 3.7:1 — below WCAG AA for small text) */
  --accent: #4fd1e0;      /* observatory cyan */
  --accent-warn: #ff6b6b;
  --accent-amber: #ffb454;
  --accent-green: #55d18b;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --radius: 3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Layout ---------- */
#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

header#topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12,17,27,0.96), rgba(8,11,18,0.9));
  backdrop-filter: blur(8px);
  z-index: 40; flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand svg { width: 34px; height: 34px; flex-shrink: 0; }
.brand-txt h1 {
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--txt);
}
.brand-txt p {
  font-family: var(--mono); font-size: 10.5px; color: var(--txt-dim);
  letter-spacing: 0.02em; margin-top: 1px;
}
.topbar-spacer { flex: 1; }

.clock {
  font-family: var(--mono); text-align: right; line-height: 1.3;
}
.clock .label { font-size: 9px; color: var(--txt-faint); letter-spacing: 0.16em; text-transform: uppercase; }
.clock .val { font-size: 15px; color: var(--accent); font-weight: 500; letter-spacing: 0.02em; }

main { flex: 1; position: relative; overflow: hidden; }
#scene { position: absolute; inset: 0; display: block; }

/* ---------- Loading overlay ---------- */
#loader {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0a1220 0%, #05070d 70%);
  gap: 20px;
}
#loader .spinner {
  width: 52px; height: 52px; border: 2px solid var(--line-strong);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#loader .status { font-family: var(--mono); font-size: 12px; color: var(--txt-dim); letter-spacing: 0.04em; }
#loader .sub { font-family: var(--mono); font-size: 10.5px; color: var(--txt-faint); }
#loader .bar { width: 260px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
#loader .bar > div { height: 100%; width: 0%; background: var(--accent); transition: width 0.2s; }

/* ---------- Left control rail ---------- */
.rail {
  position: absolute; top: 14px; left: 14px; z-index: 30;
  width: 260px; max-height: calc(100% - 28px);
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; overflow: hidden;
}
.rail-scroll { overflow-y: auto; padding: 4px 0; }
.ctl-group { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ctl-group:last-child { border-bottom: none; }
.ctl-group > .gh {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--txt-faint); margin-bottom: 9px;
  display: flex; align-items: center; gap: 6px;
}
.gh .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* segmented / chip buttons */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--txt-dim); cursor: pointer;
  transition: all 0.12s; white-space: nowrap;
}
.chip:hover { border-color: var(--line-strong); color: var(--txt); }
.chip.active { background: rgba(79,209,224,0.14); border-color: var(--accent); color: var(--accent); }

.field { margin-bottom: 9px; }
.field:last-child { margin-bottom: 0; }
.field label {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: var(--txt-faint); text-transform: uppercase; margin-bottom: 4px;
}
select, .rail input[type="text"] {
  width: 100%; background: var(--bg-elev); border: 1px solid var(--line);
  color: var(--txt); font-family: var(--mono); font-size: 11px;
  padding: 5px 7px; border-radius: 2px; cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent); }
/* Visible keyboard focus everywhere (mouse clicks don't trigger :focus-visible). */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* legend */
.legend { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--txt-dim); }
.legend-row .sw { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.legend-row .ct { margin-left: auto; color: var(--txt-faint); font-size: 9.5px; }

.count-badge { font-family: var(--mono); font-size: 10px; color: var(--txt-faint); }

/* ---------- Time controls (bottom center) ---------- */
.timebar {
  position: absolute; bottom: 16px; left: 288px;
  z-index: 30; display: flex; align-items: center; gap: 6px;
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px 10px; backdrop-filter: blur(10px);
}
.tbtn {
  font-family: var(--mono); font-size: 11px; color: var(--txt-dim);
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  padding: 5px 9px; cursor: pointer; transition: all 0.12s; min-width: 34px;
}
.tbtn:hover { border-color: var(--line-strong); color: var(--txt); }
.tbtn.active { background: rgba(79,209,224,0.14); border-color: var(--accent); color: var(--accent); }
.tbtn.icon { min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.tbtn svg { width: 14px; height: 14px; }
.timebar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 3px; }

/* ---------- Detail card ---------- */
#detail {
  position: absolute; top: 14px; right: 14px; z-index: 35; width: 258px;
  background: var(--bg-panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); backdrop-filter: blur(10px); overflow: hidden;
  display: none;
}
#detail.show { display: block; }
#detail .dh {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 11px 13px; border-bottom: 1px solid var(--line);
  background: rgba(79,209,224,0.06);
}
#detail .dh .name { font-size: 13px; font-weight: 600; color: var(--txt); line-height: 1.25; }
#detail .dh .type { font-family: var(--mono); font-size: 9.5px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2px; }
#detail .close { background: none; border: none; color: var(--txt-faint); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 0 0 8px; }
#detail .close:hover { color: var(--txt); }
#detail .drows { padding: 10px 13px; }
.drow { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-family: var(--mono); font-size: 11px; border-bottom: 1px dotted rgba(120,160,210,0.1); }
.drow:last-child { border-bottom: none; }
.drow .k { color: var(--txt-faint); }
.drow .v { color: var(--txt); text-align: right; }
.drow .v.live { color: var(--accent); }
.badge { display: inline-block; font-family: var(--mono); font-size: 9px; padding: 1px 5px; border-radius: 2px; letter-spacing: 0.04em; }
.badge.reg { background: rgba(85,209,139,0.16); color: var(--accent-green); }
.badge.unreg { background: rgba(255,107,107,0.16); color: var(--accent-warn); }
.badge.na { background: rgba(120,160,210,0.12); color: var(--txt-dim); }

/* ---------- Analytical panels drawer ---------- */
.tabbar {
  position: absolute; bottom: 16px; right: 14px; z-index: 30;
  display: flex; gap: 5px; background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px; backdrop-filter: blur(10px);
}
.tabbar button {
  font-family: var(--mono); font-size: 10.5px; color: var(--txt-dim);
  background: transparent; border: 1px solid transparent; border-radius: 2px;
  padding: 6px 10px; cursor: pointer; transition: all 0.12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.tabbar button:hover { color: var(--txt); background: rgba(120,160,210,0.06); }
.tabbar button svg { width: 14px; height: 14px; }

#drawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 50;
  width: 560px; max-width: 100%;
  background: var(--bg-panel-solid); border-left: 1px solid var(--line-strong);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  display: flex; flex-direction: column;
}
#drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.drawer-head .dt { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.18em; text-transform: uppercase; }
.drawer-head h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; }
.drawer-head .close2 { background: none; border: 1px solid var(--line); border-radius: 2px; color: var(--txt-dim); cursor: pointer; font-size: 18px; width: 30px; height: 30px; }
.drawer-head .close2:hover { color: var(--txt); border-color: var(--line-strong); }
.drawer-nav { display: flex; gap: 4px; padding: 8px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; background: rgba(120,160,210,0.03); }
.drawer-nav { overflow-x: auto; scrollbar-width: none; }
.drawer-nav::-webkit-scrollbar { display: none; }
.drawer-nav button { white-space: nowrap; flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--txt-dim); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 5px 8px; cursor: pointer; transition: all 0.12s; }
.drawer-nav button:hover { color: var(--txt); border-color: var(--line-strong); }
.drawer-nav button.active { background: rgba(79,209,224,0.14); border-color: var(--accent); color: var(--accent); }
.drawer-body { overflow-y: auto; padding: 22px; flex: 1; }
.panel { display: none; }
.panel.active { display: block; }

/* headline stat blocks */
.stat-hero { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; background: rgba(79,209,224,0.04); }
.stat-hero .big { font-family: var(--mono); font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--accent); }
.stat-hero .big.warn { color: var(--accent-warn); }
.stat-hero .cap { font-size: 13px; color: var(--txt); margin-top: 8px; line-height: 1.4; }
.stat-hero .sub { font-family: var(--mono); font-size: 10.5px; color: var(--txt-dim); margin-top: 6px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.stat-cell { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat-cell .n { font-family: var(--mono); font-size: 24px; font-weight: 600; color: var(--txt); }
.stat-cell .l { font-size: 11px; color: var(--txt-dim); margin-top: 3px; }

.legal-caption {
  border-left: 2px solid var(--accent); padding: 10px 0 10px 14px; margin: 18px 0;
  font-size: 12.5px; color: var(--txt-dim); line-height: 1.55; font-style: italic;
}
.legal-caption strong { color: var(--txt); font-style: normal; }

h3.section { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--txt-faint); margin: 22px 0 12px; }

/* bar chart (ranked) */
.barrow { display: grid; grid-template-columns: 130px 1fr 68px; align-items: center; gap: 10px; margin-bottom: 7px; font-family: var(--mono); font-size: 11px; }
.barrow .bl { color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow .bt { height: 16px; background: rgba(120,160,210,0.08); border-radius: 2px; position: relative; overflow: hidden; }
.barrow .bt > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.barrow .bv { text-align: right; color: var(--txt); }

/* SVG stacked chart wrapper */
.chart-wrap { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 8px; }
.chart-wrap svg { width: 100%; height: auto; display: block; }
.chart-legend { display: flex; gap: 16px; font-family: var(--mono); font-size: 10.5px; color: var(--txt-dim); margin-top: 8px; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; }

/* data table */
table.dt { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11px; margin-top: 4px; }
table.dt th { text-align: left; color: var(--txt-faint); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); letter-spacing: 0.04em; font-size: 9.5px; text-transform: uppercase; }
table.dt th.num, table.dt td.num { text-align: right; }
table.dt td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--txt-dim); }
table.dt td.hl { color: var(--accent-warn); }
table.dt tr:last-child td { border-bottom: none; }

.note { font-size: 11.5px; color: var(--txt-faint); line-height: 1.55; margin-top: 10px; }
.note strong { color: var(--accent-amber); }

/* ---------- Article IX scenario ---------- */
.scenario-clocks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.clock-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.clock-col.op { border-color: rgba(255,180,84,0.4); }
.clock-col.legal { border-color: rgba(255,107,107,0.35); }
.clock-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.clock-col.op h4 { color: var(--accent-amber); }
.clock-col.legal h4 { color: var(--accent-warn); }
.clock-col .cv { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--txt); }
.clock-col .cd { font-size: 11px; color: var(--txt-dim); margin-top: 6px; line-height: 1.45; }

.timeline { position: relative; margin: 8px 0 4px; padding-left: 4px; }
.tl-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding-bottom: 16px; position: relative; cursor: pointer; }
.tl-step:hover .tl-dot { border-color: var(--accent); }
.tl-step.cur { background: linear-gradient(90deg, rgba(79,209,224,0.07), transparent 70%); border-radius: 4px; }
.tl-step.cur .tl-dot { transform: scale(1.12); }
.tl-step:not(:last-child)::before { content: ""; position: absolute; left: 12px; top: 20px; bottom: -2px; width: 1px; background: var(--line-strong); }
.tl-dot { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-panel-solid); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; color: var(--txt-faint); z-index: 1; }
.tl-step.on .tl-dot { border-color: var(--accent); color: var(--accent); background: rgba(79,209,224,0.12); box-shadow: 0 0 12px rgba(79,209,224,0.3); }
.tl-step.crit.on .tl-dot { border-color: var(--accent-warn); color: var(--accent-warn); box-shadow: 0 0 12px rgba(255,107,107,0.3); }
.tl-body .tl-date { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.06em; }
.tl-step.crit .tl-body .tl-date { color: var(--accent-warn); }
.tl-body .tl-txt { font-size: 12.5px; color: var(--txt-dim); margin-top: 3px; line-height: 1.5; }
.tl-step.on .tl-body .tl-txt { color: var(--txt); }
.tl-body .tl-prob { font-family: var(--mono); font-size: 10.5px; color: var(--accent-amber); margin-top: 4px; }

.scenario-ctl { display: flex; align-items: center; gap: 8px; margin: 16px 0; }
.scenario-ctl button { font-family: var(--mono); font-size: 11px; padding: 7px 14px; background: rgba(79,209,224,0.1); border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; cursor: pointer; }
.scenario-ctl button:hover { background: rgba(79,209,224,0.2); }
.scenario-ctl .prog { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.scenario-ctl .prog > div { height: 100%; background: var(--accent); width: 0%; transition: width 0.4s; }
.scenario-ctl button.viz3d { background: transparent; color: var(--txt-dim); border-color: var(--line); }

/* provenance */
.prov-source { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.prov-source .ps-name { font-size: 13px; color: var(--txt); font-weight: 600; }
.prov-source .ps-name a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.prov-source .ps-desc { font-size: 11.5px; color: var(--txt-dim); margin-top: 4px; line-height: 1.5; }
.prov-source .ps-date { font-family: var(--mono); font-size: 10px; color: var(--txt-faint); margin-top: 6px; letter-spacing: 0.04em; }
.limits li { font-size: 12px; color: var(--txt-dim); line-height: 1.55; margin-bottom: 8px; margin-left: 18px; }
.disclaimer { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px; margin-top: 20px; background: rgba(120,160,210,0.04); font-size: 12.5px; color: var(--txt); line-height: 1.6; font-style: italic; }

footer#foot {
  position: absolute; bottom: 62px; left: 288px; z-index: 25;
  font-family: var(--mono); font-size: 10px; color: var(--txt-faint);
  letter-spacing: 0.03em; pointer-events: none;
}
footer#foot .lnk { color: var(--txt-dim); pointer-events: auto; cursor: pointer; border-bottom: 1px dotted var(--txt-faint); }
footer#foot a { pointer-events: auto; cursor: pointer; border-bottom: 1px dotted var(--txt-faint); text-decoration: none; }
footer#foot a:hover, footer#foot .lnk:hover { color: var(--txt); border-bottom-color: var(--txt-dim); }

/* Topbar support pill — visible but quiet: amber outline, mono, compact */
#topSupport {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-amber); text-decoration: none;
  border: 1px solid rgba(240,180,80,0.45); border-radius: 3px;
  padding: 6px 11px; margin-right: 4px;
  transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
#topSupport:hover { background: rgba(240,180,80,0.10); border-color: rgba(240,180,80,0.8); box-shadow: 0 0 12px rgba(240,180,80,0.18); }
#topSupport span[aria-hidden] { font-size: 12px; line-height: 1; }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,160,210,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,160,210,0.35); }

.rail-toggle { display: none; }

/* ---------- Mobile ----------
   Applies to narrow viewports AND to touch devices held in landscape
   (wide but short), so phones get the mobile layout in both orientations. */
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) {
  header#topbar { padding: 8px 12px; gap: 10px; }
  .brand-txt p { display: none; }
  .brand-txt h1 { font-size: 12px; }
  .clock .val { font-size: 12px; }

  .rail {
    width: calc(100% - 20px); left: 10px; top: 104px;
    max-height: 62vh;
    transform: translateY(-150%); transition: transform 0.3s; opacity: 0;
  }
  .rail.open { transform: translateY(0); opacity: 1; }
  .rail-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    position: absolute; top: 66px; left: 10px; z-index: 33;
    font-family: var(--mono); font-size: 10.5px; color: var(--accent);
    background: var(--bg-panel); border: 1px solid var(--accent); border-radius: 2px;
    padding: 6px 10px; cursor: pointer; backdrop-filter: blur(8px);
  }
  .rail-toggle.active { background: rgba(79,209,224,0.16); }
  #topSupport .ts-lbl { display: none; }
  #topSupport { padding: 6px 8px; margin-right: 0; }
  /* Phone: cap the card to the space above the playback bar and scroll inside it,
     with the header (and its close button) pinned, so a long card never pushes
     the × off the top of the screen. */
  #detail {
    top: auto; bottom: 118px; right: 10px; left: 10px; width: auto;
    max-height: calc(100vh - 198px); max-height: calc(100dvh - 198px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  #detail .dh { position: sticky; top: 0; z-index: 2; background: rgba(12,17,27,0.98); }
  #detail .close { font-size: 22px; padding: 8px 10px; margin: -8px -6px -8px 0; min-width: 44px; min-height: 44px; }
  #drawer { width: 100%; }
  .drawer-body { padding: 16px; }
  .stat-hero .big { font-size: 34px; }
  .scenario-clocks { grid-template-columns: 1fr; }
  .tabbar { flex-wrap: wrap; max-width: calc(100% - 20px); right: 10px; bottom: 66px; }
  .tabbar button { font-size: 9.5px; padding: 5px 7px; }
  .tabbar button span.lbl { display: none; }
  .timebar { bottom: 12px; left: 10px; right: 10px; gap: 3px; padding: 6px; justify-content: space-between; }
  .tbtn { padding: 6px 6px; min-width: 32px; font-size: 10px; }
  footer#foot { display: none; }
  .barrow { grid-template-columns: 96px 1fr 54px; }
  .three-clocks { grid-template-columns: 1fr; }
  .scen-cards { grid-template-columns: 1fr 1fr; }
  .tclock .cv { font-size: 17px; }
}

/* ---------- Phase 2: Registration Lag Index (Task A) ---------- */
.stat-cell .n.accrue { color: var(--txt-faint); font-size: 15px; letter-spacing: 0.04em; }
.lag-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 18px 16px; text-align: center; font-family: var(--mono);
  font-size: 11.5px; color: var(--txt-faint); line-height: 1.6; margin-top: 4px;
}
.lag-empty .lag-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent-amber); margin-right:7px; box-shadow:0 0 8px var(--accent-amber); animation: lagpulse 1.8s ease-in-out infinite; }
@keyframes lagpulse { 0%,100%{opacity:0.35;} 50%{opacity:1;} }
.lag-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Phase 2: Supervisory machinery (Task B) ---------- */
.stack-bar { display: flex; width: 100%; height: 30px; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.stack-bar > span { display: block; height: 100%; transition: width 0.6s cubic-bezier(0.16,1,0.3,1); }
.sup-hero .big { font-family: var(--mono); font-size: 40px; font-weight: 600; line-height: 1; color: var(--accent-warn); }

/* ---------- Phase 2: Three-clocks strip (Task D) ---------- */
.three-clocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.tclock { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 13px 14px; position: relative; }
.tclock.orbital { border-color: rgba(79,209,224,0.42); }
.tclock.machine { border-color: rgba(255,180,84,0.42); }
.tclock.diplo   { border-color: rgba(255,107,107,0.38); }
.tclock h4 { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; }
.tclock.orbital h4 { color: var(--accent); }
.tclock.machine h4 { color: var(--accent-amber); }
.tclock.diplo h4   { color: var(--accent-warn); }
.tclock .cv { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--txt); line-height: 1.05; }
.tclock .cd { font-size: 10.5px; color: var(--txt-dim); margin-top: 6px; line-height: 1.45; }
.tclock .cx { font-family: var(--mono); font-size: 10px; color: var(--txt-faint); margin-top: 6px; }

.logscale { margin: 2px 0 20px; }
.logscale .ls-track { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(79,209,224,0.5), rgba(255,180,84,0.5), rgba(255,107,107,0.5)); }
.logscale .ls-mark { position: absolute; top: -4px; width: 2px; height: 14px; border-radius: 1px; transform: translateX(-1px); }
.logscale .ls-labels { position: relative; height: 30px; margin-top: 4px; font-family: var(--mono); font-size: 9px; }
.logscale .ls-lab { position: absolute; transform: translateX(-50%); text-align: center; line-height: 1.25; white-space: nowrap; }
.logscale .ls-lab .v { display: block; font-size: 10px; }
.logscale .ls-cap { font-family: var(--mono); font-size: 9px; color: var(--txt-faint); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }

/* ---------- Phase 2: Scenario cards (Task C) ---------- */
.scen-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.scen-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 11px; cursor: pointer; transition: all 0.14s; background: transparent; text-align: left; }
.scen-card:hover { border-color: var(--line-strong); background: rgba(120,160,210,0.05); }
.scen-card.active { border-color: var(--accent); background: rgba(79,209,224,0.1); }
.scen-card .sc-year { font-family: var(--mono); font-size: 9.5px; color: var(--txt-faint); letter-spacing: 0.06em; }
.scen-card.active .sc-year { color: var(--accent); }
.scen-card .sc-title { font-size: 12px; font-weight: 600; color: var(--txt); margin-top: 3px; line-height: 1.25; }
.scen-card .sc-tag { font-family: var(--mono); font-size: 9.5px; color: var(--txt-dim); margin-top: 4px; line-height: 1.35; }

.prov-cases { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.prov-cases .pc { font-size: 11.5px; line-height: 1.5; color: var(--txt-dim); padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.prov-cases .pc .pc-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-faint); margin-bottom: 4px; }
.prov-cases .pc a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }

.legend-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 180, 200, 0.15);
  font-size: 10px;
  line-height: 1.5;
  color: rgba(148, 180, 200, 0.65);
  max-width: 220px;
}

/* Phase 2 responsive overrides — placed after base rules so they win at narrow widths */
@media (max-width: 820px) {
  .three-clocks { grid-template-columns: 1fr; }
  .scen-cards { grid-template-columns: 1fr 1fr; }
  .tclock .cv { font-size: 17px; }
}

/* ============ Catalogue search (topbar) ============ */
.search {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: rgba(16,24,38,0.85); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; min-width: 264px;
}
.search:focus-within { border-color: rgba(79,209,224,0.55); box-shadow: 0 0 0 2px rgba(79,209,224,0.12); }
.search svg { width: 14px; height: 14px; color: var(--txt-faint); flex-shrink: 0; }
.search input {
  background: none; border: none; outline: none; color: var(--txt);
  font-family: var(--mono); font-size: 11.5px; width: 100%;
}
.search input::placeholder { color: var(--txt-faint); }
.search kbd {
  font-family: var(--mono); font-size: 10px; color: var(--txt-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
#searchResults {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(12,17,27,0.98); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; z-index: 60;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
#searchResults.open { display: block; }
#searchResults .sr {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 12px; border-bottom: 1px solid rgba(120,160,210,0.08);
}
#searchResults .sr:last-child { border-bottom: none; }
#searchResults .sr:hover, #searchResults .sr:focus { background: rgba(79,209,224,0.08); }
#searchResults .sr-name { font-size: 12px; color: var(--txt); font-weight: 500; }
#searchResults .sr-meta { font-family: var(--mono); font-size: 10px; color: var(--txt-dim); }

/* ============ Live-data badge ============ */
/* Compact snapshot badge for screens too narrow for the header badge (hidden at
   1,121 px and wider). It sits inside the globe area, below the object card, the
   drawer and the search results, ignores pointer events so taps reach the dots
   under it, and steps aside whenever an overlay occupies the top of the screen. */
.snapbadge { display: none; }
@media (max-width: 1120px) {
  .snapbadge {
    display: flex; align-items: center; gap: 8px;
    position: absolute; top: 14px; right: 14px; z-index: 31;
    padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg-panel); backdrop-filter: blur(8px);
    font-family: var(--mono); line-height: 1.3; text-align: right; pointer-events: none;
  }
  .snapbadge .label { font-size: 9px; color: var(--txt-faint); letter-spacing: 0.16em; text-transform: uppercase; }
  .snapbadge .val { font-size: 11px; color: var(--txt-dim); white-space: nowrap; }
  /* the first-visit hint sits at the top centre above 700 px: move below it */
  body:has(#firstHint:not([hidden])) .snapbadge { top: 64px; }
  body:has(#detail.show) .snapbadge, body:has(#drawer.open) .snapbadge,
  body.hist-run .snapbadge, body:has(#scenNow:not([style*="none"])) .snapbadge { display: none; }
}
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) {
  /* beside Controls & Filters, the same height as that button */
  .snapbadge, body:has(#firstHint:not([hidden])) .snapbadge { top: 66px; right: 10px; min-height: 44px; padding: 4px 10px; }
  .snapbadge .val { font-size: 10.5px; }
  body:has(#rail.open) .snapbadge { display: none; } /* the open filters panel reaches this row */
}
/* Between 701 and 820 px, and on landscape phones, the first-visit hint sits at the
   top and reaches this row: step aside until it is dismissed. */
@media (min-width: 701px) and (max-width: 820px), (min-width: 701px) and (pointer: coarse) and (max-height: 520px) {
  body:has(#firstHint:not([hidden])) .snapbadge { display: none; }
}
@media (max-width: 420px) {
  .snapbadge .sb-daily { display: none; }
}
.databadge {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px;
  font-family: var(--mono); line-height: 1.3;
}
.databadge .label { font-size: 9px; color: var(--txt-faint); letter-spacing: 0.16em; text-transform: uppercase; }
.databadge .val { font-size: 11px; color: var(--txt-dim); }
.livedot {
  width: 8px; height: 8px; border-radius: 50%; background: #38d39f; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(56,211,159,0.6); animation: livepulse 2.4s infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(56,211,159,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(56,211,159,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,211,159,0); }
}

/* ============ Detail verify block ============ */
.dverify { padding: 9px 0 2px; }
.dverify .k {
  font-family: var(--mono); font-size: 9px; color: var(--txt-faint);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 6px;
}
.vlinks { display: flex; flex-wrap: wrap; gap: 6px; }
.vlinks a {
  font-family: var(--mono); font-size: 10px; color: var(--accent);
  text-decoration: none; border: 1px solid rgba(79,209,224,0.35);
  border-radius: 5px; padding: 3px 8px; transition: background 0.15s, border-color 0.15s;
}
.vlinks a:hover { background: rgba(79,209,224,0.12); border-color: rgba(79,209,224,0.7); }
.dcopy {
  margin-top: 8px; width: 100%; cursor: pointer;
  font-family: var(--mono); font-size: 10px; color: var(--txt-dim);
  background: rgba(120,160,210,0.07); border: 1px solid var(--line);
  border-radius: 5px; padding: 5px 8px; transition: color 0.15s, border-color 0.15s;
}
.dcopy:hover { color: var(--txt); border-color: rgba(120,160,210,0.4); }
#firstHint {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100% - 32px));
  padding: 8px 8px 8px 14px; border: 1px solid rgba(79,209,224,0.45); border-radius: 999px;
  background: rgba(10,14,22,0.9); color: var(--txt); font-size: 12.5px; line-height: 1.35;
  pointer-events: none; box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
#firstHint[hidden] { display: none; }
#firstHint kbd { font-family: var(--mono); font-size: 11px; padding: 0 5px; border: 1px solid var(--line); border-radius: 3px; }
#firstHint button { pointer-events: auto; background: none; border: 0; color: var(--txt-dim); font-size: 18px; line-height: 1; cursor: pointer; min-width: 28px; min-height: 28px; border-radius: 50%; }
#firstHint button:hover { color: var(--txt); }
@media (max-width: 700px) {
  /* clear of the Controls & Filters toggle (top) and the tab/time bars (bottom) */
  #firstHint { top: auto; bottom: 136px; left: 16px; right: 16px; transform: none; max-width: none; font-size: 12px; border-radius: 12px; }
}
.view-actions { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.view-actions .dcopy { margin-top: 6px; }
.pc-cites { margin: 6px 0 0 18px; padding: 0; font-size: 11.5px; line-height: 1.5; }
.pc-cites li { margin-bottom: 4px; }

@media (max-width: 1120px) {
  .databadge { display: none; }
}
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) {
  /* Collapsed: a finger-sized icon button in the topbar */
  .search { min-width: 0; flex: 0 0 auto; width: 38px; height: 36px; justify-content: center; padding: 0; cursor: pointer; }
  .search kbd { display: none; }
  .search input { display: none; }
  /* Expanded: full-width overlay with a 16px input (prevents iOS zoom) */
  .search.mopen {
    position: fixed; top: 8px; left: 8px; right: 8px; width: auto; height: 46px;
    flex: none; justify-content: flex-start; padding: 7px 12px; z-index: 80;
    background: rgba(12,17,27,0.98); border-color: var(--accent);
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  }
  .search.mopen input { display: block; font-size: 16px; }
  .search.mopen #searchResults { top: calc(100% + 4px); }
  #searchResults .sr { padding: 12px; }
}

/* ============ Pick chooser (dense-cluster disambiguation) ============ */
#pickChooser {
  position: fixed; z-index: 70; min-width: 240px; max-width: 320px;
  max-height: min(60vh, 430px); overflow-y: auto; overscroll-behavior: contain;
  background: rgba(12,17,27,0.98); border: 1px solid var(--accent-dim, rgba(79,209,224,0.45));
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
}
#pickChooser .pc-h { position: sticky; top: 0; background: rgba(12,17,27,0.98); z-index: 1; }
#pickChooser .pc-h {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-faint); padding: 8px 12px 6px; border-bottom: 1px solid rgba(120,160,210,0.12);
}
#pickChooser .sr {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-bottom: 1px solid rgba(120,160,210,0.08);
}
#pickChooser .sr:last-child { border-bottom: none; }
#pickChooser .sr:hover, #pickChooser .sr:focus { background: rgba(79,209,224,0.1); }
#pickChooser .sr-name { font-size: 12px; color: var(--txt); font-weight: 500; }
#pickChooser .sr-meta { font-family: var(--mono); font-size: 10px; color: var(--txt-dim); }

/* ============ Scenario event chip ============ */
#scenNow {
  position: fixed; left: 50%; transform: translateX(-50%); top: 72px; z-index: 22;
  display: none; align-items: baseline; gap: 10px; max-width: min(92vw, 640px);
  background: rgba(12,17,27,0.92); border: 1px solid rgba(79,209,224,0.4);
  border-radius: 8px; padding: 8px 14px; backdrop-filter: blur(6px);
  animation: chipIn 0.25s ease;
}
@keyframes chipIn { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
#scenNow .sn-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt-faint); white-space: nowrap; }
#scenNow .sn-d { font-size: 13px; font-weight: 600; color: var(--txt); white-space: nowrap; }
#scenNow .sn-p { font-family: var(--mono); font-size: 10px; color: #ffb454; }
/* When the drawer is open on desktop, centre the chip over the visible canvas.
   (Excludes short landscape phones, which use the mobile layout.) */
@media (min-width: 821px) and (min-height: 521px) {
  body:has(#drawer.open) #scenNow { left: calc(50% - 151px); max-width: 540px; }
  body:has(#drawer.open) #histHud { left: calc(50% - 151px); }
}

/* ============ Historical replay HUD ============ */
#histHud {
  position: fixed; left: 50%; transform: translateX(-50%); top: 72px; z-index: 23;
  max-width: min(92vw, 620px); min-width: min(86vw, 380px);
  background: rgba(10,14,22,0.94); border: 1px solid rgba(255,183,71,0.45);
  border-radius: 8px; padding: 10px 14px; backdrop-filter: blur(6px);
  animation: chipIn 0.25s ease;
}
#histHud .hh-top { display: flex; align-items: center; gap: 10px; }
#histHud .hh-badge {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: #0b0f16;
  background: #ffb454; border-radius: 3px; padding: 2px 6px; white-space: nowrap; font-weight: 600;
}
#histHud .hh-title {
  font-size: 12px; font-weight: 600; color: var(--txt);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
#histHud #hhExit {
  background: none; border: 1px solid rgba(120,160,210,0.3); color: var(--txt-dim);
  border-radius: 4px; width: 22px; height: 22px; cursor: pointer; font-size: 11px;
  line-height: 1; flex: none;
}
#histHud #hhExit:hover { color: var(--txt); border-color: rgba(120,160,210,0.6); }
#histHud .hh-clock {
  font-family: var(--mono); font-size: 11px; color: #4fd1e0; margin-top: 7px; letter-spacing: 0.06em;
}
#histHud .hh-count {
  font-family: var(--mono); font-size: 10.5px; color: #ffb454; margin-top: 3px; line-height: 1.5;
}
#histHud .hh-done {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(120,160,210,0.16);
}
#histHud .hh-done span { font-size: 11.5px; color: var(--txt); line-height: 1.45; flex: 1; }
#histHud #hhAgain {
  background: rgba(79,209,224,0.12); border: 1px solid rgba(79,209,224,0.45); color: #4fd1e0;
  border-radius: 5px; padding: 5px 10px; cursor: pointer; font-family: var(--mono);
  font-size: 10px; white-space: nowrap; flex: none;
}
#histHud #hhAgain:hover { background: rgba(79,209,224,0.22); }
@media (max-width: 600px) {
  #histHud { top: 64px; padding: 8px 10px; }
  #histHud .hh-title { font-size: 11px; }
}
/* While a replay runs on small screens, the HUD owns the top strip. */
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) {
  body.hist-run .rail-toggle { display: none; }
}

/* Landscape phones: short viewport — keep the 3D canvas clear and panels short. */
@media (pointer: coarse) and (max-height: 520px) {
  .rail { max-height: 52vh; top: 96px; }
  #detail { left: auto; right: 10px; width: min(340px, 46vw); max-height: calc(100vh - 168px); overflow-y: auto; }
  .tabbar { bottom: 60px; }
  #scenNow, #histHud { top: 54px; max-width: min(70vw, 560px); }
}

/* Touch ergonomics: 44px minimum tap targets on any coarse-pointer device. */
@media (pointer: coarse) {
  .tbtn { min-height: 44px; min-width: 38px; }
  .tabbar button, #drawerNav button, .rail-toggle, .copybtn, .cs-btn,
  .dcopy, #dClose, #drawerClose, #hhExit, #hhAgain, .viz3d, .support-btn,
  .chip, .seg button { min-height: 44px; }
  .search { width: 44px; height: 44px; }
  #pickChooser .sr { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  #searchResults .sr { min-height: 44px; }
}

/* replay button + support */
.viz3d.hist { border-color: rgba(255,183,71,0.5); color: #ffb454; }
.viz3d.hist:hover { background: rgba(255,183,71,0.12); }
.support-btn {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: #ffb454; border: 1px solid rgba(255,183,71,0.5); border-radius: 6px;
  padding: 8px 14px; text-decoration: none;
}
.support-btn:hover { background: rgba(255,183,71,0.12); }

/* ============ Scope grid (provenance panel) ============ */
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 6px; }
@media (max-width: 1080px) { .scope-grid { grid-template-columns: 1fr; } }
.sc-h {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid rgba(120,160,210,0.14);
}
.sc-yes { color: #55d18b; }
.sc-no { color: #ff6b6b; }

/* ============ Citation block ============ */
.cite-block { display: flex; flex-direction: column; gap: 12px; }
.cite-fmt .cf-h {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--txt-faint); margin-bottom: 5px;
}
.cite-fmt pre {
  font-family: var(--mono); font-size: 11px; line-height: 1.55; color: var(--txt-dim);
  background: rgba(120,160,210,0.06); border: 1px solid rgba(120,160,210,0.14);
  border-radius: 6px; padding: 10px 12px; margin: 0;
  white-space: pre-wrap; word-break: break-word; user-select: all;
}
.copybtn {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent, #4fd1e0); background: rgba(79,209,224,0.08);
  border: 1px solid rgba(79,209,224,0.35); border-radius: 5px;
  padding: 3px 9px; cursor: pointer;
}
.copybtn:hover { background: rgba(79,209,224,0.16); }

/* Citation form switch (footnote / bibliography) */
.cite-actions { display: inline-flex; align-items: center; gap: 8px; }
.cite-switch { display: inline-flex; border: 1px solid rgba(120,160,210,0.28); border-radius: 5px; overflow: hidden; }
.cs-btn {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--txt-dim); background: none; border: none; padding: 4px 10px; cursor: pointer;
}
.cs-btn + .cs-btn { border-left: 1px solid rgba(120,160,210,0.28); }
.cs-btn.active { color: var(--accent); background: rgba(79,209,224,0.14); }
.cs-btn:hover { color: var(--txt); }
.cs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Hover-capable devices: the switch reveals on hover or keyboard focus.
   Touch / no-hover devices: permanently visible (no hidden functionality). */
@media (hover: hover) and (pointer: fine) {
  .cite-switch { opacity: 0; transition: opacity 0.15s; }
  #oscolaFmt:hover .cite-switch, #oscolaFmt:focus-within .cite-switch { opacity: 1; }
}
.cite-confirm { font-family: var(--mono); font-size: 10px; color: var(--accent); min-height: 14px; margin-top: 5px; opacity: 0; transition: opacity 0.2s; }
.cite-confirm.show { opacity: 1; }
.cite-warn {
  border: 1px solid rgba(255,180,84,0.5); background: rgba(255,180,84,0.08);
  color: var(--accent-amber, #ffb454); border-radius: 6px; padding: 9px 12px;
  font-size: 11.5px; line-height: 1.5;
}

/* Footer copyright line */
footer#foot .foot-line { display: block; }
footer#foot .foot-line + .foot-line { margin-top: 3px; }

/* ============ v1.8.0: snapshot dates, registration lag, treaty status ============ */
.snapdate { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--txt-faint); margin-top: 6px; }
.reg-lead { font-size: 13px; line-height: 1.55; color: var(--txt); margin: 0 0 10px; }
.reg-caveat { margin-bottom: 14px; }
.ts { display: inline-block; font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--txt-dim); margin: 1px 0; white-space: nowrap; }
.ts-party { border-color: rgba(85,209,139,0.5); color: #55d18b; }
.ts-signatory, .ts-declaration { border-color: rgba(255,180,84,0.5); color: var(--accent-amber, #ffb454); }
.ts-neither, .ts-no-entry, .ts-none { color: var(--txt-faint); }
.ts-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ts-who { font-size: 11px; color: var(--txt-dim); margin-top: 4px; text-align: right; }
.ts-note { font-size: 10.5px; color: var(--txt-faint); margin-top: 4px; text-align: right; line-height: 1.4; }
.ts-src { font-size: 10.5px; color: var(--txt-faint); line-height: 1.45; margin-top: 6px; }
.ts-src a { color: var(--accent); }
.ts-drow { align-items: flex-start; }
#detail .ts-src { padding: 0 0 8px; }

/* ============ About ============ */
#topAbout {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--txt-dim); text-decoration: none;
  border: 1px solid var(--line); border-radius: 3px; padding: 6px 11px; margin-right: 4px;
}
#topAbout:hover { color: var(--txt); border-color: var(--accent); }
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) { #topAbout { padding: 6px 8px; margin-right: 0; } }
@media (pointer: coarse) { #topAbout { min-height: 44px; } }
.panel.about p { font-size: 12.5px; line-height: 1.6; color: var(--txt-dim); margin: 0 0 10px; }
.panel.about a { color: var(--accent); }
.panel.about .lnk, .disclaimer .lnk { color: var(--accent); cursor: pointer; border-bottom: 1px dotted var(--accent); }
.noscript { position: fixed; inset: auto 16px 16px 16px; z-index: 200; font-family: var(--mono); font-size: 12px; color: var(--txt); background: var(--bg-panel); border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px 14px; }

/* ============ Registration headline pair and scrollable table ============ */
.stat-hero-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.stat-hero-pair .stat-hero { margin-bottom: 0; }
.stat-hero-pair .stat-hero[hidden] { display: none; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
@media (max-width: 820px) { .stat-hero-pair { grid-template-columns: 1fr; } }
/* Phone: every close control is a finger-sized tap target */
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) {
  .drawer-head .close2 { width: 44px; height: 44px; font-size: 22px; flex: 0 0 auto; }
}
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) {
  /* Phone: show every drawer tab instead of an unscrollable-looking strip */
  .drawer-nav { flex-wrap: wrap; overflow-x: visible; }
  /* Phone: the first-visit hint's dismiss button is a 44 px tap target */
  #firstHint button { min-width: 44px; min-height: 44px; font-size: 22px; }
}
@media (max-width: 820px), ((pointer: coarse) and (max-height: 520px)) {
  /* Phone: the top-bar clock stays on two lines and inside the viewport */
  .clock { flex: 0 0 auto; text-align: right; min-width: 0; }
  .clock .label, .clock .val { white-space: nowrap; }
  .clock .val { font-size: 11px; line-height: 1.25; }
  .clock .cd, .clock .ct { display: block; }
  .clock .label { font-size: 8px; }
  .brand-txt h1 { font-size: 11px; }
  /* Phone: the replay HUD's exit button is a 44 px tap target */
  #histHud #hhExit { width: 44px; height: 44px; font-size: 18px; }
}
@media (max-width: 420px) {
  /* Phone: the logo stands alone so the top bar (search, About, support, clock) fits the width */
  .brand-txt { display: none; }
  .brand { gap: 0; }
}