/* Inter (SIL OFL 1.1) — self-hosted, no external CDN/tracking. See fonts/Inter-OFL-LICENSE.txt */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-400.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-500.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/inter-600.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/inter-700.woff2") format("woff2"); }

:root{
  /* Calm palette — deep space, no pure black, no neon. */
  --space-top: #06080f;
  --space-bottom: #02030a;
  --ink: #b6c0d4;
  --ink-dim: #9aa6c0;
  --ink-muted: rgba(176,188,212,0.78);
  --ink-muted-strong: rgba(188,200,222,0.86);
  --ink-soft: #cdd6e6;
  --ink-strong: #eef2fb;
  --ink-bright: #f1f5fc;
  --ink-hover: #e6edfb;

  /* --- Design tokens --- */
  --font-ui: "Inter", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  /* type scale (1.25 minor-third), all rem-based */
  --fs-2xs: 9.5px; --fs-xs: 10.5px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 19px;
  --lh-tight: 1.2; --lh-snug: 1.34; --lh-normal: 1.5;
  /* spacing scale (4px base) */
  --sp-px: 1px; --sp-0-5: 2px; --sp-0-75: 3px; --sp-1: 4px; --sp-1-25: 5px; --sp-1-5: 6px; --sp-1-75: 7px;
  --sp-2: 8px; --sp-2-25: 9px; --sp-2-5: 10px; --sp-2-75: 11px; --sp-3: 12px; --sp-3-5: 14px;
  --sp-4: 16px; --sp-4-5: 18px; --sp-4-75: 20px; --sp-5-5: 22px; --sp-5: 24px;
  --sp-6-5: 26px; --sp-7: 28px; --sp-6: 32px;
  /* radii */
  --r-2xs: 3px; --r-xs: 4px; --r-kbd: 5px; --r-sm: 8px; --r-card: 10px;
  --r-md: 11px; --r-card-lg: 12px; --r-chip: 14px; --r-lg: 16px; --r-xl: 20px;
  --r-2xl: 22px; --r-round: 50%; --r-pill: 999px;
  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.16s; --dur-med: 0.3s; --dur-slow: 0.6s;
  /* accent, trust-status, severity, and premium colors */
  --accent: #9cc0ff;
  --accent-strong: #8fb6ff;
  --accent-pale: #cfe0ff;
  --status-verified: #6fe6a6;
  --status-developing: var(--accent-strong);
  --status-reported: #ffc879;
  --severity-critical: #ff6b5e;
  --severity-high: #ff8d82;
  --severity-medium: var(--status-reported);
  --severity-low: var(--status-verified);
  --pro: #ff9f6b;
  --pro-light: #ffd27a;
  --market-up: #ffb86b;
  --market-down: #7fb0ff;
  --market-volatile: #c79bff;
  /* surfaces, borders, shadows, and focus */
  --surface: rgba(12,16,26,0.66);
  --surface-dim: rgba(8,11,20,0.42);
  --surface-card: rgba(10,14,24,0.55);
  --surface-card-solid: rgba(9,12,20,0.9);
  --surface-hover: rgba(20,28,44,0.78);
  --surface-active: rgba(24,32,50,0.85);
  --surface-overlay: rgba(13,17,27,0.92);
  --surface-panel-top: rgba(10,14,24,0.92);
  --surface-panel-bottom: rgba(6,9,16,0.96);
  --surface-solid: rgba(10,13,21,0.9);
  --surface-review: rgba(16,13,8,0.7);
  --surface-subtle: rgba(255,255,255,0.03);
  --surface-soft: rgba(255,255,255,0.06);
  --surface-soft-hover: rgba(255,255,255,0.12);
  --hairline: rgba(120,140,180,0.18);
  --hairline-soft: rgba(120,140,180,0.12);
  --hairline-faint: rgba(120,140,180,0.1);
  --scrollbar: rgba(140,160,200,0.2);
  --shadow: rgba(0,0,0,0.4);
  --shadow-deep: rgba(0,0,0,0.55);
  --mask-opaque: #000;
  --focus: #8fb6ff;

  /* --- Chrome design system: ONE recipe for every floating panel (dock,
     toolbar, feed, popovers, detail). Change here = change everywhere. --- */
  --chrome-bg: linear-gradient(180deg, rgba(13,17,28,0.86), rgba(8,11,19,0.92));
  --chrome-border: rgba(130,150,190,0.16);
  --chrome-blur: blur(16px) saturate(1.1);
  --chrome-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  --r-chrome: 14px;          /* outer panel radius */
  --r-chrome-inner: 9px;     /* items/rows inside a panel */
}

/* Cyberpunk theme — neon cyan accents over the same dark chrome (the globe
   shader carries the bulk of the look). Opt-in via the toolbar theme toggle. */
:root[data-theme="cyberpunk"]{
  --accent: #5aecf6;
  --accent-strong: #82f5ff;
  --accent-pale: #b9fbff;
  --focus: #5aecf6;
  --space-top: #0a0518;
  --space-bottom: #050211;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  height: 100%;
  background: radial-gradient(120% 120% at 50% 18%, var(--space-top) 0%, var(--space-bottom) 70%);
  color: var(--ink);
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Accessibility: visible keyboard focus everywhere (mouse users unaffected) --- */
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
*:focus:not(:focus-visible){ outline: none; }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

#scene{
  position: fixed;
  inset: 0;
  /* Soft vignette so the globe sits in space rather than on a flat fill. */
  -webkit-mask-image: radial-gradient(135% 110% at 50% 50%, var(--mask-opaque) 62%, transparent 100%);
          mask-image: radial-gradient(135% 110% at 50% 50%, var(--mask-opaque) 62%, transparent 100%);
}

#scene canvas{ display:block; }

/* --- Restrained product chrome --- */
.hud{
  position: fixed;
  left: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 5;
  opacity: 0;
  transition: opacity 1.6s ease 0.4s;
  user-select: none;
  pointer-events: none;
}
.ready .hud{ opacity: 1; }

.hud{ text-shadow: 0 1px 14px color-mix(in srgb, var(--space-bottom) 75%, transparent); }

/* Brand mark: logo glyph + two-weight wordmark. */
.hud-brand{ display: flex; align-items: center; gap: var(--sp-2-5); }
.hud-logo{ width: 26px; height: 26px; color: var(--accent-pale); flex: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent)); }
.hud-word{ display: flex; flex-direction: column; line-height: 1.05; }
.hud-word b{ font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-bright); }
.hud-word i{ font-style: normal; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-dim); margin-top: 2px; }

/* Status row: a live-state pill + clock + count. */
.hud-status{ display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2-5); }
.hud-pill{
  display: inline-flex; align-items: center; gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1-75);
  border-radius: var(--r-pill); border: 1px solid var(--hairline-soft);
  background: var(--surface-subtle);
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--ink-dim);
}
.hud-dot{ width: 6px; height: 6px; border-radius: var(--r-round); background: currentColor; }
.hud-sources.live{ color: var(--status-verified); border-color: color-mix(in srgb, var(--status-verified) 30%, transparent); background: color-mix(in srgb, var(--status-verified) 10%, transparent); }
.hud-sources.live .hud-dot{ box-shadow: 0 0 7px 0 color-mix(in srgb, var(--status-verified) 80%, transparent); animation: feedpulse 2.4s ease-in-out infinite; }
.hud-sources.demo{ color: var(--status-reported); border-color: color-mix(in srgb, var(--status-reported) 26%, transparent); background: color-mix(in srgb, var(--status-reported) 9%, transparent); }
.hud-sources.degraded{ color: var(--severity-high); border-color: color-mix(in srgb, var(--severity-high) 26%, transparent); }
.hud-sources.connecting{ color: var(--accent); }
.hud-clock{ font-size: 11px; letter-spacing: 0.08em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.hud-state{ font-size: 11px; letter-spacing: 0.04em; color: var(--ink-muted-strong); }
.hud-state::before{ content: "·"; margin-right: var(--sp-1-75); color: var(--ink-muted); }
.hud-state:empty::before{ content: none; }

.hud-recap{
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--accent) 90%, transparent);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.6s ease, max-height 0.6s ease;
}
.hud-recap.show{ opacity: 1; max-height: 20px; }

/* --- "Your places" home pins (distinct from watched labels) --- */
.globe-label.home .dot{
  width: 6px; height: 6px; margin: calc(-1 * var(--sp-0-75)) 0 0 calc(-1 * var(--sp-0-75));
  background: var(--accent-pale);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--accent-pale) 70%, transparent);
}
.globe-label.home b{ color: color-mix(in srgb, var(--accent-pale) 96%, transparent); }
.globe-label.home i{ color: color-mix(in srgb, var(--accent-pale) 72%, transparent); }

/* --- Satellite labels (small, pale, no dot — the sprite is the marker) --- */
.globe-label.sat .dot{ display: none; }
.globe-label.sat .txt{ left: 6px; top: -6px; }
.globe-label.sat b{
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-pale) 90%, transparent);
}

/* --- Time scrubber --- */
.scrubber{
  position: fixed;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  width: min(640px, 70vw);
  padding: var(--sp-2) var(--sp-3-5);
  border-radius: var(--r-2xl);
  background: var(--surface-dim);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.scrubber:hover, .scrubber:not(.live){ opacity: 1; }
.scrubber:not(.live){ background: var(--surface); backdrop-filter: blur(6px); }

.scrubber input[type="range"]{
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 3px; border-radius: var(--r-2xs);
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  outline: none; cursor: pointer;
}
.scrubber input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: var(--r-round);
  background: var(--accent-pale); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 60%, transparent);
}
.scrubber input[type="range"]::-moz-range-thumb{
  width: 12px; height: 12px; border: none; border-radius: var(--r-round);
  background: var(--accent-pale); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 60%, transparent);
}
.scrub-time{
  border: none; background: none; cursor: pointer;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-dim); font-variant-numeric: tabular-nums;
  white-space: nowrap; min-width: 96px; text-align: right;
}
.scrubber.live .scrub-time{ color: color-mix(in srgb, var(--status-verified) 85%, transparent); }

/* --- Ambient / screensaver mode: hide all chrome, hide cursor --- */
.ambient #hud,
.ambient .feed,
.ambient .review,
.ambient .digest-pill,
.ambient .digest-card,
.ambient .label-layer,
.ambient .scrubber,
.ambient .view-toggle,
.ambient .event-panel{ opacity: 0 !important; pointer-events: none !important; }
.ambient, .ambient #scene{ cursor: none; }

/* --- Globe ↔ List view toggle --- */
.view-toggle{
  position: fixed; z-index: 9;
  top: clamp(14px, 3.4vh, 32px);
  right: clamp(14px, 2vw, 26px);
  display: inline-flex; gap: var(--sp-0-5); padding: var(--sp-0-75);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px var(--shadow);
  opacity: 0; transition: opacity 0.6s ease;
}
.ready .view-toggle{ opacity: 1; }
.vt-btn{
  display: inline-flex; align-items: center; gap: var(--sp-1-25);
  padding: var(--sp-1-25) var(--sp-2-75) var(--sp-1-25) var(--sp-2-25); border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.03em;
  transition: background 0.18s ease, color 0.18s ease;
}
.vt-btn svg{ width: 13px; height: 13px; }
.vt-btn:hover{ color: var(--ink-hover); }
.vt-btn.on{
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--ink-bright);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* push the feed down so the toggle sits clear above it (no overlap) */
.feed{ top: clamp(68px, 10vh, 100px); }

/* Globe view: hide the rail (markers carry the events). */
body.view-globe .feed{ opacity: 0; pointer-events: none; transform: translateX(8px); }
/* List view: the rail is primary; the floating markers step aside. The rail is
   ALWAYS reachable here — even when calm or fully filtered — so its own
   controls (filters, collapse) can never strand you. */
body.view-list .feed{ opacity: 1; transform: none; pointer-events: auto; }
body.view-list .news-layer{ display: none !important; }
@media (max-width: 520px){ .vt-btn span{ display: none; } .vt-btn{ padding: var(--sp-1-25) var(--sp-2); } }

/* --- Alerts for "your places" (compact latest-toast rail) --- */
.alerts{
  /* one toast only; the alert center carries history so chrome never piles up */
  position: fixed; left: clamp(16px, 3vw, 34px); bottom: clamp(110px, 16vh, 146px);
  z-index: 11; display: flex; flex-direction: column-reverse; gap: var(--sp-1-5);
  pointer-events: none; width: min(318px, calc(100vw - 32px));
}
.alert{
  pointer-events: auto; cursor: pointer;
  width: 100%;
  border-radius: var(--r-card-lg); padding: var(--sp-2-25) var(--sp-2-5);
  border: 1px solid color-mix(in srgb, var(--c) 30%, var(--hairline));
  border-left: 2px solid var(--c);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 94%, var(--c) 6%), rgba(6,8,14,0.92));
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.04);
  opacity: 0; transform: translateX(-14px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.alert.show{ opacity: 1; transform: none; }
.alerts.has-more::after{
  content: attr(data-more);
  align-self: flex-start;
  margin-left: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-pill);
  background: rgba(9,12,20,0.72);
  color: var(--ink-dim);
  font: 700 9px/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.al-row{ display: flex; align-items: center; gap: var(--sp-1-5); margin-bottom: var(--sp-1); }
.al-eyebrow{
  flex: 1; min-width: 0;
  font-size: 8.8px; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 750;
  color: var(--c);
  display: inline-flex; align-items: center; gap: var(--sp-1-5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.al-ping{
  width: 7px; height: 7px; border-radius: var(--r-round); background: var(--c); flex: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent);
  animation: alPing 1.8s ease-out infinite;
}
@keyframes alPing{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 65%, transparent); }
  70%{ box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 0%, transparent); }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce){ .al-ping{ animation: none; } }
.al-mute, .al-x{
  flex: none; border: 0; background: none; cursor: pointer; padding: 0;
  color: color-mix(in srgb, var(--ink) 55%, transparent); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.al-mute{ width: 15px; height: 15px; }
.al-mute svg{ width: 14px; height: 14px; }
.al-x{ font-size: 15px; width: 15px; height: 15px; }
.al-mute:hover, .al-x:hover{ color: var(--ink-hover); }
.al-head{ font-size: 12px; line-height: 1.28; color: var(--ink-strong); margin-bottom: var(--sp-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.al-impact{
  margin: 0 0 var(--sp-1); padding: var(--sp-1) var(--sp-1-75);
  border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--c) 24%, var(--hairline));
  background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--ink-soft);
  font: 700 var(--fs-2xs)/1.2 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.al-src{ font-size: 8.8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-go{ font-size: 9.5px; font-weight: 700; color: var(--c); flex: none; }
.al-actions{ display: flex; gap: var(--sp-1); margin-top: var(--sp-1-5); }
.al-actions button{
  flex: 1; border: 1px solid color-mix(in srgb, var(--c) 20%, var(--hairline)); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c) 7%, transparent); color: var(--ink-soft);
  cursor: pointer; padding: var(--sp-1-25) var(--sp-2); font: 700 9px/1 var(--font-ui);
}
.al-actions button:hover{ background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--ink-strong); }

/* Alert center: durable local alert lifecycle. */
.alert-center{ position: fixed; left: 0; top: calc(27% + 46px); z-index: 10; }
.ambient .alert-center{ display: none !important; }
.ac-tab{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2-5);
  border: 1px solid var(--hairline); border-left: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--surface); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer;
  font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.04em;
  opacity: 0; transition: opacity var(--dur-slow) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ready .ac-tab{ opacity: 1; }
.ac-tab:hover{ color: var(--ink-strong); background: var(--surface-hover); }
.ac-badge{
  min-width: 18px; padding: var(--sp-px) var(--sp-1-75); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--severity-high) 18%, transparent); color: var(--severity-high);
  font-size: var(--fs-2xs); text-align: center; font-variant-numeric: tabular-nums;
}
.ac-panel{
  width: min(326px, 92vw); max-height: 70vh; overflow-y: auto;
  padding: var(--sp-3); border: 1px solid var(--chrome-border);
  border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
  animation: wlIn var(--dur-fast) var(--ease-out) both;
}
.ac-head{ display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-3); }
.ac-head div{ display: flex; flex-direction: column; gap: var(--sp-1); }
.ac-head strong{ font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-strong); }
.ac-head span{ font-size: var(--fs-2xs); color: var(--ink-dim); }
.ac-close{
  border: 0; background: none; color: var(--ink-dim); cursor: pointer; font: 500 16px/1 var(--font-ui);
}
.ac-close:hover{ color: var(--ink-strong); }
.ac-quiet{ display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-size: var(--fs-xs); }
.ac-hours{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.ac-hours input{
  min-height: 32px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--sp-1-5) var(--sp-2); background: var(--surface-card); color: var(--ink-strong);
  font: 500 var(--fs-xs)/1 var(--font-ui);
}
.ac-dest{
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-2-5);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), var(--surface-subtle));
}
.ac-sec{
  margin-bottom: var(--sp-2);
  color: var(--ink-muted); font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.ac-dest-browser{ display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-size: var(--fs-xs); }
.ac-dest-grid{ display: grid; gap: var(--sp-1-5); margin-top: var(--sp-2); }
.ac-dest-grid input{
  width: 100%; min-height: 30px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface-card); color: var(--ink-strong);
  padding: var(--sp-1-75) var(--sp-2);
  font: 500 var(--fs-2xs)/1.2 var(--font-ui);
}
.ac-dest-grid input::placeholder{ color: var(--ink-muted); }
.ac-browser-test{
  width: 100%; margin-top: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--hairline));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-pale); cursor: pointer;
  padding: var(--sp-2) var(--sp-2-5);
  font: 700 var(--fs-2xs)/1 var(--font-ui);
}
.ac-browser-test:hover{ background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ac-dest-note{ margin: var(--sp-2) 0 0; color: var(--ink-muted-strong); font-size: var(--fs-2xs); line-height: var(--lh-normal); }
.ac-dest-status{ display: block; min-height: 13px; margin-top: var(--sp-1-5); color: var(--ink-dim); font-size: var(--fs-2xs); }
.ac-list{ display: flex; flex-direction: column; gap: var(--sp-1-5); }
.ac-row{
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--sp-1-5);
  padding: var(--sp-2); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); background: var(--surface-card);
}
.ac-row div{ min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.ac-row b, .ac-row span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-row b{ color: var(--ink-strong); font-size: var(--fs-xs); }
.ac-row span{ color: var(--ink); font-size: var(--fs-2xs); }
.ac-impact{
  color: var(--accent-pale); font-size: var(--fs-2xs); font-style: normal; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-row i{ color: var(--ink-dim); font-size: var(--fs-2xs); font-style: normal; text-transform: capitalize; }
.ac-row button{
  border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface-subtle);
  color: var(--ink); cursor: pointer; padding: var(--sp-1-25) var(--sp-1-75); font: 600 var(--fs-2xs)/1 var(--font-ui);
}
.ac-row button:hover{ color: var(--ink-strong); background: var(--surface-soft); }
.ac-acknowledged{ opacity: 0.68; }
.ac-followed{ border-color: color-mix(in srgb, var(--pro) 34%, var(--hairline)); background: color-mix(in srgb, var(--pro) 8%, var(--surface-card)); }
.ac-empty{ padding: var(--sp-3); color: var(--ink-dim); font-size: var(--fs-xs); line-height: var(--lh-normal); text-align: center; }

/* --- Command palette (⌘K / ?) --- */
.cmdk[hidden]{ display: none; }
.cmdk{ position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; }
.cmdk-backdrop{ position: absolute; inset: 0; background: color-mix(in srgb, var(--space-bottom) 55%, transparent); backdrop-filter: blur(2px); }
.cmdk-panel{
  position: relative; margin-top: 12vh; width: min(580px, 92vw);
  max-height: 70vh; display: flex; flex-direction: column;
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur);
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--mask-opaque) 60%, transparent), var(--chrome-shadow);
  overflow: hidden;
  animation: cmdkIn 0.16s var(--ease-out) both;
}
@keyframes cmdkIn{ from{ opacity: 0; transform: translateY(-8px) scale(0.99); } to{ opacity: 1; transform: none; } }
.cmdk-input{
  appearance: none; border: 0; outline: 0; width: 100%;
  padding: var(--sp-4) var(--sp-4); font: 500 var(--fs-lg)/1.2 var(--font-ui);
  color: var(--ink-strong); background: transparent;
  border-bottom: 1px solid var(--hairline);
}
.cmdk-input::placeholder{ color: var(--ink-muted); font-weight: 400; }
.cmdk-list{ overflow-y: auto; padding: var(--sp-2); }
.cmdk-list::-webkit-scrollbar{ width: 6px; }
.cmdk-list::-webkit-scrollbar-thumb{ background: var(--scrollbar); border-radius: var(--r-xs); }
.cmdk-sec{
  font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); padding: var(--sp-3) var(--sp-3) var(--sp-1);
}
.cmdk-item{
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink);
}
.cmdk-item.on{ background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink-bright); }
.cmdk-label{ flex: 1; min-width: 0; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-hint{ flex: none; font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted-strong); }
.cmdk-empty{ padding: var(--sp-5); text-align: center; color: var(--ink-dim); font-size: var(--fs-sm); }
.cmdk-foot{
  display: flex; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--hairline); color: var(--ink-muted-strong); font-size: var(--fs-2xs);
}
.cmdk-keys{ padding: var(--sp-1) var(--sp-2) var(--sp-3); }
.cmdk-keyrow{ display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1-25) var(--sp-3); font-size: var(--fs-sm); color: var(--ink); }
.cmdk-keyrow span{ color: var(--ink-dim); }
kbd{
  display: inline-block; min-width: 18px; text-align: center;
  padding: var(--sp-0-5) var(--sp-1-5); border-radius: var(--r-kbd); font: 600 var(--fs-2xs)/1.4 var(--font-ui);
  color: var(--ink-soft); background: var(--surface-soft); border: 1px solid var(--surface-soft-hover);
  box-shadow: 0 1px 0 var(--shadow);
}
.cmdk-foot kbd{ margin-right: 3px; }
.ambient .cmdk{ display: none !important; }

/* --- Watchlist: visible paid-value alert manager --- */
.watchlist{ position: fixed; left: 0; top: 27%; z-index: 10; }
.ambient .watchlist{ display: none !important; }
.wl-tab{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2-5);
  border: 1px solid var(--hairline); border-left: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--surface); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer;
  font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.04em;
  opacity: 0; transition: opacity var(--dur-slow) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.wl-tab[hidden]{ display: none; }
.ready .wl-tab{ opacity: 1; }
.wl-tab:hover{ color: var(--ink-strong); background: var(--surface-hover); }
.wl-badge{
  min-width: 18px; padding: var(--sp-px) var(--sp-1-75); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pro) 22%, transparent); color: var(--pro-light);
  font-size: var(--fs-2xs); text-align: center;
}
.wl-panel{
  width: min(326px, 92vw); max-height: 70vh; overflow-y: auto;
  padding: var(--sp-3); border: 1px solid var(--chrome-border);
  border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
  animation: wlIn var(--dur-fast) var(--ease-out) both;
}
@keyframes wlIn{ from{ opacity: 0; transform: translateX(-10px); } to{ opacity: 1; transform: none; } }
.wl-head{ display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-3); }
.wl-head div{ display: flex; flex-direction: column; gap: var(--sp-1); }
.wl-head strong{ font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-strong); }
.wl-head span{ font-size: var(--fs-2xs); color: var(--ink-dim); }
.wl-close, .wl-row button{
  border: 0; background: none; color: var(--ink-dim); cursor: pointer; font: 500 16px/1 var(--font-ui);
}
.wl-close:hover, .wl-row button:hover{ color: var(--ink-strong); }
.wl-form{ display: flex; flex-direction: column; gap: var(--sp-2); }
.wl-form select, .wl-form input{
  width: 100%; min-height: 34px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-2-5); background: var(--surface-card); color: var(--ink-strong);
  font: 500 var(--fs-xs)/1.2 var(--font-ui);
}
.wl-move{ display: flex; flex-direction: column; gap: var(--sp-1); color: var(--ink-dim); font-size: var(--fs-2xs); }
.wl-move[hidden]{ display: none; }
.wl-form option{ background: var(--space-top); }
.wl-form input::placeholder{ color: var(--ink-muted); }
.wl-rules{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.wl-add, .wl-import{
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--hairline)); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-pale); cursor: pointer;
  padding: var(--sp-2) var(--sp-3); font: 600 var(--fs-xs)/1 var(--font-ui);
}
.wl-add:hover, .wl-import:hover{ background: color-mix(in srgb, var(--accent) 22%, transparent); }
.wl-import{ width: 100%; margin-top: var(--sp-2); color: var(--ink); background: var(--surface-subtle); border-color: var(--hairline); }
.wl-list{ display: flex; flex-direction: column; gap: var(--sp-1); margin-top: var(--sp-3); }
.wl-row{
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2-5);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); background: var(--surface-card);
}
.wl-row div{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.wl-row b{ color: var(--ink-strong); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-row span{ color: var(--ink-dim); font-size: var(--fs-2xs); text-transform: capitalize; }
.wl-empty{ padding: var(--sp-3); color: var(--ink-dim); font-size: var(--fs-xs); line-height: var(--lh-normal); text-align: center; }
.wl-note{ margin: var(--sp-3) 0 0; color: var(--ink-muted); font-size: var(--fs-2xs); line-height: var(--lh-normal); }

/* --- Asset Lens: market and crypto event intelligence --- */
.asset-lens{ position: fixed; left: 0; top: 39%; z-index: 10; }
.ambient .asset-lens{ display: none !important; }
.ax-tab{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2-5);
  border: 1px solid var(--hairline); border-left: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--surface); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer;
  font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.04em;
  opacity: 0; transition: opacity var(--dur-slow) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ready .ax-tab{ opacity: 1; }
.ax-tab:hover{ color: var(--ink-strong); background: var(--surface-hover); }
.ax-badge{
  min-width: 18px; padding: var(--sp-px) var(--sp-1-75); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-soft);
  font-size: var(--fs-2xs); text-align: center;
}
.ax-panel{
  width: min(338px, 92vw); max-height: 72vh; overflow-y: auto;
  padding: var(--sp-3); border: 1px solid var(--chrome-border);
  border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
  animation: axIn var(--dur-fast) var(--ease-out) both;
}
@keyframes axIn{ from{ opacity: 0; transform: translateX(-10px); } to{ opacity: 1; transform: none; } }
.ax-head{ display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-3); }
.ax-head div{ display: flex; flex-direction: column; gap: var(--sp-1); }
.ax-head strong{ font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-strong); }
.ax-head span{ font-size: var(--fs-2xs); color: var(--ink-dim); }
.ax-close{
  border: 0; background: none; color: var(--ink-dim); cursor: pointer; font: 500 16px/1 var(--font-ui);
}
.ax-close:hover{ color: var(--ink-strong); }
.ax-select{
  width: 100%; min-height: 34px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-2-5); background: var(--surface-card); color: var(--ink-strong);
  font: 600 var(--fs-xs)/1.2 var(--font-ui);
}
.ax-select option{ background: var(--space-top); }
.ax-tools{
  padding: var(--sp-2-5);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  background:
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    var(--surface-subtle);
}
.ax-field{ display: flex; flex-direction: column; gap: var(--sp-1); color: var(--ink-muted); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; }
.ax-field-row{ display: grid; grid-template-columns: 0.82fr 1.18fr; gap: var(--sp-2); }
.ax-custom{ margin-top: var(--sp-2); }
.ax-custom summary{
  display: flex; align-items: center; justify-content: space-between;
  min-height: 30px; padding: var(--sp-1-75) var(--sp-2);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-card); color: var(--ink-soft); cursor: pointer;
  font: 700 var(--fs-2xs)/1 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase;
}
.ax-custom summary::after{ content: "Open"; color: var(--ink-muted); font-weight: 600; letter-spacing: 0.08em; }
.ax-custom[open] summary::after{ content: "Close"; }
.ax-watch-form{ display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.ax-watch-kind, .ax-watch-value, .ax-watch-move{
  width: 100%; min-height: 32px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  padding: var(--sp-1-75) var(--sp-2); background: var(--surface-card); color: var(--ink-strong);
  font: 600 var(--fs-xs)/1.2 var(--font-ui);
}
.ax-watch-value::placeholder, .ax-watch-move::placeholder{ color: var(--ink-muted); }
.ax-move{ display: flex; flex-direction: column; gap: var(--sp-1); color: var(--ink-muted); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; }
.ax-move[hidden]{ display: none; }
.ax-add-watch{
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--hairline)); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-pale); cursor: pointer;
  padding: var(--sp-2) var(--sp-2-5); font: 800 var(--fs-xs)/1 var(--font-ui);
}
.ax-add-watch:hover{ background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ax-command-status{ display: block; min-height: 14px; margin-top: var(--sp-1-5); color: var(--ink-dim); font-size: var(--fs-2xs); }
.ax-body{ display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.ax-card{
  padding: var(--sp-3); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--hairline));
  border-radius: var(--r-sm); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--surface-card));
}
.ax-symbol{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1-5); }
.ax-symbol b{ color: var(--ink-strong); font-size: 24px; letter-spacing: -0.03em; }
.ax-symbol span{ color: var(--ink-muted); font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; }
.ax-card h3{ margin: 0 0 var(--sp-1-5); color: var(--ink-strong); font-size: var(--fs-sm); }
.ax-card p{ margin: 0; color: var(--ink); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.ax-metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-1-5); margin-top: var(--sp-3); }
.ax-metrics span{
  min-width: 0; padding: var(--sp-1-5) var(--sp-2);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-card); color: var(--ink-dim);
  font-size: var(--fs-2xs); line-height: var(--lh-normal);
}
.ax-metrics b{ display: block; color: var(--ink-strong); font-size: var(--fs-sm); }
.ax-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ax-actions button{
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--hairline)); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-pale); cursor: pointer;
  padding: var(--sp-2) var(--sp-2-5); font: 700 var(--fs-xs)/1 var(--font-ui);
}
.ax-actions button:hover{ background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ax-sec{
  margin-top: var(--sp-1); color: var(--ink-muted); font-size: var(--fs-2xs);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* --- Markets overview cards (glanceable, calm) --- */
.ax-markets{ margin-top: var(--sp-2-5); }
.ax-deck-sec{ margin-top: var(--sp-4); }
.mk{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mk-card{ min-width: 0; padding: var(--sp-2-5); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-card) 78%, transparent); }
.mk-card h4{ margin: 0 0 var(--sp-1-5); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.mk-row{ display: flex; align-items: baseline; gap: var(--sp-1); padding: 2px 0; }
.mk-sym{ flex: 1; min-width: 0; font-size: var(--fs-2xs); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-val{ font-size: var(--fs-2xs); color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.mk-chg{ flex: none; min-width: 46px; text-align: right; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-chg.up, .mk-up{ color: #46e39b; }
.mk-chg.down, .mk-down{ color: #ff6b78; }
.mk-card.mk-movers, .mk-card.mk-fg, .mk-card.mk-pred{ grid-column: 1 / -1; }
.mk-movers-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.mk-mh{ font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
.mk-fg{ text-align: center; }
.mk-fg-num{ font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-fg-num span{ font-size: 12px; color: var(--ink-muted); font-weight: 600; }
.mk-fg-label{ font-size: var(--fs-2xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
.mk-fg-bar{ position: relative; height: 5px; border-radius: 3px; margin: var(--sp-2) 0 5px;
  background: linear-gradient(90deg, #ff5d6c, #ff9f43, #ffd166, #7ad97a, #34e58a); }
.mk-fg-dot{ position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff;
  border: 2px solid #0b0f1a; transform: translate(-50%, -50%); box-shadow: 0 0 4px rgba(0,0,0,0.5); }
.mk-fg-scale{ display: flex; justify-content: space-between; font-size: 8.5px; color: var(--ink-muted); letter-spacing: 0.04em; }

/* --- Prediction-market odds (Impact Brief block + Markets trending card) --- */
.pm-row{ display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-1-5); }
.pm-q{ flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.3; }
.pm-bar{ flex: none; width: 60px; height: 5px; border-radius: 3px; background: var(--surface-soft); overflow: hidden; }
.pm-bar i{ display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.pm-prob{ flex: none; min-width: 56px; text-align: right; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.pm-prob em{ font-style: normal; font-size: 9px; margin-left: 4px; }
.pm-prob em.up{ color: #46e39b; }
.pm-prob em.down{ color: #ff6b78; }
.pm-foot{ margin-top: var(--sp-2); font-size: 8.5px; letter-spacing: 0.03em; color: var(--ink-muted); }
.mk-pred .pm-row-c{ margin-top: var(--sp-1); }
.mk-pred .pm-q, .mk-pred .pm-prob{ font-size: var(--fs-2xs); }

/* --- Trending now (social pulse, pinned above the live feed) --- */
.feed-trending{ margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-1); border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface-card) 60%, transparent); }
.ft-head{ display: flex; align-items: baseline; justify-content: space-between; margin: 0 var(--sp-1) var(--sp-1-5); }
.ft-head > span:first-child{ font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.ft-sub{ font-size: 8.5px; color: var(--ink-dim); letter-spacing: 0.02em; }
.ft-row{ display: flex; align-items: center; gap: var(--sp-1-5); width: 100%; text-align: left; padding: var(--sp-1) var(--sp-1);
  border: 0; background: transparent; border-radius: var(--r-xs); cursor: pointer; transition: background var(--dur-fast) ease; }
.ft-row:hover{ background: var(--surface-soft); }
.ft-row.open{ background: var(--surface-soft); }
.ft-summary{ margin: 2px 0 var(--sp-1) 22px; padding: var(--sp-1-5) var(--sp-2); border-left: 2px solid var(--hairline);
  border-radius: var(--r-xs); background: var(--surface-card); }
.ft-summary p{ margin: 0 0 var(--sp-1); font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.5; }
.ft-link{ font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-pale); text-decoration: none; }
.ft-link:hover{ text-decoration: underline; }
.ft-demo{ font-size: var(--fs-2xs); color: var(--ink-dim); }
.ft-rank{ flex: none; width: 14px; font-size: 10px; font-weight: 700; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.ft-t{ flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-src{ flex: none; font-size: 8px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border: 1px solid; border-radius: var(--r-pill); }
.ft-mo{ flex: none; min-width: 38px; text-align: right; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ft-mo.up{ color: #46e39b; }
.ft-mo.down{ color: #ff6b78; }
.ax-chips{ display: flex; flex-wrap: wrap; gap: var(--sp-1-5); }
.ax-chips span, .ax-note{
  border: 1px solid var(--hairline-soft); border-radius: var(--r-pill);
  background: var(--surface-card); color: var(--ink); font-size: var(--fs-2xs); line-height: var(--lh-normal);
  padding: var(--sp-1-25) var(--sp-2);
}
.ax-note{ border-radius: var(--r-sm); color: var(--ink-dim); }
.ax-events{ display: flex; flex-direction: column; gap: var(--sp-1-5); }
.ax-event{
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-2); width: 100%; text-align: left;
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); background: var(--surface-card); cursor: pointer;
  padding: var(--sp-2); color: var(--ink);
}
.ax-event:hover{ background: var(--surface-hover); }
.ax-event b{ grid-column: 1 / -1; color: var(--ink-strong); font-size: var(--fs-xs); line-height: 1.25; }
.ax-event span{ color: var(--ink-dim); font-size: var(--fs-2xs); line-height: var(--lh-normal); }
.ax-event i{ color: var(--ink-muted); font-size: var(--fs-2xs); font-style: normal; font-variant-numeric: tabular-nums; }
.ax-empty{ padding: var(--sp-3); color: var(--ink-dim); font-size: var(--fs-xs); line-height: var(--lh-normal); text-align: center; }

/* --- Intelligence panel (left edge): situations + risk index --- */
.intel{ position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 8; }
.ambient .intel{ display: none !important; }
.intel-tab{
  display: inline-flex; align-items: center; gap: var(--sp-1-75);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2-5); border: 1px solid var(--hairline); border-left: 0;
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--surface); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer;
  font: 600 var(--fs-xs)/1 var(--font-ui); letter-spacing: 0.04em;
  opacity: 0; transition: opacity var(--dur-slow) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ready .intel-tab{ opacity: 1; }
.intel-tab:hover{ color: var(--ink-strong); background: var(--surface-hover); }
.intel-glyph{ color: var(--ink-dim); font-size: 11px; }
.intel-badge{ background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-soft); border-radius: var(--r-pill); padding: var(--sp-px) var(--sp-1-75); font-size: var(--fs-2xs); }
.intel.open{
  width: 288px; padding: var(--sp-3); border: 1px solid var(--hairline); border-left: 0;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-solid); backdrop-filter: blur(12px);
  box-shadow: 0 14px 44px color-mix(in srgb, var(--mask-opaque) 50%, transparent);
  animation: intelIn 0.18s var(--ease-out) both;
}
@keyframes intelIn{ from{ opacity: 0; transform: translateY(-50%) translateX(-10px); } to{ opacity: 1; transform: translateY(-50%); } }
.intel-head{ display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--sp-1-5); }
.intel-close{ border: 0; background: none; color: var(--ink-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.intel-close:hover{ color: var(--ink-strong); }
.intel-sec{ font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: var(--sp-2-5) 0 var(--sp-1-25); }
.intel-row{ display: flex; align-items: center; gap: var(--sp-2-25); width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; padding: var(--sp-1-5); border-radius: var(--r-sm); color: var(--ink); }
.intel-row:hover{ background: color-mix(in srgb, var(--ink-strong) 5%, transparent); }
.intel-rtext{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.intel-rtext b{ font-size: var(--fs-sm); color: var(--ink-strong); font-weight: 600; }
.intel-rtext > span{ font-size: var(--fs-2xs); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intel-spark{ width: 8px; height: 8px; border-radius: var(--r-round); flex: none; }
.intel-bar{ display: block; height: 5px; border-radius: var(--r-2xs); background: color-mix(in srgb, var(--ink-strong) 8%, transparent); overflow: hidden; }
.intel-bar i{ display: block; height: 100%; border-radius: var(--r-2xs); }
.intel-score{ flex: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; font-weight: 600; }
.intel-none{ font-size: var(--fs-xs); color: var(--ink-dim); padding: var(--sp-1) var(--sp-1-5); }
.intel-spark.intel-hi, .intel-bar i.intel-hi{ background: var(--severity-critical); }
.intel-spark.intel-mid, .intel-bar i.intel-mid{ background: var(--severity-medium); }
.intel-spark.intel-lo, .intel-bar i.intel-lo{ background: var(--severity-low); }
.intel-score.intel-hi{ color: var(--severity-high); }
.intel-score.intel-mid{ color: var(--severity-medium); }
.intel-score.intel-lo{ color: var(--severity-low); }
.detail-open .intel, .cmdk-open .intel{ opacity: 0.25; }

/* --- First-run hint --- */
.hint{
  position: fixed; left: 50%; bottom: 78px; transform: translate(-50%, 8px);
  z-index: 12; display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2-25) var(--sp-2-5) var(--sp-2-25) var(--sp-4); border-radius: var(--r-pill);
  background: var(--surface); backdrop-filter: blur(10px);
  border: 1px solid var(--hairline); box-shadow: 0 8px 26px color-mix(in srgb, var(--mask-opaque) 45%, transparent);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) ease, transform var(--dur-slow) var(--ease-out);
}
.hint.show{ opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hint-text{ font-size: var(--fs-sm); color: var(--ink); }
.hint-text kbd{ margin: 0 var(--sp-px); }
.hint-x{
  border: 0; cursor: pointer; border-radius: var(--r-pill);
  padding: var(--sp-1-25) var(--sp-3); font: 600 var(--fs-xs)/1 var(--font-ui);
  background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ink-strong);
}
.hint-x:hover{ background: color-mix(in srgb, var(--accent) 34%, transparent); }
.ambient .hint{ display: none !important; }

/* --- Watched-set labels (CSS2DRenderer overlay) --- */
.label-layer{
  position: fixed;
  inset: 0;
  z-index: 4;            /* above canvas, below HUD */
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease 0.6s;
}
.ready .label-layer{ opacity: 1; }

.globe-label{
  position: absolute;
  width: 0;              /* zero-size so the anchor sits exactly on the point */
  height: 0;
  will-change: opacity;
  transition: opacity 0.4s ease;
}
.globe-label .dot{
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 4px;
  margin: calc(-1 * var(--sp-0-5)) 0 0 calc(-1 * var(--sp-0-5));
  border-radius: var(--r-round);
  background: var(--accent-pale);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 70%, transparent);
}
.globe-label .txt{
  position: absolute;
  left: 8px; top: -8px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  text-shadow: 0 1px 6px color-mix(in srgb, var(--space-bottom) 95%, transparent), 0 0 2px color-mix(in srgb, var(--space-bottom) 90%, transparent);
}
.globe-label b{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--ink-strong) 95%, transparent);
}
.globe-label i{
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-muted-strong) 85%, transparent);
}
.globe-label .dn{ position: absolute; right: -13px; top: -7px; font-size: 8px; opacity: 0.7; }
/* Minor (tier 2/3 LOD) cities: smaller, quieter, no country line. */
.globe-label.minor b{ font-size: 9.5px; font-weight: 500; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--ink) 80%, transparent); }
.globe-label.minor i{ display: none; }
.globe-label.minor .dot{ width: 3px; height: 3px; opacity: 0.7; }

/* --- Event side panel --- */
.event-panel{
  position: fixed;
  top: 0; right: 0;
  width: min(380px, 92vw);
  height: 100%;
  z-index: 8;
  padding: var(--sp-7) var(--sp-6-5);
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  border-left: 1px solid var(--chrome-border);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  pointer-events: auto;
}
.event-panel.open{ transform: translateX(0); }

.ep-close{
  position: absolute; top: 14px; right: 16px;
  width: 30px; height: 30px;
  border: none; border-radius: var(--r-round);
  background: var(--surface-soft); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.ep-close:hover{ background: var(--surface-soft-hover); }

/* Detail tags mirror the feed card's top row: light type label, dot+label
   status, subtle severity chip, relative time — not heavy bordered pills. */
.ep-tags{ display: flex; gap: var(--sp-2-25); align-items: center; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.ep-type{
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
  color: color-mix(in srgb, var(--c) 88%, var(--ink));
}
.ep-status{
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
}
.ep-status i{ width: 5px; height: 5px; border-radius: var(--r-round); }
.ep-verified{ color: color-mix(in srgb, var(--status-verified) 75%, var(--ink-dim)); }
.ep-verified i{ background: var(--status-verified); box-shadow: 0 0 5px 0 color-mix(in srgb, var(--status-verified) 70%, transparent); }
.ep-reported{ color: color-mix(in srgb, var(--status-reported) 80%, var(--ink-dim)); }
.ep-reported i{ background: var(--status-reported); box-shadow: 0 0 5px 0 color-mix(in srgb, var(--status-reported) 60%, transparent); }
.ep-developing{ color: color-mix(in srgb, var(--status-developing) 80%, var(--ink-dim)); }
.ep-developing i{ background: var(--status-developing); box-shadow: 0 0 5px 0 color-mix(in srgb, var(--status-developing) 70%, transparent); }
.ep-sev{
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c); padding: 1px var(--sp-1-25); border-radius: var(--r-2xs);
  background: color-mix(in srgb, var(--c) 13%, transparent);
}
.ep-when{ margin-left: auto; font-size: 9.5px; color: var(--ink-muted-strong); font-variant-numeric: tabular-nums; }

.ep-headline{ font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: var(--sp-1) 0 var(--sp-2-5); color: var(--ink-bright); }
.ep-summary{ font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 var(--sp-4-75); }
.impact-hero{
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3-5);
  border: 1px solid color-mix(in srgb, var(--c) 34%, var(--chrome-border));
  border-radius: var(--r-card-lg);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 54%),
    linear-gradient(180deg, rgba(18,24,38,0.72), rgba(8,11,19,0.86));
  box-shadow: 0 18px 46px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ib-kicker{
  margin-bottom: var(--sp-2);
  color: color-mix(in srgb, var(--c) 86%, var(--ink-strong));
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
}
.impact-hero .ep-summary{ margin-bottom: var(--sp-3); }
.ib-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); }
.ib-card{
  min-width: 0;
  padding: var(--sp-2-5);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-card) 78%, transparent);
}
.ib-wide{ grid-column: 1 / -1; }
.ib-card > span{
  display: block; margin-bottom: var(--sp-1);
  color: var(--ink-muted); font-size: var(--fs-2xs); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.ib-card p{ margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.ib-assets{ display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Impact Brief — prominent narrative blocks (What happened / Why it matters),
   accent-tinted "why", location footer, and the Rooms CTA. */
.ib-block{ margin: 0 0 var(--sp-2-5); }
.ib-h{
  display: block; margin-bottom: var(--sp-1);
  color: var(--ink-muted); font-size: var(--fs-2xs);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.ib-block > p{ margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.ib-why{
  padding: var(--sp-2-5) var(--sp-3);
  border-left: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.ib-why .ib-h{ color: var(--accent-pale); }
.ib-grid{ margin: var(--sp-1) 0 var(--sp-2-5); }
.ib-loc{ margin-top: var(--sp-2-5); color: var(--ink-muted-strong); font-size: var(--fs-xs); letter-spacing: 0.01em; }
.ib-cta{
  margin-top: var(--sp-2-5); width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--sp-2-5);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--ink-strong); font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer;
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.ib-cta:hover{ background: color-mix(in srgb, var(--accent) 26%, transparent); transform: translateY(-1px); }
.ib-cta:active{ transform: translateY(0); }
.ib-assets span{
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-1-75);
  border: 1px solid color-mix(in srgb, var(--c) 28%, var(--hairline));
  border-radius: var(--r-pill);
  color: var(--ink-strong); background: color-mix(in srgb, var(--c) 9%, transparent);
  font: 700 var(--fs-2xs)/1 var(--font-ui);
}
.ib-assets i{ color: var(--ink-dim); font-style: normal; font-weight: 600; text-transform: uppercase; }
.ib-rail{
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--hairline-faint);
  color: var(--ink-muted-strong);
  font-size: var(--fs-2xs); line-height: var(--lh-normal);
}

.ep-meta{ margin: 0 0 var(--sp-4-75); display: grid; gap: var(--sp-2-5); }
.ep-meta div{ display: flex; justify-content: space-between; gap: var(--sp-3); font-size: 12px; border-bottom: 1px solid var(--hairline-faint); padding-bottom: var(--sp-2); }
.ep-meta dt{ color: var(--ink-dim); margin: 0; }
.ep-meta dd{ color: var(--ink); margin: 0; text-align: right; }
.ep-prec{ color: var(--ink-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.ep-quality{
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-0-5) var(--sp-1-75); border-radius: var(--r-xl);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
.ep-q-strong{ color: var(--status-verified); background: color-mix(in srgb, var(--status-verified) 12%, transparent); }
.ep-q-mixed{ color: var(--status-developing); background: color-mix(in srgb, var(--status-developing) 12%, transparent); }
.ep-q-thin, .ep-q-syndicated{ color: var(--status-reported); background: color-mix(in srgb, var(--status-reported) 12%, transparent); }

.ep-srch{ font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 var(--sp-2); }
.ep-sources{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1-5); }
.ep-sources li{ display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; }
.ep-sources a{ color: var(--accent); text-decoration: none; }
.ep-sources a:hover{ text-decoration: underline; }
.ep-sources .dep{ font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.ep-evidence{
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  background: var(--surface-subtle);
}
.ep-evidence .ep-srch{ margin-bottom: var(--sp-1-5); }
.ep-evidence p{ margin: 0 0 var(--sp-1-5); color: var(--ink-soft); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.ep-evidence span{ display: block; color: var(--ink-dim); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.ep-evidence span + span{ margin-top: var(--sp-1); }
.ep-corrections{
  margin: var(--sp-4) 0;
  padding: var(--sp-3);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  background: var(--surface-subtle);
}
.ep-corrections ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1-5); }
.ep-corrections li{ display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.ep-corrections b{ color: var(--ink-dim); font-weight: 600; }
.ep-corrections span{ color: var(--ink-soft); }
.ep-brief{
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--pro) 22%, var(--hairline-soft));
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pro) 8%, transparent), var(--surface-subtle));
}
.ep-brief p{ margin: 0 0 var(--sp-2); color: var(--ink-dim); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.ep-brief-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.ep-brief-actions button{
  border: 1px solid color-mix(in srgb, var(--pro) 32%, var(--hairline)); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--pro) 12%, transparent); color: var(--pro-light); cursor: pointer;
  padding: var(--sp-2) var(--sp-2-5); font: 700 var(--fs-2xs)/1 var(--font-ui);
}
.ep-brief-actions button:hover{ background: color-mix(in srgb, var(--pro) 20%, transparent); color: var(--ink-strong); }
.ep-brief-status{ display: block; min-height: 14px; margin-top: var(--sp-2); color: var(--ink-dim); font-size: var(--fs-2xs); }

/* --- Market impact (flagship Pro feature) --- */
.mi-h{ display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4-75); }
.mi-pro{ font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--space-top);
  background: linear-gradient(90deg,var(--pro-light),var(--pro)); padding: var(--sp-0-5) var(--sp-1-5); border-radius: var(--r-xs); }
.mi-conf{ margin-left: auto; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: var(--sp-0-5) var(--sp-1-75); border-radius: var(--r-xl); }
.mi-conf-high{ color: var(--status-verified); background: color-mix(in srgb, var(--status-verified) 12%, transparent); }
.mi-conf-medium{ color: var(--status-reported); background: color-mix(in srgb, var(--status-reported) 12%, transparent); }
.mi-conf-low{ color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.mi-list{ list-style: none; margin: 0 0 var(--sp-2-5); padding: 0; display: grid; gap: var(--sp-1-75); }
.mi-row{ display: flex; align-items: flex-start; gap: var(--sp-2-5); padding: var(--sp-2) var(--sp-2-5); border-radius: var(--r-sm);
  background: var(--surface-subtle); border: 1px solid var(--hairline-soft); }
.mi-dir{ flex: none; font-size: 12px; line-height: 1.5; width: 14px; text-align: center; }
.mi-up .mi-dir{ color: var(--market-up); } /* direction only - not good/bad */
.mi-down .mi-dir{ color: var(--market-down); }
.mi-volatile .mi-dir{ color: var(--market-volatile); }
.mi-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.mi-asset{ font-size: 12.5px; font-weight: 600; color: var(--ink-strong); }
.mi-why{ font-size: 11px; line-height: 1.4; color: var(--ink-dim); }
.mi-class{ flex: none; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
  border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: var(--sp-0-5) var(--sp-1-75); align-self: center; }
.mi-disc{ font-size: 10px; line-height: 1.4; color: var(--ink-muted-strong); margin: var(--sp-0-5) 0 var(--sp-1); font-style: italic; }
.mi-spec{ font-size: 11px; color: var(--status-reported); margin: 0 0 var(--sp-1-5); }
/* Measured market observations are visually and semantically separate from inference. */
.mr-wrap{ margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.mr-h{ display: flex; align-items: center; gap: var(--sp-2); }
.mr-state{
  margin-left: auto; padding: var(--sp-0-5) var(--sp-1-75); border-radius: var(--r-pill);
  font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-dim); background: var(--surface-soft);
}
.mr-available{ color: var(--status-verified); background: color-mix(in srgb, var(--status-verified) 13%, transparent); }
.mr-pending{ color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.mr-degraded{ color: var(--severity-high); background: color-mix(in srgb, var(--severity-high) 13%, transparent); }
.mr-empty{
  display: flex; flex-direction: column; gap: var(--sp-1-25); padding: var(--sp-2-5) var(--sp-3);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); background: var(--surface-card);
}
.mr-empty b{ color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 500; }
.mr-empty span{ color: var(--ink-dim); font-size: var(--fs-2xs); line-height: var(--lh-normal); }
.mr-list{ list-style: none; padding: 0; margin: var(--sp-2) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mr-row{ padding: var(--sp-2-5) var(--sp-3); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); background: var(--surface-card); }
.mr-main, .mr-prices, .mr-meta{ display: flex; align-items: center; gap: var(--sp-2); }
.mr-main{ justify-content: space-between; }
.mr-main b{ color: var(--ink-strong); font-size: var(--fs-md); }
.mr-main strong{ font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.mr-up .mr-main strong{ color: var(--market-up); }
.mr-down .mr-main strong{ color: var(--market-down); }
.mr-prices{ margin-top: var(--sp-1-25); color: var(--ink); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.mr-prices i{ color: var(--ink-muted); font-size: var(--fs-2xs); font-style: normal; }
.mr-meta{ margin-top: var(--sp-1-5); flex-wrap: wrap; color: var(--ink-dim); font-size: var(--fs-2xs); }
.mr-meta span + span::before{ content: "·"; margin-right: var(--sp-2); color: var(--ink-muted); }
.mr-source{ margin: var(--sp-2) 0 var(--sp-1); color: var(--ink-dim); font-size: var(--fs-2xs); }
/* locked teaser: blurred signals + unlock CTA */
.mi-lock{ position: relative; }
.mi-lock-blur{ filter: blur(5px); opacity: 0.5; pointer-events: none; user-select: none; }
.mi-unlock{
  position: absolute; inset: 0; margin: auto; height: max-content; align-self: center;
  display: block; width: 100%;
  border: 1px solid color-mix(in srgb, var(--pro) 50%, transparent); border-radius: var(--r-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pro-light) 18%, transparent), color-mix(in srgb, var(--pro) 10%, transparent));
  color: var(--pro-light); cursor: pointer; padding: var(--sp-2-75) var(--sp-3);
  font: 600 12px/1.2 var(--font-ui); letter-spacing: 0.02em;
  box-shadow: 0 6px 18px var(--shadow);
}
.mi-unlock:hover{ background: linear-gradient(180deg, color-mix(in srgb, var(--pro-light) 28%, transparent), color-mix(in srgb, var(--pro) 16%, transparent)); }

/* --- Feed rail: the list view — a contained intelligence panel --- */
.feed{
  position: fixed;
  top: clamp(16px, 4vh, 40px);
  right: clamp(14px, 2vw, 26px);
  width: min(384px, 90vw);
  max-height: min(90vh, 1000px);
  z-index: 7;
  display: flex;
  flex-direction: column;
  padding: var(--sp-2-5) var(--sp-2-5) var(--sp-2);
  border-radius: var(--r-chrome);
  border: 1px solid var(--chrome-border);
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s var(--ease-out);
}
.feed.has-events{ opacity: 1; transform: none; pointer-events: auto; }
/* body-qualified so it outranks body.view-list .feed above */
body.detail-open .feed{ opacity: 0; pointer-events: none; } /* detail slides over */

.feed-head{
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1-5) var(--sp-1-25) var(--sp-2-5);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-2);
}
.feed-collapse{
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: transparent; color: var(--ink-muted);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.feed-collapse svg{ width: 13px; height: 13px; transition: transform var(--dur-med) var(--ease-out); }
.feed-collapse:hover{ background: var(--surface-soft); color: var(--ink-strong); }
/* Collapsed: the rail folds to its head — a slim, clickable reopen handle. */
.feed.collapsed{ cursor: pointer; }
.feed.collapsed .feed-head{ border-bottom: 0; margin-bottom: 0; padding-bottom: var(--sp-1-25); }
.feed.collapsed .feed-filters, .feed.collapsed .feed-list{ display: none; }
.feed.collapsed .feed-collapse svg{ transform: rotate(180deg); }
.feed-live{
  display: inline-flex; align-items: center; gap: var(--sp-1-5);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--status-verified);
}
.feed-pulse{
  width: 6px; height: 6px; border-radius: var(--r-round);
  background: var(--status-verified); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--status-verified) 70%, transparent);
  animation: feedpulse 2.4s ease-in-out infinite;
}
body[data-data-state="demo"] .feed-live{ color: var(--status-reported); }
body[data-data-state="demo"] .feed-pulse{ background: var(--status-reported); box-shadow: none; animation: none; }
body[data-data-state="degraded"] .feed-live{ color: var(--severity-high); }
body[data-data-state="degraded"] .feed-pulse{ background: var(--severity-high); box-shadow: none; animation: none; }
body[data-data-state="connecting"] .feed-live{ color: var(--accent); }
body[data-data-state="connecting"] .feed-pulse{ background: var(--accent); }
@keyframes feedpulse{ 0%,100%{ opacity: 0.45; } 50%{ opacity: 1; } }
.feed-title{
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-strong);
}
.feed-count{
  margin-left: auto;
  min-width: 20px; padding: 1px var(--sp-1-75); border-radius: var(--r-pill);
  background: var(--surface-soft); color: var(--ink-soft);
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center;
}

/* Filter chips: icon + label + count — scannable, with live per-type counts. */
.feed-filters{ display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); padding: 0 var(--sp-0-5); }
.ff-chip{
  display: inline-flex; align-items: center; gap: var(--sp-1-25);
  padding: var(--sp-1-25) var(--sp-2) var(--sp-1-25) var(--sp-1-75); border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid rgba(120,140,180,.14);
  background: rgba(255,255,255,.025);
  color: rgba(176,188,212,.78); font: 600 9.5px/1 var(--font-ui); letter-spacing: 0.03em;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.ff-label{ text-transform: uppercase; letter-spacing: 0.06em; }
.ff-chip svg{ width: 11px; height: 11px; color: rgba(176,188,212,.7); }
.ff-chip:hover{ background: rgba(255,255,255,.05); color: var(--ink-strong); }
.ff-chip[aria-pressed="true"]{
  border-color: rgba(143,182,255,.3);
  background: rgba(143,182,255,.16);
  color: #cfe0ff;
}
.ff-chip[aria-pressed="true"] svg{ color: #cfe0ff; }
.ff-chip.off{ opacity: 0.5; }
.ff-chip.off svg{ color: var(--ink-dim); }
.ff-chip.empty{ opacity: 0.42; }
.ff-n{
  font-style: normal; font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: rgba(176,188,212,.8);
  min-width: 9px; text-align: center;
}
.ff-chip[aria-pressed="true"] .ff-n{ color: #cfe0ff; }
.ff-chip.off .ff-n, .ff-chip.empty .ff-n{ color: var(--ink-dim); }

.feed-list{ overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); padding-right: var(--sp-1); margin-right: calc(-1 * var(--sp-1)); }
/* Thin, themed scrollbars across all panels — quiet, in line with the chrome. */
*{ scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
*::-webkit-scrollbar{ width: 7px; height: 7px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{ background: var(--scrollbar); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(140,160,200,0.4); }
.feed-list::-webkit-scrollbar{ width: 5px; }
.feed-list::-webkit-scrollbar-thumb{ background: var(--scrollbar); border-radius: var(--r-xs); }

/* Production cards: a severity rail, a structured 3-tier body (type + time /
   headline / location + status), and a tactile hover lift. */
.fd-card{
  position: relative;
  display: flex; gap: var(--sp-2); align-items: stretch; text-align: left;
  width: 100%;
  padding: var(--sp-1-75) var(--sp-2) var(--sp-1-75) var(--sp-1-5);
  border: 1px solid transparent;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.fd-card:hover{ background: var(--surface-card); border-color: var(--hairline-soft); transform: translateX(-2px); }
.fd-card.active{
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-card));
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.fd-rail{
  flex: none; width: 3px; border-radius: var(--r-pill); align-self: stretch;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 30%, transparent));
  opacity: 0.6;
  transition: opacity var(--dur-fast) ease;
}
.fd-card[data-sev="critical"] .fd-rail{ opacity: 1; box-shadow: 0 0 9px 0 color-mix(in srgb, var(--c) 60%, transparent); }
.fd-card[data-sev="high"] .fd-rail{ opacity: 0.9; }
.fd-card[data-sev="low"] .fd-rail{ opacity: 0.4; }
.fd-card:hover .fd-rail, .fd-card.active .fd-rail{ opacity: 1; }

/* New event arrives: slide in + a brief highlight sweep. */
@keyframes fdNew{
  0%{ transform: translateX(14px); opacity: 0; }
  60%{ transform: translateX(0); opacity: 1; }
}
@keyframes fdFlash{ 0%{ background: color-mix(in srgb, var(--c) 16%, transparent); } 100%{ background: transparent; } }
.fd-card.fd-new{ animation: fdNew 0.5s var(--ease-out), fdFlash 1.8s ease 0.1s; }

.fd-main{ display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; flex: 1; }
.fd-top{ display: flex; align-items: center; gap: var(--sp-1-75); }
.fd-type{
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 88%, var(--ink));
}
.fd-sev{
  font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c);
  padding: 1px var(--sp-1-25); border-radius: var(--r-2xs);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.fd-time{
  margin-left: auto; flex: none;
  font-size: 9.5px; color: var(--ink-muted-strong); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.fd-title{
  font-size: 12.5px; line-height: 1.34; font-weight: 500;
  color: var(--ink-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fd-foot{ display: flex; align-items: center; gap: var(--sp-2); }
.fd-place{
  display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; flex: 1;
  font-size: 10px; color: var(--ink-dim); letter-spacing: 0.02em;
  overflow: hidden;
}
.fd-place span, .fd-place{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-pin{ flex: none; width: 10px; height: 10px; color: var(--ink-muted); }
.fd-status{
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}
.fd-status i{ width: 5px; height: 5px; border-radius: var(--r-round); }
.fd-verified{ color: color-mix(in srgb, var(--status-verified) 70%, var(--ink-dim)); }
.fd-verified i{ background: var(--status-verified); box-shadow: 0 0 5px 0 color-mix(in srgb, var(--status-verified) 70%, transparent); }
.fd-developing{ color: color-mix(in srgb, var(--status-developing) 75%, var(--ink-dim)); }
.fd-developing i{ background: var(--status-developing); box-shadow: 0 0 5px 0 color-mix(in srgb, var(--status-developing) 70%, transparent); }
.fd-reported{ color: color-mix(in srgb, var(--status-reported) 75%, var(--ink-dim)); }
.fd-reported i{ background: var(--status-reported); box-shadow: 0 0 5px 0 color-mix(in srgb, var(--status-reported) 60%, transparent); }

/* Empty states: calm world, or everything filtered out (with a way back). */
.feed-empty{
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1-5);
  padding: var(--sp-6) var(--sp-3); text-align: center;
}
.feed-empty b{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.feed-empty span{ font-size: var(--fs-xs); color: var(--ink-dim); }
.fe-reset{
  margin-top: var(--sp-1);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-pale);
  font: 600 11px/1 var(--font-ui); padding: var(--sp-2) var(--sp-3-5); cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.fe-reset:hover{ background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* Detail panel: back button replaces the close × */
.ep-back{
  border: none; cursor: pointer;
  color: var(--ink-dim); font-size: 12px; letter-spacing: 0.04em;
  display: inline-flex; align-items: center;
  padding: var(--sp-1-75) var(--sp-3); margin: 0 0 var(--sp-3) calc(-1 * var(--sp-2));
  border-radius: var(--r-lg);
  background: var(--surface-subtle);
  transition: background 0.2s ease, color 0.2s ease;
}
.ep-back:hover{ color: var(--ink); background: var(--surface-soft-hover); }

/* --- Review queue (top-left; only when REVIEW_MODE + items held) --- */
.review{
  position: fixed;
  top: clamp(16px, 4vh, 40px);
  left: clamp(14px, 2vw, 26px);
  width: min(330px, 86vw);
  max-height: 70vh; overflow-y: auto;
  z-index: 9;
  display: flex; flex-direction: column; gap: var(--sp-2);
  opacity: 0; transform: translateX(-8px); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.review.open{ opacity: 1; transform: none; pointer-events: auto; }
.rv-head{
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--status-reported) 95%, transparent);
  padding-bottom: var(--sp-1-5); border-bottom: 1px solid color-mix(in srgb, var(--status-reported) 20%, transparent);
}
.rv-dot{ width: 7px; height: 7px; border-radius: var(--r-round); background: var(--status-reported); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--status-reported) 70%, transparent); animation: feedpulse 2.2s ease-in-out infinite; }
.rv-n{ margin-left: auto; color: var(--ink-dim); }
.rv-card{
  border: 1px solid color-mix(in srgb, var(--status-reported) 20%, transparent); border-left-width: 3px;
  border-radius: var(--r-card-lg); padding: var(--sp-2-75) var(--sp-3);
  background: var(--surface-review); backdrop-filter: blur(8px);
}
.rv-card.rv-hold{ border-left-color: var(--status-reported); }
.rv-card.rv-approve{ border-left-color: var(--status-verified); }
.rv-title{ font-size: 13px; line-height: 1.3; color: var(--ink-strong); }
.rv-meta{ font-size: 10px; color: var(--ink-dim); margin-top: 4px; text-transform: capitalize; }
.rv-rec{ font-size: 11px; color: var(--ink-soft); margin: var(--sp-2) 0; line-height: 1.4; }
.rv-rec b{ text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.rv-actions{ display: flex; gap: var(--sp-2); }
.rv-actions button{
  flex: 1; padding: var(--sp-1-75) 0; border-radius: var(--r-sm); cursor: pointer; border: none;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.rv-approve{ background: color-mix(in srgb, var(--status-verified) 16%, transparent); color: var(--status-verified); }
.rv-approve:hover{ background: color-mix(in srgb, var(--status-verified) 28%, transparent); }
.rv-reject{ background: color-mix(in srgb, var(--severity-critical) 14%, transparent); color: var(--severity-high); }
.rv-reject:hover{ background: color-mix(in srgb, var(--severity-critical) 26%, transparent); }

/* --- Headline cards on hover/select (anchored to the in-scene pings) --- */
.news-layer{ position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.nc-leaders{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nc-line{ stroke: color-mix(in srgb, var(--c, var(--ink-dim)) 45%, var(--hairline)); stroke-width: 1; }

/* the headline card (shown only when a ping is hovered or selected) */
.ncard{
  position: absolute; top: 0; left: 0;
  width: 188px; min-height: 56px;
  padding: var(--sp-2) var(--sp-2-5);
  border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--c) 26%, var(--hairline));
  border-left: 3px solid var(--c);
  background: var(--surface-card-solid);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px var(--shadow-deep);
  text-align: left; cursor: pointer; pointer-events: auto;
  opacity: 0; transform-origin: left center;
  transition: opacity 0.16s ease;
  z-index: 4;
}
.ncard.on{ opacity: 1; animation: ncIn 0.16s ease both; }
@keyframes ncIn{ from{ opacity: 0; } to{ opacity: 1; } }
.nc-crow{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); }
.nc-csrc{ font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted-strong);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nc-head{ font-size: 12px; line-height: 1.32; color: var(--ink-strong);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc-stars{ font-size: 9px; letter-spacing: 0.5px; flex: none; margin-left: 6px; }
.nc-verified{ color: var(--status-verified); } .nc-reported{ color: var(--status-reported); } .nc-developing{ color: var(--status-developing); }

.ambient .news-layer{ opacity: 0 !important; pointer-events: none !important; }

/* --- Personalized briefing --- */
.digest-pill{
  position: fixed;
  top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 7;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1-75) var(--sp-4); border-radius: var(--r-xl); cursor: pointer;
  border: 1px solid var(--hairline);
  background: var(--surface-card); backdrop-filter: blur(6px);
  color: var(--ink); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.55; transition: opacity 0.3s ease, background 0.3s ease;
}
.digest-pill:hover{ opacity: 1; background: var(--surface-hover); }
.dg-spark{ width: 6px; height: 6px; border-radius: var(--r-round); background: var(--accent); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--accent) 70%, transparent); }

.digest-card{
  position: fixed;
  top: 56px; left: 50%; transform: translate(-50%, -8px);
  z-index: 8;
  width: min(440px, 92vw);
  padding: var(--sp-5-5) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surface-overlay), var(--surface-solid));
  backdrop-filter: blur(10px);
  color: var(--ink);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.digest-card.open{ opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dg-close{
  position: absolute; top: 12px; right: 14px;
  width: 28px; height: 28px; border: none; border-radius: var(--r-round);
  background: var(--surface-soft); color: var(--ink); font-size: 17px; cursor: pointer;
}
.dg-close:hover{ background: var(--surface-soft-hover); }
.digest-card h3{
  margin: 0 0 var(--sp-3-5); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-strong) 95%, transparent);
}
.dg-body{ font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.dg-live{
  white-space: pre-line; margin-bottom: var(--sp-3); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline-faint);
}
.dg-stats{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2-5); }
.dg-stat{
  padding: var(--sp-2); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-card);
}
.dg-stat b{ display: block; color: var(--ink-strong); font-size: 18px; letter-spacing: -0.03em; }
.dg-stat .dg-lab{ display: block; margin-top: var(--sp-0-5); color: var(--ink-soft); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; }
.dg-stat .dg-lab i{ display: block; margin-top: 2px; color: var(--ink-dim); font-size: var(--fs-2xs); font-style: normal; text-transform: none; letter-spacing: 0; }
.dg-note{ margin: 0 0 var(--sp-2); color: var(--accent-pale); font-size: var(--fs-xs); }
.dg-events{ display: grid; gap: var(--sp-1-5); }
.dg-event{
  width: 100%; text-align: left; border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-card); color: var(--ink); cursor: pointer; padding: var(--sp-2);
}
.dg-event:hover{ background: var(--surface-hover); }
.dg-event b{ display: block; color: var(--ink-strong); font-size: var(--fs-xs); line-height: 1.3; }
.dg-event span, .dg-event i{ display: block; margin-top: var(--sp-0-5); color: var(--ink-dim); font-size: var(--fs-2xs); font-style: normal; }
.dg-empty{
  padding: var(--sp-3); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-card); color: var(--ink-dim); text-align: center; font-size: var(--fs-xs);
}
.dg-foot{ margin-top: var(--sp-4); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }

/* --- Keyboard focus (a11y) --- */
.fd-card:focus-visible,
.ep-back:focus-visible,
.ep-close:focus-visible,
.scrub-time:focus-visible,
.ep-sources a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--focus) 75%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.scrubber input[type="range"]:focus-visible{ outline: 2px solid color-mix(in srgb, var(--focus) 60%, transparent); outline-offset: 4px; }

/* --- Narrow screens: feed becomes a bottom sheet, panel full-width --- */
@media (max-width: 640px){
  .feed{
    top: auto; bottom: 86px; left: 12px; right: 12px;
    width: auto; max-height: 38vh;
  }
  .event-panel{
    top: auto; bottom: 0; width: 100vw; height: min(86vh, 760px);
    border-left: 0; border-top: 1px solid var(--chrome-border);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%);
    padding: var(--sp-5) var(--sp-4) max(var(--sp-5), env(safe-area-inset-bottom));
  }
  .event-panel.open{ transform: translateY(0); }
  .ib-grid{ grid-template-columns: 1fr; }
  .ep-corrections li{ grid-template-columns: 1fr; }
  .scrubber{ width: calc(100vw - 24px); bottom: 10px; }
  .hud{ left: 14px; bottom: 60px; }
  .watchlist{ top: auto; bottom: 54px; z-index: 12; }
  .wl-panel{ width: 100vw; max-height: 76vh; border-left: 1px solid var(--hairline); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .watchlist.open{ left: 0; right: 0; bottom: 0; }
  .asset-lens{ top: auto; bottom: 130px; z-index: 12; }
  .asset-lens.open{ left: 0; right: 0; bottom: 0; }
  .ax-panel{ width: 100vw; max-height: 78vh; border-left: 1px solid var(--hairline); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .ax-field-row, .ax-metrics{ grid-template-columns: 1fr; }
  .alerts{
    left: 10px; right: 10px; bottom: calc(152px + env(safe-area-inset-bottom));
    width: auto;
  }
  .alert{ padding: var(--sp-2) var(--sp-2-25); }
  .al-actions{ display: none; }
  .alert-center{ top: auto; bottom: 92px; z-index: 12; }
  .alert-center.open{ left: 0; right: 0; bottom: 0; }
  .ac-panel{ width: 100vw; max-height: 76vh; border-left: 1px solid var(--hairline); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .ac-row{ grid-template-columns: 1fr; }
}

/* --- Boot indicator: a single slow breath, then fades out --- */
.boot{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  background: radial-gradient(120% 120% at 50% 18%, var(--space-top) 0%, var(--space-bottom) 70%);
  transition: opacity 1.2s ease;
}
.ready .boot{ opacity: 0; pointer-events: none; }

.boot-dot{
  width: 9px;
  height: 9px;
  border-radius: var(--r-round);
  background: var(--accent-strong);
  box-shadow: 0 0 24px 6px color-mix(in srgb, var(--accent-strong) 45%, transparent);
  animation: breathe 2.6s ease-in-out infinite;
}
/* Branded boot: logo + wordmark + a sweeping load bar. */
.boot-card{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.boot-logo{
  width: 46px; height: 46px; color: var(--accent-pale);
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 45%, transparent));
  animation: bootSpin 9s linear infinite, breathe 2.8s ease-in-out infinite;
}
@keyframes bootSpin{ from{ transform: rotateY(0); } to{ transform: rotateY(360deg); } }
.boot-word{ display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.boot-word b{ font-size: 17px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-bright); }
.boot-word i{ font-style: normal; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-dim); margin-top: 4px; }
.boot-bar{ position: relative; width: 120px; height: 2px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-soft); }
.boot-bar span{
  position: absolute; left: -40%; top: 0; height: 100%; width: 40%;
  border-radius: var(--r-pill); background: linear-gradient(90deg, transparent, var(--accent-pale), transparent);
  animation: bootSweep 1.4s ease-in-out infinite;
}
@keyframes bootSweep{ 0%{ left: -45%; } 100%{ left: 100%; } }
@keyframes breathe{
  0%,100%{ transform: scale(0.7); opacity: 0.45; }
  50%    { transform: scale(1.0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .boot-dot{ animation: none; }
  .boot-logo{ animation: none; }
  .boot-bar span{ animation: none; left: 0; width: 100%; opacity: 0.5; }
}

/* --- Left tool dock: one instrument cluster instead of four pills ---------
   Lives at the END of the stylesheet so its overrides outrank the adopted
   modules' own positioning rules (including their mobile variants). */
.dock{
  position: fixed; left: clamp(10px, 1.4vw, 18px); top: 50%; transform: translateY(-50%);
  z-index: 10;
  display: flex; flex-direction: column; gap: var(--sp-0-5);
  width: 148px;
  padding: var(--sp-2);
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel-top) 84%, transparent), color-mix(in srgb, var(--surface-panel-bottom) 90%, transparent)),
    radial-gradient(120px 160px at 20% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
  opacity: 0; transition: opacity 0.6s ease;
}
.ready .dock{ opacity: 1; }
.ambient .dock{ opacity: 0 !important; pointer-events: none !important; }
.dock-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-1) var(--sp-1-25) var(--sp-1-5);
  border-bottom: 1px solid var(--hairline-faint);
  margin-bottom: var(--sp-1);
}
.dock-head span{
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.dock-head b{
  font-size: 8px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-pale);
  padding: var(--sp-0-5) var(--sp-1);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Adopted modules: neutralize their own fixed positioning. */
.dock .watchlist, .dock .alert-center, .dock .asset-lens, .dock .intel{
  position: relative; left: auto; top: auto; bottom: auto; transform: none; z-index: auto;
}

/* Unified icon tabs. */
.dock .wl-tab, .dock .ac-tab, .dock .ax-tab, .dock .intel-tab{
  position: relative; width: 100%; min-height: 38px; padding: 0 var(--sp-2);
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; backdrop-filter: none; box-shadow: none;
  color: var(--ink-dim);
  text-align: left;
}
.ready .dock .wl-tab, .ready .dock .ac-tab, .ready .dock .ax-tab{ opacity: 1; }
.dock .wl-tab:hover, .dock .ac-tab:hover, .dock .ax-tab:hover, .dock .intel-tab:hover{
  background: var(--surface-soft); color: var(--ink-strong);
  border-color: var(--hairline-soft);
}
.dock .wl-tab[aria-expanded="true"],
.dock .ac-tab[aria-expanded="true"],
.dock .ax-tab[aria-expanded="true"],
.dock .intel-tab[aria-expanded="true"]{
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--ink-strong);
}
.dock .wl-tab svg, .dock .ac-tab svg, .dock .ax-tab svg, .dock .intel-tab svg{ width: 15px; height: 15px; }
.dock .intel-glyph{ font-size: 12px; color: currentColor; }
.dock .wl-tab > span, .dock .ac-tab > span, .dock .ax-tab > span,
.dock .intel-tab .intel-tab-label{
  display: block;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: inherit;
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.03em;
}

/* Badges become corner counters (dock.js hides them at zero). They sit just
   outside the icon's top-right with a ring so they read as a count, not part
   of the glyph — and never overlap the dock's rounded corners. */
.dock .wl-badge, .dock .ac-badge, .dock .ax-badge, .dock .intel-badge{
  position: static;
  min-width: 18px; height: 18px; padding: 0 var(--sp-1-25); border-radius: var(--r-pill);
  font-size: 9px; line-height: 18px; font-weight: 750; text-align: center;
  box-shadow: none;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}

/* Panels fly out to the right of the dock. */
.dock .wl-panel, .dock .ac-panel, .dock .ax-panel{
  position: absolute; left: calc(100% + 12px); top: 0;
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
}
/* Intel swaps its own root into a panel when open; float it beside the dock. */
.dock .intel.open{
  position: absolute; left: calc(100% + 12px); top: 0; transform: none;
}

@media (max-width: 640px){
  .dock{
    top: auto; left: 12px; right: 12px; bottom: 52px; transform: none;
    width: auto;
    flex-direction: row;
    align-items: stretch;
    gap: var(--sp-0-5);
    padding: var(--sp-1);
    border-radius: var(--r-chrome);
    backdrop-filter: none;
  }
  .dock-head{ display: none; }
  .dock .watchlist, .dock .alert-center, .dock .asset-lens, .dock .intel{ flex: 1 1 0; min-width: 0; }
  .dock .wl-tab, .dock .ac-tab, .dock .ax-tab, .dock .intel-tab{
    min-height: 48px;
    grid-template-columns: 1fr;
    grid-template-rows: 16px 12px;
    justify-items: center;
    align-content: center;
    gap: var(--sp-0-5);
    padding: var(--sp-1) var(--sp-0-5);
    text-align: center;
  }
  .dock .wl-tab svg, .dock .ac-tab svg, .dock .ax-tab svg, .dock .intel-tab svg{ width: 15px; height: 15px; }
  .dock .intel-glyph{ font-size: 12px; }
  .dock .wl-tab > span, .dock .ac-tab > span, .dock .ax-tab > span,
  .dock .intel-tab .intel-tab-label{ font-size: 8.5px; letter-spacing: 0.02em; max-width: 100%; }
  .dock .wl-badge, .dock .ac-badge, .dock .ax-badge, .dock .intel-badge{
    position: absolute; top: -5px; right: 7px;
    min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; font-size: 8px;
    background: var(--surface-solid);
    box-shadow: 0 0 0 1px var(--surface-panel-top);
  }
  .dock .wl-panel, .dock .ac-panel, .dock .ax-panel{
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100vw;
    max-height: 78vh; overflow-y: auto;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }
  .dock .intel.open{ position: fixed; left: 10px; right: 10px; top: auto; bottom: 78px; }
}

/* --- Feed-led hub: tab strip + the four modules relocated inline ----------
   Placed late so these overrides outrank each module's own flyout positioning. */
.feed-tabs{
  display: flex; flex-wrap: nowrap; align-items: center; gap: 2px;
  flex: 0 0 auto; /* never let the column-flex feed compress the tab row (long event
                     lists were squashing it, clipping the selected highlight to a sliver) */
  padding: var(--sp-0-75) var(--sp-0-5) var(--sp-1);
  border-bottom: 1px solid var(--hairline-faint); margin-bottom: var(--sp-1);
  overflow: hidden;
}
.feed-tabs::-webkit-scrollbar{ display: none; }
.feed-tab{
  flex: 1 1 auto; min-width: 0; padding: var(--sp-1) var(--sp-0-75); border: 0; background: transparent;
  color: var(--ink-dim); font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.01em;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  /* No transition: selection must apply instantly. A bg/color fade interpolates in oklab and
     freezes at the start value when the feed first paints hidden (globe view) — which left the
     default tab's fill and the Rooms tab's text stuck looking half-highlighted. */
}
.feed-tab:hover{ color: var(--ink-strong); background: rgba(255,255,255,.05); }
.feed-tab[aria-selected="true"]{ color: #f3f6fc; background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.feed-tab .ft-pro{
  font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 3px; border-radius: 4px; color: #1a1206;
  background: linear-gradient(135deg, var(--pro), var(--pro-light));
}

/* Search row: search field + a Filters disclosure button (progressive disclosure). */
.feed-searchrow{ display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-0-5) var(--sp-1) var(--sp-1-5); }
.feed-search{ flex: 1 1 auto; min-width: 0; padding: 0; }
.feed-search input{
  width: 100%; padding: var(--sp-2) var(--sp-2-5);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface-subtle); color: var(--ink); font: 400 var(--fs-sm)/1.2 var(--font-ui);
}
.feed-search input:focus{ outline: none; border-color: var(--accent); background: var(--surface-soft); }
.feed-search input::placeholder{ color: var(--ink-muted); }
.feed-filterbtn{
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface-subtle); color: var(--ink-soft);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.feed-filterbtn svg{ width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; }
.feed-filterbtn:hover{ color: var(--ink-strong); background: var(--surface-soft); }
.feed-filterbtn.on{ color: #cfe0ff; border-color: rgba(143,182,255,.3); background: rgba(143,182,255,.16); }
.feed-filterbtn .ffb-n{
  position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px; padding: 0 3px;
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font: 700 9px/1 var(--font-ui); border-radius: 7px;
  background: var(--accent); color: #06101f;
}
.feed-filterbtn .ffb-n[hidden]{ display: none; } /* honour the hidden attr at 0 active filters */
.feed-filterpanel{ padding: 0 var(--sp-0-5) var(--sp-1); }
.feed-filterpanel[hidden]{ display: none; }
.feed-scope{ display: flex; flex-wrap: wrap; gap: 4px; padding: var(--sp-1) var(--sp-1) var(--sp-0-5); }
.sc-chip{ padding: 3px 9px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: transparent; color: var(--ink-dim); font: 600 10px/1 var(--font-ui); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.sc-chip:hover{ color: var(--ink-strong); }
.sc-chip.on{ color: #cfe0ff; border-color: rgba(143,182,255,.3);
  background: rgba(143,182,255,.16); }
.feed-cluster{ display: flex; align-items: center; gap: 6px; padding: var(--sp-1-5) var(--sp-1) var(--sp-0-75);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(176,188,212,.62); }
.feed-cluster:first-child{ padding-top: var(--sp-0-5); }
.feed-cluster i{ font-style: normal; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
/* Pop-out lives at the top-right of the active module panel (not in the tab strip). */
.feed-pop{ position: absolute; top: 0; right: 0; z-index: 2; display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 9px 0 8px; border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface-subtle); color: var(--ink-soft); cursor: pointer;
  font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.01em; white-space: nowrap; }
.feed-pop svg{ width: 13px; height: 13px; }
.feed-pop:hover{ background: var(--surface-soft); color: var(--ink-strong); border-color: rgba(120,140,180,0.32); }
.feed-pop[hidden]{ display: none; }
.fm-popout{ position: fixed; z-index: 31; width: 344px; height: 460px; flex: none;
  display: flex; flex-direction: column;
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-shadow);
  overflow: hidden; resize: both; min-width: 252px; min-height: 188px; max-width: 92vw; max-height: 88vh; }
.fmp-head{ flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2-5) var(--sp-3);
  border-bottom: 1px solid var(--hairline-faint); background: var(--surface-panel-top);
  cursor: grab; touch-action: none; user-select: none; }
.fmp-head:active{ cursor: grabbing; }
.fmp-head .fmp-title{ display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.fmp-head .fmp-live{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent, #6ea8ff); flex: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent, #6ea8ff) 22%, transparent); }
.fmp-head span.fmp-name{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fmp-x{ width: 24px; height: 24px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-dim); cursor: pointer; flex: none; }
.fmp-x:hover{ background: var(--surface-soft); color: var(--ink-strong); }
.fmp-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--sp-2) var(--sp-2) var(--sp-3); }
/* The mirror is a read-only reflection — the live module stays interactive in the feed. */
.fmp-body .fm-mod{ position: static !important; pointer-events: none; }
.fm-popout::after{ content: ""; position: absolute; right: 2px; bottom: 2px; width: 11px; height: 11px; pointer-events: none;
  background:
    linear-gradient(135deg, transparent 46%, var(--ink-dim) 46%, var(--ink-dim) 54%, transparent 54%),
    linear-gradient(135deg, transparent 70%, var(--ink-dim) 70%, var(--ink-dim) 78%, transparent 78%);
  opacity: .5; }

/* Breaking-event toast (top-center) */
.breaking-toast{
  position: fixed; top: 66px; left: 50%; transform: translate(-50%, -8px); z-index: 35;
  display: flex; align-items: center; gap: var(--sp-2); max-width: min(560px, 78vw);
  padding: var(--sp-1-5) var(--sp-2) var(--sp-1-5) var(--sp-3); opacity: 0;
  border: 1px solid var(--chrome-border); border-radius: var(--r-pill);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-shadow);
  color: var(--ink-soft); font-size: var(--fs-sm);
  transition: opacity var(--dur-med) ease, transform var(--dur-med) ease;
}
.breaking-toast[hidden]{ display: none; }
.breaking-toast.in{ opacity: 1; transform: translate(-50%, 0); }
.breaking-toast .bt-dot{ flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--severity-high)); box-shadow: 0 0 8px var(--c, var(--severity-high)); }
.bt-label{ font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c, var(--severity-high)); }
.bt-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-strong); }
.bt-view{ flex: none; padding: 4px 10px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: color-mix(in srgb, var(--c, var(--accent)) 24%, transparent); color: var(--ink-strong);
  font: 600 var(--fs-xs)/1 var(--font-ui); }
.bt-view:hover{ background: color-mix(in srgb, var(--c, var(--accent)) 36%, transparent); }
.bt-x{ flex: none; width: 22px; height: 22px; border: 0; border-radius: var(--r-sm); cursor: pointer; background: transparent; color: var(--ink-dim); font-size: 12px; }
.bt-x:hover{ background: var(--surface-soft); color: var(--ink-strong); }
.tp-pro{ cursor: pointer; }
.tp-pro .tp-lock{ margin-left: auto; font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 5px; color: #1a1206; background: linear-gradient(135deg, var(--pro), var(--pro-light)); }
.feed-events{ display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.feed-modules{ position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--sp-1) var(--sp-2); }
.feed-events[hidden], .feed-modules[hidden]{ display: none !important; }
.feed-modules .intel, .feed-modules .watchlist, .feed-modules .alert-center, .feed-modules .asset-lens{
  position: static !important; left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important; transform: none !important;
  width: 100% !important; max-width: none !important; z-index: auto !important;
  display: none; opacity: 1 !important;
}
.feed-modules .fm-active{ display: block !important; }
.feed-modules .wl-tab, .feed-modules .ac-tab, .feed-modules .ax-tab, .feed-modules .intel-tab,
.feed-modules .wl-close, .feed-modules .ac-close, .feed-modules .ax-close, .feed-modules .intel-close{
  display: none !important;
}
.feed-modules .wl-panel, .feed-modules .ac-panel, .feed-modules .ax-panel{
  position: static !important; inset: auto !important; transform: none !important;
  width: 100% !important; max-width: none !important; max-height: none !important;
  min-width: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; backdrop-filter: none !important; padding: var(--sp-1) 0 0 !important;
}

/* --- Go Pro: gold chip + upgrade modal --------------------------------- */
.go-pro{
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 12;
  padding: 7px 16px; border: 1px solid color-mix(in srgb, var(--pro) 50%, transparent);
  border-radius: var(--r-pill); cursor: pointer; backdrop-filter: var(--chrome-blur);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pro) 24%, transparent), color-mix(in srgb, var(--pro-light) 16%, transparent));
  color: var(--pro-light); font: 600 var(--fs-sm)/1 var(--font-ui);
}
.go-pro:hover{ filter: brightness(1.12); }
.go-pro[hidden]{ display: none; }
.pro-modal{ position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(4,6,12,0.66); backdrop-filter: blur(6px); }
.pro-modal[hidden]{ display: none; }
.pro-card{
  position: relative;
  display: grid; grid-template-columns: 1.2fr 1fr; width: min(760px, 92vw); max-height: 88vh;
  border: 1px solid var(--chrome-border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-shadow); color: var(--ink);
}
.pro-left{ padding: var(--sp-6-5); }
.pro-badge{ display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #1a1206; padding: 3px 9px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--pro), var(--pro-light)); }
.pro-h{ margin: var(--sp-3) 0 var(--sp-2); font-size: 26px; line-height: 1.15; font-weight: 600; color: var(--ink-bright); letter-spacing: -0.01em; }
.pro-sub{ margin: 0 0 var(--sp-4); color: var(--ink-soft); font-size: var(--fs-md); line-height: 1.5; }
.pro-benefits{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2-5); }
.pro-benefits li{ display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.4; }
.pb-check{ flex: none; width: 18px; height: 18px; display: grid; place-items: center; color: var(--status-verified); }
.pb-check svg{ width: 13px; height: 13px; }
.pro-social{ margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-muted-strong); font-size: var(--fs-xs); }
.pro-avatars{ width: 56px; height: 18px; border-radius: var(--r-pill); opacity: 0.85;
  background: linear-gradient(90deg, #8ab8ff, #6be0c8, #ffd27a, #c792ea); }
.pro-right{ padding: var(--sp-6-5); border-left: 1px solid var(--hairline); background: rgba(8,11,19,0.4); display: flex; flex-direction: column; justify-content: center; }
.pro-right-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.pro-right-head b{ font-size: var(--fs-md); color: var(--ink-strong); }
.pro-x{ position: absolute; top: 14px; right: 14px; z-index: 2; width: 26px; height: 26px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-dim); cursor: pointer; font-size: 14px; }
.pro-x:hover{ background: var(--surface-soft); color: var(--ink-strong); }
.pro-toggle{ display: flex; gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--surface-soft); margin-bottom: var(--sp-4); }
.pro-toggle button{ flex: 1; padding: var(--sp-2); border: 0; border-radius: var(--r-xs); background: transparent; color: var(--ink-dim); font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer; }
.pro-toggle button.on{ background: var(--surface-active); color: var(--ink-strong); }
.pro-price{ margin-bottom: var(--sp-4); }
.pp-amt{ font-size: 40px; font-weight: 700; color: var(--ink-bright); }
.pp-per{ font-size: var(--fs-md); color: var(--ink-muted-strong); margin-left: 4px; }
.pp-note{ margin-top: 4px; color: var(--pro-light); font-size: var(--fs-xs); font-weight: 600; }
.pro-cta{ width: 100%; padding: var(--sp-3); border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: linear-gradient(135deg, var(--pro), var(--pro-light)); color: #1a1206; font: 700 var(--fs-md)/1 var(--font-ui); }
.pro-cta:hover{ filter: brightness(1.05); }
.pp-fine{ margin-top: var(--sp-2); text-align: center; color: var(--ink-muted-strong); font-size: var(--fs-2xs); }
.pro-secure{ margin-top: var(--sp-3); display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-muted-strong); font-size: var(--fs-2xs); }
.pro-secure svg{ width: 12px; height: 12px; }
@media (max-width: 600px){ .pro-card{ grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; } }

/* --- First-run personalization ("make it your world") --- */
.ob-root{ position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--sp-4);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.ob-root.show{ opacity: 1; pointer-events: auto; }
.ob-backdrop{ position: absolute; inset: 0; background: rgba(4,7,13,0.62); backdrop-filter: blur(6px); }
.ob-modal{ position: relative; width: min(620px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  border: 1px solid var(--chrome-border); border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--surface-overlay), var(--surface-solid));
  backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-shadow);
  transform: translateY(8px) scale(0.99); transition: transform 0.34s cubic-bezier(0.22,1,0.36,1); }
.ob-root.show .ob-modal{ transform: none; }
.ob-head{ padding: var(--sp-5-5) var(--sp-5-5) var(--sp-3); }
.ob-kicker{ display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: #1a1206; padding: 3px 9px; border-radius: var(--r-pill); background: linear-gradient(135deg, var(--pro), var(--pro-light)); }
.ob-head h2{ margin: var(--sp-2-5) 0 var(--sp-1-5); font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-bright); }
.ob-head p{ margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); max-width: 52ch; }
.ob-body{ padding: var(--sp-1) var(--sp-5-5) var(--sp-2); overflow-y: auto; }
.ob-group{ margin-top: var(--sp-3-5); }
.ob-group h3{ margin: 0 0 var(--sp-2); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.ob-chips{ display: flex; flex-wrap: wrap; gap: var(--sp-1-5); }
.ob-chip{ padding: var(--sp-1-5) var(--sp-2-5); border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid rgba(120,140,180,.18); background: rgba(255,255,255,.025);
  color: var(--ink-soft); font: 600 var(--fs-xs)/1 var(--font-ui);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.ob-chip:hover{ background: rgba(255,255,255,.06); color: var(--ink-strong); }
.ob-chip.on{ background: rgba(143,182,255,.18); border-color: rgba(143,182,255,.4); color: #e6efff; }
.ob-foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5-5) var(--sp-4); border-top: 1px solid var(--hairline-faint); }
.ob-skip{ border: 0; background: transparent; color: var(--ink-muted-strong); font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer; padding: var(--sp-2); }
.ob-skip:hover{ color: var(--ink-strong); }
.ob-go{ display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-2-5) var(--sp-4); border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-active); color: var(--ink-strong); font: 700 var(--fs-sm)/1 var(--font-ui);
  transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }
.ob-go.ready{ background: linear-gradient(135deg, var(--pro), var(--pro-light)); color: #1a1206; }
.ob-go:hover{ transform: translateY(-1px); }
.ob-go b{ font-variant-numeric: tabular-nums; }
@media (max-width: 600px){ .ob-modal{ max-height: 92vh; } .ob-head h2{ font-size: 21px; } }

/* --- Rooms: draggable subscriber chat widget --------------------------- */
.rooms{
  position: fixed; left: 16px; top: 64px; z-index: 30; width: 320px; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-shadow); color: var(--ink);
}
.rooms[hidden]{ display: none; }
.rm-head{ display: flex; align-items: center; justify-content: space-between; padding: var(--sp-2-5) var(--sp-3);
  border-bottom: 1px solid var(--hairline-faint); cursor: grab; touch-action: none; user-select: none; }
.rm-title{ display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); font-weight: 600; color: var(--ink-strong); }
.rm-pro{ font-size: 8px; font-weight: 700; letter-spacing: 0.06em; padding: 2px 6px; border-radius: 5px; color: #1a1206; background: linear-gradient(135deg, var(--pro), var(--pro-light)); }
.rm-x{ width: 26px; height: 26px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-dim); cursor: pointer; }
.rm-x:hover{ background: var(--surface-soft); color: var(--ink-strong); }
.rm-tabs{ display: flex; gap: 4px; padding: var(--sp-2) var(--sp-3); }
.rm-tab{ flex: 1; padding: var(--sp-1-5); border: 0; border-radius: var(--r-xs); background: var(--surface-soft); color: var(--ink-dim); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; }
.rm-tab.on{ background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink-strong); }
.rm-stream{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2-5); }
.rm-msg{ display: flex; gap: var(--sp-2); }
.rm-av{ flex: none; width: 26px; height: 26px; border-radius: var(--r-round); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--ink-strong); background: var(--surface-active); }
.rm-body{ min-width: 0; }
.rm-meta{ display: flex; align-items: center; gap: 6px; }
.rm-meta b{ font-size: var(--fs-xs); color: var(--ink-strong); }
.rm-flag{ font-size: 8px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-dim); border: 1px solid var(--hairline); border-radius: 3px; padding: 0 3px; }
.rm-meta time{ font-size: var(--fs-2xs); color: var(--ink-muted); }
.rm-body p{ margin: 2px 0 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); }
.rm-typing{ display: flex; align-items: center; gap: 4px; color: var(--ink-muted); font-size: var(--fs-2xs); }
.rm-typing span{ width: 4px; height: 4px; border-radius: 50%; background: var(--ink-muted); animation: rmType 1s infinite; }
.rm-typing span:nth-child(2){ animation-delay: 0.15s; }
.rm-typing span:nth-child(3){ animation-delay: 0.3s; }
@keyframes rmType{ 0%, 60%, 100%{ opacity: 0.3; } 30%{ opacity: 1; } }
.rm-form{ display: flex; gap: var(--sp-2); padding: var(--sp-2-5) var(--sp-3); border-top: 1px solid var(--hairline-faint); }
.rm-input{ flex: 1; padding: var(--sp-2); border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--surface-subtle); color: var(--ink); font-size: var(--fs-sm); }
.rm-input:focus{ outline: none; border-color: var(--accent); }
.rm-send{ width: 34px; border: 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-strong); cursor: pointer; font-size: 15px; }
.rm-lock{ padding: var(--sp-3); border-top: 1px solid var(--hairline-faint); text-align: center; }
.rm-lock-row{ color: var(--ink-muted-strong); font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.rm-unlock{ width: 100%; padding: var(--sp-2-5); border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: linear-gradient(135deg, var(--pro), var(--pro-light)); color: #1a1206; font: 700 var(--fs-sm)/1 var(--font-ui); }
@media (max-width: 600px){ .rooms{ left: 8px; right: 8px; width: auto; } }

/* Rooms adopted inline into the feed hub: strip the floating chrome, keep the column. */
.feed-modules .rooms{
  position: static !important; inset: auto !important; transform: none !important;
  width: 100% !important; max-width: none !important; max-height: none !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; backdrop-filter: none !important;
  display: none;
}
.feed-modules .rooms.fm-active{ display: flex !important; flex-direction: column; }
.feed-modules .rooms .rm-head{ cursor: default; padding-left: 0; padding-right: 0; }
.feed-modules .rooms .rm-x{ display: none !important; }
.feed-modules .rooms .rm-tabs{ padding-left: 0; padding-right: 0; }
.feed-modules .rooms .rm-stream{ padding-left: 0; padding-right: 0; }
.feed-modules .rooms .rm-form{ padding-left: 0; padding-right: 0; }

/* Go Pro gate shown to non-subscribers in the Rooms tab. */
.rm-gate{ display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); padding: var(--sp-6) var(--sp-3) var(--sp-5); }
.rm-gate-ic{ width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  color: var(--pro-light); border: 1px solid color-mix(in srgb, var(--pro) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pro) 18%, transparent), color-mix(in srgb, var(--pro-light) 10%, transparent)); }
.rm-gate-ic svg{ width: 24px; height: 24px; }
.rm-gate h4{ margin: var(--sp-1) 0 0; font: 600 var(--fs-md)/1.2 var(--font-ui); color: var(--ink-strong); }
.rm-gate p{ margin: 0; max-width: 32ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }
.rm-gate .rm-unlock{ width: auto; margin-top: var(--sp-1); padding: 9px 22px; border-radius: var(--r-pill); }
.rm-gate-note{ font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--ink-muted); }

/* --- Country panel: click a country → signals, reference, blocs, markets --- */
.country-panel{
  position: fixed; top: 0; right: 0;
  width: min(380px, 92vw); height: 100%;
  z-index: 8;
  padding: var(--sp-7) var(--sp-6-5);
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  border-left: 1px solid var(--chrome-border);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
  overflow-y: auto;
}
.country-panel.open{ transform: translateX(0); }
body.country-open .feed{ opacity: 0; pointer-events: none; }

.cp-head{ display: flex; align-items: baseline; gap: var(--sp-2-5); margin: var(--sp-1) 0 var(--sp-4); }
.cp-name{ margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-strong); }
.cp-cc{
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--ink-dim); border: 1px solid var(--hairline); border-radius: var(--r-xs);
  padding: var(--sp-0-5) var(--sp-1-5);
}
.cp-count{
  margin-left: var(--sp-1-5); font-variant-numeric: tabular-nums;
  color: var(--ink-muted-strong); text-transform: none; letter-spacing: 0;
}
.cp-events{ display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-4-75); }
.cp-event{
  display: flex; align-items: flex-start; gap: var(--sp-2-5); width: 100%; text-align: left;
  padding: var(--sp-2-5); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-subtle); color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.cp-event:hover{ background: var(--surface-soft); }
.cp-ev-dot{ flex: none; width: 6px; height: 6px; margin-top: 5px; border-radius: var(--r-round); background: var(--c); }
.cp-ev-text{ display: flex; flex-direction: column; gap: var(--sp-0-75); min-width: 0; }
.cp-ev-text b{ font-size: var(--fs-sm); font-weight: 500; color: var(--ink-soft); line-height: 1.35; }
.cp-ev-text span{ font-size: var(--fs-2xs); color: var(--ink-dim); text-transform: capitalize; }
.cp-none{
  padding: var(--sp-3); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-subtle); color: var(--ink-dim); font-size: var(--fs-xs); text-align: center;
}
.cp-noref{ margin-top: var(--sp-2); }
.cp-meta{ margin-bottom: var(--sp-4); }
.cp-est{ font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted-strong); margin-left: var(--sp-1); }
.cp-blocs{ display: flex; flex-wrap: wrap; gap: var(--sp-1-5); margin-bottom: var(--sp-4); }
.cp-bloc{
  font-size: 10px; letter-spacing: 0.05em; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-2-25); background: var(--surface-subtle);
}
.cp-markets{ list-style: none; margin: 0 0 var(--sp-2-5); padding: 0; display: grid; gap: var(--sp-1-5); }
.cp-mkt{
  display: flex; align-items: center; gap: var(--sp-2-5); width: 100%; text-align: left;
  padding: var(--sp-2) var(--sp-2-5); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-subtle); color: var(--ink); cursor: default;
}
.cp-mkt b{ flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); min-width: 52px; }
.cp-mkt span{ flex: 1; font-size: var(--fs-2xs); color: var(--ink-dim); }
.cp-mkt i{ flex: none; font-style: normal; font-size: var(--fs-2xs); color: var(--accent); }
.cp-mkt.linkable{ cursor: pointer; transition: background var(--dur-fast) ease; }
.cp-mkt.linkable:hover{ background: var(--surface-soft); }
.cp-asof{ font-size: 10px; line-height: 1.4; color: var(--ink-muted-strong); font-style: italic; margin: 0 0 var(--sp-4); }
.ambient .country-panel{ opacity: 0 !important; pointer-events: none !important; }
.cp-back:focus-visible, .cp-event:focus-visible, .cp-mkt:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--focus) 75%, transparent);
  outline-offset: 2px;
}
@media (max-width: 640px){ .country-panel{ width: 100vw; } }

/* --- Movable widgets: grips + drag state --- */
.draggable-grip{ cursor: grab; }
.dragging, .dragging .draggable-grip{ cursor: grabbing !important; }
.dragging{ opacity: 0.88; transition: none !important; }

/* --- Top control panel: one slim glass bar for view + layers + actions --- */
.toolbar{
  position: fixed; z-index: 9;
  top: clamp(12px, 2.6vh, 24px); left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-0-5);
  padding: var(--sp-1);
  border: 1px solid var(--chrome-border); border-radius: var(--r-pill);
  background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
  opacity: 0; transition: opacity 0.6s ease;
}
.ready .toolbar{ opacity: 1; }
/* The control toolbar stays put even in ambient/idle mode — it should never vanish. */
.ambient .toolbar{ opacity: 1; pointer-events: auto; }
.tb-sep{ width: 1px; height: 18px; margin: 0 var(--sp-1); background: var(--hairline); }
.tb-btn{
  position: relative; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-dim); cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.tb-btn svg{ width: 15px; height: 15px; }
.tb-btn:hover{ background: var(--surface-soft); color: var(--ink-strong); }
.tb-btn[aria-pressed="true"],
.tb-btn[aria-expanded="true"]{
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--ink-bright);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
              0 0 12px -2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.tb-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--focus) 75%, transparent);
  outline-offset: 2px;
}
/* Markets popover: per-exchange sessions, local times, fly-to */
.tb-n{
  position: absolute; top: 2px; right: 2px;
  min-width: 13px; padding: 0 3px; border-radius: var(--r-pill);
  background: color-mix(in srgb, #6fe6c8 20%, transparent); color: #6fe6c8;
  font: 700 8px/13px var(--font-ui); font-style: normal; text-align: center;
}
.tb-pop{
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 264px; max-height: min(60vh, 480px); overflow-y: auto;
  padding: var(--sp-2-5);
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
  cursor: default;
}
.tb-legend{ width: 240px; }
.lg-row{ display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1); font-size: var(--fs-xs); color: var(--ink-soft); }
.lg-dot{ flex: none; width: 9px; height: 9px; border-radius: var(--r-round); }
.lg-head2{ margin-top: var(--sp-2); }
.tb-layers{ width: 248px; }
.tp-switch .tb-kbd{ margin-left: auto; font: 600 8px/1 var(--font-ui); color: var(--ink-muted);
  border: 1px solid var(--hairline); border-radius: 4px; padding: 2px 5px; }
.ly-theme{ display: flex; gap: 4px; padding: 4px; border-radius: var(--r-sm); background: var(--surface-soft); }
.ly-theme button{ flex: 1; padding: var(--sp-1-5); border: 0; border-radius: var(--r-xs); background: transparent;
  color: var(--ink-dim); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer; }
.ly-theme button.on{ background: var(--surface-active); color: var(--ink-strong); }

/* Watchlist "places you follow" rows */
.wl-list .wl-row{ display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1-5) var(--sp-1); border-radius: var(--r-sm); }
.wl-list .wl-row:hover{ background: var(--surface-subtle); }
.wl-fdot{ flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); }
.wl-fdot.wl-live{ background: var(--status-verified); box-shadow: 0 0 6px var(--status-verified); }
.wl-fdot.wl-watch{ background: var(--status-reported); }
.wl-rmain{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wl-rmain b{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-rmain span{ font-size: var(--fs-2xs); color: var(--ink-muted); }
.wl-fstatus{ flex: none; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--r-pill); }
.wl-fstatus.wl-live{ color: var(--status-verified); background: color-mix(in srgb, var(--status-verified) 16%, transparent); }
.wl-fstatus.wl-watch{ color: var(--status-reported); background: color-mix(in srgb, var(--status-reported) 16%, transparent); }
.wl-fstatus.wl-calm{ color: var(--ink-dim); background: var(--surface-soft); }
.wl-rx{ flex: none; width: 22px; height: 22px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-dim); cursor: pointer; }
.wl-rx:hover{ background: var(--surface-soft); color: var(--ink-strong); }
.tp-head{ display: flex; align-items: baseline; justify-content: space-between; padding: var(--sp-1) var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-1-5); }
.tp-head b{ font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-strong); }
.tp-head span{ font-size: var(--fs-2xs); color: #6fe6c8; }
.tp-sec{ font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin: var(--sp-2) var(--sp-1) var(--sp-1); }
.tp-row{
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  padding: var(--sp-1-5) var(--sp-1-75); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.tp-row:hover{ background: var(--surface-soft); }
.tp-dot{ flex: none; width: 6px; height: 6px; border-radius: var(--r-round); background: var(--ink-muted); }
.tp-dot.on{ background: #6fe6c8; box-shadow: 0 0 6px 0 color-mix(in srgb, #6fe6c8 70%, transparent); }
.tp-row b{ font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); }
.tp-city{ flex: 1; font-size: var(--fs-2xs); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-time{ flex: none; font-size: var(--fs-2xs); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.tp-switch{
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1-5) var(--sp-1-75); border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.tp-switch:hover{ background: var(--surface-soft); }
/* The markers toggle in Markets follows a session row — give just that one a divider. */
.tp-row + .tp-switch{ margin-top: var(--sp-1); border-top: 1px solid var(--hairline-faint); padding-top: var(--sp-2); border-radius: 0; }
.tp-note{ padding: 0 var(--sp-1-75) var(--sp-1); font-size: 9.5px; line-height: 1.4; color: var(--ink-muted-strong); font-style: italic; }

/* Live crypto chip (BTC/ETH · Coinbase spot · session change) */
.tb-crypto{ display: inline-flex; align-items: center; gap: var(--sp-0-5); }
.tb-coin{
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-1-25);
  height: 32px; padding: 0 var(--sp-2-25);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-dim); cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.tb-coin:hover{ background: var(--surface-soft); }
.tb-coin:focus-visible{ outline: 2px solid color-mix(in srgb, var(--focus) 75%, transparent); outline-offset: 2px; }
.tb-coin b{ font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-dim); }
.tb-px{ font: 600 11px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.tb-dx{ font: 600 9px/1 var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums; }
.tb-dx.up{ color: var(--market-up); }
.tb-dx.down{ color: var(--market-down); }

/* Instant styled tooltips (native title is slow and unthemed). */
.tb-btn[data-tip]::after,
.tb-coin[data-tip]::after{
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-2px);
  padding: var(--sp-1-25) var(--sp-2-25);
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface-overlay); color: var(--ink-soft);
  font: 500 10px/1.2 var(--font-ui); letter-spacing: 0.03em; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.tb-btn[data-tip]:hover::after, .tb-btn[data-tip]:focus-visible::after,
.tb-coin[data-tip]:hover::after, .tb-coin[data-tip]:focus-visible::after{
  opacity: 1; transform: translateX(-50%) translateY(0);
}
/* The adopted Globe/List switch: neutralize its standalone fixed positioning. */
.toolbar .view-toggle{
  position: static; top: auto; right: auto;
  padding: 0; border: 0; background: none; backdrop-filter: none; box-shadow: none;
  opacity: 1;
}
@media (max-width: 640px){
  .toolbar{
    top: 8px; left: 8px; right: 8px; transform: none;
    width: calc(100vw - 16px);
    max-width: none;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    border-radius: var(--r-chrome);
  }
  .toolbar .tb-sep{ display: none; }
  .toolbar .tb-btn{ width: 30px; height: 30px; }
  .toolbar .vt-btn span{ display: none; }
  .toolbar .tb-crypto{ flex: 1 1 100%; justify-content: center; min-width: 0; }
  .toolbar .tb-coin{
    flex: 1 1 0; min-width: 0; max-width: 168px; height: 28px;
    justify-content: center; padding: 0 var(--sp-1-5);
  }
  .toolbar .tb-px{ max-width: 56px; overflow: hidden; text-overflow: ellipsis; }
  .tb-pop{ position: fixed; top: 104px; left: 8px; right: 8px; transform: none; width: auto; }
  .tb-btn[data-tip]::after, .tb-coin[data-tip]::after{ display: none; }
  .digest-pill{ top: 92px; }
  .digest-card{ top: 124px; }
}

/* --- First-run onboarding --------------------------------------------- */
.onb{ position: fixed; inset: 0; z-index: 60; opacity: 0; transition: opacity var(--dur-med) ease; }
.onb.onb-in{ opacity: 1; }
.onb.onb-out{ opacity: 0; }
.onb-scrim{ position: absolute; inset: 0; background: color-mix(in srgb, var(--space-bottom) 55%, transparent); backdrop-filter: blur(1.5px); }
.onb-ring{
  position: absolute; border-radius: var(--r-chrome); pointer-events: none;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent),
              0 0 0 9999px color-mix(in srgb, var(--space-bottom) 0%, transparent);
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px;
  transition: all var(--dur-med) var(--ease-out);
}
.onb-card{
  position: absolute; width: min(308px, 86vw);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow);
}
.onb-center{ left: 50%; top: 50%; transform: translate(-50%, -50%); }
.onb-card:not(.onb-still){ animation: onbFloat 0.5s var(--ease-out) both; }
@keyframes onbFloat{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; } }
.onb-center.onb-card:not(.onb-still){ animation: onbFloatC 0.5s var(--ease-out) both; }
@keyframes onbFloatC{ from{ opacity: 0; transform: translate(-50%, calc(-50% + 8px)); } to{ opacity: 1; transform: translate(-50%, -50%); } }
.onb-step{ font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: var(--sp-2); }
.onb-card h3{ margin: 0 0 var(--sp-1-5); font-size: var(--fs-lg); font-weight: 600; color: var(--ink-bright); letter-spacing: -0.01em; }
.onb-card p{ margin: 0 0 var(--sp-3-5); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-soft); }
.onb-actions{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.onb-skip{ border: 0; background: none; color: var(--ink-dim); font: 500 var(--fs-xs)/1 var(--font-ui); cursor: pointer; padding: var(--sp-1-5); }
.onb-skip:hover{ color: var(--ink); }
.onb-next{
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink-bright);
  font: 600 var(--fs-xs)/1 var(--font-ui); padding: var(--sp-2) var(--sp-4); cursor: pointer;
  transition: background var(--dur-fast) ease;
}
.onb-next:hover{ background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* --- Settings panel ---------------------------------------------------- */
.settings-pop{
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 252px; padding: var(--sp-3);
  border: 1px solid var(--chrome-border); border-radius: var(--r-chrome);
  background: var(--chrome-bg); backdrop-filter: var(--chrome-blur);
  box-shadow: var(--chrome-shadow); cursor: default;
}
.set-head{ font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-strong); padding: 0 var(--sp-0-5) var(--sp-2); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-2-5); }
.set-group{ margin-bottom: var(--sp-3); }
.set-label{ font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-1-5); }
.set-seg{ display: flex; gap: var(--sp-0-5); padding: var(--sp-0-5); background: var(--surface-subtle); border-radius: var(--r-sm); }
.set-seg button{
  flex: 1; border: 0; border-radius: var(--r-xs); cursor: pointer;
  background: transparent; color: var(--ink-dim);
  font: 600 10px/1 var(--font-ui); letter-spacing: 0.03em; padding: var(--sp-1-75) 0;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.set-seg button[aria-pressed="true"]{ background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink-bright); }
.set-swatches{ display: flex; gap: var(--sp-2); }
.set-swatch{ width: 22px; height: 22px; border-radius: var(--r-round); border: 2px solid transparent; cursor: pointer; padding: 0; }
.set-swatch[aria-pressed="true"]{ border-color: var(--ink-soft); }
.set-reset-row{ margin-bottom: var(--sp-2); }
.set-reset{
  width: 100%; padding: var(--sp-2) 0;
  border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  background: var(--surface-subtle); color: var(--ink-soft);
  font: 600 10.5px/1 var(--font-ui); letter-spacing: 0.03em; cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.set-reset:hover{ background: var(--surface-soft); color: var(--ink-strong); }
.set-reset:disabled{ cursor: default; color: var(--status-verified); }
.set-note{ font-size: 9.5px; color: var(--ink-muted-strong); line-height: 1.4; margin-top: var(--sp-2); }

/* Compact density: tighten the feed cards. */
body.density-compact .fd-card{ padding: var(--sp-1-5) var(--sp-2) var(--sp-1-5) var(--sp-1-75); }
body.density-compact .fd-main{ gap: var(--sp-1); }
body.density-compact .fd-title{ -webkit-line-clamp: 1; }
body.density-compact .feed-list{ gap: var(--sp-0-5); }

/* Polished empty state (calm world). */
.feed-empty{ }
.fe-logo{ width: 30px; height: 30px; color: var(--ink-muted); margin-bottom: var(--sp-2); opacity: 0.7; }

/* ---- Daily ritual: visit streak chip + briefing "new since last visit" badge ---- */
.streak-chip{ display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px 0 7px;
  margin-left: 2px; border-radius: 999px; color: #ffb968; white-space: nowrap; user-select: none;
  background: rgba(255,160,80,0.10); border: 1px solid rgba(255,160,80,0.22); font-weight: 600; }
.streak-chip svg{ width: 13px; height: 13px; }
.streak-chip .streak-n{ font-size: 12px; font-weight: 700; color: var(--ink-strong, #eef2f8); }
.streak-chip.streak-up{ animation: streakPop 1.7s cubic-bezier(0.22,1,0.36,1); }
@keyframes streakPop{ 0%{ transform: scale(1); } 16%{ transform: scale(1.2); background: rgba(255,160,80,0.24);
  box-shadow: 0 0 16px rgba(255,160,80,0.4); } 100%{ transform: scale(1); } }
.tb-badge{ position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--pro, #ffcf6b); color: #1a1206; font-size: 9px; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--chrome-bg, #0b0f17); pointer-events: none; }
/* Per-watch severity control on each watchlist row */
.wl-rsev{ flex: none; height: 24px; padding: 0 3px; border-radius: var(--r-sm, 6px); cursor: pointer;
  background: var(--surface-soft, rgba(255,255,255,0.05)); color: var(--ink-soft, #aeb6c4);
  border: 1px solid var(--hairline-soft, rgba(140,160,200,0.18)); font-size: 11px; }
.wl-rsev:hover{ color: var(--ink-strong, #eef2f8); }

/* ---- Briefing streak banner + clearer sections ---- */
.dg-streak{ display: flex; align-items: center; gap: var(--sp-1-5); margin-bottom: var(--sp-2-5);
  padding: var(--sp-1-5) var(--sp-2); border-radius: var(--r-sm); color: #ffb968; font-weight: 600;
  background: rgba(255,160,80,0.08); border: 1px solid rgba(255,160,80,0.18); font-size: var(--fs-xs); }
.dg-streak svg{ width: 14px; height: 14px; flex: none; }
.dg-streak span{ color: var(--ink-soft); font-weight: 600; }
.dg-sub{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-dim); margin: var(--sp-0-5) 0 var(--sp-1); }

/* ---- Streak chip label (toolbar) ---- */
.streak-label{ font-size: 10px; font-weight: 600; color: var(--ink-soft, #aeb6c4);
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  max-width: 0; margin-left: -4px; opacity: 0; overflow: hidden;
  transition: max-width 0.25s var(--ease-out, ease), opacity 0.2s ease, margin-left 0.25s ease; }
.streak-chip:hover .streak-label, .streak-chip:focus-visible .streak-label{ max-width: 88px; margin-left: 0; opacity: 1; }

/* ---- Read / unread event cards ---- */
.fd-unread{ width: 6px; height: 6px; border-radius: 50%; flex: none; align-self: center;
  background: var(--accent, #6ea8ff); box-shadow: 0 0 6px color-mix(in oklab, var(--accent, #6ea8ff) 60%, transparent); }
.fd-card.fd-read .fd-title{ color: var(--ink-soft, #aeb6c4); opacity: 0.72; }
.fd-card.fd-read .fd-type, .fd-card.fd-read .fd-place{ opacity: 0.7; }
.fd-card.fd-read .fd-rail{ opacity: 0.4; }

/* ---- Watchlist relevance cues (feed cards + Impact Brief) ---- */
.fd-watch{ font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent-pale); padding: 2px 6px; border-radius: var(--r-pill); white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.fd-card.fd-matched .fd-rail{ width: 3px;
  background: linear-gradient(180deg, var(--accent-pale), color-mix(in srgb, var(--accent) 40%, transparent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 45%, transparent); }

.ib-watch{ margin: var(--sp-2) 0 var(--sp-2-5); padding: var(--sp-2) var(--sp-2-5); border-radius: var(--r-md, 10px);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.ibw-h{ display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-pale); }
.ibw-dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent-pale);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent); }
.ibw-chips{ display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1-5); }
.ibw-chip{ font-size: var(--fs-2xs); color: var(--ink-strong); padding: 2px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.05); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); }
.ibw-why{ margin: var(--sp-1-5) 0 0; font-size: var(--fs-xs); color: var(--ink-soft); }

/* ---- Onboarding quick-start personas ---- */
.ob-personas{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1-5); padding: 0 var(--sp-5-5) var(--sp-1); }
.ob-pq{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); margin-right: var(--sp-1); }
.ob-persona{ padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-pale);
  font: 600 var(--fs-xs)/1 var(--font-ui); transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.ob-persona:hover{ background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ob-persona.on{ background: var(--accent); color: #0a1020; border-color: var(--accent); }

/* ---- Demo / illustrative data labels (trust hygiene) ---- */
.demo-tag{ margin: 0 0 var(--sp-2); padding: var(--sp-1-5) var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.02em;
  color: #aeb8ca; background: rgba(150,165,195,0.08); border: 1px dashed rgba(150,165,195,0.34); }
.demo-chip{ display: inline-flex; align-items: center; padding: 1px 6px; border-radius: var(--r-pill);
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle;
  color: #aeb8ca; background: rgba(150,165,195,0.12); border: 1px dashed rgba(150,165,195,0.34); }
.ft-head .demo-chip{ margin-left: auto; }

/* ---- Agent "Your brief": verify + summarize output in the Impact Brief ---- */
.ib-agent{ background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md, 10px); padding: var(--sp-2) var(--sp-2-5); }
.ib-auto{ font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-dim);
  border: 1px solid var(--hairline-soft); border-radius: var(--r-pill); padding: 1px 6px; margin-left: var(--sp-1); }
.ib-agent-text{ margin: var(--sp-1-5) 0 var(--sp-2); color: var(--ink-strong); line-height: 1.55; }
.ib-verify{ display: flex; align-items: center; gap: var(--sp-1-5); flex-wrap: wrap; }
.vchip{ font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-pill); }
.v-verified{ color: #8ef0b0; background: rgba(80,220,140,0.12); border: 1px solid rgba(80,220,140,0.34); }
.v-developing{ color: #ffd9a0; background: rgba(255,180,90,0.12); border: 1px solid rgba(255,180,90,0.34); }
.v-reported{ color: #c8d2e4; background: rgba(160,180,210,0.10); border: 1px solid rgba(160,180,210,0.28); }
.ib-verify-why{ font-size: var(--fs-2xs); color: var(--ink-dim); }

/* ---- Alert tuning: mute controls + muted list ---- */
.ac-row .ac-mutebtn{ color: var(--ink-dim); }
.ac-row .ac-mutebtn:hover{ color: var(--ink-strong); }
.ac-muted{ margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--hairline-faint); }
.ac-unmute{ display: inline-flex; align-items: center; gap: 4px; margin: 0 var(--sp-1) var(--sp-1) 0;
  padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-2xs); cursor: pointer;
  background: var(--surface-soft); color: var(--ink-soft); border: 1px solid var(--hairline-soft); }
.ac-unmute:hover{ color: var(--ink-strong); background: var(--surface-hover); }
.ac-row .ac-impact{ display: block; margin-top: var(--sp-0-5); color: var(--ink-soft); line-height: 1.45; }
.ac-row .vchip{ margin-right: 4px; }

/* ---- Weekly value recap (briefing) ---- */
.dg-recap{ margin: 0 0 var(--sp-2-5); padding: var(--sp-2) var(--sp-2-5); border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.dg-recap-h{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent-pale); font-weight: 700; }
.dg-recap p{ margin: var(--sp-1) 0 0; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.5; }
.dg-recap b{ color: var(--ink-strong); }

/* ---- Pro plan comparison (Free / Plus / Pro) ---- */
.pp-compare-link{ display: block; width: 100%; margin-top: var(--sp-2); background: none; border: 0; cursor: pointer;
  color: var(--accent-pale); font-size: var(--fs-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pp-compare-link:hover{ color: var(--ink-bright); }
.pp-compare-card{ display: block !important; padding: var(--sp-4); max-width: 560px; }
.pp-compare-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.pp-compare-head b{ font-size: var(--fs-md, 15px); color: var(--ink-bright); }
.pp-back{ background: none; border: 0; color: var(--ink-soft); cursor: pointer; font-size: var(--fs-sm); }
.pp-back:hover{ color: var(--ink-strong); }
.pp-table-wrap{ overflow-x: auto; }
.pp-table{ width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.pp-table th, .pp-table td{ padding: var(--sp-1-5) var(--sp-2); text-align: center; border-bottom: 1px solid var(--hairline-faint); }
.pp-table tbody th{ text-align: left; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.pp-tname{ display: block; font-weight: 700; color: var(--ink-bright); }
.pp-tprice{ display: block; font-size: var(--fs-2xs); color: var(--ink-dim); margin-top: 2px; }
.pp-yes{ color: #8ef0b0; display: inline-flex; }
.pp-yes svg{ width: 13px; height: 13px; }
.pp-no{ color: var(--ink-dim); }
.pp-txt{ color: var(--ink-soft); font-size: var(--fs-2xs); }
.pp-table tfoot td{ border-bottom: 0; padding-top: var(--sp-2-5); }
.pp-pick{ width: 100%; padding: var(--sp-1-5) var(--sp-1); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-2xs); font-weight: 700;
  background: var(--surface-soft); color: var(--ink-strong); border: 1px solid var(--hairline-soft); }
.pp-pick.pp-primary{ background: linear-gradient(135deg, var(--pro), var(--pro-light)); color: #1a1206; border-color: transparent; }
.pp-pick.pp-ghost{ background: none; color: var(--ink-dim); }
.pp-pick:hover{ filter: brightness(1.08); }
.pp-fineprint{ margin: var(--sp-3) 0 0; font-size: var(--fs-2xs); color: var(--ink-dim); text-align: center; }

/* ---- Mobile pass for the feed-hub era (overrides older 640px rules) ---- */
@media (max-width: 640px){
  /* The feed hub becomes a tall scrollable sheet below the toolbar */
  .feed{
    top: 96px; bottom: 12px; left: 8px; right: 8px;
    width: auto; max-height: none; height: auto;
    padding: var(--sp-2) var(--sp-2) var(--sp-1-5);
  }
  .feed.collapsed{ top: auto; bottom: 12px; height: auto; }
  /* Tabs scroll horizontally instead of squashing */
  .feed-tabs{ overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .feed-tabs::-webkit-scrollbar{ display: none; }
  .feed-tab{ white-space: nowrap; }
  /* Market cards single-column on the narrowest screens */
  .mk{ grid-template-columns: 1fr; }
  /* Pop-out floats span the screen and don't need manual resize on touch */
  .fm-popout{ left: 8px !important; right: 8px; width: auto !important; max-width: none;
    top: 96px; height: auto; max-height: 70vh; resize: none; }
  /* New surfaces fit the viewport */
  .ob-personas{ padding: 0 var(--sp-4) var(--sp-1); }
  .pp-compare-card{ max-width: 96vw; }
  .digest-card{ left: 8px; right: 8px; width: auto; max-width: none; }
}
@media (max-width: 400px){
  .toolbar .streak-chip{ display: none; }   /* reclaim space on the smallest screens */
}

/* ---- Alert hierarchy: clamp the richer agent summaries, keep header/verdict clear ---- */
.al-impact{ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--ink-soft); line-height: 1.4; margin-top: var(--sp-1); }
.ac-row .ac-impact{ display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ac-row b{ color: var(--ink-bright); }
.ac-row .vchip{ font-size: 8px; padding: 1px 6px; }

/* "More like this" alert action */
.ac-row .ac-morebtn{ color: var(--accent-pale); }
.ac-row .ac-morebtn:hover{ color: var(--ink-bright); }

/* ---- Empty + skeleton loading states for new modules ---- */
.ft-empty, .mk-empty{ padding: var(--sp-3); text-align: center; color: var(--ink-dim); font-size: var(--fs-xs); }
.sk{ display: block; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-soft) 25%, var(--surface-hover) 37%, var(--surface-soft) 63%);
  background-size: 400% 100%; animation: skShimmer 1.4s ease infinite; }
@keyframes skShimmer{ 0%{ background-position: 100% 0; } 100%{ background-position: -100% 0; } }
.ft-skel{ pointer-events: none; }
.ft-skel .sk-rank{ width: 14px; height: 14px; flex: none; }
.ft-skel .sk-line{ flex: 1; height: 12px; }
.ft-skel .sk-pill{ width: 46px; height: 14px; flex: none; }
.mk-skel{ pointer-events: none; }
.mk-skel .sk-h{ width: 52%; height: 12px; margin-bottom: var(--sp-2); }
.mk-skel .sk-row{ height: 11px; margin: var(--sp-1-5) 0; }
@media (prefers-reduced-motion: reduce){ .sk{ animation: none; } }

/* ---- Severity filter (Layers menu) ---- */
.ly-sev{ display: flex; gap: var(--sp-0-5); margin: var(--sp-1) 0 var(--sp-2); }
.ly-sevbtn{ flex: 1; padding: var(--sp-1) var(--sp-0-5); border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap;
  background: var(--surface-soft); color: var(--ink-soft); border: 1px solid var(--hairline-soft);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.ly-sevbtn:hover{ color: var(--ink-strong); }
.ly-sevbtn.on{ background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink-bright);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* ---- Rooms: ungated "Preview" badges, honest notice, your-message style ---- */
.feed-tab .ft-preview{ font-style: normal; font-size: 7px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 4px; border-radius: 4px; color: var(--ink-soft);
  background: rgba(150,165,195,0.16); border: 1px solid rgba(150,165,195,0.30); }
.rm-preview{ font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; color: var(--ink-soft);
  background: rgba(150,165,195,0.14); border: 1px solid rgba(150,165,195,0.30); }
.rm-note{ margin: 0 0 var(--sp-2); padding: var(--sp-1-5) var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-2xs); color: var(--ink-dim);
  background: rgba(150,165,195,0.07); border: 1px dashed rgba(150,165,195,0.26); }
.rm-mine .rm-body p{ display: inline-block; margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm); color: var(--ink-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* ---- Rooms sign-in gate (Google / Gmail) + account row ---- */
.rm-signin{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-1-5); margin: var(--sp-2) 0 var(--sp-1); }
.gsi-demo{ display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-2-5) var(--sp-4); border-radius: var(--r-pill); cursor: pointer;
  background: #fff; color: #1f2430; font-weight: 600; font-size: var(--fs-sm);
  border: 1px solid rgba(0,0,0,0.14); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.gsi-demo:hover{ filter: brightness(0.96); }
.gsi-note{ font-size: var(--fs-2xs); color: var(--ink-dim); text-align: center; max-width: 230px; line-height: 1.4; }
.rm-acct{ padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--hairline-faint); font-size: var(--fs-2xs); color: var(--ink-dim); }
.rm-signout{ background: none; border: 0; color: var(--accent-pale); cursor: pointer; font-size: var(--fs-2xs); padding: 0; }
.rm-signout:hover{ text-decoration: underline; }

/* ---- Rooms country picker (search + your places + happening + A–Z) ---- */
.rm-pick{ display: flex; flex-direction: column; gap: var(--sp-1-5); padding: var(--sp-1) var(--sp-1) var(--sp-2);
  overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.rm-pick-search{ width: 100%; padding: var(--sp-2); border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface-subtle); color: var(--ink); font-size: var(--fs-sm); }
.rm-pick-search:focus{ outline: none; border-color: var(--accent); }
.rm-pick-sec{ font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-dim); margin-top: var(--sp-1); }
.rm-pick-chips{ display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.rm-cc{ padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-xs); white-space: nowrap;
  background: var(--surface-soft); color: var(--ink-soft); border: 1px solid var(--hairline-soft);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.rm-cc:hover{ color: var(--ink-strong); background: var(--surface-hover); }
.rm-pick-list{ display: flex; flex-direction: column; gap: 1px; }
.rm-cc-row{ width: 100%; text-align: left; border-radius: var(--r-xs); border-color: transparent; background: transparent; }
.rm-cc-row:hover{ background: var(--surface-soft); border-color: var(--hairline-soft); }
.rm-change{ align-self: flex-start; margin: var(--sp-1) 0 0 var(--sp-1); padding: 0;
  background: none; border: 0; color: var(--accent-pale); cursor: pointer; font-size: var(--fs-2xs); }
.rm-change:hover{ text-decoration: underline; }

/* Country panel → Rooms CTA spacing */
.cp-rooms{ width: 100%; margin: var(--sp-1) 0 var(--sp-2); }

/* ---- Account chip (toolbar) + popover ---- */
.acct-chip{ display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px 0 6px; margin-left: 2px;
  border-radius: 999px; cursor: pointer; color: var(--ink-soft); white-space: nowrap;
  background: var(--surface-soft); border: 1px solid var(--hairline-soft); font-weight: 600; }
.acct-chip:hover{ color: var(--ink-strong); }
.acct-chip svg{ width: 14px; height: 14px; }
.acct-av{ width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.acct-name{ font-size: 12px; }
.acct-pop{ position: fixed; z-index: 40; min-width: 220px; max-width: 282px; padding: var(--sp-3);
  border-radius: var(--r-chrome); border: 1px solid var(--chrome-border); background: var(--chrome-bg);
  backdrop-filter: var(--chrome-blur); box-shadow: var(--chrome-shadow); }
.acct-title{ font-weight: 600; color: var(--ink-strong); margin-bottom: var(--sp-2); }
.acct-who{ display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2-5); }
.acct-who b{ display: block; color: var(--ink-strong); font-size: var(--fs-sm); }
.acct-who span{ font-size: var(--fs-2xs); color: var(--ink-dim); word-break: break-all; }
.acct-signin{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-1-5); }
.acct-note{ margin: var(--sp-2) 0 0; font-size: var(--fs-2xs); color: var(--ink-dim); line-height: 1.4; }
.acct-signout{ width: 100%; padding: var(--sp-2); border-radius: var(--r-sm); cursor: pointer;
  background: var(--surface-soft); color: var(--ink-strong); border: 1px solid var(--hairline-soft); font-weight: 600; }
.acct-signout:hover{ background: var(--surface-hover); }

/* ---- Per-tab discovery cue ---- */
.feed-cue{ display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 0 var(--sp-2);
  padding: var(--sp-1-5) var(--sp-2); border-radius: var(--r-sm); line-height: 1.45;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: var(--fs-2xs); color: var(--ink-soft); }
.feed-cue span{ flex: 1; }
.feed-cue-x{ flex: none; background: none; border: 0; color: var(--ink-dim); cursor: pointer; font-size: 11px; padding: 0; }
.feed-cue-x:hover{ color: var(--ink-strong); }

/* Live-source badges for market + trending cards (real free feeds vs demo) */
.mk-live, .ft-live {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #34e58a; background: rgba(52, 229, 138, .12); border: 1px solid rgba(52, 229, 138, .35);
  vertical-align: middle;
}
.ft-live { margin-left: 0; }
.pm-vol { margin-left: 6px; font-style: normal; color: var(--ink-3, #8a94a6); font-weight: 600; }
.ft-demo { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3, #8a94a6); }
a.pm-q { color: inherit; text-decoration: none; }
a.pm-q:hover { text-decoration: underline; }

/* Top headlines strip (Guardian + NYT) — pinned in the feed under Trending */
.feed-heads { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--line, #1d2430); border-radius: 10px; background: var(--panel-2, rgba(255,255,255,.02)); }
.fh-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #aab3c2); margin-bottom: 6px; }
.fh-row { display: flex; flex-direction: column; gap: 1px; padding: 6px 6px; border-radius: 7px; text-decoration: none; color: inherit; }
a.fh-row:hover { background: var(--panel-3, rgba(255,255,255,.04)); }
.fh-t { font-size: 13px; line-height: 1.3; color: var(--ink, #e7ecf3); }
.fh-src { font-size: 11px; color: var(--ink-3, #8a94a6); }
.fh-demo { opacity: .85; cursor: default; }
.fh-more { margin-top: 4px; background: none; border: none; color: var(--accent, #6aa6ff); font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.fh-more:hover { text-decoration: underline; }

/* Live per-event odds link (Polymarket) */
.pm-link { color: var(--accent, #6aa6ff); text-decoration: none; }
.pm-link:hover { text-decoration: underline; }

/* Persistent, unobtrusive data-attribution (ODbL / GDELT / CoinGecko obligations) */
.ang-credits { position: fixed; left: 10px; bottom: 8px; z-index: 30; display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-3, #8a94a6); pointer-events: none; }
.ang-credits-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3, #8a94a6); opacity: .6; }
.ang-credits-full { opacity: .55; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease, opacity .3s ease; }
.ang-credits:hover .ang-credits-full { max-width: 70vw; opacity: .85; }
@media (max-width: 640px) { .ang-credits-full { display: none; } }

/* Upcoming launches strip (Launch Library 2) */
.feed-launch { margin: 4px 0 10px; padding: 8px 10px; border: 1px solid var(--line, #1d2430); border-radius: 10px; background: var(--panel-2, rgba(255,255,255,.02)); }
.fl-head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #aab3c2); margin-bottom: 6px; }
.fl-row { display: flex; align-items: center; gap: 7px; padding: 4px 4px 0; }
.fl-dot { width: 5px; height: 5px; border-radius: 50%; background: #8ab4ff; flex: none; }
.fl-t { font-size: 12.5px; color: var(--ink, #e7ecf3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-when { font-size: 11px; color: #8ab4ff; font-weight: 600; flex: none; }
.fl-pad { font-size: 11px; color: var(--ink-3, #8a94a6); padding: 0 4px 2px 16px; }

/* Live "watching now" chip (real SSE connection count) */
.live-watch { position: fixed; right: 12px; bottom: 10px; z-index: 30; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--ink-2, #cdd5e0); background: rgba(10,14,20,.55); border: 1px solid var(--line, #1d2430); backdrop-filter: blur(4px); }
.lw-dot { width: 6px; height: 6px; border-radius: 50%; background: #34e58a; box-shadow: 0 0 0 0 rgba(52,229,138,.55); animation: lw-pulse 2.4s infinite; }
@keyframes lw-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,229,138,.5); } 70% { box-shadow: 0 0 0 6px rgba(52,229,138,0); } 100% { box-shadow: 0 0 0 0 rgba(52,229,138,0); } }
@media (prefers-reduced-motion: reduce) { .lw-dot { animation: none; } }
.rm-here { margin-left: 8px; font-size: 11px; font-weight: 600; color: #34e58a; }
.rm-here:empty { display: none; }

/* Feed layout fix: the event list must shrink and scroll inside the panel so the
   pinned strips never push content past the rounded box. */
.feed-list{ flex: 1 1 auto; min-height: 0; }
/* Collapsible strip headers (Top headlines / Upcoming launches) */
.fh-head, .fl-head{ width: 100%; background: none; border: 0; cursor: pointer; font: inherit; color: var(--ink-2, #aab3c2); text-align: left; }
.fh-head:hover, .fl-head:hover{ color: var(--ink, #e7ecf3); }
.fh-car, .fl-car{ margin-left: auto; font-size: 13px; opacity: .7; }

/* Prominent primary-source link at the top of the Impact Brief */
.ib-readrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.ib-read { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #cfe0ff; background: rgba(106,166,255,.12); border: 1px solid rgba(106,166,255,.32); text-decoration: none; }
.ib-read:hover { background: rgba(106,166,255,.2); border-color: rgba(106,166,255,.5); }
.ib-srcmore { font-size: 11px; color: var(--ink-3, #8a94a6); }

/* Direct source-article link on globe headline cards */
.nc-open { margin-left: 5px; margin-right: auto; cursor: pointer; opacity: .6; font-size: 11px; line-height: 1; color: var(--c, #9fb4d8); }
.nc-open:hover, .nc-open:focus-visible { opacity: 1; outline: none; }