/* PHONE SHELL (Josh, 5 Oct). Phones only: viewport <= 600 px. Desktop is untouched.
WHY THIS IS A FILE OF ITS OWN, AND WHY EVERY RULE CARRIES `html body:not(.brief-open)`.
index.html has seven generations of phone rules, most of them !important and
several of them the answer to a previous complaint ("cut them by a fourth").
Editing them in place means reconciling all seven, and a wrong reconciliation
is a rule that silently stops matching. This sheet is linked LAST and out-ranks
them by selector weight instead, so the old rules are still there and still
right for Home (body.brief-open), which keeps its own layout on purpose.
THE GEOMETRY IS FIXED PIXELS, NOT A FLEX ROW. #nav, #search, #locate and
#quickCam are four separate fixed elements (native.js makes two of them), and
moving them into one container would break desktop and the code that finds
them by id. So each is placed at a measured x and #pbar draws the one bar
behind them. Phone widths are 360-430; the only thing that stretches is the
search field, and it stretches on purpose.
TAP TARGETS. Everything visually slim gets a ::before/::after that pads the
hit area to 44 px tall. Horizontal neighbours are already >= 44 apart except
the speaker, which is 40 wide because the camera is next to it.
THE BUDGET (390 x 844, safe inset 0): top stack ends at 94 px (1/8 = 105);
bottom stack is 211 px or less (2/8 = 211). On a real iPhone the OS insets
are added on top of both -- the status bar and the home indicator are not
ours to spend. */
/* Outside the phone query these elements do not exist as far as layout goes. */
#pbar, #shareCount, #tile, #psToast, #psTop, #psBottom { display:none; }
@media (max-width:600px) {
:root {
--ps-top: env(safe-area-inset-top, 0px);
/* No status bar (Josh, 5 Oct: "hide everywhere"). On island/notch phones
the inset stays (~47-59 px: the cutout is still there), so the title
moves up into the strip LEFT of the island and the bar sits just under
it; on phones without a cutout the inset drops to 0 and both sit at the
top. ~22 px more map than under-the-clock. */
/* Centred on the island: its middle sits at about half the top inset
(59 px inset -> island 11-48 px, centre 29.5) on every island iPhone. */
--ps-title-lh: 20px;
--ps-title-t: max(8px, calc(var(--ps-top) / 2 - var(--ps-title-lh) / 2));
--ps-bar-t: max(30px, calc(var(--ps-top) + 2px)); /* top of the bar */
--ps-search-x: 198px; /* where the field starts */
--ps-search-w: 154px; /* collapsed width (the speaker's 32 px went to it) */
--ps-bar-r: 358px; /* collapsed right edge */
--ps-pick: 70px; /* #pickWrap: the 70 px filmstrip (+ the home-indicator inset, added below) */
--ps-panel: 34px;
--ps-stack: calc(var(--ps-pick) + env(safe-area-inset-bottom, 0px) + var(--ps-panel) + 2px); /* before JS has measured */
--ps-glass: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 48%, rgba(0,0,0,.16) 100%), rgba(12,16,15,.66);
--ps-edge: .5px solid rgba(255,255,255,.24);
--ps-lift: inset 0 .5px 0 rgba(255,255,255,.38), inset 0 -.5px 0 rgba(0,0,0,.4), 0 3px 10px rgba(0,0,0,.32);
}
/* ------------------------------------------------------------------ TOP */
/* 1. THE TITLE, RIGHT UNDER THE TIME. The wordmark's own rule/underline is
dropped: it cost 8 px of the 105 and said nothing. */
html body:not(.brief-open) #hud { top:var(--ps-title-t); left:0; width:calc(50vw - 63.33px); display:flex; justify-content:center; } /* centred between the screen edge and the island's left edge */
/* As large as the strip left of the island allows (Josh: "larger"). The
island is ~127 px wide and centred, so the strip is 50vw - 63.5px; less
the 10 px margin and an 8 px gap, over ~8.9 px of width per px of type
(measured 5 Oct in WebKit: 133 px wide at 15 px / .1em). 15 px on a Pro
Max, ~12.8 px on a 390 px phone; never past 16. */
html body:not(.brief-open) #hud #title { margin:0; font-size:min(16px, calc((50vw - 91.5px) / 8.9)); line-height:var(--ps-title-lh); letter-spacing:.1em; gap:.28em; /* mark tucked to the word (Josh, 5 Oct); was .62em */
border:0; padding:0; position:relative; }
/* The mark larger, a touch lower and further in (Josh, 5 Oct); the type's
size formula above gives back the 10 px it takes. */
html body:not(.brief-open) #hud #title #mark { width:19px; height:19px; margin-left:4px; transform:translateY(2px); }
html body:not(.brief-open) #hud #title::before { content:''; position:absolute; inset:-24px -8px -4px; }
/* The old counter lines stay in the DOM (updateFilmedCount writes them and
#shareCount reads them) but take no space and are not seen or tapped. */
html body:not(.brief-open) #hud #count,
html body:not(.brief-open) #hud #countLabel,
html body:not(.brief-open) #hud #bearing,
html body:not(.brief-open) #hud #tally {
position:absolute !important; width:1px; height:1px; margin:0 !important; overflow:hidden;
opacity:0 !important; pointer-events:none !important; }
/* 2. THE BAR. One glass slab; the controls sit on it and draw nothing of their own. */
html body:not(.brief-open) #pbar { display:block; position:fixed; z-index:39; pointer-events:none;
left:14px; top:var(--ps-bar-t); height:30px; width:calc(var(--ps-bar-r) - 14px); border-radius:15px;
background:var(--ps-glass); border:var(--ps-edge); box-shadow:var(--ps-lift);
-webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5);
box-sizing:border-box; transition:width .22s cubic-bezier(.3,.7,.2,1), opacity .55s ease .1s; }
html body.ps-search-open:not(.brief-open) #pbar { width:calc(100vw - 14px - 10px); }
/* camera: the round end of the bar, a touch taller than it and warmer, so it
reads as melted into it rather than stuck on. */
html body:not(.brief-open) #quickCam { top:calc(var(--ps-bar-t) - 2px) !important; left:10px !important; right:auto !important;
bottom:auto !important; width:34px !important; height:34px !important; min-height:0 !important;
z-index:41; border-radius:50% !important; box-sizing:border-box;
background:linear-gradient(180deg, rgba(255,230,194,.30), rgba(255,230,194,.06) 55%, rgba(0,0,0,.2)), rgba(24,20,14,.7) !important;
border:.5px solid rgba(233,196,106,.7) !important; color:#ffe6c2 !important;
box-shadow:inset 0 .5px 0 rgba(255,255,255,.4), 0 2px 8px rgba(0,0,0,.4) !important; }
html body:not(.brief-open) #quickCam svg { width:17px; height:17px; }
html body:not(.brief-open) #quickCam::before { content:''; position:absolute; inset:-5px -2px; }
/* the buttons on the bar */
html body:not(.brief-open) #locate,
html body:not(.brief-open) #nav #navMenu,
html body:not(.brief-open) #nav #navBack {
position:fixed; z-index:41; top:var(--ps-bar-t) !important; bottom:auto !important; right:auto !important;
height:30px !important; min-height:0 !important; margin:0; padding:0 !important; box-sizing:border-box;
display:flex !important; align-items:center; justify-content:center;
background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
font:500 10px/30px var(--ui) !important; letter-spacing:.12em !important; text-transform:uppercase;
color:#f3efe4 !important; white-space:nowrap; overflow:visible; text-overflow:clip; }
html body:not(.brief-open) #locate { left:48px !important; width:46px !important; }
html body:not(.brief-open) #locate::before { content:''; position:absolute; left:0; top:7px; bottom:7px; width:.5px; background:rgba(255,255,255,.2); }
html body:not(.brief-open) #locate::after,
html body:not(.brief-open) #nav #navMenu::after,
html body:not(.brief-open) #nav #navBack::after { content:''; position:absolute; inset:-7px 0; }
html body:not(.brief-open) #locate:disabled { opacity:.55; }
/* #nav is only the box that holds Menu and Back; it takes no part in the look. */
html body:not(.brief-open):not(.nav-open) #nav { position:fixed; left:94px; top:var(--ps-bar-t) !important; right:auto !important;
width:98px; height:30px; display:block; gap:0; padding:0; border:0; background:none; }
html body:not(.brief-open) #nav #navMenu { left:94px; width:46px; }
html body:not(.brief-open) #nav #navBack { left:140px; width:52px; }
html body:not(.brief-open) #nav #navMenu::before,
html body:not(.brief-open) #nav #navBack::before { content:''; position:absolute; left:0; top:7px; bottom:7px; width:.5px; background:rgba(255,255,255,.2); }
html body:not(.brief-open) #nav #navBack { text-transform:uppercase; }
/* Menu open: the bar's Menu segment drops down into a glass sheet that holds
Menu, the links and Back as full-width 44 px rows. They are IN FLOW here, not
fixed: the old open-nav rule gives #nav a backdrop-filter, and that makes it
the containing block for position:fixed children, which threw Menu to
x 253 and left Back on top of it (the QA "Menu opens and closes" check). */
html body.nav-open:not(.brief-open) #nav { position:fixed; left:94px !important; top:calc(var(--ps-bar-t) - 4px) !important; right:auto !important;
width:156px !important; height:auto; display:flex; flex-direction:column; align-items:stretch; padding:4px !important; gap:2px !important;
background:rgba(7,9,10,.94) !important; border:var(--ps-edge) !important; border-radius:16px !important; z-index:70; }
html body.nav-open:not(.brief-open) #nav a,
html body.nav-open:not(.brief-open) #nav #navMenu,
html body.nav-open:not(.brief-open) #nav #navBack { position:relative !important; left:auto !important; top:auto !important; width:100% !important;
height:44px !important; min-height:44px !important; justify-content:flex-start !important; padding:0 12px !important; border-radius:12px !important;
font:500 11px/44px var(--ui) !important; letter-spacing:.14em !important; }
html body.nav-open:not(.brief-open) #nav #navMenu::before,
html body.nav-open:not(.brief-open) #nav #navBack::before { display:none; }
html body.nav-open:not(.brief-open) #nav #navMenu::after,
html body.nav-open:not(.brief-open) #nav #navBack::after { inset:0; }
/* search: the right-hand end of the bar. Collapsed it is a stub; a touch
expands it to the right (JS adds body.ps-search-open and removes it after
2 s of nothing). The typed text is never cleared by that. */
html body:not(.brief-open) #search { position:fixed; z-index:41; top:calc(var(--ps-bar-t) - 7px) !important; left:var(--ps-search-x) !important;
right:auto !important; width:var(--ps-search-w) !important; height:44px; /* 44 tall to touch; the bar behind it is 30 */
transition:width .22s cubic-bezier(.3,.7,.2,1); }
html body.ps-search-open:not(.brief-open) #search { width:calc(100vw - var(--ps-search-x) - 14px) !important; }
html body:not(.brief-open) #searchInput { height:44px !important; min-height:0 !important; width:100%; box-sizing:border-box;
padding:0 10px 0 12px !important; font-size:16px !important; line-height:44px; letter-spacing:.02em; color:#eafff2 !important;
background:transparent !important; border:0 !important; border-radius:0 15px 15px 0 !important; box-shadow:none !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important; text-overflow:ellipsis; }
html body:not(.brief-open) #searchInput:focus { color:#fff8e6 !important; outline:none; }
html body:not(.brief-open) #searchInput::placeholder { color:rgba(255,233,181,.7); }
html body:not(.brief-open) #search::before { content:''; position:absolute; left:0; top:14px; bottom:14px; pointer-events:none; width:.5px; background:rgba(255,255,255,.2); }
html body:not(.brief-open) #searchMsg { position:absolute; top:43px; right:0; left:auto; margin:0; min-height:0;
padding:3px 9px; border-radius:10px; background:rgba(8,11,10,.9); font-size:10px; letter-spacing:.1em; white-space:nowrap; }
html body:not(.brief-open) #searchMsg:empty { display:none; }
/* 3. SOUND: a speaker in the strip RIGHT of the island, centred on it like
the title on the left (Josh, 5 Oct). Was left of the camera. hum.js still writes SOUND/MUTED
into the button as text; it is hidden (font-size:0) and the glyph is drawn
from the pressed state, so the toggle is unchanged. */
html body:not(.brief-open) #humBtn { position:fixed; z-index:41; right:auto !important; left:calc(75vw + 31.67px - 18px) !important; /* centred between the island's right edge (50vw + 63.3) and the screen edge */ top:calc(var(--ps-title-t) + var(--ps-title-lh) / 2 - 12px) !important; bottom:auto !important;
width:36px; height:24px; min-height:0; padding:0 !important; margin:0; font-size:0 !important; line-height:0; color:transparent !important;
background:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important; overflow:visible; }
html body:not(.brief-open) #humBtn::before { content:''; position:absolute; inset:-10px 0; }
html body:not(.brief-open) #humBtn::after { content:''; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px;
background:#93a39c; transition:background .15s ease;
-webkit-mask:var(--ps-spk-off) center/contain no-repeat; mask:var(--ps-spk-off) center/contain no-repeat; }
html body:not(.brief-open) #humBtn[aria-pressed="true"]::after { background:var(--gold,#e9c46a);
-webkit-mask-image:var(--ps-spk-on); mask-image:var(--ps-spk-on); }
:root {
--ps-spk-on: url("data:image/svg+xml;utf8,");
--ps-spk-off: url("data:image/svg+xml;utf8,");
}
/* 4. THE COUNTER: small, wide, flat. Digits sit in little cells like a
mechanical odometer; shell.js ticks them up. */
html body:not(.brief-open) #shareCount { display:flex; position:fixed; z-index:6; left:12px; right:12px;
top:calc(var(--ps-bar-t) + 33px); height:17px; align-items:center; justify-content:center; gap:5px;
box-sizing:border-box; padding:0 8px; border-radius:4px; pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.14)), rgba(10,13,12,.5);
border:.5px solid rgba(255,255,255,.14);
font:500 9px/1 var(--ui); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.78);
white-space:nowrap; overflow:hidden; transition:opacity .55s ease .1s; }
#shareCount .od { display:inline-flex; gap:1px; }
#shareCount .dg { display:inline-block; min-width:8px; height:13px; line-height:13px; text-align:center; border-radius:2px;
background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(40,40,36,.55) 50%, rgba(0,0,0,.55) 51%, rgba(0,0,0,.4));
color:var(--gold,#e9c46a); font:600 10px/13px var(--ui); font-variant-numeric:tabular-nums; letter-spacing:0; }
#shareCount .of { color:rgba(255,255,255,.62); }
#shareCount .sh { color:rgba(255,230,194,.92); letter-spacing:.1em; }
#shareCount .sh b { font-weight:600; color:#fff; }
/* 5. KEY: a translucent chip under the counter. Tapping drops the legend
down; it is anchored at its own top edge, so opening it moves nothing else. */
html body:not(.brief-open) #key { position:fixed; z-index:30; left:12px; top:calc(var(--ps-bar-t) + 54px) !important; bottom:auto !important;
transform:none; max-width:min(236px, calc(100vw - 24px)); padding:0; border-radius:9px;
background:rgba(10,13,12,.42); border:.5px solid rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3);
max-height:calc(100dvh - var(--ps-bar-t) - 54px - var(--ps-stack) - 150px); overflow:hidden;
transition:background .18s ease; }
html body:not(.brief-open) #key:not(.collapsed) { background:rgba(10,13,12,.6); overflow-y:auto; }
html body:not(.brief-open) #key b { display:flex; align-items:center; height:18px; margin:0; padding:0 10px; font:500 9px/18px var(--ui);
letter-spacing:.3em; color:rgba(255,255,255,.78); position:relative; }
html body:not(.brief-open) #key b::before { content:''; position:absolute; inset:-13px -6px -13px -6px; }
html body:not(.brief-open) #key b::after { content:'+'; margin-left:6px; letter-spacing:0; font-size:11px; }
html body:not(.brief-open) #key:not(.collapsed) b::after { content:'\2013'; }
html body:not(.brief-open) #key #keyRows { padding:2px 10px 8px; }
/* 6. THE DISCLOSURE. "drawn N x larger than life / not land title" is
required (CLAUDE.md 8) and used to float at top-right straight through the
region name. It rides the top edge of the bottom stack instead -- the one
strip of map that nothing else writes to -- small, centred, with a scrim. */
html body:not(.brief-open) #scaleNote { top:auto !important; right:auto !important; left:0 !important; transform:none; width:100%; max-width:none;
bottom:calc(var(--pnl-h, var(--ps-stack)) + 78px); z-index:7; box-sizing:border-box; padding:0 18px; border-radius:0; background:none; text-align:center;
font-size:7px; line-height:9px; letter-spacing:.02em; text-transform:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
-webkit-backdrop-filter:none; backdrop-filter:none; pointer-events:none; text-shadow:0 0 3px rgba(0,0,0,.8); }
html body:not(.brief-open) #scaleNote br { display:none; }
html body:not(.brief-open) #scaleNote a { margin:0 0 0 .5em; padding:0; pointer-events:auto; }
/* A zoomed-in region name sits at 9% of the screen: under the key chip. */
html body:not(.brief-open) #banner.low { top:calc(var(--ps-bar-t) + 84px); }
/* a transient line for what the I-am button used to spell out inside itself */
html body:not(.brief-open) #psToast { display:block; position:fixed; z-index:45; left:50%; transform:translateX(-50%);
top:calc(var(--ps-bar-t) + 36px); max-width:calc(100vw - 32px); padding:5px 12px; border-radius:12px;
background:rgba(8,11,10,.92); border:var(--ps-edge); color:#f3efe4; font:500 11px/1.3 var(--ui); letter-spacing:.06em;
opacity:0; pointer-events:none; transition:opacity .2s ease; }
html body:not(.brief-open) #psToast.on { opacity:1; }
/* ------------------------------------------------------------------ BOTTOM */
} /* end of the phone block: the filmstrip below is the SAME CSS on a desktop and the Mac app (5 Oct,
Josh: the bottom band "is practically useless if it's that big and doesn't have the images of
regions"). The safe-area insets are 0 there, so nothing in it is phone-only. */
/* 9. THE SLIDER IS A FILMSTRIP, the same 70 px as the tile above it. Every
region's plate edge to edge (phone-shell.js builds them), the leaf fixed at
the middle with its stem on the selected plate. The old track, ticks and
micro-plate row are not drawn. No black band: the wrapper is transparent and
only the home-indicator inset sits under the strip. */
html body:not(.brief-open) #pickWrap { background:transparent; border-top:0; padding-bottom:env(safe-area-inset-bottom, 0px) !important; }
html body:not(.brief-open) #leafBar, html body:not(.brief-open) #leafTrackWrap { height:70px; }
html body:not(.brief-open) #leafTrackWrap { margin:0 8px; }
html body:not(.brief-open) #leafTrack, html body:not(.brief-open) #leafTicks, html body:not(.brief-open) #leafThumbs { display:none; }
html body:not(.brief-open) #leafStrip { position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden; border-radius:10px;
scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x;
background:#0b1210; box-shadow:0 3px 10px rgba(0,0,0,.4); }
#leafStrip::-webkit-scrollbar { display:none; }
#leafStrip.drag { scroll-snap-type:none; }
#leafStrip::before, #leafStrip::after { content:''; flex:0 0 calc(50% - 26px); } /* so the first and last plate can reach the stem */
#leafStrip .sp { position:relative; flex:0 0 52px; width:52px; height:70px; scroll-snap-align:center; cursor:pointer;
background:linear-gradient(135deg,#27402f,#14231a); box-shadow:inset .5px 0 0 rgba(0,0,0,.4); opacity:.6; transition:opacity .15s ease; }
#leafStrip .sp img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .25s ease; }
#leafStrip .sp img.ld { opacity:1; }
#leafStrip .sp.sel { opacity:1; box-shadow:inset 0 0 0 1.5px var(--gold,#e9c46a); z-index:1; }
#leafStrip .rl { position:absolute; left:3px; top:3px; z-index:2; font:600 7px/1 var(--ui); letter-spacing:.1em; text-transform:uppercase; color:#fff;
text-shadow:0 1px 3px rgba(0,0,0,.95); white-space:nowrap; pointer-events:none; }
#leafStrip .sp { contain:layout style; overflow:visible; }
html body:not(.brief-open) #leaf { left:50% !important; top:2px !important; z-index:4; }
html body:not(.brief-open) #leafName { left:50% !important; right:auto; transform:translateX(-50%); top:auto !important; bottom:3px; z-index:4; width:max-content; max-width:64%;
padding:2px 8px; border-radius:9px; background:rgba(0,0,0,.62); font:500 9px/12px var(--ui); letter-spacing:.06em; text-align:center; text-shadow:none; }
html body:not(.brief-open) #leafSearch { position:absolute; right:6px; top:13px; margin:0; z-index:5; width:44px; height:44px;
background:rgba(8,11,10,.72) !important; border:.5px solid rgba(255,255,255,.3); }
@media (max-width:600px) {
/* the screen answers a tile tap at once: pressed look, then a veil over the map while feed.html loads */
#tile button.press { filter:brightness(1.25); transform:scale(.96); }
#tile .tm.press { transform:scale(.97); }
body.ps-leaving::after { content:''; position:fixed; inset:0; z-index:9999; background:#05080a; opacity:0; pointer-events:none; animation:psveil .16s ease-out forwards; }
@keyframes psveil { to { opacity:.92; } }
/* The bottom stack is position:absolute like #pickWrap it stands on, not fixed:
a fixed bottom is measured against the layout viewport and an absolute one
against the body, and Android Chrome's emulation reports them 9 px apart --
enough to slide the bar over the slider's name line. */
/* 8. THE BAR: Join / World / Regions / 4/825 / Unfilmed / People. One row,
one slab. Sun is not a button here (shell.js keeps the function). */
html body:not(.brief-open) #panel#panel { position:absolute; z-index:9; left:8px !important; right:8px !important; width:auto !important; min-width:0 !important; max-width:none !important;
bottom:calc(var(--pick-h, var(--ps-pick)) + 2px) !important; height:var(--ps-panel); padding:0 !important; gap:0 !important;
display:flex; flex-wrap:nowrap !important; align-items:stretch; justify-content:stretch !important; overflow:visible !important; box-sizing:border-box;
border-radius:17px; background:var(--ps-glass); border:var(--ps-edge); box-shadow:var(--ps-lift);
-webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); }
html body:not(.brief-open) #panel#panel button { position:relative; flex:1 1 auto; min-width:0; height:100%; min-height:0 !important;
margin:0; padding:0 4px !important; display:flex; align-items:center; justify-content:center;
background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
-webkit-backdrop-filter:none !important; backdrop-filter:none !important;
font:500 9.5px/1 var(--ui) !important; letter-spacing:.08em !important; text-transform:uppercase; color:#f3efe4 !important; }
html body:not(.brief-open) #panel#panel button + button::before { content:''; position:absolute; left:0; top:9px; bottom:9px; width:.5px; background:rgba(255,255,255,.2); }
html body:not(.brief-open) #panel#panel button::after { content:''; position:absolute; inset:-6px 0; }
html body:not(.brief-open) #panel#panel button.claim { color:var(--warm,#ffe6c2) !important; border-radius:17px 0 0 17px !important; }
html body:not(.brief-open) #panel#panel button:last-child { border-radius:0 17px 17px 0 !important; }
html body:not(.brief-open) #panel#panel button.on { color:var(--gold,#e9c46a) !important; }
html body:not(.brief-open) #panel#panel button:active { background:rgba(233,196,106,.2) !important; }
html body:not(.brief-open) #panel #sunBtn { display:none !important; }
/* 7. THE LATEST CONTRIBUTION: one tile, 70 px, above the bar. */
html body:not(.brief-open) #recent { display:none !important; }
html body:not(.brief-open) #tile { display:flex; position:absolute; z-index:8; left:8px; right:8px; height:70px; gap:8px;
bottom:calc(var(--pnl-h, var(--ps-stack)) + 4px); transition:opacity .45s ease; contain:layout paint; }
#tile[hidden] { display:none !important; }
#tile .tm { position:relative; flex:0 0 124px; width:124px; height:70px; padding:0; margin:0; min-height:0 !important; border-radius:10px;
overflow:hidden; border:.5px solid rgba(255,255,255,.28) !important; background:#10171a !important; cursor:pointer;
-webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 3px 10px rgba(0,0,0,.4); }
#tile .tm img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .35s ease; }
#tile .tm img.ld { opacity:1; }
#tile .tm .pl { position:absolute; right:5px; bottom:5px; width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.55); }
#tile .tm .pl::before { content:''; position:absolute; left:6px; top:4.5px; border-left:6px solid #fff; border-top:3.5px solid transparent; border-bottom:3.5px solid transparent; }
#tile .tm .rg { position:absolute; left:0; right:0; bottom:0; padding:10px 6px 3px; font:500 8px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase;
color:#fff; background:linear-gradient(0deg, rgba(0,0,0,.7), transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
#tile .tm::after { content:''; position:absolute; inset:-1px; }
#tile .tr { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; justify-content:space-between; padding:0 2px; }
#tile .tw { position:relative; display:flex; align-items:center; gap:7px; height:26px; min-height:0 !important; padding:0; margin:0;
background:none !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none;
color:#f3efe4; text-align:left; max-width:100%; text-transform:none; letter-spacing:.02em; font:500 12px/1.15 var(--sans); }
#tile .tw::before { content:''; position:absolute; inset:-9px -8px; }
#tile .tw .av { flex:0 0 26px; width:26px; height:26px; border-radius:50%; object-fit:cover; background:#26382d; border:1px solid rgba(233,196,106,.7);
display:flex; align-items:center; justify-content:center; font:600 11px/24px var(--ui); color:#ffe6c2; text-align:center; overflow:hidden; box-sizing:border-box; }
#tile .tw .nm { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 6px rgba(0,0,0,.8); }
#tile .tw .nm i { display:block; font-style:normal; font-size:9px; color:rgba(255,255,255,.66); letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; }
#tile .ta { display:flex; align-items:center; justify-content:flex-start; gap:0; height:36px; }
#tile .ta button { position:relative; flex:0 0 44px; width:44px; height:36px; min-height:0 !important; padding:0; margin:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:1px; background:none !important; border:0 !important; box-shadow:none !important;
-webkit-backdrop-filter:none; backdrop-filter:none; border-radius:10px; color:#f3efe4; font:500 8px/1 var(--ui); letter-spacing:.06em; text-transform:uppercase; }
#tile .ta button::before { content:''; position:absolute; inset:-4px 0; }
#tile .ta button svg { width:19px; height:19px; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
#tile .ta button[aria-pressed="true"] { color:var(--gold,#e9c46a); }
#tile .ta button:active { background:rgba(233,196,106,.18) !important; }
#tile.swap { opacity:.0; }
/* chrome that steps aside, the same way its siblings do */
body.arriving #pbar, body.arriving #shareCount, body.arriving #tile, body.arriving #psToast,
body.plate-open #pbar, body.plate-open #shareCount, body.plate-open #whySheet, body.plate-open #tile, body.plate-open #humBtn,
body.card-open #tile,
body.brief-open #pbar, body.brief-open #shareCount, body.brief-open #tile, body.brief-open #psToast,
body.asking #tile { opacity:0 !important; pointer-events:none !important; }
/* the card is a bottom sheet on a phone, so the camera and I-am have nothing to dodge */
html body.card-open:not(.brief-open) #locate, html body.card-open:not(.brief-open) #quickCam { opacity:1 !important; pointer-events:auto !important; }
body.brief-open #pbar, body.brief-open #shareCount, body.brief-open #tile { display:none !important; }
/* THE CREDIT LINE: one tiny horizontal strip in the top 10 px, above the
Dynamic Island (which starts at 11 pt). Josh, 5 Oct: the (i) button is gone
and the credits are a hairline. Still a licence requirement (NASA, USGS,
AWS/Mapzen, RESOLVE CC BY 4.0, Natural Earth): present, one line, ellipsed,
no taps. map-core.js builds the control non-compact so there is no button. */
html body .maplibregl-ctrl-bottom-right, html body .maplibregl-ctrl-bottom-left {
bottom:auto !important; top:0 !important; left:0 !important; right:0 !important; width:auto; height:10px; z-index:60; pointer-events:none; }
html body .maplibregl-ctrl-bottom-right .maplibregl-ctrl, html body .maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin:0; float:none; }
html body .maplibregl-ctrl-attrib { display:block; max-width:none; height:10px; padding:0 18px; margin:0; background:transparent !important; box-sizing:border-box;
font:400 7px/10px var(--ui, system-ui, sans-serif); letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; color:rgba(255,255,255,.42) !important; pointer-events:none; }
html body .maplibregl-ctrl-attrib a { color:rgba(255,255,255,.5) !important; }
html body .maplibregl-ctrl-attrib-inner { display:inline; line-height:inherit; }
html body .maplibregl-ctrl-attrib-button { display:none !important; }
/* THE MISSION SHEET: glass like the top bar, over the map, no layout shift
(fixed, transform/opacity only). */
#shareCount .sh { pointer-events:auto; position:relative; background:none; border:0; margin:0; padding:0; min-height:0 !important;
font:inherit; letter-spacing:.1em; text-transform:inherit; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(255,230,194,.45); text-underline-offset:2px; }
#shareCount .sh::before { content:''; position:absolute; inset:-14px -10px; }
html body:not(.brief-open) #shareCount { overflow:visible; }
#whySheet { position:fixed; inset:0; z-index:60; }
#whySheet[hidden] { display:none; }
#whySheet .ws-scrim { position:absolute; inset:0; background:rgba(0,0,0,.28); opacity:0; transition:opacity .16s ease; }
#whySheet .ws-card { position:absolute; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); top:calc(var(--ps-bar-t) + 20px);
overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; box-sizing:border-box; padding:14px 18px 28px; border-radius:18px;
background:var(--ps-glass); -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
border:var(--ps-edge); box-shadow:var(--ps-lift); color:rgba(255,255,255,.88); font:400 15px/1.5 var(--ui);
transform:translateY(24px); opacity:0; transition:transform .16s ease, opacity .16s ease; outline:none; will-change:transform; }
#whySheet.on .ws-scrim { opacity:1; }
#whySheet.on .ws-card { transform:none; opacity:1; }
#whySheet .ws-grab { width:38px; height:4px; border-radius:2px; background:rgba(255,255,255,.35); margin:0 auto 10px; }
#whySheet .ws-x { position:absolute; right:8px; top:8px; width:44px; height:44px; min-height:0 !important; border-radius:50%; padding:0; margin:0;
background:rgba(255,255,255,.1); border:var(--ps-edge); color:#fff; font:300 26px/1 var(--ui); }
#whySheet .ws-k { font:500 10px/1 var(--ui); letter-spacing:.2em; text-transform:uppercase; color:rgba(255,230,194,.9); margin:0 48px 14px 0; }
#whySheet h1 { font:500 24px/1.2 var(--serif, Georgia, serif); margin:0 0 12px; color:#fff; }
#whySheet h1 em { color:var(--gold,#e9c46a); }
#whySheet h2 { font:600 11px/1.3 var(--ui); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,230,194,.9); margin:22px 0 8px; }
#whySheet p, #whySheet li { margin:0 0 10px; }
#whySheet ul { padding-left:20px; margin:0 0 10px; }
#whySheet a { color:rgba(255,230,194,.95); }
#whySheet .card { margin:0 0 10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); border:.5px solid rgba(255,255,255,.14); }
#whySheet .card b { display:block; margin-bottom:4px; color:#fff; }
#whySheet .card p { margin:0; font-size:14px; }
#whySheet .stand { font-size:15px; color:rgba(255,255,255,.82); }
#whySheet .ws-w { color:rgba(255,255,255,.6); }
body.ps-leaving #whySheet { display:none; }
}
@media (max-width:600px) {
/* TAP-THROUGH (simulator, 5 Oct): the counter, the empty part of the tile row and
the gutters let taps fall to the map, which flew to a region. #psTop covers
the title row, the bar row and the counter row edge to edge; #psBottom covers
the tile row, the bar and the strip, gutters and gaps included. They draw
nothing, sit under the controls, and a DOM element over the canvas means the
map never sees the gesture. */
html body:not(.brief-open) #psTop { display:block; position:fixed; z-index:5; left:0; right:0; top:0; height:calc(var(--ps-bar-t) + 52px); }
html body:not(.brief-open) #psBottom { display:block; position:absolute; z-index:7; left:0; right:0; bottom:0;
height:calc(var(--pnl-h, var(--ps-stack)) + 4px + 70px + 6px); }
body.arriving #psTop, body.arriving #psBottom, body.plate-open #psTop, body.plate-open #psBottom,
body.brief-open #psTop, body.brief-open #psBottom { display:none !important; }
html body:not(.brief-open) #shareCount { pointer-events:auto; }
html body:not(.brief-open) #key { pointer-events:auto; }
html body:not(.brief-open) #hud { pointer-events:none; }
/* the counter's link: 44 px to touch, 17 px to look at */
#shareCount .sh { min-height:17px; }
#shareCount .sh::before { inset:-14px -12px; }
/* THE TILE ROW IS A SLAB, the same glass as the button bar, so map labels cannot
run through the name and the icons. The picture is flush on its left edge. */
html body:not(.brief-open) #tile { left:8px; right:8px; gap:0; padding:0; border-radius:12px; overflow:hidden;
background:var(--ps-glass), rgba(8,11,10,.5); border:var(--ps-edge); box-shadow:var(--ps-lift); box-sizing:border-box;
-webkit-backdrop-filter:blur(14px) saturate(1.5); backdrop-filter:blur(14px) saturate(1.5); contain:none; }
html body:not(.brief-open) #tile .tm { border-radius:0 !important; border:0 !important; box-shadow:none; height:100%; flex:0 0 124px; }
html body:not(.brief-open) #tile .tr { padding:2px 8px 0 8px; }
/* the name button was stretched across the whole column, so the empty space right of the name opened the profile */
#tile .tw { align-self:flex-start; }
}
@media (max-width:600px) and (prefers-reduced-motion:reduce) {
html body #pbar, html body #search, #tile, #tile .tm img { transition:none !important; }
}
/* The credit hairline belongs to the map; Home (brief-open) covers it. */
@media (max-width:600px) { html body.brief-open .maplibregl-ctrl-bottom-right, html body.brief-open .maplibregl-ctrl-bottom-left { display:none !important; } }
/* Hardening (Josh's 393 pt phone, 5 Oct): the bar's controls are placed from the
viewport and must never fall back into flow, whatever else touches them. */
@media (max-width:600px) {
html body:not(.brief-open) #quickCam, html body:not(.brief-open) #locate, html body:not(.brief-open) #search { position:fixed !important; }
}