/* Mobile design system: one type scale, 44px touch targets and the shared fixes for phones.
   Loaded after styles.css and cards.css, so these rules win over the older per-screen rules. */

:root {
  --m-touch: 44px;        /* smallest tap target */
  --m-fs-page: 20px;      /* page title */
  --m-fs-section: 17px;   /* section title */
  --m-fs-body: 15px;      /* body text */
  --m-fs-label: 14px;     /* form labels and list rows */
  --m-fs-button: 15px;    /* buttons */
  --m-fs-small: 12px;     /* secondary text; nothing smaller than this */
}

/* Inputs are never below 16px: iOS zooms the page when a smaller field gets focus. */
input, select, textarea { font-size: 16px; }

@media (max-width: 719px) {
  /* Type scale: titles and secondary text */
  .page h1, .page h2 { font-size: var(--m-fs-page); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
  .page h3 { font-size: var(--m-fs-section); font-weight: 700; line-height: 1.35; }
  .page small, .auth-hero small, .confirm-sheet small, .install-prompt-modal small { font-size: var(--m-fs-small); }
  .preg-lact-label, .preg-system-tag, .path-step, .sheet-stats span, .ix-mid small, .skin-facts small,
  .goal-streak small, .badge-mini small, .tool-tile { font-size: var(--m-fs-small); }
  .ob-title { font-size: 24px; }
  .auth-hero h1 { font-size: 24px; }
  .topbar-title { font-size: var(--m-fs-page); line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; }

  /* Bold is for titles only: text in lists and cards uses a lighter weight */
  .page b, .page strong, .auth-hero b { font-weight: 600; }

  /* Long names wrap instead of being cut off, so the full text is always visible */
  .q-type { white-space: normal; overflow: visible; text-overflow: clip; }
  .chip { max-width: 100%; white-space: normal; text-align: start; line-height: 1.3; }
  .lib-stat { min-width: 0; }
  .lib-stat span, .lib-stat small { overflow-wrap: anywhere; min-width: 0; }

  /* Touch targets: every tappable control is at least 44px high (icon buttons also 44px wide) */
  button:is(.btn, .btn-sm, .pill-btn, .chip, .chip-tab, .pick-btn, .demo-tab, .lang-toggle, .stat-pill,
    .icon-btn, .eye-btn, .install-close, .choice-item, .lp-install),
  a:is(.btn, .btn-sm, .pill-btn, .chip, .chip-tab, .pick-btn, .see-all, .lp-install) {
    min-height: var(--m-touch);
  }
  button:is(.icon-btn, .eye-btn, .install-close) { min-width: var(--m-touch); }
  a.see-all { display: inline-flex; align-items: center; min-height: var(--m-touch); }
  .lp-hero-demo .demo-tab { min-height: var(--m-touch); }
  .auth-card a { display: inline-flex; align-items: center; min-height: var(--m-touch); }

  /* Chip tabs are always tappable, whether they are buttons or labels around a checkbox */
  .chip-tab { min-height: var(--m-touch) !important; }
  a.icon-btn, a.stat-pill { min-height: var(--m-touch); }
  a.icon-btn { min-width: var(--m-touch); }
  .land-hero h1, .lp-hero h1 { font-size: 26px; }
  .lp-brand, .ob-body a, .auth-page small, .auth-card small { min-height: var(--m-touch); }
  .ob-body a, .auth-page small, .auth-card small { display: inline-flex; align-items: center; font-size: var(--m-fs-small); }
  .install-prompt-modal small, .install-prompt-modal span { font-size: var(--m-fs-small); }

  /* Form controls: 16px so iOS does not zoom, and nothing overrides that */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }

  /* Auth hero: the mascot overlaps the box on purpose, so it must not be cut off */
  .auth-hero.swoosh { overflow: visible; }

  /* Subject cards grow with their text */
  .subject-card { height: auto; }

  /* Bold for titles only: headings inside the tools and the IV and pregnancy screens use a lighter weight */
  .page h4, .iv-row b, .iv-group b, .iv-sub, .iv-step h4, .preg-rule h1, .preg-badge, .prog-dot { font-weight: 700; }

  /* Numbers and initials stay inside the scale; list names wrap instead of being cut */
  .goal-row .goal-streak small { font-size: var(--m-fs-small); }
  .lib-stat b, .podium-step { font-size: var(--m-fs-page); }
  .avatar { font-size: var(--m-fs-page); }
  .flip-generic, .flip-front b { font-size: var(--m-fs-page); }
  .dose-large { font-size: 24px; }
  .page li > b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .fda-badge, .stage-n, .podium-step { font-weight: 700; }

  .install-bar-close { width: var(--m-touch); height: var(--m-touch); }

  /* Leaderboard names and pregnancy labels wrap instead of being cut or squeezed */
  .podium-col b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .fda-badge { flex-shrink: 0; max-width: 100%; text-align: center; line-height: 1.3; }
  .preg-system-tag { border-radius: 12px; line-height: 1.4; padding: 4px 10px; text-align: start; }
  .profile-id .avatar { font-size: var(--m-fs-page); }

  /* Switch: the track stays 30px high, the tappable area is 44px */
  .switch { height: var(--m-touch); padding-block: 7px; background-clip: content-box; }
  .switch span { top: 10px; }

  /* Landing page: the brand and section titles fit the same scale */
  .lp-brand { font-size: 18px; }
  .lp-section-title, .lp-band h2, .land-band h2 { font-size: var(--m-fs-page); }
  .lp-stats b { font-size: var(--m-fs-page); }

  /* Auth hero grows with its text instead of cutting it */
  .auth-hero { height: auto; min-height: 0; }

  /* Choice sheet: the list scrolls and the close button always stays inside the screen */
  .choice-sheet { max-height: 80vh; max-height: 80dvh; overflow: hidden; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .choice-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .choice-sheet > .btn { flex-shrink: 0; }
  .confirm-sheet.choice-sheet { max-height: 80vh; max-height: 80dvh; }

  /* Long confirmation sheets scroll on short screens */
  .confirm-sheet { max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
}

/* Short phones (568px high): the onboarding illustration gives up height so the text and buttons fit */
@media (max-width: 719px) and (max-height: 700px) {
  .ob-visual { min-height: 180px; padding-top: 56px; padding-bottom: 12px; }
  .ob-art { zoom: .58; }
  .ob-body { gap: 8px; padding-top: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* Very narrow phones (320px): the long pregnancy category label may wrap */
@media (max-width: 340px) {
  .fda-badge { flex-shrink: 1; min-width: 0; }
}

/* Native edges on phones: the status-bar area and the home-indicator area are white, whatever page is
   behind them, and the bottom navigation is a full-width bar that sits on the bottom edge (no floating
   capsule with a cream gap below it). */
@media (max-width: 1099px) {
  html, body { background: #ffffff; }
  body::before, body::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    pointer-events: none;
  }
  body::before { top: 0; height: env(safe-area-inset-top, 0px); }
  body::after { bottom: 0; height: env(safe-area-inset-bottom, 0px); }
  .bottom-nav {
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
    background: #ffffff;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
}