/* ══ THE SITE ON A PHONE ═══════════════════════════════════════════════════════════════════════
   Under 700px every page wears what the survey wears: a slim pill on top with the mark and the wallet, and a
   bar of five doors at the bottom where the thumb is: Survey · Mint · Story · Collection · Vote. The tabs that
   used to wrap into two rows under the mark are those doors now, so the top of every page is one line tall.
   site-phone.js builds the doors and marks the one you are behind. Nothing here touches a wider screen.
   18 Sep 2026. */
@media (max-width:700px) {
  :root { --ph-sat:env(safe-area-inset-top, 0px); --ph-sab:env(safe-area-inset-bottom, 0px); --ph-bar:calc(84px + var(--ph-sab)); }

  /* ── the pill: the mark and the wallet, nothing else ── */
  .omen-bar { flex-wrap:nowrap !important; width:calc(100% - 20px) !important; margin:10px auto 0 !important; padding:6px 6px 6px 14px !important; gap:10px !important; border-radius:999px !important; }
  .omen-bar .omen-mark { flex:none; }
  .omen-bar .omen-mark img { width:26px !important; height:26px !important; }
  .omen-tabs, .omen-sub, #omen-sub { display:none !important; }
  .omen-chip { margin-left:auto !important; height:38px !important; padding:0 16px !important; font-size:13px !important; }

  /* ── the doors ── */
  #ph-doors { position:fixed; left:10px; right:10px; bottom:calc(10px + var(--ph-sab)); z-index:920; display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; background:#fff; border-radius:22px; box-shadow:0 -8px 30px rgba(28,23,18,.18), 0 12px 34px rgba(28,23,18,.14); padding:6px; }
  #ph-doors a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:54px; border-radius:16px; text-decoration:none; font:600 11px/1 Inter, system-ui, sans-serif; color:#1c1712; }
  #ph-doors a i { font-style:normal; font-size:18px; line-height:1; }
  #ph-doors a.on { background:#1c1712; color:#fff; }
  body.ph-doors { padding-bottom:var(--ph-bar) !important; }

  /* ── the mint and the collection: the rivers run to the bottom edge, the seam stops above the doors ── */
  :root { --bar:66px; }
  .seam { padding-bottom:calc(var(--ph-bar) + 24px) !important; }
  .hint { bottom:calc(var(--ph-bar) + 6px) !important; }
  .seam:has(#tiers) { justify-content:center !important; }

  /* ── the story: its own bottom furniture climbs above the doors ── */
  #ca { top:calc(68px + var(--ph-sat)) !important; bottom:auto !important; left:10px !important; right:10px !important; }
  #counter { bottom:calc(var(--ph-bar) + 16px) !important; left:20px !important; }
  #cap { bottom:calc(var(--ph-bar) + 26px) !important; }

  /* ── the guide: the pill fits, the links are the doors ── */
  .gnav { top:10px !important; left:10px !important; right:10px !important; }
  .gnav .pill { padding:6px 6px 6px 14px !important; }
  .gnav .links { display:none !important; }
  .gnav .mark { font-size:15px !important; gap:8px !important; } .gnav .mark img { width:26px !important; height:26px !important; }
  .sheet p, .sheet li, .sheet td, .sheet code, .sheet small { overflow-wrap:anywhere; }
  .keys { grid-template-columns:1fr !important; gap:6px !important; }
  .keys :nth-child(even) { margin-bottom:4px; }
  .gnav .cta { font-size:13px !important; padding:7px 12px 7px 7px !important; gap:7px !important; white-space:nowrap; } .gnav .cta .ico { width:22px !important; height:22px !important; font-size:11px !important; }

  /* ── the estate ledger: the tools in two columns, the figures too ── */
  .tools { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
  .tools .btn, .tools button { text-align:center; padding:10px 8px !important; font-size:13px !important; }
  .tools [hidden] { display:none !important; }
  .sheet .figures { grid-template-columns:1fr !important; gap:10px !important; }
  .sheet .fig { min-width:0; padding:12px 14px 10px !important; }
  .sheet .fig b { font-size:26px !important; overflow-wrap:anywhere; }
  #addr, .sheet .head { overflow-wrap:anywhere; min-width:0; }
  .sheet:has(> table) { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .sheet > table { min-width:100%; }
}