/* Mobile base, shared by every mobile option (iPhone widths, ≤ 640px).
   Option stylesheets (a-cards.css, b-sheet.css, c-finder.css) build on this. */

@media (min-width: 641px) {
  .m-only { display: none !important; }
}

@media (max-width: 640px) {
  :root { --fs-xl: 32px; --bar-h: 56px; }
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  /* 16px stops iOS Safari zooming into form fields. */
  input[type='search'], select { font-size: 16px !important; }
  input[type='checkbox'], input[type='radio'] { width: 20px; height: 20px; }

  /* Header: brand + actions on one row; search wraps below. */
  .topbar { position: relative; height: auto; min-height: var(--bar-h); flex-wrap: wrap; gap: 10px 12px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; }
  .brand { width: auto; font-size: var(--fs-m); }
  .topbar-actions { gap: 6px; }
  .tb-btn { height: 40px; }
  .tb-icon { width: 40px; padding: 0; justify-content: center; }
  .lights-label { display: none; }
  .search { order: 3; flex: 1 1 100%; }
  .search input { height: 44px; }
  .search kbd { display: none; }
  .topbar-back { order: 3; flex: 1 1 100%; padding-block: 2px; }

  /* Single column: no rails. */
  .app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rail { display: none; }
  .main { padding: 16px 16px 0; }
  .main-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
  .main-head h1 { font-size: var(--fs-l); }
  .note { margin-top: 16px; }
  .foot { margin-top: 32px; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

  /* Method details, wherever they appear */
  .main-detail { padding: 20px 16px 0; }
  .detail h1 { font-size: var(--fs-l); }
  .main-detail .detail h1 { font-size: var(--fs-xl); }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-child(n + 3) { border-bottom: 0; }
  .pc { grid-template-columns: 1fr; gap: 24px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .similar { grid-template-columns: 1fr; }
  .pill-btn { height: 44px; }
  .drawer-body { padding: 20px 16px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .icon-btn { width: 40px; height: 40px; }

  /* Compare sheet and page */
  .sheet { inset: 0; z-index: 80; }
  .sheet-head { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; }
  .sheet-body { padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  .compare-page { padding: 16px 16px 0; }
  .compare-page-head h1 { font-size: var(--fs-l); }

  .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 32px); text-align: center; }

  /* Compare-number badge used by the mobile compare layouts */
  .num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid var(--lamp-line); color: var(--lamp); font: 700 var(--fs-small)/1 var(--body); }
}