/* ═══ THE PHONE PASS (Michael, 2026-10-11: "most people will view it on mobile … looks terrible if viewed
   horizontally … the header kinda messed up, the buttons look odd"). Loaded LAST so it settles the phone frame
   (showcase-story.css "THE MOBILE FRAME" + "SIDEWAYS PHONES") without fighting it rule by rule.
   Two parts: the upright phone (one-row header, a labelled Demo button, tidy Explore controls) and the phone on its
   side (one slim bar on top, the Home as two columns — words left, buttons right — and every page's picture beside
   its text instead of above it). Desktop and tablets are untouched. MOTION.md is unchanged: nothing here animates. ═══ */

/* the Demo button carries two labels; the short one only shows on phones */
#bpPill .bp-s{display:none}

/* ─────────────── EVERY PHONE (upright under 900px, or on its side under 500px tall) ─────────────── */
@media (max-width:899px), (orientation:landscape) and (max-height:500px){
  /* the commissioned openings end above the tab bar (Oceanfront's already did; SONO's still reserved the desktop
     contact band, so its words and buttons were squeezed into a scrolling strip) */
  .sh-stage{--sh-bottom:calc(var(--hud-h,62px) + 16px)!important}
  /* the desktop contact band is hidden on phones, but its height was still published as 54px (the measuring
     fallback for a band that measures 0), so pages kept a 54px hole above the tab bar — on a phone it is 0 */
  :root{--foot-h:0px!important}

  /* ONE-ROW HEADER — a demo says so in its own button ("◇ Demo", which opens Make it yours), so the hairline under
     the logo goes; it was the line that sat crooked under the Back arrow */
  html[data-showcase-ui="glass"] body:has(#bpPill) #brandbar #hdrInfo{display:none!important}
  html[data-showcase-ui="glass"] body.has-back #brandbar #hdrInfo{padding-left:44px!important}
  /* the Demo button: a labelled pill like every other header button, not a lone diamond in a ring */
  html[data-showcase-ui="glass"] body #hdrAct #bpPill{width:auto!important;height:36px!important;min-height:36px!important;padding:0 12px 0 5px!important;gap:7px!important;
    border-radius:999px!important;font:600 8.5px/1 var(--mono)!important;letter-spacing:.14em!important;box-shadow:none!important}
  html[data-showcase-ui="glass"] body #hdrAct #bpPill i{width:24px!important;height:24px!important;font-size:11px!important}
  html[data-showcase-ui="glass"] body #hdrAct #bpPill .bp-l{display:none!important}
  html[data-showcase-ui="glass"] body #hdrAct #bpPill .bp-s{display:inline!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important}

  /* the Website link is the globe alone — no ring around it (Michael 10-11: "it crowds header space"); still a 44px target */
  html[data-showcase-ui="glass"] body #hdrAct .hdr-link{width:44px!important;height:44px!important;min-height:44px!important;margin:-4px -4px -4px 0!important;padding:0!important;justify-content:center;
    border-color:transparent!important;background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  html[data-showcase-ui="glass"] body #hdrAct .hdr-link svg{width:20px;height:20px}

  /* EXPLORE — the "Section 01 / 05" tag centres its words; the action row wraps (Enter first, full width) instead
     of running off the edge */
  .ov-lens-tag{display:inline-flex!important;align-items:center!important;line-height:1!important}
  .ov-bar-cta{flex-wrap:wrap!important;overflow:visible!important;height:auto!important;border-radius:22px!important}
  .ov-bar-cta>.btn{flex:1 1 0!important;min-width:0!important;min-height:44px!important;padding:0 12px!important;letter-spacing:.12em!important}
  .ov-bar-cta>.btn.lime{flex:1 1 100%!important}
}

/* ─────────────── THE PHONE ON ITS SIDE (landscape, under 500px tall) ─────────────── */
@media (orientation:landscape) and (max-height:500px){
  /* one slim bar: logo, the demo marker beside it (there is room sideways), the buttons on the right */
  html[data-showcase-ui="glass"] body #brandbar{padding-top:6px!important;padding-bottom:6px!important}
  html[data-showcase-ui="glass"] body #brandbar .brand-center{height:32px!important}
  html[data-showcase-ui="glass"] body #brandbar .brand-hero{height:30px!important}
  html[data-showcase-ui="glass"] body #brandbar #hdrAct{top:6px!important}
  html[data-showcase-ui="glass"] body #brandbar #hdrAct .hbtn{height:32px!important;min-height:32px!important}
  html[data-showcase-ui="glass"] body #hdrAct #bpPill{height:32px!important;min-height:32px!important}
  html[data-showcase-ui="glass"] body #hdrAct #bpPill .bp-l{display:inline!important;position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important}
  html[data-showcase-ui="glass"] body #hdrAct #bpPill .bp-s{display:none!important}
  /* the tab bar keeps its 44px targets, a little tighter */
  html body #hud #navTabs .tab{height:44px!important}

  /* HOME, all four kinds (the standard Home, a Venue Home, SONO's opening, Oceanfront's opening) — two columns:
     the headline and line on the left, the buttons on the right, all of it between the bars with no scrolling */
  html body #heroLayer .hero.hero-v4{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-auto-rows:auto;align-content:center;align-items:center;
    column-gap:clamp(20px,4vw,48px);row-gap:6px;top:calc(var(--sales-header-h,48px) + 6px)!important;bottom:calc(var(--hud-h,52px) + 8px)!important;
    padding:0 clamp(18px,4vw,44px)!important;text-align:left!important;overflow-y:auto!important}
  html body #heroLayer .hero.hero-v4>*{grid-column:1;margin-left:0!important;margin-right:0!important;max-width:none!important;text-align:left!important;justify-self:start}
  html body #heroLayer .hero.hero-v4>h1{grid-row:1;align-self:end;margin:0!important;font-size:clamp(26px,min(4.6vw,11vh),46px)!important;line-height:.98!important}
  html body #heroLayer .hero.hero-v4>.ht-sub{grid-row:2;align-self:start;margin:4px 0 0!important;font-size:12.5px!important;line-height:1.5!important;max-width:44ch!important}
  html body #heroLayer .hero.hero-v4>.vh{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:stretch;width:100%!important;margin:0!important}

  .sh-stage .sh-content,.ch-stage .ch-content{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-auto-rows:auto;align-content:center;align-items:center;
    column-gap:clamp(20px,4vw,48px);row-gap:6px;inset:calc(var(--sales-header-h,48px) + 6px) 0 calc(var(--hud-h,52px) + 8px)!important;
    padding:0 clamp(18px,4vw,44px)!important;text-align:left!important}
  .sh-content::before,.sh-content::after,.ch-content::before,.ch-content::after{display:none!important}
  .ch-stage .ch-story{display:contents!important}
  .sh-content>*,.ch-content>*,.ch-story>*{grid-column:1;margin-left:0!important;margin-right:0!important;text-align:left!important}
  .sh-title,.ch-heading{grid-row:1;align-self:end;margin:0!important}
  .sh-title{font-size:clamp(26px,min(4.6vw,11vh),46px)!important;line-height:.98!important}
  #chTitle{font-size:clamp(28px,min(5vw,12vh),52px)!important}
  .ch-eyebrow{margin-bottom:8px!important}
  .sh-sub,.ch-introduction{grid-row:2;align-self:start;margin:6px 0 0!important;font-size:12.5px!important;line-height:1.5!important;max-width:44ch!important}
  .sh-doors,.ch-story>.vh{grid-column:2!important;grid-row:1 / span 2!important;align-self:center;margin:0!important;width:100%}
  .sh-doors{opacity:1}

  /* the Home buttons: a compact 2 × 2, words on one line where they fit */
  html body #heroLayer .vh{max-width:none!important}
  html body #heroLayer .vh-doors{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important}
  html body #heroLayer .vh-door{min-height:48px!important;padding:7px 10px 7px 13px!important;gap:8px!important}
  html body #heroLayer .vh-words{min-width:0}
  html body #heroLayer .vh-words strong{font-size:13.5px!important;line-height:1.2!important;white-space:normal!important}
  html body #heroLayer .vh-words small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body #heroLayer .vh{gap:8px!important}
  html body #heroLayer .vh-open{margin:0!important}

  /* the Menu and What's On pages use the height between the bars */
  .venue-page{top:calc(var(--sales-header-h,48px) + 6px)!important;bottom:calc(var(--hud-h,52px) + 8px)!important}

  /* the Book / Buy, Share and Offers panels: the whole height between the bars, and a one-line head (Back beside
     the title) so the form or the link is on screen, not under a tall header */
  #salesPage,#sheetPage,#offersPage{top:calc(var(--sales-header-h,48px) + 6px)!important;bottom:calc(var(--hud-h,52px) + 8px)!important;left:12px!important;right:12px!important}
  #salesPage .sales-panel,#sheetPage .sales-panel{width:100%!important;max-width:none!important;border-radius:18px!important}
  .sales-panel-head{display:flex!important;align-items:center;gap:14px;padding:8px 14px!important}
  .sales-panel-head h1{margin:0!important;font-size:19px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sales-panel-head>.btn{flex:none;min-height:36px!important;padding:0 12px!important}
  #salesBody,#sheetBody{padding:12px 16px 16px!important}

  /* EVERY PAGE (Overview, Explore, Concierge, Menu, What's On …) — the page's tabs in one slim row, and its picture
     BESIDE its text: the photo or Sono on the left holding still, the rest scrolling on the right */
  .story-page .ov-menu{min-height:0!important;padding-top:3px!important;padding-bottom:3px!important}
  .story-page .ov-menu button{min-height:38px!important}
  .story-page .ov-hub:has(figure.ov-lens,figure.ov-sono,figure.ah-stage){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;column-gap:12px!important;align-items:start!important}
  .story-page .ov-hub:has(figure.ov-lens,figure.ov-sono,figure.ah-stage)>*,
  .story-page .ov-hub:has(figure.ov-lens,figure.ov-sono,figure.ah-stage)>.ov-zone>*{grid-column:2!important}
  .story-page .ov-hub:has(figure.ov-lens,figure.ov-sono,figure.ah-stage) :is(figure.ov-lens,figure.ov-sono,figure.ah-stage){grid-column:1!important;grid-row:1 / span 40!important;position:sticky!important;top:0;align-self:start!important;
    height:calc(100vh - var(--sales-header-h,48px) - var(--hud-h,52px) - 76px)!important;min-height:150px!important;margin:0!important}
  .story-page .ov-hub figure.ov-lens img,.story-page .ov-hub figure.ov-lens video{height:100%!important;object-fit:cover}
}

/* ─────────────── THE UPRIGHT PHONE'S FOOT (Michael 10-11: "the dock/footer not fully viewable or close to cutting off
   each end … should be able to see icons/info below menu/footer like on desktop") ─────────────── */
@media (max-width:899px) and (min-height:501px){
  /* the tab bar keeps clear of the screen's rounded corners */
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #hud{padding-left:12px!important;padding-right:12px!important;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 50px)!important}
  /* …and the desktop's contact row comes back under it: the Showcase's mark (About) and its ways to reach the team.
     It lives INSIDE the tab bar's measured height (the bar's bottom padding), so every page that ends above the bar
     ends above both — no offsets to redo */
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot{display:flex!important;position:fixed!important;left:0!important;right:0!important;top:auto!important;
    bottom:env(safe-area-inset-bottom,0px)!important;z-index:71!important;height:48px;min-height:0!important;padding:0 20px 2px!important;gap:4px!important;
    justify-content:center;align-items:center;background:transparent!important;border-top:1px solid rgba(255,255,255,.07)!important;
    flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot .cf-id{min-height:44px;margin-right:6px}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot .cf-id img{height:22px!important;max-width:76px!important}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot .cf-methods{flex-wrap:nowrap!important;gap:2px!important;padding:0!important;border:0!important}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot .cf-m{width:44px!important;height:44px!important;border-color:transparent!important;background:none!important}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot .cf-m svg{width:18px;height:18px}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot :is(.cf-tip,.cf-cta,.cf-cookies,.cf-pow){display:none!important}
  /* centred while it fits, scrolls from its first icon when it doesn't (plain centring pushed the first icons off-screen);
     a demo's dashed "not set" placeholders stay on the desktop band */
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot{justify-content:flex-start!important}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot>:first-child{margin-left:auto!important}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot>:last-child{margin-right:auto!important}
  html[data-showcase-ui="glass"]:not(.is-mode) body:not(.shell-v3) #clientFoot .cf-m.cf-demo{display:none!important}
}