/* C. Observatory, shared stylesheet. Tokens are the proposed v2 set for both repos. */
@font-face { font-family: "InterVariable"; src: url("/assets/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --obs-bg0: #05070D;
  --obs-bg1: #0B1220;
  --obs-bg2: #101A2E;
  --obs-well: #080F1B;
  --obs-glass: rgba(11, 18, 32, 0.74);
  --obs-tx: #F5F7FA;
  --obs-tx2: #A9B4C8;
  --obs-tx3: #71809A;
  --obs-line: rgba(245, 247, 250, 0.09);
  --obs-line2: rgba(245, 247, 250, 0.18);
  --obs-acc: #2563EB;
  --obs-acc2: #3B75F1;
  --obs-focus: #6AA1FF;
  --obs-glow: #7DB3FF;
  --obs-hud: #9FD5FF;
  --obs-cta: #D8222F;
  --sig-green: #0ca30c;
  --sig-amber: #fab219;
  --sig-red: #d03b3b;
  --sig-blue: #3987e5;
  --sig-grey: #898781;
  --delta-add: #3c8fd6;
  --delta-remove: #d2455f;
  --delta-change: #b8860b;
  --delta-move: #8b5cf6;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "InterVariable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease-scene: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-scene: 900ms;
  --dur-ui: 180ms;
  --radius: 10px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; background: var(--obs-bg0); color: var(--obs-tx);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--obs-hud); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--obs-focus); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typography */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: 0.02em; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--obs-hud); }
.muted { color: var(--obs-tx2); }
.faint { color: var(--obs-tx3); }
h1, h2, h3 { margin: 0; font-weight: 400; }

/* Interactive primitives: every tile, row, chip and number is a control */
.tile, .row, .chip, .num {
  cursor: pointer; text-align: left; background: transparent; border: 0; padding: 0; color: inherit;
  transition: background var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-ui) ease;
}
.tile {
  display: block; width: 100%; padding: 16px 18px; border: 1px solid var(--obs-line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.55), rgba(8, 15, 27, 0.55));
}
.tile:hover { border-color: var(--obs-line2); background: linear-gradient(180deg, rgba(16, 26, 46, 0.85), rgba(8, 15, 27, 0.85)); }
.tile .k { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--obs-tx3); }
.tile .v { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1.05; margin: 8px 0 6px; }
.tile .s { display: block; font-size: 12.5px; color: var(--obs-tx2); }
.row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; width: 100%;
  padding: 12px 14px; border-top: 1px solid var(--obs-line);
}
.row:hover { background: rgba(125, 179, 255, 0.06); }
.row .glyph { font-size: 13px; text-align: center; }
.row .item { font-size: 14.5px; }
.row .state { font-family: var(--font-mono); font-size: 12px; color: var(--obs-tx2); white-space: nowrap; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--obs-line2); border-radius: 999px;
  font-family: var(--font-mono); font-size: 12px; color: var(--obs-tx2); background: rgba(8, 15, 27, 0.6);
}
.chip:hover { border-color: var(--obs-glow); color: var(--obs-tx); }
.chip.on { border-color: var(--obs-acc2); color: var(--obs-tx); background: rgba(37, 99, 235, 0.22); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--obs-glow); box-shadow: 0 0 8px var(--obs-glow); }
.num { font-family: var(--font-mono); color: var(--obs-hud); border-bottom: 1px dotted rgba(159, 213, 255, 0.5); }
.num:hover { color: #fff; border-bottom-style: solid; }

/* Signal bands. Colour only ever sits on a gate verdict and always travels with its glyph. */
.sig-green { color: var(--sig-green); }
.sig-amber { color: var(--sig-amber); }
.sig-red { color: var(--sig-red); }
.sig-blue { color: var(--sig-blue); }
.sig-grey { color: var(--sig-grey); }

/* InfoTip */
.tip {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%;
  border: 1px solid var(--obs-line2); background: transparent; color: var(--obs-tx2); cursor: pointer;
  font-family: var(--font-display); font-style: italic; font-size: 13px; line-height: 1; vertical-align: middle; padding: 0;
}
.tip:hover { color: var(--obs-tx); border-color: var(--obs-glow); }

/* Glass panels and HUD */
.glass {
  background: var(--obs-glass); border: 1px solid var(--obs-line); border-radius: var(--radius);
  backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.hud { position: relative; padding: 14px 16px; }
.hud::before, .hud::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--obs-hud); border-style: solid; opacity: 0.7; }
.hud::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.hud::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.readout { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; }
.readout .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--obs-tx3); }
.readout .v { font-family: var(--font-mono); font-size: 13px; color: var(--obs-hud); }

/* Modal panel */
.overlay {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(5, 7, 13, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.overlay[open] { display: flex; }
.panel {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 22px 24px 24px;
  animation: panel-in 220ms var(--ease-scene);
}
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { font-family: var(--font-display); font-size: 28px; flex: 1; }
.panel-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--obs-line2); background: transparent; cursor: pointer; color: var(--obs-tx2); font-size: 18px; line-height: 1; }
.panel-x:hover { color: var(--obs-tx); border-color: var(--obs-glow); }
.panel-body { font-size: 14.5px; color: var(--obs-tx2); }
.panel-body p { margin: 0 0 10px; }
.panel-body strong { color: var(--obs-tx); font-weight: 600; }
.panel-body .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 10px 0; }
.panel-body .kv .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--obs-tx3); padding-top: 3px; }
.panel-body .kv .v { color: var(--obs-tx); }
.panel-body blockquote { margin: 10px 0; padding: 10px 14px; border-left: 2px solid var(--obs-acc2); background: rgba(37, 99, 235, 0.08); color: var(--obs-tx); font-size: 13.5px; }
.panel-body .list { list-style: none; margin: 8px 0; padding: 0; }
.panel-body .list li { padding: 8px 0; border-top: 1px solid var(--obs-line); }
.panel-body .list li:first-child { border-top: 0; }
.panel-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--obs-line); font-family: var(--font-mono); font-size: 11.5px; color: var(--obs-tx3); }
.about { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(159, 213, 255, 0.06); border: 1px dashed rgba(159, 213, 255, 0.25); font-size: 13px; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { height: 30px; width: auto; display: block; }
.brand .word { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--obs-tx2); padding-left: 12px; border-left: 1px solid var(--obs-line2); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* The hidden attribute always wins over a display set by a class. */
[hidden] { display: none !important; }

/* ---------- Lens bar, headline strip and filter row (Observatory site page) ---------- */
/* Cesium ion is not used (keyless, no base layer from ion), so its logo never renders. The imagery
   attribution stays as plain text in the credits line and in the Readouts panel. */
.cesium-credit-logoContainer { display: none !important; }
.deck { display: flex; flex-direction: column; gap: 0; padding: 0; }
.lensbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--obs-line); }
.lensbar .lbl, .filters .fk, .headline .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--obs-tx3); }
.lensbar .chip[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.headline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 8px 12px; }
.hl { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; color: inherit; text-align: left; transition: background var(--dur-ui) ease; }
.hl:hover { background: rgba(125, 179, 255, 0.08); }
.hl .v { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--obs-tx); font-feature-settings: "tnum" 1; }
.hl .k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--obs-tx3); white-space: nowrap; }
.hl.on .v { color: var(--obs-hud); }
.hl-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--obs-line2); font-family: var(--font-mono); font-size: 10.5px; color: var(--obs-tx3); background: transparent; cursor: pointer; }
.hl-tag:hover { color: var(--obs-tx); border-color: var(--obs-glow); }
.hl-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--obs-tx3); }
/* Live is a state, not a verdict: the dot takes the brand accent, never a RAG colour. */
.hl-tag.live .dot { background: var(--obs-cta); box-shadow: 0 0 8px var(--obs-cta); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; max-width: 100%; }
.filters .fgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filters .chip { padding: 3px 9px; font-size: 11.5px; }
.filters select.chip { appearance: auto; -webkit-appearance: menulist; color-scheme: dark; padding: 2px 6px; background: rgba(8, 15, 27, 0.9); color: var(--obs-tx2); max-width: 180px; }
.filters .chip.clear { border-color: rgba(216, 34, 47, 0.6); color: #F1A5AB; }
.filters .chip.clear:hover { border-color: var(--obs-cta); color: var(--obs-tx); }
.rail .sub { padding: 10px 14px 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--obs-tx3); border-top: 1px solid var(--obs-line); }
.rail .row .cnt.nb { white-space: normal; font-size: 9.5px; line-height: 1.2; text-align: right; max-width: 112px; color: var(--obs-tx3); }
.rail .row .code.sig { font-size: 13px; }
.rail .row.generic .code { color: var(--obs-tx3); }
.credits .attr { display: inline; }