/* The Crew Board — v2 (2026-08-02)
   v1 was a one-way wizard: welcome → name → map → rank → jobs, with no way back
   and no navigation at all. v2 is a four-tab app with a NEXT UP bar that is never
   empty. The design tokens below are v1's, unchanged, plus navy and red for the
   two things v1 had no colour for: "where do I go" and "this one has a time on it".
   The v1 sheet is kept byte-for-byte in _v1-backup/ at the repo root. */

:root{
  --navy:#1B1E53; --red:#D92027;
  --paper:#FBE88C; --paper-line:#BA7517; --ink:#412402; --ink-2:#633806; --ink-3:#854F0B;
  /* Paper is yellow in BOTH modes, so text sitting on it must never flip. */
  --on-paper:#412402; --on-paper-2:#633806; --on-paper-3:#7A4A0A;
  --bg:#F6F4EE; --card:#FFFFFF; --rule:#E2DDD0; --accent:#0F6E56; --accent-bg:#E1F5EE;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
  --tabh:62px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14110B;--card:#1D1A13;--rule:#332D22;--ink:#F2E9D6;--ink-2:#C8B996;--ink-3:#A99A78;
        --accent:#5DCAA5;--accent-bg:#0E2A22;--navy:#2A2E74;}
}

/* ⛔ THE THIRD TIME THIS REPO SHIPPED A BUG BECAUSE A CLASS WITH `display:` BEAT
   THE UA STYLESHEET'S [hidden]{display:none} RULE (peek box, dashboard gate,
   interview "Other" box). One line kills the entire bug class. Do not remove. */
[hidden]{display:none!important}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;
     -webkit-font-smoothing:antialiased;min-height:100dvh;
     padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
.wrap{max-width:34rem;margin:0 auto;padding:0 1.05rem 2rem}
h1{font-family:var(--serif);font-size:1.5rem;line-height:1.2;margin:0;font-weight:600;text-wrap:balance}
p{margin:0;color:var(--ink-2)}
p.lead{color:var(--ink);font-size:1.03rem}
.kicker{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.kicker.mb{margin-bottom:.5rem}
.fine{font-size:.84rem;color:var(--ink-3)}
.fine.ctr{text-align:center}
.fine a{color:var(--ink-2)}
.sr{position:absolute;left:-9999px}
.cardstack{display:flex;flex-direction:column;gap:.6rem}
.foot{display:flex;flex-direction:column;gap:.55rem;margin-top:.4rem}
.gain{color:var(--accent);font-weight:600}
button,input,textarea{font:inherit}

/* ---------- NEXT UP : the always-there answer to "where do I go" ---------- */
#nextup{position:sticky;top:0;z-index:30;width:100%;background:var(--navy);color:#fff;border:0;
  padding:calc(.5rem + env(safe-area-inset-top)) 1.05rem .6rem;display:flex;align-items:center;
  gap:.75rem;cursor:pointer;text-align:left;margin-bottom:.9rem}
#nextup .nwrap{flex:1;min-width:0}
#nextup .nlab{font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#FBE88C;display:block}
#nextup .ntxt{font-size:.98rem;font-weight:600;line-height:1.25;display:block}
#nextup .nsub{font-size:.77rem;opacity:.75;display:block;margin-top:.1rem}
#nextup .ngo{margin-left:auto;flex:none;background:var(--paper);color:var(--on-paper);
  border-radius:999px;padding:.45rem .85rem;font-size:.82rem;font-weight:800;white-space:nowrap}
#nextup:focus-visible{outline:3px solid var(--paper);outline-offset:-4px}

/* ---------- bottom tab bar : the navigation that did not exist ---------- */
#tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);
  border-top:1px solid var(--rule);display:flex;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 14px rgba(0,0,0,.07)}
#tabs button{flex:1;background:none;border:0;padding:.5rem 0 .45rem;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;color:var(--ink-3)}
#tabs .ti{font-size:1.2rem;line-height:1}
#tabs .tn{font-size:.66rem;font-weight:800;letter-spacing:.03em}
#tabs button.on{color:var(--accent)}
#tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

/* First run has no navigation on purpose — one question, one button, nothing else. */
body.firstrun #tabs,body.firstrun #nextup{display:none}
body.firstrun .wrap{padding-top:1.6rem}

.view{display:none;flex-direction:column;gap:1rem}
.view.on{display:flex;animation:in .24s ease both}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}

/* ---------- controls ---------- */
.btn{appearance:none;border:1px solid var(--on-paper);background:var(--paper);color:var(--on-paper);
  border-radius:10px;padding:.82rem 1rem;font-weight:700;cursor:pointer;width:100%;text-align:center;
  transition:transform .08s ease}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--ink-2);font-weight:600}
.btn.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.mini{background:transparent;border:1px solid var(--rule);color:var(--ink-2);font-weight:600;
  border-radius:999px;padding:.38rem .8rem;cursor:pointer;font-size:.82rem}
.mini:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mini.back{align-self:flex-start}
/* The negative margin only works inside a flex container with a gap (.view).
   In a plain block the input rides UP over its own label — which is exactly
   what happened to the two questions on the logged screen. Any container
   holding an .fl must therefore be a flex column too. */
.fl{font-size:.9rem;color:var(--ink-2);font-weight:600;display:block;margin-bottom:-.55rem}
#firstask{display:flex;flex-direction:column;gap:1rem}
input[type=text],textarea{width:100%;padding:.82rem .9rem;border:1px solid var(--rule);border-radius:10px;
  background:var(--card);color:var(--ink)}
textarea{min-height:4.5rem;resize:vertical;font-size:.95rem}
input[type=text]:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

/* one line of chips that scrolls, instead of two rows that wrap */
.chips{display:flex;gap:.4rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:.15rem 1.05rem;margin:0 -1.05rem;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;appearance:none;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);
  border-radius:999px;padding:.38rem .85rem;font-size:.84rem;cursor:pointer;white-space:nowrap}
.chip.on{border-color:var(--accent);background:var(--accent-bg);color:var(--ink);font-weight:700}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- today ---------- */
.strip{display:flex;gap:.5rem}
.stat{flex:1;background:var(--card);border:1px solid var(--rule);border-radius:12px;
  padding:.6rem .4rem;text-align:center}
.stat b{display:block;font-size:1.2rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:.64rem;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.06em;font-weight:800}
.cal{background:var(--card);border:1px solid var(--red);border-left-width:4px;border-radius:12px;
  padding:.75rem .85rem;display:flex;flex-direction:column;gap:.2rem}
.cal .ct{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.cal b{font-family:var(--serif);font-size:1.02rem}
.cal span{font-size:.82rem;color:var(--ink-3)}
.note{font-size:.85rem;color:var(--ink-2);background:var(--card);border:1px dashed var(--rule);
  border-radius:10px;padding:.7rem .8rem}
.note b{color:var(--ink)}

/* ---------- job cards ---------- */
.jcard{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.jcard.open{border-color:var(--accent)}
.jcard.done{opacity:.7}
.jhead{width:100%;background:none;border:0;text-align:left;display:flex;gap:.75rem;
  align-items:flex-start;padding:.85rem .9rem;cursor:pointer;color:var(--ink)}
.jhead:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.jdot{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:.9rem;color:#fff}
.jb{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.jb b{font-family:var(--serif);font-size:1.02rem;line-height:1.25;font-weight:600}
.jmeta{display:flex;flex-wrap:wrap;gap:.25rem .4rem;font-size:.74rem;color:var(--ink-3);align-items:center}
.jmeta .site{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jsub{font-size:.74rem;color:var(--ink-3)}
.pill{border-radius:999px;padding:.1rem .5rem;font-weight:800;font-size:.64rem;letter-spacing:.04em;
  text-transform:uppercase;border:1px solid var(--rule)}
.pill.pick{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.pill.assigned{background:#FDE7E8;color:#A2151B;border-color:#E5989C}
.pill.mine{background:var(--paper);color:var(--on-paper);border-color:var(--paper-line)}
.pill.waiting{background:#FDE7E8;color:#A2151B;border-color:#E5989C}
.pill.star{background:var(--paper);color:var(--on-paper);border-color:var(--paper-line)}
.jcaret{flex:none;font-size:.7rem;color:var(--ink-3);padding-top:.5rem}
.jbody{padding:0 .9rem .9rem;display:flex;flex-direction:column;gap:.7rem;
  border-top:1px dashed var(--rule);padding-top:.8rem}
.jpay{color:var(--accent);font-size:.92rem}
.visit{font-size:.85rem;color:var(--ink-3);text-decoration:underline dotted;align-self:flex-start}
.visit::after{content:" \2197"}

/* A job that cannot be finished today says so before the worker spends any time
   on it — not on step 2, where the missing file used to surface. */
.waitbar{background:#FDE7E8;border:1px solid #E5989C;border-left-width:4px;border-radius:4px 12px 12px 4px;
  padding:.7rem .8rem;font-size:.86rem;color:#7A1015;line-height:1.5}
.waitbar b{color:#5E0C10}
@media (prefers-color-scheme:dark){
  .waitbar{background:#2C1113;border-color:#7A1015;color:#F2C9CB}
  .waitbar b{color:#FBE0E1}
}

/* ---------- places : the segmented toggle, the map, the list ---------- */
.seg{display:flex;background:var(--card);border:1px solid var(--rule);border-radius:999px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:none;border-radius:999px;padding:.45rem 0;font-size:.86rem;
  font-weight:700;color:var(--ink-3);cursor:pointer}
.seg button.on{background:var(--navy);color:#fff}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Five lane names do not fit one 390px row. Scrolling them cut "Launches" to
   "La", which reads as a broken page — so they wrap, and the map box gives up
   the ~20px because fitMapBox measures whatever is actually above it. */
.legend{display:flex;flex-wrap:wrap;gap:.3rem .7rem;font-size:.7rem;color:var(--ink-3);
  margin-bottom:.5rem}
.legend span{display:flex;align-items:center;gap:.28rem}
.legend i{width:10px;height:10px;border-radius:3px;display:block}

/* ---------- the mindmap : "where the work is" ----------
   Replaces a grid of numbered tiles Teddy bounced twice — the second time as
   "a stencil template that I coded in a workshop." So: no grid, no equal
   squares, no legend. A spine with branches that curve out of it, each branch
   carrying its own colour and its own count of open work. Everything is
   tappable from the first frame; nothing waits its turn. */
.mindwrap{position:relative}
.mindwrap>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#mind{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:.1rem 0 .2rem}

.mnode{position:relative;display:flex;align-items:center;gap:.6rem;text-align:left;
  color:var(--ink);border-radius:14px;padding:.6rem .75rem;width:auto;align-self:flex-start;
  background:var(--card);border:1px solid var(--rule)}
/* Indented nodes must subtract their own indent or they run off the screen —
   the count badge on the right was being clipped away entirely. */
.mroot{max-width:100%}
.mlane{max-width:calc(100% - 40px)}
.mleaf{max-width:calc(100% - 78px)}
.mnode .mlab{flex:1;min-width:0;display:flex;flex-direction:column}
.mnode .mlab b{font-family:var(--serif);font-size:1rem;font-weight:600;line-height:1.25}
.mnode .mlab span{font-size:.76rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.mnode:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* the trunk */
.mroot{margin-left:0;background:var(--navy);border-color:var(--navy);padding:.8rem 1rem}
.mroot .mlab b{color:#fff;font-size:1.05rem}
.mroot .mlab span{color:#fff;opacity:.72}

/* a branch — colour is the lane, and it is the only place lane colour appears */
.mlane{margin-left:40px;cursor:pointer;border-left:4px solid var(--rc);border-radius:4px 14px 14px 4px;
  padding-left:.7rem;transition:transform .1s ease}
.mlane:active{transform:scale(.99)}
.mlane .mdot{flex:none;width:.62rem;height:.62rem;border-radius:50%;background:var(--rc)}
.mlane.open{background:color-mix(in srgb,var(--rc) 9%,var(--card))}
.mlane.quiet{opacity:.62}
.mlane .mchev{flex:none;font-size:.62rem;color:var(--ink-3);padding-left:.15rem}

/* a leaf — one real place, with the number of jobs open on it */
.mleaf{margin-left:78px;cursor:pointer;padding:.45rem .6rem;
  border-left:3px solid color-mix(in srgb,var(--rc) 55%,transparent);border-radius:3px 12px 12px 3px}
.mleaf .mno{flex:none;width:1.45rem;height:1.45rem;border-radius:6px;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;color:#fff;background:var(--rc);font-variant-numeric:tabular-nums}
.mleaf .mlab b{font-size:.9rem}
.mleaf .mlab span{font-size:.72rem}
.mleaf .mcount{flex:none;min-width:1.5rem;text-align:center;font-size:.8rem;font-weight:800;
  color:var(--accent);background:var(--accent-bg);border-radius:999px;padding:.1rem .45rem;
  font-variant-numeric:tabular-nums}
.mleaf .mcount.none{color:var(--ink-3);background:transparent;font-weight:600}
.mleaf.seen{border-left-color:var(--rc)}
.mleaf.on{background:var(--paper);border-color:var(--paper-line);color:var(--on-paper)}
.mleaf.on .mlab span{color:var(--on-paper-3)}
@media (prefers-reduced-motion:reduce){.mlane{transition:none}}

.prow{display:flex;gap:.7rem;align-items:center;background:var(--card);border:1px solid var(--rule);
  border-radius:12px;padding:.65rem .75rem;width:100%;text-align:left;color:var(--ink);cursor:pointer}
.prow:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.prow .pn{flex:none;width:1.9rem;height:1.9rem;border-radius:8px;display:grid;place-items:center;
  font-weight:800;font-size:.85rem;color:#fff;font-variant-numeric:tabular-nums}
.prow .pb{flex:1;min-width:0;display:flex;flex-direction:column;gap:.05rem}
.prow .pb b{font-family:var(--serif);font-size:1rem;font-weight:600}
.prow .pb span{font-size:.78rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pj{flex:none;font-size:.68rem;font-weight:800;color:var(--accent);background:var(--accent-bg);
  border-radius:999px;padding:.15rem .5rem;white-space:nowrap}
.prow .pj.none{color:var(--ink-3);background:var(--bg)}
.prow.on{border-color:var(--on-paper);background:var(--paper);color:var(--on-paper)}
.prow.on .pb span{color:var(--on-paper-3)}

/* board ordering — the walk ranking that breaks ties in the job sort */
.rankrow{display:flex;gap:.7rem;align-items:center;background:var(--card);border:1px solid var(--rule);
  border-radius:12px;padding:.6rem .75rem}
.rankrow .rk{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.rankrow .rkbody{flex:1;min-width:0;display:flex;flex-direction:column}
.rankrow .rkbody b{font-family:var(--serif);font-size:.98rem;font-weight:600}
.rankrow .rkbody span{font-size:.76rem;color:var(--ink-3)}
.rankrow .rkctl{flex:none;display:flex;gap:.25rem}
.rankrow .mv{appearance:none;background:none;border:1px solid var(--rule);border-radius:6px;
  width:30px;height:28px;color:var(--ink-2);cursor:pointer;font-size:11px;display:grid;place-items:center;padding:0}
.rankrow .mv:disabled{opacity:.3;cursor:default}
.rankrow .mv:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rankrow .mv.drop{font-size:15px;color:var(--ink-3)}

/* ---------- one job : one step at a time, for real ---------- */
.stepbar{display:flex;gap:4px}
.stepbar i{flex:1;height:5px;border-radius:3px;background:var(--rule);display:block}
.stepbar i.done{background:var(--accent)}
.stepbar i.now{background:var(--paper-line)}
.stepn{font-size:.78rem;color:var(--ink-3);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.postit{background:var(--paper);border:.5px solid var(--paper-line);border-radius:3px;
  padding:1rem 1.05rem;color:var(--on-paper);display:flex;flex-direction:column;gap:.1rem}
.postit p,.postit b,.postit span{color:var(--on-paper)}
.postit .now{padding:.45rem 0 .3rem}
.postit .now b{font-size:1.02rem;font-weight:700;display:block;line-height:1.35}
.postit .later{display:flex;gap:.5rem;padding:.28rem 0;font-size:.86rem;color:var(--on-paper-3);
  align-items:flex-start}
.postit .later .bx{flex:none;width:1rem;color:var(--on-paper-3)}
.postit .later .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--on-paper-3)}
.postit .later.was .t{text-decoration:line-through}
.postit .shot{display:block;width:100%;height:auto;border:.5px solid var(--paper-line);
  border-radius:4px;margin-top:.6rem;background:#fff}
.pastebox{background:#FFFDF4;border:.5px solid var(--paper-line);border-radius:6px;padding:.55rem;margin-top:.55rem}
.pastebox textarea{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:12px;line-height:1.5;
  color:#412402;background:#fff;border:.5px solid #D3D1C7;border-radius:4px;padding:.5rem;resize:none;min-height:0}
.cpb{width:100%;margin-top:.5rem;font-size:.88rem;font-weight:700;padding:.55rem 0;background:var(--paper);
  border:1px solid var(--on-paper);border-radius:6px;color:var(--on-paper);cursor:pointer}

/* outcome buttons on the log screen */
.card{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:.85rem .95rem;
  cursor:pointer;text-align:left;width:100%;font-family:var(--serif);font-size:1.02rem;font-weight:600;
  color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.card .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule);flex:none;
  display:grid;place-items:center;font-size:13px;color:transparent}

/* ---------- "in development" markers ----------
   Teddy, 2026-08-02: a bigger tag on that portion so the crew know it is a
   placeholder. A screen that describes help, while looking like help, spends
   trust it has not earned — so this is deliberately loud. */
.devbar{background:var(--paper);border:1px solid var(--paper-line);border-left-width:5px;
  border-radius:4px 12px 12px 4px;padding:.85rem .9rem;display:flex;flex-direction:column;gap:.35rem;
  color:var(--on-paper)}
.devbar .devtag{align-self:flex-start;background:var(--on-paper);color:var(--paper);
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:.25rem .6rem}
.devbar b{font-family:var(--serif);font-size:1.08rem;font-weight:600;color:var(--on-paper);line-height:1.3}
.devbar>span:not(.devtag){font-size:.86rem;color:var(--on-paper-2);line-height:1.5}
.devbar>span b{font-family:var(--sans);font-size:inherit;font-weight:700}
.pill.soon{flex:none;background:var(--on-paper);color:var(--paper);border-color:var(--on-paper);
  align-self:flex-start}
/* Anchored to its own tab, as a PERCENTAGE. A fixed offset from centre put it
   2px off the screen on a 320px iPhone SE — the last tab has no room to spare.
   Left to flow at all, it fell out of the bar entirely and read as a stray pill
   floating over the page. */
#tabs .tsoon{position:absolute;top:4px;right:8%;
  background:var(--paper-line);color:#fff;font-size:.5rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:.06rem .3rem;line-height:1.5;pointer-events:none}
#tabs button{position:relative}
.wm.off{border-style:dashed}

/* ---------- wingman ---------- */
.wm{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:.85rem .9rem;
  display:flex;flex-direction:column;gap:.6rem}
.wmhead{display:flex;align-items:center;gap:.6rem}
.wmhead .wmt{flex:1;min-width:0}
.wmav{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--navy);color:#FBE88C;
  display:grid;place-items:center;font-weight:800;font-size:.9rem}
.wmt b{font-family:var(--serif);font-size:1.02rem;display:block}
.wmt span{font-size:.74rem;color:var(--ink-3);display:block}
.wmsoon{font-size:.86rem;color:var(--ink-2)}
.wmsoon b{color:var(--ink)}
.track{display:flex;flex-direction:column;gap:.3rem}
.trow{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--ink-2)}
.trow .td{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font-size:.7rem;font-weight:800;border:1px solid var(--rule);color:var(--ink-3)}
.trow .tt{flex:1;min-width:0}
.trow .tt b{color:var(--ink);font-weight:700}

/* ---------- bottom sheet (a place you tapped) ---------- */
.sheetback{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:50}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--card);
  border-radius:16px 16px 0 0;max-width:34rem;margin:0 auto;
  padding:1rem 1.05rem calc(1rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:.6rem;max-height:82vh;overflow:auto;
  box-shadow:0 -10px 34px rgba(0,0,0,.3)}
.sheet .sh{display:flex;align-items:center;gap:.55rem}
.sheet .sx{margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink-3);
  cursor:pointer;padding:0 .2rem;line-height:1}
.sheet .snum{flex:none;width:2rem;height:2rem;border-radius:8px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.sheet .st b{font-family:var(--serif);font-size:1.1rem;display:block}
.sheet .st span{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:block}
.sheet .real{font-size:.9rem;border-left:2px solid var(--accent);padding-left:.7rem}
.sheet .cost{background:var(--accent-bg);border-radius:9px;padding:.55rem .7rem;font-size:.88rem;
  display:flex;justify-content:space-between;align-items:baseline;color:var(--ink-2)}
.sheet .cost b{color:var(--accent);font-variant-numeric:tabular-nums}
.sheet a.mini{text-align:center;text-decoration:none}

/* Places is the one view that must fit a phone whole — the map already scrolls
   inside itself, so the page around it scrolling too is a nested-scroll trap. */
#v-places.on{gap:.7rem}
#v-places .legend{margin-bottom:.35rem}