/* ══════════════════════════════════════════════════════════════════════════
   storefront.css — todoculebra.com storefront-first home (2026-09-16)
   Contract: STOREFRONT_FIRST_SPEC.md. Owned by storefront.js; nothing here
   paints unless that script mounts (body.home-mounted / body.home-open).
   Flag off → every selector below is inert: the map is byte-identical.

   Layering (measured in index.html): map chrome ≤ 1002 · chassis sheet 1002
   · more-overlay 2998 / more-sheet 2999 · booking + tour panels 3000 ·
   live-chat 4000 · welcome popup 9101. The storefront sits at 2500: above
   every piece of map chrome, BELOW every panel a CTA opens, so booking /
   chat / More / tour all paint over it exactly as they paint over the map.
   ══════════════════════════════════════════════════════════════════════════ */

#tc-home{
  --h-ink:#04202B;          /* deep water — hero + tab bar ink            */
  --h-ink-2:#0D3E4F;
  --h-aqua:#12B5BE;         /* THE one saturated accent (charter §9)      */
  --h-aqua-deep:#086970;    /* aqua as small text on light                */
  --h-aqua-light:#5FE3E0;   /* aqua on dark                               */
  --h-sun:#F5B84B;          /* family accent — tour card                  */
  --h-leaf:#2E9E6B;         /* family accent — camping card               */
  --h-sea:#2F7FD1;          /* family accent — ferry card                 */
  --h-text:#0C2530;
  --h-text-2:#4E6B77;
  --h-line:rgba(12,37,48,.10);
  --h-card:#FFFFFF;
  --h-r:18px;
  --h-font:var(--font-ui, 'DM Sans', system-ui, -apple-system, sans-serif);
  position:fixed; inset:0; z-index:2500;
  overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,#E9F5F9 0%,#F6FBFC 38%,#FFFFFF 100%);
  color:var(--h-text); font-family:var(--h-font);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(150px + env(safe-area-inset-bottom,0px));
}
#tc-home[hidden]{ display:none !important; }
#tc-home *,#tc-home *::before,#tc-home *::after{ box-sizing:border-box; }
#tc-home button{ font-family:inherit; cursor:pointer; }
#tc-home a{ color:inherit; }
#tc-home img{ max-width:100%; display:block; }

/* ── hide the map's chrome under the storefront (hiding, never removing —
      the Map tab restores every one of these instantly) ─────────────────── */
body.home-mounted #bottom-nav,
body.home-mounted #map-quote,
body.home-mounted #site-legal{ display:none !important; }
body.home-open .ch-sheet, body.home-open .ch-chips,
body.home-open .ch-layers, body.home-open .ch-layers-menu{ display:none !important; }
/* The storefront IS the welcome (spec §7): the popup and the return nudge
   never paint over it. storefront.js also pre-marks them seen at mount.
   The backdrop too (2026-10-07, filmed on a 390 phone): welcome-popup.js's 1 s timer can still fire after the home
   opened, and the sheet was hidden but its dark blur stayed over the whole home until the first tap closed it. */
body.home-open #welcome-popup,
body.home-open #welcome-popup-backdrop,
body.home-open #tc-return-nudge{ display:none !important; }
/* Map state with the P1 chassis on: lift its sheet so the peek CTA is not
   under our tab bar (the sheet is bottom-anchored + transform detents). */
body.home-mounted.chassis-on:not(.home-open) .ch-sheet{ bottom:84px !important; }
body.home-mounted:not(.home-open):not(.chassis-on) #quick-chips{ bottom:88px !important; }

/* ── shell ───────────────────────────────────────────────────────────────── */
.h-shell{ max-width:720px; margin:0 auto; padding:0 16px; }

/* top strip */
.h-top{ display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top,0px)) 0 10px; }
/* 2026-09-22 — was flex:1 (basis 0) + nowrap: once the Map chip joined the strip
   the wordmark's BOX shrank below its text width and the text overflowed on top
   of the chip. Size to content instead, and let the hours pill take the slack. */
/* Never truncates — the brand name reading "Todo …" looks broken. The hours
   pill carries a compact form on phones instead (.pill-short). */
.h-wordmark{ font-weight:900; font-size:18px; letter-spacing:-.02em; color:var(--h-ink); flex:0 0 auto; white-space:nowrap; }
.h-openpill .pill-short{ display:none; }
@media (max-width:430px){
  .h-openpill .pill-full{ display:none; }
  .h-openpill .pill-short{ display:inline; }
}
.h-wordmark i{ font-style:normal; color:var(--h-aqua); }
/* 2026-09-22 — the way back to the map, beside the wordmark. Aqua because it is
   the one thing on this strip a returning guest is actively looking for. The
   label hides under 340px so the strip never wraps; the icon + aria-label keep
   it usable. flex:0 0 auto so the wordmark's flex:1 can't squeeze it. */
.h-maptab{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; height:32px; padding:0 11px; border-radius:999px; border:1px solid rgba(18,181,190,.38); background:rgba(18,181,190,.10); color:var(--h-aqua-deep); font-size:12px; font-weight:800; cursor:pointer; }
.h-maptab:active{ transform:scale(.96); }
/* These icons are LINE ART (see #tc-home-tabbar button svg). Without this they
   inherit fill:black and the map path renders as a solid blob. */
.h-maptab svg{ width:15px; height:15px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* Phones: icon only. The strip already carries the wordmark, the live hours pill
   and the language toggle — measured at 375px the labelled chip overflows by
   ~60px and wraps the row. The icon keeps a 32px tap target and the aria-label
   carries the meaning; the label returns where there is room. */
@media (max-width:430px){ .h-maptab span{ display:none; } .h-maptab{ padding:0; width:32px; justify-content:center; } .h-maptab svg{ width:17px; height:17px; } }
/* A real spacer, not margin-left:auto on the pill — the pill starts [hidden]
   until the hours load, and an auto margin on a display:none item does nothing,
   which would slide the language toggle left against the Map chip. The spacer
   absorbs the slack whatever else is visible. */
.h-spacer{ flex:1 1 auto; min-width:0; }
.h-openpill{ display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:999px; background:#fff; border:1px solid var(--h-line); font-size:12px; font-weight:700; color:var(--h-text-2); white-space:nowrap; }
.h-openpill b{ width:8px; height:8px; border-radius:50%; background:#9AA7AD; flex:0 0 auto; }
.h-openpill.is-open b{ background:#1DB56B; box-shadow:0 0 0 3px rgba(29,181,107,.18); }
.h-openpill.is-open{ color:#0F6B40; }
.h-lang{ height:32px; min-width:44px; padding:0 10px; border-radius:10px; border:1px solid var(--h-line); background:#fff; font-size:12px; font-weight:800; color:var(--h-ink); letter-spacing:.06em; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.h-hero{ position:relative; border-radius:22px; overflow:hidden; background:var(--h-ink); color:#fff; min-height:440px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 14px 38px rgba(4,32,43,.22); }
.h-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; }
/* 2026-09-22 — the eyebrow sits in the TOP band, where the veil was only 8%:
   light aqua over a sunlit palm photo, effectively invisible (owner: "it looks
   grey? i can see it barely at all"). The headline read fine because the
   gradient is already 42% by the time it reaches it. Lifting just the first
   stop gives the eyebrow a ground without muddying the photo below. */
.h-hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,32,43,.46) 0%,rgba(4,32,43,.30) 22%,rgba(4,32,43,.46) 45%,rgba(4,32,43,.94) 100%); }
.h-hero__in{ position:relative; padding:22px 18px 18px; }
/* Brighter than --h-aqua-light and carries its own shadow, so it stays legible
   even if the hero photo is ever swapped for a lighter one. */
.h-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#A8F2EE; margin:0 0 8px; text-shadow:0 1px 3px rgba(4,32,43,.9),0 0 18px rgba(4,32,43,.75); }
.h-hero h1{ font-size:clamp(28px,7.4vw,40px); line-height:1.04; letter-spacing:-.025em; font-weight:900; margin:0 0 10px; }
.h-hero p{ margin:0 0 14px; font-size:15px; line-height:1.5; color:#CFE6EB; max-width:44ch; }
.h-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 20px; border-radius:14px; border:0; font-size:16px; font-weight:800; text-decoration:none; width:100%; }
.h-btn--primary{ background:var(--h-aqua); color:var(--h-ink); box-shadow:0 8px 24px rgba(18,181,190,.35); }
.h-btn--primary:active{ transform:scale(.985); }
.h-btn--ghost{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.22); min-height:46px; font-size:14px; }
.h-hero__row{ display:flex; gap:8px; margin-top:8px; }
.h-hero__row .h-btn{ flex:1; }
.h-hero__phone{ display:block; text-align:center; margin-top:12px; font-size:13px; color:#CFE6EB; text-decoration:none; }
.h-hero__phone b{ color:#fff; }
/* centred: it sits under a full-width CTA, so left-aligning it left the line
   dangling off-axis (owner, 2026-09-22). */
.h-opener{ text-align:center; margin-top:12px; font-size:13px; line-height:1.45; color:#CFE6EB; border-top:1px solid rgba(255,255,255,.14); padding-top:10px; }
.h-opener b{ color:#fff; font-weight:800; }
.h-opener[hidden]{ display:none; }

/* ── section scaffolding ─────────────────────────────────────────────────── */
.h-sec{ margin-top:26px; }
.h-sec__h{ font-size:22px; font-weight:900; letter-spacing:-.02em; margin:0 0 4px; color:var(--h-ink); }
.h-sec__sub{ margin:0 0 12px; font-size:14px; color:var(--h-text-2); line-height:1.45; }
.h-card{ background:var(--h-card); border:1px solid var(--h-line); border-radius:var(--h-r); box-shadow:0 6px 20px rgba(12,37,48,.06); }

/* ── fleet: chip row + 2-column photo grid (Mariah's mockup) ─────────────── */
.h-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0 10px; -webkit-overflow-scrolling:touch; }
.h-chips::-webkit-scrollbar{ display:none; }
.h-chip{ flex:0 0 auto; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--h-line); background:#fff; font-size:13px; font-weight:700; color:var(--h-text-2); white-space:nowrap; }
.h-chip[aria-pressed="true"]{ background:var(--h-ink); color:#fff; border-color:var(--h-ink); }
.h-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.h-veh{ display:flex; flex-direction:column; border-radius:var(--h-r); overflow:hidden; background:#fff; border:1px solid var(--h-line); box-shadow:0 6px 20px rgba(12,37,48,.06); }
.h-veh[hidden]{ display:none; }
.h-veh__media{ position:relative; aspect-ratio:4/3; background:var(--h-ink); overflow:hidden; }
.h-veh__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.h-veh__ink{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:12px; color:#fff; font-weight:900; font-size:15px; line-height:1.15; letter-spacing:-.01em; background:linear-gradient(160deg,#0D3E4F 0%,#04202B 100%); }
.h-veh__ink small{ display:block; font-weight:600; font-size:12px; color:var(--h-aqua-light); margin-bottom:4px; letter-spacing:.08em; text-transform:uppercase; }
.h-veh__pill{ position:absolute; top:10px; left:10px; padding:4px 9px; border-radius:999px; background:rgba(4,32,43,.86); color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.h-veh__body{ padding:12px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.h-veh__name{ font-size:16px; font-weight:900; letter-spacing:-.02em; color:#000; line-height:1.15; }
.h-veh__loc{ font-size:12px; color:var(--h-text-2); display:flex; align-items:center; gap:4px; }
.h-veh__loc svg{ width:12px; height:12px; flex:0 0 auto; }
.h-veh__from{ margin-top:6px; font-size:12px; color:var(--h-text-2); font-weight:500; line-height:1.1; }
.h-veh__from b{ font-size:26px; font-weight:900; color:var(--h-ink); letter-spacing:-.03em; margin:0 2px; }
.h-veh__from s{ text-decoration:line-through; color:#8FA3AB; margin-left:2px; }
.h-veh__ladder{ margin-top:4px; font-size:12px; color:var(--h-text-2); line-height:1.45; }
.h-veh__ladder b{ color:var(--h-text); font-weight:700; }
.h-veh__multi{ font-size:12px; color:var(--h-aqua-deep); font-weight:700; }
.h-veh__cta{ margin-top:auto; padding-top:10px; }
.h-veh__cta .h-btn{ min-height:44px; font-size:14px; padding:0 12px; border-radius:12px; }
.h-veh--noprice .h-veh__from{ display:none; }

/* ── price it in ten seconds ─────────────────────────────────────────────── */
.h-quote{ padding:14px; }
.h-nl{ display:flex; align-items:center; gap:10px; width:100%; min-height:52px; padding:0 14px; border-radius:14px; border:1px dashed rgba(18,181,190,.6); background:#F2FBFC; color:var(--h-text-2); font-size:14px; text-align:left; }
.h-nl b{ color:var(--h-aqua-deep); font-weight:800; white-space:nowrap; }
.h-nl span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.h-pick{ margin-top:12px; display:grid; gap:10px; }
.h-pick__row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.h-pick__lbl{ width:100%; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--h-text-2); }
.h-seg{ flex:1 1 auto; min-height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--h-line); background:#fff; font-size:14px; font-weight:700; color:var(--h-text); }
.h-seg[aria-pressed="true"]{ background:var(--h-ink); color:#fff; border-color:var(--h-ink); }
.h-date{ flex:1 1 auto; min-height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--h-line); background:#fff; font:inherit; font-size:14px; font-weight:700; color:var(--h-text); }
.h-step{ display:inline-flex; align-items:center; border:1px solid var(--h-line); border-radius:12px; background:#fff; overflow:hidden; }
.h-step button{ width:44px; height:44px; border:0; background:transparent; font-size:20px; font-weight:800; color:var(--h-ink); }
.h-step output{ min-width:36px; text-align:center; font-weight:900; font-size:16px; }
.h-quote__go{ margin-top:2px; }
.h-quote__out{ margin-top:12px; padding:12px 14px; border-radius:14px; background:#F2FBFC; border:1px solid rgba(18,181,190,.35); }
.h-quote__out[hidden]{ display:none; }
.h-quote__total{ font-size:14px; color:var(--h-text-2); }
.h-quote__total b{ display:block; font-size:28px; font-weight:900; color:var(--h-ink); letter-spacing:-.03em; line-height:1.1; }
.h-quote__meta{ font-size:12px; color:var(--h-text-2); margin-top:2px; }
.h-quote__err{ color:#B42318; font-weight:700; font-size:14px; }
.h-quote__out .h-btn{ margin-top:10px; }
.h-examples{ margin-top:12px; }

/* ── sticky trip bar (spec §5) ───────────────────────────────────────────── */
#tc-home-tripbar{ position:fixed; left:12px; right:12px; bottom:calc(78px + env(safe-area-inset-bottom,0px)); z-index:2600; max-width:720px; margin:0 auto; display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 12px 8px 16px; border:0; border-radius:16px; background:var(--h-ink); color:#fff; box-shadow:0 12px 32px rgba(4,32,43,.35); font-family:var(--h-font); text-align:left; }
#tc-home-tripbar[hidden], body:not(.home-open) #tc-home-tripbar{ display:none !important; }
#tc-home-tripbar .tb-l{ flex:1; min-width:0; }
#tc-home-tripbar .tb-t{ display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--h-aqua-light); font-weight:800; }
#tc-home-tripbar .tb-w{ display:block; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tc-home-tripbar .tb-n{ font-size:20px; font-weight:900; letter-spacing:-.02em; white-space:nowrap; }
#tc-home-tripbar .tb-go{ flex:0 0 auto; height:40px; padding:0 14px; border-radius:11px; background:var(--h-aqua); color:var(--h-ink); font-weight:800; font-size:14px; display:inline-flex; align-items:center; }

/* ── service cards (delivery · tour · ferry · camping) ───────────────────── */
.h-svc{ display:grid; gap:12px; }
.h-svcard{ display:flex; gap:12px; align-items:flex-start; padding:14px; text-align:left; border-radius:var(--h-r); background:#fff; border:1px solid var(--h-line); box-shadow:0 6px 20px rgba(12,37,48,.06); width:100%; color:var(--h-text); }
.h-svcard__ic{ flex:0 0 44px; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; background:#EAF4F6; }
.h-svcard--tour .h-svcard__ic{ background:rgba(245,184,75,.22); }
.h-svcard--ferry .h-svcard__ic{ background:rgba(47,127,209,.14); }
.h-svcard--camp .h-svcard__ic{ background:rgba(46,158,107,.16); }
.h-svcard__t{ font-size:16px; font-weight:900; letter-spacing:-.01em; line-height:1.2; }
.h-svcard__s{ font-size:13px; color:var(--h-text-2); line-height:1.45; margin-top:3px; }
.h-svcard__k{ margin-top:6px; font-size:13px; font-weight:800; color:var(--h-aqua-deep); }
.h-svcard--tour .h-svcard__k{ color:#8A5A00; }
.h-svcard--camp .h-svcard__k{ color:#1F6E4A; }
.h-svcard--ferry .h-svcard__k{ color:#1F5EA3; }
.h-svcard--tire .h-svcard__ic{ background:rgba(4,32,43,.10); }
.h-svcard--tire .h-svcard__k{ color:#0D3E4F; }
.h-svcard__arrow{ align-self:center; font-size:20px; color:var(--h-text-2); }

/* ── reviews ─────────────────────────────────────────────────────────────── */
.h-reviews{ display:flex; align-items:center; gap:12px; padding:14px; text-decoration:none; }
.h-reviews[hidden]{ display:none; }
.h-reviews__n{ font-size:30px; font-weight:900; letter-spacing:-.03em; color:var(--h-ink); }
.h-reviews__stars{ color:#F5B84B; font-size:14px; letter-spacing:.06em; }
.h-reviews__c{ font-size:13px; color:var(--h-text-2); }

/* ── how it works · where we are ─────────────────────────────────────────── */
.h-steps{ display:grid; gap:10px; }
.h-step3{ display:flex; gap:12px; padding:12px 14px; }
.h-step3 b{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--h-ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; }
.h-step3 div{ font-size:14px; line-height:1.45; color:var(--h-text); }
.h-step3 div small{ display:block; color:var(--h-text-2); font-size:12.5px; }
.h-where{ padding:14px; font-size:14px; line-height:1.5; }
.h-where b{ display:block; font-size:15px; font-weight:900; }
.h-where .h-btn{ margin-top:10px; min-height:44px; font-size:14px; background:#EAF4F6; color:var(--h-ink); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.h-faq{ padding:2px 14px; }
.h-faq[hidden]{ display:none; }
.h-faq details{ border-top:1px solid var(--h-line); }
.h-faq details:first-child{ border-top:0; }
.h-faq summary{ list-style:none; cursor:pointer; padding:13px 26px 13px 0; font-size:14.5px; font-weight:800; position:relative; color:var(--h-text); min-height:44px; }
.h-faq summary::-webkit-details-marker{ display:none; }
.h-faq summary::after{ content:"+"; position:absolute; right:0; top:11px; font-size:20px; color:var(--h-aqua-deep); font-weight:800; }
.h-faq details[open] summary::after{ content:"–"; }
.h-faq p{ margin:0 0 14px; font-size:14px; line-height:1.55; color:var(--h-text-2); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.h-foot{ margin-top:26px; padding:18px 0 8px; border-top:1px solid var(--h-line); font-size:13px; color:var(--h-text-2); }
.h-foot__links{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:10px; }
.h-foot__links a,.h-foot__links button{ font-weight:700; color:var(--h-ink); text-decoration:none; background:none; border:0; padding:0; font-size:13px; min-height:32px; }
.h-foot small{ display:block; line-height:1.5; }

/* ── floating 5-tab bar (spec §7; one bar for BOTH states) ───────────────── */
/* UI STANDARD 2026-09-29 (sweep: "64px tall for 39px of content" on every viewport; the bar also covered the
   last cards on phones): the bar is as tall as its content + 8pt padding — 22px icon, 3px gap, 12px label,
   4px above and below = 56px, still a 44px+ target per tab. The highlighted icon pills are border-box so they
   hold the same 22px glyph without growing the row. Labels at 12px (the standard's floor for labels; 11 was
   under it). Nothing else about the look changes. */
#tc-home-tabbar{ position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:2600; max-width:720px; margin:0 auto; height:56px; display:grid; grid-template-columns:repeat(5,1fr); background:rgba(4,32,43,.96); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-radius:22px; box-shadow:0 2px 6px rgba(4,32,43,.18),0 14px 34px rgba(4,32,43,.32); font-family:var(--font-ui, 'DM Sans', system-ui, sans-serif); }
#tc-home-tabbar button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:0; color:#9FBECB; font-size:12px; line-height:1.15; font-weight:700; cursor:pointer; min-height:44px; padding:4px 0; font-family:inherit; }
#tc-home-tabbar button svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; box-sizing:border-box; }
#tc-home-tabbar button[aria-current="page"]{ color:#5FE3E0; }
#tc-home-tabbar button[aria-current="page"] svg{ background:rgba(95,227,224,.14); border-radius:12px; padding:3px 12px; width:46px; height:28px; }
#tc-home-tabbar .tab-book{ color:#fff; }
#tc-home-tabbar .tab-book svg{ background:#12B5BE; color:#04202B; border-radius:14px; width:46px; height:30px; padding:4px 12px; }
/* joins the body-class collision model (§6.3): when a map surface owns the
   screen in MAP state, the bar stands down like #bottom-nav does. In HOME
   state the storefront overlay is above those surfaces, so the bar stays. */
body:not(.home-open).pin-sheet-open #tc-home-tabbar,
body:not(.home-open).pin2-open #tc-home-tabbar,
body:not(.home-open).peek-card-open #tc-home-tabbar,
body:not(.home-open).dest-switcher-open #tc-home-tabbar,
body:not(.home-open).nav-active #tc-home-tabbar,
body:not(.home-open).panel-open #tc-home-tabbar,
body:not(.home-open).itinerary-sheet-open #tc-home-tabbar,
/* 2026-09-22 — CULEBRA CRITTERS surfaces join the stand-down list. The bar is
   z-index 2600; the encounter card is 2000 and the battle screen 3000 but its
   ACTION BUTTONS sit in the bottom 64px the bar occupies. The game predates the
   storefront, so none of its surfaces were in this rule and the bar floated over
   the fight (owner: "the home maps chat etc, bar is blocking the game").
   :has() rather than body classes because the game sets none. */
body:not(.home-open):has(.encounter-card) #tc-home-tabbar,
body:not(.home-open):has(#battle-screen) #tc-home-tabbar,
body:not(.home-open):has(.battle-overlay) #tc-home-tabbar,
body:not(.home-open):has(.battle-victory) #tc-home-tabbar,
body:not(.home-open):has(#starter-screen) #tc-home-tabbar,
body:not(.home-open):has(#creatures-game-panel) #tc-home-tabbar,
body:not(.home-open):has(#prologue-overlay) #tc-home-tabbar,
body:not(.home-open):has(#team-selector-overlay) #tc-home-tabbar,
body:not(.home-open):has(#critter-duration-sheet) #tc-home-tabbar,
body:not(.home-open):has(#critter-placed-sheet) #tc-home-tabbar,
body:not(.home-open):has(#admin-spawn-picker-overlay.active) #tc-home-tabbar,
body:not(.home-open):has(#welcome-popup.show) #tc-home-tabbar{ display:none !important; }

@media (min-width:721px){
  #tc-home{ padding-bottom:calc(170px + env(safe-area-inset-bottom,0px)); }
  .h-hero{ min-height:480px; }
}
@media (prefers-reduced-motion:reduce){ #tc-home *{ transition:none !important; } }

/* ═══ TOUCH TARGETS (UI STANDARD §3, 2026-09-29) ═══
   On a touch screen every control is a 44px box: the top-strip pills (Map chip, hours, ES/EN), the fleet
   filter chips and the footer links measured 32-38px. Same padding, same type — only the box grows, and the
   strip stays under the 64px top-bar limit (10px + 44px + 10px). Pointer screens keep the compact 32px look. */
@media (pointer:coarse){
  .h-maptab,.h-openpill,.h-lang{ height:44px; }
  .h-lang{ min-width:44px; }
  .h-chip{ min-height:44px; }
  .h-foot__links a,.h-foot__links button{ display:inline-flex; align-items:center; min-height:44px; }
}
@media (pointer:coarse) and (max-width:430px){ .h-maptab{ width:44px; } }

/* ═══ HERO ALIGNMENT (2026-09-23) ═══
   Owner: "text doesn't look centered or aligned. this is what i see when the
   page first opens." Measured it: .h-eyebrow / h1 / p were text-align:start
   while the CTA labels, .h-hero__phone and .h-opener (the "first two bikes"
   line he asked to centre earlier) were all centred — so the hero read as
   half-left, half-centre. Centring the copy makes the whole block agree. */
.h-eyebrow{ text-align:center; }
.h-hero h1{ text-align:center; }
.h-hero p{ text-align:center; margin-left:auto; margin-right:auto; }

/* ═══ SIDE RAIL + HERO FIT (2026-09-28) ═══
   Owner, with a screenshot: the tab bar covered "First two bikes each day" at the
   bottom of the hero, then "try putting the menu bar vertical and on the side so the
   overlap stops happening". Measured at his window (1046 x ~575 CSS px): the hero
   text block is 339px tall but min-height:480px padded photo above it, so the
   opener line ended at 500px and the fixed bar began at 501px.
   (1) Hero never taller than the space above the bar: 150px = 52 hero top + 74 bar
       + 24 gap. The 360px floor still clears the 339px text block.
   (2) At >= 920px the storefront has >= 100px of empty margin each side, so the bar
       becomes a vertical rail in that margin and can never cover content. HOME ONLY:
       on the map the rail clipped the Play Critters pill and the filter chips, so the
       map keeps the bottom bar. The hide rules above still apply (they win on
       !important). Phones keep the bottom bar.
   REVISED same day (owner: "too much white gap, plus on phone this gap is even worse"):
   the rail was pinned to the window edge while the 720px column is centred, so the gap
   grew with the window. It now hugs the column - right edge 12px from the hero (hero
   left = 50% - 344px - ~7px scrollbar half; 76px rail + 12px gap => 50% - 440px),
   top-aligned with the hero. Mouse screens only (hover + fine pointer): a phone held
   sideways is wider than 920px and was getting the rail; phones/tablets keep the bar. */
.h-hero{ min-height:clamp(360px, calc(100svh - 150px), 440px); }
@media (min-width:721px){ .h-hero{ min-height:clamp(360px, calc(100svh - 150px), 480px); } }
@media (min-width:920px) and (hover:hover) and (pointer:fine){
  body.home-open #tc-home-tabbar{ left:max(12px, calc(50% - 440px)); right:auto; top:52px; bottom:auto; transform:none; width:76px; height:auto; max-width:none; margin:0; grid-template-columns:1fr; grid-auto-rows:56px; padding:8px 0; }
  body.home-open #tc-home-tripbar{ bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
}
/* 2026-10-07 (owner: "you decide and you fix", after the load film on a 1707 px laptop: the home was a 720 px phone
   column in the middle of the screen). Wide mouse screens get a desktop page: a 1040 px column (the rail moves out with
   it: 520 + 76 + 8), the rides fill the row (up to four across, wide photos), the steps side by side, the hero words at a readable width. */
@media (min-width:1240px) and (hover:hover) and (pointer:fine){
  #tc-home .h-shell{ max-width:1040px; }
  #tc-home .h-hero__in{ max-width:620px; padding:32px 32px 28px; }
  #tc-home .h-grid{ grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); }
  #tc-home .h-veh__media{ aspect-ratio:16/9; }
  #tc-home .h-steps{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
  #tc-home .h-sec__sub{ max-width:72ch; }
  body.home-open #tc-home-tabbar{ left:max(12px, calc(50% - 604px)); }
  #tc-home-tripbar{ max-width:1040px; }
}

/* ═══ WE-BUY-E-BIKES NOTICE (2026-09-28, owner: "make todoculebra.com at least have a notice clickable at
   the top") — inculebra.com/ebike lands on this home page, so the first thing on it says we buy e-bikes and
   links to /ebike. Dark ink bar, aqua claim, brass arrow (the /ebike page's own palette). Phones keep the
   short line; the hero gives back the bar's height so the opener line stays above the tab bar. ═══ */
.h-notice{ display:flex; align-items:center; gap:8px; margin:calc(8px + env(safe-area-inset-top,0px)) 0 0; padding:9px 14px;
  border-radius:12px; background:#04202B; color:#fff; text-decoration:none; font-size:14px; line-height:1.25; min-height:40px; box-sizing:border-box; }
.h-notice:hover{ background:#0A2F3D; }
.h-notice:focus-visible{ outline:2px solid #5FE3E0; outline-offset:2px; }
.h-notice b{ font-weight:800; color:#5FE3E0; white-space:nowrap; }
.h-notice > span{ flex:1; min-width:0; color:rgba(228,241,245,.86); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.h-notice i{ font-style:normal; font-weight:800; color:#E3C17C; flex:0 0 auto; }
.h-notice + .h-top{ padding-top:8px; }
@media (max-width:430px){ .h-notice__more{ display:none; } }
.h-notice ~ .h-hero{ min-height:clamp(340px, calc(100svh - 196px), 440px); }
@media (min-width:721px){ .h-notice ~ .h-hero{ min-height:clamp(340px, calc(100svh - 196px), 480px); } }