/* Phone layer for every MIRA platform (≤ 640 px). Loaded after each platform's own CSS; paired with shared/mobile.js,
   which tags the elements below. Desktop and tablet are untouched. */
@media (max-width: 640px) {
  /* tables → one compact card per row: first cell is the card title, the rest sit two per line (label above value) */
  table.mob-cards, table.mob-cards tbody, table.mob-cards tr, table.mob-cards td { display: block; width: 100%; }
  table.mob-cards { border-collapse: separate; border-spacing: 0; min-width: 0 !important; }
  table.mob-cards thead { display: none; }
  table.mob-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin: 0 0 10px; padding: 10px 14px 8px; border: 1px solid rgba(16, 24, 40, 0.1); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
  table.mob-cards td { display: block; min-width: 0; padding: 6px 0 !important; border: 0 !important; white-space: normal !important; text-align: left !important; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
  table.mob-cards td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-weight: 500; font-size: 11.5px; line-height: 1.2; opacity: 0.6; overflow-wrap: normal; }
  table.mob-cards td[data-label=""]::before, table.mob-cards td:first-child::before { content: none; }
  table.mob-cards td:first-child { grid-column: 1 / -1; font-weight: 650; font-size: 15px; padding: 2px 0 8px !important; margin-bottom: 2px; border-bottom: 1px solid rgba(16, 24, 40, 0.08) !important; }
  table.mob-cards td { box-shadow: none !important; }
  table.mob-cards tr.hot, table.mob-cards tr[class*="sev-r"], table.mob-cards tr.crit { border-left: 3px solid #d92d20; }
  table.mob-cards td.mob-wide { grid-column: 1 / -1; }
  table.mob-cards td:empty, table.mob-cards td.mob-nil { display: none; }
  table.mob-cards tr:hover { background: rgba(255, 255, 255, 0.04); }
  .tbl-wrap:has(> table.mob-cards) { overflow: visible; margin: 0; padding: 0; }
  /* long lists (max-height wraps) stay a scrollable box: before, 100s of cards spilled out over the sections below them */
  .tbl-wrap.tall:has(> table.mob-cards) { overflow-x: hidden; overflow-y: auto; max-height: 72svh; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: 14px; }

  /* tables too wide for cards (10+ columns) scroll sideways with the key column pinned (mobile.js tags it) */
  table .mob-k, table .mob-k0 { position: sticky; z-index: 2; background: #fbfbfd; }
  table .mob-k0 { left: 0; }
  table .mob-k { left: 0; box-shadow: 1px 0 0 rgba(16, 24, 40, 0.1); }

  /* wide diagrams keep a readable size and pan sideways instead of shrinking to unreadable text */
  .mob-pan { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; }
  .mob-pan > svg { max-width: none !important; height: auto; }
  .mob-hint { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font: 500 12px/1.2 inherit; opacity: 0.6; }
  .mob-hint::before { content: "↔"; font-size: 14px; }

  /* "Compare" grids (inline repeat(n, 1fr)) → swipeable cards, one item per screen */
  .cmp { display: flex !important; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .cmp > * { flex: 0 0 86%; scroll-snap-align: start; min-width: 0; }

  /* finger-sized targets: taller sector chips; invisible larger hit areas for toggles and link tags */
  .sector-bar a, .sector-bar button, #sectorBar .sec { min-height: 40px; display: inline-flex; align-items: center; }
  .toggle, a.tag, button.lvl, .bld-tag, .recon-row { position: relative; }
  .toggle::after, a.tag::after, button.lvl::after, .bld-tag::after { content: ""; position: absolute; inset: -11px -6px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .recon-row { min-height: 44px; }

  /* live status strip: wrap instead of running off the right edge */
  .ticker { flex-wrap: wrap; gap: 2px 14px; white-space: normal; }
  .ticker span { white-space: nowrap; }

  /* banners (Grid on / Grid outage …): icon + text on one line, the action button drops below instead of squeezing the text */
  .banner { flex-wrap: wrap; align-items: flex-start; row-gap: 10px; }
  .banner > div { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .banner > .btn, .banner > a.btn, .banner > button { margin-left: 48px; width: auto; flex: 0 0 auto; max-width: calc(100% - 48px); }

  /* iOS Safari zooms the page when a field under 16 px takes focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select { font-size: 16px !important; }

  /* menu / MIRA chat open: page behind does not scroll; chat sits above the keyboard */
  html.mob-lock, html.mob-lock body { overflow: hidden; overscroll-behavior: none; }
  .mira, aside.mira#mira { max-height: calc(100dvh - 16px - var(--kb, 0px)); }
  .mira.open, aside.mira#mira.open { bottom: calc(8px + var(--kb, 0px)); }
  .mira .ask, .mira .ask-box { scroll-margin-bottom: 12px; }

  /* frame budget: no full-view blur on route change, no rolling-digit animation on every live tick, lighter glass on overlays */
  body.g-glass #view.r-out { filter: none; }
  body.g-glass .r-d > i, body.g-glass .r-d::before { animation: none; }
  body.g-glass .r-d::before { display: none; }
  body.g-glass .modal-bg, body.g-glass .modal, body.g-glass .modal.panel, body.g-glass .toast, body.g-glass .lang-menu, body.g-glass aside.mira#mira, body.g-glass .top, body.g-glass .scenes { -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.g-glass .modal, body.g-glass .modal.panel, body.g-glass aside.mira#mira, body.g-glass .toast, body.g-glass .lang-menu { background: #fdfdfe; }
  body.g-glass .top, body.g-glass .scenes { background: rgba(255, 255, 255, 0.985); }

  /* KPI labels wrap instead of being cut mid-word */
  .kpi .lbl { white-space: normal; overflow: visible; text-overflow: clip; }

  /* dialogs: title and close button share the first row; the body scrolls, never the page behind */
  .modal .ph, .modal .mh { flex-wrap: nowrap; align-items: flex-start; }
  .modal .ph h3, .modal .mh h3 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .modal .ph .icon-btn, .modal .mh .icon-btn { flex: none; margin-left: auto; }
  .modal { max-height: calc(100dvh - 24px); }

  /* nothing under 12 px on a phone (platform sheets set 9.5–11 px on small print, tags, counts, units) */
  small, .tag, .cnt, .nav-g, .mgh, .flag, .mbadge, .biz, u, time, kbd, .badge-demo, .side-label { font-size: 12px !important; }

  /* small text floor for meta lines that went below a comfortable reading size */
  .note, .sub, .meta, .hint, small { font-size: max(12px, 1em); }
}

/* Phones held sideways (844 × 390 and similar): the floating desktop-style top bar ate a fifth of the screen and the 4-up KPI
   grid was shown at tablet size. Same compact header as the portrait phone layer, no search/date chips. */
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  body.g-glass { --gi: 0px; --top: 48px; --top-h: 48px; }
  body.g-glass .top { height: 48px; min-height: 0; margin-top: 0; top: 0; border-radius: 0; border-width: 0 0 1px; padding: 0 12px; gap: 8px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.g-glass .top .search, body.g-glass .top .site-chip, body.g-glass .top .top-mid > .chip, body.g-glass .top .crumbs small { display: none; }
  body.g-glass .shell { margin-left: 0; padding-right: 0; }
  body.g-glass .view { padding: 10px 14px 40px; }
  .g-glass .sector-bar { padding-top: 6px; }
  .ticker { flex-wrap: wrap; gap: 2px 14px; white-space: normal; }
  .ticker span { white-space: nowrap; }
}