/* ══ THE FIELD ON A PHONE ═══════════════════════════════════════════════════════════════════════
   One thing per screen. The map alone, a slim pill on top with the mark and the wallet, and a bottom bar
   the thumb can reach: Map · Deeds · Vaults · Agents · More. A Ledger tab opens as a full sheet between
   the two; More lists everything else. Nothing here touches a screen wider than 700px. 18 Sep 2026. */
@media (max-width:700px) {
  body.phone #tools, body.phone #leftcol, body.phone #plate, body.phone #ticker, body.phone #switch { display:none !important; }
  body.phone { --sat:env(safe-area-inset-top, 0px); --sab:env(safe-area-inset-bottom, 0px); overscroll-behavior:none; }

  /* the top pill */
  body.phone #ph-top { position:fixed; top:calc(10px + var(--sat)); left:10px; right:10px; z-index:40; display:flex; align-items:center; gap:10px; background:var(--white); border-radius:999px; box-shadow:var(--shadow); padding:6px 6px 6px 14px; }
  .ph-mark { display:flex; align-items:center; gap:8px; font:900 15px/1 Archivo, Impact, sans-serif; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--ink); flex:none; }
  .ph-mark img { width:26px; height:26px; }
  .ph-count { flex:1; min-width:0; font:600 11px Inter, sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body.phone #ph-top #btn-wallet { margin:0 !important; height:38px !important; max-width:46vw; padding:0 14px !important; font-size:13px !important; }

  /* the bottom bar */
  body.phone #ph-bar { position:fixed; left:10px; right:10px; bottom:calc(10px + var(--sab)); z-index:45; display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; background:var(--white); border-radius:22px; box-shadow:0 -8px 30px rgba(28,23,18,.18), var(--shadow); padding:6px; }
  #ph-bar button { border:0 !important; background:transparent !important; border-radius:16px !important; height:54px !important; padding:0 !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font:600 11px/1 Inter, sans-serif !important; letter-spacing:0 !important; color:var(--ink) !important; box-shadow:none !important; transform:none !important; }
  #ph-bar button i { font-style:normal; font-size:18px; line-height:1; }
  #ph-bar button.on { background:var(--ink) !important; color:#fff !important; }

  /* the Ledger as a full sheet between the two */
  body.phone #ledger { position:fixed !important; top:calc(64px + var(--sat)) !important; bottom:calc(82px + var(--sab)) !important; left:10px !important; right:10px !important; max-height:none !important; height:auto !important; border-radius:22px !important; padding:12px 14px 14px !important; box-shadow:var(--shadow) !important; display:flex; flex-direction:column; }
  body.phone #ledger.folded { display:none !important; }
  body.phone #ledger .tabs { display:none !important; }
  body.phone #ledger .head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:nowrap; }
  body.phone #ledger .lt { font:900 16px/1 Archivo, Impact, sans-serif !important; letter-spacing:.02em !important; text-transform:uppercase; color:var(--ink) !important; cursor:default; }
  body.phone #ledger .lt::after { display:none !important; }
  #ph-close { width:40px !important; height:40px !important; border-radius:50% !important; padding:0 !important; font:700 16px Inter, sans-serif !important; flex:none; }
  body.phone #ledger-body { flex:1; min-height:0; overflow:auto; margin-top:10px; -webkit-overflow-scrolling:touch; }
  body.phone #ledger-body { overflow-x:hidden; overscroll-behavior:contain; }
  body.phone #ledger-body > .col { width:100% !important; flex:none !important; box-sizing:border-box; min-width:0; }
  body.phone .deed-grid { grid-template-columns:repeat(3, 1fr); }
  body.phone #deeds-wide { display:none !important; }

  /* the More sheet */
  /* over the live map, so no backdrop-filter - see #welcome in field-restyle.css */
  #ph-more { position:fixed; inset:0; z-index:44; background:rgba(28,23,18,.45); display:flex; align-items:flex-end; padding:0 10px calc(82px + var(--sab)); }
  .ph-sheet { width:100%; max-height:calc(100vh - 170px); overflow:auto; overscroll-behavior:contain; background:var(--white); border-radius:22px; padding:16px; box-shadow:var(--shadow); display:grid; gap:8px; animation:fm-rise .3s var(--ease) both; }
  .ph-sheet h3 { margin:0 0 4px !important; font-size:18px !important; }
  .ph-sheet button[data-k] { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; border:0 !important; background:var(--paper) !important; border-radius:14px !important; padding:12px 14px !important; min-height:54px; box-shadow:none !important; transform:none !important; width:100%; }
  .ph-sheet button[data-k] b { font:700 15px/1.2 Inter, sans-serif; color:var(--ink); }
  .ph-sheet button[data-k] small { font:500 12px/1.3 Inter, sans-serif; color:var(--ink2); }
  .ph-sheet a.ph-link { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-decoration:none; background:var(--ink); color:#fff; border-radius:14px; padding:12px 14px; min-height:54px; box-sizing:border-box; }
  .ph-sheet a.ph-link b { font:700 15px/1.2 Inter, sans-serif; } .ph-sheet a.ph-link small { font:500 12px/1.3 Inter, sans-serif; opacity:.8; }
  .ph-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:4px; }
  .ph-row button, .ph-row .ph-btn { min-height:44px; display:flex; align-items:center; justify-content:center; text-decoration:none; font:600 13px Inter, sans-serif !important; border:2px solid var(--ink) !important; border-radius:999px !important; background:var(--white) !important; color:var(--ink) !important; padding:0 8px !important; box-shadow:none !important; transform:none !important; }
  #ph-figs-box { background:var(--paper); border-radius:14px; padding:12px 14px; }
  #ph-figs-box h1 { font-size:20px !important; margin:0 0 4px !important; } #ph-figs-box h2 { font:500 12px Inter, sans-serif !important; color:var(--ink2); margin:0 0 8px !important; }
  #ph-figs-box #cart-x, #ph-figs-box #vignette, #ph-figs-box #surveyed { display:none !important; }

  /* overlays clear the bar */
  body.phone #card { bottom:calc(92px + var(--sab)) !important; top:auto !important; }
  body.phone #tour { bottom:calc(92px + var(--sab)) !important; }
  body.phone #toast { bottom:calc(96px + var(--sab)); }
  body.phone #wallet-menu, body.phone #more-menu { top:calc(62px + var(--sat)) !important; }
}