/* Mobile responsive layer for the Pendulum FX dashboard -- added 2026-08-12.
   Design reference: conversations/ "Mobile UI.zip" (Dashboard Mobile.dc.html),
   a high-fidelity design mockup -- not ported 1:1 (see code-23.md for what
   differs and why: flatten keeps its real TOTP step-up instead of a generic
   confirm sheet, pair mode-changes keep the existing browser confirm()
   rather than a bespoke sheet, tabs are real routes not client-side state).
   Every color/spacing/radius token below is inherited from nocturne.css --
   this file adds no new palette, only layout. */

.mobile-only { display: none; }
/* Always hidden outside the mobile breakpoint, regardless of the .open
   toggle -- the button that calls pfxOpenControls() is itself .mobile-only,
   so this can't be reached at desktop widths, but the div shouldn't fall
   back to browser-default `display:block` static flow if it somehow were. */
.sheet-scrim, .tab-bar { display: none; }

@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
  .mobile-only.flex-row { display: flex; }
  .mobile-only.grid-row { display: grid; }
  .mobile-only.inline-row { display: inline-flex; }

  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* ---- header: top nav replaced by the bottom tab bar, dual pause/flatten
     buttons replaced by one button opening the controls sheet ---- */
  .app-header-inner { padding: 0 14px; gap: 8px; height: 50px; }
  .app-brand { font-size: 15px; margin-right: 0; }
  .app-brand svg { width: 22px; height: 22px; }
  .app-nav { display: none; }
  .app-page { padding: 14px; }
  .paused-strip { padding: 6px 14px; font-size: 11px; }

  /* ---- bottom tab bar -- real <a> links, not JS state, so back/deep-link
     behave normally (see the design doc's own stated preference) ---- */
  .tab-bar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--color-surface);
    box-shadow: 0 -1px 0 var(--color-divider);
    padding: 6px 6px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .tab-bar a {
    flex: 1; min-height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    text-decoration: none; color: var(--color-neutral-500);
  }
  .tab-bar a.active { color: var(--color-accent); }
  .tab-bar span { font-size: 10px; letter-spacing: 0.02em; font-family: var(--font-heading); }

  /* ---- bottom sheets ---- */
  .sheet-scrim {
    display: none; position: fixed; inset: 0; z-index: 45;
    background: rgba(0,0,0,.6);
    align-items: flex-end; justify-content: center;
  }
  .sheet-scrim.open { display: flex; animation: pf-fade .18s ease; }
  .sheet {
    width: 100%; background: var(--color-bg);
    border-radius: 14px 14px 0 0; box-shadow: var(--shadow-lg);
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
    animation: mob-sheet .22s cubic-bezier(.32,.72,0,1);
  }
  @keyframes mob-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .sheet-scrim.open { animation: none; } }
  .sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: var(--color-neutral-700); margin: 0 auto 14px; }
  .sheet-title { font: 500 17px var(--font-heading); }
  .sheet-body { font-size: 12px; color: var(--color-neutral-400); margin: 4px 0 14px; }
  .sheet-footer {
    display: flex; gap: 8px; margin-top: 14px; padding-top: 12px;
    box-shadow: inset 0 1px 0 var(--color-divider); font-size: 11px; color: var(--color-neutral-400);
  }

  /* ---- touch targets (nothing under 34px, buttons that carry consequence
     larger -- per the design doc's own table) ---- */
  .btn { min-height: 40px; }
  .seg-opt { min-height: 38px; }

  /* ---- mobile card rows: shared shape for every table -> card conversion.
     Same inset-bottom-divider pattern the mockup uses throughout. ---- */
  .mrow { padding: 10px 0 9px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--color-text) 8%, transparent); }
  .mrow:last-child { box-shadow: none; }
  .mcard-list { display: flex; flex-direction: column; gap: 8px; }

  /* ---- grid collapses -- opt-in per container via this class alongside the
     existing inline grid-template-columns (needs !important to win over the
     inline style at this breakpoint). ---- */
  .mstack { grid-template-columns: 1fr !important; }
  .mstack-2 { grid-template-columns: 1fr 1fr !important; }

  /* ---- trading.html: pair-card Stop/Demo/Live segment, full width ---- */
  .pair-mode-seg { display: flex !important; width: 100%; }
  .pair-mode-seg .pms-form { flex: 1; }
  .pair-mode-seg .pms-form button { width: 100%; min-height: 38px; font-size: 12px !important; }

  /* ---- System pages (Health/Alerts/Settings) sub-nav -- real links between
     3 separate routes, matching the design doc's explicit preference for
     real routes over client-side tabs. ---- */
  .sys-subnav { display: flex; border: 1px solid var(--color-divider); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
  .sys-subnav a {
    flex: 1; min-height: 38px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; text-decoration: none; color: var(--color-neutral-400);
    border-left: 1px solid var(--color-divider);
  }
  .sys-subnav a:first-child { border-left: 0; }
  .sys-subnav a.active { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

  /* ---- alert-rule toggle: enlarged to the 44x26px pill the design doc
     specifies (desktop's small on/off button is under the touch-target
     floor) ---- */
  .malert-toggle {
    flex: none; width: 44px; height: 26px; border-radius: 13px; padding: 0;
    cursor: pointer; position: relative; border: 1px solid var(--color-divider);
    background: transparent;
  }
  .malert-toggle.on { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 45%, transparent); }
  .malert-toggle .knob {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: rgba(233,233,237,.5); transition: left .14s ease;
  }
  .malert-toggle.on .knob { left: 21px; background: var(--color-accent-100); }

  /* ---- login/2FA (login.html) -- per the design doc's own note: mark and
     wordmark stack above the form, the vertical divider drops, the form
     goes full width. The 6 TOTP boxes (48x54px, 8px gaps = 328px) already
     fit a 375px row unchanged -- no size change needed there. ---- */
  .login-shell { padding: 24px 14px; align-items: flex-start; }
  .login-row { flex-direction: column; gap: 28px; transform: none; width: 100%; max-width: 360px; }
  .login-left { align-items: center; text-align: center; }
  .login-logo { width: 96px; height: 96px; }
  .login-divider { display: none; }
  .login-right { width: 100%; }
  .code-inputs { flex-wrap: wrap; }
}