/* ============================================================================
   PALARID MOBILE — first-class phone experience
   ----------------------------------------------------------------------------
   Loaded last. Everything here is scoped to touch devices or small viewports,
   so desktop is untouched.

   One documented breakpoint scale replaces the ten ad-hoc widths that had
   accumulated (400/420/600/680/700/760/860/900/1024/1100):

     --bp-sm   600px   large phone and below
     --bp-md   860px   small tablet and below   ← the "mobile" cutover
     --bp-lg  1100px   tablet / small laptop

   Existing media queries are left in place; this file simply makes the
   mobile-critical behaviour correct at the two widths that matter (390, 768).
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   1. THE iOS ZOOM TRAP  — the single worst mobile bug in the app
   ──────────────────────────────────────────────────────────────────────────
   Safari on iOS zooms the entire viewport whenever a user focuses an input
   whose computed font-size is below 16px, and does NOT zoom back out. Palarid's
   body type is 14–15px and every field inherits it, so tapping any input in any
   of the 524 tools threw the layout off-screen and forced a pinch to recover.
   16px is the exact threshold — this is not a preference.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  input, select, textarea,
  .panel-pane input, .panel-pane select, .panel-pane textarea {
    font-size: 16px !important;
    line-height: 1.4;
  }
  /* 16px would otherwise make fields look oversized next to 15px body text,
     so tighten the box rather than shrinking the text. */
  .panel-pane input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),
  .panel-pane select,
  .panel-pane textarea {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
}

/* Stop iOS inflating text when the phone is rotated to landscape. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   2. TOUCH TARGETS — WCAG 2.2 AA (2.5.8) is 24px; 44px is the usable figure
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  button, [role="button"], .btn, .tab, .chip, .pill,
  a.btn, input[type="submit"], input[type="button"],
  select, summary, .os-bottom-nav a, .os-bottom-nav button {
    min-height: 44px;
    min-width: 44px;
  }
  /* Inline text links inside prose are exempt from min-width — forcing 44px
     there would break sentence flow. Give them vertical breathing room only. */
  p a, li a, td a { min-width: 0; padding-block: 2px; }

  /* Checkboxes and radios are ~13px natively. Scale the hit area without
     scaling the control itself. */
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px; min-height: 22px;
    transform: scale(1.15);
    transform-origin: left center;
    margin-right: 6px;
  }

  /* Kill the 300ms tap delay and the grey flash. */
  a, button, .tab, .card, [role="button"] {
    -webkit-tap-highlight-color: rgba(139,124,246,.18);
    touch-action: manipulation;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   3. FLOATING CHROME MUST NOT COVER CONTENT
   ──────────────────────────────────────────────────────────────────────────
   Audit finding: the Co-Pilot orb (bottom-right) and the Smart Insight toast
   (bottom-left) sat on top of the first Wealth stat card, task rows and their
   Done buttons — the controls people actually need to reach.

   Fix in two parts: reserve real space at the bottom of the document, and dock
   the insight above the navigation instead of floating it over the page.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root {
    --mob-nav-h: 64px;        /* bottom navigation                       */
    --mob-orb-h: 62px;        /* Co-Pilot orb + its gap                  */
    --mob-safe: env(safe-area-inset-bottom, 0px);
  }

  /* Enough clearance that the last card, and its buttons, clear both the
     navigation bar and the orb. */
  .main {
    padding-bottom: calc(var(--mob-nav-h) + var(--mob-orb-h) + var(--mob-safe) + 16px) !important;
  }

  #cp-orb {
    bottom: calc(var(--mob-nav-h) + var(--mob-safe) + 12px) !important;
    right: 12px !important;
    width: 50px !important;
    height: 50px !important;
    z-index: var(--z-overlay, 300);
  }

  /* Dock the insight full-width above the nav rather than floating it over
     the left edge of the content, where it landed on top of stat cards. */
  #smart-insight, .insight-toast, .smart-chip, #insight-chip {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(var(--mob-nav-h) + var(--mob-safe) + 74px) !important;
    z-index: var(--z-toast, 500);
  }

  /* Toasts must clear the navigation too. */
  .toast, #toast, .toast-wrap {
    bottom: calc(var(--mob-nav-h) + var(--mob-safe) + 12px) !important;
    left: 8px !important; right: 8px !important;
  }

  .os-bottom-nav {
    height: var(--mob-nav-h);
    padding-bottom: var(--mob-safe);
    z-index: var(--z-nav, 200);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. TABLES — scroll the table, never the page
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .scroll-x, .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Right-edge fade so it reads as "there is more this way". */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .scroll-x table, .table-scroll table { min-width: 520px; }
  table.t th, table.t td { white-space: nowrap; padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. DRAWERS, SHEETS AND DIALOGS
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  #cp-drawer {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh;               /* dvh, not vh — accounts for the URL bar */
    padding-bottom: var(--mob-safe);
  }
  .modal, .dialog, .sheet, [role="dialog"] {
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 18px 18px 0 0;
  }
  /* A dialog's close control must be reachable with a thumb, not tucked into
     the far top corner. */
  .modal .close, .dialog .close, [role="dialog"] .close {
    min-width: 44px; min-height: 44px;
    top: 8px; right: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. LEGIBILITY — the audit found 11 text nodes below 12px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .muted, .card-sub, .page-sub, small, .caption, .note, .hint, .d, .delta, .label {
    font-size: max(12.5px, 0.82rem);
    line-height: 1.5;
  }
  h1, .page-title { font-size: clamp(22px, 6vw, 28px); line-height: 1.2; }
  h2 { font-size: clamp(18px, 5vw, 22px); }
  body { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. FORMS AND ACTIONS
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Single column, full-width primary actions — no two-up button rows that
     end up 120px wide each. */
  .btn, .btn--primary, .btn-primary { width: 100%; justify-content: center; }
  .btn-row, .actions, .btn-group { display: flex; flex-direction: column; gap: 10px; }
  /* Except deliberately inline pairs. */
  .btn-inline, .btn-inline .btn { width: auto; }

  /* Destructive actions get separated from the rest on small screens, where
     mis-taps are most likely. */
  .btn-danger, .btn--danger, [data-destructive] { margin-top: 14px; }

  label { display: block; margin-bottom: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. SKIP LINK — was covering the logo when focused
   ══════════════════════════════════════════════════════════════════════════ */
.skip-link, a[href="#main"], a.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-toast, 500);
}
.skip-link:focus, a[href="#main"]:focus, a.skip:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  width: auto;
  padding: 12px 18px;
  background: var(--accent, #8B7CF6);
  color: var(--accent-fg, #0B0B0F);
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   9. CANVASES AND GAMES — must not hijack page scrolling
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  canvas { max-width: 100%; height: auto; touch-action: manipulation; }
  /* Game surfaces DO need to swallow gestures, or dragging to play scrolls
     the page instead. Opt in explicitly rather than globally. */
  canvas[data-game], .game canvas, #snake, #tetris, #pong, #breakout {
    touch-action: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. MOTION AND SCROLL BEHAVIOUR
   ══════════════════════════════════════════════════════════════════════════ */
body { overscroll-behavior-y: contain; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Short viewports (landscape phone): the sticky chrome eats the whole screen. */
@media (max-height: 480px) and (orientation: landscape) {
  .topbar, nav.tabs { position: static !important; }
  .os-bottom-nav { display: none !important; }
  .main { padding-bottom: 24px !important; }
}