/* rxos-mobile.css — additive responsive overlay for all RX-OS pages.
   Loaded LAST so its rules override desktop defaults.
   Three tiers:
     >=1100  desktop (default styling — no overrides)
     <=900   tablet — collapse rail, stack header chrome
     <=600   phone — inspector becomes bottom sheet, tables become cards
*/

/* ─── Touch-friendly always ─── */
@media (hover: none) {
  .ac, .chip, .picker, .rail-item, .veh-table tbody tr,
  .ch-tab, .vc-btn, .um-action, .btn-ghost, .m-btn {
    min-height: 44px;
  }
}

/* ═══════════ ≤900px : tablet ═══════════ */
@media (max-width: 900px) {
  /* Collapse / hide non-essentials */
  .panel.rail { display: none !important; }
  .telemetry-strip, .stat[data-stat], #rxos-conn-pill { display: none !important; }
  .stage .pins-layer .pin .plate { font-size: 9px !important; }

  /* Header collapses — only brand + menu visible */
  .appbar .screen-nav { display: none !important; }
  .appbar .right .stat { display: none !important; }
  .appbar .brand .path { display: none !important; }

  /* Inspector card narrower */
  .inspector { width: 92vw !important; max-width: 540px !important; }
  .inspector .ins-stats { grid-template-columns: 1fr 1fr !important; }
  .inspector .ins-actions { grid-template-columns: repeat(5, 1fr) !important; }
  .inspector .ins-actions .ac { padding: 12px 4px !important; font-size: 10px !important; }

  /* Track / Cinema: hide side cards, keep core HUD */
  .hud-side, .hud-pip { display: none !important; }
  .hud-film { padding: 14px !important; max-width: 80vw !important; }

  /* Replay: stack video + map vertically */
  .replay-main { grid-template-columns: 1fr !important; }
  .video-panel { border-right: 0 !important; border-bottom: 1px solid var(--panel-border) !important; }
  .timeline-panel { grid-template-rows: auto !important; }
  .chapters { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .chapters .chap { flex: 0 0 auto !important; min-width: 140px !important; }

  /* Reports + Settings tables — let columns shrink */
  .veh-table, .tbl { font-size: 11px !important; }
  .veh-table th, .veh-table td, .tbl th, .tbl td { padding: 8px 6px !important; }

  /* Modals fill more of screen */
  #modal-backdrop .modal { width: 92vw !important; max-width: 720px !important; }

  /* Clock footer hides — clutter on small screens */
  #rxos-clock-foot { display: none !important; }

  /* Event tape collapsible: shrink to one line */
  #event-tape { font-size: 10px !important; padding: 6px 10px !important; max-height: 28px !important; overflow: hidden !important; }
}

/* ═══════════ ≤600px : phone ═══════════ */
@media (max-width: 600px) {
  /* Brand collapses to mark only */
  .appbar .brand strong + span,
  .appbar .brand .sep { display: none !important; }

  /* Inspector becomes a bottom sheet */
  .inspector {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important;
    top: auto !important;
    width: 100vw !important; max-width: 100vw !important;
    border-radius: 12px 12px 0 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6) !important;
  }
  .inspector .ins-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .inspector .ins-actions { grid-template-columns: repeat(5, 1fr) !important; }
  .inspector .ins-spark-wrap { display: none !important; }
  .inspector .evidence .chain { flex-wrap: wrap !important; gap: 4px !important; }
  .inspector .evidence .chain .link { display: none !important; }

  /* Vehicle tables become cards (each row stacks) */
  .veh-table thead, .tbl thead { display: none !important; }
  .veh-table tbody tr,
  .tbl tbody tr {
    display: block !important;
    border: 1px solid var(--panel-border) !important;
    border-radius: 6px !important;
    margin: 8px 12px !important;
    padding: 10px !important;
    background: var(--bg-sunk) !important;
  }
  .veh-table tbody td,
  .tbl tbody td {
    display: flex !important;
    justify-content: space-between !important;
    border: 0 !important;
    padding: 6px 0 !important;
    font-size: 11px !important;
  }
  .veh-table tbody td::before,
  .tbl tbody td::before {
    content: attr(data-label);
    color: var(--fg-3);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-right: 12px;
    align-self: center;
  }
  /* checkbox + edit button cells back to inline */
  .veh-table tbody td:nth-child(-n+2) {
    display: inline-block !important;
    width: auto !important;
    margin-right: 8px !important;
  }
  .veh-table tbody td:nth-child(-n+2)::before { display: none !important; }

  /* Section nav on Settings: top scroll-strip instead of side */
  .section-nav {
    position: static !important;
    width: 100% !important;
    height: 50px !important;
    display: flex !important;
    overflow-x: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--panel-border) !important;
  }
  .section-nav a {
    flex: 0 0 auto !important;
    padding: 12px 18px !important;
    border-bottom: 0 !important;
    border-right: 1px solid var(--panel-border) !important;
  }
  .settings-content { margin-left: 0 !important; padding-top: 8px !important; }

  /* Replay video controls wrap */
  .video-controls { flex-wrap: wrap !important; gap: 4px !important; padding: 8px !important; }
  .vc-speed { display: none !important; }

  /* Track page HUD becomes top corner only */
  .hud-film { max-width: 92vw !important; font-size: 11px !important; }
  .hud-film .title { font-size: 32px !important; }
  .hud-bottom { padding: 10px !important; }
  .telemetry, .ticker { font-size: 10px !important; }

  /* Hide letterbox bars on phone */
  .letterbox { display: none !important; }
}

/* ═══════════ rotation-aware ═══════════ */
@media (max-width: 900px) and (orientation: portrait) {
  /* Live page in portrait — map gets shorter so inspector has room */
  .stage { min-height: 60vh; }
}