/* ════════════════════════════════════════════════════════════════════════
   h0SINT — shared mobile / small-screen responsive layer  (I3, 2026-06-21)

   Loaded app-wide (injected via _command_palette.html, present on the core
   pages; linked directly on 3D/standalone pages). EVERYTHING here is scoped
   inside a max-width media query so desktop rendering is byte-for-byte
   unchanged. Targets the conventions that repeat across the (independently
   styled) page bodies: .container, header/.nav-links, data tables, forms,
   buttons, and wide media. Conservative use of !important only where page
   inline-styles would otherwise win.
   ════════════════════════════════════════════════════════════════════════ */

/* Stop iOS/Android from auto-inflating body text in landscape, and keep wide
   media inside the viewport on every screen size. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas, pre, code, iframe { max-width: 100%; }

/* ── Tablet / large phone ─────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Tighter page gutters reclaim horizontal space. */
  .container { padding: 12px !important; }

  /* Header: let the brand + actions breathe, turn the nav into a single
     horizontally-scrollable strip instead of a tall wrapping stack. */
  header { padding: 10px 12px !important; }
  .header-content { gap: 8px !important; }
  .nav-links {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }

  /* Data tables: the #1 mobile overflow source. Make each table its own
     horizontally-scrollable block (classic responsive-table technique).
     Scoped to the breakpoint so desktop tables are untouched. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  thead, tbody, tr { width: 100%; }
  th, td { white-space: nowrap; }

  /* Forms: 16px is the threshold below which iOS Safari zooms the page on
     focus — pin text inputs to 16px to kill the jarring zoom-in. */
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Touch targets — WCAG 2.5.5 leans on ~44px; 40 is a pragmatic floor that
     doesn't blow up dense toolbars. Excludes tiny inline chips/badges. */
  button,
  .btn, .button,
  a.btn, a.button,
  input[type="button"], input[type="submit"], input[type="reset"] {
    min-height: 40px;
  }

  /* Common multi-column grid names collapse to a single column. */
  .grid, .grid-2, .grid-3, .grid-4,
  .cards, .card-grid, .cards-grid,
  .stats, .stats-grid, .stat-grid,
  .kpi-grid, .metrics-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modal/dialog shells that hard-code a desktop width. */
  .modal, .modal-content, .dialog, .modal-box {
    max-width: 96vw !important;
  }
}

/* ── Small phone ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  .container { padding: 10px !important; }

  /* Logo + page titles scale down a notch so headers don't crowd. */
  .logo { font-size: 1.05rem !important; }
  h1 { font-size: 1.35rem !important; }
  h2 { font-size: 1.15rem !important; }

  /* Drag the page-pinned floating controls (settings FAB, AI-activity badge,
     notifications FAB) to safe-area-aware positions so they don't overlap
     each other or sit under the home indicator. */
  #gs-fab { bottom: 14px !important; right: 14px !important; }
  #fmn-fab { bottom: 14px !important; right: 64px !important; }
  #ai-act-badge {
    max-width: calc(100vw - 28px) !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Card padding trim. */
  .card { padding: 12px !important; }
}