/* hkf-mobile.css — the one mobile hardening layer for every published Highkeyflair page.
 *
 * Why this file exists: HKF-MOBILE-OPT v1 shipped as an inline <style id="hkf-mobile-opt"> block
 * copy-pasted into 14 pages. Eleven copies were byte-identical; three had drifted (home/client/rsvp
 * deltas) and two (terms/privacy) carried rules for a .header-inner markup those pages do not have.
 * Three further published pages — pricing, ops, studio-os — never received the block at all, so
 * they had no 44px backstop, no iOS-zoom guard and no safe-area handling.
 *
 * One shared file makes the layer auditable and keeps a page from silently falling out of it.
 * Pages that need a genuine delta keep a small <style id="hkf-mobile-page"> AFTER this link.
 *
 * Cascade: this is linked after each page's own <style> blocks, so it still wins ties by source
 * order exactly as the inline block did. Most rules are !important for the same reason they were.
 *
 * Presentation only — no IDs, routes, copy, tokens or behaviour are declared here.
 */

/* ---------- 1. overflow + text-size foundation ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body{overflow-x:hidden}}
body{-webkit-tap-highlight-color:transparent}
img,video,iframe,canvas{max-width:100%}
[id]{scroll-margin-top:96px}

/* ---------- 1b. notched phones: keep the sticky header clear of the status bar.
 * env() resolves to 0 in normal portrait Safari, so this is inert there and only bites in
 * installed/standalone mode and landscape, where viewport-fit=cover extends under the notch. */
header,.topbar,.site-nav{padding-top:env(safe-area-inset-top)} /* FLAG-MOB85-02/10/2026 F10: header-less pages use .topbar/.site-nav instead */

/* ---------- 2. unified mobile header: brand row + scrollable nav row ---------- */
/* The 7-link nav cannot fit one row inside 900px; without this the Sign-in chip is pushed past the
 * viewport and clipped by overflow-x:clip (measured at 834px, iPad portrait). */
@media(max-width:900px){
.header-inner{flex-wrap:wrap!important;row-gap:8px!important}
.header-inner .brand{order:1!important;flex:1 1 auto!important;min-width:0!important}
.header-actions{order:2!important;width:100%!important;flex:1 1 100%!important;flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none!important;justify-content:flex-start!important;border-top:1px solid var(--line-2)!important;padding-top:8px!important;padding-bottom:4px!important;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)!important;mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)!important} /* FLAG-MOB85-02/10/2026 F8: mask both edges so the row never opens mid-word */
.header-actions::-webkit-scrollbar{display:none!important}
.header-actions a.btn,.header-actions .btn,.header-actions button{flex:0 0 auto!important;margin-right:18px!important}
.header-actions a.btn:last-child,.header-actions .btn:last-child{margin-right:8px!important}
[id]{scroll-margin-top:124px}
.brand p{display:none!important}
}
@media(max-width:420px){
.header-inner{padding:12px 14px!important;gap:12px!important}
.brand-mark{width:32px!important;height:32px!important}
.brand-name{font-size:15px!important;letter-spacing:.16em!important}
}

/* ---------- 3. compact utility nav (.site-nav: pricing, terms, privacy) ---------- */
@media(max-width:640px){
.site-nav{flex-wrap:wrap!important;row-gap:2px}
.site-nav nav{flex-wrap:wrap!important;gap:10px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none!important}
.site-nav nav::-webkit-scrollbar{display:none!important}
.site-nav nav a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- 4. tap targets: every control reaches 44px on touch ---------- */
@media(max-width:640px){
.btn-small{min-height:44px!important}
.icon-btn{min-width:44px!important;min-height:44px!important}
summary{min-height:44px}
.grid-3{grid-template-columns:1fr!important}
}
/* Standalone nav links — header nav, the .site-nav utility rows and the in-page contents lists on
 * pricing/terms/privacy. These are display:block, so a 44px floor genuinely applies. Not scoped to
 * a breakpoint: the tablet-width utility navs measured 23px tall at 768-1024px. */
nav a{min-height:44px}
@media (pointer:coarse){
.btn-small{min-height:44px!important}
.icon-btn{min-width:44px!important;min-height:44px!important}
}
/* Standalone footer/utility links: grow the hit area, never the type. Inline prose links are
 * deliberately excluded — WCAG 2.5.8 exempts links in a sentence. */
@media(max-width:640px){
footer a,footer li>a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- 5. iOS: stop auto-zoom on focus ----------
 * Applies to the 900px tablet boundary, not 640px: iPad Safari auto-zooms on a < 16px control just
 * as iPhone does, and equipment's date + search fields measured 14-15px at 834px. */
@media(max-width:900px){
input,select,textarea{font-size:16px!important}
}
/* A page rule with higher specificity beats the bare element guard above — equipment pins
 * .datebar input[type="date"] to 15px with !important (measured 15px at 834px). Match that
 * specificity here, later in the cascade, so the floor actually holds. */
@media(max-width:900px){
.datebar input[type="date"]{font-size:16px!important}
}
/* Same floor for any touch device at any width — iPad landscape is 1024px, past the width guard. */
@media(pointer:coarse){
input,select,textarea{font-size:16px!important}
.datebar input[type="date"]{font-size:16px!important}
}

/* ---------- 6. booking calendar stays tappable on the narrowest phones ---------- */
@media(max-width:480px){
.cal{gap:3px!important}
.cal .cal-cell{min-height:44px!important;font-size:12px!important;padding:6px 2px!important}
}
@media(max-width:360px){
.cal .cal-cell{min-height:44px!important;font-size:11.5px!important;padding:6px 1px!important}
}

/* ---------- 7. date + time-window never squeeze side-by-side on narrow phones ---------- */
@media(max-width:420px){
.time-window{flex-wrap:wrap!important}
.time-window .tw-field{flex:1 1 100%!important}
.time-window .tw-arrow{display:none!important}
.datefield{flex:1 1 100%!important}
}

/* ---------- 8. toasts go full-width on phones instead of overflowing centre ---------- */
@media(max-width:640px){
.toast-container{left:12px!important;right:12px!important;transform:none!important;width:auto!important;max-width:none!important}
.toast{width:100%!important;text-align:center}
}

/* ---------- 9. lightbox + dialogs fit notched phones ---------- */
#lightbox{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important}
#lightbox img{max-height:72dvh!important}
.modal-card{max-width:calc(100vw - 24px)!important;max-height:88dvh!important;max-height:88svh!important;overflow:auto!important;-webkit-overflow-scrolling:touch}

/* ---------- 10. tables scroll with momentum, never push the page wide ---------- */
.table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}

/* ---------- 11. hero text never clips on 320-360px screens ---------- */
@media(max-width:640px){
.hero-title,.hero h1{text-wrap:balance;overflow-wrap:break-word;word-break:normal}
.hero-overlay{padding:22px 18px 20px!important}
}

/* ---------- 12. tight phones: gallery + shop grids breathe ---------- */
@media(max-width:400px){
.grid{gap:12px!important}
.gallery-grid{gap:10px!important}
}

/* ---------- 12b. phone caption floor (audit 85 F17): meta that carries space, cycle, price basis
 * and process step floors at 12px on phones. Kickers stay uppercase + tracked so they keep their
 * voice at the larger size. */
@media(max-width:900px){
.eyebrow,.kicker,.ed-kicker,.c2-foot-h,.step-chip,.date-mirror{font-size:12px!important}
/* Audit 86 F5/F9: roles the 12b list missed by name. These carry the hero's spec and
   price line, the spec labels, the step-1 process kicker, the day-hub brand line and its
   Message-the-studio action. Measured 11px at 390x844. !important because the page's own
   <style> blocks are linked after this layer and outrank it otherwise. */
.wizard-kicker,.ed-spec dt,.topbar .btn,.topbar .brand small,.stat .small,.brand small,#heroSpecCaption{font-size:12px!important}
.datebar label,.filters h2,.filters h3,.acard .ph .cat,#cal .head,.brand p,.head .brand span,#steps .step{font-size:12px}
}

/* ---------- 12c. short-viewport chrome (audit 85 N1) ----------
 * Phone landscape is 390px tall. Measured at 844x390 before this rule, the pinned header plus subnav
 * took 138px on home and book (35%), 166px on Studio OS (43%) and 220px on the client portal (56%)
 * of the whole screen, at first paint, before anything was read. Collapse-on-scroll helps only after
 * the user scrolls, so at this height the chrome is compressed instead: one row, smaller marks, no
 * tagline. It still re-expands the moment the device is rotated back (the query is height-based). */
@media(max-width:900px) and (max-height:430px){
  header,.topbar,.site-nav{padding-top:4px!important;padding-bottom:2px!important}
  .header-inner,.site-nav{row-gap:0!important;flex-wrap:nowrap!important}
  .brand p,.brand-sub,.head .brand span{display:none!important}
  .brand-mark{width:24px!important;height:24px!important}
  .brand-name{font-size:13px!important}
  header nav,header .header-actions,.site-nav nav{gap:4px!important}
  .site-nav nav a,header .header-actions a,header nav a{padding-top:4px!important;padding-bottom:4px!important}
  .tab-subnav{min-height:0!important}
  .tab-subnav .pill,.tab-subnav a{padding-top:4px!important;padding-bottom:4px!important}
  /* The nested nav is what wraps: on the portal it measured 92px (three rows) inside a 105px action
     bar. One scrollable row is the whole point of landscape, so keep it on one line. */
  header nav{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none!important}
  header nav::-webkit-scrollbar{display:none!important}
  header nav a{white-space:nowrap!important}
}

/* ---------- 13. viewport-unit guards ----------
 * Page-specific dvh companions live in each page's #hkf-mobile-page delta, so a shared selector
 * here cannot accidentally constrain an unrelated component that happens to share the class. */