/* ============================================================
   mobile.css — phone layer. Loaded LAST.

   DELIBERATELY MINIMAL. It fixes one thing: the vertical rhythm
   is built for desktop (40px above every heading, 40px between
   sections, 24px card padding). On a phone that wastes most of
   the screen and reads as a desktop site squeezed small.

   It changes spacing only. It does NOT touch fonts, colours,
   grids, layout structure, or anything else — so it cannot make
   the app bigger or break the design.
   ============================================================ */

/* Never let anything force sideways scrolling. */
/* overflow-x:hidden on BODY silently forces overflow-y to `auto` (CSS spec),
   turning body into a second scroll container and breaking mobile touch-scroll.
   Keep horizontal clipping on html only; body must stay overflow:visible. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; }
img, svg, video, canvas, iframe, table { max-width: 100%; }
.stat, .item, .note, .small, .chip { overflow-wrap: anywhere; min-width: 0; }

@media (max-width: 768px) {

  /* 40px above each heading -> 16px. This is the single biggest win. */
  h2 { margin-top: var(--s4); margin-bottom: var(--s2); }
  section > h2:first-child { margin-top: 0; }

  /* 40px between sections -> 20px */
  section { margin-bottom: var(--s5); }

  /* 24px card padding -> 16px */
  .card { padding: var(--s4); }

  /* the page gutters: 24px -> 16px, and keep clear of the nav bar */
  main {
    padding-left: var(--s4);
    padding-right: var(--s4);
    max-width: 100%;
  }

  /* list rows a little tighter so more fits per screen */
  .stat, .item { padding-top: 10px; padding-bottom: 10px; }
}

/* Small phones: one more small step down. */
@media (max-width: 400px) {
  main { padding-left: var(--s3); padding-right: var(--s3); }
  .card { padding: var(--s3); }
}

/* ============================================================
   Zoom button (header) + exit confirmation dialog.
   Added by uiextra.js.
   ============================================================ */
.iconbtn.zoombtn{
  width:auto; min-width:44px; padding:0 9px;
  font-family:var(--font-mono,ui-monospace,monospace);
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--text-secondary);
  white-space:nowrap;
}
.iconbtn.zoombtn:hover{ color:var(--gold); }

#exitAsk{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding:24px;
  background:rgba(0,0,0,.66);
  animation:exitFade .18s ease both;
}
@keyframes exitFade{ from{opacity:0} to{opacity:1} }

#exitAsk .exit-card{
  width:100%; max-width:340px;
  background:var(--bg-surface,#18181B);
  border:1px solid var(--border-strong,rgba(255,255,255,.24));
  border-radius:var(--r-lg,18px);
  padding:20px 18px 16px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  text-align:center;
  animation:exitRise .2s cubic-bezier(.2,0,0,1) both;
}
@keyframes exitRise{ from{transform:translateY(10px);opacity:.6} to{transform:none;opacity:1} }

#exitAsk .exit-title{
  display:block; font-size:17px; color:var(--text-primary,#FAFAFA);
  margin-bottom:6px;
}
#exitAsk .exit-msg{
  font-size:13px; color:var(--text-secondary,#B8B8C2);
  line-height:1.5; margin-bottom:16px;
}
#exitAsk .exit-row{ display:flex; gap:10px; }
#exitAsk .exit-row button{ flex:1; min-height:46px; }

/* ============================================================
   FINALIZATION PASS — Play Store build
   ============================================================ */
@media (max-width: 768px) {

  /* Inputs & selects: 16px is the Android/iOS threshold below
     which the browser force-zooms the page when the keyboard
     opens. This kills that jump on every search box and form. */
  select, textarea,
  input[type="text"], input[type="email"], input[type="number"],
  input[type="password"], input[type="date"], input[type="search"],
  input[type="tel"] {
    font-size: max(13px, calc(16px * var(--zoom-k)));
    min-height: max(40px, calc(48px * var(--zoom-k)));
  }

  /* Comfortable thumb targets for the header controls
     (zoom + theme) — Android guideline is 44px minimum. */
  .iconbtn { width: max(36px, calc(44px * var(--zoom-k))); height: max(36px, calc(44px * var(--zoom-k))); }

  /* Buttons never below the touch minimum, even "mini" ones. */
  button.mini, .ghost.mini { min-height: 40px; }

  /* The floating panel that is 320px wide on desktop must never
     exceed the phone screen. */
  .account-menu { width: auto; max-width: calc(100vw - 24px); left: var(--s3); right: var(--s3); }
}

/* Zoom modes on narrow phones: the display/mega numbers grow to
   58/78px under A++, which can clip a 360px screen. Scale just
   those two steps back down at small widths — body text keeps
   its enlarged size, which is what the zoom is for. */
@media (max-width: 420px) {
  :root[data-zoom="lg"] { --fs-display: 44px; --fs-mega: 56px; }
  :root[data-zoom="xl"] { --fs-display: 48px; --fs-mega: 60px; }
  :root[data-zoom="lg"] h2, :root[data-zoom="xl"] h2 { overflow-wrap: anywhere; }
}

/* ============================================================
   FORCE APP SCALE — render to the app's own design regardless of
   the phone's system Font Size / Display Size accessibility
   settings. Old users with huge system fonts will no longer blow
   up the layout; every device gets the same intended proportions.
   ============================================================ */

/* 1. Hard-lock against the OS text auto-scaling. */
html{
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  /* root font-size is controlled by the in-app Zoom slider (see ux.js) */
}

/* 2. All our sizing tokens are px already, but pin the fluid base so
   nothing downstream can inherit an OS-scaled value. */
body{ font-size: var(--fs-body); }

/* 3. Ensure content area is at least a full screen tall so the background
   reaches the nav bar on short tabs. NOTE: do NOT use display:flex on main
   here — combined with a fixed header/nav it can prevent overflow scrolling
   on Android WebView. Plain block layout scrolls reliably. */
main{
  min-height: calc(100dvh - var(--header-h) - var(--nav-h));
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px);
}

/* 4. Header stays one clean row on every device (fixed, not vw). */
@media (max-width: 768px){
  header{ height:auto; min-height:var(--header-h);
          padding-top:calc(var(--s3) + env(safe-area-inset-top)); }
  header .brand h1{ font-size:clamp(15px, 4.6vw, 20px) !important; line-height:1.1; }
  header .brand em{ font-size:clamp(8px, 2.4vw, 11px) !important; letter-spacing:.28em; }
  header .brand img{ width:clamp(32px, 9vw, 42px) !important; height:clamp(32px, 9vw, 42px) !important; }
  .plan-badge{ font-size:calc(10px * var(--zoom-k)) !important; padding:calc(3px * var(--zoom-k)) calc(7px * var(--zoom-k)) !important;
               max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  header .head-actions{ gap:8px; }
}
@media (max-width:370px){ .plan-badge{ display:none !important; } }

/* ============================================================
   FIT MODES — must live here (mobile.css loads LAST) so they win
   over the generic `main` width rules above.
   ============================================================ */
body[data-fit="tall"] main{ max-width:520px !important; margin-inline:auto !important; }
body[data-fit="wide"] main{ max-width:100% !important; margin-inline:0 !important; }
/* Full = edge-to-edge, minimal side padding (best for landscape / wide screens) */
body[data-fit="full"] main{
  max-width:100% !important; margin-inline:0 !important;
  padding-left:6px !important; padding-right:6px !important;
}

/* Landscape toggle — when active, use wider layout & tighter vertical rhythm */
body.force-landscape main{ max-width:100% !important; }
@media (orientation: landscape){
  main{ max-width:900px; }
}