/* ══════════════════════════════════════════════════════════════════════════
   INTEL DESK, MOBILE DESIGN SYSTEM
   ──────────────────────────────────────────────────────────────────────────
   Hand-crafted. Not AI-at-the-wall CSS. Every value is a deliberate choice.
   Target: max-width 768px  (the dashboard mobile breakpoint)

   TYPOGRAPHIC SCALE
   ─────────────────
   Display  IBM Plex Sans 700    20px    Wordmark, masthead
   Heading  IBM Plex Sans 600    17px    Feed headlines
   Body     IBM Plex Sans 400    15px    Deks, paragraphs
   Meta     IBM Plex Mono 400    11px    Source labels, timestamps
   Caps     IBM Plex Mono 700    10px    Tab labels, section heads (+0.12em)
   Data     IBM Plex Mono 400    13px    Prices, counts (tabular-nums)

   SPACING (4 px grid)
   ─────────────────────────────────────────────
   4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64

   PALETTE
   ─────────────────────────────────────────────
   Ink       #101214   Primary text, header background
   Cream     #e8ece7   Page background (--bg-primary)
   Cream alt #d9e0db   Secondary surfaces (--bg-secondary)
   Card      #f3f6f2   Raised card bg (--bg-card)
   Oxblood   #7a1020   Critical, active states (--accent-red)
   Terracotta #b25233  Warnings (--accent-amber)
   Forest    #3d6b2e   Positive, LIVE dot (--accent-green)
   Hairline  rgba(16,18,20,0.15)  Dividers (approx. --border)

   LAYER ORDER (z-index)
   ─────────────────────
   Bottom nav  10002   (fixed, above everything except modals)
   Modals      10003+
   Auth gate   10000
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Global quality (all viewports) ────────────────────────────────────── */

/* Proper selection colour: oxblood ink on cream */
::selection {
  background: #7a1020;
  color: #e8ece7;
}

/* Accessible focus ring: 2px oxblood, 2px offset */
:focus-visible {
  outline: 2px solid #7a1020;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Disable default iOS blue tap flash everywhere; we provide our own states */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Body-level rendering quality */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE OVERRIDES, all rules inside @media (max-width: 768px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── Visually-hidden utility (screen-reader only) ───────────────────────── */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* ── Reduce duplicate top-of-desk surfaces on mobile ──────────────────── */
  #intelMapSection,
  #mobileThreatStrip,
  #leadStory,
  #topSignals,
  #readProgressBar,
  #liveMarketsStrip,
  #storyCarousel,
  #eventClusters {
    display: none !important;
  }

  /* ── Engagement: streak badge, threat indicator, progress, read states ──── */
  #streakIndicator {
    gap: 3px !important;
    padding: 2px 6px !important;
    background: rgba(232, 236, 231, 0.08) !important;
    border-radius: 3px !important;
  }
  #headerThreat {
    gap: 4px !important;
  }
  #readProgressBar {
    padding: 8px 20px !important;
    border-bottom: 1px solid var(--border) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-dim) !important;
  }
  .read-progress-track {
    height: 3px !important;
    background: rgba(16, 18, 20, 0.06) !important;
    border-radius: 2px !important;
    margin-top: 4px !important;
    overflow: hidden !important;
  }
  .read-progress-fill {
    height: 100% !important;
    background: var(--signal-positive, #3d6b2e) !important;
    border-radius: 2px !important;
    transition: width 0.4s ease !important;
  }
  .feed-item.read {
    opacity: 0.6 !important;
    border-left-color: var(--signal-positive, #3d6b2e) !important;
  }
  .feed-item.read .feed-title {
    color: var(--text-dim) !important;
  }
  .feed-item.read.alert-critical {
    opacity: 0.7 !important;
    border-left-color: rgba(122, 16, 32, 0.4) !important;
  }
  .feed-item.handled {
    opacity: 0.72 !important;
    background: rgba(16, 18, 20, 0.025) !important;
  }
  .feed-item.handled .feed-title {
    color: var(--text-dim) !important;
  }
  .feed-item.handled::after {
    content: 'HANDLED';
    position: absolute;
    top: 18px;
    right: 56px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--accent-green, #3d6b2e);
  }

  /* ── Mobile command deck: the first read, not another passive card ────── */
  #mobileCommandDeck {
    display: block !important;
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--border) !important;
    background: rgba(232, 236, 231, 0.96) !important;
  }
  .mobile-command-grid {
    display: grid;
    gap: 6px;
  }
  .mobile-command-card {
    background: rgba(243, 246, 242, 0.92);
    border: 1px solid rgba(16, 18, 20, 0.1);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: none;
  }
  .mobile-command-card.is-loading {
    min-height: 140px;
    display: grid;
    align-content: center;
  }
  .mobile-command-card.command-risk {
    background: linear-gradient(180deg, rgba(243, 246, 242, 0.98), rgba(232, 236, 231, 0.96)), var(--bg-card);
  }
  .mobile-command-card.command-risk.tone-kinetic {
    border-color: rgba(178, 82, 51, 0.28);
    box-shadow: inset 3px 0 0 rgba(178, 82, 51, 0.72);
  }
  .mobile-command-card.command-risk.tone-conflict {
    border-color: rgba(122, 16, 32, 0.28);
    box-shadow: inset 3px 0 0 rgba(122, 16, 32, 0.78);
  }
  .mobile-command-card.command-risk.tone-escalation {
    border-color: rgba(176, 114, 20, 0.26);
    box-shadow: inset 3px 0 0 rgba(176, 114, 20, 0.7);
  }
  .mobile-command-eyebrow {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .mobile-command-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto);
    gap: 8px;
    align-items: start;
    margin-bottom: 6px;
  }
  .mobile-command-kicker {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: var(--m-caption);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-red);
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .mobile-command-title {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    font-feature-settings: var(--tab-nums) !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    color: var(--text-primary) !important;
    margin: 0 0 4px !important;
  }
  .mobile-command-copy,
  .mobile-briefing-meta,
  .mobile-next-path,
  .mobile-contradiction-callout {
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
  }
  .mobile-command-summary {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    line-height: 1.22;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .mobile-risk-stack {
    display: grid;
    gap: 3px;
    justify-items: end;
  }
  .mobile-risk-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 25px;
    padding: 0 8px;
    border-radius: 4px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    background: rgba(16, 18, 20, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(16, 18, 20, 0.1);
  }
  .mobile-risk-pill.tone-diplomatic {
    color: var(--accent-green, #3d6b2e);
    background: rgba(61, 107, 46, 0.1);
  }
  .mobile-risk-pill.tone-posturing {
    color: var(--accent-blue, #365c7c);
    background: rgba(54, 92, 124, 0.1);
  }
  .mobile-risk-pill.tone-escalation {
    color: #8e5a17;
    background: rgba(176, 114, 20, 0.12);
  }
  .mobile-risk-pill.tone-kinetic {
    color: var(--accent-amber, #b25233);
    background: rgba(178, 82, 51, 0.12);
  }
  .mobile-risk-pill.tone-conflict {
    color: var(--accent-red, #7a1020);
    background: rgba(122, 16, 32, 0.12);
  }
  .mobile-risk-meta {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-dim);
  }
  .mobile-command-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
  }
  .mobile-command-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid rgba(16, 18, 20, 0.1);
    background: rgba(16, 18, 20, 0.05);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .mobile-command-chip.critical {
    color: var(--accent-red, #7a1020);
    background: rgba(122, 16, 32, 0.08);
  }
  .mobile-command-chip.chip-button {
    cursor: pointer;
    font-family: inherit;
  }
  .mobile-action-receipts {
    display: grid;
    gap: 6px;
    margin: 0 0 7px;
    padding: 7px 8px;
    border: 1px solid rgba(61, 107, 46, 0.22);
    border-radius: 4px;
    background: rgba(61, 107, 46, 0.075);
  }
  .mobile-action-receipt-head {
    display: grid;
    grid-template-columns: minmax(0, 88px) minmax(0, 1fr);
    gap: 4px 8px;
    align-items: baseline;
  }
  .mobile-action-receipt-head span,
  .mobile-action-receipt-chip small {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .mobile-action-receipt-head strong {
    min-width: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--accent-green, #3d6b2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-action-receipt-head small {
    grid-column: 1 / -1;
    min-width: 0;
    color: var(--text-secondary);
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif);
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-action-receipt-chips {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-action-receipt-chips::-webkit-scrollbar {
    display: none;
  }
  .mobile-action-receipt-chip {
    flex: 0 0 auto;
    display: inline-grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 0 8px;
    border: 1px solid rgba(61, 107, 46, 0.26);
    border-radius: 4px;
    background: rgba(243, 246, 242, 0.86);
    color: var(--text-primary);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    touch-action: manipulation;
  }
  .mobile-action-receipt-chip b {
    color: var(--text-dim);
    font-weight: 700;
  }
  .mobile-action-receipt-chip small {
    color: var(--accent-red, #7a1020);
  }
  .mobile-action-receipt-chip.action-muted {
    border-color: rgba(176, 114, 20, 0.3);
  }
  .mobile-command-explain {
    margin: 6px 0 0;
    border-top: 1px solid rgba(16, 18, 20, 0.08);
    padding-top: 6px;
  }
  .mobile-command-explain summary {
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  .mobile-command-explain summary::-webkit-details-marker {
    display: none;
  }
  .mobile-command-columns {
    display: grid;
    gap: 8px;
    margin-top: 8px;
  }
  .mobile-command-notes-detail {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(16, 18, 20, 0.08);
  }
  .mobile-command-label {
    display: block;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .mobile-command-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.42;
  }
  .mobile-command-list.briefing {
    margin-bottom: 10px;
  }
  .mobile-command-next {
    margin-top: 8px;
    padding: 8px;
    border-radius: 4px;
    background: rgba(16, 18, 20, 0.04);
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
  }
  .mobile-command-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .mobile-command-actions.secondary {
    margin-top: 6px;
  }
  .mobile-command-actions button {
    min-height: 36px;
    border: 1px solid rgba(16, 18, 20, 0.12);
    border-radius: 4px;
    background: rgba(16, 18, 20, 0.06);
    color: var(--text-primary);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0 8px;
    cursor: pointer;
  }
  .mobile-command-actions button:active {
    background: rgba(16, 18, 20, 0.12);
  }
  .mobile-command-action-primary {
    background: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
    color: var(--bg-primary, #e8ece7) !important;
    box-shadow: 0 8px 16px rgba(16, 18, 20, 0.14);
  }
  .mobile-command-action-primary:active {
    background: rgba(16, 18, 20, 0.84) !important;
  }
  .mobile-command-action-secondary {
    background: rgba(122, 16, 32, 0.08) !important;
    border-color: rgba(122, 16, 32, 0.16) !important;
    color: var(--accent-red, #7a1020) !important;
  }
  .mobile-command-action-secondary:active {
    background: rgba(122, 16, 32, 0.14) !important;
  }
  .mobile-command-actions.secondary button {
    min-height: 32px;
    border-radius: 4px;
    background: rgba(16, 18, 20, 0.04);
    color: var(--text-secondary);
    font-size: 8px;
  }
  .mobile-command-note-stack {
    display: grid;
    gap: 4px;
    margin-bottom: 6px;
  }
  .mobile-command-note {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
    align-items: start;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }
  .mobile-command-note-label {
    display: block;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0;
    padding-top: 2px;
  }
  .mobile-command-note-copy {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 11.5px;
    line-height: 1.28;
    color: var(--text-secondary);
  }
  .mobile-command-queue {
    display: grid;
    gap: 8px;
  }
  .mobile-command-empty {
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(16, 18, 20, 0.04);
    color: var(--text-dim);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
  }
  .mobile-queue-item {
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(16, 18, 20, 0.035);
    border: 1px solid rgba(16, 18, 20, 0.08);
  }
  .mobile-queue-item.alert-critical {
    border-color: rgba(122, 16, 32, 0.22);
    background: rgba(122, 16, 32, 0.05);
  }
  .mobile-queue-item.alert-high {
    border-color: rgba(178, 82, 51, 0.18);
  }
  .mobile-queue-item.is-priority {
    background: rgba(243, 246, 242, 0.82);
    border-width: 1px;
  }
  .mobile-queue-head {
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
  }
  .mobile-queue-meta,
  .mobile-queue-hit {
    display: block;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
  }
  .mobile-queue-hit {
    margin-top: 3px;
    margin-bottom: 0;
    color: var(--accent-cyan, #06b6d4);
  }
  .mobile-queue-title {
    display: block;
    font-family: var(--font-display, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 12.5px;
    line-height: 1.18;
    color: var(--text-primary);
  }
  .mobile-queue-item.is-priority .mobile-queue-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mobile-queue-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .mobile-queue-actions button {
    flex: 1 1 calc(33.333% - 6px);
    min-height: 38px;
    border: 1px solid rgba(16, 18, 20, 0.12);
    border-radius: 10px;
    background: rgba(243, 246, 242, 0.92);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
  }
  .mobile-contradiction-callout,
  .mobile-next-path {
    padding: 12px;
    border-radius: 12px;
    background: rgba(16, 18, 20, 0.04);
  }
  .mobile-contradiction-callout {
    margin-bottom: var(--sp-12);
    border-left: 3px solid rgba(122, 16, 32, 0.25);
  }
  .mobile-command-divider {
    height: 1px;
    background: rgba(16, 18, 20, 0.08);
    margin: 6px 0;
  }
  .mobile-book-briefing {
    display: grid;
    gap: 8px;
    margin-top: var(--sp-12);
  }
  .mobile-book-briefing-item {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(16, 18, 20, 0.08);
    background: rgba(16, 18, 20, 0.04);
  }
  .mobile-book-briefing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
  }
  .mobile-book-ticker,
  .mobile-book-change {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .mobile-book-ticker {
    color: var(--accent-cyan, #06b6d4);
  }
  .mobile-book-change {
    color: var(--text-secondary);
  }
  .mobile-book-headline {
    font-size: var(--m-body-sm);
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .mobile-thesis-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mobile-thesis-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(16, 18, 20, 0.1);
    background: rgba(16, 18, 20, 0.04);
    text-decoration: none;
    color: var(--text-primary);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .mobile-thesis-chip.direction-up strong {
    color: var(--accent-red, #7a1020);
  }
  .mobile-thesis-chip.direction-down strong {
    color: var(--accent-green, #3d6b2e);
  }
  .mobile-thesis-empty {
    color: var(--text-dim);
    font-size: var(--m-body-sm);
    line-height: 1.5;
  }

  /* ── 0. Global mobile touch optimization ────────────────────────────────── */
  /* Eliminate 300ms tap delay on all interactive elements */
  button,
  a,
  input,
  select,
  textarea,
  .filter-chip,
  .tab,
  .feed-item,
  .mobile-nav-tab {
    touch-action: manipulation !important;
  }

  /* ── 1. CSS variables: mobile type & spacing scale ──────────────────────── */
  :root {
    /* Type sizes (optimized for mobile reading distance) */
    --m-display: 22px;
    --m-heading: 17px;
    --m-headline: 16px; /* feed card headlines */
    --m-body: 15px;
    --m-body-sm: 14px;
    --m-data: 13px;
    --m-meta: 12px; /* source labels, timestamps */
    --m-caps: 11px;
    --m-caption: 10px;

    /* Spacing aliases (4px grid) */
    --sp-4: 4px;
    --sp-8: 8px;
    --sp-12: 12px;
    --sp-16: 16px;
    --sp-20: 20px;
    --sp-24: 24px;
    --sp-32: 32px;
    --sp-40: 40px;
    --sp-48: 48px;
    --sp-64: 64px;
  }

  /* ── 2. Header, ink masthead, terminal wordmark ────────────────────────── */

  .header {
    background: var(--ink, #101214) !important;
    /* Remove the scanned-paper padding; replace with precise layout */
    padding: 0 12px !important;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    /* The body flex-column keeps this pinned without sticky */
    position: static !important;
    border-bottom: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* Remove the scan-line pseudo-element, wrong texture for an ink header */
  .header::after {
    display: none !important;
  }

  /* Wordmark: compact terminal masthead for a desk surface */
  .header .logo {
    font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    font-feature-settings: var(--tab-nums) !important;
    font-variant-numeric: tabular-nums lining-nums !important;
    color: var(--bg-primary, #e8ece7) !important;
    line-height: 1 !important;
    flex-shrink: 0;
  }

  /* Subhead: not shown on mobile (too small) */
  .logo-sub {
    display: none !important;
  }

  /* header-left wraps the wordmark, ensure it's compact */
  .header-left {
    gap: 0 !important;
    min-width: 0;
    flex-shrink: 0;
  }

  /* Status bar: right-side cluster, LIVE dot, critical count, gear */
  .header .status-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caps) !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    opacity: 1 !important;
    margin-left: auto;
    padding-right: 0;
  }

  /* Hide non-essential header items on mobile */
  .header .status-indicator {
    display: none !important;
  }

  /* Show only the indicators tagged for mobile */
  .header .status-indicator[data-mobile-show] {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  #streakIndicator,
  #headerThreat {
    display: none !important;
  }

  /* LIVE label: cream, muted */
  #wsLabel {
    color: rgba(232, 236, 231, 0.72) !important;
    font-size: var(--m-caps) !important;
    letter-spacing: 0.1em;
  }

  /* LIVE dot: forest green, 6px, clean pulse */
  .header .pulse {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--accent-green, #3d6b2e) !important;
    box-shadow: none !important;
    animation: m-live-pulse 2.4s ease-in-out infinite !important;
    flex-shrink: 0;
    /* Smooth state transitions when connection quality changes */
    transition:
      background 0.4s ease,
      box-shadow 0.4s ease !important;
  }
  .header .pulse.warning {
    background: var(--accent-amber, #b25233) !important;
  }
  .header .pulse.critical {
    background: var(--accent-red, #7a1020) !important;
    animation: m-live-pulse 0.8s ease-in-out infinite !important;
  }

  /* Critical count: oxblood */
  #criticalCount {
    color: var(--accent-red, #7a1020) !important;
    font-weight: 700 !important;
    font-size: var(--m-caps) !important;
  }

  /* Hide distracting inline labels before counts */
  .header .status-indicator[data-mobile-show] > span:first-child:not(#criticalCount):not(#wsLabel) {
    display: none;
  }

  /* User email / tier: hide */
  #user-email,
  #user-tier {
    display: none !important;
  }

  /* User info wrapper: compact */
  #user-info {
    display: flex !important;
    align-items: center;
    margin-left: 4px;
    flex-shrink: 0;
  }

  /* Gear/settings button: re-enable on mobile, cream toned down */
  .header .settings-gear-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: 1px solid rgba(232, 236, 231, 0.2) !important;
    color: rgba(232, 236, 231, 0.72) !important;
    font-size: 12px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    cursor: pointer;
    min-height: 36px;
    min-width: 36px;
    transition:
      color 0.15s,
      border-color 0.15s;
  }
  .header .settings-gear-btn:active {
    color: rgba(232, 236, 231, 0.95) !important;
    border-color: rgba(232, 236, 231, 0.4) !important;
  }

  /* Hide other user-info buttons (logout etc.) */
  #user-info > button:not(.settings-gear-btn) {
    display: none !important;
  }

  /* Settings dropdown: ensure it opens over ink header */
  .settings-dropdown {
    top: 100% !important;
    right: 0 !important;
    background: var(--bg-card, #f3f6f2) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 4px 16px rgba(16, 18, 20, 0.18) !important;
    border-radius: 0 !important; /* sharp, editorial */
    z-index: 10004 !important;
  }

  /* Hide desktop search */
  #desktopSearch {
    display: none !important;
  }

  /* Alert banner: keep visible, proper weight */
  .alert-banner {
    padding: var(--sp-12) var(--sp-20) !important;
    font-size: 11px !important;
    background: rgba(122, 16, 32, 0.08) !important;
    border-bottom: 1px solid rgba(122, 16, 32, 0.2) !important;
    color: var(--accent-red, #7a1020) !important;
    flex-shrink: 0;
  }

  /* Feed health bar: hide on mobile (header carries status) */
  .feed-health-bar {
    display: none !important;
  }

  /* Mobile search bar: elevated, clean */
  .mobile-search {
    display: block;
    padding: 6px 12px;
    background: rgba(232, 236, 231, 0.96);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mobile-search .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-dim, #5f696b);
    letter-spacing: 0.08em;
  }
  .mobile-search .search-input {
    width: 100%;
    padding: 7px 12px 7px 26px;
    background: rgba(243, 246, 242, 0.98);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 14px !important; /* keep 14px+ to prevent iOS zoom */
    color: var(--text-primary, #101214);
    min-height: 36px;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition:
      border-color 0.15s,
      box-shadow 0.15s;
  }
  .mobile-search .search-input:focus {
    border-color: var(--accent-red, #7a1020);
    box-shadow: 0 0 0 3px rgba(122, 16, 32, 0.08);
    outline: none;
  }

  /* Mobile status bar (the thin CONNECTING... strip): style as sub-header */
  .mobile-status-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) var(--sp-16);
    background: var(--bg-secondary, #d9e0db) !important;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim, #5f696b) !important;
    flex-shrink: 0;
    gap: var(--sp-8);
  }
  .mobile-status-bar .status-live {
    color: var(--accent-green, #3d6b2e) !important;
    font-weight: 700;
  }
  .mobile-status-bar .status-stale {
    color: var(--accent-amber, #b25233) !important;
  }
  .mobile-status-bar .wake-lock-btn {
    background: none !important;
    border: none !important;
    color: var(--text-dim, #5f696b) !important;
    font-size: 13px !important;
    padding: var(--sp-4) !important;
    cursor: pointer;
    opacity: 0.6;
  }
  .mobile-status-bar .wake-lock-btn:active {
    opacity: 1;
  }

  /* ── 3. Ticker strip, hairline-bordered market data rail ────────────────── */

  .ticker-strip {
    background: var(--bg-primary, #e8ece7) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 5px 0 !important;
    flex-shrink: 0;
    flex-grow: 0;
  }

  .ticker-item {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    gap: var(--sp-8) !important;
  }

  .ticker-name {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim, #5f696b) !important;
    font-size: var(--m-caption) !important;
  }

  .ticker-price {
    color: var(--text-primary, #101214) !important;
    font-variant-numeric: tabular-nums;
  }

  .ticker-change {
    font-size: var(--m-caption) !important;
    padding: 1px 4px !important;
    border-radius: 0 !important; /* sharp */
  }

  .ticker-change.up {
    color: var(--accent-green, #3d6b2e) !important;
    background: rgba(61, 107, 46, 0.1) !important;
  }

  .ticker-change.down {
    color: var(--accent-red, #7a1020) !important;
    background: rgba(122, 16, 32, 0.08) !important;
  }

  /* ── 4. Threat strip, mobile version ───────────────────────────────────── */

  #mobileThreatStrip {
    display: none !important;
    padding: var(--sp-8) var(--sp-16) !important;
    background: var(--bg-secondary, #d9e0db) !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0;
  }

  #mobileThreatLabel {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caps) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
  }

  /* Hide the verbose desktop threat strip */
  #threatStrip {
    display: none !important;
  }

  /* ── 5. Category tabs, editorial, tracked, small-caps ──────────────────── */

  .tab-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: var(--bg-primary, #e8ece7) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 8px !important;
    gap: 0 !important;
    flex-shrink: 0;
    /* Scroll-snap so partial tabs don't show */
    scroll-snap-type: x proximity;
    /* Gradient fade edges to signal scrollable overflow */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 12px,
      black calc(100% - 12px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 12px,
      black calc(100% - 12px),
      transparent 100%
    ) !important;
  }
  .tab-bar::-webkit-scrollbar {
    display: none !important;
  }

  .tab {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(16, 18, 20, 0.58) !important;
    padding: 10px 12px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 40px !important;
    transition:
      color 0.15s ease,
      border-color 0.15s ease !important;
    scroll-snap-align: start;
    /* Prevent iOS text-size adjustment */
    -webkit-text-size-adjust: none;
  }

  .tab:active {
    color: var(--text-secondary, #2b3133) !important;
  }

  .tab.active {
    color: var(--text-primary, #101214) !important;
    border-bottom: 2px solid var(--accent-red, #7a1020) !important;
  }

  /* Filter chips row, compact, horizontal, below tabs */
  .filter-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 6px 12px !important;
    gap: 6px !important;
    background: var(--bg-secondary, #d9e0db) !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0;
    scroll-snap-type: x mandatory !important;
    /* Gradient fade edges to signal scrollable overflow */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 16px,
      black calc(100% - 16px),
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 16px,
      black calc(100% - 16px),
      transparent 100%
    ) !important;
  }
  .filter-bar::-webkit-scrollbar {
    display: none !important;
  }

  .filter-chip {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    color: var(--text-dim, #5f696b) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-height: 36px !important;
    display: flex !important;
    scroll-snap-align: start !important;
    align-items: center !important;
    cursor: pointer;
    transition:
      background 0.15s,
      color 0.15s,
      border-color 0.15s;
  }

  .filter-chip.active,
  .filter-chip:active {
    background: var(--text-primary, #101214) !important;
    color: var(--bg-primary, #e8ece7) !important;
    border-color: var(--text-primary, #101214) !important;
  }

  /* ── 6. Feed cards, dense trader-readable headlines ─────────────────────── */

  /* Feed list container */
  .feed-list {
    padding-bottom: 0;
  }

  .my-desk-open-first {
    grid-template-columns: 1fr auto !important;
    gap: 7px 10px !important;
    padding: 10px 12px !important;
    border-left-width: 2px !important;
  }

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

  .my-desk-open-lead span {
    font-size: 7px !important;
  }

  .my-desk-open-lead strong {
    font-size: 11px !important;
    white-space: normal !important;
  }

  .my-desk-open-lead small {
    font-size: 8px !important;
    white-space: normal !important;
  }

  .my-desk-open-daily {
    display: block !important;
  }

  .my-desk-open-cells {
    grid-column: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .my-desk-open-cell {
    padding: 6px 7px !important;
  }

  .my-desk-open-cell:nth-child(n + 5) {
    display: none !important;
  }

  .my-desk-open-cell span {
    font-size: 6.5px !important;
  }

  .my-desk-open-cell b {
    font-size: 10px !important;
  }

  .my-desk-open-cell small {
    font-size: 7px !important;
  }

  .my-desk-open-actions {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 1fr !important;
    align-self: center;
  }

  .my-desk-open-actions button {
    min-width: 70px !important;
    padding: 6px 7px !important;
    font-size: 7.5px !important;
  }

  .my-desk-open-actions button:nth-child(n + 2) {
    display: none !important;
  }

  .trader-demo-flow {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    padding: 10px 12px !important;
    border-left-width: 2px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .trader-demo-flow-head strong {
    font-size: 11px !important;
    white-space: normal !important;
  }

  .trader-demo-flow-head small {
    font-size: 8px !important;
  }

  .trader-demo-flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .trader-demo-step {
    padding: 7px !important;
  }

  .trader-demo-step b {
    font-size: 8px !important;
  }

  .trader-demo-step small {
    font-size: 7px !important;
  }

  .trader-demo-dock {
    right: 8px !important;
    bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    max-width: none !important;
    gap: 6px !important;
    padding: 7px !important;
    border-radius: 4px !important;
  }

  .trader-demo-dock-lede {
    min-width: 0 !important;
    max-width: 34vw !important;
  }

  .trader-demo-dock-lede span {
    font-size: 7px !important;
  }

  .trader-demo-dock-lede strong {
    font-size: 8px !important;
  }

  .trader-demo-dock-actions {
    flex: 1 !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .trader-demo-dock-step {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 3px !important;
    font-size: 7px !important;
  }

  .trader-demo-dock-close {
    flex: 0 0 28px !important;
    width: 28px !important;
    font-size: 12px !important;
  }

  .portfolio-impact-brief {
    grid-template-columns: 1fr auto !important;
    gap: 0 !important;
    border-left-width: 2px !important;
  }

  .portfolio-impact-lead {
    grid-column: 1;
    padding: 8px 10px !important;
  }

  .portfolio-impact-lead span {
    font-size: 7px !important;
  }

  .portfolio-impact-lead strong {
    font-size: 11px !important;
    white-space: normal !important;
  }

  .portfolio-impact-lead small {
    font-size: 7px !important;
    white-space: normal !important;
  }

  .portfolio-impact-rows {
    grid-column: 1 / span 2 !important;
  }

  .portfolio-impact-row {
    grid-template-columns: 78px minmax(54px, 0.45fr) minmax(0, 1fr) 32px !important;
    min-height: 30px !important;
    padding: 5px 8px !important;
    gap: 5px !important;
  }

  .portfolio-impact-row:nth-child(n + 3) {
    display: none !important;
  }

  .portfolio-impact-row span,
  .portfolio-impact-row strong,
  .portfolio-impact-row small,
  .portfolio-impact-reason {
    font-size: 7px !important;
  }

  .portfolio-impact-row b {
    font-size: 9px !important;
  }

  .portfolio-impact-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .portfolio-impact-actions button {
    min-width: 68px !important;
    min-height: 30px !important;
    padding: 6px 7px !important;
    font-size: 7px !important;
  }

  .portfolio-impact-actions button:nth-child(n + 2) {
    display: none !important;
  }

  .freshness-gate-banner {
    grid-template-columns: 1fr auto !important;
    gap: 6px 10px !important;
    padding: 10px 12px !important;
  }

  .freshness-gate-kicker {
    grid-column: 1 / span 2;
  }

  .freshness-gate-banner small {
    grid-column: 1;
  }

  .freshness-gate-banner button {
    grid-column: 2;
    grid-row: 2;
    white-space: nowrap;
  }

  .proof-speed-banner {
    grid-template-columns: 1fr auto !important;
    gap: 7px 10px !important;
    padding: 10px 12px !important;
    border-left-width: 2px !important;
  }

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

  .proof-speed-lead span {
    font-size: 7px !important;
  }

  .proof-speed-lead strong {
    font-size: 10px !important;
  }

  .proof-speed-lead small {
    font-size: 8px !important;
    white-space: normal !important;
  }

  .proof-speed-cells {
    grid-column: 1 / span 2 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .proof-speed-cell {
    padding: 5px 6px !important;
  }

  .proof-speed-cell:nth-child(n + 3) {
    display: none !important;
  }

  .proof-speed-cell b {
    font-size: 9px !important;
  }

  .proof-speed-cell small {
    font-size: 6.5px !important;
  }

  .proof-speed-banner button {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 7px 8px !important;
    font-size: 8px !important;
    white-space: nowrap;
  }

  /* Each card: generous padding for scanning, left border + subtle elevation */
  .feed-item {
    padding: 16px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    border-left: 3px solid transparent !important;
    border-right: none !important;
    border-top: none !important;
    background: transparent !important;
    box-shadow: 0 1px 2px rgba(16, 18, 20, 0.05) !important;
    cursor: pointer;
    position: relative;
    /* Tap state: 100ms transition for the press effect */
    transition:
      background 0.1s ease,
      transform 0.1s ease;
    /* Staggered entrance: each item fades in slightly after the previous */
    animation: m-feed-enter 0.3s ease both !important;
  }

  /* ── Lead Story: the one thing that matters right now ───────────────────── */
  #leadStory {
    padding: var(--sp-20) !important;
    border-bottom: 2px solid var(--border) !important;
    background: var(--bg-primary, #e8ece7) !important;
  }
  .lead-kicker {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--signal-critical, #7a1020) !important;
    margin-bottom: var(--sp-8) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .lead-headline {
    font-family: var(--font-display, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: var(--m-display) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--text-primary, #101214) !important;
    margin-bottom: var(--sp-12) !important;
    letter-spacing: 0 !important;
  }
  .lead-context {
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif) !important;
    font-size: var(--m-body-sm) !important;
    line-height: 1.55 !important;
    color: var(--text-secondary, #2b3133) !important;
    margin-bottom: var(--sp-16) !important;
  }
  .lead-meta {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    color: var(--text-dim) !important;
    display: flex !important;
    gap: var(--sp-12) !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Tap pressed state: slight darkening + micro scale */
  .feed-item:active {
    background: rgba(16, 18, 20, 0.04) !important;
    transform: scale(0.995);
    transition:
      background 0.08s ease,
      transform 0.08s ease;
  }

  /* Critical: oxblood left border is the ONLY priority signal */
  .feed-item.alert-critical {
    border-left: 3px solid var(--accent-red, #7a1020) !important;
    background: rgba(122, 16, 32, 0.025) !important;
    box-shadow: 0 1px 3px rgba(122, 16, 32, 0.08) !important;
    animation: none !important; /* no pulsing; restraint */
  }
  .feed-item.alert-critical:active {
    background: rgba(122, 16, 32, 0.055) !important;
  }

  /* High priority: amber left border, clear but not alarming */
  .feed-item.alert-high {
    border-left: 3px solid var(--accent-amber, #b25233) !important;
    background: transparent !important;
    box-shadow: 0 1px 3px rgba(178, 82, 51, 0.06) !important;
  }

  /* Feed entrance animation + stagger for first 8 items */
  @keyframes m-feed-enter {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .feed-item:nth-child(1) {
    animation-delay: 0s !important;
  }
  .feed-item:nth-child(2) {
    animation-delay: 0.03s !important;
  }
  .feed-item:nth-child(3) {
    animation-delay: 0.06s !important;
  }
  .feed-item:nth-child(4) {
    animation-delay: 0.09s !important;
  }
  .feed-item:nth-child(5) {
    animation-delay: 0.12s !important;
  }
  .feed-item:nth-child(6) {
    animation-delay: 0.15s !important;
  }
  .feed-item:nth-child(7) {
    animation-delay: 0.18s !important;
  }
  .feed-item:nth-child(8) {
    animation-delay: 0.21s !important;
  }
  .feed-item:nth-child(n + 9) {
    animation-delay: 0.24s !important;
  }

  /* Meta row: source + timestamp, space-between */
  .feed-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    gap: var(--sp-8);
  }

  /* Source label: mono caps, tracked, readable at arm's length */
  .feed-source {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
  }

  /* OSINT / Telegram sources: oxblood to signal single-source risk */
  .feed-source.osint {
    color: var(--accent-red, #7a1020) !important;
  }
  .feed-source.journalist {
    color: var(--text-secondary, #2b3133) !important;
  }

  /* Timestamp: mono, tabular-nums, muted, right-aligned */
  .feed-time {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--text-dim, #5f696b) !important;
    flex-shrink: 0;
    letter-spacing: 0.04em;
    text-align: right;
  }

  /* Headline: sans, dense, sized for mobile scanning */
  .feed-title {
    font-family: var(--font-display, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.38 !important;
    color: var(--text-primary, #101214) !important;
    margin-bottom: 0 !important;
    letter-spacing: 0 !important;
  }

  /* Headline links: no underline, no arrow glyph */
  .feed-title a {
    color: var(--text-primary, #101214) !important;
    text-decoration: none !important;
  }
  .feed-title a:visited {
    color: var(--text-secondary, #2b3133) !important;
  }
  .feed-title a::after {
    display: none !important; /* remove the ↗ glyph */
  }
  .feed-title a:hover {
    color: var(--text-primary, #101214) !important;
    text-decoration: none !important;
  }

  /* Keyword/category tags at the bottom of a card */
  .feed-keywords {
    margin-top: 6px !important;
    gap: var(--sp-4) !important;
    display: flex !important;
    flex-wrap: wrap !important;
  }

  .keyword-tag {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 2px 6px !important;
    border-radius: 0 !important; /* editorial */
    color: var(--text-dim, #5f696b) !important;
    background: rgba(16, 18, 20, 0.06) !important;
    border: none !important;
  }

  /* Telegram / single-source risk indicator */
  .feed-item.telegram-unverified {
    border-left: 3px solid rgba(122, 16, 32, 0.4) !important;
  }
  .feed-item.telegram-unverified .feed-source::after {
    content: '· UNVERIFIED';
    color: var(--accent-red, #7a1020) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    opacity: 0.8;
  }

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

  .source-discipline-badge {
    min-height: 16px !important;
    padding: 2px 5px !important;
    border-radius: 0 !important;
    font-size: 7.5px !important;
    letter-spacing: 0.06em !important;
  }

  /* Expanded card detail zone */
  .feed-item .feed-expand-zone {
    display: grid !important;
    grid-template-rows: 0fr !important;
    overflow: hidden !important;
    transition: grid-template-rows 0.25s ease !important;
  }
  .feed-item .feed-expand-zone > * {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .feed-item.expanded .feed-expand-zone {
    grid-template-rows: 1fr !important;
  }
  /* Subtle scale lift on expanded card */
  .feed-item.expanded {
    transform: scale(1.005) !important;
    box-shadow: 0 2px 8px rgba(16, 18, 20, 0.08) !important;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease,
      background 0.1s ease !important;
  }

  .feed-item .feed-detail {
    padding: 10px 0 2px !important;
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif) !important;
    font-size: var(--m-body-sm) !important;
    line-height: 1.52 !important;
    color: var(--text-secondary, #2b3133) !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 10px !important;
  }

  /* Expanded action row */
  .feed-item .feed-detail-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: var(--sp-8) !important;
    padding-top: var(--sp-8) !important;
    border-top: 1px solid rgba(16, 18, 20, 0.06) !important;
  }

  .feed-item .feed-detail-actions a,
  .feed-item .feed-detail-actions button {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary, #2b3133) !important;
    background: rgba(16, 18, 20, 0.06) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 calc(50% - 6px) !important;
    transition:
      background 0.15s,
      color 0.15s;
  }

  .feed-item .feed-detail-actions a:active,
  .feed-item .feed-detail-actions button:active {
    background: rgba(16, 18, 20, 0.12) !important;
    color: var(--text-primary, #101214) !important;
  }
  .feed-item .feed-detail-subactions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
  .feed-item .feed-detail-subactions button {
    flex: 1 1 calc(33.333% - 6px) !important;
    min-height: 34px !important;
    border: 1px solid rgba(16, 18, 20, 0.1) !important;
    border-radius: 10px !important;
    background: rgba(16, 18, 20, 0.04) !important;
    color: var(--text-dim) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  .feed-item .feed-detail-subactions button:active {
    background: rgba(16, 18, 20, 0.1) !important;
    color: var(--text-primary) !important;
  }

  /* Breaking flash: use a clean cream-to-oxblood pulse */
  @keyframes m-breaking-pulse {
    0% {
      background: rgba(122, 16, 32, 0.04);
    }
    40% {
      background: rgba(122, 16, 32, 0.1);
    }
    100% {
      background: rgba(122, 16, 32, 0.04);
    }
  }
  .feed-item.breaking-flash {
    animation: m-breaking-pulse 0.8s ease !important;
  }

  /* Pin button: subtle, only visible on the active card */
  .pin-btn {
    opacity: 0 !important;
    position: absolute !important;
    top: var(--sp-12) !important;
    right: var(--sp-20) !important;
    background: none !important;
    border: 1px solid var(--border) !important;
    color: var(--text-dim, #5f696b) !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    min-height: 44px !important;
    min-width: 44px !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    transition: opacity 0.2s !important;
  }
  .feed-item:active .pin-btn,
  .feed-item.expanded .pin-btn {
    opacity: 0.7 !important;
  }

  /* Verification badges */
  .verification-badge {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 2px 6px !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
  }

  /* Trust pill: single composite trust indicator */
  .trust-pill {
    font-size: var(--m-caption) !important;
    padding: 2px 6px !important;
    border-radius: 0 !important;
    letter-spacing: 0.08em !important;
  }
  .feed-meta-detail {
    padding: 2px 0 0 !important;
    gap: 4px !important;
  }

  .speed-audit-badge {
    min-height: 16px !important;
    padding: 1px 5px !important;
    font-size: 7.5px !important;
    letter-spacing: 0.05em !important;
  }

  .feed-speed-audit-line {
    margin: 0 0 6px !important;
    padding: 6px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  .feed-speed-receipt-strip {
    margin-top: 5px !important;
    border-left-width: 3px !important;
  }

  .feed-speed-receipt-strip span {
    min-height: 22px !important;
    padding: 3px 5px !important;
    gap: 0.25rem !important;
  }

  .feed-speed-receipt-strip small {
    font-size: 7px !important;
    letter-spacing: 0.07em !important;
  }

  .feed-speed-receipt-strip b {
    font-size: 8px !important;
  }

  /* ── 7. Skeleton loading, pulsing editorial hairlines ───────────────────── */

  /*
     Skeleton replaces spinners. Each 'card' is simulated by:
     - A hairline title bar (taller) → headline
     - A narrower line → source/meta
     The shimmer sweeps left-to-right across cream paper.
  */

  .skeleton {
    background: var(--bg-secondary, #d9e0db) !important;
    animation: m-skel-fade 1.2s ease-in-out infinite alternate !important;
    border-radius: 0 !important;
  }

  /* Source-line skeleton: thin hairline */
  .skeleton.skeleton-line {
    height: 8px !important;
    margin: var(--sp-8) var(--sp-20) var(--sp-4) !important;
  }

  /* Headline-weight skeleton: taller bar */
  .skeleton.skeleton-block {
    height: 16px !important;
    margin: var(--sp-12) var(--sp-20) var(--sp-16) !important;
  }

  /* Stagger delays so bars pulse in sequence, not unison */
  .skeleton:nth-child(2) {
    animation-delay: 0.15s !important;
  }
  .skeleton:nth-child(3) {
    animation-delay: 0.3s !important;
  }
  .skeleton:nth-child(4) {
    animation-delay: 0.45s !important;
  }
  .skeleton:nth-child(5) {
    animation-delay: 0.6s !important;
  }

  /* Lightweight opacity pulse instead of GPU-heavy gradient sweep */
  @keyframes m-skel-fade {
    0% {
      opacity: 0.4;
    }
    100% {
      opacity: 0.85;
    }
  }

  /* Empty state: short desk sentence */
  .feed-list:empty::after {
    content: 'No items in this window.';
    display: block;
    padding: var(--sp-40) var(--sp-20);
    font-family: var(--font-sans, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--m-body);
    font-style: normal;
    color: var(--text-dim, #5f696b);
    text-align: center;
  }

  /* ── 8. Panel layout ─────────────────────────────────────────────────────── */

  /* Remove panel-level padding; cards handle their own padding */
  .panel {
    max-height: none !important;
    height: 0 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important; /* allow native iOS elastic bounce */
    touch-action: pan-y pan-x !important;
    position: relative !important;
    scroll-behavior: smooth !important;
    /* Ensure the panel itself is cream/paper */
    background: var(--bg-primary, #e8ece7) !important;
  }

  /* Panel entrance: quick fade-in on tab switch */
  .panel {
    animation: m-panel-enter 0.2s ease both !important;
  }
  @keyframes m-panel-enter {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .panel.mobile-hidden {
    display: none !important;
  }

  /* Polymarket ODDS panel: sticky header + inner scroll.
     The base .panel rule on mobile forces overflow-y:auto on the panel itself,
     which would scroll the INTEL MARKETS header, balance, and filter chips
     off-screen along with the market list. Make the panel a flex column with
     overflow:hidden so only the inner content scrolls. */
  #polymarketPanel:not(.mobile-hidden) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #polymarketPanel #polymarketMobileContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Keep ODDS available on mobile without overpowering the primary desk tab. */
  .mobile-nav-tab.mobile-nav-odds {
    position: relative;
    color: rgba(232, 236, 231, 0.6) !important;
  }
  .mobile-nav-tab.mobile-nav-odds::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 26px;
    height: 3px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    background: var(--accent-red, #7a1020);
    border: none;
    border-radius: 0 0 3px 3px;
    pointer-events: none;
    z-index: 0;
  }
  .mobile-nav-tab.mobile-nav-odds .nav-icon,
  .mobile-nav-tab.mobile-nav-odds > :not(.mobile-nav-odds-dot) {
    position: relative;
    z-index: 1;
  }
  .mobile-nav-tab.mobile-nav-odds.active::before {
    transform: translateX(-50%) scaleX(1);
  }
  .mobile-nav-tab.mobile-nav-odds .odds-nav-icon path,
  .mobile-nav-tab.mobile-nav-odds .odds-nav-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }
  .mobile-nav-tab.mobile-nav-odds .odds-nav-icon circle {
    fill: var(--bg-primary, #0d0d0d);
  }
  .mobile-nav-odds-dot {
    display: none !important;
  }
  @keyframes odds-pulse {
    0%,
    100% {
      opacity: 0.45;
    }
    50% {
      opacity: 1;
    }
  }

  /* Panel headers: tighter on mobile. Stack title + tab-bar vertically so a
     wide tab-bar (WIRE/ENERGY/LNG/HORMUZ/OFFICIAL…) scrolls inside the full
     panel width instead of being shoved off-screen to the right by the
     desktop flex-row layout. */
  .panel-header {
    padding: 8px 16px 0 !important;
    background: var(--bg-secondary, #d9e0db) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    flex-shrink: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px;
  }
  /* The wire-feed header carries the scrollable category tabs, give the
     tab-bar the full panel width and zero horizontal padding so the first
     tab sits flush with the panel edge. */
  #centerPanel .panel-header.tier-2 {
    padding: 8px 0 0 !important;
    gap: 0 !important;
  }
  #centerPanel .panel-header.tier-2 > .panel-title {
    display: none !important;
  }
  #centerPanel .panel-header.tier-2 > .tab-bar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .panel-title {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caps) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--text-primary, #101214) !important;
  }

  /* Market data rows, clear hierarchy, Bloomberg-grade readability */
  .market-row {
    min-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .market-row .name {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
  }
  .market-row .price {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 18px !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 700 !important;
  }
  .market-row .change {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 14px !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
  }
  .market-row .change.up {
    color: var(--accent-green, #3d6b2e) !important;
  }
  .market-row .change.down {
    color: var(--accent-red, #7a1020) !important;
  }

  /* Market section titles, sticky group headers */
  .market-section-title {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caps) !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: var(--bg-secondary, #d9e0db) !important;
  }

  /* Tier badges */
  .tier-badge {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 1px 5px !important;
    border-radius: 0 !important;
  }

  /* ── 9. Pull-to-refresh indicator ────────────────────────────────────────── */

  /*
     The JS adds .visible to show the pull indicator.
     Pill design: centered, inked background, steel text, CSS spinner.
  */
  .pull-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--ink, #101214);
    color: var(--bg-primary, #e8ece7);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: var(--m-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition:
      transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      opacity 0.2s ease;
    pointer-events: none;
  }

  /* Spinner: pure CSS rotating ring */
  .pull-indicator::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(232, 236, 231, 0.3);
    border-top-color: var(--bg-primary, #e8ece7);
    border-radius: 50%;
    animation: pull-spin 0.7s linear infinite;
    flex-shrink: 0;
  }

  .pull-indicator.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  @keyframes pull-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ── Toast notifications ─────────────────────────────────────────────────── */
  .toast-container {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10005 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--sp-8) !important;
    pointer-events: none !important;
    width: 90% !important;
    max-width: 360px !important;
  }
  .toast {
    background: var(--text-primary, #101214) !important;
    color: var(--bg-primary, #e8ece7) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    padding: var(--sp-12) var(--sp-16) !important;
    width: 100% !important;
    pointer-events: auto !important;
    opacity: 0 !important;
    transform: translateY(-12px) !important;
    animation: toast-in 0.25s ease forwards !important;
    border-left: 3px solid var(--signal-high, #b25233) !important;
  }
  .toast.toast-critical {
    border-left-color: var(--signal-critical, #7a1020) !important;
  }
  .toast.toast-out {
    animation: toast-out 0.2s ease forwards !important;
  }
  @keyframes toast-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes toast-out {
    to {
      opacity: 0;
      transform: translateY(-12px);
    }
  }

  /* ── Reconnection spinner on LIVE label ──────────────────────────────────── */
  #wsLabel.reconnecting::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border: 1.5px solid rgba(232, 236, 231, 0.3) !important;
    border-top-color: var(--signal-high, #b25233) !important;
    border-radius: 50% !important;
    animation: pull-spin 0.8s linear infinite !important;
    margin-right: 4px !important;
    vertical-align: middle !important;
  }

  /* ── 10. Bottom navigation ───────────────────────────────────────────────── */

  /* Container: frosted glass, 56px, fixed at bottom, full safe-area handling */
  .mobile-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(16, 18, 20, 0.92) !important;
    border-top: 1px solid rgba(232, 236, 231, 0.12) !important;
    z-index: 10002 !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
    box-shadow: 0 -1px 0 rgba(232, 236, 231, 0.06) !important;
    will-change: transform !important;
  }

  /* Inner: flex row, fills 56px, safe area padding at bottom */
  .mobile-nav-inner {
    display: flex !important;
    width: 100% !important;
    height: 56px !important;
    align-items: stretch !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* Each tab: 5-column even split (polymarket tab is hidden via sibling rule below) */
  .mobile-nav-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px var(--sp-4) var(--sp-8) !important;
    text-align: center !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: rgba(232, 236, 231, 0.6) !important;
    background: none !important;
    border: none !important;
    border-top: 2px solid transparent !important;
    cursor: pointer !important;
    min-height: 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    /* Tap highlight: disabled; we do our own */
    -webkit-tap-highlight-color: transparent !important;
    position: relative;
    transition: color 0.15s ease !important;
  }

  /* Pressed state */
  .mobile-nav-tab:active {
    color: rgba(232, 236, 231, 0.7) !important;
  }

  /* Active tab: oxblood pill indicator, full opacity text, bold label */
  .mobile-nav-tab.active {
    color: rgba(232, 236, 231, 0.95) !important;
    font-weight: 700 !important;
    border-top-color: transparent !important; /* override base; we use ::before */
  }

  /* Active tab icon: subtle scale up */
  .mobile-nav-tab.active .nav-icon {
    transform: scale(1.05) !important;
  }

  /* Pill indicator at top of active tab, transforms in from scaleX(0) → 1 */
  .mobile-nav-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px;
    height: 3px;
    background: var(--accent-red, #7a1020);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 0 3px 3px;
  }

  .mobile-nav-tab.active::before {
    transform: translateX(-50%) scaleX(1);
  }

  /* Remove the old ::after dot indicator */
  .mobile-nav-tab.active::after {
    display: none !important;
  }

  /* Nav icon: SVG inherits currentColor, no emoji */
  .mobile-nav-tab .nav-icon {
    font-size: 0 !important; /* hide any emoji fallback text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* SVG icons inside nav: inherit tab color */
  .mobile-nav-tab .nav-icon svg {
    display: block;
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Nav badge (alert count) */
  .mobile-signal-badge {
    position: absolute !important;
    top: 6px !important;
    right: calc(50% - 16px) !important;
    background: var(--accent-red, #7a1020) !important;
    color: var(--bg-primary, #e8ece7) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    min-width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
    text-align: center !important;
    padding: 0 3px !important;
    border-radius: 0 !important;
    letter-spacing: 0 !important;
    /* Pop animation when badge appears/updates */
    animation: m-badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  @keyframes m-badge-pop {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* BETS tab: same footing as the rest of the mobile nav */
  .mobile-nav-tab[data-panel='polymarket'] {
    display: flex !important;
    flex: 1 1 0 !important;
    color: rgba(232, 236, 231, 0.6) !important;
    background: none !important;
    border-top: 2px solid transparent !important;
    font-size: var(--m-caption) !important;
    position: relative !important;
  }

  .mobile-nav-tab[data-panel='polymarket'] .nav-icon {
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-nav-tab[data-panel='polymarket'].active {
    color: rgba(232, 236, 231, 0.95) !important;
    background: none !important;
    border-top-color: transparent !important;
  }

  .mobile-nav-tab[data-panel='polymarket'].active .nav-icon {
    background: none !important;
  }

  /* Prevent preview gate covering the nav */
  .preview-gate {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    /* On mobile the near-transparent gradient top (0.05 opacity) lets content
       bleed through. Override with a solid-enough backdrop so nothing shows
       through, while keeping the visual fade effect lower down. */
    background: linear-gradient(
      180deg,
      rgba(232, 236, 231, 0.82) 0%,
      rgba(232, 236, 231, 0.93) 35%,
      rgba(232, 236, 231, 0.98) 65%,
      var(--surface-page, #e8ece7) 100%
    ) !important;
    /* Blur anything that still peeks through */
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
  }
  .preview-gate.active {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ── 11. Map panel, full-bleed, floating controls, bottom sheet ─────────── */

  #mobileMapPanel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Override .panel { height:0 !important; padding-bottom: calc(...) !important; }
       which would otherwise collapse the map panel to ~64px. The map is a full-bleed
       absolutely-positioned overlay, it fills .main via top/bottom, not flex. */
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 5;
  }

  #mobileMapPanel.mobile-hidden {
    display: none !important;
  }

  /* Map fills its (now correctly-sized) parent. Kill the 400px desktop min-height
     so Leaflet uses the full available area on small phones in landscape. */
  #mobileMap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Leaflet: allow pinch zoom */
  #mobileMap.leaflet-container,
  .leaflet-container.intel-gesture-map {
    touch-action: none !important;
    overscroll-behavior: contain !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    background: var(--bg-secondary, #d9e0db) !important;
  }

  #mobileMap.leaflet-container .leaflet-pane,
  #mobileMap.leaflet-container .leaflet-control-container {
    touch-action: none !important;
  }

  #mobileMap.intel-gesture-map.is-gesture-ready,
  #mobileMap.intel-gesture-map .leaflet-map-pane,
  #mobileMap.intel-gesture-map .leaflet-tile-pane {
    touch-action: none !important;
    overscroll-behavior: contain !important;
  }

  .intel-map-mobile-controls {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 10px 10px 0 0 !important;
    pointer-events: auto !important;
  }

  .intel-map-mobile-controls button {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(16, 18, 20, 0.18) !important;
    background: rgba(243, 246, 242, 0.94) !important;
    color: var(--text-primary, #101214) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 10px rgba(16, 18, 20, 0.12) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .intel-map-mobile-controls button:active {
    background: var(--surface-hover, #cbd4ce) !important;
    color: var(--accent-red, #7a1020) !important;
  }

  .mobile-map-cluster-icon {
    background: transparent !important;
    border: 0 !important;
  }

  .mobile-map-cluster {
    width: 86px !important;
    height: 38px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    border: 1px solid rgba(16, 18, 20, 0.22) !important;
    border-left: 3px solid var(--text-dim, #5f696b) !important;
    border-radius: 4px !important;
    background: rgba(16, 18, 20, 0.94) !important;
    color: var(--surface-raised, #f3f6f2) !important;
    box-shadow: 0 6px 18px rgba(16, 18, 20, 0.24) !important;
    cursor: pointer !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    padding: 4px 6px 4px 5px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-map-cluster.severity-critical {
    border-left-color: var(--accent-red, #7a1020) !important;
  }

  .mobile-map-cluster.severity-high {
    border-left-color: var(--accent-amber, #b25233) !important;
  }

  .mobile-map-cluster.severity-standard {
    border-left-color: var(--text-dim, #5f696b) !important;
  }

  .mobile-map-cluster:active {
    transform: translateY(1px) !important;
    background: rgba(43, 49, 51, 0.96) !important;
  }

  .mobile-map-cluster-count {
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(243, 246, 242, 0.26) !important;
    border-radius: 3px !important;
    background: rgba(243, 246, 242, 0.08) !important;
    color: var(--surface-raised, #f3f6f2) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1 !important;
  }

  .mobile-map-cluster-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .mobile-map-cluster-status {
    color: var(--surface-raised, #f3f6f2) !important;
    font-size: 7px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
  }

  .mobile-map-cluster-region {
    overflow: hidden !important;
    color: rgba(243, 246, 242, 0.76) !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  /* Custom map markers: small circles matching severity */
  .m-marker-critical {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-red, #7a1020);
    border: 1.5px solid rgba(232, 236, 231, 0.8);
    box-shadow: 0 0 0 2px rgba(122, 16, 32, 0.25);
  }
  .m-marker-high {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-amber, #b25233);
    border: 1.5px solid rgba(232, 236, 231, 0.8);
  }
  .m-marker-standard {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-dim, #5f696b);
    border: 1.5px solid rgba(232, 236, 231, 0.8);
  }
  .m-marker-vessel {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-amber, #b25233);
    border: 1px solid rgba(232, 236, 231, 0.8);
  }
  .m-marker-aircraft {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-red, #7a1020);
    border: 1px solid rgba(232, 236, 231, 0.8);
  }

  /* Bottom sheet: drag handle, cream bg, hairline top border */
  .map-bottom-sheet {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-card, #f3f6f2) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important; /* editorial: no rounding on sheets */
    max-height: 50% !important;
    min-height: 80px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 -2px 16px rgba(16, 18, 20, 0.12) !important;
  }

  .map-bottom-sheet.expanded {
    max-height: 62% !important;
  }

  /* Drag handle: hairline cream on paper */
  .sheet-handle {
    width: 32px !important;
    height: 3px !important;
    background: rgba(16, 18, 20, 0.2) !important;
    border-radius: 0 !important;
    margin: var(--sp-8) auto var(--sp-4) !important;
    opacity: 1 !important;
  }

  .sheet-header {
    padding: var(--sp-4) var(--sp-16) var(--sp-8) !important;
  }

  .sheet-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 var(--sp-16) var(--sp-16) !important;
  }

  .sheet-event {
    padding: var(--sp-12) 0 !important;
    border-bottom: 1px solid var(--border) !important;
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif) !important;
    font-size: var(--m-body-sm) !important;
  }

  .mobile-map-cluster-readout {
    border: 1px solid var(--border, rgba(16, 18, 20, 0.15)) !important;
    border-left: 3px solid var(--text-dim, #5f696b) !important;
    border-radius: 4px !important;
    background: var(--surface-raised, #f3f6f2) !important;
    padding: 10px 11px !important;
    margin: 0 0 8px !important;
  }

  .mobile-map-cluster-readout.severity-critical {
    border-left-color: var(--accent-red, #7a1020) !important;
  }

  .mobile-map-cluster-readout.severity-high {
    border-left-color: var(--accent-amber, #b25233) !important;
  }

  .mobile-map-cluster-readout .cluster-readout-kicker,
  .mobile-map-cluster-readout .cluster-readout-label,
  .mobile-map-cluster-readout .cluster-readout-grid,
  .mobile-map-cluster-readout .cluster-readout-lead {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
  }

  .mobile-map-cluster-readout .cluster-readout-kicker {
    color: var(--text-dim, #5f696b) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    margin-bottom: 7px !important;
  }

  .mobile-map-cluster-readout .cluster-readout-head {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  .mobile-map-cluster-readout .cluster-readout-count {
    color: var(--text-primary, #101214) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 0.9 !important;
  }

  .mobile-map-cluster-readout .cluster-readout-label {
    color: var(--accent-red, #7a1020) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .mobile-map-cluster-readout .cluster-readout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .mobile-map-cluster-readout .cluster-readout-grid span {
    border: 1px solid rgba(16, 18, 20, 0.12) !important;
    border-radius: 3px !important;
    background: var(--surface-page, #e8ece7) !important;
    color: var(--text-dim, #5f696b) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    padding: 6px 4px !important;
    text-align: center !important;
    text-transform: uppercase !important;
  }

  .mobile-map-cluster-readout .cluster-readout-grid b {
    color: var(--text-primary, #101214) !important;
    font-size: 11px !important;
    font-variant-numeric: tabular-nums !important;
  }

  .mobile-map-cluster-readout .cluster-readout-lead {
    color: var(--text-primary, #101214) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  .map-sheet-event {
    cursor: pointer !important;
    padding-left: 10px !important;
    touch-action: manipulation !important;
  }

  .map-sheet-event:active {
    background: var(--surface-sunken, #d9e0db) !important;
  }

  .sheet-event .sheet-event-source {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
    margin-bottom: var(--sp-4) !important;
  }

  .sheet-event .sheet-event-title {
    color: var(--text-primary, #101214) !important;
    line-height: 1.4 !important;
    font-family: var(--font-display, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .sheet-event .sheet-event-time {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--text-dim, #5f696b) !important;
    margin-top: var(--sp-4) !important;
  }

  /* ── 12. Story carousel, compact editorial cards ─────────────────────────── */

  .story-carousel {
    padding: var(--sp-12) var(--sp-16) !important;
    gap: var(--sp-12) !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-secondary, #d9e0db) !important;
  }

  .story-card {
    flex: 0 0 240px !important;
    background: var(--bg-card, #f3f6f2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    padding: var(--sp-12) var(--sp-16) !important;
    box-shadow: none !important;
    scroll-snap-align: start;
  }

  .story-card .story-title {
    font-family: var(--font-display, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--text-primary, #101214) !important;
  }

  .story-card .story-meta {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
    margin-bottom: var(--sp-8) !important;
  }

  /* ── 13. Input hygiene, no iOS auto-zoom ────────────────────────────────── */

  /* iOS zooms on focus if font-size < 16px. Ensure 16px minimum on all inputs. */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  /* But keywords-add input is typically 10-11px monospace */
  .keywords-add input,
  .keywords-add select {
    font-size: 16px !important;
    min-height: 44px;
  }

  /* ── 14. Regime / sentiment blocks ──────────────────────────────────────── */

  .regime-header {
    padding: var(--sp-8) 0 !important;
  }
  .regime-eyebrow {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caps) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
    font-weight: 700 !important;
    margin-bottom: var(--sp-4) !important;
  }
  .regime-label {
    font-family: var(--font-display, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
  }
  .regime-score {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 20px !important;
    font-weight: 700 !important;
  }

  /* ── 15. Cluster groups (event grouping) ─────────────────────────────────── */

  .cluster-group {
    background: rgba(122, 16, 32, 0.03) !important;
    border: 1px solid rgba(122, 16, 32, 0.12) !important;
    border-radius: 0 !important;
    margin: var(--sp-4) var(--sp-16) !important;
  }

  .cluster-header {
    padding: var(--sp-12) var(--sp-16) !important;
    -webkit-tap-highlight-color: transparent;
  }

  .cluster-header .cluster-label {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: var(--text-primary, #101214) !important;
  }

  .cluster-header .cluster-count {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    color: var(--text-dim, #5f696b) !important;
    font-variant-numeric: tabular-nums;
  }

  /* ── 16. Trade signals, saved items ─────────────────────────────────────── */

  .saved-item {
    padding: var(--sp-12) var(--sp-20) !important;
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
  }
  .saved-item:active {
    background: rgba(16, 18, 20, 0.04) !important;
  }
  .saved-item .saved-title {
    font-family: var(--font-display, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary, #101214) !important;
    line-height: 1.35 !important;
  }
  .saved-item .saved-title a {
    color: var(--text-primary, #101214) !important;
    text-decoration: none !important;
  }
  .saved-item .saved-meta {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    color: var(--text-dim, #5f696b) !important;
    letter-spacing: 0.06em !important;
    margin-top: var(--sp-4) !important;
  }

  /* ── 17. Buttons ─────────────────────────────────────────────────────────── */

  .btn {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caps) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    min-height: 44px !important;
    padding: var(--sp-8) var(--sp-16) !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    color: var(--text-secondary, #2b3133) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition:
      background 0.15s,
      color 0.15s;
  }
  .btn:active {
    background: rgba(16, 18, 20, 0.08) !important;
    color: var(--text-primary, #101214) !important;
  }

  /* ── 18. Animations (keyframes) ─────────────────────────────────────────── */

  /* LIVE dot pulse: gentle opacity fade */
  @keyframes m-live-pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.35;
    }
  }

  /* Entry animation for new feed items */
  @keyframes m-item-in {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .feed-item.new-item {
    animation: m-item-in 0.25s ease-out both;
  }

  /* ── 19. prefers-reduced-motion ─────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    .header .pulse {
      animation: none !important;
    }

    .skeleton,
    .skeleton-line,
    .skeleton-block {
      animation: none !important;
      background: var(--bg-secondary, #d9e0db) !important;
    }

    .pull-indicator {
      transition: none !important;
    }

    .mobile-nav-tab::before {
      transition: none !important;
    }

    .feed-item {
      transition: none !important;
    }
  }

  /* ── 20. Swipe/transition speed-of-feature ──────────────────────────────── */

  /*
     Page transitions between tabs: instant. Speed is the feature.
     No fade, no slide, no transform animation between panels.
  */
  .panel {
    transition: none !important;
  }

  /* ── 21. Critical alert banner, unmissable sticky treatment ─────────────── */

  /* Full-width sticky banner at top, oxblood bg, white text */
  .alert-banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: var(--accent-red, #7a1020) !important;
    color: #fff !important;
    padding: var(--sp-8) var(--sp-16) !important;
    font-size: 11px !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    border-bottom: none !important;
    display: none !important;
    flex-wrap: wrap !important;
    gap: var(--sp-8) !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .alert-banner.active {
    display: flex !important;
    animation: m-banner-slide 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }
  @keyframes m-banner-slide {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .alert-banner a {
    color: #fff !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }

  /* Pulse dot on the critical indicator in header */
  .header .pulse.critical {
    animation: m-critical-pulse 0.6s ease-in-out infinite !important;
  }
  @keyframes m-critical-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.4);
    }
  }

  /* ── 22. Intel Alerts panel (#intelLiveFeed), mobile treatment ─────────── */

  #intelLiveFeed {
    margin: 0 0 8px 0 !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 3px solid var(--accent-red, #7a1020) !important;
  }

  /* Hide the intel live feed on every mobile tab except FEEDS. The feed
     is a feeds-scoped notification, it shouldn't eat vertical space on
     BETS, MAP, MARKET, OSINT, or MORE. applyMobileLayout() toggles
     body.mobile-suppress-intel-feed whenever the active tab is not feeds. */
  body.mobile-suppress-intel-feed #intelLiveFeed {
    display: none !important;
  }

  .intel-alert-item {
    padding: 7px 12px !important;
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
  }
  /* On mobile the headline is allowed to wrap, and the source summary
     drops to its own line below. The row-height sum still stays below
     the desktop card's ~84px old height. */
  .intel-alert-item > span:nth-child(3) {
    white-space: normal !important;
    flex: 1 1 100% !important;
    order: 3 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
  .intel-alert-item .intel-alert-sources {
    flex: 1 1 100% !important;
    order: 4 !important;
    max-width: none !important;
    line-height: 1.25 !important;
  }

  #intelLiveFeed .panel-resizer.horizontal {
    display: none !important;
  }

  /* Section label within intel feed */
  #intelLiveFeed .section-label {
    font-size: var(--m-caption) !important;
    padding: 6px 12px !important;
    background: rgba(122, 16, 32, 0.06) !important;
    border-bottom: 1px solid rgba(122, 16, 32, 0.15) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--accent-red, #7a1020) !important;
  }

  /* ── 23. Map panel improvements ─────────────────────────────────────────── */

  /* Vessel sheet header: sticky to top */
  #mapSheetVessels > *:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: var(--bg-card, #f3f6f2) !important;
  }

  /* Zoom controls: above bottom nav + safe area */
  .leaflet-control-zoom {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 24px) !important;
    right: 16px !important;
    top: auto !important;
    left: auto !important;
    position: fixed !important;
    z-index: 1000 !important;
  }

  /* Aircraft/vessel count pills */
  .vessel-count-badge,
  .aircraft-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
  }
  .vessel-count-badge {
    background: rgba(245, 158, 11, 0.15) !important;
    color: var(--accent-amber, #b25233) !important;
  }
  .aircraft-count-badge {
    background: rgba(122, 16, 32, 0.12) !important;
    color: var(--accent-red, #7a1020) !important;
  }

  /* ── 24. Content panel safe-area padding ─────────────────────────────────── */

  /* All scrollable panels need bottom padding to clear nav + safe area */
  .panel {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }

  /* Top safe area: ensure nothing clips under the notch */
  .main {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  /* ── 25. Skeleton improvements for market loading ────────────────────────── */

  /* Override the inline-block skeleton for market prices */
  .skeleton {
    background: linear-gradient(
      90deg,
      rgba(16, 18, 20, 0.06) 25%,
      rgba(16, 18, 20, 0.12) 50%,
      rgba(16, 18, 20, 0.06) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s infinite !important;
    border-radius: 3px !important;
  }

  @keyframes skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* ── 26. Section labels, consistent 9px caps across panels ─────────────── */

  .section-label,
  .panel-section-label {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
  }

  /* Keyword/alert tags: ensure minimum 24px touch target */
  .keyword-tag {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── 27. CatchMeUp modal, editorial sheet, dark scrim ───────────────────── */

  /* Dark enough scrim so background content is fully suppressed */
  #catchMeUpModal {
    background: rgba(16, 18, 20, 0.92) !important;
    padding: 0 !important;
    align-items: flex-start !important;
  }

  /* Inner card: bottom sheet on mobile, slides up from bottom */
  #catchMeUpModal > div {
    background: var(--bg-card, #f3f6f2) !important;
    border-radius: 16px 16px 0 0 !important;
    border-top: 3px solid var(--accent-red, #7a1020) !important;
    margin: auto 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 75vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    animation: m-sheet-up 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    min-height: 50vh;
    position: relative !important;
    box-shadow: 0 -4px 24px rgba(16, 18, 20, 0.25) !important;
  }
  @keyframes m-sheet-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  /* CatchMeUp close button: top-right, larger touch target */
  #catchMeUpModal > div > button:first-child {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    background: rgba(16, 18, 20, 0.06) !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--text-secondary, #2b3133) !important;
    cursor: pointer !important;
  }

  /* "Since you were last here" eyebrow */
  #catchMeUpModal > div > div:first-of-type {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
    padding-top: 4px !important;
    padding-right: 48px !important; /* clear close button */
  }

  /* "You were away for…" sub-line */
  #catchMeUpTime {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 12px !important;
    color: var(--text-secondary, #2b3133) !important;
    margin-bottom: 20px !important;
  }

  /* Stats 3-up grid: bold data display */
  #catchMeUpContent > div:first-child {
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  /* "Got it" CTA button */
  #catchMeUpModal button[onclick*='closeCatchMeUp'] {
    background: var(--ink, #101214) !important;
    color: var(--bg-primary, #e8ece7) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    min-height: 52px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    margin-top: 20px !important;
    cursor: pointer !important;
  }

  /* ── 28. Collapse region filter by default, unclutter the feed ─────────── */

  /*
     The region filter bar (ALL REGIONS · MIDDLE EAST · RUSSIA/EURASIA…) appears
     below the category tabs and above the source filter, creating three consecutive
     filter rows. On a phone that's too much chrome before reaching content.
     Collapse it; a JS toggle re-shows it when the user taps "Regions ▾".
  */
  #regionFilterBar {
    display: none !important;
  }
  #regionFilterBar.expanded {
    display: flex !important;
  }

  /* Compact region toggle button (injected by JS after this fix) */
  #regionFilterToggle {
    display: none !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    border-bottom: 1px solid var(--border) !important;
    width: 100% !important;
    text-align: left !important;
    min-height: 44px !important;
    background: var(--bg-secondary, #d9e0db) !important;
    flex-shrink: 0 !important;
  }
  #regionFilterToggle.active-filter {
    color: var(--accent-red, #7a1020) !important;
  }
  #regionFilterToggle .toggle-chevron {
    margin-left: auto !important;
    transition: transform 0.2s ease !important;
  }
  #regionFilterToggle.open .toggle-chevron {
    transform: rotate(180deg) !important;
  }

  /* ── 29. Override ALL inline 2-column grids ──────────────────────────────── */

  /*
     Several sections use inline style="display:grid;grid-template-columns:1fr 1fr"
     for desktop side-by-side layouts. Force single column on all of them.
  */
  #chokepointGrid,
  #desktopChokepointGrid,
  #hormuzSummary,
  #osintPresets,
  [id$='Grid'][style*='1fr 1fr'],
  [style*='grid-template-columns:1fr 1fr'],
  [style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }

  /* The "More Panel" 2×2 quick-access grid: single column */
  #morePanel [style*='grid-template-columns:1fr 1fr'],
  #morePanel [style*='grid-template-columns: 1fr 1fr'] {
    grid-template-columns: 1fr !important;
  }

  /* Catch-me-up stats: keep as 3-col (they're small numeric readouts) */
  #catchMeUpContent > div[style*='repeat(3'] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* ── 30. Story carousel, compact horizontal swipe strip ─────────────────
     The previous column layout stacked ten full-width cards into a 1,400px
     wall that pushed the main feed list two screens down. Keep the strip
     horizontal so it reads as a single "top breaking" row the user can
     swipe through, then falls away to reveal the feed underneath. */
  .story-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
    max-height: 170px !important;
    padding: var(--sp-12) var(--sp-16) !important;
    gap: var(--sp-12) !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: var(--sp-16) !important;
  }
  .story-carousel::-webkit-scrollbar {
    display: none !important;
  }

  .story-card {
    flex: 0 0 72vw !important;
    max-width: 260px !important;
    min-width: 220px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    border-left: 3px solid transparent !important;
    padding: var(--sp-12) var(--sp-16) !important;
  }
  .story-card.critical {
    border-left-color: var(--accent-red, #7a1020) !important;
  }
  .story-card.high {
    border-left-color: var(--accent-amber, #b25233) !important;
  }

  /* Clamp headlines to 3 lines so every card is the same height and the
     strip doesn't jitter as new items arrive. */
  .story-card .story-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* ── 31. Source filter disclosure, clean, editorial ────────────────────── */

  .source-filter-disclosure {
    display: none !important;
    background: var(--bg-secondary, #d9e0db) !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }

  .source-filter-summary {
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    list-style: none !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: var(--m-caption) !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, #5f696b) !important;
    min-height: 44px !important;
    gap: 6px !important;
  }
  .source-filter-summary::-webkit-details-marker {
    display: none !important;
  }

  .sfs-active {
    color: var(--text-dim, #5f696b) !important;
    font-weight: 400 !important;
    margin-left: auto !important;
  }
  .sfs-count {
    color: var(--text-dim, #5f696b) !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* ── 32. Intel live feed, tight on mobile ───────────────────────────────── */

  /* Let a single confirmed alert collapse naturally on mobile; cap only when
     several alerts are present so the top of the feed stays tight. */
  #intelAlertsList {
    height: auto !important;
    min-height: 0 !important;
    max-height: 118px !important;
    overflow-y: auto !important;
  }

  /* ── 33. OSINT leaderboard, single column ───────────────────────────────── */

  #osintLeaderboard,
  #chokepointMonitor {
    padding: 8px 16px !important;
  }

  /* ── 34. Fix inline-style Telegram card grids in OSINT presets ──────────── */

  /* osintPresets grid in more-panel sidebar */
  #toolsOsintPresets,
  #osintPresets {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── 35. Onboarding region grid, 2×2 on phone ─────────────────────────── */

  .onboarding-region-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── 36. Thesis strip and corridor readouts, less cramped ─────────────── */

  #decisionStack,
  #thesisSinceStrip,
  #traderCockpit {
    display: none !important;
    margin-bottom: 10px !important;
  }

  .thesis-strip-inner {
    flex-direction: column !important;
    min-height: 0 !important;
  }

  .thesis-strip-label,
  .thesis-strip-scorecard {
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 12px !important;
  }

  .thesis-strip-scorecard {
    border-left: 0 !important;
    border-top: 1px solid rgba(122, 16, 32, 0.18) !important;
    justify-content: center !important;
  }

  .thesis-strip-body {
    scroll-snap-type: x proximity !important;
  }

  .thesis-strip-item {
    flex: 0 0 auto !important;
    min-width: 180px !important;
    padding: 8px 12px !important;
    scroll-snap-align: start !important;
  }

  .thesis-strip-conf {
    font-size: 10px !important;
  }

  #corridorFactors {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
}
/* ── END @media (max-width: 768px) ─────────────────────────────────────────── */

/* Onboarding: single column on very small screens (separate, not nested) */
@media (max-width: 380px) {
  .onboarding-region-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Dashboard mobile overrides for the legacy chart-timeline overlay ──
   Hide only the retired .chart-tl shell; #chartTimelineBox is the current
   clickable event tape and must stay visible on narrow trader desks. */
@media (max-width: 768px) {
  .chart-tl {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  body.critical-mode #mobileSearchBar {
    display: none !important;
  }

  body.critical-mode #threatStrip {
    display: none !important;
  }

  body.critical-mode #mobileStatusBar {
    background: linear-gradient(90deg, rgba(122, 16, 32, 0.08), rgba(6, 182, 212, 0.05));
    border-bottom-color: rgba(122, 16, 32, 0.15);
  }

  body.critical-mode .mobile-nav-tab[data-panel='market'],
  body.critical-mode .mobile-nav-tab[data-panel='map'],
  body.critical-mode .mobile-nav-tab[data-panel='polymarket'] {
    display: none;
  }

  body.critical-mode .ticker-strip {
    min-height: 34px;
  }

  body.critical-mode #centerPanel .tabs {
    position: sticky;
    top: 0;
    z-index: 12;
    background: var(--bg-primary);
  }

  body.critical-mode #centerPanel {
    padding-bottom: 88px;
  }

  #mobileStatusBar,
  #installPromptBanner,
  .ticker-strip {
    display: none !important;
  }

  .install-banner {
    padding: 10px 14px;
    flex-direction: column;
    align-items: stretch;
  }

  .install-banner-actions {
    width: 100%;
  }

  .install-pill-btn {
    flex: 1;
    min-height: 40px;
  }
}

@media (max-width: 768px) {
  .mobile-nav-tab,
  .mobile-nav-tab *,
  .mobile-command-card,
  .mobile-command-card *,
  .mobile-command-kicker,
  .mobile-command-state,
  .mobile-command-meta,
  .mobile-command-chip,
  .mobile-map-cluster,
  .mobile-map-cluster *,
  .map-bottom-sheet,
  .map-bottom-sheet *,
  .sheet-event,
  .sheet-event *,
  .filter-chip,
  .trust-pill,
  .keyword-tag,
  .feed-source,
  .feed-time,
  .feed-meta-detail,
  .mobile-section-label,
  .section-label,
  .btn,
  button {
    letter-spacing: 0 !important;
  }

  .mobile-nav-tab {
    font-size: 10px !important;
  }

  .mobile-command-title {
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
  }

  .mobile-command-card {
    border-radius: 3px !important;
  }

  .feed-decision-strip {
    margin-top: 6px !important;
    border-left-width: 2px !important;
    border-radius: 2px !important;
  }

  .feed-decision-cell {
    padding: 4px 6px !important;
  }

  .feed-decision-cell span,
  .feed-decision-cell strong,
  .feed-decision-cell small,
  .evidence-trail {
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums lining-nums !important;
  }

  .evidence-trail {
    padding: 4px 7px !important;
    margin-top: 5px !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
  }

  /* Mobile Professional Finish Pass
     Keep the phone view command-first, but remove the over-carded look. */
  body {
    background: var(--surface-page) !important;
  }

  .header {
    box-shadow: none !important;
    border-bottom: 1px solid rgba(246, 247, 244, 0.1) !important;
  }

  .mobile-search {
    padding: 6px 10px !important;
    background: var(--surface-page) !important;
    border-bottom: 1px solid rgba(16, 18, 20, 0.12) !important;
  }

  .mobile-search .search-input {
    min-height: 38px !important;
    border-radius: 3px !important;
    border-color: rgba(16, 18, 20, 0.16) !important;
    background: var(--surface-raised) !important;
    box-shadow: none !important;
    font-size: 14px !important;
  }

  #mobileCommandDeck {
    padding: 8px 10px !important;
    background: var(--surface-page) !important;
    border-bottom-color: rgba(16, 18, 20, 0.12) !important;
  }

  .mobile-command-card {
    border-radius: 2px !important;
    border-color: rgba(16, 18, 20, 0.13) !important;
    background: var(--surface-raised) !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
  }

  .mobile-command-card.command-risk {
    background: var(--surface-raised) !important;
  }

  .mobile-command-card.command-risk.tone-kinetic,
  .mobile-command-card.command-risk.tone-conflict,
  .mobile-command-card.command-risk.tone-escalation {
    box-shadow: none !important;
    border-left-width: 2px !important;
  }

  .mobile-command-card.command-risk.tone-kinetic {
    border-left-color: var(--signal-high) !important;
  }

  .mobile-command-card.command-risk.tone-conflict {
    border-left-color: var(--signal-critical) !important;
  }

  .mobile-command-card.command-risk.tone-escalation {
    border-left-color: var(--signal-warn) !important;
  }

  .mobile-command-title {
    font-family: var(--font-sans, 'IBM Plex Sans', sans-serif) !important;
    font-size: 20px !important;
    font-weight: 820 !important;
    line-height: 1.04 !important;
  }

  .mobile-risk-pill,
  .mobile-command-chip,
  .mobile-command-actions button,
  .mobile-command-empty,
  .mobile-queue-item,
  .mobile-nav-tab {
    border-radius: 2px !important;
    box-shadow: none !important;
  }

  .mobile-risk-pill,
  .mobile-command-chip {
    min-height: 22px !important;
    background: rgba(16, 18, 20, 0.045) !important;
    border-color: rgba(16, 18, 20, 0.1) !important;
  }

  .mobile-command-chip-row {
    gap: 4px !important;
    margin-bottom: 5px !important;
  }

  .mobile-command-divider {
    margin: 5px 0 !important;
    background: rgba(16, 18, 20, 0.1) !important;
  }

  .mobile-command-actions {
    gap: 5px !important;
  }

  .mobile-command-actions button {
    min-height: 34px !important;
    background: rgba(16, 18, 20, 0.045) !important;
    border-color: rgba(16, 18, 20, 0.11) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .mobile-command-action-primary {
    background: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
  }

  .mobile-command-action-secondary {
    background: rgba(122, 16, 32, 0.055) !important;
    border-color: rgba(122, 16, 32, 0.14) !important;
  }

  /* Mobile Text Containment
     Priority headlines and action cells must never punch out of the phone
     viewport; clipped copy reads like a broken desk under pressure. */
  #mobileCommandDeck,
  .mobile-command-grid,
  .mobile-command-card,
  .mobile-command-card *,
  .mobile-queue-item,
  .mobile-queue-head,
  .mobile-command-actions,
  .mobile-command-actions button {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mobile-queue-title,
  .mobile-command-copy,
  .mobile-command-summary,
  .mobile-command-note-copy,
  .mobile-next-path,
  .mobile-contradiction-callout,
  .mobile-book-headline,
  .my-desk-open-cell span,
  .my-desk-open-cell b,
  .my-desk-open-cell small,
  .proof-speed-cell b,
  .proof-speed-cell small {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    hyphens: auto;
    white-space: normal !important;
  }

  .mobile-queue-item.is-priority .mobile-queue-title {
    -webkit-line-clamp: 3 !important;
    text-overflow: ellipsis !important;
  }

  #centerPanel .tabs {
    background: var(--surface-page) !important;
    border-bottom-color: rgba(16, 18, 20, 0.12) !important;
  }

  #centerPanel .tab {
    color: var(--text-dim) !important;
    font-weight: 760 !important;
  }

  #centerPanel .tab.active {
    color: var(--text-primary) !important;
  }

  .feed-item {
    background: transparent !important;
    border-bottom-color: rgba(16, 18, 20, 0.1) !important;
    box-shadow: none !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;
  }

  .mobile-nav {
    border-top-color: rgba(246, 247, 244, 0.1) !important;
    box-shadow: none !important;
  }

  /* Mobile Decision-First Structure Pass
     First screen: command decision, filter tabs, primary wire. Timeline and
     confirmed-intel detail are still available, but no longer compete above
     the feed. */
  #centerPanel.mobile-hidden {
    display: none !important;
  }

  #centerPanel:not(.mobile-hidden) {
    display: flex !important;
    flex-direction: column !important;
  }

  #mobileCommandDeck {
    order: 1;
  }

  #centerPanel .panel-header.tier-2 {
    order: 2;
  }

  #regionFilterBar,
  #sourceFilterDisclosure {
    display: none !important;
  }

  #mainFeed {
    order: 3;
  }

  #eventTimelineMount {
    order: 6;
    margin-top: 8px !important;
    border-top: 1px solid rgba(16, 18, 20, 0.12);
    background: var(--surface-page);
  }

  #storyCarousel {
    order: 7;
  }

  #intelLiveFeed.is-mobile-condensed {
    margin: 0 !important;
    max-height: 31px !important;
    border-top-width: 0 !important;
    border-bottom: 1px solid rgba(122, 16, 32, 0.14) !important;
    overflow: hidden !important;
  }

  #intelLiveFeed.is-mobile-condensed .section-label {
    min-height: 31px !important;
    padding: 4px 10px !important;
    border-bottom: 0 !important;
    background: rgba(122, 16, 32, 0.035) !important;
  }

  #intelLiveFeed.is-mobile-condensed #intelAlertsList {
    display: none !important;
  }

  #intelLiveFeed.is-mobile-condensed #intelAlertsToggle {
    min-height: 21px !important;
    padding: 2px 8px !important;
  }

  /* Mobile Trust Readout
     Every wire item carries the receipt logic in a compact, tappable
     block: trust, sources, freshness, and next check. */
  .trust-readout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.82fr) minmax(0, 0.72fr) minmax(0, 1.12fr) !important;
    margin-top: 6px !important;
    border-left-width: 2px !important;
  }

  .trust-readout-cell {
    padding: 5px 6px !important;
  }

  .trust-readout-cell:nth-child(4) {
    grid-column: auto !important;
  }

  .trust-readout-cell span {
    font-size: 7px !important;
  }

  .trust-readout-cell strong {
    font-size: 9px !important;
    line-height: 1.16 !important;
  }

  .trust-readout-cell small {
    display: none !important;
  }

  .trust-readout-cta {
    display: none !important;
  }
}

/* Mobile Human Operator Finish Pass
   Keep the phone view calm: one command, one operating loop, then wire. */
@media (max-width: 1023px) {
  .my-desk-open-first,
  .trader-demo-flow,
  .portfolio-impact-brief,
  .proof-speed-banner {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .my-desk-open-cells,
  .trader-demo-flow-steps,
  .portfolio-impact-rows,
  .proof-speed-cells {
    gap: 0 !important;
    border: 1px solid rgba(16, 18, 20, 0.1) !important;
  }

  .my-desk-open-cell,
  .portfolio-impact-row,
  .proof-speed-cell {
    border-width: 0 1px 1px 0 !important;
    border-color: rgba(16, 18, 20, 0.09) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .my-desk-open-cell:nth-child(even),
  .proof-speed-cell:nth-child(even) {
    border-right-width: 0 !important;
  }

  .my-desk-open-cell:nth-last-child(-n + 2),
  .proof-speed-cell:nth-last-child(-n + 2) {
    border-bottom-width: 0 !important;
  }
}

/* Mobile App Store Field Fix
   The native shell needs the high-frequency surfaces to behave like phone
   controls, not shrunken desktop panels: instant tab taps, readable ODDS,
   and denser feed rows. */
@media (max-width: 1023px) {
  html,
  body,
  .main,
  #mainGrid,
  #desktopViewDashboard,
  .panel {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  #centerPanel,
  #mainFeed,
  #intelLiveFeed,
  #mobileCommandDeck,
  #polymarketPanel,
  #polymarketPanel #polymarketMobileContent {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  #polymarketPanel > div,
  #polymarketPanel #mobileBettingTabBar,
  #polymarketPanel #mobilePolyFilterBar {
    max-width: 100vw !important;
    min-width: 0 !important;
  }

  #mainFeed *,
  #mobileCommandDeck *,
  #polymarketPanel * {
    box-sizing: border-box !important;
    min-width: 0;
  }

  #mainFeed .feed-item,
  #mainFeed .my-desk-open-first,
  #mainFeed .portfolio-impact-brief,
  #mainFeed .proof-speed-banner,
  #mainFeed .trust-readout,
  #mainFeed .desk-impact-strip,
  #mainFeed .feed-decision-strip,
  #mainFeed .claim-tape-strip,
  #mainFeed .evidence-trail {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  #mainFeed .my-desk-open-cells,
  #mainFeed .proof-speed-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    touch-action: manipulation !important;
    -webkit-user-select: none !important;
    user-select: none !important;
  }

  .mobile-nav-inner {
    height: 62px !important;
    min-height: 62px !important;
  }

  .mobile-nav-tab {
    min-height: 62px !important;
    padding: 9px 2px 11px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
  }

  .mobile-nav-tab .nav-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .mobile-nav-tab .nav-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  #polymarketPanel > div:first-child {
    border-bottom-color: rgba(16, 18, 20, 0.14) !important;
  }

  #polymarketPanel #mobileBettingTabBar .filter-chip {
    flex: 1 1 0 !important;
    min-height: 40px !important;
    padding: 8px 6px !important;
    font-size: 10px !important;
  }

  #polymarketPanel #mobilePolyFilterBar .filter-chip {
    min-height: 34px !important;
    padding: 7px 10px !important;
  }

  #polymarketPanel #polymarketMobileContent {
    padding: 8px 8px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #polymarketPanel .bets-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    padding-bottom: 12px !important;
  }

  #polymarketPanel .bet-card-market {
    min-height: 0 !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    padding: 10px 11px !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #polymarketPanel .bet-card-market > div:first-child {
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  #polymarketPanel .bet-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #polymarketPanel .bet-question {
    margin-bottom: 5px !important;
    font-size: 14px !important;
    font-weight: 780 !important;
    line-height: 1.24 !important;
    overflow-wrap: anywhere !important;
  }

  #polymarketPanel .bet-market-meta {
    gap: 4px 8px !important;
  }

  #polymarketPanel .bet-market-meta span {
    font-size: 9px !important;
  }

  #polymarketPanel .bet-odds-cell {
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    align-content: center !important;
    padding: 7px 7px !important;
    border: 1px solid rgba(16, 18, 20, 0.12) !important;
    background: rgba(16, 18, 20, 0.035) !important;
  }

  #polymarketPanel .bet-odds-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  #polymarketPanel .bet-odds-side {
    display: grid !important;
    align-content: center !important;
    min-height: 46px !important;
    padding: 4px 3px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.35) !important;
  }

  #polymarketPanel .bet-odds-side-yes {
    border-left: 2px solid var(--signal-positive, #3d6b2e) !important;
  }

  #polymarketPanel .bet-odds-side-no {
    border-left: 2px solid var(--accent-red, #7a1020) !important;
  }

  #polymarketPanel .bet-yes-pct,
  #polymarketPanel .bet-no-pct {
    font-size: 26px !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 0.92 !important;
  }

  #polymarketPanel .bet-yes-label,
  #polymarketPanel .bet-no-label {
    margin-top: 5px !important;
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }

  #polymarketPanel .bet-probability-track {
    height: 8px !important;
    margin-bottom: 6px !important;
    border-radius: 2px !important;
  }

  #polymarketPanel .bet-card-footer {
    margin-top: 8px !important;
    gap: 8px !important;
  }

  #polymarketPanel .bet-open-call-btn {
    flex: 1 1 auto !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    font-size: 12px !important;
    border-radius: 2px !important;
  }

  #polymarketPanel .bet-form-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    padding-right: 38px !important;
  }

  #polymarketPanel .bet-form-controls > div,
  #polymarketPanel .bet-form-controls > button {
    min-width: 0 !important;
  }

  #polymarketPanel .bet-form-controls button {
    min-height: 46px !important;
  }

  @media (max-width: 430px) {
    #polymarketPanel .bet-yes-pct,
    #polymarketPanel .bet-no-pct {
      font-size: 32px !important;
    }
  }

  #mainFeed .feed-item,
  #alertFeed .feed-item,
  #specialistFeed .feed-item {
    min-height: 0 !important;
    padding: 7px 10px !important;
    border-left-width: 2px !important;
    box-shadow: none !important;
  }

  #mainFeed .feed-meta,
  #alertFeed .feed-meta,
  #specialistFeed .feed-meta {
    margin-bottom: 2px !important;
  }

  #mainFeed .feed-title,
  #alertFeed .feed-title,
  #specialistFeed .feed-title {
    font-size: 13.5px !important;
    font-weight: 680 !important;
    line-height: 1.2 !important;
  }

  #mainFeed .feed-meta-detail,
  #alertFeed .feed-meta-detail,
  #specialistFeed .feed-meta-detail {
    gap: 2px !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
  }

  #mainFeed .feed-item:not(.expanded) .feed-keywords,
  #mainFeed .feed-item:not(.expanded) .desk-impact-strip,
  #mainFeed .feed-item:not(.expanded) .feed-decision-strip,
  #mainFeed .feed-item:not(.expanded) .evidence-trail,
  #alertFeed .feed-item:not(.expanded) .feed-keywords,
  #alertFeed .feed-item:not(.expanded) .desk-impact-strip,
  #alertFeed .feed-item:not(.expanded) .feed-decision-strip,
  #alertFeed .feed-item:not(.expanded) .evidence-trail,
  #specialistFeed .feed-item:not(.expanded) .feed-keywords,
  #specialistFeed .feed-item:not(.expanded) .desk-impact-strip,
  #specialistFeed .feed-item:not(.expanded) .feed-decision-strip,
  #specialistFeed .feed-item:not(.expanded) .evidence-trail {
    display: none !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout,
  #alertFeed .feed-item:not(.expanded) .trust-readout,
  #specialistFeed .feed-item:not(.expanded) .trust-readout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 0.7fr) !important;
    gap: 1px !important;
    margin-top: 3px !important;
    padding: 4px 5px !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout-cell:nth-child(n + 3),
  #alertFeed .feed-item:not(.expanded) .trust-readout-cell:nth-child(n + 3),
  #specialistFeed .feed-item:not(.expanded) .trust-readout-cell:nth-child(n + 3) {
    display: none !important;
  }

  #mainFeed .feed-keywords,
  #alertFeed .feed-keywords,
  #specialistFeed .feed-keywords {
    margin-top: 4px !important;
  }

  #mainFeed .keyword-tag,
  #alertFeed .keyword-tag,
  #specialistFeed .keyword-tag {
    padding: 1px 5px !important;
    font-size: 9px !important;
  }

  #mainFeed .trust-readout,
  #mainFeed .desk-impact-strip,
  #mainFeed .feed-decision-strip,
  #mainFeed .evidence-trail,
  #alertFeed .trust-readout,
  #alertFeed .desk-impact-strip,
  #alertFeed .feed-decision-strip,
  #alertFeed .evidence-trail,
  #specialistFeed .trust-readout,
  #specialistFeed .desk-impact-strip,
  #specialistFeed .feed-decision-strip,
  #specialistFeed .evidence-trail {
    margin-top: 5px !important;
  }

  .feed-item .feed-detail {
    margin-top: 8px !important;
    padding: 8px 0 1px !important;
  }
}

/* Mobile Feed Density Pass
   The native shell already accounts for the phone safe area in the status and
   masthead. Do not add a second top inset below search, and make OSINT packs
   read as proper alert controls instead of decorative cards. */
@media (max-width: 1023px) {
  .main {
    padding-top: 0 !important;
  }

  .mobile-search {
    padding-bottom: 4px !important;
  }

  #mobileCommandDeck {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  #osintPresets {
    gap: 4px !important;
  }

  #osintPresets .osint-preset-btn {
    min-height: 39px !important;
    padding: 8px 10px !important;
    border-radius: 2px !important;
    background: rgba(246, 247, 244, 0.82) !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  #osintPresets .osint-preset-btn.is-active {
    border-color: rgba(61, 107, 46, 0.34) !important;
    background: rgba(61, 107, 46, 0.075) !important;
    box-shadow: inset 2px 0 0 var(--accent-green, #3d6b2e) !important;
  }

  #osintPresets .osint-preset-btn.is-active span:last-child {
    color: var(--accent-green, #3d6b2e) !important;
  }
}

/* Mobile Feed Floor Pass
   Keep the native app first screen ruthless: no hidden chrome reserving height,
   no decorative gutters between search/deck/wire, and collapsed feed cards carry
   trust as a one-line audit badge instead of a second card inside the card. */
@media (max-width: 1023px) {
  #trialBanner,
  #feedHealthBar,
  #mobileStatusBar,
  #installPromptBanner,
  .ticker-strip,
  #threatStrip,
  #intelMapSection,
  #mobileThreatStrip,
  #leadStory,
  #topSignals,
  #readProgressBar,
  #liveMarketsStrip,
  #storyCarousel,
  #eventClusters {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  .mobile-search {
    padding: 4px 10px 3px !important;
  }

  .mobile-search .search-input {
    min-height: 34px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }

  #mobileCommandDeck {
    margin: 0 !important;
    padding: 4px 10px !important;
    border-top: 0 !important;
  }

  #mobileCommandDeck:empty {
    display: none !important;
  }

  .mobile-command-card {
    padding: 8px 10px !important;
  }

  .mobile-command-card.is-loading {
    min-height: 82px !important;
  }

  .mobile-command-head {
    margin-bottom: 4px !important;
  }

  .mobile-command-title {
    margin-bottom: 2px !important;
  }

  .mobile-command-chip-row {
    margin-bottom: 3px !important;
  }

  .mobile-command-divider {
    margin: 4px 0 !important;
  }

  .mobile-command-explain {
    margin-top: 4px !important;
  }

  #centerPanel .panel-header.tier-2 {
    min-height: 40px !important;
  }

  #centerPanel .tab-bar {
    min-height: 40px !important;
    height: 40px !important;
  }

  #mainFeed {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #mainFeed .feed-item,
  #alertFeed .feed-item,
  #specialistFeed .feed-item {
    padding: 6px 9px !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout,
  #alertFeed .feed-item:not(.expanded) .trust-readout,
  #specialistFeed .feed-item:not(.expanded) .trust-readout {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
    gap: 3px 6px !important;
    margin-top: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout-cell,
  #alertFeed .feed-item:not(.expanded) .trust-readout-cell,
  #specialistFeed .feed-item:not(.expanded) .trust-readout-cell {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    align-items: baseline !important;
    gap: 3px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout-cell:nth-child(n + 3),
  #alertFeed .feed-item:not(.expanded) .trust-readout-cell:nth-child(n + 3),
  #specialistFeed .feed-item:not(.expanded) .trust-readout-cell:nth-child(n + 3) {
    display: inline-flex !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout-cell span,
  #alertFeed .feed-item:not(.expanded) .trust-readout-cell span,
  #specialistFeed .feed-item:not(.expanded) .trust-readout-cell span {
    display: inline !important;
    font-size: 6.5px !important;
    line-height: 1 !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout-cell strong,
  #alertFeed .feed-item:not(.expanded) .trust-readout-cell strong,
  #specialistFeed .feed-item:not(.expanded) .trust-readout-cell strong {
    display: inline !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }

  #toolsOsintPresets,
  #osintPresets {
    gap: 4px !important;
  }

  #toolsOsintPresets .osint-preset-btn,
  #osintPresets .osint-preset-btn {
    min-height: 38px !important;
    padding: 7px 9px !important;
  }

  #toolsOsintPresets .osint-preset-btn.is-recent,
  #osintPresets .osint-preset-btn.is-recent {
    border-color: rgba(61, 107, 46, 0.48) !important;
    background: rgba(61, 107, 46, 0.1) !important;
  }

  .osint-preset-receipt {
    margin-top: 5px !important;
    padding: 5px 7px !important;
    border-left: 2px solid var(--accent-green, #3d6b2e) !important;
    background: rgba(61, 107, 46, 0.065) !important;
    color: var(--text-secondary, #2b3133) !important;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace) !important;
    font-size: 7.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
  }

  .osint-preset-live {
    margin-top: 2px !important;
    font-size: 6.8px !important;
    line-height: 1.18 !important;
  }

  .osint-preset-focus-banner {
    margin: 0 0 5px !important;
    padding: 6px 8px !important;
    gap: 6px !important;
  }

  .osint-preset-focus-banner strong {
    font-size: 10.5px !important;
  }

  .osint-preset-focus-banner small {
    font-size: 7px !important;
  }

  .osint-preset-focus-banner button {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 7px !important;
  }
}

/* Mobile Feed Tightening Pass
   The app store build exposed two very visible phone problems: dead air between
   search and Desk Now, and wire rows that looked like sparse cards instead of a
   scan tape. This final cascade keeps the first screen compressed and puts
   secondary controls behind an expanded row. */
@media (max-width: 1023px) {
  .mobile-search {
    padding: 3px 10px 2px !important;
    min-height: 0 !important;
  }

  .mobile-search .search-icon {
    left: 8px !important;
    font-size: 9px !important;
  }

  .mobile-search .search-input {
    height: 32px !important;
    min-height: 32px !important;
    padding: 4px 9px 4px 24px !important;
    border-radius: 2px !important;
    line-height: 1.25 !important;
  }

  #intelLiveFeed:not(.is-mobile-condensed) {
    margin-bottom: 0 !important;
  }

  #mobileCommandDeck {
    padding: 3px 10px 4px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #mobileCommandDeck:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .mobile-command-grid {
    gap: 4px !important;
  }

  .mobile-command-card {
    overflow: hidden !important;
    padding: 7px 9px !important;
  }

  .mobile-command-card.is-loading {
    min-height: 42px !important;
    padding: 6px 9px !important;
  }

  .mobile-command-eyebrow {
    margin-bottom: 2px !important;
    font-size: 8px !important;
  }

  .mobile-command-head {
    grid-template-columns: minmax(0, 1fr) minmax(68px, auto) !important;
    gap: 6px !important;
    align-items: center !important;
    margin-bottom: 3px !important;
  }

  .mobile-command-kicker {
    margin-bottom: 1px !important;
    font-size: 8px !important;
  }

  .mobile-command-title {
    font-size: 17px !important;
    line-height: 1 !important;
    margin-bottom: 1px !important;
  }

  .mobile-command-summary,
  .mobile-command-copy {
    font-size: 9px !important;
    line-height: 1.22 !important;
  }

  .mobile-risk-stack {
    gap: 2px !important;
  }

  .mobile-risk-pill {
    min-height: 22px !important;
    padding: 0 7px !important;
    font-size: 8px !important;
  }

  .mobile-risk-meta {
    font-size: 7.5px !important;
  }

  .mobile-command-chip-row {
    gap: 3px !important;
    margin: 0 0 4px !important;
  }

  .mobile-command-chip {
    min-height: 22px !important;
    padding: 0 6px !important;
    font-size: 8px !important;
  }

  .mobile-command-divider,
  .mobile-command-label,
  .mobile-command-empty,
  .mobile-command-actions.secondary,
  .mobile-command-explain {
    display: none !important;
  }

  .mobile-command-actions {
    gap: 4px !important;
  }

  .mobile-command-actions button {
    min-height: 28px !important;
    padding: 5px 6px !important;
    font-size: 8px !important;
  }

  .my-desk-open-first {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 7px !important;
    padding: 6px 8px !important;
    min-height: 0 !important;
  }

  .my-desk-open-lead strong {
    font-size: 13px !important;
    line-height: 1.05 !important;
  }

  .my-desk-open-lead small {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .my-desk-open-receipt-mini {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 2px 5px !important;
    margin-top: 2px !important;
    padding-top: 2px !important;
  }

  .my-desk-open-receipt-mini b {
    font-size: 6.5px !important;
  }

  .my-desk-open-receipt-mini small {
    font-size: 7px !important;
    line-height: 1 !important;
  }

  .my-desk-open-receipt-mini small:nth-of-type(2) {
    display: none !important;
  }

  .my-desk-open-daily,
  .my-desk-open-cells {
    display: none !important;
  }

  .my-desk-open-actions {
    align-self: center !important;
  }

  .my-desk-open-actions button {
    min-height: 30px !important;
    min-width: 68px !important;
    padding: 5px 7px !important;
    font-size: 7.5px !important;
  }

  #centerPanel .panel-header.tier-2 {
    min-height: 34px !important;
    padding-top: 0 !important;
  }

  #centerPanel .tab-bar {
    min-height: 34px !important;
    height: 34px !important;
  }

  #centerPanel .tab {
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 9.5px !important;
  }

  .feed-list {
    padding: 0 0 1px !important;
  }

  #mainFeed .feed-item,
  #alertFeed .feed-item,
  #specialistFeed .feed-item {
    margin: 0 !important;
    padding: 5px 8px 6px !important;
    border-radius: 0 !important;
    border-left-width: 2px !important;
    box-shadow: none !important;
  }

  #mainFeed .feed-meta,
  #alertFeed .feed-meta,
  #specialistFeed .feed-meta {
    margin-bottom: 1px !important;
  }

  #mainFeed .feed-meta-detail,
  #alertFeed .feed-meta-detail,
  #specialistFeed .feed-meta-detail {
    margin-bottom: 1px !important;
  }

  #mainFeed .feed-title,
  #alertFeed .feed-title,
  #specialistFeed .feed-title {
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  #mainFeed .feed-item:not(.expanded) .feed-speed-receipt-strip,
  #alertFeed .feed-item:not(.expanded) .feed-speed-receipt-strip,
  #specialistFeed .feed-item:not(.expanded) .feed-speed-receipt-strip {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #mainFeed .feed-item:not(.expanded) .feed-expand-zone,
  #alertFeed .feed-item:not(.expanded) .feed-expand-zone,
  #specialistFeed .feed-item:not(.expanded) .feed-expand-zone {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #mainFeed .feed-item.expanded .feed-expand-zone,
  #alertFeed .feed-item.expanded .feed-expand-zone,
  #specialistFeed .feed-item.expanded .feed-expand-zone {
    display: grid !important;
    height: auto !important;
    max-height: none !important;
  }

  #mainFeed .feed-item:not(.expanded) .trust-readout,
  #alertFeed .feed-item:not(.expanded) .trust-readout,
  #specialistFeed .feed-item:not(.expanded) .trust-readout {
    gap: 2px 5px !important;
    margin-top: 2px !important;
  }

  .feed-item:not(.expanded) .feed-share-inline,
  .feed-item:not(.expanded) .feed-report-inline,
  .feed-item:not(.expanded) .pin-btn:not(.pinned) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .feed-item.expanded .feed-share-inline,
  .feed-item.expanded .pin-btn,
  .pin-btn.pinned {
    opacity: 0.82 !important;
    pointer-events: auto !important;
  }

  .pin-btn {
    top: 5px !important;
    right: 5px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 1px 4px !important;
  }

  .feed-share-inline {
    top: 5px !important;
    right: 38px !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
  }

  .feed-item .feed-detail {
    margin-top: 6px !important;
    padding: 6px 0 0 !important;
  }

  .feed-item .feed-detail-actions,
  .feed-item .feed-detail-subactions {
    gap: 5px !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
  }

  .feed-list:empty::after {
    padding: 18px 14px !important;
    font-size: 12px !important;
  }
}

/* Mobile Native WebView Compression Guard
   Native iOS WebView has historically been less forgiving than desktop Chrome
   with zero-fr grids and hidden panels. This final guard removes reserved height
   from collapsed detail zones and hidden top-of-feed chrome before users see it. */
@media (max-width: 1023px) {
  #intelLiveFeed[style*='display: none'],
  #trialBanner[style*='display: none'],
  #leadStory[style*='display: none'],
  #storyCarousel[style*='display: none'],
  #eventClusters[style*='display: none'] {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #centerPanel,
  #mainFeed,
  #alertFeed,
  #specialistFeed,
  #mobileCommandDeck {
    margin-top: 0 !important;
  }

  #mainFeed .feed-item:not(.expanded) .feed-detail,
  #alertFeed .feed-item:not(.expanded) .feed-detail,
  #specialistFeed .feed-item:not(.expanded) .feed-detail {
    display: none !important;
  }

  #mainFeed .feed-item.expanded .feed-detail,
  #alertFeed .feed-item.expanded .feed-detail,
  #specialistFeed .feed-item.expanded .feed-detail {
    display: block !important;
  }
}

/* Mobile Feed Gap Runtime Guard
   The native shell can preserve desktop row height from hidden decision chrome
   during fast app resumes. This is a hard floor: only the active mobile panel
   should occupy space, and collapsed wire cards should not carry hidden proof
   modules as empty height. */
@media (max-width: 1023px) {
  #desktopViewDashboard.mobile-feed-gap-collapsed {
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  #decisionStack.mobile-feed-gap-collapsed,
  #thesisSinceStrip.mobile-feed-gap-collapsed,
  #traderCockpit.mobile-feed-gap-collapsed,
  #mobileCommandDeck.is-gap-collapsed {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #centerPanel.mobile-feed-gap-collapsed:not(.mobile-hidden) {
    order: 1 !important;
    flex: 1 1 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #mainFeed .feed-item:not(.expanded) .feed-keywords,
  #alertFeed .feed-item:not(.expanded) .feed-keywords,
  #specialistFeed .feed-item:not(.expanded) .feed-keywords,
  #mainFeed .feed-item:not(.expanded) .claim-tape-strip,
  #alertFeed .feed-item:not(.expanded) .claim-tape-strip,
  #specialistFeed .feed-item:not(.expanded) .claim-tape-strip,
  #mainFeed .feed-item:not(.expanded) .feed-decision-strip,
  #alertFeed .feed-item:not(.expanded) .feed-decision-strip,
  #specialistFeed .feed-item:not(.expanded) .feed-decision-strip,
  #mainFeed .feed-item:not(.expanded) .desk-impact-strip,
  #alertFeed .feed-item:not(.expanded) .desk-impact-strip,
  #specialistFeed .feed-item:not(.expanded) .desk-impact-strip,
  #mainFeed .feed-item:not(.expanded) .evidence-trail,
  #alertFeed .feed-item:not(.expanded) .evidence-trail,
  #specialistFeed .feed-item:not(.expanded) .evidence-trail {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  #toolsOsintPresets .osint-preset-btn span:last-child,
  #osintPresets .osint-preset-btn span:last-child {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
    text-align: right !important;
    white-space: normal !important;
    line-height: 1.05 !important;
    max-width: 58px !important;
  }
}

/* Mobile and tablet tab layout fix.
   The shell switches to bottom tabs up to 1023px, so the full tablet range
   needs the same screen-filling panel rules as narrow phones. */
@media (max-width: 1023px) {
  #decisionStack,
  #thesisSinceStrip,
  #traderCockpit,
  #threatStrip,
  #intelMapSection,
  #mobileThreatStrip,
  #leadStory,
  #topSignals,
  #readProgressBar,
  #liveMarketsStrip,
  #eventClusters,
  #storyCarousel,
  #eventTimelineMount,
  #regionFilterBar,
  #sourceFilterDisclosure {
    display: none !important;
  }

  .main {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  #desktopViewDashboard {
    display: contents !important;
  }

  #leftPanel,
  #centerPanel,
  #rightPanel,
  #osintPanel,
  #morePanel,
  #polymarketPanel {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #leftPanel.mobile-hidden,
  #centerPanel.mobile-hidden,
  #rightPanel.mobile-hidden,
  #osintPanel.mobile-hidden,
  #morePanel.mobile-hidden,
  #polymarketPanel.mobile-hidden,
  #mobileMapPanel.mobile-hidden {
    display: none !important;
  }

  #leftPanel:not(.mobile-hidden),
  #rightPanel:not(.mobile-hidden),
  #osintPanel:not(.mobile-hidden),
  #morePanel:not(.mobile-hidden) {
    display: block !important;
  }

  #centerPanel:not(.mobile-hidden),
  #polymarketPanel:not(.mobile-hidden) {
    display: flex !important;
    flex-direction: column !important;
  }

  #centerPanel:not(.mobile-hidden) {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  #mainFeed,
  #alertFeed,
  #specialistFeed,
  #osintFeedItems {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #mainFeed.resizable-scroll-region,
  #alertFeed.resizable-scroll-region,
  #specialistFeed.resizable-scroll-region,
  #osintFeedItems.resizable-scroll-region {
    max-height: none !important;
  }

  #polymarketPanel:not(.mobile-hidden) {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  #polymarketPanel #polymarketMobileContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #mobileMapPanel:not(.mobile-hidden) {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #intelLiveFeed {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
  }

  body.mobile-suppress-intel-feed #intelLiveFeed {
    display: none !important;
  }

  #intelLiveFeed .section-label {
    min-height: 32px !important;
    padding: 5px 10px !important;
    border-bottom: 0 !important;
    background: rgba(122, 16, 32, 0.035) !important;
  }

  #intelAlertsList,
  #intelLiveFeed .panel-resizer.horizontal {
    display: none !important;
  }

  #intelAlertsToggle {
    min-height: 22px !important;
    padding: 2px 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   END INTEL DESK MOBILE DESIGN SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */