/* explore-panel.css — the Explore panel as one thing: two verbs, one search, colour-coded sections.
   Loaded after experience.css, which still owns the panel shell (glass, gutters, the phone sheet, the
   sticky action bar). Nothing here invents a colour, a face or a radius: every value is one of that
   sheet's tokens, or one of the eleven section hues, which are the only new colours on the page. */

/* ---------- the two verbs ---------- */
#exploreMode{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin:0 0 10px;padding:3px;
  border:1px solid var(--edge);border-radius:var(--pill);background:var(--glass-lite)}
#exploreMode button{min-height:38px;padding:6px 10px;border:0;border-radius:var(--pill);background:none;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--muted);white-space:nowrap;
  font-variation-settings:'opsz' 48}
#exploreMode button:hover{background:rgba(255,255,255,.09);color:var(--ink)}
#exploreMode button.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 16px rgba(240,184,96,.24)}
#exploreMode button.primary:hover{background:var(--accent-hi)}

/* ---------- the sections, as tiles ---------- */
/* Pierce, 2026-09-19: "cant these all be icons almost? surely something exists.. yet icons could do most
   of this". Eleven full-width pills were 492 px of panel for eleven words and eleven numbers, and the
   eleventh, Health, sat below the bottom edge where nobody ever saw it. Three columns is the widest the
   panel can carry with the NAME still reading in full on every tile -- LANDMARKS and SERVICES are the two
   that decide it, and at four columns they ellipsise, which is the failure the whole change is trying to
   avoid. Three columns, four rows, and Health is on screen.

   THE MARK IS HIS MASCOT NOW, AND THERE IS ONE OF HIM. Pierce, 2026-09-19, first: "The icons are lame",
   which turned eleven stroked glyphs into eleven films of his own water tower cut out of one sprite
   sheet. Then, seeing those films in a 93x58 tile beside the sky card that had just become one portrait
   card: "remember these are portrait so thumbs need to be portrait. and you can do the bottom like the
   top one so one tower at a time."

   So this is the sky card's twin, deliberately, down to the arrow size and the dot row -- the panel is
   one idea twice rather than two ideas stacked. The card is full width and the film is fitted by HEIGHT
   inside a capped box, so a 4:5 tower is never cropped and never letterboxed against a foreign colour:
   explore-panel.js writes --cat-top and --cat-bot from the same wash() the slicer baked into the MP4.
   The name, the count and the verb ride a gradient band along the bottom, and the whole card is the
   button that starts the tour. */
#categoryList{display:block;margin:12px 0 0}
.cat-card{position:relative;width:100%;margin:0}
.places .cat-card .cat-face{position:relative;display:block;width:100%;height:clamp(150px,26dvh,204px);
  margin:0;padding:0;overflow:hidden;
  border:1px solid var(--edge);border-radius:var(--r-sm);
  background:linear-gradient(180deg,var(--cat-top,#1b2630),var(--cat-bot,#0a1016));
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:border-color .18s,box-shadow .18s}
/* height:100%, width:auto -- never object-fit:cover. Cover would crop a 4:5 portrait by cutting his head
   and his feet off, and the feet are where the shopping bags and the plinth are. */
.places .cat-card .cat-face video{position:absolute;top:0;left:50%;transform:translateX(-50%);
  display:block;height:100%;width:auto;max-width:none}
.places .cat-card .cat-face .cat-name{position:absolute;left:0;right:0;bottom:0;display:grid;gap:1px;
  padding:34px 13px 10px;text-align:left;
  background:linear-gradient(0deg,rgba(6,10,14,.84),rgba(6,10,14,0))}
.cat-card .cat-name b{font-family:var(--ui);font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.9)}
/* AND IT HAS TO LOOK PRESSABLE. Pierce, 2026-09-20: "When I cycle through the tours I don't know to
   actually click a tour." He was right and it was my fault: the two arrows are obviously controls, so
   the eye reads the whole thing as a browser, and "Fly all 14" set as a quiet caption underneath does
   not say press me -- it says here is a fact. It is a chip now, with the same play triangle the
   flyover card above it uses, in the category's own colour. One glance says the arrows change it and
   the chip starts it. */
.cat-card .cat-name em{display:inline-flex;align-items:center;gap:6px;justify-self:start;
  font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  margin-top:3px;padding:5px 11px 5px 9px;border-radius:var(--pill);
  border:1px solid color-mix(in srgb,var(--cat,#fff) 55%,transparent);
  background:color-mix(in srgb,var(--cat,#fff) 20%,rgba(6,10,14,.55));
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.cat-card .cat-name em::before{content:'';flex:none;width:0;height:0;
  border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (hover:hover){.places .cat-card .cat-face:hover .cat-name em{
  background:color-mix(in srgb,var(--cat,#fff) 34%,rgba(6,10,14,.5));border-color:var(--cat,#fff)}}
/* how many places are in there, in the corner the tiles always kept it in */
.cat-card .cat-num{position:absolute;top:9px;right:12px;z-index:2;font-style:normal;
  font-family:var(--ui);font-size:13px;font-weight:700;line-height:1;color:var(--cat,#fff);
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums lining-nums}
@media (hover:hover){.places .cat-card .cat-face:hover{border-color:var(--cat)}}
.places .cat-card .cat-face.on{border-color:var(--cat);box-shadow:0 0 0 1px var(--cat)}
.cat-card .cat-face.on .cat-name em{background:rgba(6,10,14,.6);border-color:var(--cat);color:var(--cat)}
.cat-card .cat-face.on .cat-name em::before{display:none}
.places .cat-card .cat-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:grid;place-items:center;width:38px;height:38px;min-height:38px;margin:0;padding:0 0 3px;
  border:1px solid rgba(255,255,255,.24);border-radius:50%;
  background:rgba(8,12,18,.5);box-shadow:none;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  font-family:var(--ui);font-size:23px;font-weight:400;line-height:1;color:#fff;
  transition:border-color .18s,color .18s,background .18s}
.cat-card .cat-arrow.prev{left:9px}
.cat-card .cat-arrow.next{right:9px}
/* THE ARROWS WEAR THE CATEGORY. Pointing at one tells you the colour of the thing you are about to walk
   into -- Beaches teal, Schools orange -- which is the whole point of letting the hue out of the card.
   Only on hover and focus: eleven glowing rings sitting on the artwork all the time would be louder than
   the tower. */
.places .cat-card .cat-arrow:hover,.places .cat-card .cat-arrow:focus-visible{
  background:rgba(8,12,18,.82);border-color:var(--cat,rgba(255,255,255,.46));color:var(--cat,#fff)}
/* where you are in the eleven, and which one is out touring */
.cat-dots{position:absolute;left:0;right:0;top:9px;z-index:2;display:flex;justify-content:center;gap:5px;
  pointer-events:none}
.cat-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);
  box-shadow:0 1px 3px rgba(0,0,0,.6);transition:transform .15s,background .15s}
/* lit is the one that is out touring, and it keeps its own hue even while you browse past it */
.cat-dots i.lit{background:var(--cat,rgba(255,255,255,.6))}
.cat-dots i.at{background:var(--cat,#fff);transform:scale(1.4);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.6)}

/* ---------- the one drawer ---------- */
/* Opening a section used to push every section below it down the panel and off the bottom. The grid holds
   still now and the places arrive underneath it, so you can still see where you are while you read. */
.cat-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--cat,#a8b4be);opacity:.6}

/* ---------- one search ---------- */
#searchResults{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin:12px 0 0}
.sug{display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:8px 13px;text-align:left;
  border:1px solid transparent;border-radius:var(--r-sm);background:var(--glass-lite);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.sug strong{flex:1;min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug small{flex:none;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.sug.on,.sug:hover{background:rgba(255,255,255,.12);border-color:var(--edge-hi)}
/* a street is a line and a place is a dot, so the two kinds read apart before the word does */
.sug-street{width:15px;height:2px;border-radius:2px;flex:none;background:var(--muted)}

/* ---------- the coastal flyover, moved off the bottom bar ---------- */
/* Pierce, 2026-09-19: "the fly winthrop should say fly here instead of the coastal flyover. maybe the
   coastal flyover should be what loads on pageload". It does now, so it is no longer the bottom button.
   It keeps a home directly under the two verbs as one quiet line with a play triangle -- an offer to see
   it again, not a third action competing with the two at the bottom. Drive mode never shows it. */
/* AMENDED 2026-09-20. Pierce, looking at it on his phone: "Coastal flyover is also so minimal that
   this easy to pass." He is right, and it is the worst thing in the panel to lose: seventy seconds of
   the whole town is the single best thing this site has to hand somebody who has just arrived, and it
   was a 13 px amber line with a 7 px triangle.

   It is a card now, because that is what this panel is made of. The sky is a card, each category is a
   card, and the rule the container-stripping pass settled is that INSIDE the sheet things are objects
   and OUT ON THE TOWN they are words. So this is the third object and the first one you meet, with the
   accent on it, a heading that says what happens and a line that says what you get. Short rather than
   tall -- it is an offer, not a picture, and the two picture cards below it must stay the biggest
   things in the sheet. */
.places #tour{position:relative;display:grid;gap:2px;
  width:100%;min-height:58px;margin:0 0 10px;padding:12px 14px 12px 34px;
  border:1px solid color-mix(in srgb,var(--accent) 46%,transparent);border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-align:left;
  transition:background .18s,border-color .18s}
.places #tour b{font-family:var(--ui);font-size:13.5px;font-weight:750;letter-spacing:.01em;color:var(--accent)}
.places #tour em{font-style:normal;font-size:11.5px;font-weight:600;line-height:1.35;
  color:rgba(255,255,255,.62);text-wrap:pretty}
.places #tour::before{content:'';position:absolute;left:14px;top:50%;margin-top:-6px;width:0;height:0;
  border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent}
.places #tour:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent)}
/* it flies in either mode -- a flyover is a flyover -- so drive mode no longer hides it */
@media (pointer:coarse){.places #tour{min-height:64px}}

/* ---------- the two ways in, one per mode ---------- */
/* The mode decides which pair the bar carries, so there is never a Fly button beside a Drive button.
   The two pairs are the same shape on purpose: a primary that takes you to what you picked, and a quiet
   one underneath that hands you the controls. Fly here / Fly myself, Drive here / Auto drive. */
.places .explore-actions{grid-template-columns:1fr}
.places[data-mode=fly] .explore-actions #drive,.places[data-mode=fly] .explore-actions #goDrive{display:none}
.places[data-mode=drive] .explore-actions #flyHere,.places[data-mode=drive] .explore-actions #flyMyself{display:none}
.explore-actions #flyHere{min-height:46px;font-size:15px}
/* Auto drive was a 40px text link when it shared the bar with two others; alone under Drive here it is
   a real target, and Fly myself matches it. */
.places[data-mode=drive] .explore-actions #goDrive{min-height:44px}
.explore-actions #flyMyself{min-height:38px;font-size:13px;background:var(--glass-lite);box-shadow:none}
.explore-actions #flyMyself:hover{background:rgba(255,255,255,.14);border-color:var(--edge-hi)}

/* ---------- the spot card follows the mode too ---------- */
/* Tap a place and a card comes up over the town. It offered Drive here and Auto drive here in both modes,
   which put a Drive-only card in front of somebody who had chosen to fly. Same rule as the bottom bar:
   the mode decides. Nothing existing changed behaviour -- Center here is still Center here -- one button
   was added and the other pair hides. */
#spotFly{display:none}
body[data-explore-mode=fly] #spotFly{display:inline-flex;align-items:center;justify-content:center}
body[data-explore-mode=fly] #spotDrive,body[data-explore-mode=fly] #spotCruise{display:none}

/* ---------- studio bookkeeping ---------- */
/* The coverage map, the six old ride cards and the four scenery shortcuts stay in the page because app.js
   reaches for them at load; they are not places, so a visitor never sees them. ?studio=1 brings them back. */
body:not(.studio) #studioTools{display:none}
#studioTools{border-top:1px solid var(--edge);margin:18px 0 0;padding-top:10px}

/* A thumb gets the same 44px here as everywhere else, whatever the width says. */
@media (pointer:coarse){.places .cat-card .cat-arrow{width:44px;height:44px;min-height:44px}
  #exploreMode button{min-height:44px}}

/* ---------- phone ---------- */
@media (max-width:700px), (max-width:950px) and (max-height:460px){
  aside.places>#sheetBar{order:-5}
  aside.places>#exploreMode{order:-4}
  aside.places>#tour{order:-4}   /* ties fall back to source order, so the flyover line stays under the verbs */
  aside.places>.searchrow{order:-3}
  aside.places>#searchstatus{order:-2}
  aside.places>#searchResults{order:-2}
  aside.places>.explore-actions{order:-1}
  #exploreMode{margin:4px 0 6px;padding:3px}
  #exploreMode button{min-height:44px;font-size:15px}
  .searchrow{margin-top:4px}
  #categoryList{margin-top:10px}
  .places .cat-card .cat-face{height:clamp(146px,22dvh,190px)}
  #searchResults{margin-top:8px}
  /* the phone is where he lost it, so it does not shrink here -- it is the first thing in the sheet
     and it keeps its full weight */
  .places #tour{margin:0 0 9px;min-height:64px;padding:12px 14px 12px 32px}
  .places #tour b{font-size:14px}
  .places #tour em{font-size:12px}
  /* Drive mode is one action, full width: on a phone the header already carries Drive here, so the bar
     is just Auto drive. Fly mode has no header twin, so both of its actions stay -- side by side, because
     the sheet is only 46dvh tall and two stacked buttons would eat the list. */
  .explore-actions{grid-template-columns:1fr}
  .places[data-mode=fly] .explore-actions{grid-template-columns:1.55fr 1fr}
  .explore-actions #flyHere{min-height:46px;font-size:14px;padding:8px 10px}
  .explore-actions #flyMyself{min-height:46px;font-size:12.5px;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ================================================================================================
   ONE BAR, ONE CARD, ONE SKY — the consolidation of 2026-09-19.

   Pierce, looking at the live site: "there's so many repetitive button options that compete and its
   even missing the ill fly button that temporarily is at the bottom of the screen and its on the left
   and the bottom always has buttons and... you can drive or fly winthrop. you can click day or night
   or weather (sun,moon,snow,raincloud icons, etc. surely we can find the universes most simplistic way
   to do this so its just fun. it still feels complicated somehow if that makes sense"

   The same four verbs were on screen under four names in four places: Fly here was in the panel foot
   AND on the map card; Drive here was in the header AND the panel foot AND the card; Auto drive was in
   the panel AND the card AND the cockpit; Fly myself was in the panel AND a pill floating over
   everything. Nothing below removes a power. It removes second and third copies of one.

   Everything here overrides experience.css rather than editing it: another session had that file open.
   ================================================================================================ */

/* ---------- the one bar ---------- */
#gobar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + var(--sab));z-index:9;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;padding:4px;
  max-width:calc(100vw - 24px);
  border:1px solid var(--edge);border-radius:var(--pill);background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow)}
#gobar>button{display:none;align-items:center;justify-content:center;margin:0;min-height:40px;padding:9px 20px;
  border:0;border-radius:var(--pill);background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--muted);
  white-space:nowrap;font-variation-settings:'opsz' 48}
#gobar>button:hover{background:rgba(255,255,255,.1);color:var(--ink)}
#gobar>button.primary{background:var(--accent);color:var(--accent-ink)}
#gobar>button.primary:hover{background:var(--accent-hi)}
#gobar #tourDrive{background:var(--accent);color:var(--accent-ink);font-weight:700}
#gobar #tourDrive:hover{background:var(--accent-hi)}
#gobar #takeStick{position:static;transform:none;bottom:auto;left:auto;border:1px solid var(--edge-hi);
  background:var(--glass-lite);color:var(--ink);font-size:14px;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#gobar #takeStick:hover{background:rgba(255,255,255,.14);border-color:var(--accent)}
#gobar #stopTour{color:var(--muted);font-family:var(--ui);font-weight:600;font-size:13.5px;padding:9px 16px}
#gobar #tourPrev,#gobar #tourNext{width:40px;min-width:40px;padding:0;font-size:24px;font-weight:400;line-height:1;font-family:var(--ui)}
#gobar #tourPrev span,#gobar #tourNext span{display:none}

/* Which of them applies right now. Standing still it is the choice; while something else is flying you
   it is who steers and how to stop; in the car the cockpit's own bar asks the same question, so this one
   goes away rather than becoming a second bottom. */
body:not(.autoflying):not(.touring) #gobar>#modeFly,
body:not(.autoflying):not(.touring) #gobar>#modeDrive{display:inline-flex}
body.autoflying #gobar>#takeStick,body.touring #gobar>#takeStick,
body.autoflying #gobar>#stopTour,body.touring #gobar>#stopTour{display:inline-flex}
body.touring #gobar>#tourDrive{display:inline-flex}
body.tour-flight #gobar>.flightonly{display:inline-flex}
body.driving #gobar,body.flying #gobar,body.opening #gobar{display:none!important}

/* The flyover's caption used to sit on the bottom edge with its own bar under it. The bar is this one
   now, so the caption stops above it instead of behind it. */
.touring #tourOverlay,body.touring #tourOverlay{padding-bottom:calc(84px + var(--sab))}

/* ---------- the panel keeps the WHERE, and only the WHERE ---------- */
/* Fly here / Fly myself / Drive here / Auto drive left the panel foot for the bar and the cockpit.
   They stay in the page because app.js binds them and ?studio=1 still wants them. */
body:not(.studio) .explore-actions{display:none}
/* the suggestion list and the Enter key answer the search; a Find button was a third way to say it.
   It stays in the DOM: explore-panel.js clicks it to route a street through app.js's own resolver. */
body:not(.studio) #findroad{display:none}
body:not(.studio) .searchrow{grid-template-columns:1fr}
/* Eleven sections each carried a Fly all, so eleven copies of the verb were on screen at once. The one
   drawer is the only place it lives now, and the drawer is only there when a category is open. */
/* the sky moved out of the disclosure and became the mascots; the disclosure is map layers now */
body:not(.studio) #settings .sky{display:none}
/* Pierce, 2026-09-19, looking at the open Map layers section: "Do we need any of these things at the
   bottom that mess up this otherwise clean menu". Mostly no. Aerial-versus-3D, road outlines, building
   outlines, the sign/pole/hydrant layer and photograph geometry are all tools for building the town, not
   for visiting it; they keep working behind ?studio=1. What a visitor keeps is the two that change what
   the town looks like to them: the names, and the people on the streets. */
body:not(.studio) #settings [data-studio]{display:none}

/* ---------- the sky, as the mascot ---------- */
#skyRow{margin:12px 0 0}
/* five skies, five tiles. Pierce sent the overcast tower on 09-19, which closes the one gap the strip
   had: live weather could put the town under a grey lid that no tile could reach. */
.sky-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.sky-tiles button{position:relative;display:block;width:100%;aspect-ratio:4/5;margin:0;padding:0;overflow:hidden;
  border:1px solid var(--edge);border-radius:var(--r-sm);background:rgba(255,255,255,.05);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-height:0}
.sky-tiles button video{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) brightness(.82);transition:filter .2s}
.sky-tiles button:hover video,.sky-tiles button.on video{filter:none}
.sky-tiles button .sky-name{position:absolute;left:0;right:0;bottom:0;padding:9px 3px 3px;
  font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);
  background:linear-gradient(0deg,rgba(6,10,14,.72),rgba(6,10,14,0));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sky-tiles button.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* THE SIXTH SKY. Night was a 30x28 moon pill in the foot line below; it is a tile now, the full width of
   the strip, in the same language as the five above it -- one border, one radius, the name in the same
   uppercase band along the bottom, the same dim-until-chosen treatment the mascot films get. Full width
   rather than a sixth column because five films at 49 px are already the smallest they read at, because
   the picture it carries is a skyline, and because night is not a sixth weather: it applies over whichever
   of the five you are in, and a differently shaped tile says that before you press it. The aspect-ratio
   matches the drawing's viewBox, so the town is never stretched at any panel width. */
.sky-night{position:relative;display:block;width:100%;aspect-ratio:260/62;margin:5px 0 0;padding:0;overflow:hidden;
  border:1px solid var(--edge);border-radius:var(--r-sm);background:#0a1524;min-height:0;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  filter:saturate(.86) brightness(.86);transition:filter .2s,border-color .2s,box-shadow .2s}
.sky-night svg{display:block;width:100%;height:100%}
.sky-night .sky-name{position:absolute;left:0;right:0;bottom:0;padding:11px 10px 4px;text-align:left;
  font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.9);
  background:linear-gradient(0deg,rgba(6,10,14,.72),rgba(6,10,14,0))}
.sky-night:hover{filter:none;border-color:var(--edge-hi)}
.sky-night[aria-pressed=true]{filter:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sky-foot{display:flex;align-items:center;gap:8px;margin:0}

/* ---------- cycling a tour from inside the car ----------
   The flyover's two arrows live in the one bar at the bottom. In the car that bar is gone, so driving.js
   puts the same two on the tour line, which is already the sentence saying which stop you are on. They
   are here rather than in experience.css for the reason at the top of this file: another session has
   that one open. */
.driveheading .tourstep-row{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin-top:8px}
body.driving .driveheading .tourstep-row #tourLine{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.driveheading .tourstep{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;min-width:34px;height:34px;min-height:34px;margin:0;padding:0;
  border:1px solid var(--edge-hi);border-radius:50%;background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:none;text-shadow:none;
  font-family:var(--ui);font-size:19px;font-weight:400;line-height:1;color:var(--ink);pointer-events:auto}
.driveheading .tourstep:hover{background:rgba(255,255,255,.16);border-color:var(--accent);color:#fff}
@media (pointer:coarse){.driveheading .tourstep{width:44px;min-width:44px;height:44px;min-height:44px;font-size:22px}}
/* A phone caps the heading at 27vw so the minimap clears it. A tour needs more than 101 px: the line, the
   stop it is going to and two 44 px targets. The cap is lifted only while a tour is running, and only as
   far as the minimap's own edge. */
@media (max-width:700px){
  body.driving.drive-tour .driveheading{max-width:calc(100vw - 132px - var(--sar))!important}
  /* NOT flex-wrap. Tried it and the row broke into three lines with an arrow stranded above and below
     the sentence -- the same shape as the flyover bar's two-row bug on this screen. The line ellipsises
     instead; the two arrows stay on its ends where a thumb expects them. */
  .driveheading .tourstep-row{gap:6px;margin-top:6px}
}

/* ---------- the map card says where you are, not what you could do there ---------- */
/* Tapping a building already flew you to it, so Fly here and Center here were offering what had just
   happened, and Drive here is the bar's job. The card is the name and a way to dismiss it. */
body:not(.studio) #spotActions>div{display:none}
/* the header's Drive here is the bar's Drive at every width now, not only on a desktop */
body:not(.driving) header #driveCurrent{display:none}

/* ---------- the view pills ---------- */
/* Three was a fourth cluster at the bottom. Auto orbit went: a drag already orbits by hand, and Fly
   ends in the same slow orbit on its own, so the button was the third way to ask for it. Top view and
   Reset view are the two the town cannot give you any other way. */
body:not(.studio) .camera #orbit{display:none}

@media (pointer:coarse){
  #gobar>button{min-height:44px}
  #gobar #tourPrev,#gobar #tourNext{width:44px;min-width:44px}
}

/* ---------- phone ---------- */
@media (max-width:700px), (max-width:950px) and (max-height:460px){
  /* THE SKY GOES UNDER THE CATEGORIES ON A PHONE. It was ordered above them when it was a 61 px strip of
     five thumbnails; as a 190 px card it pushed the thing people opened the sheet FOR below the fold of a
     44dvh sheet -- which is the "Explore Winthrop is too buried" he already caught once. The weather is a
     setting and the categories are the point, so the point is first and the setting is a scroll away. */
  aside.places>#skyRow{order:2}
  aside.places>#categoryList{order:1}
  #skyRow{margin:8px 0 2px}
  .sky-tiles{gap:5px}
  .sky-tiles button .sky-name{font-size:9px}
  .sky-night .sky-name{font-size:10px;padding:12px 12px 5px}
  /* The sheet owns the bottom of a phone, so the one bar sits directly on top of it and the view pills
     move up a row rather than sharing the line. During a flyover the pills go entirely: nothing about
     Top view helps while the town is flying past. */
  #gobar{bottom:calc(min(44dvh,420px) + 10px);gap:3px;padding:3px}
  #gobar>button{padding:9px 14px;font-size:14px}
  #gobar #stopTour{padding:9px 12px;font-size:12.5px}
  body:has(aside.places.collapsed) #gobar{bottom:calc(72px + var(--sab))}
  .camera,body:not(.driving) .camera{bottom:calc(min(44dvh,420px) + 64px)!important}
  body:has(aside.places.collapsed) .camera{bottom:calc(126px + var(--sab))!important}
  body.touring .camera{display:none}
  /* The collapsed-sheet rule above lifts the bar 72 px to clear the Explore pill, and :has() carries the
     specificity of its argument -- aside.places.collapsed, two classes -- so it was beating this one and
     winning by more than it looks. During a flyover there is no pill to clear: the sheet is hidden. So the
     bar was floating 52 px higher than the caption's clearance below is written for, and the caption sat
     behind it (measured 697-724 against a bar starting at 688). Matching the :has() makes the more specific
     rule the true one. */
  body.touring #gobar,body.touring:has(aside.places.collapsed) #gobar{bottom:calc(20px + var(--sab))}
  /* one row of bar is 52 px and it floats 20 off the bottom, so 76 left the caption's descenders
     4 px off it. The desktop clearance was already 84. */
  .touring #tourOverlay,body.touring #tourOverlay{padding-bottom:calc(88px + var(--sab))}
}

@media (prefers-reduced-motion:reduce){
  .sky-tiles button video{transition:none}
  #gobar>button,.cat-card .cat-face,.cat-dots i,.cat-dot,#skyNight{transition:none}
}

/* Late corrections to rules the consolidation outgrew. */
/* the flyover shows in both modes: a flyover is a flyover, whichever verb is chosen next */
/* the card is a name and a way out */
body:not(.studio) #spotActions strong{margin-bottom:0}

/* ---------- the colour follows the tour out of the panel ----------
   Pierce, 2026-09-19: "why do we use gold and black, any other colours". Gold is not arbitrary -- it is
   the colour of the lit windows and the streetlights in his own night town, which is why the UI reads as
   part of Winthrop. But it was doing four jobs at once (chosen, primary, live, accent) and the eleven
   section hues that ARE the product's colour never left a 1 px border on a chip.

   So: the category owns the tour it started. explore-panel.js writes --tour-cat on the body when a tour
   begins and removes it when the tour ends, and the two lines that name the tour read it -- the kicker
   over the flyover and the tour line in the car. Every one of the eleven is a pastel and clears 4.5:1 on
   this ground. The fallbacks are exactly the colours these two had before, so nothing changes for the
   coastal flyover or any tour that is not a category. */
#tourOverlay span#tourKicker{color:var(--tour-cat,#f1e3c4)}
body.driving .driveheading #tourLine{color:var(--tour-cat,#ffd9a0)}
.driveheading .tourstep{border-color:var(--tour-cat,var(--edge-hi))}
.driveheading .tourstep:hover{border-color:var(--tour-cat,var(--accent));color:var(--tour-cat,#fff)}

/* ---------- U turn was clipped in the middle-width dock ----------
   Pierce, 2026-09-19, with a photograph of it: "u turn is good, but no icon for u turn and it covered by
   drive myself anyhow". Reproduced at 900 px and measured: the dock gives #turnAround a 44 px box under
   1100 px -- written when it was icon-only, before it got its word back this morning -- and the icon plus
   the label want 62. The overflow paints OUTSIDE the box in both directions, so the icon lands under the
   Drive myself pill (which is why it read as no icon: he was seeing the right-hand half of the arrow) and
   the label runs into More. It is not the icon that is missing, it is the room.

   The box sizes to what is in it, as it already does above 1100 px. min-width keeps the 44 px target for
   a thumb. Not in experience.css for the reason at the top of this file. The phone is untouched: under
   700 px this button is a fixed round 54 px with width:54px!important, which no rule here outranks.

   SECOND PASS, after he said "still overlap on buttons" over a photograph of the dock. Measured at 1000
   px: nothing overlaps -- the boxes run 429-507, 509-592, 594-638, 646-744 with clear gaps, and no label
   paints outside its box. What he is seeing is that U turn was the one button in that row set tighter
   than its neighbours: padding 9/12 against everyone else's 11/11, gap 6 against 8, font 12.5 against 12.
   Every dock button is transparent until you point at one, so the only visible rectangle in the row was
   also the only one sitting 2 px from the word beside it, and it read as a box shoved into Race. Same
   three numbers as Explore and Race now. */
@media (max-width:1100px){
  body.driving .driveactions>#turnAround{width:auto;min-width:44px;padding:0 11px;gap:8px;font-size:12px}
}

/* And the arrow itself, which is the other half of "no icon for u turn": the one it had put the head on
   the leg the journey STARTS on, pointing up -- a car setting off, not a car coming back -- and at 18 px
   that head was a tick. This one goes up the right leg, over the top, down the left, and the head is at
   the END of the journey pointing the way you will then be facing. Rendered at 18, 36 and 150 before it
   was written down, because my first attempt had the arc's sweep flag backwards and drew the loop
   UNDERNEATH: a legible squiggle that would have shipped on his phone as another wrong glyph. */
#turnAround{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 20.5 L16.5 10.5 A4.75 4.75 0 0 0 7 10.5 L7 16'/%3E%3Cpath d='M3.6 12.6 L7 16 L10.4 12.6'/%3E%3C/g%3E%3C/svg%3E")}

/* ---------- THE CHROME STOPS BEING OBJECTS ----------------------------------------------------------
   Pierce, 2026-09-19: "see what i mean about things being too large? the buttons they're too... bulbous?
   cant they float on top with no visible container?"

   Yes, and his own product already proves it: MAIN STREET and 49 MPH in the car are pure type on a
   shadow with nothing behind them, and so is the flyover's caption -- over exactly the same town, at
   every time of day, and both read perfectly. The glass pills are the older idea and they are the reason
   the browsing screen looks heavier than the driving one.

   So the containers go and the words stay. The rules are:
     - the target does not shrink. The padding stays; only the paint goes. 44 px everywhere it was 44.
     - legibility comes from the same two shadows the driveheading uses -- a wide soft one to lift the
       word off a bright aerial and a tight one to hold its edge -- not from a scrim.
     - state is the one thing a container was genuinely carrying, so it moves into the type: the chosen
       verb is gold and heavy, the others are dimmed. Gold already means live-and-on after today's pass.
     - hover is a brightening, not a box. On a touch screen there is no hover at all and nothing is lost.
   Everything here overrides experience.css rather than editing it: another session has that file open. */

/* the one bar: no pill, no border, no blur, no shadow -- two words over the town */
#gobar{padding:0;gap:18px;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#gobar>button{padding:9px 4px;min-height:44px;background:none;color:rgba(246,243,236,.62);
  text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.75);transition:color .18s}
#gobar>button:hover{background:none;color:var(--ink)}
/* chosen is gold and heavy; the alternative is dim. No fill, so nothing is bulbous and the state is
   still readable at a glance from across the room, which a border weight would not be. */
#gobar>button.primary,#gobar>button.primary:hover{background:none;color:var(--accent);
  text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.8)}
#gobar #takeStick,#gobar #takeStick:hover{border:0;background:none;color:rgba(246,243,236,.82);
  text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.75)}
#gobar #takeStick:hover{color:var(--ink)}
/* Drive from here is the primary during a flyover. It keeps the emphasis and loses the lozenge: gold
   type, not a gold slab. */
#gobar #tourDrive,#gobar #tourDrive:hover{background:none;color:var(--accent)}
#gobar #tourPrev,#gobar #tourNext{border:0;background:none;color:rgba(246,243,236,.72)}
#gobar #tourPrev:hover,#gobar #tourNext:hover{background:none;color:var(--ink)}

/* the view pills, which were never worth a container of their own */
.camera,body:not(.driving) .camera{gap:16px;padding:0;border:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.camera button{background:none;color:rgba(246,243,236,.58);
  text-shadow:0 2px 16px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.7);transition:color .18s}
.camera button:hover{background:none;color:var(--ink)}
.camera button.active{background:none;color:var(--accent)}

/* the two in the corner, same treatment, so the top of the screen matches the bottom of it */
header>#fullscreen,header>#info,header>#exploreTown{border:0;background:none;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;color:rgba(246,243,236,.72);
  text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.75);transition:color .18s}
header>#fullscreen:hover,header>#info:hover,header>#exploreTown:hover{background:none;color:var(--ink)}

/* and the one on the opening, which is the first button anybody ever sees here */
#opening .sound{border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  color:rgba(246,243,236,.72);text-shadow:0 2px 18px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.75)}
#opening .sound:hover{border:0;color:var(--ink)}

/* Keyboard focus was riding on the container in several of these. With no container it has to be drawn
   explicitly, or the whole product becomes unnavigable by keyboard in exchange for looking lighter. */
#gobar>button:focus-visible,.camera button:focus-visible,
header>#fullscreen:focus-visible,header>#info:focus-visible,header>#exploreTown:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--pill)}

/* ---------- two things his 07:59 screenshot showed ----------
   1. THE SHEET'S HEADER WAS BEING PAINTED OVER. #sheetBar is sticky at the top of the sheet with
      z-index 2, and the category card's arrows are also z-index 2 -- same stacking context, so source
      order wins and the card, which comes later, painted straight through the header. In his shot
      "Explore Winthrop" and the BEACHES card's arrows are drawn on top of each other. A sticky header
      is above the thing it is a header for, so it gets a number nothing in the sheet competes with.
   2. THE SPOT CARD WAS A SLAB. Pierce: "when I tap somewhere it goes and puts the street name up...
      on this image it's crowded and unwieldy." It is a name and a way out -- everything else moved to
      the bar weeks ago -- and it was still wearing the geometry of the three-button card it used to be:
      420 px wide, 18 px of padding, a 20 px display face. It is a pill now, as wide as the name and no
      wider, and it sits under the header rather than across the top of the town. */
aside.places > #sheetBar{z-index:6}

#spotActions{width:max-content;max-width:calc(100vw - 96px);padding:9px 14px;border-radius:var(--pill)}
#spotActions strong{font-size:15px;line-height:1.25;padding-right:26px;margin-bottom:0;letter-spacing:.01em}
#spotActions #closeSpot{right:7px;top:50%;transform:translateY(-50%);width:26px;height:26px;min-height:26px;padding:0;font-size:17px;line-height:1}
@media (max-width:700px), (max-width:950px) and (max-height:460px){
  /* clear of the brand and the About button, not straddling them */
  #spotActions{top:calc(104px + var(--sat));left:12px;right:auto;transform:none;
    max-width:calc(100vw - 24px - var(--sal) - var(--sar))}
  #spotActions strong{font-size:14px}
}

/* ---------- "is this current?" ---------- */
/* Pierce has asked three times whether the page in front of him is the new one. The build stamp was
   already being fetched on every load for the cache-bust and never shown. It rides the footer line that
   is already there, so it is a fact and not a control: nothing to click, nothing new at the bottom. */
footer #built{opacity:.6;letter-spacing:.02em;white-space:nowrap}
/* AND IT HAS TO BE CENTRED ON THE SCREEN, NOT ON THE FOOTER'S CONTENT BOX. Pierce, 2026-09-19: "the
   updated time isnt centered under fly/drive". Measured at 857 px: the footer is justify-content:center
   but carries 356 px of padding on the right and 16 on the left -- reserved so the OSM credit clears the
   view pills -- so its content box is centred 170 px left of the window and the stamp went with it. The
   stamp is the only thing in that footer at most widths now; the credit and the counts are hidden.
   Matching the left padding to the right makes the content box concentric with the window, so the stamp
   lands under the bar at every width, and when the two paddings no longer fit the free space goes
   negative symmetrically and it stays centred anyway. */
body:not(.driving) footer{padding-left:calc(var(--gutter) + var(--sal) + 340px)}
/* BUT NOT ON A PHONE, WHERE THE FOOTER IS NOT CENTRED AT ALL. Pierce: "the last updated hangs off on
   mobile", and it was mine. Under 700 px the footer leaves the bottom entirely -- it goes to the top
   left under the brand and switches to justify-content:flex-start -- so 340 px of left padding is not
   reserving space beside a centred item, it is simply pushing the stamp off the right edge. His
   screenshot from 7:40 has the tail of it, "ted", clipped against the edge of the screen. The centring
   above is a desktop problem and belongs only there. */
@media (max-width:700px), (max-width:950px) and (max-height:460px){
  body:not(.driving) footer{padding-left:calc(12px + var(--sal))}
}
@media (max-width:700px), (max-width:950px) and (max-height:460px){
  footer #built{font-size:9px;opacity:.7}
}

/* ================================================================================================
   ONE CORNER, AND AN EDGE YOU CAN SEE AT NIGHT — the phone pass of 2026-09-19.

   Pierce, holding his phone at night, looking at the live site: "Explore Winthrop is too buried and
   the buttons are all not easy to see. What if all things are pinned to the right side of the screen
   kind of centered - is that smart or is there a better [way]"

   Every number here is measured at 390x844, is_mobile, dpr 3, with the town rendered, by
   photographing the screen twice -- once as it is, once with every piece of chrome hidden -- so "the
   pixels behind it" are real pixels and not an assumption. Two figures per control: FIND, the WCAG
   ratio between the control's own surface and the town in a ring around it, and EDGE, the strongest
   step anywhere across its boundary.

   1. THE BUTTONS ARE NOT HARD TO SEE BECAUSE OF WHERE THEY ARE. At night the dark glass and the dark
      town are the same value. Measured find, at night, before: Top view/Reset 1.00, Fly/Drive 1.01,
      Explore 1.01, About 1.01. The same pills in daylight: 2.86, 2.75, 3.99, 4.44. The night figure is
      not low, it is nil -- surface and scene differ by 0.0005 of relative luminance -- and the only
      thing left holding the control together was a 1 px hairline at rgba(255,255,255,.13), whose edge
      measured 1.42 to 1.50 against the same town.

      No single fill can fix that. To clear 3:1 against a night scene at L=0.0045 a surface has to be
      LIGHTER than L=0.114, a mid grey, and a mid grey measures 1.40:1 against the daytime sea at
      L=0.177. So the fix is not a fill, it is a two-tone edge: a bright hairline that carries the
      night, and a dark contour outside it that carries the day. Measured edge, before -> after:
      night 1.46 -> 5.49, 1.50 -> 5.52, 1.42 -> 13.30, 1.43 -> 5.46;  day 1.47 -> 4.91, 1.84 -> 4.86,
      1.74 -> 11.09, 1.23 -> 4.85. The denser fill also lifts daylight find: 2.86 -> 3.99 and
      2.75 -> 3.77. Nothing moved to get any of that.

   2. "PINNED RIGHT, CENTRED" IS THE RIGHT INSTINCT AT THE WRONG HEIGHT, and the distances say so. A
      thumb pivots at the bottom corner, so the cheap zone is a quarter circle sweeping up and inward
      from there, not a vertical strip at mid height. From a pivot 20 px in from the bottom-right of a
      390x844 screen, the middle of the right edge is 402 px away -- and 402 px of that same arc
      reaches the bottom-LEFT corner, which is 350 px. Anything that fits at mid-right would sit more
      easily at the far end of the bottom band, and the bottom band does not spend 14% of a 390 px
      width on a rail, does not assume a right hand, and does not sit where Safari's toolbar comes and
      goes.

      So: his right side, anchored low. One right-aligned column in the corner, ordered by how often
      each thing is wanted. Measured from the pivot, before -> after: Explore 175 -> 107, Fly/Drive
      192 -> 112, Top view/Reset 149 -> 173. In landscape, 402 -> 106, 409 -> 109, 153 -> 172. The one
      control that got further away is the one nobody reaches for; before this, the view pills were
      the CLOSEST thing on the screen and the way into the town was 26 px further out than they were.

   3. EXPLORE WAS A SLAB the full width of the screen, flush against the bottom edge with the browser's
      own toolbar under it, which is why it read as part of Safari rather than part of the town.
      Collapsed it is a floating pill in the thumb's corner in the page's one accent: find 1.01 -> 12.78
      at night and 3.23 in daylight, both sides of 3:1 on the fill alone. Nothing inside the sheet
      changed -- the five films, the night tile, the eleven sections, the search -- and #sheetBar is
      still the same button with the same handler, opening exactly what it opened before.
   ================================================================================================ */

@media (max-width:700px), (max-width:950px) and (max-height:460px){

  /* ---------- 1. the edge, because the fill cannot do it ---------- */
  /* A bright hairline carries the night and a dark contour outside it carries the day, so there is
     always a step across the boundary whichever way the town goes. --chrome-fill is denser than the
     shared glass for the same reason: on a phone the backdrop blur is the thing most likely to be
     dropped, and a control that depends on a blur to be findable is not findable. */
  :root{--chrome-fill:rgba(8,13,18,.88);--chrome-edge:rgba(255,255,255,.5);
    --chrome-lift:0 0 0 2px rgba(3,7,11,.62), 0 10px 26px rgba(0,0,0,.5)}
  /* AMENDED, same day, after Pierce saw the result on a desktop: "the buttons they're too... bulbous?
     cant they float on top with no visible container?" The bar, the view pills and the two in the
     header have left this list and are pure type now -- see THE CHROME STOPS BEING OBJECTS below.
     What has NOT changed is the reason this block exists: those controls measured 1.00 contrast
     against a night town, which is invisible. The fill was one way to fix that and the shadow is the
     other, and it is the one his own driving HUD has used on this phone all along -- MAIN STREET and
     49 MPH float over the same town at every hour and are never hard to find. So the protection moves
     from a box to two shadows rather than being dropped.
     #driveCurrent and #spotActions keep the fill: a card is not a button, and the header's Drive here
     sits over the brightest part of a daylight aerial. */
  header #driveCurrent,#spotActions{
    background:var(--chrome-fill);border:1px solid var(--chrome-edge);box-shadow:var(--chrome-lift)}
  /* The verb nobody has chosen was --muted, and on a night town the label IS the control. Only those
     two: Stop and the flyover arrows are quiet on purpose and keep --muted. */
  #gobar>#modeFly:not(.primary),#gobar>#modeDrive:not(.primary),.camera button{color:var(--ink)}
  /* the quietest row of the three, because it is the one nobody reaches for */
  .camera button{font-size:12px;padding:6px 12px}

  /* ---------- 2. one column, in the corner a thumb pivots from ---------- */
  /* Right-aligned, stacked, and ordered by how often each one is wanted: Explore nearest the thumb,
     the two view pills furthest. The flyover keeps its own centred bar -- it hides the sheet, so
     there is no column for it to belong to. */
  :root{--stack-x:calc(12px + var(--sar));--stack-y:calc(14px + var(--lift));
    --row-explore:56px;--row-gobar:50px;--row-gap:8px}
  body:not(.touring):has(aside.places.collapsed) #gobar{
    left:auto;right:var(--stack-x);transform:none;
    bottom:calc(var(--stack-y) + var(--row-explore) + var(--row-gap))}
  body:not(.touring):has(aside.places.collapsed) .camera,
  body:not(.driving):not(.touring):has(aside.places.collapsed) .camera{
    right:var(--stack-x)!important;left:auto!important;
    bottom:calc(var(--stack-y) + var(--row-explore) + var(--row-gobar) + var(--row-gap)*2)!important}
  /* open, the sheet owns the bottom band again and the two pills stack above it, still right-aligned */
  body:not(.touring) #gobar{left:auto;right:var(--stack-x);transform:none}
  /* AND THE FLYOVER'S OWN BAR STOPS WRAPPING. Found while checking this change had not broken it, and
     it is older than this change: the bar is left:50% with no right and no width, so it shrinks to fit
     the space from the middle of the screen to the right edge -- 195 px of a 390 px phone. I'll fly,
     Drive from here and Stop measure 67 + 134 + 49 plus 12 of gap and padding, which is 262: they fit
     the 366 px the screen has and not the 195 px the box was given, so the bar ran to two rows 99 px
     tall and the flyover's caption, whose clearance is written for one row, came out behind it.
     max-content asks for the width the three buttons actually want, clamped to the screen. */
  body.touring #gobar,body.autoflying #gobar{width:max-content;max-width:calc(100vw - 24px)}
  /* AND IT STILL HAD TO BE ONE ROW WITH THE CYCLING ARROWS ON IT. Pierce, 2026-09-19: "the coastal
     flyover has button issues. And hidden." Measured at 375 px, with ‹ and › showing: the five controls
     wanted 356 px of the 351 the screen gives, so the bar wrapped to 99 px of two rows -- and the
     caption, whose clearance below is written for ONE row, came out at 670-724 with the bar starting at
     641. The words were behind the buttons. Nothing is dropped and no target goes under 44: the two
     wide labels give back their side padding, which is 14 px, and the row fits with room over.
     If a button is ever added to this bar, measure gobar.height here again -- under 70 is one row. */
  body.touring #gobar #tourDrive,body.autoflying #gobar #tourDrive{padding:9px 11px}
  body.touring #gobar #stopTour,body.autoflying #gobar #stopTour{padding:9px 8px}

  /* ---------- 3. Explore stops being the last thing you would notice ---------- */
  /* It was a slab the full width of the screen, flush against the bottom edge with the browser's own
     toolbar under it, which is why it read as part of Safari rather than part of the town. Collapsed
     it is a floating pill in the thumb's corner, in the page's one accent, and it is the brightest
     object on the screen. Nothing inside the sheet changed: pressing it opens exactly what opened
     before, and #sheetBar is still the same button with the same handler. */
  aside.places.collapsed,body:not(.driving) aside.places.collapsed{
    left:auto!important;right:var(--stack-x)!important;bottom:var(--stack-y)!important;
    width:auto!important;max-width:calc(100vw - 24px - var(--sal) - var(--sar))!important;
    max-height:none!important;min-height:0;padding:0!important;overflow:visible!important;
    border:0;border-radius:var(--pill);background:var(--accent-hi);
    box-shadow:0 0 0 2px rgba(3,7,11,.62), 0 12px 30px rgba(0,0,0,.52)}
  /* visibility:hidden still takes the width of the widest tile row, so the pill would be 390px wide
     and no longer a pill. The children go out of layout entirely and come back on open. */
  aside.places.collapsed>*:not(#sheetBar){display:none!important}
  aside.places.collapsed #sheetBar{position:static;min-height:var(--row-explore);margin:0;
    padding:0 16px 0 22px;gap:11px;background:none;border-radius:var(--pill);color:var(--accent-ink)}
  aside.places.collapsed #sheetBar .grab{display:none}
  aside.places.collapsed #sheetBar span{flex:0 1 auto;margin-top:0;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;font-size:18px}
  aside.places.collapsed #sheetBar b{margin-top:0;opacity:1;font-size:13px}
}

/* Landscape keeps the same column -- 172 px of it in a 390 px-tall screen, which clears the brand by
   a wide margin -- rather than lying down into a row, because a row would have to be positioned off
   three hard-coded pill widths and the pills are as wide as the town's name happens to be.
   What landscape does need is the OPEN sheet: the bar and the pills were being lifted by 44dvh while
   the sheet in this orientation is 66dvh, so with the sheet open they sat inside it. */
@media (max-width:950px) and (max-height:460px){
  body:not(.touring) #gobar{bottom:calc(min(66dvh,300px) + 8px)}
  body:not(.touring):has(aside.places.collapsed) #gobar{
    bottom:calc(var(--stack-y) + var(--row-explore) + var(--row-gap))}
  /* and with the sheet open in this orientation the view pills go, the way they already go during a
     flyover. There are 133 px of town left above a 66dvh sheet on a 390 px-tall screen: stacking a
     second pill above the bar puts it through the About button, and there is nothing down there to
     reset the view of anyway. */
  body:not(.touring):not(:has(aside.places.collapsed)) .camera,
  body:not(.driving):not(.touring):not(:has(aside.places.collapsed)) .camera{display:none!important}
}