/* ================================================================
   styles/mobile.css — Responsive layout overrides
   Four contexts: portrait phone, landscape phone, tablet portrait, desktop/tablet landscape
   ================================================================ */

/* ══════════════════════════════════════════════════════════════
   1. PHONE  (portrait ≤600px wide, or landscape ≤950px wide × ≤600px tall)
      Tab navigation, sticky header/tabbar, single scroll region
   ══════════════════════════════════════════════════════════════ */
/* styles/mobile.css — phones in portrait (≤600px) and landscape (≤950×600px). */
@media (max-width: 600px) and (orientation: portrait), (max-width: 950px) and (max-height: 600px) and (orientation: landscape) {
  /* Hide desktop chrome */
  #status-bar, #bottom-bar, #isec-geo, #isec-source, #feed-spacer, #intel-spacer,
  #api-overlay, .brief-history-bar { display: none !important; }
  #key-status, .bb-actions, .dev-only, #dev-mode-banner { display: none !important; }

  body { overflow: hidden; height: 100dvh; background: var(--bg-primary); }
  /* Collapse the desktop grid; its columns become invisible pass-throughs */
  #terminal { display: block !important; margin: 0 !important; height: auto !important; }
  /* columns pass through; #signal-analysis is re-overridden to block once reparented into the sheet */
  #feed-rail, #signal-analysis, #intel-panel { display: contents !important; }

  /* Sticky header */
  #m-header { position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 1000;
    display: flex; align-items: center; gap: 10px; padding: 0 14px;
    background: var(--bg-primary); border-bottom: 1px solid var(--border); }
  .m-wm { font-family: var(--font-military, 'Barlow Condensed'); font-weight: 700;
    font-size: 13px; letter-spacing: 3px; color: var(--amber); }
  .m-threat { font-family: var(--font-data, 'IBM Plex Mono'); font-size: 12px;
    font-weight: 600; letter-spacing: 1px; }
  .m-cycle { margin-left: auto; font-family: var(--font-data); font-size: 11px;
    color: var(--text-dim); letter-spacing: 1px; }

  /* Tab pages — single scroll region between header and tab bar */
  #m-pages { position: fixed; top: 48px; bottom: 56px; left: 0; right: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; }
  #m-pages > div { display: none; padding: 10px 12px 24px; }
  #m-pages > div.m-active { display: block; }

  /* Force every reparented accordion section open; toggle becomes a static header */
  .feed-section, .intel-section { display: block !important; margin-bottom: 14px; }
  .fsec-body, .isec-body { display: block !important; height: auto !important; }
  .fsec-toggle, .isec-toggle { pointer-events: none; min-height: 44px; }
  .fsec-chevron, .isec-chevron { display: none !important; }

  /* Bottom tab bar */
  #m-tabbar { position: fixed; bottom: 0; left: 0; right: 0; height: 56px; z-index: 1000;
    display: flex; background: var(--bg-primary); border-top: 1px solid var(--border); }
  .m-tab { flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; background: transparent; border: none;
    font-family: var(--font-military); font-size: 11px; letter-spacing: 1.5px;
    color: var(--text-dim); }
  .m-tab-ico { width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 4px; }
  .m-tab.m-on { color: var(--amber-bright); }
  .m-tab.m-on .m-tab-ico { background: var(--amber-ghost); }

  /* Feed filter chips → horizontally scrollable row, ≥44px tap height */
  .feed-controls-row { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0;
    -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .feed-controls-row .feed-btn { flex: 0 0 auto; min-height: 44px; padding: 0 14px;
    font-size: 12px; display: inline-flex; align-items: center; }

  /* Signal cards full-bleed */
  .event-card, .sig-card { border-radius: 0 !important; border-left: none !important;
    border-right: none !important; margin: 0 0 1px 0 !important; padding: 12px !important;
    min-height: 44px; }
  .ev-headline { font-size: 13px !important; line-height: 1.35 !important; }

  /* Contrast floor: any informational text under the floor gets lifted */
  .fsec-count, .isec-meta, .ev-meta, .ev-card-top, .source-attribution { color: var(--text-dim) !important; }

  /* Font-size floor: lift every sub-11px readable element to 11px */
  .isec-meta, .fsec-count { font-size: 11px !important; }
  .cycle-outlook-global-badge, .cycle-outlook-timestamp, .cycle-outlook-label { font-size: 11px !important; }
  .scenario-labels, .scenario-labels .pct { font-size: 11px !important; }
  .threat-label, .threat-badge { font-size: 11px !important; }
  .sub-btn { font-size: 11px !important; min-height: 44px !important;
    padding: 0 14px !important; align-items: center !important; }
  /* sub-btn with inline display:none must stay hidden — don't force-show it */
  .sub-btn[style*="display:none"] { display: none !important; }

  /* Event/signal card subtext */
  .ev-severity, .ev-domain, .ev-source, .ev-meta, .ev-card-top { font-size: 11px !important; }
  .feed-source-badge { font-size: 11px !important; }
  .signal-card-summary, .signal-card-l1-text, .signal-card-l1-label { font-size: 11px !important; }
  .signal-card-confidence, .signal-card-location, .signal-card-time { font-size: 11px !important; }

  /* Drawer/sheet inner elements (sheet is in DOM in devMode) */
  .classification-stamp, .drawer-classification { font-size: 11px !important; }
  .analysis-subtitle, .drawer-section-hdr { font-size: 11px !important; }
  .drawer-metric-lbl, .drawer-decay-label, .drawer-decay-time { font-size: 11px !important; }
  .drawer-confidence-label, .drawer-confidence, .drawer-location, .drawer-time { font-size: 11px !important; }
  .drawer-exp-dir, .drawer-exp-name, .drawer-exp-nonobvious { font-size: 11px !important; }
  .drawer-precedent-text, .drawer-exit-arrow, .gap-002-disclaimer { font-size: 11px !important; }
  .cascade-depth-badge, .cascade-node-label, .cascade-arrow, .cascade-analog-label { font-size: 11px !important; }
  .source-count-badge, .source-publisher, .source-type-badge, .source-time, .source-headline { font-size: 11px !important; }
  .watchlist-bullet { font-size: 11px !important; }
  .info-label, .info-value { font-size: 11px !important; }
  .info-value[onclick] { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  /* Drawer inner: cascade node text, exit items, metric values */
  .cascade-node-text, .cascade-type, .cascade-score { font-size: 11px !important; }
  .drawer-exit-item, .drawer-metric-val { font-size: 11px !important; }
  .drawer-metric-val span { font-size: 11px !important; }
  .micro-tag, .micro-text { font-size: 11px !important; }
  /* Tooltip overflow: hide on touch (hover tooltips have no trigger) */
  .cycle-outlook-tooltip { display: none !important; }

  /* Overflow: signout-btn inline width override must not exceed viewport */
  #signout-btn { max-width: 100% !important; box-sizing: border-box !important; }

  /* Bottom sheet — holds reparented #signal-analysis */
  #m-sheet { position: fixed; left: 0; right: 0; bottom: 56px; top: 96px; z-index: 1100;
    background: #0c0a07; border-top: 1px solid var(--border-active);
    border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,0.6);
    display: flex; flex-direction: column; transform: translateY(100dvh);
    transition: transform 0.28s ease; }
  #m-sheet.m-open { transform: translateY(0); }
  .m-sheet-grip { width: 36px; height: 4px; background: var(--border-active);
    border-radius: 2px; margin: 8px auto 4px; flex-shrink: 0; }
  .m-sheet-top { display: flex; align-items: center; justify-content: space-between;
    padding: 2px 14px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .m-sheet-stamp { font-family: var(--font-military); font-size: 11px; letter-spacing: 2px;
    color: var(--text-dim); }
  .m-sheet-x { width: 44px; height: 44px; background: transparent; border: none;
    color: var(--amber-mid); font-size: 18px; }
  .m-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 14px; }
  /* The reparented detail column fills the sheet */
  #m-sheet-body #signal-analysis { display: block !important; width: 100% !important;
    height: auto !important; border: none !important; }
  /* Dimmed feed behind the sheet */
  #m-pages.m-dimmed { filter: brightness(0.5); pointer-events: none; }
  /* Deep-dive action buttons ≥44px (merged: covers .drawer-action-btn + .analysis-action-btn) */
  .drawer-action-btn, .analysis-action-btn { min-height: 44px !important; font-size: 12px !important; }

  .source-read-link { min-height: 44px !important; display: inline-flex !important; align-items: center !important; font-size: 11px !important; }
} /* end portrait phone */


/* ──────────────────────────────────────────────────────────────
   TABLET PORTRAIT + DESKTOP — desktop layout untouched.
   mobile.js only injects #m-* chrome on phones (portrait ≤600px),
   so these rules are belt-and-suspenders against the injected nodes
   ever appearing on a larger viewport.
   ────────────────────────────────────────────────────────────── */
@media (orientation: portrait) and (min-width: 601px) and (max-width: 1024px) {
  #m-header, #m-tabbar, #m-pages, #m-sheet { display: none !important; }
}
@media (min-width: 601px) and (orientation: landscape) and (min-height: 601px), (min-width: 1025px) {
  #m-header, #m-tabbar, #m-pages, #m-sheet { display: none !important; }
}