@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@300;400;500;600;700;800;900&display=swap');
/* Design tokens live in their own file now so /tracker, /replay, /embed,
   and /scorecard can share them without pulling in the whole dashboard
   stylesheet. See public/css/tokens.css (Job 7 refactor). */
@import url('./tokens.css');

/* ─── Focus ring, used by every interactive element ─── */
/* Accessibility: always visible for keyboard users, never for mouse.
       Brand: oxblood, tight, flush against the element, two-layer so it
       reads correctly on both paper and card surfaces. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--signal-critical);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ─── Tabular numerals utility ─── */
/* Apply .tab-nums to any data cell so the digits lock to a monospace
       grid even in the proportional body font. */
.tab-nums {
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ═══════════════════════════════════════════════════════════════════
       REUSABLE .card COMPONENT
       ═══════════════════════════════════════════════════════════════════

       Every widget on the dashboard gets one consistent card shell so the
       eye can land on any piece of the grid and know the hierarchy
       immediately.

       Structure:
         .card
           .card-head
             .card-eyebrow   (mono uppercase label, optional)
             .card-title     (sans or mono, depending on scope)
             .card-meta      (right-aligned freshness / count)
           .card-body        (content, auto scroll)
           .card-foot        (optional action row)

       State (via data-state on .card):
         data-state="loading"   skeleton shimmer on .card-value children
         data-state="live"      default, no decoration
         data-state="delayed"   subtle amber edge
         data-state="stale"     amber edge + "delayed" meta tag
         data-state="cached"    dashed edge + "cached" meta tag
         data-state="error"     oxblood edge + "retrying" meta tag
         data-state="empty"     body shows empty copy, no decoration

       Interaction:
         [role="button"] or [tabindex]:    hover lifts to elev-1
         .card.is-selected:                permanent elev-1 + oxblood edge

       Motion:
         card reveal = 220ms ease-out fade + 4px translateY on init
         hover lift  = 120ms ease-out shadow transition

       This is additive: existing .panel styles continue to work alongside
       .card, and panels can wrap their children in .card without a layout
       change.
       ─────────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-0);
  transition:
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.card + .card {
  margin-top: var(--space-3);
}

.card[data-interactive='true'],
.card[role='button'],
.card[tabindex] {
  cursor: pointer;
}
.card[data-interactive='true']:hover,
.card[role='button']:hover,
.card[tabindex]:hover {
  box-shadow: var(--elev-1);
  background: var(--surface-hover);
}
.card.is-selected {
  box-shadow:
    0 0 0 1px var(--signal-critical-edge),
    var(--elev-1);
}

/* Header row */
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.card-head:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.card-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-dim);
}
.card-eyebrow::before {
  content: ', ';
  margin-right: var(--space-2);
  color: var(--signal-critical);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--type-lg);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  letter-spacing: var(--tracking-tight);
  flex: 1;
  min-width: 0;
}
.card-title.mono {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.card-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
  white-space: nowrap;
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}
.card-meta .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--text-dim);
  flex-shrink: 0;
}

/* Body */
.card-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.card-body::-webkit-scrollbar {
  width: 6px;
}
.card-body::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: var(--radius-full);
}
.card-body::-webkit-scrollbar-track {
  background: transparent;
}

/* Footer */
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}

/* ─── Card states ─── */
.card[data-state='delayed'],
.card[data-state='stale'] {
  box-shadow: 0 0 0 1px var(--signal-high-edge);
}
.card[data-state='cached'] {
  box-shadow: 0 0 0 1px var(--rule-strong);
}
.card[data-state='cached']::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(104, 89, 75, 0.04) 8px 16px);
}
.card[data-state='error'] {
  box-shadow:
    0 0 0 1px var(--signal-critical-edge),
    var(--elev-1);
}
.card[data-state='empty'] .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--text-subtle);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--type-sm);
}
.card-head .card-meta[data-state-label='delayed']::before,
.card-head .card-meta[data-state-label='stale']::before,
.card-head .card-meta[data-state-label='cached']::before,
.card-head .card-meta[data-state-label='error']::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  margin-right: var(--space-1);
}
.card[data-state='delayed'] .card-meta[data-state-label] {
  color: var(--signal-high);
}
.card[data-state='delayed'] .card-meta[data-state-label]::before {
  background: var(--signal-high);
}
.card[data-state='stale'] .card-meta[data-state-label] {
  color: var(--signal-high);
}
.card[data-state='stale'] .card-meta[data-state-label]::before {
  background: var(--signal-high);
}
.card[data-state='cached'] .card-meta[data-state-label] {
  color: var(--text-dim);
}
.card[data-state='cached'] .card-meta[data-state-label]::before {
  background: var(--text-dim);
}
.card[data-state='error'] .card-meta[data-state-label] {
  color: var(--signal-critical);
}
.card[data-state='error'] .card-meta[data-state-label]::before {
  background: var(--signal-critical);
}
.card[data-state='live'] .card-meta[data-state-label] {
  color: var(--signal-positive);
}
.card[data-state='live'] .card-meta[data-state-label]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  margin-right: var(--space-1);
  background: var(--signal-positive);
  animation: card-live-pulse 2s ease-in-out infinite;
}
@keyframes card-live-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.85);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card[data-state='live'] .card-meta[data-state-label]::before {
    animation: none;
  }
}

/* ─── Skeleton loader for .card-value ─── */
.card-value {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--type-2xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--text-primary);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}
.card[data-state='loading'] .card-value,
.card-value[data-loading='true'] {
  min-width: 4ch;
  color: transparent;
  background: linear-gradient(
    90deg,
    rgba(16, 18, 20, 0.06) 25%,
    rgba(16, 18, 20, 0.12) 37%,
    rgba(16, 18, 20, 0.06) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: card-skeleton 1.4s ease-in-out infinite;
}
@keyframes card-skeleton {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card[data-state='loading'] .card-value,
  .card-value[data-loading='true'] {
    animation: none;
  }
}

/* ─── Card reveal on insert ─── */
/* For panels that animate cards in on first render; no-op if the parent
       hasn't set data-reveal. */
[data-reveal='true'] > .card {
  opacity: 0;
  transform: translateY(4px);
  animation: card-reveal var(--dur-base) var(--ease-out) forwards;
}
[data-reveal='true'] > .card:nth-child(2) {
  animation-delay: 40ms;
}
[data-reveal='true'] > .card:nth-child(3) {
  animation-delay: 80ms;
}
[data-reveal='true'] > .card:nth-child(4) {
  animation-delay: 120ms;
}
[data-reveal='true'] > .card:nth-child(5) {
  animation-delay: 160ms;
}
[data-reveal='true'] > .card:nth-child(n + 6) {
  animation-delay: 200ms;
}
@keyframes card-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal='true'] > .card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Touch responsiveness, no 300ms tap delay on interactive elements */
button,
a,
[onclick],
.tab,
.filter-chip,
.feed-item,
.mobile-nav-tab,
.desktop-nav-tab {
  touch-action: manipulation;
}

/* ─── Preview / Restricted Mode ──────────────── */
body.preview-mode .main {
  filter: blur(3px);
  user-select: none;
  pointer-events: none;
}
/* Hide desktop tab nav and right panel in preview mode to reduce clutter */
body.preview-mode .desktop-nav-tabs {
  display: none;
}
body.preview-mode #desktopViewTools,
body.preview-mode #desktopViewPolymarket,
body.preview-mode #desktopViewOsint,
body.preview-mode #desktopViewMap {
  display: none !important;
}
body.preview-mode .ticker-strip {
  filter: none;
}
body.preview-mode .feed-health-bar {
  filter: none;
}
body.preview-mode .header {
  filter: none;
  pointer-events: auto;
}
body.preview-mode .alert-banner {
  filter: none;
}

.preview-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(
    180deg,
    rgba(232, 236, 231, 0.05) 0%,
    rgba(232, 236, 231, 0.4) 30%,
    rgba(232, 236, 231, 0.85) 60%,
    rgba(232, 236, 231, 0.95) 100%
  );
  align-items: flex-end;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 20px 20px 60px;
}
.preview-gate .preview-gate-inner {
  width: 100%;
}
.preview-gate.active {
  display: flex;
}
.preview-gate-inner {
  max-width: 520px;
  width: 100%;
}
.preview-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(61, 107, 46, 0.12);
  border: 1px solid rgba(61, 107, 46, 0.3);
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 20px;
  font-size: 11px;
  color: var(--accent-green);
  letter-spacing: 1px;
  font-weight: 700;
}
.preview-live-badge .pulse-sm {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: pulse 2s infinite;
}
.preview-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 16px 0 20px;
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.preview-stats .stat-value {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
}
.preview-latest {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 16px 0;
  text-align: left;
  font-size: 11px;
}
.preview-latest-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
  font-weight: 700;
}
.preview-latest-headline {
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 4px;
}
.preview-latest-meta {
  font-size: 9px;
  color: var(--text-dim);
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  touch-action: pan-x pan-y;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  overflow-x: hidden;
}

/* ─── Header ─────────────────────────────────── */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 28px;
  background: var(--bg-primary);
  border-bottom: 3px double var(--text-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow: visible;
}

/* Scan-line effect on header */
.header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(16, 18, 20, 0.01) 2px,
    rgba(16, 18, 20, 0.01) 4px
  );
  pointer-events: none;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-primary);
  line-height: 1;
}

.logo-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 10px;
  opacity: 0.7;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  animation: pulse 2s infinite;
}

.pulse.warning {
  background: var(--accent-amber);
}
.pulse.critical {
  background: var(--accent-red);
  animation: pulse-critical 0.5s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes squawkPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes pulse-critical {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px var(--accent-red);
  }
  50% {
    opacity: 0.5;
  }
}

/* Connection quality in header */
.conn-quality {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-dim);
}
.conn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
}
.conn-dot.slow {
  background: var(--accent-amber);
}
.conn-dot.dead {
  background: var(--accent-red);
}

/* ─── Settings Dropdown ─────────────────────── */
.settings-gear-btn {
  background: none;
  border: 1px solid rgba(16, 18, 20, 0.12);
  color: var(--text-dim);
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.settings-gear-btn:hover {
  color: var(--text-primary);
  border-color: var(--rule-strong);
}
.settings-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  z-index: 10000;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 6px 18px rgba(16, 18, 20, 0.18);
}
.settings-dropdown button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  margin: 0;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 11px;
  font-family: inherit;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.3px;
}
.settings-dropdown button:hover {
  background: rgba(16, 18, 20, 0.06);
}
.settings-dropdown button.danger-setting {
  color: var(--accent-red);
}

html[data-native-shell] .install-banner,
html[data-native-shell] .install-banner.is-visible {
  display: none !important;
}

/* ─── Feed Health Bar ────────────────────────── */
.feed-health-bar {
  padding: 4px 24px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  gap: 16px;
  align-items: center;
}

/* ─── Alert Banner ───────────────────────────── */
.alert-banner {
  display: none;
  padding: 10px 16px;
  background: rgba(122, 16, 32, 0.12);
  border-bottom: 2px solid var(--accent-red);
  font-size: 11px;
  color: var(--accent-red);
  max-height: 80px;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  line-height: 1.4;
}

.alert-banner.active {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: critical-glow 1.5s ease-in-out infinite;
}

@keyframes critical-glow {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(122, 16, 32, 0.3),
      inset 0 0 20px rgba(122, 16, 32, 0.05);
  }
  50% {
    box-shadow:
      0 0 30px rgba(122, 16, 32, 0.6),
      inset 0 0 40px rgba(122, 16, 32, 0.1);
    background: rgba(122, 16, 32, 0.2);
  }
}

/* ─── Search Bar ─────────────────────────────── */
.search-container {
  position: relative;
  flex: 1;
  max-width: 300px;
  margin: 0 12px;
}
.search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 5px 34px 5px 28px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus {
  border-color: var(--accent-cyan);
}
.search-input::placeholder {
  color: var(--text-dim);
}
.search-icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-dim);
  pointer-events: none;
}
.search-hint {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--text-dim);
  background: var(--bg-secondary);
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--border);
  pointer-events: none;
}
.search-highlight {
  background: rgba(122, 16, 32, 0.3);
  color: var(--text-primary);
  border-radius: 1px;
}

/* ─── Desktop Navigation Bar ────────────────── */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  background: linear-gradient(180deg, rgba(217, 224, 219, 0.95) 0%, var(--bg-secondary) 100%);
  border-bottom: 1px solid var(--border);
  height: 38px;
  flex-shrink: 0;
}
.desktop-nav-tab {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 8px 16px;
  cursor: pointer;
  position: relative;
  transition: color 0.15s;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}
.desktop-nav-tab:hover {
  color: var(--text-secondary);
}
.desktop-nav-tab.active {
  color: var(--accent-cyan);
}
.desktop-nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(122, 16, 32, 0.4);
}
.desktop-nav-tab .nav-badge {
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1;
}

/* ─── Main Layout ──────────────────────────────
       5-column grid: [left panel] [resizer] [center] [resizer] [right panel].
       6-row grid for deterministic placement:
         1  ticker strip
         2  threat strip (may be hidden)
         3  desktop nav tabs
         4  decision stack (thesis ledger + trader cockpit)
         5  intel live feed (may be hidden, sizes to its content)
         6  panels (1fr, fills remaining vertical space)
       Every element in the main grid declares its row explicitly below
       so that showing or hiding the threat strip or intel feed cannot
       push the panels row into an implicit track and collapse the feed
       or the panels to zero. */
.main {
  display: grid;
  grid-template-columns:
    var(--main-col-left, 320px)
    6px
    minmax(0, var(--main-col-center, 1fr))
    6px
    var(--main-col-right, 340px);
  grid-template-rows: auto auto auto minmax(0, auto) minmax(0, auto) minmax(220px, 1fr);
  gap: 0;
  background: var(--border);
  height: calc(100vh - 49px);
  height: calc(100dvh - 49px);
  max-width: 100vw;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 1024px) {
  html,
  body {
    height: 100dvh;
    overflow: hidden;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  .header {
    flex: 0 0 auto;
  }

  .main {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
  }
}

/* Explicit row placement for deterministic layout. */
.main > .ticker-strip {
  grid-row: 1;
}
.main > #threatStrip {
  grid-row: 2;
}
.main > .desktop-nav {
  grid-row: 3;
}
.main #decisionStack {
  grid-row: 4;
  grid-column: 1 / -1;
}
.main #intelLiveFeed {
  grid-row: 5;
}
/* Panels and main-grid resizers sit on row 6 with explicit columns.
   We can't use `.main > .panel-resizer` here because the dashboard view
   wraps these children in `#desktopViewDashboard { display: contents }`,
   so a direct-child combinator does not match. Assign each slot by id /
   attribute instead so every piece of the 5-track row is placed, not
   auto-flowed into row 6 (which was leaving a 354px dead band on the
   right at 1280-1520px viewports because cols 4-5 stayed empty). */
.main #leftPanel {
  grid-row: 6;
  grid-column: 1;
}
.main #centerPanel {
  grid-row: 6;
  grid-column: 3;
}
.main #rightPanel {
  grid-row: 6;
  grid-column: 5;
}
.main #leftPanel,
.main #centerPanel,
.main #rightPanel {
  min-height: 0;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
}
.main .panel-resizer[data-col-var='main-col-left'] {
  grid-row: 6;
  grid-column: 2;
}
.main .panel-resizer[data-col-var='main-col-right'] {
  grid-row: 6;
  grid-column: 4;
}
.main .desktop-osint-layout,
.main .desktop-map-layout,
.main .desktop-tools-layout {
  grid-row: 6;
}
.main #desktopViewPolymarket > div {
  grid-row: 6;
}
.main > #polymarketPanel,
.main > #mobileMapPanel,
.main > #osintPanel,
.main > #morePanel {
  grid-row: 6;
}

@media (min-width: 901px) {
  #decisionStack {
    max-height: clamp(78px, 10dvh, 116px);
    min-height: 0;
    overflow-y: auto;
  }

  #intelLiveFeed {
    max-height: clamp(72px, 8dvh, 96px) !important;
    min-height: 0;
    border-color: rgba(122, 16, 32, 0.18) !important;
    border-left-width: 3px !important;
    border-radius: 0 !important;
    background: rgba(226, 230, 225, 0.94) !important;
    padding-bottom: 0 !important;
  }

  #intelAlertsList {
    height: auto !important;
    max-height: clamp(38px, 5dvh, 54px) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    background: rgba(242, 243, 239, 0.42);
  }

  #intelLiveFeed .section-label {
    min-height: 24px !important;
    padding: 3px 12px !important;
    background: rgba(122, 16, 32, 0.045) !important;
    border-bottom-color: rgba(122, 16, 32, 0.12) !important;
  }

  #intelLiveFeed .intel-alert-item {
    min-height: 22px !important;
    padding: 4px 12px 4px 10px !important;
  }

  #intelLiveFeed .intel-alert-item > span {
    line-height: 1.15 !important;
  }

  #intelLiveFeed .intel-alert-sources {
    max-width: 148px !important;
  }

  #intelLiveFeed .panel-resizer.horizontal {
    height: 4px !important;
    background: transparent !important;
    border-top: 0 !important;
  }

  #intelLiveFeed .panel-resizer.horizontal::after {
    width: 32px !important;
    height: 2px !important;
    background: rgba(16, 18, 20, 0.28) !important;
    opacity: 1 !important;
  }

  .install-banner.is-visible {
    display: none !important;
  }
}

/* Desktop view containers */
.desktop-view {
  display: none;
}
.desktop-view.active {
  display: contents;
}

/* OSINT desktop: 2-column + resizer */
.desktop-osint-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    minmax(0, var(--osint-col-left, 1fr))
    6px
    var(--osint-col-right, 380px);
  gap: 0;
  background: var(--border);
  overflow: hidden;
}
.desktop-osint-layout > .panel {
  overflow-y: auto;
}

/* MAP desktop: full map + sidebar + resizer */
.desktop-map-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    minmax(0, var(--map-col-left, 1fr))
    6px
    var(--map-col-right, 360px);
  gap: 0;
  background: var(--border);
  overflow: hidden;
}
.desktop-map-container {
  position: relative;
  background: var(--bg-secondary);
}
.desktop-map-container #desktopMap {
  width: 100%;
  height: 100%;
}
.desktop-map-sidebar {
  overflow-y: auto;
  background: var(--bg-primary);
}

/* TOOLS desktop: grid + resizer */
.desktop-tools-layout {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    minmax(0, var(--tools-col-left, 1fr))
    6px
    minmax(0, var(--tools-col-right, 1fr));
  gap: 0;
  background: var(--border);
  overflow: hidden;
}
.desktop-tools-layout > .panel {
  overflow-y: auto;
}

@media (max-width: 1200px) {
  .desktop-osint-layout {
    grid-template-columns: minmax(0, var(--osint-col-left, 1fr)) 6px var(--osint-col-right, 320px);
  }
  .desktop-map-layout {
    grid-template-columns: minmax(0, var(--map-col-left, 1fr)) 6px var(--map-col-right, 300px);
  }
}

/* ─── Panel Resizer (draggable divider) ───────────────────
       Two variants:
         .panel-resizer           vertical bar, drags left/right (column)
         .panel-resizer.horizontal horizontal bar, drags up/down (row)
       On mobile (<=1023px) the grid layout is flex-column and the
       resizer divs are hidden via the mobile block further down. */
.panel-resizer {
  position: relative;
  cursor: col-resize;
  background: var(--border);
  user-select: none;
  touch-action: none;
  z-index: 20;
  transition: background 0.15s ease;
  align-self: stretch;
  overflow: visible;
}
.panel-resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  transition: background 0.15s ease;
}
.panel-resizer::after {
  content: '';
  position: absolute;
  top: 50%;
  bottom: auto;
  left: -4px;
  right: -4px;
  height: 72px;
  transform: translateY(-50%);
  border-radius: 999px;
  background:
    linear-gradient(var(--accent-red, #7a1020), var(--accent-red, #7a1020)) center / 2px 42px no-repeat,
    rgba(122, 16, 32, 0.04);
  opacity: 0.42;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}
.panel-resizer:hover,
.panel-resizer:focus-visible,
body.resizing-cols .panel-resizer {
  background: rgba(122, 16, 32, 0.22);
  outline: none;
}
.panel-resizer:hover::before,
.panel-resizer:focus-visible::before,
body.resizing-cols .panel-resizer::before {
  background: var(--accent-red, #7a1020);
}
.panel-resizer:hover::after,
.panel-resizer:focus-visible::after,
body.resizing-cols .panel-resizer::after {
  opacity: 1;
}

/* Horizontal variant: sits at the bottom of the element it resizes,
       absolutely positioned so it does not take grid space. The parent
       MUST be position:relative for this to anchor correctly. */
.panel-resizer.horizontal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  width: auto;
  background: rgba(122, 16, 32, 0.06);
  cursor: row-resize;
  border-top: 1px solid rgba(122, 16, 32, 0.2);
}
.panel-resizer.horizontal::before {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 0;
  background: transparent;
  transform: none;
}
.panel-resizer.horizontal::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-red, #7a1020);
  opacity: 0.5;
  transition:
    opacity 0.15s ease,
    width 0.15s ease;
}
.panel-resizer.horizontal:hover,
.panel-resizer.horizontal:focus-visible,
body.resizing-rows .panel-resizer.horizontal {
  background: rgba(122, 16, 32, 0.16);
}
.panel-resizer.horizontal:hover::after,
.panel-resizer.horizontal:focus-visible::after,
body.resizing-rows .panel-resizer.horizontal::after {
  opacity: 1;
  width: 72px;
}

.draggable-section.section-resizable {
  position: relative;
  min-height: 84px;
  overflow: auto;
  padding-bottom: 14px !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.draggable-section.section-resizable > .section-resizer {
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 10px;
  border-top: 0;
  background: transparent;
  opacity: 0.42;
  transition:
    opacity var(--dur-fast, 0.15s) var(--ease-out, ease),
    background var(--dur-fast, 0.15s) var(--ease-out, ease);
}

.draggable-section.section-resizable:hover > .section-resizer,
.draggable-section.section-resizable > .section-resizer:focus-visible,
body.resizing-rows .draggable-section.section-resizable > .section-resizer {
  opacity: 1;
  background: rgba(122, 16, 32, 0.05);
}

.draggable-section.section-resizable > .section-resizer::after {
  width: 34px;
  height: 2px;
  background: var(--accent-red, #7a1020);
  opacity: 0.36;
}

.draggable-section.section-resizable > .section-resizer:hover::after,
.draggable-section.section-resizable > .section-resizer:focus-visible::after,
body.resizing-rows .draggable-section.section-resizable > .section-resizer::after {
  width: 54px;
  opacity: 0.86;
}

.resizable-scroll-region {
  position: relative;
  min-height: 96px;
  overflow: auto !important;
  padding-bottom: 14px !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.resizable-scroll-region.is-user-sized {
  flex: 0 0 auto !important;
}

#intelAlertsList.resizable-scroll-region {
  max-height: 360px;
}

#alertFeed.resizable-scroll-region,
#specialistFeed.resizable-scroll-region {
  flex: 0 1 320px;
  max-height: min(46vh, 520px);
}

#mainFeed.resizable-scroll-region {
  flex: 1 1 280px;
  max-height: min(62vh, 720px);
}

#desktopOsintFeedItems.resizable-scroll-region {
  flex: 1 1 360px;
  max-height: none;
}

#desktopAircraftList.resizable-scroll-region,
#calendarData.resizable-scroll-region {
  max-height: 360px;
}

.resizable-scroll-region > .region-resizer {
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 10px;
  border-top: 0;
  background: transparent;
  opacity: 0.42;
  transition:
    opacity var(--dur-fast, 0.15s) var(--ease-out, ease),
    background var(--dur-fast, 0.15s) var(--ease-out, ease);
}

.resizable-scroll-region:hover > .region-resizer,
.resizable-scroll-region > .region-resizer:focus-visible,
body.resizing-rows .resizable-scroll-region > .region-resizer {
  opacity: 1;
  background: rgba(122, 16, 32, 0.05);
}

.resizable-scroll-region > .region-resizer::after {
  width: 34px;
  height: 2px;
  background: var(--accent-red, #7a1020);
  opacity: 0.36;
}

.resizable-scroll-region > .region-resizer:hover::after,
.resizable-scroll-region > .region-resizer:focus-visible::after,
body.resizing-rows .resizable-scroll-region > .region-resizer::after {
  width: 54px;
  opacity: 0.86;
}

/* While a drag is in progress, force the resize cursor everywhere
       and disable text selection so the user can sweep freely. */
body.resizing-cols {
  cursor: col-resize !important;
  user-select: none !important;
}
body.resizing-cols * {
  cursor: col-resize !important;
  user-select: none !important;
}
body.resizing-rows {
  cursor: row-resize !important;
  user-select: none !important;
}
body.resizing-rows * {
  cursor: row-resize !important;
  user-select: none !important;
}

/* ─── Market Ticker Strip ────────────────────── */
.ticker-strip {
  grid-column: 1 / -1;
  background: linear-gradient(90deg, var(--bg-secondary) 0%, rgba(217, 224, 219, 0.9) 50%, var(--bg-secondary) 100%);
  padding: 8px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}

.ticker-scroll {
  display: inline-flex;
  gap: 32px;
  animation: ticker 60s linear infinite;
  padding: 0 24px;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.ticker-item .sparkline-svg {
  vertical-align: middle;
  flex-shrink: 0;
}

.ticker-name {
  color: var(--text-dim);
  font-weight: 600;
}

.ticker-price {
  color: var(--text-primary);
}

.ticker-change {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 2px;
}

.ticker-change.up {
  color: var(--accent-green);
  background: rgba(61, 107, 46, 0.1);
}
.ticker-change.down {
  color: var(--accent-red);
  background: rgba(122, 16, 32, 0.1);
}

/* Price flash on change */
@keyframes price-flash-up {
  0% {
    background: rgba(61, 107, 46, 0.4);
  }
  100% {
    background: transparent;
  }
}
@keyframes price-flash-down {
  0% {
    background: rgba(122, 16, 32, 0.4);
  }
  100% {
    background: transparent;
  }
}
.price-flash-up {
  animation: price-flash-up 1.5s ease-out;
}
.price-flash-down {
  animation: price-flash-down 1.5s ease-out;
}

.market-state {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.market-state.live {
  color: var(--accent-green);
  background: rgba(61, 107, 46, 0.15);
}
.market-state.pre {
  color: var(--accent-amber);
  background: rgba(178, 82, 51, 0.15);
}
.market-state.post {
  color: var(--accent-purple);
  background: rgba(139, 92, 246, 0.15);
}
.market-state.closed {
  color: var(--text-dim);
  background: rgba(100, 116, 139, 0.15);
}

.market-age {
  font-size: 8px;
  color: var(--text-dim);
  margin-left: 4px;
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ─── Sparkline ──────────────────────────────── */
.sparkline {
  margin: 0 6px;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.sparkline:hover {
  transform: scale(1.18);
}

/* ─── Panels ─────────────────────────────────── */
.panel {
  background: var(--bg-primary);
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 18, 20, 0.25) transparent;
}

.panel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, rgba(217, 224, 219, 0.95) 100%);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.panel-title {
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ink, #101214);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-title .tier-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  margin-right: 6px;
}

.wire-missed-btn {
  margin-left: auto;
  min-height: 25px;
  padding: 4px 7px;
  border: 1px solid rgba(122, 16, 32, 0.24);
  border-radius: 2px;
  background: rgba(122, 16, 32, 0.055);
  color: var(--accent-red);
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.wire-missed-btn:hover,
.wire-missed-btn:focus-visible {
  background: rgba(122, 16, 32, 0.1);
  border-color: rgba(122, 16, 32, 0.36);
  outline: none;
}

.tier-1 .tier-badge {
  background: rgba(122, 16, 32, 0.15);
  color: var(--accent-red);
}
.tier-2 .tier-badge {
  background: rgba(178, 82, 51, 0.15);
  color: var(--accent-amber);
}
.tier-3 .tier-badge {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
}

.panel-count {
  font-size: 10px;
  color: var(--text-dim);
}

/* ─── Freshness Dot ─────────────────────────── */
.freshness-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 6px;
}
.freshness-dot.fresh {
  background: var(--accent-green);
}
.freshness-dot.stale {
  background: var(--accent-amber);
}
.freshness-dot.old {
  background: var(--accent-red);
}
.freshness-dot.none {
  background: var(--text-dim);
  opacity: 0.5;
}

.freshness-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-radius: 3px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1;
  padding: 2px 5px;
}

.freshness-badge-new {
  background: rgba(61, 107, 46, 0.12);
  color: var(--accent-green);
}

.freshness-badge-repeat {
  background: rgba(122, 111, 94, 0.1);
  color: var(--text-dim);
}

.feed-item.freshness-repeat {
  border-left-color: rgba(122, 111, 94, 0.42);
}

.feed-item.freshness-repeat.alert-critical {
  animation: none;
}

.freshness-gate-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.14);
  background: rgba(226, 230, 225, 0.76);
  color: var(--text-primary);
}

.freshness-gate-kicker {
  color: var(--accent-red);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0.8px;
}

.freshness-gate-banner strong {
  font: 900 11px/1.15 var(--font-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.freshness-gate-banner small {
  grid-column: 2;
  color: var(--text-dim);
  font: 700 10px/1.25 var(--font-sans);
}

.freshness-gate-banner button {
  grid-row: 1 / span 2;
  grid-column: 3;
  border: 1px solid rgba(122, 16, 32, 0.28);
  border-radius: 3px;
  background: var(--surface-raised);
  color: var(--accent-red);
  cursor: pointer;
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0.4px;
  padding: 7px 9px;
  text-transform: uppercase;
}

.proof-speed-banner {
  display: grid;
  grid-template-columns: minmax(180px, 0.92fr) minmax(260px, 1.3fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.14);
  border-left: 3px solid var(--text-dim);
  background: rgba(235, 239, 235, 0.86);
  color: var(--text-primary);
  min-width: 0;
}

.proof-speed-banner--fast,
.proof-speed-banner--steady {
  border-left-color: var(--accent-green);
}

.proof-speed-banner--thin,
.proof-speed-banner--contested {
  border-left-color: var(--accent-red);
}

.proof-speed-lead,
.proof-speed-cells {
  min-width: 0;
}

.proof-speed-lead {
  display: grid;
  gap: 3px;
}

.proof-speed-lead span,
.proof-speed-lead strong,
.proof-speed-lead small,
.proof-speed-cell,
.proof-speed-banner button {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  text-transform: uppercase;
}

.proof-speed-lead span {
  color: var(--accent-red);
  font-size: 8px;
  font-weight: 900;
}

.proof-speed-lead strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.proof-speed-lead small {
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 720;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-speed-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.proof-speed-cell {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid rgba(16, 18, 20, 0.12);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.42);
}

.proof-speed-cell b {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-speed-cell small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 7.5px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-speed-banner button {
  border: 1px solid rgba(122, 16, 32, 0.28);
  border-radius: 2px;
  background: var(--surface-raised);
  color: var(--accent-red);
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
  padding: 8px 9px;
  white-space: nowrap;
}

.proof-speed-banner button:hover,
.proof-speed-banner button:focus-visible {
  background: var(--text-primary);
  color: var(--surface-page);
}

.my-desk-open-first {
  display: grid;
  grid-template-columns: minmax(220px, 0.92fr) minmax(360px, 1.45fr) auto;
  align-items: stretch;
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.16);
  border-left: 3px solid var(--accent-green);
  background: rgba(246, 247, 244, 0.94);
  color: var(--text-primary);
  min-width: 0;
}

.my-desk-open-first--active {
  border-left-color: var(--accent-red);
  background: rgba(122, 16, 32, 0.045);
}

.my-desk-open-first--moving {
  border-left-color: var(--signal-high);
}

.my-desk-open-lead,
.my-desk-open-cells,
.my-desk-open-actions {
  min-width: 0;
}

.my-desk-open-lead {
  display: grid;
  gap: 3px;
  align-content: center;
}

.my-desk-open-lead span,
.my-desk-open-lead strong,
.my-desk-open-lead small,
.my-desk-open-cell,
.my-desk-open-actions button {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  text-transform: uppercase;
}

.my-desk-open-lead span {
  color: var(--accent-red);
  font-size: 8px;
  font-weight: 900;
}

.my-desk-open-lead strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-desk-open-lead small {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 720;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-desk-open-daily {
  color: var(--accent-red) !important;
  opacity: 0.82;
}

.my-desk-open-receipt-mini {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(16, 18, 20, 0.1);
}

.my-desk-open-receipt-mini b,
.my-desk-open-receipt-mini small {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.my-desk-open-receipt-mini b {
  color: var(--text-dim);
  font-size: 7px;
  font-weight: 900;
}

.my-desk-open-receipt-mini small {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 760;
  line-height: 1.12;
}

.my-desk-open-cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.my-desk-open-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 6px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(16, 18, 20, 0.12);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.my-desk-open-cell:hover,
.my-desk-open-cell:focus-visible {
  border-color: rgba(122, 16, 32, 0.34);
  background: rgba(255, 255, 255, 0.82);
}

.my-desk-open-lens-cell {
  border-color: rgba(122, 16, 32, 0.26);
  background: rgba(122, 16, 32, 0.045);
}

.my-desk-open-lens-cell b {
  color: var(--accent-red);
}

.my-desk-open-cell span,
.my-desk-open-cell b,
.my-desk-open-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-desk-open-cell span {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 7.5px;
  font-weight: 850;
  line-height: 1;
}

.my-desk-open-cell b {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
}

.my-desk-open-cell small {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 760;
  line-height: 1.1;
}

.my-desk-open-actions {
  display: grid;
  gap: 5px;
  align-content: center;
}

.my-desk-open-actions button {
  min-width: 92px;
  border: 1px solid rgba(122, 16, 32, 0.28);
  border-radius: 2px;
  background: var(--surface-raised);
  color: var(--accent-red);
  cursor: pointer;
  font-size: 8.5px;
  font-weight: 900;
  padding: 6px 8px;
  white-space: nowrap;
}

.my-desk-open-actions button:hover,
.my-desk-open-actions button:focus-visible {
  background: var(--text-primary);
  color: var(--surface-page);
}

.my-desk-open-first-focus {
  outline: 2px solid rgba(122, 16, 32, 0.34);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 1px rgba(122, 16, 32, 0.22);
}

.trader-demo-flow {
  display: grid;
  grid-template-columns: minmax(220px, 0.82fr) minmax(420px, 1.6fr);
  gap: 8px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.16);
  border-left: 3px solid var(--accent-red);
  background: rgba(232, 236, 231, 0.78);
  color: var(--text-primary);
}

.trader-demo-flow-head,
.trader-demo-step {
  min-width: 0;
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
}

.trader-demo-flow-head {
  display: grid;
  gap: 3px;
  align-content: center;
}

.trader-demo-flow-head span {
  color: var(--accent-red);
  font-size: 8px;
  font-weight: 900;
}

.trader-demo-flow-head strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trader-demo-flow-head small {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 760;
}

.trader-demo-flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.trader-demo-step {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 6px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.trader-demo-step:hover,
.trader-demo-step:focus-visible,
.trader-demo-step.active {
  border-color: rgba(122, 16, 32, 0.38);
  background: rgba(122, 16, 32, 0.06);
}

.trader-demo-step span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(122, 16, 32, 0.3);
  color: var(--accent-red);
  font-size: 8px;
  font-weight: 900;
}

.trader-demo-step b,
.trader-demo-step small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trader-demo-step b {
  font-size: 9px;
  font-weight: 950;
}

.trader-demo-step small {
  color: var(--text-secondary);
  font-size: 7.5px;
  font-weight: 760;
}

.trader-demo-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10004;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(760px, calc(100vw - 36px));
  padding: 8px;
  border: 1px solid rgba(16, 18, 20, 0.18);
  border-left: 3px solid var(--accent-red);
  border-radius: 6px;
  background: rgba(243, 246, 242, 0.94);
  box-shadow: 0 12px 30px rgba(16, 18, 20, 0.18);
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: 0;
}

.trader-demo-dock-lede {
  display: grid;
  gap: 2px;
  min-width: 150px;
  max-width: 260px;
}

.trader-demo-dock-lede span {
  color: var(--accent-red);
  font-size: 8px;
  font-weight: 950;
}

.trader-demo-dock-lede strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trader-demo-dock-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.trader-demo-dock-step,
.trader-demo-dock-close {
  min-height: 30px;
  border: 1px solid rgba(16, 18, 20, 0.18);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.trader-demo-dock-step {
  padding: 0 9px;
}

.trader-demo-dock-close {
  display: inline-grid;
  place-items: center;
  width: 30px;
  padding: 0;
  font-size: 14px;
}

.trader-demo-dock-step:hover,
.trader-demo-dock-step:focus-visible,
.trader-demo-dock-step.active {
  border-color: rgba(122, 16, 32, 0.42);
  background: rgba(122, 16, 32, 0.08);
  color: var(--accent-red);
}

.portfolio-impact-brief {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(420px, 1.55fr) auto;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  border-bottom: 1px solid rgba(16, 18, 20, 0.16);
  border-left: 3px solid var(--accent-red);
  background: rgba(255, 255, 255, 0.58);
  color: var(--text-primary);
}

.portfolio-impact-brief--book {
  border-left-color: var(--accent-red);
}

.portfolio-impact-brief--market,
.portfolio-impact-brief--thesis {
  border-left-color: var(--signal-high);
}

.portfolio-impact-lead,
.portfolio-impact-row,
.portfolio-impact-actions button {
  min-width: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  text-transform: uppercase;
}

.portfolio-impact-lead {
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 10px;
  border-right: 1px solid rgba(16, 18, 20, 0.12);
}

.portfolio-impact-lead span {
  color: var(--accent-red);
  font-size: 8px;
  font-weight: 950;
}

.portfolio-impact-lead strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-impact-lead small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 760;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-impact-rows {
  display: grid;
  min-width: 0;
}

.portfolio-impact-row {
  display: grid;
  grid-template-columns: 92px minmax(80px, 0.45fr) minmax(170px, 1fr) 38px;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 31px;
  padding: 5px 8px;
  border: 0;
  border-bottom: 1px solid rgba(16, 18, 20, 0.09);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}

.portfolio-impact-row:last-child {
  border-bottom: 0;
}

.portfolio-impact-row:hover,
.portfolio-impact-row:focus-visible {
  background: rgba(122, 16, 32, 0.055);
  outline: none;
}

.portfolio-impact-row span,
.portfolio-impact-row strong,
.portfolio-impact-row small,
.portfolio-impact-reason,
.portfolio-impact-row b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portfolio-impact-row span {
  color: var(--accent-red);
  font-size: 8px;
  font-weight: 920;
}

.portfolio-impact-row strong {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 950;
}

.portfolio-impact-row small,
.portfolio-impact-reason {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 720;
}

.portfolio-impact-row b {
  justify-self: end;
  color: var(--accent-red);
  font-size: 11px;
  font-weight: 950;
}

.portfolio-impact-reason {
  grid-column: 1 / -1;
  opacity: 0.76;
}

.portfolio-impact-actions {
  display: grid;
  align-content: center;
  gap: 0;
  min-width: 0;
  border-left: 1px solid rgba(16, 18, 20, 0.12);
}

.portfolio-impact-actions button {
  min-width: 86px;
  min-height: 28px;
  padding: 5px 8px;
  border: 0;
  border-bottom: 1px solid rgba(16, 18, 20, 0.1);
  background: transparent;
  color: var(--accent-red);
  cursor: pointer;
  font-size: 8px;
  font-weight: 920;
  white-space: nowrap;
}

.portfolio-impact-actions button:last-child {
  border-bottom: 0;
}

.portfolio-impact-actions button:hover,
.portfolio-impact-actions button:focus-visible {
  background: var(--text-primary);
  color: var(--surface-page);
  outline: none;
}

.feed-item.proof-speed-focus {
  outline: 2px solid rgba(122, 16, 32, 0.5);
  outline-offset: -2px;
  background: rgba(122, 16, 32, 0.06) !important;
}

.feed-item.my-desk-open-focus {
  outline: 2px solid rgba(61, 107, 46, 0.62);
  outline-offset: -2px;
  background: rgba(61, 107, 46, 0.07) !important;
}

.feed-item.push-alert-focus {
  outline: 2px solid rgba(122, 16, 32, 0.72);
  outline-offset: -2px;
  background: rgba(122, 16, 32, 0.08) !important;
}

body:not(.my-desk-detail-open) #leadStory,
body:not(.my-desk-detail-open) #topSignals,
body:not(.my-desk-detail-open) #liveMarketsStrip,
body:not(.my-desk-detail-open) #eventTimelineMount,
body:not(.my-desk-detail-open) #storyCarousel,
body:not(.my-desk-detail-open) #eventClusters {
  display: none !important;
}

@media (max-width: 1180px) {
  .my-desk-open-first {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .my-desk-open-cells {
    grid-column: 1 / span 2;
  }

  .proof-speed-banner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .proof-speed-cells {
    grid-column: 1 / span 2;
  }
}

/* ─── Feed Items ─────────────────────────────── */
.feed-item {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.12);
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  position: relative;
}

.feed-item:hover {
  background: var(--bg-card-hover);
}

.feed-item.alert-critical {
  background: var(--critical-bg);
  border-left: 3px solid var(--accent-red);
  animation: critical-border-pulse 3s ease-in-out infinite;
  box-shadow: inset 0 0 30px rgba(122, 16, 32, 0.03);
}

.feed-item.alert-critical .feed-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

@keyframes critical-border-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 20px rgba(122, 16, 32, 0.03);
  }
  50% {
    box-shadow:
      inset 0 0 40px rgba(122, 16, 32, 0.08),
      inset 3px 0 12px rgba(122, 16, 32, 0.15);
  }
}

.feed-item.alert-high {
  background: var(--high-bg);
  border-left: 3px solid var(--accent-amber);
  box-shadow: inset 0 0 20px rgba(178, 82, 51, 0.02);
}

.feed-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.feed-source {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

.feed-source.osint {
  color: var(--accent-red);
}
.feed-source.journalist {
  color: var(--accent-purple);
}

.feed-time {
  font-size: 9px;
  color: var(--text-dim);
  flex-shrink: 0;
}

.feed-title {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-family: var(--font-sans);
  font-weight: 400;
}

.feed-title a {
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.15s,
    text-decoration 0.15s;
}

.feed-title a:hover {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.feed-title a:visited {
  color: var(--text-secondary);
  opacity: 0.8;
}

.feed-title a::after {
  content: ' \2197';
  font-size: 9px;
  opacity: 0.4;
}

.feed-title a:hover::after {
  opacity: 0.8;
}

/* ─── Story Carousel (top breaking items), applies on ALL viewports ─── */
/* Previously these rules only existed inside the mobile media query, so on
       desktop the carousel rendered with raw browser defaults (blue underlined
       links, system sans-serif). */
.story-carousel {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  scroll-snap-type: x mandatory;
}
.story-carousel[style*='display: none'] {
  display: none !important;
}
.story-carousel::-webkit-scrollbar {
  display: none;
}
.story-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid rgba(16, 18, 20, 0.18);
  border-radius: 0;
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.15s,
    background 0.2s;
}
.story-card:hover {
  border-color: rgba(122, 16, 32, 0.4);
  box-shadow: 0 2px 12px rgba(16, 18, 20, 0.08);
  transform: translateY(-1px);
}
.story-card:active {
  transform: scale(0.98);
}
.story-card.critical {
  border-left: 3px solid var(--accent-red);
  box-shadow: inset 0 0 25px rgba(122, 16, 32, 0.06);
}
.story-card.critical:hover {
  border-color: var(--accent-red);
  box-shadow:
    inset 0 0 25px rgba(122, 16, 32, 0.06),
    0 2px 12px rgba(122, 16, 32, 0.15);
}
.story-card.high {
  border-left: 3px solid var(--accent-amber);
  box-shadow: inset 0 0 25px rgba(178, 82, 51, 0.06);
}
.story-card.high:hover {
  border-color: var(--accent-amber);
  box-shadow:
    inset 0 0 25px rgba(178, 82, 51, 0.06),
    0 2px 12px rgba(178, 82, 51, 0.15);
}
.story-card .story-source {
  font-size: 9px;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.story-card .story-title {
  font-size: 13.5px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.5;
  margin-top: 5px;
  font-family: var(--font-display);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-card .story-title a {
  color: var(--text-primary);
  text-decoration: none;
}
.story-card .story-title a:hover {
  color: var(--accent-red);
}
.story-card .story-title a::after {
  content: ' \2197';
  font-size: 9px;
  opacity: 0.4;
}
.story-card .story-time {
  font-size: 8px;
  color: var(--text-dim);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}
.story-card .story-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
}
.story-card .story-badge.critical {
  background: rgba(122, 16, 32, 0.18);
  color: var(--accent-red);
}
.story-card .story-badge.high {
  background: rgba(178, 82, 51, 0.18);
  color: var(--accent-amber);
}
.story-card .story-cluster {
  font-size: 8px;
  color: var(--accent-red);
  margin-top: 5px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.feed-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.keyword-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 2px;
  letter-spacing: 0.5px;
}

.keyword-tag.critical {
  background: rgba(122, 16, 32, 0.2);
  color: var(--accent-red);
}
.keyword-tag.high {
  background: rgba(178, 82, 51, 0.2);
  color: var(--accent-amber);
}
.keyword-tag.watch {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
}

/* ─── Market Data Panel ──────────────────────── */
.market-section {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(42, 54, 80, 0.35);
}

.market-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.market-section-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 10px;
  border-radius: 1px;
}

.market-section-title .collapse-arrow {
  margin-left: auto;
  font-size: 8px;
  color: var(--text-dim);
  transition: transform 0.2s;
}
.market-section-title.collapsed .collapse-arrow {
  transform: rotate(-90deg);
}

.market-section-body {
  transition: max-height 0.3s ease;
  overflow: hidden;
}
.market-section-body.collapsed {
  max-height: 0 !important;
}

.energy-label::before {
  background: var(--accent-amber);
}
.bonds-label::before {
  background: var(--accent-blue);
}
.fx-label::before {
  background: var(--accent-purple);
}
.indices-label::before {
  background: var(--accent-green);
}

.market-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 11px;
}

.market-row--tape-focus {
  outline: 2px solid rgba(122, 16, 32, 0.55);
  outline-offset: 2px;
  background: rgba(122, 16, 32, 0.08);
}

.market-news-pulse {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid rgba(16, 18, 20, 0.18);
  border-radius: 3px;
  background: rgba(16, 18, 20, 0.06);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.25;
  vertical-align: middle;
}

.market-news-pulse:hover,
.market-news-pulse:focus-visible {
  border-color: rgba(122, 16, 32, 0.45);
  color: var(--accent-red);
}

.market-news-pulse--hot {
  border-color: rgba(122, 16, 32, 0.35);
  background: rgba(122, 16, 32, 0.09);
  color: var(--accent-red);
}

.market-news-focus-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(122, 16, 32, 0.28);
  border-left: 3px solid var(--accent-red);
  background: rgba(122, 16, 32, 0.07);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.market-news-focus-banner span,
.market-news-focus-banner small {
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.market-news-focus-banner strong {
  font-size: 10px;
  letter-spacing: 0.05em;
}

.market-news-focus-banner button {
  margin-left: auto;
  border: 1px solid rgba(16, 18, 20, 0.2);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 7px;
}

.feed-item.market-news-match {
  outline: 1px solid rgba(122, 16, 32, 0.28);
  outline-offset: -1px;
  background: rgba(122, 16, 32, 0.035);
}

.impact-queue-label {
  color: var(--accent-red);
}

.impact-queue-label::before {
  background: var(--accent-red);
}

.impact-queue-count {
  margin-left: 2px;
  padding: 1px 5px;
  border: 1px solid rgba(122, 16, 32, 0.22);
  background: rgba(122, 16, 32, 0.06);
  color: var(--text-secondary);
  font-size: 8px;
  letter-spacing: 0.08em;
}

.market-impact-queue {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.market-impact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(16, 18, 20, 0.13);
  border-left: 3px solid rgba(122, 16, 32, 0.55);
  background: rgba(242, 243, 239, 0.72);
  color: var(--text-primary);
  cursor: pointer;
}

.market-impact-row:hover,
.market-impact-row:focus-visible {
  border-color: rgba(122, 16, 32, 0.32);
  background: rgba(255, 255, 255, 0.82);
  outline: 1px solid rgba(122, 16, 32, 0.32);
  outline-offset: 0;
}

.market-impact-row--act {
  border-left-color: var(--accent-red);
}

.market-impact-row--verify {
  border-left-color: var(--accent-amber);
}

.market-impact-row--fade {
  border-left-color: var(--text-dim);
}

.market-impact-top,
.market-impact-meta,
.market-impact-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.market-impact-top {
  justify-content: space-between;
}

.market-impact-asset {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.market-impact-asset strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.market-impact-asset span,
.market-impact-claim,
.market-impact-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-impact-asset span {
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.market-impact-action {
  flex: 0 0 auto;
  padding: 2px 6px;
  border: 1px solid rgba(16, 18, 20, 0.16);
  background: rgba(16, 18, 20, 0.05);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.market-impact-action--act {
  border-color: rgba(122, 16, 32, 0.3);
  background: rgba(122, 16, 32, 0.09);
  color: var(--accent-red);
}

.market-impact-action--verify {
  border-color: rgba(194, 91, 44, 0.3);
  background: rgba(194, 91, 44, 0.1);
  color: var(--accent-amber);
}

.market-impact-action--book,
.market-impact-action--move,
.market-impact-action--cluster,
.market-impact-action--watch {
  color: var(--text-primary);
}

.market-impact-meta {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.market-impact-change--up {
  color: var(--accent-green);
}

.market-impact-change--down {
  color: var(--accent-red);
}

.market-impact-repeat {
  color: var(--accent-amber);
}

.market-impact-book {
  color: var(--accent-red);
  font-weight: 900;
}

.market-impact-claim {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.market-impact-actions {
  justify-content: flex-start;
}

.market-impact-actions button {
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid rgba(16, 18, 20, 0.18);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.market-impact-actions button:hover,
.market-impact-actions button:focus-visible {
  border-color: rgba(122, 16, 32, 0.38);
  color: var(--accent-red);
  outline: none;
}

.market-impact-empty {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid rgba(16, 18, 20, 0.12);
  color: var(--text-dim);
  font-size: 9px;
  letter-spacing: 0.04em;
}

.market-impact-empty strong {
  color: var(--text-secondary);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.market-impact-workup-modal {
  border-left-color: var(--accent-amber);
}

.market-impact-workup-head strong {
  width: auto;
  min-width: 58px;
  padding: 0 10px;
}

.market-impact-workup-call {
  grid-template-columns: 0.95fr 1fr 0.72fr;
}

.market-impact-workup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.market-impact-workup-grid section,
.market-impact-workup-claims {
  padding: 12px 0;
  border-top: 1px solid rgba(16, 18, 20, 0.12);
}

.market-impact-workup-grid h3,
.market-impact-workup-claims h3 {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.market-impact-workup-grid p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.market-impact-workup-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.market-impact-workup-list div {
  min-width: 0;
}

.market-impact-workup-list strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-impact-workup-row-actions {
  display: inline-flex;
  gap: 6px;
}

.market-impact-workup-row-actions a,
.market-impact-workup-row-actions button {
  border: 1px solid rgba(16, 18, 20, 0.18);
  background: rgba(16, 18, 20, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 4px 6px;
  text-decoration: none;
}

.market-impact-workup-muted {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.market-row .name {
  color: var(--text-secondary);
  flex: 1;
}
.market-row .price {
  color: var(--text-primary);
  font-weight: 600;
  min-width: 70px;
  text-align: right;
}
.market-row .change {
  min-width: 75px;
  text-align: right;
  font-size: 10px;
}
.market-row .change.up {
  color: var(--accent-green);
}
.market-row .change.down {
  color: var(--accent-red);
}

/* ─── Economic Calendar ──────────────────────── */
.cal-date-header {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  padding: 8px 0 4px;
  border-bottom: 1px solid rgba(122, 16, 32, 0.1);
  margin-top: 2px;
}
.cal-date-header:first-child {
  margin-top: 0;
  padding-top: 4px;
}
.cal-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(42, 54, 80, 0.2);
}
.cal-item:last-child {
  border-bottom: none;
}
.cal-item.past {
  opacity: 0.45;
}
.cal-time {
  color: var(--text-dim);
  font-size: 10px;
  min-width: 58px;
  font-family: var(--font-mono);
  font-weight: 600;
  padding-top: 1px;
}
.cal-name {
  flex: 1;
  color: var(--text-secondary);
  line-height: 1.4;
}
.cal-country {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 4px;
  padding: 1px 4px;
  border-radius: 2px;
}
.cal-country-USD {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
}
.cal-country-EUR {
  background: rgba(178, 82, 51, 0.12);
  color: var(--accent-amber);
}
.cal-country-GBP {
  background: rgba(122, 16, 32, 0.12);
  color: var(--accent-cyan);
}
.cal-country-JPY {
  background: rgba(122, 16, 32, 0.12);
  color: var(--accent-red);
}
.cal-country-CNY {
  background: rgba(122, 16, 32, 0.12);
  color: var(--accent-red);
}
.cal-country-other {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-dim);
}
.cal-event-title {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 11px;
}
.cal-values {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 2px;
  display: flex;
  gap: 8px;
}
.cal-values span {
  white-space: nowrap;
}
.cal-values .actual {
  color: var(--accent-green);
  font-weight: 700;
}
.cal-values .miss {
  color: var(--accent-red);
  font-weight: 700;
}
.cal-impact {
  font-size: 7px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 1px;
}
.cal-impact.high {
  background: rgba(122, 16, 32, 0.15);
  color: var(--accent-red);
}
.cal-impact.medium {
  background: rgba(178, 82, 51, 0.15);
  color: var(--accent-amber);
}
.cal-impact.low {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
}

/* ─── Protocol Panel ─────────────────────────── */
.protocol-card {
  margin: 12px 16px;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.protocol-card h3 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.protocol-card p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.protocol-card .rule {
  padding: 6px 0;
  border-bottom: 1px solid rgba(42, 54, 80, 0.3);
  display: flex;
  gap: 8px;
}

.protocol-card .rule:last-child {
  border-bottom: none;
}

.rule-number {
  color: var(--accent-red);
  font-weight: 700;
  font-size: 10px;
  min-width: 18px;
}

.thesis-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.4;
  transition: opacity 0.15s;
  padding: 2px;
}
.thesis-edit-btn:hover {
  opacity: 0.8;
}

/* ─── Audio Controls ─────────────────────────── */
.audio-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  padding: 4px 10px;
  font-size: 10px;
  font-family: inherit;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.15s;
}

.btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.btn.active {
  background: rgba(122, 16, 32, 0.15);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}
.btn.danger {
  background: rgba(122, 16, 32, 0.1);
  color: var(--accent-red);
  border-color: rgba(122, 16, 32, 0.3);
}

/* ─── Tabs ────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 0;
}

.tab {
  padding: 6px 14px;
  font-size: 10px;
  font-family: inherit;
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
}

.tab:hover {
  color: var(--text-secondary);
}
.tab.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

/* ─── Filter ─────────────────────────────────── */
.filter-bar {
  padding: 8px 18px;
  background: var(--bg-secondary);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  padding: 4px 10px;
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid rgba(16, 18, 20, 0.18);
  border-radius: 0;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
  letter-spacing: 0.08em;
}
.filter-chip:hover {
  border-color: var(--ink, #101214);
  color: var(--ink, #101214);
}

.filter-chip.active {
  background: var(--ink, #101214);
  color: var(--paper, #e8ece7);
  border-color: var(--ink, #101214);
  box-shadow: none;
}

/* ─── Skeleton Loading ───────────────────────── */
.intel-map-tooltip {
  background: rgba(232, 236, 231, 0.95) !important;
  border: 1px solid rgba(122, 16, 32, 0.3) !important;
  color: #101214 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  border-radius: 3px !important;
}
.intel-map-tooltip::before {
  border-top-color: rgba(122, 16, 32, 0.3) !important;
}
.aircraft-tooltip {
  background: rgba(232, 236, 231, 0.97) !important;
  border: 1px solid rgba(122, 16, 32, 0.45) !important;
  color: #101214 !important;
  font-family: var(--font-mono) !important;
  padding: 6px 10px !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 6px rgba(16, 18, 20, 0.18) !important;
}
.aircraft-tooltip::before {
  border-top-color: rgba(122, 16, 32, 0.45) !important;
}
.aircraft-icon {
  background: none !important;
  border: none !important;
}
.vessel-tooltip {
  background: rgba(232, 236, 231, 0.97) !important;
  border: 1px solid rgba(178, 82, 51, 0.45) !important;
  color: #101214 !important;
  font-family: var(--font-mono) !important;
  padding: 6px 10px !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 6px rgba(16, 18, 20, 0.18) !important;
}
.vessel-tooltip::before {
  border-top-color: rgba(178, 82, 51, 0.45) !important;
}
.vessel-icon {
  background: none !important;
  border: none !important;
}
.leaflet-control-zoom a {
  background: rgba(232, 236, 231, 0.9) !important;
  color: #2b3133 !important;
  border-color: rgba(16, 18, 20, 0.12) !important;
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes pulse-loading {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}
.skeleton-line {
  height: 14px;
  margin: 8px 16px;
}
.skeleton-block {
  height: 40px;
  margin: 6px 16px;
}

/* ─── Threat Level Gauge ────────────────────── */
.threat-gauge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 9px;
  letter-spacing: 0.5px;
  transition: all 0.5s ease;
}
.threat-gauge-bar {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: rgba(16, 18, 20, 0.06);
  overflow: hidden;
  position: relative;
}
.threat-gauge-fill {
  height: 100%;
  border-radius: 3px;
  transition:
    width 1s ease,
    background 1s ease;
  box-shadow: none; /* editorial: no glow */
  opacity: 0.7;
}
.threat-gauge-label {
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 8px;
}
.threat-level-low .threat-gauge-fill {
  width: 20%;
  background: var(--accent-green);
  color: var(--accent-green);
}
.threat-level-low .threat-gauge-label {
  color: var(--accent-green);
}
.threat-level-guarded .threat-gauge-fill {
  width: 40%;
  background: var(--accent-blue);
  color: var(--accent-blue);
}
.threat-level-guarded .threat-gauge-label {
  color: var(--accent-blue);
}
.threat-level-elevated .threat-gauge-fill {
  width: 60%;
  background: var(--accent-amber);
  color: var(--accent-amber);
}
.threat-level-elevated .threat-gauge-label {
  color: var(--accent-amber);
}
.threat-level-elevated .threat-gauge {
  border-color: rgba(178, 82, 51, 0.2);
}
.threat-level-high .threat-gauge-fill {
  width: 80%;
  background: #b25233;
  color: #b25233;
}
.threat-level-high .threat-gauge-label {
  color: #b25233;
}
.threat-level-high .threat-gauge {
  border-color: rgba(249, 115, 22, 0.25);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.08);
}
.threat-level-critical .threat-gauge-fill {
  width: 100%;
  background: var(--accent-red);
  color: var(--accent-red);
}
.threat-level-critical .threat-gauge-label {
  color: var(--accent-red);
}
.threat-level-critical .threat-gauge {
  border-color: rgba(122, 16, 32, 0.3);
  box-shadow: var(--glow-red);
}
@keyframes threat-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* ─── Escalation Timeline ────────────────────── */
.escalation-timeline {
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.escalation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.escalation-track {
  position: relative;
  height: 28px;
  background: rgba(16, 18, 20, 0.02);
  border-radius: 4px;
  overflow: hidden;
}
.escalation-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  transition: width 1.5s ease;
}
.escalation-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}
.escalation-marker {
  width: 3px;
  height: 10px;
  background: rgba(16, 18, 20, 0.18);
  border-radius: 1px;
}
.escalation-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 7px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.escalation-event {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 26px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: escalation-ping 2s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.escalation-event:hover,
.escalation-event:focus-visible {
  z-index: 4;
  transform: translate(-50%, -50%) scale(1.08);
  outline: 2px solid rgba(16, 18, 20, 0.28);
  outline-offset: 2px;
}
.escalation-event--kinetic {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.feed-item.escalation-focus {
  animation: escalation-feed-focus 1.8s ease-out;
  outline: 2px solid rgba(122, 16, 32, 0.36);
  outline-offset: -2px;
}
@keyframes escalation-feed-focus {
  0% {
    background: rgba(122, 16, 32, 0.14);
  }
  100% {
    background: transparent;
  }
}
@keyframes escalation-ping {
  0%,
  100% {
    box-shadow: 0 0 0 0 currentColor;
  }
  50% {
    box-shadow: 0 0 0 4px transparent;
  }
}

/* ─── Supply Disruption Index ─────────────────── */
.sdi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 8px 12px;
  transition: border-color 0.3s;
}
.sdi-card:hover {
  border-color: rgba(122, 16, 32, 0.3);
}
.sdi-value {
  font-size: 28px;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: 0;
}
.sdi-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
}
.sdi-ring svg {
  transform: rotate(-90deg);
}

/* ─── Premium Data Cards ──────────────────────── */
.data-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.data-card:hover {
  border-color: rgba(122, 16, 32, 0.4);
  box-shadow: 0 1px 0 rgba(16, 18, 20, 0.06);
}
.data-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.data-card-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.data-card-value {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
}
.data-card-subtitle {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 4px;
}
.data-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(16, 18, 20, 0.1);
  font-size: 10px;
}
.data-card-row:last-child {
  border-bottom: none;
}

/* ─── Sparkline Charts ────────────────────────── */
.sparkline-container {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
}
.sparkline-svg {
  overflow: visible;
}

/* ─── Section Dividers ────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0 16px;
}

/* ─── Animated Data Update ────────────────────── */
@keyframes dataFlash {
  0% {
    background: rgba(122, 16, 32, 0.15);
  }
  100% {
    background: transparent;
  }
}
.data-updated {
  animation: dataFlash 0.8s ease-out;
}

/* ─── Pull to refresh indicator ──────────────── */
.pull-indicator {
  text-align: center;
  padding: 8px;
  font-size: 9px;
  color: var(--accent-cyan);
  letter-spacing: 1px;
  display: none;
}
.pull-indicator.visible {
  display: block;
  animation: fadeInOut 1s ease;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes pulse-text {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ─── Keyboard Shortcuts Modal ────────────────── */
.shortcuts-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(16, 18, 20, 0.5);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.shortcuts-overlay.visible {
  display: flex;
}
.shortcuts-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px 32px;
  max-width: 400px;
  width: 90%;
}
.shortcuts-modal h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-cyan);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.shortcut-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(42, 54, 80, 0.3);
  font-size: 11px;
}
.shortcut-row:last-child {
  border-bottom: none;
}
.shortcut-key {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--accent-cyan);
  font-weight: 700;
  min-width: 28px;
  text-align: center;
}
.shortcut-desc {
  color: var(--text-secondary);
}

/* ─── Command Palette (Cmd+K) ──────────────────────────────── */
.cmdk-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(16, 18, 20, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 10020;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  animation: cmdkFadeIn 0.12s ease-out;
}
.cmdk-overlay.visible {
  display: flex;
}
@keyframes cmdkFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.cmdk-open {
  overflow: hidden;
}
.cmdk-modal {
  background: var(--bg-card, #faf6ec);
  border: 1px solid var(--border, rgba(16, 18, 20, 0.14));
  border-radius: 10px;
  width: min(640px, 92vw);
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 20px 48px rgba(16, 18, 20, 0.28),
    0 6px 14px rgba(16, 18, 20, 0.12);
  overflow: hidden;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  animation: cmdkPopIn 0.14s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes cmdkPopIn {
  from {
    transform: translateY(-4px) scale(0.99);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.cmdk-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
}
.cmdk-glyph {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--accent-oxblood, #7a1020);
  font-weight: 700;
  letter-spacing: 0.05em;
  user-select: none;
}
.cmdk-search-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  color: var(--text-primary, #101214);
  padding: 2px 0;
  min-height: 28px;
}
.cmdk-search-row input::placeholder {
  color: var(--text-dim, #9a8a76);
  font-weight: 400;
}
.cmdk-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #9a8a76);
  white-space: nowrap;
}
.cmdk-list {
  overflow-y: auto;
  max-height: 56vh;
  padding: 4px 0;
}
.cmdk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition:
    background 0.08s ease,
    border-color 0.08s ease;
}
.cmdk-row.is-selected {
  background: rgba(122, 16, 32, 0.08);
  border-left-color: var(--accent-oxblood, #7a1020);
}
.cmdk-row:hover {
  background: rgba(16, 18, 20, 0.04);
}
.cmdk-kind {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(16, 18, 20, 0.06);
  color: var(--text-secondary, #4a3f34);
  min-width: 54px;
  text-align: center;
  font-weight: 700;
  flex-shrink: 0;
}
.cmdk-kind--tracker {
  color: #7a1020;
  background: rgba(122, 16, 32, 0.1);
}
.cmdk-kind--replay {
  color: #5a4a2e;
  background: rgba(90, 74, 46, 0.12);
}
.cmdk-kind--proof {
  color: #3d5a3d;
  background: rgba(61, 90, 61, 0.12);
}
.cmdk-kind--filter {
  color: #2c4a6e;
  background: rgba(44, 74, 110, 0.12);
}
.cmdk-kind--panel {
  color: #6e4a2c;
  background: rgba(110, 74, 44, 0.12);
}
.cmdk-kind--action {
  color: #555;
  background: rgba(16, 18, 20, 0.08);
}
.cmdk-kind--page {
  color: #333;
  background: rgba(16, 18, 20, 0.06);
}
.cmdk-body {
  flex: 1;
  min-width: 0;
}
.cmdk-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #101214);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-sub {
  font-size: 11px;
  color: var(--text-secondary, #5f696b);
  line-height: 1.3;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmdk-empty {
  padding: 24px 20px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim, #9a8a76);
}
.cmdk-empty code {
  background: rgba(16, 18, 20, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  margin: 0 2px;
}
.cmdk-footer {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  padding: 7px 14px;
  border-top: 1px solid rgba(16, 18, 20, 0.08);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--text-dim, #9a8a76);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(16, 18, 20, 0.02);
}

/* Flash highlight when the palette scrolls to a panel */
.cmdk-flash {
  animation: cmdkPanelFlash 0.9s ease-out;
}
@keyframes cmdkPanelFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(122, 16, 32, 0.55);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(122, 16, 32, 0);
  }
}

/* Toast for export / copy feedback */
.cmdk-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--text-primary, #101214);
  color: #e8ece7;
  padding: 9px 18px;
  border-radius: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  z-index: 10030;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.cmdk-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Deep-link share button (next to the search bar) */
.deep-link-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-dim, #9a8a76);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
  z-index: 2;
}
.deep-link-btn:hover {
  color: var(--accent-oxblood, #7a1020);
  background: rgba(122, 16, 32, 0.08);
  border-color: rgba(122, 16, 32, 0.2);
}
.deep-link-btn:focus-visible {
  outline: none;
  border-color: var(--accent-oxblood, #7a1020);
}
.deep-link-icon {
  display: inline-block;
  transform: rotate(-30deg);
}

@media (max-width: 640px) {
  .cmdk-overlay {
    padding-top: 4vh;
  }
  .cmdk-modal {
    width: 94vw;
    max-height: 88vh;
  }
  .cmdk-list {
    max-height: 70vh;
  }
  .cmdk-hint {
    display: none;
  }
  .cmdk-kind {
    min-width: 42px;
    font-size: 8px;
  }
}

/* ─── SA Ratings ──────────────────────────────── */
.sa-row {
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 11px;
  border-bottom: 1px solid rgba(42, 54, 80, 0.3);
}
.sa-row:last-child {
  border-bottom: none;
}
.sa-sym {
  color: var(--text-secondary);
  width: 55px;
  font-weight: 600;
}
.sa-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  margin-right: 4px;
  min-width: 52px;
  text-align: center;
  display: inline-block;
}
.sa-badge.strong-buy {
  background: rgba(61, 107, 46, 0.2);
  color: var(--accent-green);
}
.sa-badge.buy {
  background: rgba(61, 107, 46, 0.12);
  color: #5d8a42;
}
.sa-badge.hold {
  background: rgba(178, 82, 51, 0.15);
  color: var(--accent-amber);
}
.sa-badge.sell {
  background: rgba(122, 16, 32, 0.15);
  color: var(--accent-red);
}
.sa-badge.strong-sell {
  background: rgba(122, 16, 32, 0.25);
  color: var(--accent-red);
}
.sa-grades {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.sa-grade {
  font-size: 8px;
  width: 18px;
  text-align: center;
  padding: 1px 0;
  border-radius: 2px;
  font-weight: 700;
}
.sa-grade.a {
  color: #3d6b2e;
}
.sa-grade.b {
  color: #5d8a42;
}
.sa-grade.c {
  color: var(--accent-amber);
}
.sa-grade.d {
  color: #9a2a38;
}
.sa-grade.f {
  color: var(--accent-red);
}

/* ─── Pin Button ───────────────────────────────── */
.feed-item {
  position: relative;
}
.pin-btn {
  position: absolute;
  right: 8px;
  top: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  opacity: 0.2;
  transition: opacity 0.15s;
  padding: 2px;
  z-index: 2;
}
.feed-item:hover .pin-btn {
  opacity: 0.6;
}
.pin-btn:hover {
  opacity: 1 !important;
}
.pin-btn.pinned {
  opacity: 0.9;
}
.feed-share-inline,
.feed-report-inline {
  position: absolute;
  right: 36px;
  top: 7px;
  z-index: 2;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-radius: 2px;
  background: rgba(246, 247, 244, 0.92);
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0;
  text-transform: uppercase;
  transition:
    opacity 0.14s ease,
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}

.feed-report-inline {
  right: 92px;
  color: var(--oxblood);
  border-color: rgba(122, 16, 32, 0.16);
}

.feed-item:hover .feed-share-inline,
.feed-item:hover .feed-report-inline,
.feed-report-inline:focus-visible,
.feed-share-inline:focus-visible {
  opacity: 0.82;
}
.feed-report-inline:hover,
.feed-report-inline:focus-visible,
.feed-share-inline:hover,
.feed-share-inline:focus-visible {
  border-color: rgba(122, 16, 32, 0.3);
  background: var(--text-primary);
  color: var(--surface-page);
  outline: none;
  opacity: 1;
}
@media (max-width: 1023px) {
  .pin-btn {
    opacity: 0.5;
  }
  .feed-share-inline {
    right: 34px;
    min-height: 32px;
    opacity: 0.74;
    padding: 5px 8px;
  }
  .feed-report-inline {
    display: none;
  }
}
.pinned-badge {
  display: inline-block;
  background: rgba(178, 82, 51, 0.15);
  color: var(--accent-amber);
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

/* ─── Export Tooltip ────────────────────────────── */
.export-tooltip {
  position: absolute;
  top: -24px;
  right: 0;
  background: var(--accent-green);
  color: var(--bg-primary);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  letter-spacing: 0.5px;
}
.export-tooltip.visible {
  opacity: 1;
}

/* ─── Empty State ────────────────────────────── */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0% {
    content: '';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
}

/* ─── Sound toggle ───────────────────────────── */
.sound-toggle {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
}

.sound-toggle:hover {
  background: var(--bg-card);
}

/* ─── Mobile Bottom Nav ───────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0px); /* notched iPhones */
}
.mobile-nav-inner {
  display: flex;
  width: 100%;
  overflow: visible;
}
.mobile-nav-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 2px;
  text-align: center;
  font-size: 8px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  background: none;
  border: none;
  border-top: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.15s;
  overflow: hidden;
  white-space: nowrap;
}
.mobile-nav-tab.active {
  color: var(--accent-cyan);
  border-top-color: var(--accent-cyan);
}
.mobile-nav-tab .nav-icon {
  font-size: 14px;
}

/* ─── Mobile Search ──────────────────────────── */
.mobile-search {
  display: none;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.mobile-search .search-input {
  width: 100%;
  padding: 8px 10px 8px 28px;
  font-size: 16px;
  min-height: 44px;
}

/* ─── Trial Countdown Banner ────────────────── */
.trial-banner {
  background: rgba(122, 16, 32, 0.08);
  border-bottom: 1px solid rgba(122, 16, 32, 0.2);
  padding: 6px 16px;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: 0.5px;
  font-family: 'Courier New', monospace;
}
.trial-banner a {
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 700;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--accent-cyan);
  border-radius: 3px;
  font-size: 10px;
}
.trial-banner a:hover {
  background: rgba(122, 16, 32, 0.15);
}
.trial-banner.urgent {
  background: rgba(122, 16, 32, 0.08);
  border-bottom-color: rgba(122, 16, 32, 0.3);
  color: var(--accent-red);
}
.trial-banner.urgent a {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

/* ─── Saved Items Panel ─────────────────────── */
.saved-section {
  border-left: 2px solid var(--accent-amber);
}
.saved-item {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.saved-item:hover {
  background: var(--bg-card-hover);
}
.saved-item .saved-title {
  font-size: 11px;
  color: var(--accent-cyan);
}
.saved-item .saved-title a {
  color: inherit;
  text-decoration: none;
}
.saved-item .saved-title a:hover {
  text-decoration: underline;
}
.saved-item .saved-meta {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}
.saved-unpin {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
}
.saved-unpin:hover {
  color: var(--accent-red);
}
.saved-empty {
  padding: 16px;
  text-align: center;
  font-size: 10px;
  color: var(--text-dim);
}
.saved-count-badge {
  background: var(--accent-amber);
  color: var(--bg-primary);
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  margin-left: 4px;
}

/* ─── Portfolio Prompt ───────────────────────── */
.portfolio-prompt {
  background: rgba(122, 16, 32, 0.06);
  border: 1px solid rgba(122, 16, 32, 0.2);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.portfolio-prompt button {
  background: var(--accent-cyan);
  color: var(--bg-primary);
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.portfolio-prompt .dismiss-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}

/* ─── Custom Keywords ───────────────────────── */
.keywords-section {
  padding: 8px 10px;
}
.keywords-add {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.keywords-add input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 11px;
  outline: none;
}
.keywords-add input:focus {
  border-color: var(--accent-cyan);
}
.keywords-add select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 4px 6px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
  outline: none;
}
.keywords-add button {
  background: var(--accent-cyan);
  color: var(--bg-primary);
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
}
.keyword-custom-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.keyword-custom-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
}
.keyword-custom-item.critical {
  background: rgba(122, 16, 32, 0.15);
  color: var(--accent-red);
}
.keyword-custom-item.high {
  background: rgba(178, 82, 51, 0.15);
  color: var(--accent-amber);
}
.keyword-custom-item.watch {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
}
.keyword-custom-item .kw-delete {
  cursor: pointer;
  opacity: 0.6;
  font-size: 10px;
}
.keyword-custom-item .kw-delete:hover {
  opacity: 1;
}

/* ─── Responsive ─────────────────────────────── */
/* Keep the 5-track (panel | resizer | centre | resizer | panel)
   shape even when tightening the outer panels, so explicit
   grid-column placements on the panels and resizers continue to
   land in the correct slots. A 3-track override here used to
   overlap with #rightPanel's grid-column: 5 and leave the right
   slot empty on narrow desktop widths. */
@media (max-width: 1200px) {
  .main {
    grid-template-columns: 280px 6px minmax(0, 1fr) 6px 280px;
  }
}
/* ═══════════════════════════════════════════════════════════════════
       MOBILE-FIRST LAYOUT  ≤ 1023px
       Desktop (≥ 1024px) is completely untouched above this block.
    ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* ── Body: flex column, fill the viewport ─────────────────────── */
  html {
    height: 100%;
    overflow: hidden;
  }
  body {
    height: 100%;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Header: dark ink bar, premium Bloomberg feel ─────────────── */
  .header {
    flex-shrink: 0;
    position: sticky !important;
    top: 0;
    z-index: 1000;
    padding: 0 16px;
    min-height: 52px;
    height: auto;
    background: var(--ink);
    border-bottom: 1px solid rgba(232, 236, 231, 0.1);
    gap: 10px;
    flex-wrap: nowrap;
  }
  /* Remove scanline effect on mobile */
  .header::after {
    display: none;
  }

  /* Logo: steel on dark */
  .logo {
    color: var(--paper);
    font-size: 18px;
  }
  .logo-sub {
    display: none;
  }

  /* Status bar: tighter, steel text */
  .header .status-bar {
    gap: 8px;
  }
  .header .status-indicator {
    display: none;
  }
  .header .status-indicator[data-mobile-show] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-family: var(--font-mono);
    letter-spacing: 0.5px;
    color: rgba(232, 236, 231, 0.6);
  }
  .header .status-indicator[data-mobile-show] span {
    color: rgba(232, 236, 231, 0.6);
  }
  #wsLabel {
    color: rgba(232, 236, 231, 0.7) !important;
  }
  #criticalCount {
    color: #ef4444 !important;
    font-weight: 700;
  }

  /* Hide non-essential header items */
  .header .search-container {
    display: none;
  }
  .header .conn-quality {
    display: none;
  }
  .sound-toggle {
    display: none;
  }
  .header a[href*='audit'] {
    display: none !important;
  }
  .header #lastUpdate {
    display: none;
  }
  .header #user-tier {
    display: none;
  }
  #user-email {
    display: none;
  }
  .header #user-info > button[onclick*='handleLogout'] {
    display: none;
  }

  /* Settings gear: steel on dark */
  .settings-gear-btn {
    color: rgba(232, 236, 231, 0.55);
    border-color: rgba(232, 236, 231, 0.15);
    font-size: 16px;
    padding: 4px 10px;
    min-height: 36px;
  }
  .settings-gear-btn:hover {
    color: var(--paper);
    border-color: rgba(232, 236, 231, 0.35);
    background: rgba(232, 236, 231, 0.06);
  }
  .settings-dropdown {
    background: var(--ink);
    border-color: rgba(232, 236, 231, 0.15);
  }
  .settings-dropdown button {
    color: rgba(232, 236, 231, 0.8);
    font-size: 13px;
  }
  .settings-dropdown button:hover {
    background: rgba(232, 236, 231, 0.08);
  }

  /* ── Feed health bar: hidden (clutter) ────────────────────────── */
  .feed-health-bar {
    display: none;
  }

  /* ── Alert banner: full-width, readable ───────────────────────── */
  .alert-banner {
    padding: 10px 16px;
    font-size: 12px;
    line-height: 1.5;
    max-height: none !important;
    white-space: normal !important;
    flex-shrink: 0;
  }

  /* ── Trial banner ─────────────────────────────────────────────── */
  .trial-banner {
    font-size: 11px;
    padding: 6px 14px;
  }
  .trial-banner a {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* ── Desktop nav: off ─────────────────────────────────────────── */
  .desktop-nav {
    display: none !important;
  }
  .desktop-view {
    display: none !important;
  }
  #desktopViewDashboard {
    display: contents !important;
  }

  /* Column resizers are desktop-only */
  .panel-resizer {
    display: none !important;
  }

  /* ── Main grid: single column, full height ────────────────────── */
  .main {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0;
    background: var(--bg-primary);
    /* flex-basis 0 lets the container grow to fill remaining space.
           Do NOT set height:0 here, overflow:hidden clips at the CSS height,
           which would swallow absolutely-positioned children (e.g. mobileMapPanel). */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    position: relative;
  }
  .ticker-strip {
    flex-shrink: 0;
    flex-grow: 0;
    grid-column: auto;
  }
  #threatStrip {
    flex-shrink: 0;
    flex-grow: 0;
  }

  /* ── Panels: fill remaining space, independently scrollable ─────── */
  .panel {
    max-height: none !important;
    /* Same reasoning, no height:0; flex-basis handles the grow. */
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    position: relative;
    scroll-behavior: smooth;
  }
  .panel.mobile-hidden {
    display: none !important;
  }

  /* ── Bottom navigation bar ────────────────────────────────────── */
  .mobile-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10002;
    background: var(--ink);
    border-top: 1px solid rgba(232, 236, 231, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 16px rgba(16, 18, 20, 0.35);
  }
  .mobile-nav-inner {
    display: flex;
    width: 100%;
    overflow: visible;
  }
  .mobile-nav-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 2px 10px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.7px;
    color: rgba(232, 236, 231, 0.35);
    background: none;
    border: none;
    cursor: pointer;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: color 0.12s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    overflow: hidden;
  }
  .mobile-nav-tab:active {
    opacity: 0.65;
  }
  .mobile-nav-tab .nav-icon {
    font-size: 15px;
    line-height: 1;
  }
  .mobile-nav-tab.active {
    color: var(--paper);
  }
  .mobile-nav-tab.active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--oxblood);
    border-radius: 0 0 2px 2px;
  }

  /* Preview gate: sit above the nav */
  .preview-gate {
    bottom: 56px !important;
  }
  .preview-gate.active {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── Panel header: sticky within the panel ────────────────────── */
  .panel-header {
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
  }
  .panel-title {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  /* ── Horizontally-scrollable sub-tab bars ─────────────────────── */
  .tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 8px;
  }
  .tab-bar::-webkit-scrollbar {
    display: none;
  }
  .tab {
    padding: 10px 14px;
    min-height: 44px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 10px;
    border-radius: 0;
  }

  /* ── Filter chips ─────────────────────────────────────────────── */
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 12px;
    gap: 6px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
  }
  .filter-bar::-webkit-scrollbar {
    display: none;
  }
  .filter-chip {
    padding: 7px 16px;
    min-height: 36px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 10px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--accent-cyan);
    background: rgba(122, 16, 32, 0.08);
    border: 1px solid rgba(122, 16, 32, 0.2);
    border-radius: 4px;
    padding: 6px 12px;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  /* ─── Breaking news pulse ─── */
  .feed-item.breaking-flash {
    animation: breakingPulse 0.6s ease;
  }
  @keyframes breakingPulse {
    0% {
      background: var(--critical-bg);
    }
    50% {
      background: rgba(122, 16, 32, 0.2);
    }
    100% {
      background: var(--critical-bg);
    }
  }

  /* ── News feed cards: premium, readable ───────────────────────── */
  .feed-item {
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--border);
    position: relative;
  }
  .verification-badge.confirmed {
    background: rgba(61, 107, 46, 0.25);
    color: #34d399;
    border: 1px solid rgba(61, 107, 46, 0.4);
  }
  .verification-badge.developing {
    background: rgba(178, 82, 51, 0.25);
    color: #9a7a20;
    border: 1px solid rgba(178, 82, 51, 0.4);
  }
  .verification-badge.unverified {
    background: rgba(122, 16, 32, 0.18);
    color: #9a2a38;
    border: 1px solid rgba(122, 16, 32, 0.3);
    animation: unverifiedPulse 3s ease-in-out infinite;
  }
  .verification-badge.contested {
    background: rgba(122, 16, 32, 0.25);
    color: var(--signal-critical, #7a1020);
    border: 1px solid rgba(122, 16, 32, 0.5);
    font-weight: 800;
  }
  @keyframes unverifiedPulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.7;
    }
  }

  /* ─── Telegram / single-source risk styling ─── */
  .feed-item.telegram-unverified {
    border-left: 3px solid rgba(122, 16, 32, 0.5);
    background: rgba(122, 16, 32, 0.03);
  }
  .feed-title a {
    color: inherit;
    text-decoration: none;
    font-size: inherit !important;
    line-height: inherit !important;
  }
  .feed-title a:active {
    opacity: 0.7;
  }

  .feed-meta {
    font-size: 10px !important;
    margin-bottom: 8px;
    color: var(--text-dim);
    letter-spacing: 0.05em;
  }
  .feed-keywords {
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
  }
  .keyword-tag {
    padding: 3px 9px;
    font-size: 9px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  /* ── Market data: larger prices ───────────────────────────────── */
  .market-row .price {
    font-size: 15px !important;
    font-weight: 700;
  }
  .market-row .change {
    font-size: 12px !important;
    font-weight: 600;
  }
  #rightPanel {
    scroll-snap-type: y proximity;
  }
  #rightPanel .market-section {
    scroll-snap-align: start;
    scroll-margin-top: 8px;
  }

  /* ── Forms ────────────────────────────────────────────────────── */
  /* Prevent iOS auto-zoom on focus */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  .keywords-add {
    flex-wrap: wrap;
  }
  .keywords-add input {
    min-width: 0;
    min-height: 44px;
  }
  .keywords-add select {
    min-height: 44px;
  }
  .keywords-add button {
    min-height: 44px;
  }
  .portfolio-prompt {
    flex-direction: column;
    text-align: center;
  }

  /* ── Buttons ──────────────────────────────────────────────────── */
  .btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  /* ── Leaflet map: allow native touch + pinch-zoom ─────────────── */
  .leaflet-container {
    touch-action: pan-x pan-y pinch-zoom !important;
  }

  /* ── Hide desktop-only embedded map section in feed view ───────── */
  #intelMapSection {
    display: none !important;
  }

  /* ── Story carousel on mobile ────────────────────────────────────
         Keep the carousel horizontal so it stays a compact "top breaking"
         strip above the feed. The previous column layout stacked ten full-
         width cards into a 1,400px wall that pushed the main feed off-
         screen. Horizontal scroll-snap gives the swipeable row we want. */
  .story-carousel {
    flex-direction: row !important;
    height: auto !important;
    max-height: 170px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 14px !important;
  }
  .story-carousel .story-card {
    flex: 0 0 70vw !important;
    max-width: 260px !important;
    scroll-snap-align: start !important;
  }
  /* Clamp the headline inside each card to 3 lines so every card in
         the row has the same height and the strip doesn't jitter as new
         items arrive. */
  .story-carousel .story-card .story-title {
    -webkit-line-clamp: 3 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ── Overflow / modals ────────────────────────────────────────── */
  html,
  body {
    overflow-x: hidden;
  }
  .modal-content,
  .alert-modal {
    max-width: calc(100vw - 24px) !important;
    width: 100% !important;
  }
  .feed-item,
  .feed-title {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── Ticker ───────────────────────────────────────────────────── */
  .ticker-item {
    font-size: 10px;
  }

  /* ── Pin button ───────────────────────────────────────────────── */
  .pin-btn {
    opacity: 0.5;
  }
} /* end @media (max-width: 1023px) */

/* ── Sub-380px fine-tuning ──────────────────────────────────────── */
@media (max-width: 380px) {
  .feed-title {
    font-size: 14px !important;
  }
  .logo {
    font-size: 16px;
  }
  .mobile-nav-tab {
    font-size: 7px;
    letter-spacing: 0.4px;
  }
  .mobile-nav-tab .nav-icon {
    font-size: 13px;
  }
}

/* ─── Progressive Disclosure (tap to expand feed cards) ─────────── */
.feed-item {
  position: relative;
}
.feed-item .feed-expand-zone {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.feed-item.expanded .feed-expand-zone {
  max-height: none;
}
.feed-item .feed-detail {
  padding: 10px 0 4px;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.6;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.feed-item .feed-detail-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(16, 18, 20, 0.04);
}
.feed-item .feed-detail-actions a,
.feed-item .feed-detail-actions button {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent-cyan);
  background: rgba(122, 16, 32, 0.08);
  border: 1px solid rgba(122, 16, 32, 0.2);
  border-radius: 4px;
  padding: 6px 12px;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* ─── Breaking news pulse ─────────────────────── */
.feed-item.breaking-flash {
  animation: breakingPulse 0.6s ease;
}
@keyframes breakingPulse {
  0% {
    background: var(--critical-bg);
  }
  50% {
    background: rgba(239, 68, 68, 0.2);
  }
  100% {
    background: var(--critical-bg);
  }
}

/* ─── Verification badge ──────────────────────── */
.verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.8px;
  margin-left: 6px;
  text-transform: uppercase;
}
.verification-badge.confirmed {
  background: rgba(61, 107, 46, 0.25);
  color: #34d399;
  border: 1px solid rgba(61, 107, 46, 0.4);
}
.verification-badge.developing {
  background: rgba(178, 82, 51, 0.25);
  color: #9a7a20;
  border: 1px solid rgba(178, 82, 51, 0.4);
}
.verification-badge.unverified {
  background: rgba(239, 68, 68, 0.18);
  color: #9a2a38;
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: unverifiedPulse 3s ease-in-out infinite;
}
.verification-badge.contested {
  background: rgba(122, 16, 32, 0.25);
  color: var(--signal-critical, #7a1020);
  border: 1px solid rgba(122, 16, 32, 0.5);
  font-weight: 800;
}
@keyframes unverifiedPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ─── Read/Unread State ──────────── */
.feed-item.read {
  opacity: 0.6;
}
.feed-item.read .feed-title a {
  color: var(--text-dim);
}

/* ─── Lead Story ──────────── */
#leadStory {
  padding: 20px 24px;
  border-bottom: 2px solid var(--border);
}
.lead-kicker {
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--signal-critical, #7a1020);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lead-headline {
  font-family: var(--font-sans, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 0;
}
.lead-context {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.lead-meta {
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── Trust Pill (single composite trust indicator) ──────────── */
.trust-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-right: 6px;
  white-space: nowrap;
  vertical-align: middle;
}
.trust-confirmed {
  background: rgba(61, 107, 46, 0.25);
  color: #34d399;
  border: 1px solid rgba(61, 107, 46, 0.4);
}
.trust-verified {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan, #06b6d4);
  border: 1px solid rgba(6, 182, 212, 0.3);
}
.trust-developing {
  background: rgba(178, 82, 51, 0.2);
  color: #9a7a20;
  border: 1px solid rgba(178, 82, 51, 0.35);
}
.trust-unverified {
  background: rgba(122, 16, 32, 0.18);
  color: #9a2a38;
  border: 1px solid rgba(122, 16, 32, 0.3);
  animation: unverifiedPulse 3s ease-in-out infinite;
}
.trust-contested {
  background: rgba(122, 16, 32, 0.3);
  color: var(--signal-critical, #7a1020);
  border: 1px solid rgba(122, 16, 32, 0.5);
  font-weight: 900;
}

/* Secondary badge line (source count, impact, translated, sentiment) */
.feed-meta-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 2px 0 0 0;
  font-size: 9px;
}

.speed-audit-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  border: 1px solid rgba(16, 18, 20, 0.18);
  border-radius: 2px;
  background: rgba(243, 246, 242, 0.88);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.speed-audit-badge--checked,
.speed-audit-badge--confirmed {
  border-color: rgba(61, 107, 46, 0.34);
  background: rgba(61, 107, 46, 0.1);
  color: var(--accent-green);
}

.speed-audit-badge--single-source,
.speed-audit-badge--single {
  border-color: rgba(154, 122, 32, 0.34);
  background: rgba(154, 122, 32, 0.09);
  color: #7a621a;
}

.speed-audit-badge--contradicted {
  border-color: rgba(122, 16, 32, 0.36);
  background: rgba(122, 16, 32, 0.09);
  color: var(--signal-critical, #7a1020);
}

.feed-speed-audit-line {
  margin: 0 0 7px;
  padding: 6px 7px;
  border-left: 3px solid rgba(16, 18, 20, 0.28);
  background: rgba(16, 18, 20, 0.045);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.35;
}

.feed-speed-receipt-strip {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 6px 0 0;
  padding: 0;
  border: 1px solid rgba(16, 18, 20, 0.12);
  border-left: 3px solid rgba(154, 122, 32, 0.55);
  background: rgba(16, 18, 20, 0.035);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  text-align: left;
}

.feed-speed-receipt-strip span {
  display: inline-flex;
  flex: 1 1 25%;
  align-items: baseline;
  gap: 0.35rem;
  min-height: 24px;
  min-width: 0;
  max-width: none;
  padding: 4px 7px;
  border-right: 1px solid rgba(16, 18, 20, 0.1);
  white-space: nowrap;
  overflow: hidden;
}

.feed-speed-receipt-strip span:last-child {
  border-right: 0;
}

.feed-speed-receipt-strip small {
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.feed-speed-receipt-strip b {
  color: var(--text-primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feed-speed-receipt-strip--checked,
.feed-speed-receipt-strip--confirmed {
  border-left-color: rgba(61, 107, 46, 0.72);
  background: rgba(61, 107, 46, 0.055);
}

.feed-speed-receipt-strip--late,
.speed-audit-badge--late {
  border-color: rgba(122, 16, 32, 0.28);
  border-left-color: rgba(122, 16, 32, 0.82);
  background: rgba(122, 16, 32, 0.07);
  color: var(--accent-red);
}

.feed-speed-receipt-strip--contradicted {
  border-left-color: rgba(122, 16, 32, 0.75);
  background: rgba(122, 16, 32, 0.055);
}

.source-discipline-badge {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 2px 6px;
  border: 1px solid rgba(16, 18, 20, 0.16);
  border-radius: 2px;
  background: rgba(16, 18, 20, 0.055);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.source-discipline-badge--telegram,
.source-discipline-badge--rumor,
.source-discipline-badge--single {
  border-color: rgba(122, 16, 32, 0.34);
  background: rgba(122, 16, 32, 0.08);
  color: var(--accent-red);
}

.source-discipline-badge--translated {
  border-color: rgba(178, 82, 51, 0.36);
  background: rgba(178, 82, 51, 0.09);
  color: #8a4f18;
}

.source-discipline-badge--checked {
  border-color: rgba(61, 107, 46, 0.28);
  background: rgba(61, 107, 46, 0.09);
  color: var(--accent-green);
}

.feed-item.source-discipline-risk {
  border-left: 3px solid rgba(122, 16, 32, 0.52);
  background: rgba(122, 16, 32, 0.035);
}

/* ─── My Desk Impact: book, thesis, proof, and tape in one click ──────── */
.desk-impact-strip {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(86px, 1fr) minmax(90px, 1fr) minmax(96px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-left: 3px solid var(--text-dim);
  border-radius: 4px;
  background: rgba(243, 246, 242, 0.86);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-width: 0;
}

.desk-impact-strip:hover,
.desk-impact-strip:focus-visible {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(16, 18, 20, 0.24);
}

.desk-impact-strip--book {
  border-left-color: var(--accent-cyan);
}
.desk-impact-strip--thesis {
  border-left-color: var(--accent-amber);
}
.desk-impact-strip--market {
  border-left-color: var(--accent-green);
}
.desk-impact-strip--alert {
  border-left-color: var(--accent-red);
}

.desk-impact-kicker,
.desk-impact-action,
.desk-impact-score,
.desk-impact-strip small {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.desk-impact-kicker {
  color: var(--text-dim);
  font-size: 8px;
  white-space: nowrap;
}

.desk-impact-strip strong {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  white-space: nowrap;
}

.desk-impact-symbols {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.desk-impact-token {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-radius: 3px;
  background: rgba(16, 18, 20, 0.04);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.desk-impact-action {
  color: var(--accent-red);
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desk-impact-score {
  justify-self: end;
  width: 30px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(16, 18, 20, 0.12);
  color: var(--text-primary);
  font-size: 10px;
  font-variant-numeric: tabular-nums lining-nums;
}

.desk-impact-strip small {
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.claim-tape-strip {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(118px, 0.9fr) minmax(96px, 0.72fr) minmax(112px, 0.85fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(16, 18, 20, 0.16);
  border-left: 3px solid var(--text-dim);
  border-radius: 3px;
  background: rgba(232, 236, 231, 0.78);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  font: inherit;
  min-width: 0;
}

.claim-tape-strip:hover,
.claim-tape-strip:focus-visible {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(16, 18, 20, 0.28);
}

.claim-tape-strip--market {
  border-left-color: var(--accent-green);
}

.claim-tape-strip--confirmed,
.claim-tape-strip--checked {
  border-left-color: var(--accent-cyan);
}

.claim-tape-strip--verify,
.claim-tape-strip--contested {
  border-left-color: var(--accent-red);
}

.claim-tape-strip--repeat {
  border-left-color: var(--text-dim);
  background: rgba(122, 111, 94, 0.08);
}

.claim-tape-kicker,
.claim-tape-proof,
.claim-tape-market,
.claim-tape-strip small {
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.claim-tape-kicker {
  color: var(--text-dim);
  font-size: 8px;
  white-space: nowrap;
}

.claim-tape-strip strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.15;
  min-width: 0;
}

.claim-tape-proof,
.claim-tape-market {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.claim-tape-market {
  color: var(--accent-red);
  justify-self: end;
}

.claim-tape-strip small {
  grid-column: 2 / -1;
  color: var(--text-dim);
  font-size: 8px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Trust Readout: one row answers trust, receipts, freshness, and next check. */
.trust-readout {
  width: 100%;
  display: grid;
  grid-template-columns:
    minmax(104px, 0.82fr) minmax(118px, 1fr) minmax(110px, 0.9fr)
    minmax(150px, 1.24fr) 48px;
  align-items: stretch;
  gap: 0;
  margin-top: 8px;
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-left: 3px solid var(--text-dim);
  border-radius: 2px;
  background: rgba(246, 247, 244, 0.82);
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  text-align: left;
}

.trust-readout:hover,
.trust-readout:focus-visible {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(16, 18, 20, 0.26);
}

.trust-readout--market,
.trust-readout--confirmed,
.trust-readout--checked {
  border-left-color: var(--accent-green);
}

.trust-readout--verify,
.trust-readout--contested {
  border-left-color: var(--accent-red);
}

.trust-readout--repeat {
  border-left-color: var(--text-dim);
  background: rgba(122, 111, 94, 0.08);
}

.trust-readout-cell {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border-right: 1px solid rgba(16, 18, 20, 0.1);
}

.trust-readout-cell span,
.trust-readout-cell strong,
.trust-readout-cell small,
.trust-readout-cta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trust-readout-cell span {
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.trust-readout-cell strong {
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.12;
  white-space: nowrap;
}

.trust-readout-cell small {
  color: var(--text-secondary);
  font-size: 8.5px;
  font-weight: 680;
  line-height: 1.2;
  white-space: nowrap;
}

.trust-readout-cell--status strong {
  color: var(--accent-red);
}

.trust-readout--market .trust-readout-cell--status strong,
.trust-readout--confirmed .trust-readout-cell--status strong,
.trust-readout--checked .trust-readout-cell--status strong {
  color: var(--accent-green);
}

.trust-readout-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-red);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.desk-impact-muted {
  color: var(--text-dim);
}

.desk-impact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: none;
  align-items: stretch;
  justify-content: flex-end;
  background: rgba(16, 18, 20, 0.42);
}

.desk-impact-modal {
  width: min(560px, 96vw);
  height: 100%;
  overflow-y: auto;
  padding: 18px;
  background: var(--bg-card);
  border-left: 2px solid var(--accent-red);
  box-shadow: -18px 0 40px rgba(16, 18, 20, 0.28);
  color: var(--text-primary);
}

.desk-impact-close {
  float: right;
  border: 1px solid rgba(16, 18, 20, 0.18);
  background: rgba(16, 18, 20, 0.04);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 7px 10px;
}

.desk-impact-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.desk-impact-modal-head span {
  color: var(--accent-red);
  font-size: 11px;
}

.desk-impact-modal-head strong {
  width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(122, 16, 32, 0.28);
  background: rgba(122, 16, 32, 0.08);
  color: var(--accent-red);
  font-size: 13px;
  font-variant-numeric: tabular-nums lining-nums;
}

.desk-impact-modal h2 {
  clear: both;
  margin: 0 0 8px 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.desk-impact-modal-meta {
  margin-bottom: 16px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.desk-impact-call {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-bottom: 16px;
  border: 1px solid rgba(16, 18, 20, 0.14);
  background: rgba(16, 18, 20, 0.08);
}

.desk-impact-call div {
  min-width: 0;
  padding: 10px;
  background: rgba(243, 246, 242, 0.86);
}

.desk-impact-call span,
.desk-impact-grid h3,
.desk-impact-copy h3 {
  display: block;
  margin-bottom: 4px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.desk-impact-call strong {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.desk-impact-call small,
.desk-impact-grid p,
.desk-impact-copy p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.desk-impact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.desk-impact-grid section,
.desk-impact-copy {
  padding: 12px 0;
  border-top: 1px solid rgba(16, 18, 20, 0.12);
}

.desk-impact-grid p {
  margin: 0 0 8px 0;
}

.desk-impact-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.desk-impact-source-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(16, 18, 20, 0.16);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.desk-impact-source-list a {
  display: flex;
  flex: 1;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.desk-impact-source-list a:hover span,
.desk-impact-source-list a:focus-visible span {
  color: var(--accent-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.source-receipt--linked {
  cursor: pointer;
}

.desk-impact-source-list span,
.desk-impact-source-list small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-impact-source-list small {
  color: var(--text-dim);
}

.desk-impact-modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px -18px -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid rgba(16, 18, 20, 0.14);
  background: var(--bg-card);
}

.desk-impact-modal-actions button {
  border: 1px solid rgba(16, 18, 20, 0.18);
  background: rgba(16, 18, 20, 0.05);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 8px 10px;
}

.claim-tape-modal {
  border-left-color: var(--accent-cyan);
}

.claim-tape-modal-head {
  align-items: flex-start;
}

.claim-tape-modal-head strong {
  width: auto;
  min-height: 28px;
  padding: 0 10px;
}

.claim-tape-call {
  grid-template-columns: 1.1fr 0.9fr 0.9fr;
}

.claim-tape-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 12px;
}

.claim-tape-grid section {
  padding: 12px 0;
  border-top: 1px solid rgba(16, 18, 20, 0.12);
}

.claim-tape-grid h3 {
  display: block;
  margin-bottom: 8px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.claim-tape-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.claim-tape-event-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(16, 18, 20, 0.16);
}

.claim-tape-event-list span,
.claim-tape-event-list small {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.claim-tape-event-list strong {
  min-width: 0;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.claim-tape-event-list small {
  grid-column: 2;
  font-size: 10px;
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .desk-impact-strip {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    padding: 7px 8px;
  }

  .claim-tape-strip {
    grid-template-columns: auto 1fr;
    gap: 5px 8px;
    padding: 7px 8px;
  }

  .claim-tape-proof,
  .claim-tape-market {
    display: none;
  }

  .claim-tape-strip small {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .desk-impact-symbols,
  .desk-impact-score {
    display: none;
  }

  .desk-impact-action {
    justify-self: end;
    max-width: 120px;
  }

  .desk-impact-modal-overlay {
    align-items: flex-end;
    justify-content: stretch;
  }

  .desk-impact-modal {
    width: 100%;
    height: min(88vh, 720px);
    border-left: 0;
    border-top: 2px solid var(--accent-red);
    padding: 14px;
  }

  .desk-impact-call,
  .desk-impact-grid,
  .claim-tape-call,
  .claim-tape-grid,
  .market-impact-workup-call,
  .market-impact-workup-grid {
    grid-template-columns: 1fr;
  }

  .market-impact-workup-list li {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .desk-impact-modal h2 {
    font-size: 20px;
  }

  .desk-impact-modal-actions {
    margin: 16px -14px -14px -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
}

/* ─── Feed Decision Strip (action/proof/check) ───────────────────────── */
.feed-decision-strip {
  display: grid;
  grid-template-columns: minmax(92px, 0.8fr) minmax(116px, 0.95fr) minmax(150px, 1.3fr) auto;
  align-items: stretch;
  gap: 1px;
  margin-top: 8px;
  border: 1px solid rgba(16, 18, 20, 0.14);
  border-left: 3px solid var(--text-dim);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(16, 18, 20, 0.08);
}

.feed-decision-strip--has-tape {
  grid-template-columns: minmax(86px, 0.72fr) minmax(104px, 0.82fr) minmax(132px, 1.04fr) minmax(104px, 0.82fr) auto;
}

.feed-decision-cell {
  min-width: 0;
  padding: 6px 8px;
  background: rgba(243, 246, 242, 0.76);
}

.feed-decision-tape-button {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.feed-decision-tape-button:hover,
.feed-decision-tape-button:focus-visible {
  background: rgba(16, 18, 20, 0.1);
  outline: 2px solid rgba(16, 18, 20, 0.22);
  outline-offset: -2px;
}

.feed-decision-cell span {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.feed-decision-cell strong {
  display: block;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.feed-decision-cell small {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.25;
}

.feed-decision-cell--check strong {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 700;
}

.feed-decision-cell--tape strong {
  color: var(--text-primary);
}

.feed-decision-cell--tape small {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.feed-decision-cell--tape-open strong {
  color: var(--accent-green);
}

.feed-decision-cell--tape-partial strong,
.feed-decision-cell--tape-up strong {
  color: var(--accent-cyan);
}

.feed-decision-cell--tape-crowded strong,
.feed-decision-cell--tape-down strong,
.feed-decision-cell--tape-fade strong {
  color: var(--accent-red);
}

.feed-decision-cell--tape-unknown strong {
  color: var(--text-dim);
}

.feed-decision-actions {
  display: flex;
  align-self: stretch;
  background: rgba(243, 246, 242, 0.76);
}

.feed-decision-actions button {
  min-width: 46px;
  border: 0;
  border-left: 1px solid rgba(16, 18, 20, 0.12);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.feed-decision-actions button:hover,
.feed-decision-actions button:focus-visible {
  background: rgba(16, 18, 20, 0.08);
}

.feed-decision-strip--act {
  border-left-color: var(--accent-red);
}
.feed-decision-strip--verify {
  border-left-color: var(--accent-amber);
}
.feed-decision-strip--book,
.feed-decision-strip--watch {
  border-left-color: var(--accent-cyan);
}
.feed-decision-strip--fade {
  border-left-color: var(--accent-red);
  background: rgba(122, 16, 32, 0.1);
}
.feed-decision-strip--act .feed-decision-cell--action strong {
  color: var(--accent-red);
}
.feed-decision-strip--book .feed-decision-cell--action strong,
.feed-decision-strip--watch .feed-decision-cell--action strong {
  color: var(--accent-cyan);
}

@media (max-width: 760px) {
  .feed-decision-strip,
  .feed-decision-strip--has-tape {
    grid-template-columns: 1fr;
  }
  .feed-decision-actions {
    display: none;
  }
}

/* News-to-price anchor chip: realized move in the seconds around an item */
.price-anchor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: help;
  line-height: 1;
}
.price-anchor .pa-sym {
  font-weight: 700;
  opacity: 0.85;
}
.price-anchor .pa-glyph {
  font-size: 8px;
  line-height: 1;
}
.price-anchor .pa-pct {
  font-weight: 800;
}
.price-anchor .pa-secs {
  opacity: 0.65;
  font-size: 8.5px;
  font-weight: 500;
}
.price-anchor--up {
  color: #3e5a20;
  background: rgba(90, 106, 46, 0.12);
  border-color: rgba(90, 106, 46, 0.22);
}
.price-anchor--down {
  color: #7a1020;
  background: rgba(176, 74, 42, 0.12);
  border-color: rgba(176, 74, 42, 0.28);
}

/* ─── Telegram / single-source risk ──────────── */
.feed-item.telegram-unverified {
  border-left: 3px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.03);
}
.feed-item.telegram-unverified .feed-source::after {
  content: ' \2022 SINGLE SOURCE';
  color: #9a2a38;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* ─── Panel transition ────────────────────────── */
.panel {
  transition: opacity 0.15s ease;
}

/* ─── Event Clusters ──────────────────────────── */
.cluster-group {
  background: rgba(122, 16, 32, 0.04);
  border: 1px solid rgba(122, 16, 32, 0.15);
  border-radius: 6px;
  margin: 4px 8px;
  overflow: hidden;
}
.cluster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cluster-header .cluster-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.5px;
}
.cluster-header .cluster-count {
  font-size: 9px;
  color: var(--text-dim);
}
.cluster-items {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.cluster-group.open .cluster-items {
  max-height: none;
}

/* ─── Map overlay panels ──────────────────────── */
#mobileMapPanel {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
#mobileMapPanel.mobile-hidden {
  display: none !important;
}
/* Explicit min-height so Leaflet always has a non-zero container to
       measure when it is first created or invalidateSize() is called. */
#mobileMap {
  min-height: 400px;
}
.map-bottom-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  max-height: 50%;
  min-height: 80px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
  box-shadow: 0 -3px 14px rgba(16, 18, 20, 0.16);
}
.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--text-dim);
  border-radius: 2px;
  margin: 8px auto 4px;
  opacity: 0.4;
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 8px;
}
.sheet-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 8px 8px;
}
.sheet-event {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.04);
  font-size: 11px;
}
.sheet-event .sheet-event-source {
  font-size: 8px;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sheet-event .sheet-event-title {
  color: var(--text-primary);
  margin-top: 2px;
  line-height: 1.4;
}
.sheet-event .sheet-event-time {
  font-size: 8px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* 900px stacking removed, desktop grid preserved at all widths */

/* ─── Onboarding Modal ───────────────────────── */
.onboarding-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(232, 236, 231, 0.96);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.onboarding-overlay.active {
  display: flex;
}
.onboarding-inner {
  max-width: 520px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px 20px;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
}
.onboarding-step {
  display: none;
}
.onboarding-step.active {
  display: block;
}
.onboarding-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.onboarding-subtitle {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}
.onboarding-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}
.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  transition: background 0.2s;
}
.onboarding-dot.active {
  background: var(--accent-cyan);
}
.onboarding-dot.done {
  background: var(--accent-green);
}
.onboarding-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 8px;
}
.onboarding-btn {
  padding: 8px 20px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.onboarding-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.onboarding-btn.primary {
  background: var(--accent-cyan);
  color: var(--bg-primary);
  border-color: var(--accent-cyan);
}
.onboarding-btn.primary:hover {
  background: #9a2a38;
}
.onboarding-region-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.onboarding-region-btn {
  padding: 12px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.onboarding-region-btn span {
  display: block;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
}
.onboarding-region-btn small {
  display: block;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.25;
}
.onboarding-region-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--text-primary);
}
.onboarding-region-btn.selected {
  border-color: var(--accent-cyan);
  background: rgba(122, 16, 32, 0.1);
  color: var(--accent-cyan);
}
.onboarding-region-btn.selected span {
  color: var(--accent-cyan);
}
.onboarding-region-btn.full-width {
  grid-column: 1 / -1;
}
.onboarding-trade-summary {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(122, 16, 32, 0.18);
  background: rgba(247, 247, 242, 0.72);
  border-radius: 6px;
}
.onboarding-trade-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.onboarding-trade-summary-head span,
.onboarding-trade-summary-head strong {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.onboarding-trade-summary-head strong {
  color: var(--accent-cyan);
}
.onboarding-trade-summary p {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}
.onboarding-trade-receipt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 8px;
  border: 1px solid rgba(16, 18, 20, 0.1);
  background: rgba(16, 18, 20, 0.04);
}
.onboarding-trade-receipt-cell {
  min-width: 0;
  padding: 6px 7px;
  background: rgba(255, 255, 255, 0.42);
}
.onboarding-trade-receipt-cell b,
.onboarding-trade-receipt-cell small {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.onboarding-trade-receipt-cell b {
  color: var(--text-dim);
  font-size: 7.5px;
  font-weight: 900;
}
.onboarding-trade-receipt-cell small {
  color: var(--text-primary);
  font-size: 9px;
  font-weight: 760;
  line-height: 1.25;
}
.onboarding-trade-summary ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  list-style: none;
}
.onboarding-trade-summary li {
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.25;
}
.onboarding-trade-summary li::before {
  content: '>';
  color: var(--accent-cyan);
  font-weight: 800;
  margin-right: 6px;
}
.onboarding-skip {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}
.onboarding-skip:hover {
  color: var(--text-secondary);
}
.onboarding-kw-group {
  margin-bottom: 12px;
}
.onboarding-kw-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.onboarding-kw-label.critical {
  color: var(--accent-red);
}
.onboarding-kw-label.high {
  color: var(--accent-amber);
}
.onboarding-kw-label.watch {
  color: var(--accent-blue);
}
.onboarding-kw-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  outline: none;
}
.onboarding-kw-input:focus {
  border-color: var(--accent-cyan);
}
.onboarding-kw-hint {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 2px;
}
.onboarding-portfolio-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
}
.onboarding-ticker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
}
.onboarding-ticker-row .sym {
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 11px;
  margin-right: 6px;
}
.onboarding-ticker-row .name {
  color: var(--text-dim);
  font-size: 10px;
}
.onboarding-ticker-remove {
  background: none;
  border: none;
  color: var(--accent-red);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
@media (max-width: 1023px) {
  .onboarding-overlay {
    padding: 10px;
    align-items: flex-start;
    padding-top: 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .onboarding-inner {
    padding: 20px 16px 16px;
    max-height: none;
    overflow: visible;
    margin-bottom: 80px;
  }
  .onboarding-title {
    font-size: 18px;
  }
  .onboarding-region-btn {
    padding: 14px;
    font-size: 14px;
    min-height: 48px;
  }
  .onboarding-region-btn span {
    font-size: 14px;
  }
  .onboarding-region-btn small {
    font-size: 11px;
  }
  .onboarding-btn {
    min-height: 48px;
    font-size: 14px;
    padding: 12px 24px;
  }
  .onboarding-region-grid {
    grid-template-columns: 1fr;
  }
  .preview-gate {
    align-items: center;
    padding: 20px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(
      180deg,
      rgba(232, 236, 231, 0.3) 0%,
      rgba(232, 236, 231, 0.85) 40%,
      rgba(232, 236, 231, 0.95) 100%
    );
  }
  .preview-gate-inner {
    max-width: 100%;
  }
  .preview-stats {
    gap: 16px;
  }
  .preview-stats .stat-value {
    font-size: 14px;
  }
}

/* ─── Alert Impact Line ──────────────────────── */
.alert-impact {
  font-size: 9px;
  color: var(--accent-cyan);
  margin-top: 4px;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.verification-chain-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
}

/* ─── Calm Start / First Load ─────────────────── */
.first-load .ticker-strip {
  animation: none;
}
.first-load .ticker-scroll {
  animation: none;
}
.first-load .feed-item {
  animation: fadeInUp 0.3s ease forwards;
  opacity: 0;
}
.first-load .feed-item:nth-child(1) {
  animation-delay: 0.1s;
}
.first-load .feed-item:nth-child(2) {
  animation-delay: 0.15s;
}
.first-load .feed-item:nth-child(3) {
  animation-delay: 0.2s;
}
.first-load .feed-item:nth-child(4) {
  animation-delay: 0.25s;
}
.first-load .feed-item:nth-child(5) {
  animation-delay: 0.3s;
}
.first-load .feed-item:nth-child(6) {
  animation-delay: 0.35s;
}
.first-load .feed-item:nth-child(7) {
  animation-delay: 0.4s;
}
.first-load .feed-item:nth-child(8) {
  animation-delay: 0.45s;
}
.first-load .feed-item:nth-child(9) {
  animation-delay: 0.5s;
}
.first-load .feed-item:nth-child(10) {
  animation-delay: 0.55s;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overflow/shrink fixes inside mobile block (already declared above in 1023px) */
.dark-tooltip {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  font-family: inherit !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  padding: 6px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 12px rgba(16, 18, 20, 0.16) !important;
}
.dark-tooltip .leaflet-tooltip-left::before {
  border-left-color: var(--border) !important;
}
.dark-tooltip .leaflet-tooltip-right::before {
  border-right-color: var(--border) !important;
}

/* ─── Trade Signals ────────────────────────────────────────────────── */
.signal-card {
  padding: 8px 10px;
  margin: 4px 0;
  border-radius: 6px;
  background: rgba(16, 18, 20, 0.02);
  border-left: 3px solid var(--accent-green);
  cursor: pointer;
  transition: background 0.2s;
}
.signal-card:hover {
  background: rgba(16, 18, 20, 0.05);
}
.signal-card.short {
  border-left-color: var(--accent-red);
}
.signal-card.hedge {
  border-left-color: var(--accent-amber);
}
.signal-card .signal-instrument {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.signal-card .signal-move {
  font-size: 14px;
  font-weight: 800;
}
.signal-card .signal-move.up {
  color: var(--accent-green);
}
.signal-card .signal-move.down {
  color: var(--accent-red);
}
.signal-card .signal-narrative {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}
.signal-badge {
  font-family: var(--f-mono);
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
}
.signal-badge.high {
  background: transparent;
  color: var(--accent-green);
}
.signal-badge.medium {
  background: transparent;
  color: var(--accent-amber);
}
.signal-badge.low {
  background: transparent;
  color: var(--text-dim);
}
.signal-catalysts {
  display: none;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(16, 18, 20, 0.08);
}
.signal-card.expanded .signal-catalysts {
  display: block;
}
.signal-catalyst-item {
  font-size: 9px;
  color: var(--text-dim);
  padding: 2px 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.signal-catalyst-item::before {
  content: '\2014';
  color: var(--accent-red);
  flex-shrink: 0;
}
.signal-timeframe {
  font-family: var(--f-mono);
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 0;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid rgba(16, 18, 20, 0.18);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Market Impact Badges ─────────────────────────────────────────── */
.impact-badge {
  font-family: var(--f-mono);
  font-size: 8px;
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 600;
  margin-left: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  background: transparent;
}
.impact-badge.impact-bullish {
  color: var(--accent-green);
}
.impact-badge.impact-bearish {
  color: var(--accent-red);
}
.impact-badge.impact-mixed {
  color: var(--accent-amber);
}

/* ─── Briefing Panel ───────────────────────────────────────────────── */
.briefing-classification {
  font-family: var(--f-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent-red);
  text-align: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.briefing-summary {
  background: var(--bg-card);
  border: none;
  border-left: 3px solid var(--accent-red);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 10px;
}
.briefing-section-title {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
  margin: 10px 0 4px;
  text-transform: uppercase;
}
.briefing-dev-item {
  padding: 4px 0;
  border-bottom: 1px solid rgba(16, 18, 20, 0.03);
}
.briefing-dev-headline {
  font-size: 10px;
  color: var(--text-primary);
  line-height: 1.3;
}
.briefing-dev-meta {
  font-size: 8px;
  color: var(--text-dim);
  margin-top: 2px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.briefing-mover-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}
.briefing-mover-table td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.03);
}
.briefing-mover-table td:first-child {
  color: var(--text-primary);
  font-weight: 600;
  width: 35%;
}
.briefing-mover-table td:nth-child(2) {
  font-weight: 700;
  width: 20%;
}
.briefing-mover-table td:last-child {
  color: var(--text-dim);
  font-size: 8px;
}
.briefing-region-badge {
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  margin-right: 4px;
  margin-bottom: 4px;
  display: inline-block;
}
.briefing-footer {
  font-size: 8px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(16, 18, 20, 0.05);
  font-style: normal;
}
.briefing-skeleton {
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes briefing-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}
.briefing-alert-item {
  font-size: 9px;
  padding: 4px 6px;
  margin: 2px 0;
  background: rgba(122, 16, 32, 0.04);
  border-radius: 3px;
  border-left: 2px solid var(--accent-cyan);
}
.briefing-signals-item {
  font-size: 9px;
  padding: 3px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ─── Evidence Trail (WHY THIS MATTERS) ────────────────────────── */
.evidence-trail {
  font-size: 9px;
  padding: 5px 10px;
  margin-top: 6px;
  background: rgba(122, 16, 32, 0.04);
  border-left: 2px solid rgba(122, 16, 32, 0.3);
  border-radius: 0 3px 3px 0;
  line-height: 1.6;
  color: var(--text-secondary);
}
.feed-item.alert-critical .evidence-trail {
  background: rgba(122, 16, 32, 0.04);
  border-left-color: rgba(122, 16, 32, 0.3);
}
.feed-item.alert-high .evidence-trail {
  background: rgba(178, 82, 51, 0.04);
  border-left-color: rgba(178, 82, 51, 0.3);
}

/* ─── Portfolio Impact Row ─────────────────────────────────────────── */
.portfolio-impact-row {
  font-size: 9px;
  color: var(--accent-cyan);
  padding: 3px 8px;
  margin-top: 2px;
  background: rgba(122, 16, 32, 0.06);
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ─── Mobile Signal Badge ──────────────────────────────────────────── */
.mobile-signal-badge {
  display: inline-block;
  font-size: 8px;
  background: var(--accent-red);
  color: #101214;
  border-radius: 8px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-weight: 700;
  margin-left: 4px;
  padding: 0 3px;
}

/* ─── Cross-Asset Regime Block ─────────────────────────────────────── */
/* Signature element: an editorial "weather report" panel that tells you
       what the actual cross-asset book is doing, not what the headlines say.
       This is the dashboard's headline differentiator vs other OSINT clones. */
.regime-block {
  padding: 10px 12px 12px;
  border-left: 3px double var(--oxblood);
  background:
    repeating-linear-gradient(
      135deg,
      rgba(122, 16, 32, 0.025) 0,
      rgba(122, 16, 32, 0.025) 1px,
      transparent 1px,
      transparent 6px
    ),
    var(--bg-card);
  position: relative;
}
.regime-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  opacity: 0.85;
}
.regime-block::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--rule);
}
.regime-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.regime-eyebrow {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.regime-coverage {
  font-family: var(--f-mono);
  font-size: 8.5px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.regime-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}
.regime-label {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: 0;
  font-feature-settings: var(--tab-nums);
}
.regime-label.is-riskon {
  color: var(--accent-green);
}
.regime-label.is-riskoff {
  color: var(--accent-red);
}
.regime-label.is-mixed {
  color: var(--accent-amber);
}
.regime-label.is-stagflation {
  color: var(--accent-red);
}
.regime-label.is-relief {
  color: var(--accent-amber);
}
.regime-label.is-flight {
  color: var(--accent-red);
}
.regime-label.is-goldilocks {
  color: var(--accent-green);
}
.regime-score {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.regime-drivers {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 8px;
  min-height: 1.45em;
}
.regime-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
  font-family: var(--f-mono);
  font-size: 9.5px;
}
.regime-cell {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px dotted var(--rule);
}
.regime-cell-label {
  color: var(--text-dim);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-size: 8.5px;
}
.regime-cell-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.regime-cell-value.up {
  color: var(--accent-green);
}
.regime-cell-value.down {
  color: var(--accent-red);
}
.regime-cell-value.flat {
  color: var(--text-dim);
}
.regime-cell-value.na {
  color: var(--text-dim);
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════
       PREMIUM PASS, 2026-04 dashboard polish
       ═══════════════════════════════════════════════════════════════════
       Progressive enhancements appended at the end of the file so the
       cascade wins automatically. Every rule here consumes the new
       semantic tokens from the :root block at the top.

       Delete any section to fall back to the previous treatment. Do NOT
       mix these overrides into the original rules above, keeping them
       in one block makes the premium pass reversible widget-by-widget.
       ─────────────────────────────────────────────────────────────── */

/* ─── Global: branded scrollbars everywhere ─── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: var(--radius-full);
  transition: background var(--dur-fast) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--rule-strong);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* ─── Masthead (.header) ────────────────────────────────────────── */
/* Tighter baseline rhythm, slightly deeper padding, and a subtle
       double rule at the bottom that reads as a command masthead. */
.header {
  padding: var(--space-3) var(--space-7) var(--space-3) var(--space-7);
  border-bottom: 1px solid var(--text-primary);
  box-shadow: 0 1px 0 var(--text-primary);
}
/* The scan-line pseudo on the header is mostly invisible at 1% alpha;
       we keep it but drop it to near-zero so it never shows up as noise
       on a clean capture. */
.header::after {
  display: none;
}

.logo {
  font-size: var(--type-lg);
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
}
.logo-sub {
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
  color: var(--text-dim);
  margin-top: var(--space-1);
}

/* Status bar: proper spacing and tabular numerals on counters */
.status-bar {
  gap: var(--space-5);
  font-size: var(--type-2xs);
  opacity: 1;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.status-bar .status-indicator {
  gap: var(--space-2);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}
/* The counter values (ITEMS / ALERTS / CRITICAL) should be heavier
       and in tabular numerals so they stop wobbling. */
#itemCount,
#alertCount,
#criticalCount {
  font-weight: 700;
  color: var(--text-primary);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  min-width: 2ch;
  display: inline-block;
  text-align: right;
}
#criticalCount {
  color: var(--signal-critical);
}

/* Separator between status groups using a thin vertical rule so the
       masthead groups read as distinct sections of metadata rather than
       one long run-on line. */
.status-bar .status-indicator + .status-indicator {
  position: relative;
  padding-left: var(--space-5);
}
.status-bar .status-indicator + .status-indicator::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  background: var(--rule-strong);
  transform: translateY(-50%);
}

/* Polished pulse, subtler than the previous 0.5s "strobe" on
       critical state. Critical still communicates urgency but reads
       as authoritative instead of panicked. */
.pulse {
  background: var(--signal-positive);
  box-shadow: 0 0 0 3px var(--signal-positive-soft);
}
.pulse.warning {
  background: var(--signal-high);
  box-shadow: 0 0 0 3px var(--signal-high-soft);
}
.pulse.critical {
  background: var(--signal-critical);
  box-shadow: 0 0 0 3px var(--signal-critical-soft);
  animation: premium-pulse-critical 1.6s var(--ease-out) infinite;
}
@keyframes premium-pulse-critical {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 3px var(--signal-critical-soft);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 6px var(--signal-critical-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulse,
  .pulse.critical {
    animation: none;
  }
}

/* Search input: focus treatment matches the new token system */
.search-input {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wide);
  background: var(--surface-sunken);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.search-input:focus {
  background: var(--surface-raised);
  border-color: var(--signal-critical);
  box-shadow: 0 0 0 3px var(--signal-critical-soft);
}

/* Settings gear */
.settings-gear-btn {
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}
.settings-gear-btn:hover {
  background: var(--surface-hover);
}

/* ─── FLASH / Alert banner ──────────────────────────────────────── */
/* Was: solid oxblood fill, white text, pulsing box-shadow.
       Now:  soft tint background, oxblood LEFT BORDER, animated dot
       marker, calm typography. Still clearly reads as critical, no
       longer reads as a Bootstrap error toast. */
.alert-banner {
  padding: var(--space-3) var(--space-7);
  background: var(--signal-critical-soft);
  border-bottom: 1px solid var(--signal-critical-edge);
  border-left: 3px solid var(--signal-critical);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wide);
  line-height: var(--lh-snug);
}
.alert-banner.active {
  animation: none;
  position: relative;
}
.alert-banner.active::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--signal-critical);
  display: inline-block;
  margin-right: var(--space-3);
  flex-shrink: 0;
  animation: premium-pulse-critical 1.6s var(--ease-out) infinite;
}
.alert-banner a,
.alert-banner strong {
  color: var(--signal-critical);
  font-weight: 700;
}

/* Signal Fusion flash: urgent, but not a panic slab. */
.flash-banner {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 58px);
  left: 16px;
  right: 16px;
  z-index: 10005;
  max-height: 118px;
  overflow: hidden;
  background: rgba(243, 246, 242, 0.98);
  border: 1px solid rgba(122, 16, 32, 0.22);
  border-left: 3px solid var(--signal-critical);
  border-radius: 5px;
  box-shadow:
    0 18px 36px rgba(16, 18, 20, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.42) inset;
  color: var(--text-primary);
}

.flash-banner.is-visible {
  display: block;
  animation: flash-banner-in 160ms var(--ease-out);
}

@keyframes flash-banner-in {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.flash-banner-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px 6px;
}

.flash-banner-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.flash-banner-kicker {
  color: var(--signal-critical);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.flash-banner-text {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.flash-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.flash-banner-open,
.flash-banner-close {
  border: 1px solid rgba(16, 18, 20, 0.14);
  background: rgba(16, 18, 20, 0.04);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  min-height: 30px;
}

.flash-banner-open {
  padding: 0 10px;
  color: var(--signal-critical);
}

.flash-banner-close {
  width: 30px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.flash-banner-signals {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding: 0 10px 8px;
}

.flash-banner-signal {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 18px;
  padding: 2px 6px;
  border: 1px solid rgba(16, 18, 20, 0.12);
  border-radius: 3px;
  background: rgba(16, 18, 20, 0.035);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
}

.flash-banner-signal[data-type='alert'] {
  color: var(--signal-critical);
  border-color: rgba(122, 16, 32, 0.22);
}

.flash-banner-signal[data-type='verified'] {
  color: var(--accent-green);
}

.flash-banner-signal[data-type='market_reaction'] {
  color: var(--accent-amber);
}

@media (max-width: 768px) {
  .flash-banner {
    top: calc(env(safe-area-inset-top, 0px) + 42px);
    left: 8px;
    right: 8px;
    max-height: 92px;
    border-radius: 3px;
  }

  .flash-banner-inner {
    gap: 8px;
    padding: 7px 8px 5px;
  }

  .flash-banner-copy {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .flash-banner-kicker {
    font-size: 9px;
  }

  .flash-banner-text {
    font-size: 12px;
    line-height: 1.2;
    -webkit-line-clamp: 2;
  }

  .flash-banner-open {
    display: none;
  }

  .flash-banner-close {
    width: 28px;
    min-height: 28px;
  }

  .flash-banner-signals {
    padding: 0 8px 7px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
}

/* ─── Desktop tab nav ───────────────────────────────────────────── */
.desktop-nav {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--space-5);
  height: 42px;
}
.desktop-nav-tab {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wider);
  padding: var(--space-2) var(--space-5);
  color: var(--text-dim);
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
  border-radius: 0;
}
.desktop-nav-tab:hover {
  color: var(--text-primary);
  background: rgba(16, 18, 20, 0.04);
}
.desktop-nav-tab.active {
  color: var(--signal-critical);
  background: transparent;
}
.desktop-nav-tab.active::after {
  width: 100%;
  left: 0;
  transform: none;
  height: 2px;
  bottom: -1px;
  border-radius: 0;
  background: var(--signal-critical);
  box-shadow: none;
  animation: premium-tab-slide var(--dur-base) var(--ease-out);
}
@keyframes premium-tab-slide {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.desktop-nav-tab.active::after {
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) {
  .desktop-nav-tab.active::after {
    animation: none;
  }
}
.desktop-nav-tab .nav-badge {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--signal-critical-soft);
  color: var(--signal-critical);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

/* ─── Ticker strip ──────────────────────────────────────────────── */
.ticker-strip {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-2) var(--space-7);
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}
.ticker-strip .ticker-sym {
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 600;
}
.ticker-strip .ticker-value {
  font-size: var(--type-xs);
  color: var(--text-primary);
  font-weight: 600;
}
.ticker-strip .ticker-change {
  font-size: var(--type-2xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
}
.ticker-strip .ticker-change.up {
  color: var(--signal-positive);
  background: var(--signal-positive-soft);
}
.ticker-strip .ticker-change.down {
  color: var(--signal-critical);
  background: var(--signal-critical-soft);
}

/* ─── Panel headers ─────────────────────────────────────────────── */
/* Soften the sticky background, tighten the padding, give the title
       more presence via the new type scale. */
.panel-header {
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface-sunken) 100%);
  border-bottom: 1px solid var(--rule);
}
.panel-title {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  gap: var(--space-2);
}
.panel-title .tier-badge {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
/* Fix the three tier badge colours that were using raw #7a1020 / a
       nonsense blue, now they use the semantic tokens. */
.tier-1 .tier-badge {
  background: var(--signal-critical-soft);
  color: var(--signal-critical);
}
.tier-2 .tier-badge {
  background: var(--signal-high-soft);
  color: var(--signal-high);
}
.tier-3 .tier-badge {
  background: var(--signal-positive-soft);
  color: var(--signal-positive);
}
.panel-count {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim);
}

/* Freshness dot, small but confident */
.freshness-dot {
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 2px rgba(16, 18, 20, 0.04);
}
.freshness-dot.fresh {
  background: var(--signal-positive);
}
.freshness-dot.stale {
  background: var(--signal-high);
}
.freshness-dot.old {
  background: var(--signal-critical);
}

/* ─── Generic panel treatment ──────────────────────────────────── */
.panel {
  background: var(--surface-page);
  transition: background var(--dur-fast) var(--ease-out);
}
.panel + .panel {
  border-left: 1px solid var(--rule);
}

/* Story cards inside the primary feed get a tighter, more editorial
       treatment. The existing .story-card rules paint a lot of border;
       we soften them to a single hairline with an interior tint on
       critical instead of a loud left-border + inset shadow. */
.story-card {
  padding: var(--space-3) var(--space-4);
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur-fast) var(--ease-out);
}
.story-card:hover {
  background: var(--surface-raised);
}
.story-card.critical {
  background: var(--signal-critical-soft);
  border-left: 3px solid var(--signal-critical);
  padding-left: calc(var(--space-4) - 3px);
  box-shadow: none;
}
.story-card.critical:hover {
  background: var(--signal-critical-soft);
  border-color: var(--signal-critical);
  box-shadow: inset 0 0 0 1px var(--signal-critical-edge);
}
.story-card .story-source {
  color: var(--signal-critical);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
  font-weight: 700;
  text-transform: uppercase;
}
.story-card .story-title a {
  transition: color var(--dur-fast) var(--ease-out);
}
.story-card .story-title a:hover {
  color: var(--signal-critical);
}
.story-card .story-badge.critical {
  background: var(--signal-critical-soft);
  color: var(--signal-critical);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 700;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.story-card .story-cluster {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--signal-critical);
  font-weight: 700;
}
.keyword-tag {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.keyword-tag.critical {
  background: var(--signal-critical-soft);
  color: var(--signal-critical);
}

/* ─── Right panel widgets ──────────────────────────────────────── */
/* Every .market-section becomes a subtle card-like slab inside the
       scrolling right panel. The original design had inconsistent
       padding, a leftover navy border-bottom (rgba 42,54,80), and no
       visible elevation; we upgrade to a hairline between sections and
       a consistent internal rhythm. */
.market-section {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-page);
  transition: background var(--dur-fast) var(--ease-out);
}
.market-section:hover {
  background: var(--surface-raised);
}
.market-section:last-of-type {
  border-bottom: 0;
}
.market-section-title {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  color: var(--text-primary);
  text-transform: uppercase;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.market-section-title::before {
  width: 3px;
  height: 12px;
  border-radius: var(--radius-xs);
  background: var(--signal-accent);
  flex-shrink: 0;
}
.market-section-title .collapse-arrow {
  color: var(--text-dim);
  font-size: var(--type-2xs);
  transition: transform var(--dur-base) var(--ease-out);
}
.energy-label::before {
  background: var(--signal-high);
}
.bonds-label::before {
  background: var(--signal-info);
}
.fx-label::before {
  background: var(--signal-accent);
}

/* Market section body rows, shared by energy, portfolio, SA, equity,
       bonds, FX. These rows are JS-rendered; we target by attribute
       patterns where possible and fall back to tabular numerals on any
       descendants with numeric content. */
.market-section-body {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-secondary);
}

/* ─── Cross-asset regime block ────────────────────────────────── */
/* This is the headline widget of the right panel, "RELIEF SQUEEZE"
       / "RISK ON" etc. is where the eye lands first. Elevate its
       typography. */
.regime-block {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  border-bottom: 1px solid var(--rule-strong);
  position: relative;
}
.regime-block::before,
.regime-block::after {
  display: none; /* kill the old pseudo decorations if any */
}
.regime-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.regime-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  color: var(--text-dim);
  text-transform: uppercase;
}
.regime-eyebrow::before {
  content: ', ';
  color: var(--signal-critical);
  margin-right: var(--space-2);
}
.regime-coverage {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-subtle);
  letter-spacing: var(--tracking-wide);
}
.regime-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
}
/* The regime label is the hero, up the scale significantly while keeping
       the desk sans tone rather than an editorial display face. */
.regime-label {
  font-family: var(--font-display);
  font-size: var(--type-3xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-transform: none;
  flex: 1;
  min-width: 0;
}
.regime-label.is-riskon,
.regime-label.is-goldilocks {
  color: var(--signal-positive);
}
.regime-label.is-riskoff,
.regime-label.is-stagflation,
.regime-label.is-flight {
  color: var(--signal-critical);
}
.regime-label.is-mixed,
.regime-label.is-relief {
  color: var(--signal-high);
}

.regime-score {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.regime-drivers {
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.regime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.regime-cell {
  padding: 2px 0;
}
.regime-cell-label {
  color: var(--text-dim);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--type-2xs);
}
.regime-cell-value.up {
  color: var(--signal-positive);
}
.regime-cell-value.down {
  color: var(--signal-critical);
}
.regime-cell-value.flat {
  color: var(--text-dim);
}

/* ─── Headline Tone widget (sentiment bar) ─────────────────────── */
/* The sentiment bar uses inline styles for the gradient. We can't
       override the inline, but we CAN improve the surrounding chrome
       and the BEAR/BULL labels. */
[id='sentimentLabel'] {
  font-family: var(--font-mono);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
}

/* ─── Trade Signals card ───────────────────────────────────────── */
/* Each signal row in #signalsList is a JS-rendered block with an
       asset, percentage, headline, and action tag. We can't restyle the
       rendered HTML directly without touching JS, but we CAN give the
       container a consistent scrollbar gutter, card padding, and proper
       hover states on whatever row children exist. */
#signalsList {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-1) 0 !important;
}
#signalsList > * {
  border-radius: var(--radius-sm);
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
#signalsList > *:hover {
  background: var(--surface-raised);
  box-shadow: var(--elev-0);
}
#signalCount {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-wide);
  color: var(--signal-critical);
}

/* ─── Market data cells (energy, portfolio, SA, equity, bonds, FX) ─ */
/* These sections render rows like "WTI Crude | -18.86% | Move vs avg"
       via JS. We can't restyle per-row without touching JS, but improving
       the body font-family/size and aligning numbers via tabular-nums
       fixes most of the wobble. */
#energyData > *,
#portfolioData > *,
#equityData > *,
#bondData > *,
#fxData > *,
#saRatingsData > *,
#calendarData > * {
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Ticker skeletons (the placeholder during market data load) */
.skeleton.skeleton-line {
  height: 10px;
  margin: 4px 0;
  background: linear-gradient(
    90deg,
    rgba(16, 18, 20, 0.06) 25%,
    rgba(16, 18, 20, 0.12) 37%,
    rgba(16, 18, 20, 0.06) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--radius-sm);
  animation: card-skeleton 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton.skeleton-line {
    animation: none;
  }
}

/* ─── Left panel alert / trade cards ───────────────────────────── */
/* Left panel cards are JS-rendered from render-feeds.js. They share
       a container (#leftPanel > [id*="List"]) with story-like rows. The
       polish here is: consistent tight padding, oxblood gutter on
       critical items, calmer hover, mono meta row. The existing
       story-card rules above cover most of it; we add left-panel
       specific niceties here. */
#leftPanel .market-section + .market-section {
  border-top: 0;
}
#leftPanel .panel-header + .market-section {
  border-top: 0;
}

/* ─── Hormuz panel (from PR #94) ──────────────────────────────── */
/* The native Hormuz panel ships with its own inline styles from
       PR #94. The premium pass just swaps the inline colours to the
       new semantic tokens and tightens the rhythm so it matches the
       rest of the right panel. */
#hormuzPanel {
  padding: var(--space-3) var(--space-5) var(--space-4) !important;
  background: var(--surface-sunken) !important;
}
#hormuzPanel .hormuz-stat {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-0);
}
#hormuzPanel #hormuzTotal,
#hormuzPanel #hormuzEast,
#hormuzPanel #hormuzWest,
#hormuzPanel #hormuzLoiter {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}
#hormuzEast {
  color: var(--signal-info);
}
#hormuzWest {
  color: var(--signal-high);
}
#hormuzLoiter {
  color: var(--signal-critical);
}
#hormuzEventTape {
  font-family: var(--font-mono);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2);
}

/* ─── Aircraft / chokepoint trackers ──────────────────────────── */
#aircraftTracker,
#chokepointMonitor {
  padding: var(--space-3) var(--space-5);
}
#aircraftTracker .panel-title,
#chokepointMonitor .panel-title {
  color: var(--text-primary);
}

/* ─── Strategic Assets watchlist ──────────────────────────────── */
.strategic-assets-legend {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wide);
}

/* ─── Leaflet popup + tooltip, brand the map interactions ────── */
.leaflet-popup-content-wrapper {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--elev-2) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--type-xs) !important;
  padding: 2px !important;
}
.leaflet-popup-content {
  margin: var(--space-3) var(--space-4) !important;
  line-height: var(--lh-snug) !important;
}
.leaflet-popup-tip {
  background: var(--surface-raised) !important;
  box-shadow: var(--elev-1) !important;
}
.leaflet-popup-close-button {
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  transition: color var(--dur-fast) var(--ease-out);
}
.leaflet-popup-close-button:hover {
  color: var(--signal-critical) !important;
}
.leaflet-tooltip {
  background: var(--text-primary) !important;
  color: var(--surface-page) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-1) var(--space-3) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--type-2xs) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  box-shadow: var(--elev-2) !important;
}
.leaflet-tooltip::before {
  border-top-color: var(--text-primary) !important;
  border-right-color: var(--text-primary) !important;
  border-bottom-color: var(--text-primary) !important;
  border-left-color: var(--text-primary) !important;
}
.leaflet-control-zoom a {
  background: var(--surface-raised) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--rule) !important;
  font-family: var(--font-mono) !important;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.leaflet-control-zoom a:hover {
  background: var(--surface-hover) !important;
  color: var(--signal-critical) !important;
}

/* ─── Filter chip row (the source chip grid) ─────────────────── */
/* The source chip grid was taking a lot of vertical real estate.
       The proper fix is to collapse it behind a disclosure, but that
       requires a JS change; instead we tighten it visually so it reads
       as a filter bar, not a field of buttons. */
.filter-chip {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.filter-chip:hover {
  background: var(--surface-hover);
  box-shadow: var(--elev-0);
}
.filter-chip.active {
  background: var(--text-primary);
  color: var(--surface-page);
  box-shadow: var(--elev-1);
}

/* Tab (the older tab-style filter used inside panels) */
.tab {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
  font-weight: 600;
  text-transform: uppercase;
}
.tab.active {
  color: var(--signal-critical);
  border-bottom-color: var(--signal-critical);
}

/* ─── Remove any remaining raw #7a1020 ghosts that slipped in ─── */
/* The remaining 26 raw rgba(122, 16, 32, …) references across
       dashboard.css + dashboard.html are cosmetic highlights (tier
       badges, glow shadows, etc). The rules below catch the common
       selectors by name. */
.tier-1 .tier-badge,
.tier-badge.tier-1,
[data-tier='1'] .tier-badge {
  background: var(--signal-critical-soft);
  color: var(--signal-critical);
}

/* ═══════════════════════════════════════════════════════════════
       END PREMIUM PASS
       ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
       RESPONSIVE PASS, density, focus, breakpoints, max-width cap
       ═══════════════════════════════════════════════════════════════

       The main grid is already `320px 1fr 340px` with auto rows, so
       the centre panel grows automatically. The problems this pass
       solves:

         1. On ultra-wide displays the centre column stretches
            unreadably wide and the right panel drifts to the edge.
         2. At 1100-1200px the fixed side panels crowd the centre.
         3. No way to switch density (Comfortable / Standard / Dense).
         4. No focus mode to temporarily hide the side panels.
         5. Story card readable-width isn't capped inside a wide centre.

       All opt-in via a top-level attribute or a body class, so the
       default experience is unchanged unless the user chooses.

       Toggle usage:
         <html data-density="standard">           default, same as now
         <html data-density="comfortable">        looser spacing
         <html data-density="dense">              tighter spacing
         <body class="focus-mode">                hide left + right panels
         <body class="max-width-cap">             cap total at 1920px

       The focus-mode class can be added/removed by a keyboard shortcut
       or a header button (a 3-line JS wire-up that isn't in this PR
       but is documented in the PR body).
       ─────────────────────────────────────────────────────────────── */

/* ─── 1. Ultra-wide: cap the main grid so it doesn't drift ──── */
/* Above 1920px the grid becomes a centered column with a subtle
       vignette outside, like a console on a trading desk. */
@media (min-width: 1921px) {
  .main {
    max-width: 1920px;
    margin-inline: auto;
    box-shadow:
      -1px 0 0 var(--rule),
      1px 0 0 var(--rule);
  }
  body {
    background: linear-gradient(
      90deg,
      var(--surface-sunken) 0,
      var(--surface-sunken) calc((100vw - 1920px) / 2),
      var(--surface-page) calc((100vw - 1920px) / 2),
      var(--surface-page) calc((100vw + 1920px) / 2),
      var(--surface-sunken) calc((100vw + 1920px) / 2),
      var(--surface-sunken) 100%
    );
  }
}

/* ─── 2. Mid-width breakpoint: shrink the outer panels ─────── */
/* At 1100-1279 the original 320+fr+340 is tight. Drop left to
       280 and right to 300 so the centre gets more breathing room
       without truncating. Keep the 5-track shape (panel | resizer |
       centre | resizer | panel) so explicit grid-column placements on
       #leftPanel / #centerPanel / #rightPanel land correctly. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .main {
    grid-template-columns: 280px 6px minmax(0, 1fr) 6px 300px;
  }
}

/* ─── 3. Narrow desktop: collapse to 2-column (centre + right) ─ */
/* Below 1100, the three-panel layout is genuinely too tight. We
       hide the left panel and its resizer, then collapse the left
       track and the left resizer track to 0 so the remaining items
       (centre at col 3, right resizer at col 4, right panel at col
       5) still land where their explicit grid-column rules expect.
       The left panel's content (alerts list) is still reachable via
       the mobile pull-out or a "Show alerts" toggle that the focus
       mode button can expose. */
@media (min-width: 901px) and (max-width: 1099px) {
  .main {
    grid-template-columns: 0 0 minmax(0, 1fr) 6px 300px;
  }
  #leftPanel,
  .main .panel-resizer[data-col-var='main-col-left'] {
    display: none;
  }
  /* re-center the story cards so they don't feel abandoned */
  #centerPanel .story-card,
  #centerPanel .feed-item {
    max-width: 72ch;
  }
}

/* ─── 4. Density mode ─────────────────────────────────────── */
/* Scales the spacing scale multiplicatively without touching any
       individual rule. Every widget that uses --space-* will adjust
       proportionally. Type scale stays constant (density shouldn't
       change text size, that's a zoom setting, handled by the
       browser). */

/* Comfortable: 1.25× spacing, for users who want breathing room
       and don't need to pack the desk with data. */
html[data-density='comfortable'] {
  --space-1: 0.3125rem; /* 5px */
  --space-2: 0.625rem; /* 10px */
  --space-3: 0.9375rem; /* 15px */
  --space-4: 1.25rem; /* 20px */
  --space-5: 1.5625rem; /* 25px */
  --space-6: 1.875rem; /* 30px */
  --space-7: 2.5rem; /* 40px */
  --space-8: 3.125rem; /* 50px */
  --space-9: 3.75rem; /* 60px */
  --space-10: 5rem; /* 80px */
}

/* Dense: 0.8× spacing, Bloomberg-terminal density for operators
       who want every pixel to be signal. */
html[data-density='dense'] {
  --space-1: 0.1875rem; /* 3px */
  --space-2: 0.375rem; /* 6px */
  --space-3: 0.5625rem; /* 9px */
  --space-4: 0.75rem; /* 12px */
  --space-5: 0.9375rem; /* 15px */
  --space-6: 1.125rem; /* 18px */
  --space-7: 1.5rem; /* 24px */
  --space-8: 1.875rem; /* 30px */
  --space-9: 2.25rem; /* 36px */
  --space-10: 3rem; /* 48px */
}

/* Dense mode also trims type-xs/sm to pack more rows in */
html[data-density='dense'] {
  --type-2xs: 0.5625rem; /* 9px */
  --type-xs: 0.6875rem; /* 11px */
  --type-sm: 0.8125rem; /* 13px */
}

/* ─── 5. Focus mode ───────────────────────────────────────── */
/* Hide the left and right panels, let the centre take the full
       width but cap story card width to a readable measure so it
       doesn't become a 1920px billboard.

       Toggle this via body.focus-mode. The intended keyboard shortcut
       is `F` (or `Cmd+.` for the Apple-conventional hide-side-panels),
       wired up in a 3-line addEventListener on init.js in a follow-up. */
body.focus-mode #leftPanel,
body.focus-mode #rightPanel {
  display: none !important;
}
body.focus-mode #centerPanel {
  grid-column: 1 / -1;
  padding-inline: var(--space-9);
}
body.focus-mode #centerPanel .story-card,
body.focus-mode #centerPanel .feed-item,
body.focus-mode #centerPanel .intel-story {
  max-width: 80ch;
  margin-inline: auto;
}

/* Focus mode also hides the threat/regime strip, the tab nav, and
       the ticker to give the user a genuinely clean reading surface. */
body.focus-mode #threatStrip,
body.focus-mode .ticker-strip,
body.focus-mode .desktop-nav {
  display: none !important;
}
body.focus-mode .header {
  border-bottom: 1px solid var(--text-primary);
}

/* ─── 6. Story card max-width inside the wide centre ──────── */
/* Even without focus mode, on a wide centre we don't want a story
       to stretch to a 1000px paragraph. Cap it at a comfortable
       reading measure. */
@media (min-width: 1440px) {
  #centerPanel .story-card,
  #centerPanel .feed-item,
  #centerPanel .intel-story {
    max-width: 72ch;
  }
}
@media (min-width: 1680px) {
  #centerPanel .story-card,
  #centerPanel .feed-item,
  #centerPanel .intel-story {
    max-width: 80ch;
  }
}

/* ─── 7. Right panel max-width inside a wide grid ─────────── */
/* The right panel is `340px` fixed, it already caps naturally.
       But when the user widens the browser we want the widgets to
       still feel tight; add a subtle left rule so it reads as a
       deliberate sidebar rather than a stretched column. */
@media (min-width: 1600px) {
  #rightPanel {
    border-left: 1px solid var(--rule);
  }
}

/* ─── 8. Fix the sub-pixel row heights ──────────────────── */
/* The ticker strip, threat strip, and desktop nav rows all come
       out of the `auto auto auto 1fr` row template as content-derived
       heights. When the content has fractional padding the computed
       heights can be 36.5 / 51.5 / 38, visible at 2x DPR as a
       half-pixel hairline misalignment. Round them to whole pixels. */
.ticker-strip {
  min-height: 40px;
}
#threatStrip {
  min-height: 52px;
}
.desktop-nav {
  min-height: 42px;
}

/* ─── 9. Settings dropdown, density + focus mode affordances ─ */
.settings-dropdown {
  min-width: 220px;
}
.settings-dropdown button {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  letter-spacing: var(--tracking-wide);
}
.settings-dropdown button[data-density-btn].is-active {
  background: var(--signal-critical-soft);
  color: var(--signal-critical);
  font-weight: 700;
}
.settings-dropdown button[data-density-btn].is-active span:first-child {
  color: var(--signal-critical);
}
.settings-dropdown hr {
  opacity: 0.6;
}

.install-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(122, 16, 32, 0.06), rgba(6, 182, 212, 0.05));
}
.install-banner.is-visible {
  display: flex;
}
.install-banner-copy {
  min-width: 0;
}
.install-banner-title {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.install-banner-text {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-dim);
}
.install-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.install-pill-btn {
  appearance: none;
  border: 1px solid rgba(122, 16, 32, 0.18);
  background: rgba(122, 16, 32, 0.08);
  color: var(--accent-red);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.install-pill-btn.ghost {
  border-color: var(--border);
  background: transparent;
  color: var(--text-dim);
}
.install-pill-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.settings-dropdown button.is-active {
  background: rgba(122, 16, 32, 0.08);
  color: var(--accent-red);
  font-weight: 700;
}

/* ─── Auth gate & preview gate, premium treatment ───────────── */
/* The initial authenticating state and the "sign in to access"
       preview wall now carry the same editorial language as the rest
       of the dashboard: proper type scale, tabular numerals on stats,
       brand-coloured CTAs, hairline dividers. */

/* Auth-gate: initial blocking screen while Supabase verifies. */
#auth-gate {
  background: var(--surface-page) !important;
  gap: var(--space-4);
}
#auth-gate::before {
  content: ',  Intel Desk · Est. 2026';
  display: block;
  position: absolute;
  top: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-dim);
}
#auth-gate::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: var(--text-primary);
  margin-top: var(--space-3);
  opacity: 0.12;
  position: relative;
}
#auth-gate > div:first-child {
  /* The "Intel Desk" wordmark */
  font-family: var(--font-mono) !important;
  font-size: var(--type-4xl) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-primary) !important;
}
#auth-gate-msg {
  display: inline-flex !important;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-dim) !important;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-full);
  font-size: var(--type-2xs) !important;
  letter-spacing: var(--tracking-wider) !important;
}
#auth-gate-msg::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--signal-positive);
  animation: card-live-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #auth-gate-msg::before {
    animation: none;
  }
}

/* Preview gate: "Sign in to access the live geopolitical
       intelligence brief" wall shown to logged-out visitors. */
.preview-gate {
  background: linear-gradient(
    180deg,
    rgba(232, 236, 231, 0.55) 0%,
    rgba(232, 236, 231, 0.92) 40%,
    var(--surface-page) 80%
  ) !important;
  padding: var(--space-8) var(--space-6) var(--space-9) !important;
  align-items: center !important;
  justify-content: center !important;
}
.preview-gate-inner {
  max-width: 560px !important;
  text-align: center;
  background: var(--surface-raised);
  padding: var(--space-8) var(--space-7);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-2);
  position: relative;
}
.preview-gate-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--signal-critical);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.preview-live-badge {
  background: var(--signal-positive-soft) !important;
  border: 1px solid rgba(61, 107, 46, 0.25) !important;
  color: var(--signal-positive) !important;
  font-family: var(--font-mono);
  font-size: var(--type-2xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  padding: var(--space-2) var(--space-4) !important;
  margin-bottom: var(--space-5) !important;
  border-radius: var(--radius-full) !important;
}
.preview-live-badge .pulse-sm {
  background: var(--signal-positive) !important;
  box-shadow: 0 0 0 3px rgba(61, 107, 46, 0.15);
}

.preview-gate-inner h1 {
  font-size: var(--type-4xl) !important;
  line-height: var(--lh-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-3) !important;
}
.preview-gate-inner > p:nth-of-type(1) {
  font-family: var(--font-display) !important;
  font-size: var(--type-lg) !important;
  font-weight: 300 !important;
  line-height: var(--lh-snug) !important;
  color: var(--text-secondary) !important;
  margin-bottom: var(--space-2) !important;
  max-width: 34rem;
  margin-inline: auto;
}
.preview-gate-inner > p:nth-of-type(2) {
  font-family: var(--font-mono) !important;
  font-size: var(--type-2xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  color: var(--text-dim) !important;
  margin-bottom: 0 !important;
}
.preview-gate-inner > p:nth-of-type(2)::before {
  content: ', ';
  color: var(--signal-critical);
  margin-right: var(--space-2);
}
.preview-gate-inner > p:nth-of-type(2)::after {
  content: ', ';
  color: var(--signal-critical);
  margin-left: var(--space-2);
}

/* Stats row, editorial 3-column with hairline separators */
.preview-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  margin: var(--space-6) 0 !important;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--type-2xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  color: var(--text-dim) !important;
  text-transform: uppercase;
}
.preview-stats > div {
  padding: 0 var(--space-4);
  border-right: 1px solid var(--rule);
}
.preview-stats > div:last-child {
  border-right: 0;
}
.preview-stats .stat-value {
  font-family: var(--font-display) !important;
  font-size: var(--type-2xl) !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-1) !important;
  line-height: var(--lh-tight) !important;
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Latest wire + latest alert cards inside the preview gate */
.preview-latest {
  background: var(--surface-sunken) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) var(--space-5) !important;
  margin: var(--space-4) 0 !important;
  position: relative;
}
.preview-latest::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--signal-critical);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
#previewLatest.preview-latest::before {
  background: var(--signal-accent);
}
.preview-latest-label {
  font-family: var(--font-mono);
  font-size: var(--type-2xs) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  margin-bottom: var(--space-2) !important;
}
.preview-latest-headline {
  font-family: var(--font-display);
  font-size: var(--type-md) !important;
  line-height: var(--lh-snug) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-1) !important;
}
.preview-latest-meta {
  font-family: var(--font-mono);
  font-size: var(--type-2xs) !important;
  letter-spacing: var(--tracking-wide);
  color: var(--text-dim) !important;
}

/* Primary CTA (Sign in / Open account), editorial treatment */
.preview-gate-inner a[href*='/signup'] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: var(--text-primary) !important;
  color: var(--surface-page) !important;
  padding: var(--space-4) var(--space-8) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--type-xs) !important;
  font-weight: 700 !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-1);
  transition:
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.preview-gate-inner a[href*='/signup']:hover {
  background: var(--signal-critical) !important;
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}
.preview-gate-inner a[href*='/signup']::after {
  content: '→';
  font-family: var(--font-mono);
  transition: transform var(--dur-fast) var(--ease-out);
}
.preview-gate-inner a[href*='/signup']:hover::after {
  transform: translateX(2px);
}
.preview-gate-inner a[href='/'] {
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--type-2xs) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase;
  border-bottom: 1px solid transparent !important;
  padding: var(--space-1) 0 !important;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.preview-gate-inner a[href='/']:hover {
  color: var(--signal-critical) !important;
  border-bottom-color: var(--signal-critical) !important;
}

/* ─── Source filter disclosure (collapses the giant chip grid) ─ */
/* The source-chip filter in the centre panel was previously a flat
       horizontal bar of dozens of buttons taking significant vertical
       real estate. Wrapping it in a <details> defaults it to collapsed
       and surfaces only the currently active source as a pill in the
       summary row. Expand on click to pick a different source. */
.source-filter-disclosure {
  border-bottom: 1px solid var(--rule);
  background: var(--surface-page);
  transition: background var(--dur-fast) var(--ease-out);
}
.source-filter-disclosure[open] {
  background: var(--surface-sunken);
}
.source-filter-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-dim);
  user-select: none;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.source-filter-summary::-webkit-details-marker {
  display: none;
}
.source-filter-summary:hover {
  color: var(--text-primary);
  background: var(--surface-raised);
}
.source-filter-disclosure[open] .sfs-icon {
  transform: rotate(180deg);
}
.sfs-icon {
  display: inline-block;
  color: var(--signal-critical);
  transition: transform var(--dur-base) var(--ease-out);
  font-size: var(--type-sm);
  line-height: 1;
}
.sfs-label {
  font-weight: 700;
  color: var(--text-primary);
}
.sfs-active {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
}
.sfs-active[data-active='true'] {
  color: var(--signal-critical);
  font-weight: 700;
}
.sfs-active[data-active='true']::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--signal-critical);
  margin-right: var(--space-2);
  vertical-align: middle;
}
.sfs-count {
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  color: var(--text-subtle);
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  padding: 1px var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.source-filter-tools {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  padding: 0 var(--space-4) var(--space-2);
}
.source-filter-search {
  width: 100%;
  min-width: 0;
  height: 28px;
  border: 1px solid rgba(16, 18, 20, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(243, 246, 242, 0.82);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: 0;
  padding: 0 var(--space-2);
  outline: none;
}
.source-filter-search:focus {
  border-color: rgba(122, 16, 32, 0.42);
  box-shadow: 0 0 0 2px rgba(122, 16, 32, 0.08);
}
.source-filter-hint,
.source-filter-empty {
  color: var(--text-subtle);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.source-filter-disclosure #filterBar {
  padding: var(--space-2) var(--space-4) var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  max-height: 118px;
  overflow-y: auto;
  animation: sfd-expand var(--dur-base) var(--ease-out);
  align-content: flex-start;
  scrollbar-width: thin;
}
.source-filter-disclosure #filterBar .source-chip {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  max-width: 176px;
  min-height: 26px;
  padding: 4px 6px !important;
}
.source-filter-disclosure #filterBar .source-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.source-filter-disclosure #filterBar .source-chip-count,
.source-filter-disclosure #filterBar .source-chip-critical {
  min-width: 18px;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(16, 18, 20, 0.08);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 900;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: center;
}
.source-filter-disclosure #filterBar .source-chip-critical {
  background: rgba(122, 16, 32, 0.12);
  color: var(--signal-critical);
}
.source-filter-disclosure #filterBar .source-chip-hot {
  border-color: rgba(122, 16, 32, 0.18);
}
.source-filter-disclosure #filterBar .source-chip-all {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-page);
  border-color: rgba(16, 18, 20, 0.22);
}
.source-filter-empty {
  align-self: center;
  padding: 5px 2px;
  flex: 0 0 auto;
}
@keyframes sfd-expand {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .source-filter-disclosure #filterBar {
    animation: none;
  }
  .sfs-icon {
    transition: none;
  }
}
@media (max-width: 1100px) {
  .source-filter-tools {
    grid-template-columns: 1fr;
  }
  .source-filter-hint {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
       INTEL MARKETS - BETS VIEW
       Responsive grid of market cards + polished stat bar on desktop.
       ═══════════════════════════════════════════════════════════════ */
.bets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
  padding-bottom: 16px;
}
@media (max-width: 760px) {
  .bets-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.bet-card {
  min-height: 140px;
}
.bet-card:hover {
  border-color: rgba(139, 92, 246, 0.35) !important;
  transform: translateY(-1px);
}

/* Desktop stat bar: Balance / Profit / Total bets */
.bets-stat-bar {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.bets-stat {
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: 6px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 120px;
}
.bets-stat-label {
  font-size: 8px;
  color: var(--text-dim, #888);
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.bets-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-red, #7a1020);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  line-height: 1.1;
}
.bets-stat-value.positive {
  color: #4caf50;
}
.bets-stat-value.negative {
  color: #f44336;
}

/* Clickable stat card */
.bets-stat-clickable {
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s;
}
.bets-stat-clickable:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.55);
  transform: translateY(-1px);
}

/* Clickable call card in MY CALLS */
.bet-card-clickable:hover {
  border-color: rgba(139, 92, 246, 0.5) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.18);
}

/* Live-tick pulse on the Live Feed indicator */
@keyframes odds-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

/* Promoted ODDS tab in the desktop top nav */
.desktop-nav-tab.desktop-nav-odds {
  margin-left: 12px;
  background: rgba(122, 16, 32, 0.08);
  border: 1px solid rgba(122, 16, 32, 0.34);
  color: var(--accent-red, #7a1020) !important;
  font-weight: 800;
  letter-spacing: 1.2px;
  border-radius: 3px;
  padding: 8px 18px;
  box-shadow: inset 0 -2px 0 rgba(122, 16, 32, 0.22);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.desktop-nav-tab.desktop-nav-odds:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 -2px 0 rgba(122, 16, 32, 0.4);
  background: rgba(122, 16, 32, 0.12);
}
.desktop-nav-tab.desktop-nav-odds.active {
  background: rgba(122, 16, 32, 0.16);
}

/* Leaderboard podium-ish styling */
.lb-row {
  transition: background 0.15s;
}
.lb-row:hover {
  background: rgba(139, 92, 246, 0.05);
}
.lb-row.lb-gold {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.07), transparent 60%);
}
.lb-row.lb-silver {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.06), transparent 60%);
}
.lb-row.lb-bronze {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.07), transparent 60%);
}

/* ═══════════════════════════════════════════════════════════════
       END RESPONSIVE PASS
       ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
       THESIS LEDGER
       Sticky strip + card grid + modal detail view.
       Editorial operator console palette to match the rest of the dashboard.
       ═══════════════════════════════════════════════════════════════ */

/* ─── Trader Decision Stack ─────────────────────────────────────── */
#decisionStack {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 0 0 8px;
  background: var(--border);
}

#decisionStack #thesisSinceStrip {
  margin: 0;
}

.trader-cockpit {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(61, 107, 46, 0.05), rgba(122, 16, 32, 0.018));
  border: 1px solid rgba(16, 18, 20, 0.16);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  overflow: hidden;
}

.trader-cockpit-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.trader-cockpit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.12);
  background: rgba(243, 246, 242, 0.74);
}

.trader-bias-wrap {
  min-width: 0;
}

.trader-eyebrow {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.6px;
  color: var(--accent-green);
  text-transform: uppercase;
}

.trader-bias {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-primary);
  text-transform: uppercase;
}

.trader-rationale {
  margin-top: 2px;
  font-size: 9px;
  line-height: 1.35;
  color: var(--text-dim);
  max-width: 78ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trader-status-pill {
  flex-shrink: 0;
  border: 1px solid rgba(122, 16, 32, 0.24);
  border-radius: 3px;
  background: rgba(122, 16, 32, 0.08);
  color: var(--accent-red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 5px 9px;
  text-transform: uppercase;
}

.trader-queue-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.11);
  background: rgba(230, 233, 226, 0.55);
  overflow: hidden;
}

.trader-queue-summary span {
  flex: 0 0 auto;
  border: 1px solid rgba(16, 18, 20, 0.11);
  border-radius: 3px;
  background: rgba(243, 246, 242, 0.72);
  color: var(--text-dim);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.6px;
  padding: 3px 5px;
}

.trader-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
}

.trader-decision-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 8px;
  min-width: 0;
}

.trader-decision-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) minmax(112px, 0.3fr) minmax(116px, 0.35fr) 38px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 45px;
  border: 1px solid rgba(16, 18, 20, 0.12);
  border-left: 3px solid rgba(122, 111, 94, 0.55);
  border-radius: 3px;
  background: rgba(243, 246, 242, 0.78);
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 6px 8px;
  text-align: left;
  transition:
    border-color 0.14s,
    background 0.14s;
}

.trader-decision-item:hover {
  background: rgba(243, 246, 242, 0.96);
  border-color: rgba(122, 16, 32, 0.26);
}

.trader-decision-critical {
  border-left-color: var(--accent-red);
}

.trader-decision-high {
  border-left-color: var(--accent-amber);
}

.trader-decision-watch {
  border-left-color: var(--accent-blue);
}

.trader-decision-action {
  color: var(--text-primary);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.trader-decision-action-act-now .trader-decision-action,
.trader-decision-action-hedge-check .trader-decision-action {
  color: var(--accent-red);
}

.trader-decision-action-price-check .trader-decision-action,
.trader-decision-action-size-check .trader-decision-action {
  color: var(--accent-amber);
}

.trader-decision-action-verify .trader-decision-action,
.trader-decision-action-do-not-chase .trader-decision-action,
.trader-decision-action-fade-check .trader-decision-action {
  color: var(--accent-blue);
}

.trader-decision-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.trader-decision-copy strong,
.trader-decision-why,
.trader-decision-discipline,
.trader-decision-proof,
.trader-decision-market,
.trader-decision-age {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trader-decision-copy strong {
  color: var(--text-primary);
  font-size: 10px;
  line-height: 1.18;
}

.trader-decision-why {
  color: var(--text-dim);
  font-size: 8px;
  font-style: normal;
  line-height: 1.2;
}

.trader-decision-discipline {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.trader-decision-discipline span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(122, 16, 32, 0.32);
  border-radius: 2px;
  background: rgba(122, 16, 32, 0.07);
  color: var(--accent-red);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 2px 4px;
  text-transform: uppercase;
}

.trader-decision-proof,
.trader-decision-market,
.trader-decision-age {
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 800;
}

.trader-decision-age {
  color: var(--text-dim);
  text-align: right;
}

.decision-workup {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: grid;
  place-items: end center;
  padding: 18px;
  pointer-events: none;
}

.decision-workup-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(16, 18, 20, 0.42);
  cursor: default;
  pointer-events: auto;
}

.decision-workup-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: min(720px, calc(100vw - 36px));
  max-height: min(78dvh, 720px);
  overflow: auto;
  scrollbar-gutter: stable;
  border: 1px solid rgba(16, 18, 20, 0.26);
  border-top: 4px solid var(--accent-red);
  border-radius: 4px;
  background: var(--bg-panel);
  box-shadow: 0 18px 46px rgba(16, 18, 20, 0.28);
  color: var(--text-primary);
  font-family: var(--font-sans);
  padding: 14px;
  pointer-events: auto;
}

.decision-workup-top,
.decision-workup-score,
.decision-workup-grid,
.decision-workup-split,
.decision-workup-routes,
.decision-workup-assets {
  min-width: 0;
}

.decision-workup-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(16, 18, 20, 0.14);
  padding-bottom: 8px;
}

.decision-workup-kicker,
.decision-workup-card span,
.decision-workup-split h3,
.decision-workup-route,
.decision-workup-close,
.decision-workup-score span,
.decision-workup-metric span,
.decision-workup-asset {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.decision-workup-kicker,
.decision-workup-card span,
.decision-workup-score span,
.decision-workup-metric span {
  color: var(--text-dim);
}

.decision-workup h2 {
  margin: 2px 0 0;
  color: var(--accent-red);
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
}

.decision-workup-close,
.decision-workup-route,
.decision-workup-asset {
  border: 1px solid rgba(16, 18, 20, 0.18);
  border-radius: 3px;
  background: rgba(243, 246, 242, 0.88);
  color: var(--text-primary);
  cursor: pointer;
  font-family: var(--font-sans);
  padding: 7px 9px;
  text-decoration: none;
}

.decision-workup-close:hover,
.decision-workup-route:hover,
.decision-workup-asset:hover {
  border-color: rgba(122, 16, 32, 0.38);
  background: rgba(122, 16, 32, 0.08);
}

.decision-workup-title {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.16;
}

.decision-workup-why {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.decision-workup-score {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  border: 1px solid rgba(16, 18, 20, 0.12);
  background: rgba(230, 233, 226, 0.58);
  padding: 8px 10px;
}

.decision-workup-score strong {
  color: var(--accent-red);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.decision-workup-score span:last-child {
  justify-self: end;
}

.decision-workup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.decision-workup-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(16, 18, 20, 0.12);
  background: rgba(243, 246, 242, 0.72);
  padding: 9px;
}

.decision-workup-card strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.decision-workup-card-discipline {
  border-color: rgba(122, 16, 32, 0.22);
  background: rgba(122, 16, 32, 0.06);
}

.decision-workup-card-discipline strong {
  color: var(--accent-red);
}

.decision-workup-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.decision-workup-metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
  min-width: 0;
}

.decision-workup-metric strong {
  color: var(--text-primary);
  font-size: 10px;
}

.decision-workup-meter {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  overflow: hidden;
  border: 1px solid rgba(16, 18, 20, 0.16);
  border-radius: 99px;
  background: rgba(16, 18, 20, 0.08);
}

.decision-workup-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-red);
}

.decision-workup-assets,
.decision-workup-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.decision-workup-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.decision-workup-split > div {
  border: 1px solid rgba(16, 18, 20, 0.12);
  background: rgba(230, 233, 226, 0.4);
  padding: 9px;
}

.decision-workup-split h3 {
  margin: 0 0 6px;
  color: var(--text-dim);
}

.decision-workup-split ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 16px;
}

.decision-workup-split li {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.decision-workup-empty {
  color: var(--text-dim) !important;
}

@media (max-width: 720px) {
  .decision-workup {
    align-items: end;
    padding: 0;
  }

  .decision-workup-panel {
    width: 100%;
    max-height: 88dvh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 8px 8px 0 0;
    padding: 12px;
  }

  .decision-workup-top {
    align-items: center;
  }

  .decision-workup-grid,
  .decision-workup-split,
  .decision-workup-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .decision-workup-title {
    font-size: 15px;
  }

  .decision-workup-route,
  .decision-workup-close,
  .decision-workup-asset {
    min-height: 34px;
  }
}

.trader-card-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 6px;
  padding: 8px;
  min-width: 0;
}

.trader-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 150px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: rgba(243, 246, 242, 0.82);
  border: 1px solid rgba(16, 18, 20, 0.12);
  border-left: 3px solid rgba(122, 111, 94, 0.55);
  border-radius: 4px;
  padding: 9px 10px;
  cursor: pointer;
  transition:
    border-color 0.14s,
    background 0.14s,
    transform 0.14s;
}

.trader-card:hover {
  background: rgba(243, 246, 242, 0.96);
  border-color: rgba(122, 16, 32, 0.28);
  transform: translateY(-1px);
}

.trader-card-critical {
  border-left-color: var(--accent-red);
  background: rgba(122, 16, 32, 0.065);
}

.trader-card-high {
  border-left-color: var(--accent-amber);
  background: rgba(178, 82, 51, 0.06);
}

.trader-card-watch {
  border-left-color: var(--accent-blue);
}

.trader-card-top,
.trader-card-meta,
.trader-inst-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.trader-card-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--text-dim);
  text-transform: uppercase;
}

.trader-card-priority {
  flex-shrink: 0;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.9px;
  color: var(--accent-red);
}

.trader-card-action {
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-primary);
}

.trader-card-statement {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.trader-card-meta {
  justify-content: flex-start;
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 700;
}

.trader-card-reason,
.trader-card-invalid {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  font-size: 9px;
  line-height: 1.4;
}

.trader-card-reason {
  -webkit-line-clamp: 2;
  color: var(--text-primary);
}

.trader-card-invalid {
  -webkit-line-clamp: 1;
  color: var(--text-dim);
  border-top: 1px dashed rgba(16, 18, 20, 0.14);
  padding-top: 5px;
}

.trader-inst-row {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 1px;
}

.trader-inst {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 3px;
  background: rgba(16, 18, 20, 0.055);
  color: var(--text-dim);
  font-size: 8px;
  padding: 3px 6px;
}

.trader-inst strong {
  color: var(--text-primary);
  font-size: 8px;
}

.trader-inst-up strong,
.trader-market-up strong {
  color: var(--accent-green);
}

.trader-inst-down strong,
.trader-market-down strong {
  color: var(--accent-red);
}

.trader-side {
  border-left: 1px solid rgba(16, 18, 20, 0.12);
  background: rgba(217, 224, 219, 0.45);
  padding: 8px;
  min-width: 0;
}

.trader-side-title {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.trader-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.trader-market {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px;
  border: 1px solid rgba(16, 18, 20, 0.1);
  border-radius: 3px;
  background: rgba(243, 246, 242, 0.75);
  padding: 5px 6px;
  font-size: 8px;
}

.trader-market span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
  font-weight: 700;
}

.trader-market strong {
  font-size: 9px;
}

.trader-market-price {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-style: normal;
  font-size: 7px;
}

.trader-market-empty,
.trader-cross-empty,
.trader-tape-empty {
  color: var(--text-dim);
  font-size: 9px;
}

.trader-cross-heading {
  margin-top: 9px;
}

.trader-cross-list {
  display: grid;
  gap: 5px;
}

.trader-cross-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.trader-cross-summary span {
  min-width: 0;
  border: 1px solid rgba(16, 18, 20, 0.1);
  border-radius: 3px;
  background: rgba(243, 246, 242, 0.62);
  color: var(--text-dim);
  font-size: 7px;
  font-weight: 800;
  padding: 3px 5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.trader-cross-item {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(16, 18, 20, 0.11);
  border-left: 3px solid rgba(122, 111, 94, 0.55);
  border-radius: 3px;
  background: rgba(243, 246, 242, 0.72);
  padding: 6px;
  min-width: 0;
}

.trader-cross-verified,
.trader-cross-cross-checked {
  border-left-color: var(--accent-green);
}

.trader-cross-contested,
.trader-cross-narrative-only,
.trader-cross-single-source {
  border-left-color: var(--accent-red);
}

.trader-cross-top,
.trader-cross-metrics,
.trader-cross-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.trader-cross-top strong {
  color: var(--accent-green);
  font-size: 7px;
  letter-spacing: 0.9px;
}

.trader-cross-contested .trader-cross-top strong,
.trader-cross-narrative-only .trader-cross-top strong,
.trader-cross-single-source .trader-cross-top strong {
  color: var(--accent-red);
}

.trader-cross-top span {
  flex-shrink: 0;
  color: var(--text-dim);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.trader-cross-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-primary);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.35;
}

.trader-cross-metrics {
  justify-content: flex-start;
  color: var(--text-dim);
  font-size: 7px;
  font-weight: 800;
}

.trader-cross-speed {
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.35;
}

.trader-cross-foot span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 7px;
  font-style: normal;
}

.trader-cross-foot span {
  max-width: 62%;
}

.trader-cross-assets {
  max-width: 38%;
}

.trader-tape-title {
  margin-top: 8px;
}

.trader-tape {
  display: grid;
  gap: 4px;
}

.trader-tape-item {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  border-top: 1px dashed rgba(16, 18, 20, 0.12);
  padding-top: 4px;
  font-size: 8px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.trader-tape-item strong {
  color: var(--accent-red);
  margin-right: 5px;
  text-transform: uppercase;
}

.trader-cockpit-critical .trader-status-pill {
  background: rgba(122, 16, 32, 0.14);
  color: var(--accent-red);
}

.trader-cockpit-active .trader-status-pill {
  background: rgba(178, 82, 51, 0.13);
  color: var(--accent-amber);
}

.trader-cockpit-watch .trader-status-pill {
  background: rgba(59, 130, 246, 0.1);
  color: var(--accent-blue);
}

.trader-cockpit.is-loading {
  min-height: 0;
}

.trader-cockpit-loading {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 12px;
  color: var(--text-dim);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.trader-cockpit-loading strong {
  color: var(--text-secondary);
  font-weight: 850;
}

@media (max-width: 1380px) {
  .trader-card-rail {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .trader-main {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1099px) {
  .trader-main {
    grid-template-columns: 1fr;
  }
  .trader-side {
    border-left: 0;
    border-top: 1px solid rgba(16, 18, 20, 0.12);
  }
  .trader-card-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#thesisSinceStrip {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(122, 16, 32, 0.05), rgba(122, 16, 32, 0.015));
  border: 1px solid rgba(122, 16, 32, 0.18);
  border-radius: 4px;
  margin: 0 0 8px 0;
  padding: 0;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  overflow: hidden;
}
.thesis-strip-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 38px;
}
.thesis-strip-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: rgba(122, 16, 32, 0.06);
  border-right: 1px solid rgba(122, 16, 32, 0.18);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #7a1020;
  white-space: nowrap;
  flex-shrink: 0;
}
.thesis-strip-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7a1020;
  display: inline-block;
  animation: pulse-loading 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.thesis-strip-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  min-width: 0;
}
.thesis-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-right: 1px dashed rgba(122, 16, 32, 0.14);
  text-decoration: none;
  color: #101214;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s;
  min-width: 0;
}
.thesis-strip-item:hover {
  background: rgba(122, 16, 32, 0.05);
}
.thesis-strip-narrative {
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #5d5a22;
  font-size: 8.5px;
  flex-shrink: 0;
}
.thesis-strip-conf {
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.thesis-strip-statement {
  color: #3a3530;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}
.thesis-strip-empty {
  padding: 10px 14px;
  color: #7a6f5e;
  font-size: 10px;
  font-style: normal;
}
.thesis-strip-scorecard {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  background: rgba(122, 16, 32, 0.08);
  border-left: 1px solid rgba(122, 16, 32, 0.18);
  color: #7a1020;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s;
}
.thesis-strip-scorecard:hover {
  background: rgba(122, 16, 32, 0.16);
}

/* ── Card grid ─────────────────────────────────────────────────── */
.thesis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  padding: 10px 0;
}
.thesis-card {
  background: rgba(232, 236, 231, 0.72);
  border: 1px solid rgba(122, 16, 32, 0.18);
  border-radius: 3px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 10px;
  color: #101214;
}
.thesis-card:hover {
  border-color: rgba(122, 16, 32, 0.45);
  background: rgba(232, 236, 231, 0.92);
  transform: translateY(-1px);
}
.thesis-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.thesis-card-narrative {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #5d5a22;
  display: flex;
  align-items: center;
  gap: 8px;
}
.thesis-card-horizon {
  background: rgba(122, 16, 32, 0.1);
  color: #7a1020;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.5px;
}
.thesis-delta {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
}
.thesis-delta-up {
  background: rgba(122, 16, 32, 0.13);
  color: #7a1020;
}
.thesis-delta-down {
  background: rgba(58, 53, 48, 0.13);
  color: #3a3530;
}
.thesis-delta-flat {
  background: rgba(122, 111, 94, 0.13);
  color: #7a6f5e;
}
.thesis-card-statement {
  font-size: 11px;
  line-height: 1.45;
  color: #101214;
  margin-bottom: 12px;
  min-height: 32px;
}
.thesis-card-bar {
  height: 6px;
  background: rgba(16, 18, 20, 0.07);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 6px;
}
.thesis-card-bar-fill {
  height: 100%;
  transition: width 0.4s ease-out;
}
.thesis-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
}
.thesis-card-conf {
  font-weight: 700;
  letter-spacing: 0.3px;
}
.thesis-card-evidence {
  color: #7a6f5e;
}
.thesis-empty {
  padding: 18px 14px;
  background: rgba(232, 236, 231, 0.5);
  border: 1px dashed rgba(122, 16, 32, 0.22);
  border-radius: 3px;
  color: #7a6f5e;
  font-size: 11px;
  text-align: center;
}

/* ── Modal detail view ─────────────────────────────────────────── */
.thesis-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 20, 0.55);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 9999;
  padding: 6vh 4vw;
  overflow-y: auto;
}
.thesis-modal {
  background: #e8ece7;
  color: #101214;
  border: 1px solid rgba(122, 16, 32, 0.4);
  border-radius: 4px;
  width: min(820px, 96%);
  padding: 28px 32px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  position: relative;
  box-shadow: 0 18px 50px rgba(16, 18, 20, 0.45);
}
.thesis-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 22px;
  font-weight: 700;
  color: #7a1020;
  cursor: pointer;
  line-height: 1;
}
.thesis-modal-narrative {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #5d5a22;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.thesis-modal-statement {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 700;
  color: #101214;
  margin: 0 0 14px 0;
  font-family:
    'IBM Plex Sans',
    -apple-system,
    BlinkMacSystemFont,
    'Helvetica Neue',
    Arial,
    sans-serif;
}
.thesis-modal-confwrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.thesis-modal-bar {
  flex: 1;
  height: 10px;
  background: rgba(16, 18, 20, 0.07);
  border-radius: 1px;
  overflow: hidden;
}
.thesis-modal-bar-fill {
  height: 100%;
  transition: width 0.4s ease-out;
}
.thesis-modal-confval {
  font-size: 18px;
  font-weight: 700;
  min-width: 56px;
  text-align: right;
}
.thesis-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.thesis-modal-col h3,
.thesis-modal-section h3 {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.4px;
  color: #7a1020;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}
.thesis-evidence-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.thesis-evidence-row {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(122, 16, 32, 0.14);
  font-size: 10px;
  line-height: 1.5;
  color: #101214;
}
.thesis-evidence-weight {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 10px;
  min-width: 28px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 2px;
  height: fit-content;
}
.thesis-evidence-pos {
  background: rgba(122, 16, 32, 0.13);
  color: #7a1020;
}
.thesis-evidence-neg {
  background: rgba(58, 53, 48, 0.13);
  color: #3a3530;
}
.thesis-evidence-summary {
  flex: 1;
}
.thesis-evidence-source {
  color: #7a6f5e;
  font-style: normal;
  font-size: 9px;
}
.thesis-empty-mini {
  font-size: 9px;
  color: #7a6f5e;
  font-style: normal;
  margin: 0;
}
.thesis-modal-section {
  margin-top: 14px;
}
.thesis-invalidation-list {
  list-style: square;
  padding-left: 18px;
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: #101214;
}
.thesis-invalidation-list li {
  padding: 3px 0;
}
.thesis-market-row {
  display: grid;
  grid-template-columns: 70px 110px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(122, 16, 32, 0.14);
  font-size: 10px;
  align-items: baseline;
}
.thesis-market-instrument {
  font-weight: 700;
  color: #7a1020;
}
.thesis-market-direction {
  color: #5d5a22;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 9px;
  font-weight: 700;
}
.thesis-market-rationale {
  color: #3a3530;
}
.thesis-modal-footer {
  margin-top: 18px;
  font-size: 8.5px;
  color: #7a6f5e;
  text-align: right;
  font-style: normal;
}

@media (max-width: 720px) {
  .thesis-modal-grid {
    grid-template-columns: 1fr;
  }
  .thesis-strip-statement {
    display: none;
  }
  .thesis-modal {
    padding: 20px 18px;
  }
}

/* ─── Trader Density Pass ────────────────────────────────────────
   Kill the remaining over-tracked editorial styling. A trading desk
   should scan like a console: compact labels, stable numbers, and less
   decorative air around proof/status chrome. */
.desktop-nav-tab,
.mobile-nav-tab,
.panel-header,
.panel-title,
.section-label,
.market-section-title,
.regime-eyebrow,
.regime-coverage,
.regime-score,
.feed-source,
.feed-time,
.feed-meta-detail,
.trust-pill,
.keyword-tag,
.story-source,
.story-time,
.story-badge,
.story-cluster,
.ticker-item,
.ticker-item *,
.status-indicator,
.confidence-badge,
.filter-chip,
.btn,
button {
  letter-spacing: 0 !important;
}

.market-section-title,
.regime-eyebrow,
.feed-source,
.trust-pill,
.keyword-tag,
.feed-decision-cell span,
.feed-decision-cell strong,
.feed-decision-cell small,
.evidence-trail,
#signalCount,
#sentimentLabel {
  font-variant-numeric: tabular-nums lining-nums;
}

/* ─── Desktop Top Chrome Compression Pass ────────────────────────
   The live desk had too many horizontal status bands before the working
   panels. Keep the signal, but spend fewer vertical pixels getting there. */
@media (min-width: 901px) {
  .feed-health-bar {
    display: none !important;
  }

  .ticker-strip {
    min-height: 26px !important;
    padding: 4px 18px !important;
  }

  .ticker-scroll {
    gap: 24px !important;
    padding: 0 !important;
  }

  .ticker-item {
    gap: 6px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .ticker-strip .ticker-value,
  .ticker-price {
    font-size: 10px !important;
  }

  .ticker-strip .ticker-change,
  .ticker-change {
    font-size: 9px !important;
    padding: 0 4px !important;
  }

  #threatStrip {
    min-height: 34px !important;
    padding: 5px 18px !important;
    gap: 12px !important;
  }

  #threatStrip .escalation-track {
    height: 16px !important;
  }

  #threatStrip .escalation-labels {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  .desktop-nav {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
  }

  .desktop-nav-tab {
    padding: 6px 12px !important;
    font-size: 10px !important;
  }

  #decisionStack {
    max-height: clamp(58px, 7dvh, 76px) !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  #decisionStack:has(.trader-cockpit.is-loading) {
    max-height: none !important;
  }

  #decisionStack:has(.trader-cockpit.is-loading) .panel-resizer.horizontal {
    display: none !important;
  }

  .trader-cockpit.is-loading {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #thesisSinceStrip {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
  }

  .thesis-strip-inner {
    min-height: 30px !important;
  }

  .thesis-strip-label,
  .thesis-strip-scorecard {
    padding: 5px 10px !important;
    font-size: 8px !important;
  }

  .thesis-strip-item {
    padding: 4px 10px !important;
    gap: 7px !important;
  }

  .thesis-strip-statement {
    max-width: 300px !important;
  }

  #intelLiveFeed {
    max-height: clamp(46px, 5dvh, 64px) !important;
  }

  #intelAlertsList {
    max-height: clamp(24px, 3.5dvh, 34px) !important;
  }

  #intelLiveFeed .section-label {
    min-height: 20px !important;
    padding: 2px 10px !important;
  }

  #intelLiveFeed .intel-alert-item {
    min-height: 20px !important;
    padding: 3px 10px !important;
  }
}

/* ─── Desktop Overflow Containment Pass ─────────────────────────
   Horizontal rails are useful, but they must behave like contained
   tapes rather than extending the document width. Keep the ticker
   static and clipped on desktop, and turn the breaking story rail
   into a bounded three-card readout. */
@media (min-width: 1024px) {
  .main > * {
    min-width: 0;
  }

  .ticker-strip,
  .story-carousel {
    max-width: 100%;
    min-width: 0;
    contain: layout paint;
    overscroll-behavior-x: contain;
  }

  .ticker-strip {
    overflow: clip !important;
  }

  .ticker-scroll {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px !important;
    overflow: hidden !important;
    animation: none !important;
    transform: none !important;
  }

  .ticker-item {
    flex: 1 1 0;
    min-width: 0;
    max-width: 126px;
    overflow: hidden;
  }

  .ticker-name,
  .ticker-price,
  .ticker-change {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ticker-strip .ticker-price {
    display: none !important;
  }

  .ticker-strip .ticker-name {
    max-width: 58px;
  }

  .ticker-strip .ticker-change {
    flex: 0 0 auto;
  }

  .ticker-strip .sparkline,
  .ticker-strip .sparkline-svg {
    display: none !important;
  }

  .story-carousel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: clip !important;
    gap: 8px;
    scroll-snap-type: none;
  }

  .story-card {
    min-width: 0;
    max-width: none;
    width: auto;
    flex: 1 1 auto;
    scroll-snap-align: none;
  }

  .story-card:nth-child(n + 4) {
    display: none;
  }

  body.desk-width-contained .ticker-strip,
  body.desk-width-contained .story-carousel,
  body.desk-width-contained #decisionStack,
  body.desk-width-contained #intelLiveFeed {
    max-width: min(100%, 100vw) !important;
    contain: inline-size layout paint;
    overflow-x: clip !important;
  }

  body.desk-width-contained .ticker-scroll {
    gap: 4px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.desk-width-contained .ticker-item {
    max-width: 96px;
    padding-inline: 4px;
  }

  body.desk-width-contained .story-carousel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.desk-width-contained .story-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 901px) and (max-width: 1279px) {
  .story-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-card:nth-child(n + 3) {
    display: none;
  }
}

.regime-block {
  min-height: 0;
}

.regime-label.is-empty {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--type-lg);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}

.regime-block.is-empty {
  background: var(--surface-page);
}

.regime-block.is-empty .regime-label-row {
  margin-bottom: var(--space-1);
}

.regime-block.is-empty .regime-drivers {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: var(--type-2xs);
  margin-bottom: 0;
}

.regime-block.is-empty .regime-grid {
  display: none;
}

/* Regime Density Pass: make the cross-asset readout feel like a desk tape,
   not a hero card. */
.regime-block {
  padding: 8px 10px !important;
  background: var(--surface-page) !important;
}

.regime-header {
  margin-bottom: 4px !important;
}

.regime-eyebrow,
.regime-coverage,
.regime-score,
.regime-cell-label {
  letter-spacing: 0 !important;
}

.regime-label-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end !important;
  gap: 8px !important;
  margin: 3px 0 5px !important;
}

.regime-label {
  font-family: var(--font-sans) !important;
  font-size: clamp(18px, 2vw, 28px) !important;
  font-weight: 850 !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.regime-label.is-empty {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: var(--text-secondary) !important;
}

.regime-score {
  align-self: end;
  color: var(--text-secondary) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  padding-bottom: 2px;
}

.regime-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
}

.regime-meta-pill,
.regime-driver-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 9px;
  font-feature-settings: var(--tab-nums);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  padding: 2px 5px;
}

.regime-meta-pill span {
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 800;
}

.regime-meta-pill strong {
  color: var(--text-primary);
  font-weight: 850;
}

.regime-drivers {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 0 !important;
  margin-bottom: 6px !important;
}

.regime-driver-chip {
  border-color: rgba(137, 22, 40, 0.22);
  color: var(--signal-critical);
  font-weight: 800;
}

.regime-driver-chip.is-muted {
  border-color: var(--rule);
  color: var(--text-dim);
}

.regime-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3px !important;
  padding-top: 6px !important;
}

.regime-cell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--rule) !important;
  border-left-width: 2px !important;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
  padding: 3px 4px !important;
}

.regime-cell[data-direction='up'] {
  border-left-color: var(--signal-positive) !important;
}

.regime-cell[data-direction='down'] {
  border-left-color: var(--signal-critical) !important;
}

.regime-cell[data-direction='flat'] {
  border-left-color: var(--text-dim) !important;
}

.regime-cell[data-direction='na'] {
  opacity: 0.62;
}

.regime-cell-label,
.regime-cell-value {
  font-size: 9px !important;
  line-height: 1.1;
}

.regime-cell-value {
  justify-self: end;
  font-weight: 850;
}

.regime-block.is-empty .regime-meta-row {
  display: none;
}

@media (max-width: 920px) {
  .regime-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.feed-decision-strip {
  grid-template-columns: minmax(68px, 0.65fr) minmax(86px, 0.78fr) minmax(120px, 1fr) auto;
  margin-top: 6px;
  border-left-width: 2px;
  border-radius: 2px;
}

.feed-decision-strip--has-tape {
  grid-template-columns: minmax(64px, 0.62fr) minmax(80px, 0.72fr) minmax(110px, 0.95fr) minmax(82px, 0.72fr) auto;
}

.feed-decision-cell {
  padding: 4px 6px;
}

.feed-decision-cell span {
  font-size: 7px;
  letter-spacing: 0 !important;
  margin-bottom: 1px;
}

.feed-decision-cell strong {
  font-size: 8.5px;
  letter-spacing: 0 !important;
  line-height: 1.2;
}

.feed-decision-cell small {
  font-size: 8px;
  line-height: 1.2;
}

.evidence-trail {
  padding: 4px 7px;
  margin-top: 5px;
  border-left-width: 1px;
  font-size: 8.5px;
  line-height: 1.4;
}

.feed-meta-detail span[style],
.feed-item span[style*='letter-spacing'],
.feed-item div[style*='letter-spacing'] {
  letter-spacing: 0 !important;
}

/* ─── Desktop Signal Density Pass ─────────────────────────────────
   The trader cockpit lives in a shallow command band. Keep it legible
   without allowing full-height cards to clip under confirmed intel. */
@media (min-width: 901px) {
  .trader-cockpit {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    background: var(--surface-page);
  }

  .trader-cockpit-inner {
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 2.25fr);
    align-items: stretch;
  }

  .trader-cockpit-head {
    grid-column: 1;
    grid-row: 1;
    padding: 7px 12px;
    border-right: 1px solid rgba(16, 18, 20, 0.14);
    border-bottom: 0;
    background: rgba(242, 243, 239, 0.78);
  }

  .trader-queue-summary {
    grid-column: 1;
    grid-row: 2;
    gap: 3px;
    padding: 4px 8px;
    border-right: 1px solid rgba(16, 18, 20, 0.14);
    border-bottom: 0;
  }

  .trader-queue-summary span {
    font-size: 6.5px;
    letter-spacing: 0;
    padding: 2px 4px;
  }

  .trader-eyebrow,
  .trader-card-label,
  .trader-card-priority,
  .trader-side-title {
    letter-spacing: 0 !important;
  }

  .trader-bias {
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.12;
    letter-spacing: 0;
  }

  .trader-rationale {
    max-width: 34ch;
    font-size: 8px;
    line-height: 1.2;
  }

  .trader-status-pill {
    padding: 4px 7px;
    font-size: 8px;
    letter-spacing: 0;
  }

  .trader-main {
    grid-column: 2;
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 230px);
    min-height: 0;
  }

  .trader-decision-rail {
    gap: 3px;
    padding: 5px;
  }

  .trader-decision-item {
    grid-template-columns: 68px minmax(0, 1fr) minmax(88px, 0.25fr) minmax(96px, 0.3fr) 32px;
    gap: 5px;
    min-height: 29px;
    padding: 4px 6px;
    border-left-width: 2px;
  }

  .trader-decision-item:nth-child(n + 4) {
    display: none;
  }

  .trader-decision-action {
    font-size: 8px;
    letter-spacing: 0;
  }

  .trader-decision-copy strong {
    font-size: 8.5px;
    line-height: 1.1;
  }

  .trader-decision-why {
    display: none;
  }

  .trader-decision-proof,
  .trader-decision-market,
  .trader-decision-age {
    font-size: 7px;
  }

  .trader-card-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
  }

  .trader-card {
    gap: 2px;
    min-height: 0;
    height: 66px;
    padding: 6px 7px;
    border-radius: 2px;
    border-left-width: 2px;
    background: rgba(242, 243, 239, 0.74);
    transform: none !important;
  }

  .trader-card-action {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 10.5px;
    line-height: 1.08;
    letter-spacing: 0;
  }

  .trader-card-statement {
    min-height: 0;
    -webkit-line-clamp: 1;
    font-size: 8px;
    line-height: 1.2;
  }

  .trader-card-meta {
    font-size: 7px;
  }

  .trader-card-reason,
  .trader-card-invalid,
  .trader-inst-row,
  .trader-cross-heading,
  .trader-cross-list,
  .trader-tape-title,
  .trader-tape {
    display: none;
  }

  .trader-side {
    display: grid;
    align-content: start;
    gap: 4px;
    padding: 6px;
    background: rgba(211, 217, 212, 0.38);
  }

  .trader-market-grid {
    gap: 3px;
  }

  .trader-market {
    padding: 4px 5px;
    border-radius: 2px;
    background: rgba(242, 243, 239, 0.76);
    font-size: 7px;
  }

  .trader-market strong {
    font-size: 8px;
  }

  .trader-market-price {
    font-size: 6.5px;
  }

  #thesisSinceStrip {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .thesis-strip-item {
    padding: 4px 12px;
    font-size: 9px;
  }
}

@media (min-width: 901px) and (max-width: 1380px) {
  .trader-cockpit-inner {
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 2.3fr);
  }

  .trader-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .trader-side {
    display: none;
  }

  .trader-card-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ─── Desktop Feed Row Containment Pass ─────────────────────────
   Dense proof strips sit inside resizable panels; their content must
   truncate inside the row instead of spilling past the viewport. */
@media (min-width: 901px) {
  .claim-tape-strip,
  .desk-impact-strip,
  .trust-readout,
  .feed-decision-strip {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .claim-tape-strip {
    grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 0.72fr) minmax(0, 0.85fr);
  }

  .desk-impact-strip {
    grid-template-columns: auto minmax(0, 0.86fr) minmax(0, 0.86fr) minmax(0, 0.86fr) 34px;
  }

  .trust-readout {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.2fr) 42px;
  }

  .claim-tape-strip > *,
  .desk-impact-strip > *,
  .trust-readout > *,
  .feed-decision-strip > * {
    min-width: 0;
  }

  .claim-tape-kicker,
  .claim-tape-proof,
  .claim-tape-market,
  .claim-tape-strip strong,
  .claim-tape-strip small,
  .desk-impact-kicker,
  .desk-impact-action,
  .desk-impact-strip strong,
  .desk-impact-strip small,
  .trust-readout-cell span,
  .trust-readout-cell strong,
  .trust-readout-cell small,
  .trust-readout-cta,
  .feed-decision-cell span,
  .feed-decision-cell strong,
  .feed-decision-cell small {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .feed-decision-strip {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 0.78fr) minmax(0, 1fr) minmax(0, auto) !important;
  }

  .feed-decision-strip--has-tape {
    grid-template-columns:
      minmax(0, 0.62fr) minmax(0, 0.72fr) minmax(0, 0.95fr)
      minmax(0, 0.72fr) minmax(0, auto) !important;
  }

  .feed-decision-actions {
    min-width: 0;
    overflow: hidden;
  }

  .feed-decision-actions button {
    min-width: 0;
    width: 42px;
    padding-inline: 3px;
  }

  #rightPanel,
  #rightPanel * {
    min-width: 0;
  }

  #alertFeed .feed-item,
  #mainFeed .feed-item,
  #specialistFeed .feed-item {
    max-width: 100%;
    overflow: hidden;
  }

  .market-row {
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }

  .market-row .name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-row .price {
    flex: 0 1 54px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-row .change {
    flex: 0 1 66px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-impact-row {
    max-width: 100%;
    overflow: hidden;
  }

  .market-impact-top,
  .market-impact-meta,
  .market-impact-actions {
    max-width: 100%;
    overflow: hidden;
  }

  .market-impact-actions {
    flex-wrap: wrap;
  }

  .market-impact-actions button {
    flex: 0 1 58px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .signal-card {
    max-width: 100%;
    overflow: hidden;
  }

  .signal-card > div,
  .signal-card > div > div {
    min-width: 0;
    overflow: hidden;
  }

  .signal-card .signal-instrument,
  .signal-card .signal-move,
  .signal-timeframe,
  .signal-badge {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .signal-badge {
    max-width: 54px;
  }
}

/* Professional Desk Finish Pass
   Make the live app feel like a serious trading workstation: cool paper,
   restrained borders, fewer tinted slabs, and only critical signal in colour. */
@media (min-width: 901px) {
  body {
    background: var(--surface-page) !important;
  }

  .header {
    border-bottom: 1px solid rgba(246, 247, 244, 0.12) !important;
    box-shadow: none !important;
  }

  .search-container {
    height: 34px !important;
    border-color: rgba(16, 18, 20, 0.18) !important;
    border-radius: 3px !important;
    background: var(--surface-raised) !important;
    box-shadow: none !important;
  }

  .search-input {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .main {
    background: rgba(16, 18, 20, 0.13) !important;
  }

  .desktop-nav,
  .panel-header,
  .section-label,
  .market-section-title {
    background: var(--surface-page) !important;
    background-image: none !important;
  }

  .desktop-nav {
    border-top: 1px solid rgba(16, 18, 20, 0.08) !important;
    border-bottom-color: rgba(16, 18, 20, 0.16) !important;
  }

  .desktop-nav-tab {
    color: var(--text-dim) !important;
    font-weight: 750 !important;
  }

  .desktop-nav-tab.active {
    color: var(--text-primary) !important;
  }

  .desktop-nav-tab.active::after {
    width: 100% !important;
    height: 2px !important;
    border-radius: 0 !important;
    background: var(--signal-critical) !important;
    box-shadow: none !important;
  }

  .panel,
  #leftPanel,
  #centerPanel,
  #rightPanel {
    background: var(--surface-page) !important;
  }

  .panel-header {
    min-height: 34px !important;
    padding: 7px 12px !important;
    border-bottom-color: rgba(16, 18, 20, 0.12) !important;
  }

  .panel-title,
  .section-label,
  .market-section-title {
    color: var(--text-secondary) !important;
    font-size: 9.5px !important;
    font-weight: 760 !important;
  }

  .panel-count,
  .feed-time,
  .feed-meta-detail,
  .feed-source {
    color: var(--text-dim) !important;
  }

  #decisionStack,
  #intelLiveFeed,
  #thesisSinceStrip,
  .trader-cockpit {
    background: var(--surface-page) !important;
    border-color: rgba(16, 18, 20, 0.12) !important;
    box-shadow: none !important;
  }

  #intelLiveFeed {
    border-left-width: 2px !important;
    background: var(--surface-page) !important;
  }

  #intelAlertsList,
  #intelLiveFeed .section-label {
    background: transparent !important;
  }

  .trader-cockpit-head,
  .trader-queue-summary,
  .trader-side,
  .trader-card,
  .trader-market,
  .story-card,
  .regime-cell,
  .regime-meta-pill,
  .regime-driver-chip,
  .my-desk-open-first,
  .freshness-gate-banner,
  .proof-speed-banner,
  .market-impact-row,
  .signal-card {
    background: var(--surface-raised) !important;
    box-shadow: none !important;
  }

  .feed-item {
    padding: 11px 14px !important;
    background: transparent !important;
    border-bottom-color: rgba(16, 18, 20, 0.1) !important;
    box-shadow: none !important;
  }

  .feed-item:hover {
    background: rgba(16, 18, 20, 0.035) !important;
  }

  .feed-item.alert-critical,
  .feed-item.alert-high {
    animation: none !important;
    box-shadow: none !important;
  }

  .feed-item.alert-critical {
    background: rgba(122, 16, 32, 0.04) !important;
    border-left-width: 2px !important;
  }

  .feed-item.alert-high {
    background: rgba(178, 82, 51, 0.035) !important;
    border-left-width: 2px !important;
  }

  .feed-title,
  .feed-title a {
    font-size: 13px !important;
    line-height: 1.28 !important;
    font-weight: 670 !important;
  }

  .claim-tape-strip,
  .desk-impact-strip,
  .trust-readout,
  .feed-decision-strip,
  .evidence-trail,
  .my-desk-open-first,
  .my-desk-open-cell,
  .freshness-gate-banner,
  .proof-speed-banner,
  .proof-speed-cell,
  .trust-pill,
  .keyword-tag,
  .filter-chip,
  .confidence-badge,
  .story-badge {
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  .claim-tape-strip,
  .desk-impact-strip,
  .trust-readout,
  .feed-decision-strip {
    background: rgba(246, 247, 244, 0.76) !important;
    border-color: rgba(16, 18, 20, 0.11) !important;
  }

  .trust-pill,
  .keyword-tag,
  .filter-chip,
  .confidence-badge,
  .mobile-command-chip {
    background: rgba(16, 18, 20, 0.045) !important;
    border-color: rgba(16, 18, 20, 0.11) !important;
    color: var(--text-secondary) !important;
  }

  .panel-resizer {
    background: rgba(16, 18, 20, 0.13) !important;
  }
}

/* Human Operator Finish Pass
   Make the decision loop read as one hand-tooled operating surface, not a
   stack of generated cards. Image texture stays off the live desk; this is
   pure data-native spacing, rules, and hierarchy. */
@media (min-width: 901px) {
  .my-desk-open-first {
    grid-template-columns: minmax(230px, 0.9fr) minmax(420px, 1.55fr) auto !important;
    gap: 0 !important;
    padding: 0 !important;
    border-left-width: 3px !important;
    background: var(--surface-raised) !important;
  }

  .my-desk-open-lead {
    padding: 10px 12px !important;
    border-right: 1px solid rgba(16, 18, 20, 0.11) !important;
  }

  .my-desk-open-cells,
  .proof-speed-cells {
    gap: 0 !important;
    border-right: 1px solid rgba(16, 18, 20, 0.11) !important;
  }

  .my-desk-open-cell,
  .proof-speed-cell {
    border-width: 0 1px 0 0 !important;
    border-color: rgba(16, 18, 20, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .my-desk-open-cell:last-child,
  .proof-speed-cell:last-child {
    border-right-width: 0 !important;
  }

  .my-desk-open-actions,
  .proof-speed-banner button {
    margin: 8px !important;
  }

  .proof-speed-banner {
    margin-top: 0 !important;
    padding: 0 !important;
    border-top: 0 !important;
    background: var(--surface-raised) !important;
  }

  .proof-speed-lead {
    padding: 9px 12px !important;
    border-right: 1px solid rgba(16, 18, 20, 0.11) !important;
  }

  .freshness-gate-banner {
    padding: 8px 12px !important;
    border-top: 1px solid rgba(16, 18, 20, 0.1) !important;
  }
}

/* OSINT Preset Activation Loop
   Preset packs are operating controls: show whether they are active, how much
   live tape they currently catch, and make the second tap jump to evidence. */
.osint-preset-live {
  margin-top: 3px;
  color: var(--text-dim);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.osint-preset-btn.is-focused {
  border-color: rgba(122, 16, 32, 0.42) !important;
  box-shadow: inset 2px 0 0 var(--accent-red, #7a1020) !important;
}

.osint-preset-focus-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(122, 16, 32, 0.18);
  border-left: 3px solid var(--accent-red, #7a1020);
  background: rgba(122, 16, 32, 0.055);
}

.osint-preset-focus-banner span,
.osint-preset-focus-banner strong,
.osint-preset-focus-banner small,
.osint-preset-focus-banner button {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  letter-spacing: 0;
  text-transform: uppercase;
}

.osint-preset-focus-banner span {
  display: block;
  color: var(--accent-red, #7a1020);
  font-size: 7px;
  font-weight: 800;
}

.osint-preset-focus-banner strong {
  display: block;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 900;
}

.osint-preset-focus-banner small {
  display: block;
  color: var(--text-secondary);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
}

.osint-preset-focus-banner button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(122, 16, 32, 0.2);
  border-radius: 2px;
  background: rgba(246, 247, 244, 0.72);
  color: var(--accent-red, #7a1020);
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}