/*
  ╔══════════════════════════════════════════════════════════════════╗
  ║  STRATWATCH — SHARED RESPONSIVE SYSTEM  v1.0                    ║
  ║  Breakpoints: desktop 1200+  |  tablet 768–1199  |  mobile <768 ║
  ╚══════════════════════════════════════════════════════════════════╝
*/

/* ═══════════════════════════════════════════════════
   RESPONSIVE TOKENS
═══════════════════════════════════════════════════ */
:root {
  --bp-desktop: 1200px;
  --bp-tablet:   768px;
  --bottom-nav-h: 60px;
  --mobile-header-h: 44px;
  --drawer-width: 300px;
  --drawer-right-width: 340px;
}

/* ═══════════════════════════════════════════════════
   BODY PADDING (leaves room for bottom nav on mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Don't add padding to body since Theatre uses overflow:hidden;
     we handle it per-page via JS */
  .sw-mobile-padding {
    padding-bottom: var(--bottom-nav-h);
  }
}

/* ═══════════════════════════════════════════════════
   TABLET TWEAKS  768–1199px
═══════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  /* Narrow left panel */
  #lp { width: 180px; min-width: 180px; }

  /* Narrow right panel */
  #rp { width: 300px; min-width: 300px; }

  /* Shrink topbar elements */
  #tb .logo-t { font-size: 10px; letter-spacing: 2px; }
  #tb .nav-tab { font-size: 9px; padding: 3px 7px; }
  #tb .tsep:nth-child(n+5) { display: none; }
  #tb .tbtn { width: 26px; height: 26px; font-size: 10px; }
  #clock-date { display: none; }
}

/* ═══════════════════════════════════════════════════
   MOBILE  <768px  — SHARED LAYOUT FOUNDATIONS
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── TOPBAR: collapse to thin mobile header ── */
  #tb {
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    padding: 0 10px !important;
    gap: 6px !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1001;
  }

  /* Hide nav tabs, time filters, right-side toolbar buttons in topbar */
  #tb .nav-tabs,
  #tb .tfltr,
  #tb .tsep,
  #tb #clock,
  #tb #clock-date,
  #tb .plat-dd,
  #tb .theme-toggle,
  #tb .region-sel,
  #tb #lum-btn,
  #tb .tbtn[onclick*="togglePanel"],
  #tb .tbtn[onclick*="toggleFullscreen"],
  #tb .tbtn[onclick*="shareURL"],
  #tb .tbtn[onclick*="activateOPS"],
  #tb button[onclick*="togglePizzaIndex"],
  #tb button[onclick*="toggleFullscreen"],
  #tb #ops-btn {
    display: none !important;
  }

  /* Show mobile hamburger button */
  #tb .sw-mob-menu-btn { display: flex !important; }

  /* Logo compact */
  #tb .logo-badge { display: none !important; }
  #tb .logo > div > div:last-child { display: none !important; }
  #tb .osint-badge { display: none !important; }
  #tb .logo-t { font-size: 11px !important; letter-spacing: 3px !important; }

  /* Right side of topbar: keep DEFCON + donate + live pill */
  #tb .tbr {
    margin-left: auto;
    gap: 6px !important;
  }
  #tb .donate-btn {
    font-size: 8px !important;
    padding: 4px 8px !important;
    letter-spacing: 0.5px !important;
  }
  #tb .live-pill span { display: none; }

  /* ── MAIN: stack vertically on non-Theatre pages ── */
  #main, #layout {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* ── SIDEPANELS: hide — they become drawers ── */
  #lp { display: none !important; }
  /* #rp on space/theatre pages is controlled via their intel container — never hide it there */
  body:not([data-page="space"]):not([data-page="theatre"]) #rp { display: none !important; }

  /* ── Ensure body doesn't hide scrollbar ── */
  body { overflow: hidden; }

  /* ── Main content area expands ── */
  #main > div:not(#lp):not(#rp),
  #col-grid,
  #narrative-grid,
  #signal-grid,
  #markets-centre {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION
═══════════════════════════════════════════════════ */
.sw-bottom-nav {
  display: none; /* hidden on desktop/tablet */
}

@media (max-width: 767px) {
  .sw-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-h);
    background: var(--panel);
    border-top: 1px solid var(--border);
    z-index: 2000;
    align-items: stretch;
  }

  .sw-bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-lo);
    transition: color 0.15s, background 0.15s;
    border: none;
    background: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-height: 44px;
  }

  .sw-bn-item:hover,
  .sw-bn-item.active {
    color: var(--acc);
    background: var(--acc-dim);
  }

  .sw-bn-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: var(--acc);
    border-radius: 0 0 2px 2px;
  }

  .sw-bn-ico {
    font-size: 18px;
    line-height: 1;
  }

  .sw-bn-lbl {
    font-family: var(--fd, 'Orbitron', sans-serif);
    font-size: 8px;
    letter-spacing: 0.8px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Menu sub-drawer triggered by Menu tab */
  .sw-bottom-nav .sw-bn-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 14px);
    width: 7px;
    height: 7px;
    background: var(--crit);
    border-radius: 50%;
    animation: pg 2s infinite;
  }

  /* FILTERS tab: accent icon + label when panel is open */
  #bn-filters { color: var(--text-lo); }
  #bn-filters.panel-open {
    color: var(--acc);
    background: var(--acc-dim);
  }
  #bn-filters.panel-open .sw-bn-ico { color: var(--acc); }

  /* DOMAINS tab: always show domain icon in accent when on domain page */
  #bn-domains.active .sw-bn-ico { color: var(--acc); }
}

/* ── Time display in topbars ─────────────────────────────────── */
.sw-time-display {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 10px;
  color: var(--acc, #00d2ff);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
@media (max-width: 767px) {
  .sw-time-display { font-size: 8px; letter-spacing: 0; }
}

/* ═══════════════════════════════════════════════════
   DRAWER SYSTEM
═══════════════════════════════════════════════════ */
.sw-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1500;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.sw-drawer-overlay.open { display: block; }

.sw-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--drawer-width);
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 1600;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.sw-drawer.right {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  width: var(--drawer-right-width);
}

.sw-drawer.open {
  transform: translateX(0);
}

.sw-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: rgba(0,0,0,0.15);
}

[data-theme="light"] .sw-drawer-head {
  background: rgba(0,60,120,0.04);
}

.sw-drawer-title {
  font-family: var(--fd, 'Orbitron', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--acc);
}

.sw-drawer-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text-lo);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.15s, border-color 0.15s;
}

.sw-drawer-close:hover {
  color: var(--text-hi);
  border-color: var(--border-hi);
}

.sw-drawer-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* On mobile, drawers show full-height from top */
@media (max-width: 767px) {
  .sw-drawer {
    top: 0;
    bottom: var(--bottom-nav-h);
    max-width: 88vw;
  }
}

/* On tablet, drawers overlay on top of existing layout */
@media (min-width: 768px) and (max-width: 1199px) {
  .sw-drawer { top: 44px; max-width: 320px; }
  .sw-drawer.right { max-width: 360px; }
}

/* ═══════════════════════════════════════════════════
   BOTTOM SHEET SYSTEM
═══════════════════════════════════════════════════ */
.sw-bottom-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 2500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sw-bottom-sheet-overlay.open { display: block; }

.sw-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 85vh;
  background: var(--panel);
  border-top: 1px solid var(--border-hi);
  border-radius: 16px 16px 0 0;
  z-index: 2600;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.sw-bottom-sheet.open {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .sw-bottom-sheet {
    bottom: var(--bottom-nav-h);
    max-height: calc(90vh - var(--bottom-nav-h));
  }
}

.sw-bs-handle {
  width: 40px;
  height: 4px;
  background: var(--border-hi);
  border-radius: 2px;
  margin: 10px auto 4px;
  flex-shrink: 0;
}

.sw-bs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sw-bs-title {
  font-family: var(--fd, 'Orbitron', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-hi);
}

.sw-bs-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text-lo);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.15s;
}

.sw-bs-close:hover { color: var(--text-hi); }

.sw-bs-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ═══════════════════════════════════════════════════
   FULLSCREEN MODAL (event / briefing report)
═══════════════════════════════════════════════════ */
.sw-report-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sw-report-modal.open { display: flex; }

.sw-report-card {
  background: var(--panel);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px var(--shadow);
}

@media (max-width: 767px) {
  .sw-report-modal { padding: 0; align-items: flex-end; }
  .sw-report-card {
    max-width: 100%;
    max-height: calc(95vh - var(--bottom-nav-h));
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    margin-bottom: var(--bottom-nav-h);
  }
}

.sw-report-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 10px;
}

.sw-report-title {
  font-family: var(--fd, 'Orbitron', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-hi);
  line-height: 1.4;
}

.sw-report-close {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: none;
  color: var(--text-lo);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.15s;
}

.sw-report-close:hover { color: var(--text-hi); }

.sw-report-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sw-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.sw-report-tag {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--text-lo);
  background: var(--acc-dim);
}

.sw-report-tag.crit { border-color: rgba(255,51,85,0.4); color: var(--crit); background: rgba(255,51,85,0.08); }
.sw-report-tag.high { border-color: rgba(255,107,53,0.4); color: var(--high); background: rgba(255,107,53,0.08); }
.sw-report-tag.warn { border-color: rgba(230,160,0,0.4); color: var(--warn); background: rgba(230,160,0,0.08); }
.sw-report-tag.grn  { border-color: rgba(0,232,122,0.4); color: var(--grn);  background: rgba(0,232,122,0.08); }
.sw-report-tag.acc  { border-color: var(--border-hi); color: var(--acc); background: var(--acc-dim); }

.sw-report-text {
  font-family: var(--fb, 'Rajdhani', sans-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
}

.sw-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.sw-report-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sw-action-btn {
  font-family: var(--fd, 'Orbitron', sans-serif);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 7px 14px;
  border-radius: 5px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--acc-dim);
  color: var(--acc);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.sw-action-btn:hover { border-color: var(--border-hi); filter: brightness(1.15); }
.sw-action-btn.primary { background: var(--acc); color: #000; border-color: var(--acc); }

/* ═══════════════════════════════════════════════════
   SHARED INTELLIGENCE CARD SYSTEM
═══════════════════════════════════════════════════ */
.sw-intel-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  overflow: hidden;
}

.sw-intel-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--acc);
  opacity: 0;
  transition: opacity 0.15s;
}

.sw-intel-card:hover { border-color: var(--border-hi); }
.sw-intel-card:hover::before { opacity: 1; }
.sw-intel-card.crit::before { background: var(--crit); opacity: 1; }
.sw-intel-card.high::before { background: var(--high); opacity: 1; }
.sw-intel-card.warn::before { background: var(--warn); opacity: 1; }

.sw-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sw-card-title {
  font-family: var(--fb, 'Rajdhani', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.35;
  flex: 1;
}

.sw-card-sev {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}

.sw-card-sev.crit { background: rgba(255,51,85,0.2); border: 1px solid rgba(255,51,85,0.4); color: var(--crit); }
.sw-card-sev.high { background: rgba(255,107,53,0.2); border: 1px solid rgba(255,107,53,0.4); color: var(--high); }
.sw-card-sev.warn { background: rgba(230,160,0,0.2);  border: 1px solid rgba(230,160,0,0.4);  color: var(--warn); }
.sw-card-sev.low  { background: rgba(0,232,122,0.1);  border: 1px solid rgba(0,232,122,0.25); color: var(--grn); }
.sw-card-sev.info { background: var(--acc-dim); border: 1px solid var(--border); color: var(--acc); }

.sw-card-summary {
  font-family: var(--fb, 'Rajdhani', sans-serif);
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sw-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}

.sw-card-source {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 9px;
  color: var(--text-lo);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sw-card-source a {
  color: var(--acc);
  text-decoration: none;
}
.sw-card-source a:hover { text-decoration: underline; }

.sw-card-time {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 9px;
  color: var(--text-lo);
  letter-spacing: 0.5px;
}

.sw-card-domains {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.sw-card-domain {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 8px;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid var(--border);
  color: var(--text-lo);
}

/* Larger tap target on mobile */
@media (max-width: 767px) {
  .sw-intel-card {
    padding: 14px 16px;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
  }

  .sw-card-title { font-size: 15px; }
  .sw-card-summary { font-size: 13px; -webkit-line-clamp: 3; }
}

/* ═══════════════════════════════════════════════════
   MOBILE FEED TEXT SIZES — all intel/signal panels
   Matches briefings page readability standard.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Signal feed items (Theatre SIGINT, shared) */
  .sig-title      { font-size: 13px !important; line-height: 1.4 !important; }
  .sig-meta       { font-size: 10px !important; }
  .sig-why        { font-size: 11px !important; line-height: 1.55 !important; }
  .sig-type       { font-size: 9px  !important; }
  .sig-item       { padding: 12px 14px !important; }

  /* Right panel section headers */
  .spt            { font-size: 11px !important; letter-spacing: 1.5px !important; }
  .sph            { padding: 8px 12px !important; min-height: 34px !important; }

  /* Intel tabs (SIGNALS / CRISIS INDEX / ACTORS) */
  .itab           { font-size: 9px !important; padding: 6px 10px !important; }

  /* Crisis index rows */
  #crisis-index-body > div { font-size: 11px !important; }

  /* Actor tracker rows */
  #actor-tracker-body > div { font-size: 11px !important; }

  /* News tabs (BLOOMBERG / DW / etc) */
  .ntab           { font-size: 9px !important; padding: 5px 8px !important; }

  /* Space feed items */
  .news-item, .space-feed-item {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Cyber/Markets/IW intel cards */
  .sw-intel-card  { padding: 12px 14px !important; }

  /* rp-section header text */
  .rp-hdr span, .rp-hdr { font-size: 10px !important; }

  /* Ticker text */
  .tick-inner     { font-size: 10px !important; }

  /* Status strip */
  .sw-ss-item     { font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════
   FLOATING ACTION CONTROLS (Theatre map mobile)
═══════════════════════════════════════════════════ */
.sw-map-fab-group {
  display: none;
  position: absolute;
  right: 12px;
  bottom: 80px;
  flex-direction: column;
  gap: 8px;
  z-index: 900;
}

@media (max-width: 767px) {
  .sw-map-fab-group { display: flex !important; }
}

.sw-map-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border-hi);
  color: var(--acc);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px var(--shadow);
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.sw-map-fab:active { transform: scale(0.93); }
.sw-map-fab.active { background: var(--acc-dim); border-color: var(--acc); }

/* Theatre mobile layout — definitive rules are in stratwatch-theatre.html.
   This shared file only asserts the NON-theatre fallback for #map-area/#map.
   Theatre page overrides all of these with higher-specificity body[data-page] rules.
   IMPORTANT: Do NOT set position:relative on #map here — theatre page requires
   position:absolute (inset:0) for Leaflet to get a non-zero bounding rect. */
@media (max-width: 767px) {
  /* Generic map-area (non-theatre pages) */
  #map-area {
    position: relative;
    flex: 1 !important;
    min-height: 0;
  }

  /* Generic #map — NOT !important so theatre page can override with absolute */
  #map {
    position: relative;
    width: 100%;
    min-height: 200px;
    flex: 1;
  }

  /* Theatre-specific: row layout (keeps map-area as the flex-fill column) */
  body[data-page="theatre"] {
    height: 100dvh;
    height: -webkit-fill-available;
  }

  body[data-page="theatre"] #main {
    flex: 1;
    overflow: hidden !important;
    flex-direction: column !important;
    min-height: 0;
  }

  body[data-page="theatre"] #main > #lp,
  body[data-page="theatre"] #main > #rp {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   THEATRE STATUS STRIP (mobile)
═══════════════════════════════════════════════════ */
.sw-status-strip-mobile {
  display: none;
}

@media (max-width: 767px) {
  .sw-status-strip-mobile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    font-family: var(--fm);
    font-size: 9px;
    color: var(--text-lo);
    letter-spacing: 1px;
    min-height: 26px;
    z-index: 100;
  }

  .sw-status-strip-mobile::-webkit-scrollbar { display: none; }

  .sw-status-strip-mobile .sw-ss-item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .sw-status-strip-mobile .sw-ss-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--grn);
    animation: pg 2s infinite;
    flex-shrink: 0;
  }
  .sw-status-strip-mobile .sw-ss-dot.warn { background: var(--warn); }
  .sw-status-strip-mobile .sw-ss-dot.crit { background: var(--crit); }

  /* Topbar-stripe / DEFCON strip: compact on mobile */
  #topbar-stripe {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    min-height: 22px;
    padding: 0 8px;
    font-size: 9px;
    gap: 10px;
  }
  #topbar-stripe::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════
   MENU DRAWER (mobile ≥ hamburger)
═══════════════════════════════════════════════════ */
.sw-menu-drawer {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: none;
}

.sw-menu-drawer.open { display: block; }

.sw-menu-drawer-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sw-menu-drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: var(--panel2);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sw-menu-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sw-menu-drawer-title {
  font-family: var(--fd);
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--acc);
  font-weight: 700;
}

.sw-menu-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.sw-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: var(--text);
  text-decoration: none;
  font-family: var(--fd);
  font-size: 11px;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s, color 0.12s;
  cursor: pointer;
}

.sw-menu-item:hover { background: var(--acc-dim); color: var(--text-hi); }
.sw-menu-item.active { background: var(--acc-dim); color: var(--acc); }
.sw-menu-item .sw-mi-ico { font-size: 14px; width: 18px; text-align: center; color: var(--acc); }
.sw-menu-item .sw-mi-badge {
  margin-left: auto;
  font-family: var(--fm);
  font-size: 7px;
  letter-spacing: 1px;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(230,160,0,0.2);
  border: 1px solid rgba(230,160,0,0.4);
  color: var(--warn);
}

.sw-menu-section-title {
  padding: 8px 18px 4px;
  font-family: var(--fm);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text-lo);
  text-transform: uppercase;
}

.sw-menu-drawer-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   MOBILE TOPBAR HAM BUTTON
═══════════════════════════════════════════════════ */
.sw-mob-menu-btn {
  display: none; /* shown via media query above */
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--acc-dim);
  color: var(--acc);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.15s;
  margin-left: auto;
}

/* On mobile, show the hamburger */
@media (max-width: 767px) {
  .sw-mob-menu-btn { display: flex !important; }
}

/* ═══════════════════════════════════════════════════
   MOBILE FILTER BAR (compact pill row)
═══════════════════════════════════════════════════ */
.sw-mobile-filter-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
  background: var(--bg2);
  z-index: 50;
}

.sw-mobile-filter-bar::-webkit-scrollbar { display: none; }

@media (max-width: 767px) {
  .sw-mobile-filter-bar { display: flex; }
}

.sw-filter-pill {
  font-family: var(--fm);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-lo);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.sw-filter-pill.on {
  background: var(--acc-dim);
  border-color: var(--acc);
  color: var(--acc);
}

.sw-filter-pill.crit {
  border-color: rgba(255,51,85,0.4);
  color: var(--crit);
  background: rgba(255,51,85,0.1);
}

/* ═══════════════════════════════════════════════════
   MOBILE FEED LIST (generic stacked card scroll)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Non-map pages: scrollable main area */
  .sw-feed-scroll {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: calc(var(--bottom-nav-h) + 16px);
  }

  /* Grid layouts collapse to single column */
  #col-grid {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 10px !important;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: calc(var(--bottom-nav-h) + 12px) !important;
  }

  #narrative-grid {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 10px !important;
    padding-bottom: calc(var(--bottom-nav-h) + 12px) !important;
  }

  #signal-grid {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 8px !important;
    padding-bottom: calc(var(--bottom-nav-h) + 12px) !important;
  }

  /* Markets: centre area */
  #markets-centre,
  .markets-grid,
  .mod-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   STRATEGIC OVERVIEW / INDEX PAGE (mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Full-width stacked sections */
  .risk-sections,
  .overview-grid,
  .risk-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Risk indicator panels */
  .risk-card,
  .risk-panel,
  .overview-card {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════
   MARKETS PAGE (mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Individual market modules */
  .mod-header { cursor: pointer; user-select: none; }

  .ind-grid,
  .fx-grid,
  .commodity-grid,
  .rates-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stress indicator tiles: 2 col */
  .stress-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Make module panels scrollable */
  #markets-feed {
    padding-bottom: calc(var(--bottom-nav-h) + 12px);
  }
}

/* ═══════════════════════════════════════════════════
   CYBER PAGE (mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Cyber grid to single column */
  #col-grid[data-page="cyber"] {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   IW PAGE (mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* IW: main layout — hide left sidebar, go full width on narrative grid */
  body[data-page="iw"] #lp { display: none !important; }
  body[data-page="iw"] #rp { display: none !important; }
  body[data-page="iw"] #narrative-grid {
    padding: 10px !important;
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   BRIEFINGS PAGE (mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Briefings control bar compact */
  #brf-ctrl {
    padding: 6px 10px !important;
    gap: 6px !important;
  }

  /* Signal grid single column */
  #signal-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   SPACE PAGE (mobile)
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body[data-page="space"] #col-grid,
  body[data-page="space"] .space-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════
   LEAFLET / MAP MOBILE OVERRIDES
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hide default Leaflet zoom controls (use FABs) */
  .leaflet-control-zoom { display: none !important; }

  /* Attribution compact */
  .leaflet-control-attribution { font-size: 8px !important; max-width: 180px !important; }

  /* Make popups work on small screens */
  .leaflet-popup-content { width: min(90vw, 280px) !important; }
  .leaflet-popup-content-wrapper { max-width: 90vw !important; }

  /* Legend: hide or compact */
  #map-legend { display: none !important; }
  #coords { display: none !important; }

  /* LUM overlay: hide on mobile */
  #lum-overlay { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   TOUCH IMPROVEMENTS
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Prevent text selection on interactive elements */
  .sw-intel-card,
  .sw-bn-item,
  .sw-map-fab,
  .sw-filter-pill,
  .sw-menu-item {
    user-select: none;
    -webkit-user-select: none;
  }

  /* Ensure links in cards are tappable */
  .sw-card-source a,
  .sw-report-body a {
    padding: 2px 0;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE TYPOGRAPHY IMPROVEMENTS (Task 5)
   Slightly larger base text and line-height for readability.
   Desktop typography is NOT affected.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Base body text: nudge up ~1px, more breathing room */
  body {
    font-size: 15px;
    line-height: 1.45;
  }

  /* Card titles: slightly larger for scan-reading */
  .sw-card-title { font-size: 15px !important; line-height: 1.4; }
  .sw-card-summary { font-size: 14px !important; line-height: 1.5; }

  /* Source / timestamp labels: keep compact but readable */
  .sw-card-source,
  .sw-card-time   { font-size: 9.5px !important; }

  /* Bottom sheet body text */
  .sw-bs-body { font-size: 14px; line-height: 1.5; }
  .sw-report-text { font-size: 14px !important; line-height: 1.65 !important; }

  /* Drawer body */
  .sw-drawer-body { font-size: 14px; line-height: 1.45; }

  /* Intel cards on mobile */
  .sw-intel-card { padding: 14px 16px !important; }

  /* Map popups: ensure readable text */
  .leaflet-popup-content { font-size: 13px !important; line-height: 1.5 !important; }

  /* Generic panel text in drawers / right panels */
  .pc, .rp-body { font-size: 13px; line-height: 1.45; }

  /* Bottom nav labels stay compact */
  .sw-bn-lbl { font-size: 7px !important; }
}


@media (max-width: 767px) {
  #loading { z-index: 99999 !important; }
}

/* ═══════════════════════════════════════════════════
   DISCLAIMER MODAL — mobile safe
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .disc-card-inner { max-height: 90dvh !important; overflow-y: auto; }
}

/* ═══════════════════════════════════════════════════
   PLATFORM DROPDOWN — mobile
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .plat-menu {
    position: fixed !important;
    top: var(--mobile-header-h) !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100% !important;
    border-radius: 0 !important;
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════
   TABLET SPECIFIC
═══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {
  /* Hide heavy right-panel content  */
  #rp { width: 280px; min-width: 280px; }

  /* Collapse news player on tablet */
  .news-player { height: 150px !important; }

  /* Tab grid 2-col */
  #col-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ═══════════════════════════════════════════════════
   SAFE AREA SUPPORT (iPhone notch / home bar)
═══════════════════════════════════════════════════ */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .sw-bottom-nav {
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    }

    .sw-bottom-sheet { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
    .sw-report-card { margin-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }

    :root { --bottom-nav-h: 60px; }
  }
}

/* ═══════════════════════════════════════════════════
   DATA STATUS BADGES (last-good layer)
═══════════════════════════════════════════════════ */
.sw-data-status {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}
.sw-ds-live     { color: var(--grn, #00e87a);  background: rgba(0,232,122,0.1);  border: 1px solid rgba(0,232,122,0.3);  }
.sw-ds-cached   { color: var(--warn, #e6a000); background: rgba(230,160,0,0.1); border: 1px solid rgba(230,160,0,0.3); }
.sw-ds-degraded { color: var(--high, #ff6b35); background: rgba(255,107,53,0.1); border: 1px solid rgba(255,107,53,0.3); }
.sw-ds-offline  { color: var(--crit, #ff3355); background: rgba(255,51,85,0.1);  border: 1px solid rgba(255,51,85,0.3);  }

/* ═══════════════════════════════════════════════════
   GLOBAL TIME RIBBON
═══════════════════════════════════════════════════ */
#sw-time-ribbon {
  /* Visible only when sufficient width — hide on small screens */
}

@media (max-width: 1100px) {
  #sw-time-ribbon { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   DUAL-TIME TIMESTAMP (UTC | Local)
═══════════════════════════════════════════════════ */
.sw-ts-dual {
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 9px;
  color: var(--text-lo);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.sw-ts-dual .sw-ts-local {
  opacity: 0.65;
}

/* ═══════════════════════════════════════════════════
   TASK 8 — MOBILE TEXT READABILITY
   Slightly bumps the smallest text elements on mobile.
   Mobile-only (<768px). No layout changes. No desktop
   modifications. Preserves compact information density.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Universal floor: nothing smaller than 10px on mobile ── */
  body { -webkit-text-size-adjust: 100%; }

  /* ── Timestamps and time labels ── */
  .sig-time,
  .ts-label,
  .mod-ts,
  .idx-region,
  .com-unit,
  .heat-trend,
  .rw-lbl,
  .rw-sectors,
  .mi-tile-ts,
  .osint-when,
  .brief-ts,
  .sig-meta,
  [id*="ts-"] {
    font-size: 10px !important;
    min-font-size: 10px;
  }

  /* ── Source / attribution labels ── */
  .sig-src,
  .mi-tile-src,
  .mod-src-lbl,
  .src-label,
  .osint-src,
  .brief-src,
  .sig-src span,
  .sig-src a {
    font-size: 10px !important;
  }

  /* ── Module status badges ── */
  .mod-status,
  .ms-live,
  .ms-degraded,
  .ms-offline,
  .ms-cached {
    font-size: 8px !important;
  }

  /* ── Secondary/caption text in cards ── */
  .sig-conf,
  .heat-trend,
  .rw-trend-up,
  .rw-trend-dn,
  .exploit-tech,
  .idx-region,
  .com-badge,
  .shock-type,
  .brief-domain,
  .brief-type,
  .mi-tile-cat,
  .osint-why {
    font-size: 11px !important;
  }

  /* ── Primary card values: keep readable ── */
  .sig-title,
  .rw-name,
  .exploit-cve,
  .idx-name,
  .com-name,
  .shock-title,
  .brief-title,
  .mi-tile-name,
  .heat-region,
  .osint-title {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* ── Nav bottom labels ── */
  .sw-bn-lbl { font-size: 8px !important; }

  /* ── Menu drawer items ── */
  .sw-menu-item {
    font-size: 12px !important;
    padding: 11px 16px !important;
  }

  /* ── Bottom sheet title ── */
  .sw-bs-title { font-size: 12px !important; }

  /* ── Filter pills ── */
  .sw-filter-pill,
  .fchip,
  .tf-type-btn {
    font-size: 10px !important;
  }

  /* ── Markets: small index/commodity metadata ── */
  .idx-row .idx-region  { font-size: 10px !important; }
  .com-row .com-unit    { font-size: 10px !important; }
  .stress-row .stress-name { font-size: 11px !important; }

  /* ── Theatre/Space: map control labels ── */
  .leaflet-control-attribution { font-size: 9px !important; }

  /* ── Briefings: tile captions ── */
  .signal-tile .st-src   { font-size: 10px !important; }
  .signal-tile .st-ts    { font-size: 10px !important; }
  .signal-tile .st-title { font-size: 13px !important; }

  /* ── IW: narrative cards ── */
  .narr-meta,
  .narr-ts,
  .narr-src { font-size: 10px !important; }

  /* ── Cyber: CVE/exploit metadata ── */
  .cve-row .cve-id     { font-size: 11px !important; }
  .cve-row .cve-sw     { font-size: 11px !important; }
  .exploit-row .exploit-cve  { font-size: 11px !important; }

  /* ── Drawer panel headings ── */
  .sw-menu-section-title { font-size: 9px !important; }

  /* ── Disclaimer / legal fine print: floor at 11px on mobile ── */
  .disc-body,
  .disc-body p,
  .disc-body li { font-size: 12px !important; line-height: 1.6 !important; }
}

/* ═══════════════════════════════════════════════════
   MOBILE TYPOGRAPHY IMPROVEMENTS  v51
   Applies ONLY on mobile (<768px). Desktop unchanged.
   Increases smallest text by ~1–2px for readability.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Signal/event metadata timestamps & source labels ── */
  /* .sig-meta already set to 10px in the main mobile block above */
  .sig-src-link,
  .ev-meta,
  .event-meta,
  .event-ts,
  .event-time,
  .ev-ts { font-size: 10px !important; }

  /* ── Signal type badge (bumped from 7px desktop to 9px mobile) ── */
  .sig-type { font-size: 9px !important; }
  /* .sig-conf already 11px in main mobile block above — no override needed */

  /* ── Signal confidence filter buttons ── */
  .scf-btn { font-size: 10px !important; padding: 3px 8px !important; }

  /* ── SIGINT inner tab buttons (SIGNALS / CRISIS INDEX / ACTORS) ── */
  .itab { font-size: 10px !important; letter-spacing: 0.5px !important; }

  /* ── Theatre mobile tab bar ── */
  .sw-thtab { font-size: 10px !important; letter-spacing: 1px !important; }

  /* ── Space mobile view toggle buttons ── */
  .sw-svt-btn { font-size: 10px !important; letter-spacing: 1px !important; }

  /* ── Layer panel item names & group headings ── */
  .li-name { font-size: 12px !important; }
  .lgh     { font-size: 12px !important; }

  /* ── Right panel section titles ── */
  .spt  { font-size: 11px !important; }

  /* ── Feed secondary text (why / description text) ── */
  .sig-why { font-size: 11px !important; }

  /* ── Actor/crisis index secondary labels ── */
  .act-sub,
  .act-role,
  .cz-label { font-size: 11px !important; }

  /* ── Space / Theatre: counter bar labels ── */
  .counter-bar,
  .counter-bar span { font-size: 10px !important; }

  /* ── Status strip items (mobile) ── */
  .sw-ss-item { font-size: 10px !important; }

  /* ── Mobile tab bars (space filters) — already 10px in main block ── */
  /* .sw-filter-pill covered above */

  /* ── Topbar stripe / DEFCON strip ── */
  #topbar-stripe { font-size: 10px !important; }

  /* ── Footer / secondary nav text ── */
  .sw-about-footer,
  .sw-footer,
  footer,
  .about-footer-links a { font-size: 11px !important; }

  /* ── DEFCON label text ── */
  .defcon-label,
  .defcon-lbl { font-size: 10px !important; }

  /* ── Cluster marker labels ── */
  .marker-cluster { font-size: 12px !important; }
}


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  STRATWATCH — PLATFORM UI STANDARD  v82                         ║
   ║  Global typography, control, and panel standardisation pass.    ║
   ║  Purely additive — all rules below are new. No prior rules      ║
   ║  removed. Specificity chosen to override per-page inline        ║
   ║  styles only where safe. Desktop behaviour preserved.           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════
   §1 — DESKTOP BASE STANDARD
   Normalise panel header height, title colour, and
   tab sizing. These are mild corrections that are safe
   on all pages.
═══════════════════════════════════════════════════ */

/* Panel header: consistent min-height across Theatre/Cyber/Markets/Briefings/Maritime */
.ph,
.sph {
  min-height: 36px;
}

/* Panel title colour: IW uses --text-lo which is near-invisible.
   Override for all pages: panel titles should be accent-coloured.
   Maritime overrides .pt to var(--mar-acc) at page level — that is fine,
   it remains more specific. */
.pt  { color: var(--acc); }
.spt { color: var(--acc); }

/* IW-specific: IW sets .pt/.spt to --text-lo. Correct it. */
body[data-page="iw"] .pt,
body[data-page="iw"] .spt {
  color: var(--iw-acc, var(--acc)) !important;
}

/* Layer filter items: consistent border-left active indicator.
   IW currently lacks the border-left; adding it for consistency. */
.lf {
  border-left: 2px solid transparent;
}
.lf.on {
  border-left-color: var(--acc);
}
/* IW: use IW accent for .lf.on */
body[data-page="iw"] .lf.on {
  border-left-color: var(--iw-acc, var(--acc));
}

/* Tab labels: establish 9px as a desktop floor (some pages use 8px) */
.itab {
  min-height: 30px;
}

/* ═══════════════════════════════════════════════════
   §2 — TABLET STANDARD  768–1199px
   The existing shared CSS had almost no tablet-specific
   typography or control improvements. This section adds
   them. Controls, tap targets, panel headers, and text
   all scale moderately upward.
═══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {

  /* ── Topbar toolbar buttons: slightly larger for tablet ── */
  #tb .tbtn {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  /* ── Panel headers: slightly more breathing room ── */
  .ph,
  .sph {
    min-height: 38px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* ── Panel title text ── */
  .pt,
  .spt {
    font-size: 10px;
    letter-spacing: 2px;
  }

  /* ── Intel tabs (SIGNALS / CRISIS / ACTORS / CHOKEPOINTS etc) ── */
  .itab {
    font-size: 9px !important;
    padding: 8px 6px !important;
    min-height: 34px;
  }

  /* ── Layer filter items ── */
  .lf {
    padding: 6px 12px !important;
    min-height: 30px;
  }
  .lf-name {
    font-size: 9px !important;
  }
  .lgh {
    font-size: 9px !important;
  }

  /* ── Intelligence card text (tablet) ── */
  .sw-card-title   { font-size: 14px !important; }
  .sw-card-summary { font-size: 13px !important; }
  .sw-card-source,
  .sw-card-time    { font-size: 9.5px !important; }

  /* ── Signal feed items ── */
  .sig-title { font-size: 13px !important; line-height: 1.4 !important; }
  .sig-meta  { font-size: 9.5px !important; }
  .sig-why   { font-size: 12px !important; line-height: 1.5 !important; }

  /* ── Report modal body text ── */
  .sw-report-text { font-size: 14px !important; line-height: 1.6 !important; }

  /* ── Filter pills: slightly larger on tablet for tap ease ── */
  .sw-filter-pill {
    font-size: 9.5px !important;
    padding: 5px 11px !important;
  }

  /* ── Collapse chevron: common IDs — larger and easier to click ── */
  #lp-chevron,
  #rp-chevron {
    font-size: 16px !important;
    padding: 4px 6px !important;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Space page: specific font floor adjustments for tablet ── */
  body[data-page="space"] .si-label,
  body[data-page="space"] .si-val-sub,
  body[data-page="space"] .orb-stat,
  body[data-page="space"] .orb-lbl,
  body[data-page="space"] .sat-tag,
  body[data-page="space"] .sat-sub,
  body[data-page="space"] .si-sub {
    font-size: 9px !important;
  }
  body[data-page="space"] .si-val {
    font-size: 10px !important;
  }
  body[data-page="space"] .si-mover-name,
  body[data-page="space"] .si-title {
    font-size: 12px !important;
  }
  body[data-page="space"] .si-mover-reason {
    font-size: 10px !important;
  }

  /* ── Markets page: make data labels more readable on tablet ── */
  body[data-page="markets"] .idx-name,
  body[data-page="markets"] .com-name,
  body[data-page="markets"] .heat-region {
    font-size: 12px !important;
  }
  body[data-page="markets"] .idx-region,
  body[data-page="markets"] .com-unit {
    font-size: 9.5px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §3 — MOBILE CONTROL & TAP TARGET IMPROVEMENTS
   Supplement existing mobile typography rules.
   Focus on: tap targets, controls, chevrons,
   and the Space page (which has the smallest fonts).
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Topbar toolbar buttons: 44px touch target ── */
  #tb .tbtn {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
    border-radius: 5px !important;
  }

  /* ── Panel header: more breathing room ── */
  .ph,
  .sph {
    min-height: 40px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* ── Panel titles: visible on mobile ── */
  .pt,
  .spt {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  /* ── Intel tabs: bigger, easier to tap ── */
  .itab {
    font-size: 10px !important;
    padding: 9px 6px !important;
    min-height: 38px !important;
    letter-spacing: 0.5px !important;
  }

  /* ── Layer filter items: larger tap target ── */
  .lf {
    padding: 8px 14px !important;
    min-height: 36px !important;
  }
  .lf-name {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .lf-ico {
    font-size: 13px !important;
  }
  .lgh {
    font-size: 9px !important;
    padding-top: 8px !important;
    padding-bottom: 4px !important;
  }

  /* ── Collapse chevrons: larger hit area ── */
  #lp-chevron,
  #rp-chevron {
    font-size: 18px !important;
    padding: 4px 8px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
  }

  /* ── Section group headers in left panel ── */
  .lgh {
    font-size: 9.5px !important;
    letter-spacing: 1.5px !important;
  }

  /* ── Status pills / badges ── */
  .status-pill,
  .live-badge {
    font-size: 8.5px !important;
    padding: 3px 9px !important;
  }

  /* ── Mobile tab bars (INTEL | MAP pattern) ── */
  .sw-thtab,
  .sw-martab,
  .sw-svt-btn {
    font-size: 11px !important;
    min-height: 42px !important;
    padding: 10px 8px !important;
    letter-spacing: 1px !important;
  }

  /* ── Filter pills: bigger touch targets ── */
  .sw-filter-pill {
    font-size: 10px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
    border-radius: 14px !important;
  }

  /* ── Donate button: readable on mobile ── */
  .donate-btn {
    font-size: 8.5px !important;
    padding: 5px 10px !important;
  }

  /* ── Right-panel section headers ── */
  .sph .spt {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §4 — SPACE PAGE: FONT FLOOR CORRECTIONS
   Space page has many 6px–7px elements that are
   unreadable on any device. This section establishes
   a minimum readable size without altering layout.
═══════════════════════════════════════════════════ */

/* Desktop: raise the absolute floor to 8px minimum */
body[data-page="space"] {
  /* Satellite tag / sub-labels — often 6-7px */
}
body[data-page="space"] .sat-tag,
body[data-page="space"] .sat-sub,
body[data-page="space"] .orb-lbl,
body[data-page="space"] .orb-stat,
body[data-page="space"] .si-sub,
body[data-page="space"] .si-label {
  font-size: 8px;   /* floor: was 6-7px on desktop */
}

@media (max-width: 1199px) {
  /* Tablet + mobile: raise floor to 9px for Space labels */
  body[data-page="space"] .sat-tag,
  body[data-page="space"] .sat-sub,
  body[data-page="space"] .orb-lbl,
  body[data-page="space"] .orb-stat,
  body[data-page="space"] .si-sub,
  body[data-page="space"] .si-label,
  body[data-page="space"] .si-val-sub {
    font-size: 9px !important;
  }

  body[data-page="space"] .si-mover-name {
    font-size: 12px !important;
  }

  body[data-page="space"] .si-mover-reason {
    font-size: 10px !important;
  }

  body[data-page="space"] .si-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 767px) {
  /* Mobile: Space panel text sizes */
  body[data-page="space"] .sat-tag,
  body[data-page="space"] .sat-sub,
  body[data-page="space"] .orb-lbl,
  body[data-page="space"] .orb-stat,
  body[data-page="space"] .si-sub,
  body[data-page="space"] .si-label,
  body[data-page="space"] .si-val-sub {
    font-size: 10px !important;
  }

  body[data-page="space"] .si-val {
    font-size: 11px !important;
  }

  body[data-page="space"] .si-title {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  body[data-page="space"] .si-mover-name {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  body[data-page="space"] .si-mover-reason {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

/* ═══════════════════════════════════════════════════
   §5 — IW PAGE REFINEMENTS
   IW page has several inconsistencies vs the platform
   standard that are safe to correct here.
═══════════════════════════════════════════════════ */

/* IW: narrative card metadata — bump from 8px to 9px floor */
body[data-page="iw"] .narr-meta,
body[data-page="iw"] .narr-ts,
body[data-page="iw"] .narr-src {
  font-size: 9px;
}

/* IW: narrative card title — align with platform card standard */
body[data-page="iw"] .narr-title,
body[data-page="iw"] .iw-card-title {
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

@media (max-width: 767px) {
  body[data-page="iw"] .narr-meta,
  body[data-page="iw"] .narr-ts,
  body[data-page="iw"] .narr-src {
    font-size: 10px !important;
  }
  body[data-page="iw"] .narr-title,
  body[data-page="iw"] .iw-card-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  /* IW mobile: actor/framing badge text */
  body[data-page="iw"] .iw-tag,
  body[data-page="iw"] .narr-type {
    font-size: 9px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §6 — MARITIME PAGE REFINEMENTS
   Maritime is new (v81). Apply same standard it was
   built to, with mobile/tablet improvements.
═══════════════════════════════════════════════════ */

@media (max-width: 767px) {
  body[data-page="maritime"] .cp-name {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }
  body[data-page="maritime"] .cp-stress {
    font-size: 8px !important;
  }
  body[data-page="maritime"] .cp-region,
  body[data-page="maritime"] .cp-incident {
    font-size: 9px !important;
    line-height: 1.45 !important;
  }
  body[data-page="maritime"] .inc-title {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  body[data-page="maritime"] .inc-source,
  body[data-page="maritime"] .inc-region,
  body[data-page="maritime"] .inc-time {
    font-size: 9px !important;
  }
  body[data-page="maritime"] .sel-title {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  body[data-page="maritime"] .sel-summary {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  body[data-page="maritime"] .sel-field-label,
  body[data-page="maritime"] .sel-field-val {
    font-size: 9.5px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §7 — SELECTED-OBJECT / DETAIL PANEL STANDARD
   The "selected item" detail view appears in Theatre,
   Space, Maritime, and IW. Standardise its readability.
═══════════════════════════════════════════════════ */

/* Desktop: selected detail panels */
.nd-detail-title,
.sel-title,
.event-detail-title,
.selected-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-hi);
}

.nd-detail-body,
.sel-summary,
.event-detail-body,
.selected-body-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

.nd-detail-meta,
.sel-field,
.event-detail-meta {
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-lo);
}

@media (max-width: 1199px) {
  .nd-detail-title,
  .sel-title,
  .event-detail-title,
  .selected-title {
    font-size: 15px;
    line-height: 1.35;
  }
  .nd-detail-body,
  .sel-summary,
  .event-detail-body,
  .selected-body-text {
    font-size: 13px;
    line-height: 1.55;
  }
}

@media (max-width: 767px) {
  .nd-detail-title,
  .sel-title,
  .event-detail-title,
  .selected-title {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  .nd-detail-body,
  .sel-summary,
  .event-detail-body,
  .selected-body-text {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .nd-detail-meta,
  .sel-field,
  .event-detail-meta {
    font-size: 10px !important;
    line-height: 1.45 !important;
  }
}

/* ═══════════════════════════════════════════════════
   §8 — THEATRE PAGE REFINEMENTS
   Theatre is the most complex page. Minor additions
   only — preserve all existing responsive logic.
═══════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1199px) {
  /* Theatre signal feed: slightly more readable on tablet */
  body[data-page="theatre"] .sig-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  body[data-page="theatre"] .sig-meta {
    font-size: 9.5px !important;
  }
  body[data-page="theatre"] .sig-why {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  /* Theatre: crisis index / actor tracker tablet size */
  body[data-page="theatre"] #crisis-index-body > div,
  body[data-page="theatre"] #actor-tracker-body > div {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  /* Theatre: INTEL/MAP tab bar on tablet */
  body[data-page="theatre"] .sw-thtab {
    font-size: 10px !important;
    min-height: 40px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §9 — SHARED DROPDOWN / PLAT-MENU IMPROVEMENTS
   Ensure nav dropdown items are readable and tappable.
═══════════════════════════════════════════════════ */

/* Desktop: consistent platform menu item height */
.plat-item {
  min-height: 34px;
}

@media (max-width: 1199px) {
  .plat-item {
    min-height: 38px !important;
    font-size: 9.5px !important;
    padding: 9px 14px !important;
  }
}

@media (max-width: 767px) {
  /* Already fixed to fullscreen — ensure font is readable */
  .plat-item {
    min-height: 44px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    padding: 11px 16px !important;
  }
  .plat-ico {
    font-size: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §10 — MARKETS PAGE REFINEMENTS
   Markets has many small indicator tiles. Ensure
   minimum readability on tablet/mobile.
═══════════════════════════════════════════════════ */

@media (max-width: 767px) {
  /* Market module headers */
  body[data-page="markets"] .mod-title,
  body[data-page="markets"] .mod-hdr-title {
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  /* Price values: keep readable */
  body[data-page="markets"] .idx-price,
  body[data-page="markets"] .com-price,
  body[data-page="markets"] .fx-val {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* Change labels */
  body[data-page="markets"] .idx-chg,
  body[data-page="markets"] .com-chg,
  body[data-page="markets"] .fx-chg {
    font-size: 11px !important;
  }

  /* Stress / risk heat labels */
  body[data-page="markets"] .stress-name,
  body[data-page="markets"] .heat-region {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  /* Risk overview card titles */
  body[data-page="markets"] .rw-name,
  body[data-page="markets"] .shock-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* Signal tile titles in Markets panel */
  body[data-page="markets"] .mi-tile-name {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
}

/* ═══════════════════════════════════════════════════
   §11 — BRIEFINGS PAGE REFINEMENTS
   Briefings is long-form. Ensure body text comfort.
═══════════════════════════════════════════════════ */

@media (max-width: 767px) {
  body[data-page="briefings"] .brief-title,
  body[data-page="briefings"] .brf-title,
  body[data-page="briefings"] .st-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
  }

  body[data-page="briefings"] .brief-summary,
  body[data-page="briefings"] .brf-summary,
  body[data-page="briefings"] .st-body {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  body[data-page="briefings"] .brief-src,
  body[data-page="briefings"] .brf-src,
  body[data-page="briefings"] .st-src,
  body[data-page="briefings"] .brief-ts,
  body[data-page="briefings"] .st-ts {
    font-size: 10px !important;
  }

  /* Brief type / domain badge */
  body[data-page="briefings"] .brief-type,
  body[data-page="briefings"] .brief-domain,
  body[data-page="briefings"] .brf-type {
    font-size: 9px !important;
    padding: 2px 7px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §12 — CYBER PAGE REFINEMENTS
   Cyber feed cards and CVE/exploit panels.
═══════════════════════════════════════════════════ */

@media (max-width: 767px) {
  body[data-page="cyber"] .exploit-title,
  body[data-page="cyber"] .cve-name,
  body[data-page="cyber"] .cyber-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  body[data-page="cyber"] .exploit-cve,
  body[data-page="cyber"] .cve-id {
    font-size: 10.5px !important;
  }

  body[data-page="cyber"] .exploit-tech,
  body[data-page="cyber"] .cve-sw {
    font-size: 10.5px !important;
  }

  body[data-page="cyber"] .ransomware-name,
  body[data-page="cyber"] .rw-name {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
}

/* ═══════════════════════════════════════════════════
   §13 — PANEL COLLAPSE CONTROL VISUAL UPGRADE
   The shared chevron IDs (#lp-chevron, #rp-chevron) are
   used across Theatre, Cyber, Markets, Briefings, IW,
   and Maritime. These rules improve their visual weight
   and tap target without changing their DOM structure.
═══════════════════════════════════════════════════ */

#lp-chevron,
#rp-chevron {
  /* Desktop: slightly more visible */
  font-size: 14px;
  color: var(--text-lo);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

#lp-chevron:hover,
#rp-chevron:hover {
  color: var(--acc);
  background: var(--acc-dim);
}

/* ═══════════════════════════════════════════════════
   END: Platform UI Standard v82
═══════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════════════╗
   ║  STRATWATCH — PHASE 4: MOBILE RESPONSIVENESS STANDARD  v89      ║
   ║  Mobile typography scale, tap targets, module system,           ║
   ║  platform dropdown accessibility, and cross-page consistency.   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════
   §P4-1 — MOBILE PLATFORM DROPDOWN VISIBILITY
   All pages: override the shared #tb .plat-dd hide
   rule so the PLATFORM button stays visible on mobile
   and the hamburger is not the only navigation method.
   Maritime already had its own body[data-page] override;
   this rule covers all other pages uniformly.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Show platform dropdown button on mobile across ALL pages.
     Overrides the earlier rule: #tb .plat-dd { display:none !important }
     Uses higher specificity via direct child selector. */
  #tb > .plat-dd,
  #tb .plat-dd {
    display: inline-flex !important;
  }

  /* Compact the plat-btn for mobile — icon hidden, text tighter */
  #tb .plat-btn {
    font-size: 9px !important;
    padding: 3px 8px !important;
    letter-spacing: 1px !important;
  }
  #tb .plat-btn .plat-ico {
    display: none !important;
  }
  #tb .plat-btn .plat-arr {
    display: inline !important;
    font-size: 9px !important;
  }

  /* Platform menu on mobile: full-width dropdown from top of screen */
  .plat-menu {
    position: fixed !important;
    top: var(--mobile-header-h, 44px) !important;
    left: 0 !important;
    right: 0 !important;
    min-width: 100% !important;
    border-radius: 0 0 8px 8px !important;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 99990 !important;
  }

  /* Platform items: full-width, comfortable tap target */
  .plat-item {
    min-height: 46px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    padding: 12px 18px !important;
  }
  .plat-ico {
    font-size: 13px !important;
  }

  /* Hamburger: override any page-specific margin-left:auto to sit
     at end of topbar naturally via flex */
  .sw-mob-menu-btn {
    margin-left: 4px;
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-2 — SHARED MODULE SYSTEM VISUAL STANDARD
   Standardise rp-hdr / module header across all pages:
   Theatre, Space, Maritime, Cyber, Markets, Briefings.
   The .rp-hdr pattern is used everywhere but has
   inconsistent height and spacing.
═══════════════════════════════════════════════════ */

/* Desktop: common module header baseline */
.rp-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-family: var(--fm, 'Share Tech Mono', monospace);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text-lo);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 34px;
}

/* Module title text inside headers */
.rp-hdr > span:not([id]) {
  color: var(--text-lo);
  letter-spacing: 2px;
}

/* Live dot — standardise size and animation */
.rp-hdr .live-dot,
.rp-hdr .ldot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 1199px) {
  .rp-hdr {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
}

@media (max-width: 767px) {
  .rp-hdr {
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }

  /* Module header spans readable on mobile */
  .rp-hdr span {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }

  /* sw-module-toggle button: larger tap area */
  .sw-module-toggle {
    min-height: 32px !important;
    min-width: 60px !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-3 — MOBILE TYPOGRAPHY SCALE v2
   Final systematic pass raising all inline 7–8px
   font-size values to the mobile readability floor.
   This section targets class names used by inline
   CSS in individual pages that aren't covered by
   the earlier shared rules.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Universal mobile type floor: 10px minimum ── */
  /* Applied to all monospace metadata text */
  [style*="font-family:var(--fm)"],
  [style*="font-family:'Share Tech Mono'"] {
    /* Can't directly override inline styles from here — use class rules */
  }

  /* ── Badge / pill text: raise from 7–8px to 10px ── */
  .nf-badge,
  .sig-new,
  .ctr-pill,
  .sfchip,
  .fchip,
  .filter-lbl,
  .brf-region-badge,
  .brf-conf,
  .brf-tag,
  .sig-ref-type,
  .demo-badge,
  .ev-type,
  .exploit-status,
  .cve-patch,
  .rw-lbl,
  .mod-status,
  .mod-ts,
  .launch-provider,
  .conf-badge,
  .osint-label,
  .status-pill {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
  }

  /* ── Tiny "SOON" labels in plat-menu ── */
  .plat-item-future span:last-child {
    font-size: 9px !important;
  }

  /* ── Space page specific: feed status bar ── */
  .status-bar,
  .nf-src,
  .launch-net {
    font-size: 10px !important;
  }

  /* ── Markets: forex and index metadata ── */
  .fx-group-tr td,
  .fx-tbl-hdr th,
  .idx-session,
  .idx-region,
  .fx-group-hdr {
    font-size: 10px !important;
  }

  /* ── Briefings: topic and type badges ── */
  .brf-topic {
    font-size: 9px !important;
  }

  /* ── IW: event time metadata ── */
  .ev-time,
  .last-update {
    font-size: 10px !important;
  }

  /* ── Theatre: signal type + confidence ── */
  .sig-type {
    font-size: 9px !important;
    padding: 2px 6px !important;
    min-height: 20px !important;
  }
  .sig-conf {
    font-size: 10px !important;
  }

  /* ── Cluster markers ── */
  .marker-cluster span {
    font-size: 12px !important;
    font-weight: 700 !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-4 — MODULE CONTENT READABILITY (all pages)
   Intelligence content inside right/left panels
   needs clear visual hierarchy on mobile.
   Card body text, summary text, source metadata.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Intel panel tabs: consistent across all pages ── */
  .itab,
  .ntab {
    font-size: 10px !important;
    min-height: 40px !important;
    padding: 9px 8px !important;
    letter-spacing: 0.5px !important;
  }

  /* ── Space intel tabs ── */
  .ntab {
    font-size: 10px !important;
    padding: 8px 6px !important;
  }

  /* ── Panel section headers: sph/ph consistent ── */
  .ph,
  .sph {
    min-height: 42px !important;
    padding: 10px 12px !important;
  }

  /* ── Panel section title text ── */
  .pt,
  .spt {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  /* ── Feed item titles: main intelligence text ── */
  .sig-title,
  .nf-title,
  .brief-title,
  .narr-title,
  .exploit-title,
  .rw-name,
  .heat-region,
  .idx-name,
  .com-name,
  .mi-tile-name {
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
  }

  /* ── Feed item body text: readable summaries ── */
  .sig-why,
  .brief-summary,
  .narr-body,
  .exploit-desc {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  /* ── Feed metadata row: source + timestamp ── */
  .sig-meta,
  .nf-meta,
  .brief-meta,
  .narr-meta,
  .launch-provider {
    font-size: 10px !important;
    line-height: 1.4 !important;
  }

  /* ── Value displays: market prices, counts ── */
  .idx-price,
  .com-price,
  .fx-val,
  .si-val {
    font-size: 13px !important;
    font-weight: 600 !important;
  }

  /* ── Chokepoint / incident names ── */
  .cp-name {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }
  .inc-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .inc-source,
  .inc-region,
  .inc-time {
    font-size: 10px !important;
  }

  /* ── Detail / selected item panels ── */
  .sel-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }
  .sel-summary {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .sel-field-label,
  .sel-field-val {
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-5 — TOUCH TARGET STANDARDISATION
   All interactive controls: min 44px touch target
   per WCAG 2.5.5. Applied mobile-only.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Topbar buttons: 44px min ── */
  #tb .tbtn {
    width: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
  }

  /* ── Theme toggle: pill shape, tappable ── */
  #tb .theme-toggle {
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 10px !important;
  }
  #tb .theme-label {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  /* ── Mobile tab bars: INTEL | MAP style ── */
  .sw-thtab,
  .sw-martab,
  .sw-svt-btn {
    min-height: 44px !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    padding: 10px 12px !important;
  }

  /* ── Filter pills in scrolling filter bar ── */
  .sw-filter-pill,
  .fchip,
  .tf-type-btn {
    min-height: 34px !important;
    font-size: 11px !important;
    padding: 6px 14px !important;
    border-radius: 16px !important;
    letter-spacing: 0.5px !important;
  }

  /* ── Layer filter items in left panel ── */
  .lf {
    min-height: 38px !important;
    padding: 8px 14px !important;
  }
  .lf-name {
    font-size: 12px !important;
  }
  .lf-ico {
    font-size: 13px !important;
    width: 18px !important;
  }

  /* ── Section group labels ── */
  .lgh {
    font-size: 10px !important;
    padding: 8px 14px 4px !important;
    letter-spacing: 2px !important;
  }

  /* ── Collapse/panel chevrons ── */
  #lp-chevron,
  #rp-chevron {
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 18px !important;
    padding: 4px !important;
  }

  /* ── Drawer close buttons ── */
  .sw-drawer-close,
  .sw-bs-close,
  .sw-report-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }

  /* ── Action buttons in report/modal footers ── */
  .sw-action-btn {
    min-height: 38px !important;
    font-size: 10px !important;
    padding: 8px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-6 — MOBILE SPACING & BREATHING ROOM
   Improve card padding, section gaps, and content
   separation so dense intelligence panels are easier
   to scan on small screens.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Intel card padding: more breathing room ── */
  .sw-intel-card {
    padding: 14px 16px !important;
    border-radius: 10px !important;
    margin-bottom: 2px !important;
  }

  /* ── Card title / body vertical rhythm ── */
  .sw-card-header {
    margin-bottom: 8px !important;
  }
  .sw-card-summary {
    margin-bottom: 10px !important;
  }

  /* ── Feed items: consistent padding ── */
  .sig-item,
  .nf-item,
  .cp-item,
  .inc-item,
  .launch-item {
    padding: 12px 14px !important;
  }

  /* ── Drawer body: comfortable reading padding ── */
  .sw-drawer-body {
    padding: 12px 14px;
  }

  /* ── Bottom sheet body ── */
  .sw-bs-body {
    padding: 14px 16px;
  }

  /* ── Feed scroll area: bottom padding for nav ── */
  .sw-feed-scroll,
  .news-feed,
  .sig-feed,
  .ipanel-scroll {
    padding-bottom: calc(var(--bottom-nav-h, 56px) + 16px) !important;
  }

  /* ── Status pills: more readable ── */
  .status-pill,
  .live-badge {
    font-size: 9px !important;
    padding: 3px 10px !important;
    min-height: 22px !important;
  }

  /* ── Right panel header row: space between elements ── */
  .sph {
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-7 — OVERVIEW PAGE MOBILE IMPROVEMENTS
   The overview / risk overview page has domain cards
   and a grid that needs mobile treatment.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body[data-page="overview"] .domain-grid,
  body[data-page="overview"] .overview-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  body[data-page="overview"] .domain-card,
  body[data-page="overview"] .dc-info {
    width: 100% !important;
  }

  body[data-page="overview"] .dc-name {
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

  body[data-page="overview"] .dc-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body[data-page="overview"] .dc-status {
    font-size: 10px !important;
  }

  body[data-page="overview"] .page-hdr-title {
    font-size: 16px !important;
    letter-spacing: 3px !important;
  }

  body[data-page="overview"] .page-hdr-sub {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  body[data-page="overview"] .sec-title {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    padding: 8px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-8 — ABOUT PAGE MOBILE IMPROVEMENTS
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body[data-page="about"] .about-section-title,
  body[data-page="about"] .hero-title {
    font-size: 16px !important;
    letter-spacing: 2px !important;
    line-height: 1.35 !important;
  }

  body[data-page="about"] .about-body,
  body[data-page="about"] .hero-body,
  body[data-page="about"] p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body[data-page="about"] .feature-item,
  body[data-page="about"] .about-card {
    padding: 12px 14px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-9 — TOPBAR LOGO: ensure subtitle row hides
   cleanly on narrow screens (320–375px)
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* On very narrow screens, hide the subtitle row */
  #tb .logo > div > div:last-child {
    display: none !important;
  }
  /* Keep badge hidden — already set in shared, re-assert for 480px */
  #tb .logo-badge,
  #tb .osint-badge {
    display: none !important;
  }
  /* Logo text: max compression */
  #tb .logo-t {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-10 — TOPBAR OVERFLOW: allow wrap on very small
   screens so nothing gets clipped.
   On 320px, the topbar can overflow — allow scroll.
═══════════════════════════════════════════════════ */
@media (max-width: 360px) {
  #tb {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
  }
  #tb::-webkit-scrollbar { display: none; }
}

/* ═══════════════════════════════════════════════════
   §P4-11 — MODULE HIERARCHY VISUAL STANDARD
   Shared module system: standardise collapsible
   module headers and bodies per the sw-coll pattern.
   Applies where .sw-coll-module is used (Maritime, etc.)
═══════════════════════════════════════════════════ */

/* Desktop baseline */
.sw-coll-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  user-select: none;
}

@media (max-width: 767px) {
  .sw-coll-header {
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 9px !important;
    letter-spacing: 2px !important;
  }

  .sw-coll-header .sw-coll-label {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }

  .sw-coll-arrow {
    font-size: 12px !important;
    min-width: 16px !important;
    text-align: center !important;
  }

  .sw-coll-header .sw-coll-badge {
    font-size: 9px !important;
    padding: 2px 8px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §P4-12 — TABLET IMPROVEMENTS
   Fill gaps in 768–1199px behaviour.
═══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Module headers on tablet */
  .rp-hdr {
    font-size: 9px !important;
    min-height: 38px;
    padding: 9px 12px;
  }

  /* Intel tabs on tablet */
  .itab, .ntab {
    font-size: 9px !important;
    padding: 8px 6px !important;
    min-height: 36px;
  }

  /* Filter pills on tablet */
  .sw-filter-pill {
    font-size: 10px !important;
    padding: 5px 12px !important;
    min-height: 30px !important;
  }

  /* Panel titles on tablet */
  .pt, .spt {
    font-size: 10px !important;
    letter-spacing: 2px !important;
  }

  /* Collapsible module headers on tablet */
  .sw-coll-header {
    min-height: 38px;
    padding: 8px 12px;
  }
}

/* ═══════════════════════════════════════════════════
   MOBILE MODAL LOCKOUT (v133)
   Desktop-only modals (#item-modal, #alert-modal) must
   never render on mobile — they are replaced by bottom
   sheets via sw-mobile.js openItemModal() override.
   !important ensures this wins over any inline style or
   JS classList.add('show') that fires before the override
   can intercept on slow/low-end mobile devices.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #item-modal,
  #alert-modal {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   END: Phase 4 — Mobile Responsiveness Standard v89
═══════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  STRATWATCH — READABILITY UPLIFT  v139                          ║
   ║  Desktop (≥1200px) and small-laptop (1024–1199px) typography.   ║
   ║  Raises 7–8px font floors to 9–10px. Improves line-height.     ║
   ║  Mobile-only sections are unchanged (handled by §P4 above).    ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════
   §R1 — GLOBAL DESKTOP FONT FLOOR
   Many inline class definitions use 7px or 8px for
   monospace metadata labels. These are borderline
   unreadable on 1080p displays and unusable on 1366px
   laptops. Raise to 9px as an absolute minimum.
   These rules are desktop-first, so they also apply
   on tablet/mobile (which have !important overrides
   in §P4 that will supersede these where needed).
═══════════════════════════════════════════════════ */

/* Badge / pill / type labels: 7-8px → 9px floor */
.sig-type,
.sig-new,
.nf-badge,
.ctr-pill,
.sfchip,
.fchip,
.filter-lbl,
.brf-conf,
.brf-tag,
.brf-region-badge,
.brf-ts,
.brf-topic,
.brf-region,
.brf-date,
.brf-section-label,
.brf-src-btn,
.demo-badge,
.sig-ref-type,
.st-type,
.st-src-btn,
.conf-badge,
.mod-status,
.mod-ts,
.intel-sev,
.intel-tag,
.ind-urgency,
.item-modal-type,
.item-modal-tag,
.actor-sectors,
.exploit-status,
.cve-patch,
.cve-kev,
.rw-lbl,
.rm-label,
.rm-axis-x,
.rm-axis-y,
.launch-provider,
.op-sub,
.op-section-lbl,
.op-status-badge,
.op-tag,
.osint-label,
.status-pill,
.cy-mod-toggle,
.ctrl-reset-btn,
.ld-st,
.fc-btn,
.risk-meta,
.reentry-meta,
.reentry-status,
.reentry-note {
  font-size: 9px;
}

/* Source / timestamp meta labels */
.sw-card-source,
.sw-card-time,
.sw-ts-dual,
.rp-hdr,
.mod-src-lbl,
.sw-data-status {
  font-size: 9px;
}

/* Navigation dropdown items */
.t2-plat-item,
.plat-item {
  font-size: 10px;
}

/* Menu section titles */
.sw-menu-section-title {
  font-size: 9px;
}

/* Bottom nav labels: readable at all widths */
.sw-bn-lbl {
  font-size: 8px;
}

/* ═══════════════════════════════════════════════════
   §R2 — SMALL LAPTOP (1024–1199px) READABILITY
   This band covers 1024px-wide laptops (very common)
   that currently get the same "tablet" rules as
   768px tablets — which are too compressed.
   These rules improve readability without impacting
   desktop (≥1200px) layout.
═══════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1199px) {

  /* Panel headers: slightly more breathing room */
  .ph, .sph {
    min-height: 38px;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  /* Panel title text */
  .pt, .spt {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }

  /* Intel tabs */
  .itab {
    font-size: 10px !important;
    padding: 8px 8px !important;
    min-height: 34px;
  }

  /* Intelligence card text */
  .sw-card-title   { font-size: 14px !important; }
  .sw-card-summary { font-size: 13px !important; }

  /* Signal feed items */
  .sig-title { font-size: 13px !important; line-height: 1.4 !important; }
  .sig-meta  { font-size: 10px !important; }
  .sig-why   { font-size: 12px !important; line-height: 1.5 !important; }

  /* Topbar controls: slightly larger */
  #tb .nav-tab,
  #sw-topbar .t2-plat-btn { font-size: 10px !important; }

  /* Panel body text */
  .rp-hdr { font-size: 9px !important; letter-spacing: 1.5px !important; }

  /* Module headers */
  .sw-coll-header { min-height: 38px; padding: 8px 12px; }

  /* Layer filter items */
  .lf { padding: 6px 12px !important; min-height: 30px; }
  .lf-name { font-size: 10px !important; }
  .lgh { font-size: 9px !important; }

  /* Filter pills */
  .sw-filter-pill {
    font-size: 10px !important;
    padding: 5px 12px !important;
  }

  /* Topbar buttons */
  .t2-tbtn {
    min-width: 30px;
    height: 30px;
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════
   §R3 — DESKTOP BODY TEXT & LINE-HEIGHT UPLIFT
   For users on any desktop/laptop: improve the base
   reading experience for intelligence feed content.
   Card text, panel text, and summary text benefit
   from slightly improved line-height.
═══════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Intelligence card: comfortable reading */
  .sw-card-title   { font-size: 14px; line-height: 1.4; }
  .sw-card-summary { font-size: 13px; line-height: 1.55; }
  .sw-card-source,
  .sw-card-time    { font-size: 9.5px; }

  /* Report modal body: match briefings comfort */
  .sw-report-text  { font-size: 14px; line-height: 1.65; }

  /* Panel section headers: visible hierarchy */
  .pt  { font-size: 10px; letter-spacing: 2px; }
  .spt { font-size: 10px; letter-spacing: 2px; }

  /* Signal feed items */
  .sig-title { font-size: 13px; line-height: 1.4; }
  .sig-why   { font-size: 12px; line-height: 1.5; }
  .sig-meta  { font-size: 9.5px; }

  /* Drawer text */
  .sw-drawer-title { font-size: 11px; letter-spacing: 2px; }
  .sw-menu-item    { font-size: 11px; letter-spacing: 1.5px; padding: 12px 18px; }

  /* Bottom sheet title */
  .sw-bs-title { font-size: 12px; letter-spacing: 2px; }

  /* Action buttons */
  .sw-action-btn { font-size: 10px; padding: 8px 16px; }
}

/* ═══════════════════════════════════════════════════
   §R4 — TOPBAR READABILITY (900–1199px)
   The existing tablet section (≤1199px) shrinks the
   topbar aggressively. Restore readability at
   900–1199px without breaking the compact feel.
═══════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1199px) {

  /* Logo: keep visible */
  #tb .logo-t,
  .t2-logo-title {
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }

  /* Nav tabs: readable at 900px */
  #tb .nav-tab { font-size: 10px !important; padding: 4px 8px !important; }

  /* Topbar buttons: slightly larger */
  #tb .tbtn { width: 28px !important; height: 28px !important; font-size: 11px !important; }

  /* Platform button */
  .t2-plat-btn { font-size: 10px !important; letter-spacing: 1.5px !important; }

  /* DEFCON / PIZZA labels */
  .t2-defcon-lbl { font-size: 10px !important; }

  /* Clock */
  .t2-clock { font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════
   §R5 — FILTER PANEL READABILITY UPLIFT
   The filter panel labels and controls are currently
   quite small. Improve label sizes and spacing for
   all breakpoints.
═══════════════════════════════════════════════════ */

/* Desktop: filter panel labels readable */
.filter-lbl,
.fchip,
.sfchip,
.tf-type-btn,
.scf-btn {
  font-size: 9px;
}

/* Tablet/laptop: filter controls bigger */
@media (min-width: 768px) and (max-width: 1199px) {
  .filter-lbl  { font-size: 9.5px !important; letter-spacing: 1.5px !important; }
  .fchip,
  .sfchip      { font-size: 9.5px !important; padding: 4px 9px !important; }
  .scf-btn     { font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════
   §R6 — MOBILE BOTTOM NAV: DASHBOARD SLOT
   Ensure the new DASHBOARD nav item is visually
   consistent with the other 4 items. The .dimmed
   state is handled inline (opacity:0.45). The active
   state mirrors the existing .active class.
═══════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Dashboard item: identical tap target to others */
  #bn-dashboard {
    flex: 1;
  }

  /* When DASHBOARD_ENABLED flag is off, the link still works
     (routes to overview) but the dimmed opacity signals it's
     not fully active yet. No JS change required. */
}

/* ═══════════════════════════════════════════════════
   §R7 — THEATRE V2 SPECIFIC: 7px LABEL FLOORS
   Theatre-v2 inline styles define many 7px labels.
   These are below any readable threshold. Apply
   desktop floors matching the shared standard.
═══════════════════════════════════════════════════ */

/* Theatre signal confidence, type labels */
body[data-page="theatre"] .t2-sig-conf { font-size: 9px; }
body[data-page="theatre"] .t2-mod-hdr  { font-size: 9px; letter-spacing: 1.5px; }

/* Cyber module toggle (currently 7px) */
body[data-page="cyber"] .cy-mod-toggle { font-size: 9px !important; }
body[data-page="cyber"] .mod-ts        { font-size: 9px !important; }

/* Space: 7px reentry notes */
body[data-page="space"] .risk-meta,
body[data-page="space"] .reentry-meta,
body[data-page="space"] .reentry-note { font-size: 9px !important; }

/* ═══════════════════════════════════════════════════
   END: Readability Uplift v139
═══════════════════════════════════════════════════ */