/* ============================================================
   LiveLocalVibes — phone app shell (Oct 2026)
   Loaded LAST on index.html, shows.html and bands.html, so it wins any
   tie with css/llv.css and css/home-v2.css. Every visible rule lives inside
   the 768px phone breakpoint: the desktop layout is untouched.
   - Bottom tab bar (built by js/app-shell.js) on all three pages
   - Homepage (body.home), map first for everyone. Phone order:
       header → short intro → one controls row → map with the shows sheet
       inside it → hero ad banner → Featured → listing ad → marketing
     The order comes from flex "order" on <body>; elements that change
     parents (sheet, hero ad, map ad) are moved by index.js and put back
     on desktop.
   - html.app-mode (signed in / installed app / Capacitor) hides the intro
     and every marketing section.
   ============================================================ */

/* Phone-only pieces are invisible everywhere else */
.app-tabbar, .shows-sheet-handle, .phone-intro, .phone-feat, .phone-ad-mount, .phone-ad-tag { display: none; }
.ph-ctl, .date-pick-text, .ph-sheet, .ph-pop, .ds-empty-act { display: none; }

@media (max-width: 768px) {
  :root { --tabbar-h: calc(62px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Bottom tab bar ---------- */
  .app-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(18, 18, 31, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  /* Oct 12 2026: typing in a box (keyboard up): the tab bar steps aside so it doesn't cover the form (js/app-shell.js) */
  html.kbd-open .app-tabbar { display: none; }
  .app-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 48px; padding: 6px 4px; color: var(--muted); text-decoration: none;
    font: 600 .72rem/1 'Inter', system-ui, sans-serif; --llv-icon-color: var(--muted);
    -webkit-tap-highlight-color: transparent;
  }
  .app-tab llv-icon { width: 24px; height: 24px; }
  .app-tab-label { display: block; }
  .app-tab.is-current { color: var(--text); --llv-icon-color: var(--purple); }
  .app-tab:focus-visible { outline: 2px solid var(--lime, #daff8c); outline-offset: -4px; border-radius: 12px; }
  /* Room so the bar never covers the end of the page */
  html.has-tabbar body { padding-bottom: var(--tabbar-h); }
  /* The tab bar is the phone navigation now: no hamburger */
  html.has-tabbar .menu-toggle, html.has-tabbar .mobile-menu { display: none !important; }

  /* ============================================================
     Homepage order (phones)
     ============================================================ */
  body.home { display: flex; flex-direction: column; }
  body.home > .site-header { order: 1; }
  body.home > #discover { order: 2; }
  /* Until index.js moves the shows sheet into the map frame, keep it out of sight */
  body.home > #discover-shows { order: 3; display: none; }
  body.home > .phone-ad-mount { order: 4; }
  body.home > #featuredPhone { order: 5; }
  body.home > .listing-ad-wrap { order: 6; }
  body.home > .hero { order: 7; }
  body.home > #why-llv { order: 8; }
  body.home > #vibe-engine { order: 9; }
  body.home > .signup-section { order: 10; }
  body.home > #faq { order: 11; }
  body.home > .site-footer { order: 12; }
  /* The two desktop Featured sections give way to the one phone Featured section */
  body.home > .feat-section { display: none !important; }
  /* App mode: no marketing content at all */
  html.app-mode body.home .landing-only { display: none !important; }

  /* Compact top bar in app mode */
  html.app-mode .nav { height: 56px; }
  html.app-mode .brand img { height: 40px; }
  html.app-mode .brand .brand-wordmark-img { height: 38px; }

  /* ---------- Short intro (replaces the hero up top) ---------- */
  body.home .phone-intro { display: block; margin: 2px 2px 10px; }
  body.home .phone-intro-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.75rem; line-height: 1; letter-spacing: .02em; }
  body.home .phone-intro-sub { margin-top: 4px; color: var(--muted); font-size: .88rem; line-height: 1.4; }
  html.app-mode body.home .phone-intro { display: none; }

  /* ---------- Discover block ---------- */
  body.home #discover { padding: 12px 0 0; border: 0; }
  body.home #discover > .container { padding: 0 10px; }
  body.home #discover .section-head,
  body.home #mapStatus { display: none !important; }
  html.app-mode body.home .vibe-explainer-link { display: none; }

  /* ---------- One controls row (Oct 2026): fits at 360px, never scrolls sideways ----------
     location chip (shrinks, "…") · "Tonight ▾" · filters · live vibes. The date choices open in a
     small sheet (#dateSheet), the live-vibes switch + explanation in a popup (#vibePop), and the
     location choices drop down under the row. All moved by index.js; ids are unchanged. */
  body.home .discover-v3 .discover-toolbar {
    position: relative; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 6px;
    overflow: visible; margin: 0 0 8px; padding: 2px 0 4px;
  }
  body.home .discover-v3 .discover-toolbar > * { flex: 0 0 auto; }
  body.home .discover-v3 .discover-toolbar > .date-group,
  body.home .discover-v3 .discover-toolbar > .vibe-toggle,
  body.home .discover-v3 .discover-toolbar > .vibe-explainer-link { display: none !important; }
  body.home .discover-v3 .ph-ctl { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  body.home .discover-v3 .ph-ctl.hidden { display: none !important; }
  /* Location chip: always there on phones, takes the spare width, long names end in "…" */
  body.home .discover-v3 .discover-toolbar > #locChip,
  body.home .discover-v3 .discover-toolbar > #locChip.hidden { display: inline-flex !important; order: 1; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 .75rem; }
  body.home .loc-chip .loc-chip-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
  body.home .loc-chip .loc-chip-change { display: none; }
  body.home .discover-v3 #dateBtn { order: 2; gap: 6px; padding: 0 .7rem; }
  body.home #dateBtn llv-icon { width: 18px; height: 18px; flex-shrink: 0; }
  body.home #dateBtn .date-btn-chev { width: 14px; height: 14px; transform: rotate(90deg); --llv-icon-color: var(--muted); }
  body.home .date-btn-label { white-space: nowrap; font-weight: 600; font-size: .88rem; }
  /* Narrowest phones: the date chip drops its calendar icon so the place name gets the room */
  @media (max-width: 380px) { body.home #dateBtn > llv-icon[name="date"] { display: none; } }
  body.home .discover-v3 .dt-filter-pill { order: 3; position: relative; min-height: 44px; min-width: 44px; padding: 0 .75rem; gap: 6px; }
  /* Filters: icon + count only ("Filters" stays for screen readers) */
  body.home .dt-filter-pill > span:nth-child(2) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.home .discover-v3 #vibeBtn { order: 4; min-width: 44px; padding: 0 .7rem; }
  body.home #vibeBtn llv-icon { width: 20px; height: 20px; }
  body.home:has(#vibeToggle:not(:checked)) #vibeBtn llv-icon { --llv-icon-color: var(--muted); }
  /* Location choices: a dropdown under the row (never a second row of controls) */
  body.home .discover-v3 .discover-toolbar > .loc-picker:not(.is-collapsed) {
    position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
  body.home .loc-picker:not(.is-collapsed) .dt-select { flex: 1 1 100%; min-height: 44px; font-size: 16px; }
  body.home .loc-picker:not(.is-collapsed) #enableLocationBtn { min-height: 44px; }

  /* Live vibes popup (switch + what it means) */
  body.home .ph-pop:not([hidden]) {
    display: block; position: absolute; z-index: 40; top: calc(100% + 4px); right: 0; width: min(300px, calc(100vw - 20px));
    padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
  body.home .ph-pop-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.35rem; letter-spacing: .02em; line-height: 1; margin-bottom: 8px; }
  body.home .ph-pop-text { color: var(--muted); font-size: .85rem; line-height: 1.45; margin-top: 8px; }
  body.home #vibePop .vibe-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 12px; }
  body.home #vibePop .vibe-toggle > span { font-size: .92rem; font-weight: 600; }
  body.home #vibePop .vibe-toggle input { order: 2; width: 22px; height: 22px; margin: 0; accent-color: #daff8c; }

  /* "Tonight ▾" sheet: Tonight / Tomorrow / this Saturday + any date */
  body.home .ph-sheet:not([hidden]) { display: flex; position: fixed; inset: 0; z-index: 90; align-items: flex-end; background: rgba(8, 8, 16, 0); transition: background .2s; }
  body.home .ph-sheet.is-open { background: rgba(8, 8, 16, .6); }
  body.home .ph-sheet-card { width: 100%; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0;
    transform: translateY(100%); transition: transform .22s ease; }
  body.home .ph-sheet.is-open .ph-sheet-card { transform: none; }
  body.home .ph-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
  body.home .ph-sheet-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.6rem; letter-spacing: .02em; }
  body.home .ph-sheet-x { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text); cursor: pointer; }
  body.home .ph-sheet-x llv-icon { width: 22px; height: 22px; }
  body.home .ph-sheet .date-group { display: grid !important; grid-template-columns: 1fr; gap: 8px; width: 100%; padding: 0; border: 0; background: none; border-radius: 0; }
  body.home .ph-sheet .date-chip { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 1rem; }
  body.home .ph-sheet .date-chip.hidden { display: none; }
  body.home .ph-sheet .date-chip.is-on { border-color: var(--lime, #daff8c); color: var(--lime, #daff8c); background: rgba(218, 255, 140, .08); }
  body.home .ph-sheet .date-chip--pick { position: relative; gap: 10px; }
  body.home .ph-sheet .date-chip--pick llv-icon { margin: 0; }
  body.home .ph-sheet .date-pick-text { display: inline; }
  /* The real date field sits invisibly on top, so a tap opens the phone's own calendar */
  body.home .ph-sheet input.dt-date-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
  @media (prefers-reduced-motion: reduce) { body.home .ph-sheet, body.home .ph-sheet-card { transition: none; } }
  /* Applied filters (only when some are on) */
  body.home .applied-chips {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -10px 8px; padding: 0 10px; scrollbar-width: none;
  }
  body.home .applied-chips > * { flex: 0 0 auto; }

  /* ---------- Map (height set by index.js: first screen, down to the tab bar) ---------- */
  body.home .map-frame { height: var(--app-map-h, 62vh); padding: 2px; border-radius: 14px; box-shadow: none; overflow: hidden; }
  body.home .map-hero { height: 100%; border-radius: 12px; }
  body.home .map-badge { top: 10px; left: 10px; }
  body.home .discover-v3 .recenter-btn { left: 12px; bottom: calc(var(--sheet-peek-h, 120px) + 12px); }
  /* Nothing stays over the map on phones: the "no shows" note lives in the shows sheet instead */
  body.home .map-empty { display: none !important; }
  /* Quiet night, in the sheet's peek: "Try Saturday · 3 shows" / "Widen the area" */
  body.home .ds-empty-act:not([hidden]) { display: block; margin-top: 8px; }
  body.home .ds-empty-hint { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
  body.home .ds-empty-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; }
  /* Quiet night (Oct 10 2026): the line, the hint and the button sit centered in the sheet */
  body.home #discover-shows.is-collapsed .ds-head { flex-direction: column; align-items: center; text-align: center; gap: 0; }
  body.home #discover-shows.is-collapsed .ds-meta { width: 100%; text-align: center; }
  body.home #discover-shows.is-collapsed .ds-empty-act { width: 100%; text-align: center; }
  /* Oct 12 2026: one random line from /js/no-shows-lines.js, as a Bebas Neue headline, plus an optional link */
  body.home .ds-quiet-line { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: .02em; color: var(--text); text-wrap: balance; }
  body.home .ds-quiet-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--purple, #A259FF); font-size: .9rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  body.home .ds-empty-hint { text-wrap: balance; }
  /* The map ad lives in the shows sheet on phones; its desktop spot stays empty */
  body.home .map-frame ~ .map-ad-placement { display: none !important; }

  /* ---------- Shows sheet, inside the map frame ---------- */
  body.home .map-frame > #discover-shows {
    position: absolute; left: 2px; right: 2px; bottom: 2px; z-index: 5;
    height: var(--sheet-full-h, 60vh); margin: 0; padding: 0;
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 12px 12px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
    transform: translateY(var(--sheet-y, 100%)); transition: transform .28s cubic-bezier(.22, .9, .32, 1); will-change: transform;
  }
  body.home .map-frame > #discover-shows.is-dragging { transition: none; }
  body.home .map-frame > #discover-shows > .container {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 10px 14px;
  }
  body.home .map-frame > #discover-shows[data-sheet="peek"] > .container { overflow: hidden; }
  body.home .shows-sheet-handle {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent;
    cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
  }
  body.home .shows-sheet-handle:focus-visible { outline: 2px solid var(--lime, #daff8c); outline-offset: -6px; border-radius: 12px; }
  body.home .shows-sheet-bar { width: 44px; height: 5px; border-radius: 999px; background: var(--line); }
  body.home #discover-shows .ds-head { margin: 0 0 10px; padding: 0 4px; }
  body.home #discover-shows .ds-head .section-title,
  body.home #discover-shows .ds-all { display: none; }
  body.home #discover-shows .ds-meta { color: var(--text); font-weight: 600; font-size: .95rem; }
  body.home .ds-section.is-collapsed { padding: 0; }
  body.home #discover-shows .show-list { grid-template-columns: 1fr; }

  /* Map ad as a "Sponsored" card in the list (or under the "no shows" line) */
  body.home .sheet-ad { display: block; margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: var(--bg); }
  body.home .ds-head + .sheet-ad { border: 1px solid var(--line); border-radius: 12px; }
  body.home .sheet-ad .ad-tag { position: static; display: block; margin: 0 0 6px; color: var(--muted); }
  body.home .sheet-ad .ad-link { gap: 12px; }
  body.home .sheet-ad .ad-img { width: 72px; height: 44px; }
  body.home .sheet-ad .ad-name { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.25rem; letter-spacing: .02em; }

  /* ---------- Banner spots: hero ad below the map, listing ad below Featured ---------- */
  body.home > .phone-ad-mount { display: block; padding: 14px 10px 0; }
  body.home > .phone-ad-mount:has(> #heroAdSlot.hidden) { padding-top: 0; }
  body.home .phone-ad-mount .hero-slot { max-width: none; }
  body.home .phone-ad-mount .hero-ad { padding: 12px 14px; border-radius: 14px; box-shadow: none; }
  body.home .phone-ad-mount .hero-slot-tag { display: none; }
  body.home .phone-ad-mount .phone-ad-tag { display: block; position: static; margin: 0 0 8px; }
  body.home .phone-ad-mount .ad-link { flex-direction: column; align-items: stretch; text-align: left; gap: 8px; }
  body.home .phone-ad-mount .ad-img { width: 100%; height: auto; aspect-ratio: 12 / 5; }
  body.home .phone-ad-mount .ad-name { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.3rem; letter-spacing: .02em; }
  body.home > .listing-ad-wrap { padding: 14px 10px 0; }
  body.home > .listing-ad-wrap .ad-placement { margin: 0; }
  body.home > .listing-ad-wrap:has(> .ad-placement.hidden) { padding-top: 0; }
  /* Reserved while ads load (html.ads-pending), then collapsed if there's no ad */
  html.ads-pending body.home > .phone-ad-mount #heroAdSlot.hidden,
  html.ads-pending body.home > .listing-ad-wrap .ad-placement.hidden,
  html.ads-pending body.home .sheet-ad.hidden {
    display: block !important; min-height: 76px; border-radius: 12px;
    background: linear-gradient(100deg, var(--surface-2) 30%, rgba(255, 255, 255, .04) 50%, var(--surface-2) 70%);
  }
  html.ads-pending body.home > .phone-ad-mount:has(> #heroAdSlot.hidden),
  html.ads-pending body.home > .listing-ad-wrap:has(> .ad-placement.hidden) { padding-top: 14px; }
  html.ads-pending body.home .phone-ad-mount #heroAdSlot.hidden > *,
  html.ads-pending body.home .sheet-ad.hidden > * { visibility: hidden; }

  /* ---------- Featured (phones): Venues | Bands, rotating spotlight ---------- */
  body.home > #featuredPhone:not([hidden]) { display: block; padding: 24px 0 6px; }
  body.home #featuredPhone > .container { padding: 0 10px; }
  #featuredPhone .phone-feat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  #featuredPhone .phone-feat-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.7rem; letter-spacing: .02em; line-height: 1; }
  #featuredPhone .pf-toggle { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
  #featuredPhone .pf-toggle[hidden], #featuredPhone .pf-toggle button[hidden] { display: none; }
  #featuredPhone .pf-toggle button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 .82rem/1 'Inter', sans-serif; cursor: pointer; }
  #featuredPhone .pf-toggle button[aria-selected="true"] { background: var(--purple); color: #fff; }
  #featuredPhone .pf-toggle button:focus-visible { outline: 2px solid var(--lime, #daff8c); outline-offset: 2px; }
  #featuredPhone .pf-spot { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
  #featuredPhone .pf-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  #featuredPhone .pf-track::-webkit-scrollbar { display: none; }
  #featuredPhone .pf-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
  #featuredPhone .pf-slide:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
  #featuredPhone .pf-photo { display: block; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
  #featuredPhone .pf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  #featuredPhone .pf-slide-body { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
  #featuredPhone .pf-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
  #featuredPhone .pf-text .feat-badge { font-size: .7rem; padding: .15rem .55rem; }
  #featuredPhone .pf-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; line-height: 1.05; letter-spacing: .02em; }
  #featuredPhone .pf-meta { color: var(--muted); font-size: .82rem; }
  #featuredPhone .pf-next { color: var(--purple); font-weight: 600; font-size: .82rem; }
  #featuredPhone .pf-next.is-tonight { color: var(--lime, #daff8c); }
  /* Small square photo / initials tile (no big colour block) */
  #featuredPhone .pf-tile { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
  #featuredPhone .pf-tile--initials { display: inline-flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: var(--purple); background: rgba(162, 89, 255, .12); }
  #featuredPhone .pf-dots { display: flex; justify-content: center; gap: 4px; margin: 6px 0 2px; }
  #featuredPhone .pf-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  #featuredPhone .pf-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
  #featuredPhone .pf-dot[aria-current="true"]::before { background: var(--purple); width: 18px; border-radius: 999px; }
  #featuredPhone .pf-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 10px -10px 0; padding: 0 10px 4px; }
  #featuredPhone .pf-row::-webkit-scrollbar { display: none; }
  #featuredPhone .pf-row[hidden] { display: none; }
  #featuredPhone .pf-card { flex: 0 0 auto; width: 70%; max-width: 260px; scroll-snap-align: start; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; }
  #featuredPhone .pf-card .pf-tile { width: 44px; height: 44px; border-radius: 10px; font-size: 1.15rem; }
  #featuredPhone .pf-card-text { display: flex; flex-direction: column; min-width: 0; }
  #featuredPhone .pf-card .pf-name { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #featuredPhone .pf-card .pf-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---------- Marketing (signed-out visitors), tighter ---------- */
  /* The hero keeps only its three "why" cards, shown down here */
  body.home > .hero { min-height: 0; border: 0; overflow: visible; }
  body.home > .hero .hero-bg,
  body.home > .hero .hero-fade,
  body.home > .hero .hero-copy,
  body.home > .hero .hero-visual { display: none !important; }
  body.home > .hero .hero-inner { display: block; padding: 28px 16px 4px; }
  body.home > .hero .hero-steps { margin: 0; padding: 0; border: 0; grid-template-columns: 1fr; gap: 8px; }
  html:not(.app-mode) body.home > section.section.landing-only { padding: 36px 0; }
  /* home-v2.css's .community-section padding zeroes the container's side padding: text touched the screen edge */
  body.home #why-llv .community-section { padding-left: 16px; padding-right: 16px; }
  html:not(.app-mode) .community-intro { margin-bottom: 20px; }
  html:not(.app-mode) .audience-tabs { margin-bottom: 20px; }
}

/* ---------- Phone header (Oct 2026): the wordmark centered between the round logo and
   "Get listed", ~22% bigger (36 → 44px; app mode 28 → 34px). "Get listed" drops its "Free" tag
   on narrow phones so nothing overlaps ("for free" stays in its spoken label). ---------- */
@media (max-width: 720px) {
  /* Oct 12 2026: room for the phone's status bar (clock, battery) in the Android app and iPhone home-screen app,
     which draw the page edge to edge. In a normal browser this is 0, so nothing moves. */
  html.has-tabbar .site-header { padding-top: env(safe-area-inset-top, 0px); }
  html.has-tabbar .site-header .nav { position: relative; }
  html.has-tabbar .site-header .brand .brand-wordmark-img {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: 56px; width: auto; max-width: calc(100% - 208px); min-width: 0; object-fit: contain;
  }
  html.app-mode.has-tabbar .site-header .brand .brand-wordmark-img { height: 46px; }
}
@media (max-width: 400px) {
  html.has-tabbar .btn-list--compact { padding: .45rem .75rem; font-size: .8rem; }
  html.has-tabbar .btn-list--compact .btn-list-free { display: none; }
}
/* Oct 11 2026: headers WITH "Get listed" (homepage, band and venue pages). The centered wordmark used to
   run under the button on bigger iPhones. Now the wordmark stays centered but is never wider than the
   space between the two sides, and the button drops its "Free" tag on phones so it stays small
   ("for free" is still in its spoken label). */
@media (max-width: 768px) {
  html.has-tabbar .site-header .nav:has(.btn-list--compact) { position: relative; }
  html.has-tabbar .site-header .btn-list--compact { padding: .45rem .8rem; gap: 0; }
  html.has-tabbar .site-header .btn-list--compact .btn-list-free { display: none; }
  html.has-tabbar .site-header .nav:has(.btn-list--compact) .brand .brand-wordmark-img.brand-wordmark-img--app,
  html.app-mode.has-tabbar .site-header .nav:has(.btn-list--compact) .brand .brand-wordmark-img.brand-wordmark-img--app {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: auto; max-height: 52px; width: auto; max-width: calc(100% - 228px); object-fit: contain;
  }
  html.has-tabbar .site-header .nav:has(.btn-list--compact) .btn-list--compact { margin-left: auto; flex-shrink: 0; }
}


@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  body.home .map-frame > #discover-shows { transition: none; }
  #featuredPhone .pf-track { scroll-behavior: auto; }
}

/* ---------- Phone app logos (Oct 8 2026): no round badge on phones. The header shows the neon-sign
   wordmark and the footer a smaller copy of it (the brush-script wordmark was retired Oct 11 2026). Both
   versions sit in the HTML; the --app / --footer-app images only show on phones. Desktop is unchanged. ---------- */
.brand-wordmark-img--app, .brand-wordmark-img--footer-app { display: none !important; }
@media (max-width: 768px) {
  html.has-tabbar .site-header #site-logo { display: none !important; }
  html.has-tabbar .site-header .brand .brand-wordmark-img:not(.brand-wordmark-img--app) { display: none !important; }
  html.has-tabbar .site-header .brand .brand-wordmark-img.brand-wordmark-img--app { display: block !important; height: 56px; max-width: calc(100% - 96px); }
  html.has-tabbar .site-footer .brand-wordmark-img--footer:not(.brand-wordmark-img--footer-app) { display: none !important; }
  html.has-tabbar .site-footer .brand-wordmark-img.brand-wordmark-img--footer-app { display: block !important; height: 30px; max-width: 160px; }
}
@media (max-width: 720px) {
  html.has-tabbar .site-header .brand .brand-wordmark-img.brand-wordmark-img--app,
  html.app-mode.has-tabbar .site-header .brand .brand-wordmark-img.brand-wordmark-img--app { height: 56px; }
}

/* ---------- Map spotlight + shows sheet cards (phones, Oct 13 2026) ----------
   The spotlight card (index.js "Show pins + spotlight") sits over the bottom of the map, above the
   shows sheet's peek; the sheet drops to peek when it opens. Rows in the sheet become separate cards
   with a round logo like the map pins, purple edge, lime glow while live. Desktop is unchanged. */
@media (max-width: 768px) {
  body.home .map-spot { left: 8px; right: 8px; bottom: 8px; width: auto; z-index: 8; }
  body.home .ms-card { padding: 12px 12px 10px; }
  body.home .ms-main { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; margin: 10px 0 8px; }
  body.home .ms-logo { width: 68px; height: 68px; }
  body.home .ms-band { font-size: 1.75rem; }
  body.spot-open .discover-v3 .recenter-btn { opacity: 0; pointer-events: none; }

  body.home #discover-shows .ds-meta { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.35rem; letter-spacing: .03em; line-height: 1.1; }
  body.home #discover-shows .show-list { gap: 8px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  body.home #discover-shows .sl-row {
    grid-template-columns: 76px 46px minmax(0, 1fr) auto; gap: 10px; padding: 11px 12px 11px 14px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: inset 3px 0 0 var(--purple);
  }
  body.home #discover-shows .sl-row.is-live { border-color: rgba(218, 255, 140, .55); box-shadow: inset 3px 0 0 var(--lime), 0 0 18px rgba(218, 255, 140, .14); }
  body.home #discover-shows .sl-logo { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--purple); }
  body.home #discover-shows .sl-row.is-live .sl-logo { border-color: var(--lime); }
  body.home #discover-shows .sl-logo--initials { color: #fff; background: linear-gradient(135deg, var(--purple), var(--pink)); }
  body.home #discover-shows .sl-band { font-size: 1.4rem; }
  body.home #discover-shows .sl-time { font-size: 1.15rem; }
  body.home #discover-shows .show-list > .sheet-ad { border: 1px solid var(--line); border-radius: 12px; }
}

/* ---------- Home map on phones (Oct 17 2026): the show rail + the list ----------
   Under the map: the count line, a "List" button and one swipeable row of show cards (the rail).
   "List" (or dragging the handle up) turns the sheet into the whole list, with a "Map" button at the
   top and an "End of the list" footer. Two states only: map + rail, or list. Desktop is unchanged. */
@media (max-width: 768px) {
  body.home .ph-only:not([hidden]) { display: inline-flex; }
  body.home #discover-shows .ds-head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
  body.home #discover-shows .ds-head .ds-meta { flex: 1; min-width: 0; margin: 0; }
  body.home #discover-shows.is-collapsed .ds-head { display: flex; }
  body.home .ds-viewbtn {
    flex: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--purple); background: rgba(162, 89, 255, .14); color: var(--text);
    font: 600 .88rem/1 Inter, system-ui, sans-serif; cursor: pointer;
  }
  body.home .ds-viewbtn llv-icon { width: 18px; height: 18px; }
  body.home .map-frame > #discover-shows[data-sheet="full"] .ds-head {
    position: sticky; top: 0; z-index: 2; margin: 0 -10px 8px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--line);
  }
  /* Peek: the rail only. Full: the list only. */
  body.home .map-frame > #discover-shows[data-sheet="peek"] #showCards,
  body.home .map-frame > #discover-shows[data-sheet="peek"] .sheet-ad:not(.ds-head + .sheet-ad) { display: none; }
  body.home .map-frame > #discover-shows[data-sheet="full"] #showRail { display: none; }

  body.home .show-rail {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 -10px; padding: 2px 10px 6px; scroll-padding: 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.home .show-rail::-webkit-scrollbar { display: none; }
  body.home .sr-card {
    flex: 0 0 82%; scroll-snap-align: start; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px;
    min-height: 72px; padding: 10px 12px; text-align: left; color: var(--text); cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: inset 3px 0 0 var(--purple);
  }
  body.home .sr-card:only-child { flex-basis: 100%; }
  body.home .sr-card.is-live { border-color: rgba(218, 255, 140, .55); box-shadow: inset 3px 0 0 var(--lime), 0 0 16px rgba(218, 255, 140, .14); }
  body.home .sr-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--purple); }
  body.home .sr-card.is-live .sr-logo { border-color: var(--lime); }
  body.home .sr-logo--initials { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--purple), var(--pink)); }
  body.home .sr-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
  body.home .sr-band { font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; line-height: 1.05; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.home .sr-sub { color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.home .sr-card.is-live .sr-sub { color: var(--lime); }

  body.home .sl-end { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 0 8px; color: var(--muted); font-size: .88rem; text-align: center; }
  body.home .sl-end::before { content: ""; width: 44px; height: 3px; border-radius: 999px; background: var(--line); }
  body.home .sl-end .sl-contact { color: var(--muted); font-size: .82rem; text-decoration: none; }
  body.home .sl-end .sl-contact u { color: #c9b6ff; }

  body.home .discover-v3 .reset-view-btn { left: auto; right: 12px; top: 10px; bottom: auto; }
  body.shows-list-open .discover-v3 .reset-view-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.home .show-rail { scroll-behavior: auto; } }

/* Oct 17 2026: as the splash fades, the map settles in underneath (no jump) */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  html.llv-revealed body.home .map-frame { animation: llvMapIn .7s cubic-bezier(.22, .9, .32, 1) both; }
  @keyframes llvMapIn { from { transform: scale(.965); opacity: .55; } to { transform: none; opacity: 1; } }
}