/* menu-mobile.css — the phone + portrait-tablet navigation
   (website:ace-menu-phone-1103, Ace board items 95 + 96).

   Markup: partials.html "mobilenav", "menusheet", "searchsheet".
   Behavior: assets/js/menu-sheet.js, plus search-ui.js SheetSearch.

   Breakpoint, shared with the desktop lane (ace-menu-desktop-1103):
     (max-width: 1179px), (orientation: portrait) and (max-width: 1366px)
   Above it nothing in this file applies, except that the sheets stay
   display:none (a closed <dialog> is not rendered anyway).

   ⚠️ LOAD ORDER. This file loads in <head> BEFORE site.css (it rides the
   "themehead" partial so it is in <head> on the landing too). Any rule here
   that overrides site.css must therefore WIN ON SPECIFICITY, not on order —
   hence the `:root` / `.site-head` prefixes below.

   Colors are site.css tokens only (light-dark() pairs), so both themes work
   with no rules of their own. No inline styles at all (swatches are classes).
   Every motion is opt-in under prefers-reduced-motion: no-preference.
   MDN: dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog
        ::backdrop https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::backdrop
        env() https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/env
        dvh https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length
        overscroll-behavior https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overscroll-behavior */

/* ── always: hidden on desktop ─────────────────────────────────────────── */
.mnav { display: none; }
.mi { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

@media (max-width: 1179px), (orientation: portrait) and (max-width: 1366px) {

/* ── slim top logo bar (Q16) ──────────────────────────────────────────────
   The hamburger, the theme button and the search row leave the header: Menu,
   Search and Call live in the bottom nav, the theme switch in the sheet.
   The header hides on scroll down and returns on scroll up. It is sticky, so
   translating it never moves the content below it: no layout shift. */
:root .site-head .navtoggle,
:root .site-head .mainnav,
:root .site-head .themetoggle,
:root .site-head .head-row > search { display: none; }
:root .site-head .head-row { min-height: 56px; padding-block: 6px; flex-wrap: nowrap; }
:root .site-head .brand img { height: 38px; }
:root .site-head { transition: transform .26s cubic-bezier(.2,.7,.2,1); will-change: transform; }
:root .site-head[data-scroll-hidden] { transform: translateY(-100%); }
:root .site-head:focus-within { transform: none; } /* keyboard focus never sits in a hidden header */

/* ── bottom nav (Q13) ─────────────────────────────────────────────────── */
:root .mnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--border);
}
.mnav-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 56px; min-width: 44px; padding: 4px 2px; border-radius: 10px;
  color: var(--fg-muted); font-size: .72rem; font-weight: 600; letter-spacing: .01em; line-height: 1.15;
  text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mnav-tab:hover { color: var(--gold-hi); text-decoration: none; }
.mnav-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.mnav-tab[aria-expanded="true"] { color: var(--gold-hi); background: var(--tint-gold); }
.mnav-tab .mi { width: 24px; height: 24px; }
.mnav-call { color: var(--gold-hi); }
.mnav-quote { color: var(--on-gold); background: linear-gradient(180deg, var(--gold-fill-hi), var(--gold-fill));
  border: 1px solid var(--gold-fill-lo); margin: 2px 0; }
.mnav-quote:hover { color: var(--on-gold); }
.mnav-tab:active { transform: translateY(1px); }
/* The bar overlays the end of the page: give the page room. :has() scopes it
   to pages that carry the bar (the studio loads this file and has no bar). */
:root body:has(> .mnav) { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

/* ── shared sheet frame ───────────────────────────────────────────────── */
:root:has(dialog.msheet[open], dialog.ssheet[open]) { overflow: hidden; }
.msheet, .ssheet {
  margin: 0; padding: 0; border: 0; max-width: none; max-height: none; width: 100%;
  color: var(--fg); background: var(--surface);
  overscroll-behavior: contain;
}
.msheet::backdrop { background: rgba(var(--scrim), .55); }
.ssheet::backdrop { background: var(--bg); }

/* ── menu bottom sheet (Q14, Q15) ─────────────────────────────────────── */
.msheet[open] {
  position: fixed; inset: auto 0 0 0; display: flex; flex-direction: column;
  height: 88vh; height: 88dvh; /* dvh after vh: browsers without dvh keep vh */
  border-radius: 18px 18px 0 0; box-shadow: var(--shadow-pop);
  overflow: hidden;
  translate: 0 var(--drag, 0px);
}
.msheet.is-dragging[open] { transition: none; animation: none; }
.msheet-grab { flex: none; display: flex; justify-content: center; padding: 10px 0 4px; cursor: grab; touch-action: none; }
.msheet-grab span { width: 44px; height: 5px; border-radius: 3px; background: var(--border-strong); }
.msheet-track { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; overflow: clip; }
/* clip, not just hidden: a hidden box is still programmatically scrollable, so focusing
   the town field (or scrollIntoView) scrolled the track and slid every screen out of
   view (found in the landscape walk). clip forbids all scrolling. MDN: overflow clip */
.msheet-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  background: var(--surface); visibility: hidden; translate: 100% 0;
}
.msheet-screen.is-active { visibility: visible; translate: 0 0; }
.msheet-screen.is-left { translate: -28% 0; }
.msheet-head {
  flex: none; display: grid; grid-template-columns: minmax(44px, auto) 1fr minmax(44px, auto); align-items: center;
  gap: 6px; padding: 0 10px 8px 14px; border-bottom: 1px solid var(--border); touch-action: none;
}
.msheet-screen[data-screen="root"] .msheet-head { grid-template-columns: 1fr minmax(44px, auto); }
.msheet-title { margin: 0; font-size: 1.15rem; font-weight: 700; }
.msheet-screen:not([data-screen="root"]) .msheet-title { text-align: center; }
.msheet-x, .msheet-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px;
  padding: 0 8px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: var(--fg);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.msheet-x { justify-self: end; }
.msheet-back { justify-self: start; color: var(--gold); padding-left: 2px; }
.msheet-x:hover, .msheet-back:hover { background: var(--surface-hover); }
.msheet-x:focus-visible, .msheet-back:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.msheet-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 8px 14px calc(16px + env(safe-area-inset-bottom, 0px));
}
.msheet ul { list-style: none; margin: 0; padding: 0; }
.msheet a { color: var(--fg); text-decoration: none; }
.msheet a:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 8px; }

/* root rows: the five top-level groups */
.msheet-rows li + li { border-top: 1px solid var(--border); }
.msheet-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 4px; }
.msheet-row:hover { background: var(--surface-hover); }
.msheet-row-i { width: 28px; height: 28px; color: var(--gold); }
.msheet-row-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.msheet-row-l { font-size: 1.05rem; font-weight: 600; }
.msheet-note { display: block; font-size: .82rem; font-weight: 400; color: var(--fg-subtle); line-height: 1.3; }
.msheet-chev { width: 20px; height: 20px; color: var(--fg-subtle); }

/* promos, CTA row, trust line, theme switch, footer */
.msheet-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.msheet-promo { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px;
  background: var(--tint-gold); border: 1px solid var(--border-strong); border-radius: 12px; font-weight: 600; font-size: .92rem; }
.msheet-promo .mi { color: var(--gold); width: 22px; height: 22px; }
.msheet-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.msheet a.msheet-act { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--border-strong); font-weight: 700; color: var(--fg); }
.msheet a.msheet-act--gold { color: var(--on-gold); background: linear-gradient(180deg, var(--gold-fill-hi), var(--gold-fill));
  border-color: var(--gold-fill-lo); }
.msheet-trust { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px;
  margin: 14px 0 0; font-size: .82rem; color: var(--fg-muted); text-align: center; }
.msheet-trust a { color: var(--fg-muted); display: inline-block; padding: 12px 0; }
.msheet-trust a:hover { color: var(--gold-hi); }
.msheet-trust a span { color: var(--gold); }
.msheet-dot { color: var(--fg-subtle); }
.msheet-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
  margin-top: 6px; padding: 0 4px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.msheet-theme:has(.msheet-switch[hidden]) { display: none; }
.msheet-theme-l { font-weight: 600; }
.msheet-switch { position: relative; width: 52px; height: 32px; min-width: 52px; margin: 6px 0; padding: 0; border-radius: 16px;
  border: 1px solid var(--border-strong); background: var(--surface-sunk); cursor: pointer; }
.msheet-switch[hidden] { display: none; }
.msheet-switch::before { content: ""; position: absolute; inset: -7px -2px; } /* 44px tall hit area */
.msheet-switch-k { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--fg-muted); transition: translate .18s ease; }
.msheet-switch[aria-pressed="true"] { background: var(--gold-fill); border-color: var(--gold-fill-lo); }
.msheet-switch[aria-pressed="true"] .msheet-switch-k { translate: 20px 0; background: var(--on-gold); }
.msheet-switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.msheet-foot { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; margin-top: 10px; }
.msheet-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-subtle); font-size: .88rem; }
.msheet-foot a:hover { color: var(--gold-hi); }

/* drill-down screens */
.msheet a.msheet-hub { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px;
  margin: 4px 0 6px; padding: 0 14px; border-radius: 10px; background: var(--tint-gold); color: var(--gold-hi); font-weight: 700; }
.msheet-hub .mi { width: 20px; height: 20px; }
.msheet-sec { margin-top: 14px; }
.msheet-sec-h { margin: 0 0 4px; padding: 0 4px; font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fg-subtle); font-weight: 700; }
.msheet-list li + li { border-top: 1px solid var(--border); }
.msheet-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; font-size: 1rem; }
.msheet-link:hover { background: var(--surface-hover); color: var(--gold-hi); }
.msheet-link .mi { color: var(--gold); width: 22px; height: 22px; }
.msheet-link-l { min-width: 0; }
.msheet-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; }
.msheet-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px;
  border: 1px solid var(--border-strong); border-radius: 22px; font-size: .92rem; font-weight: 600; }
.msheet-chip:hover { border-color: var(--gold); color: var(--gold-hi); }
.msheet-sw { width: 24px; height: 24px; border-radius: 50%; background: var(--sw, var(--surface-sunk));
  box-shadow: inset 0 0 0 1px var(--border-strong); }
.msheet-sw--white { --sw: #f3f0ea; } .msheet-sw--gray { --sw: #8d8c88; } .msheet-sw--black { --sw: #1d1c1a; }
.msheet-sw--beige { --sw: #d8c7a6; } .msheet-sw--cream { --sw: #efe4c8; } .msheet-sw--gold { --sw: #c9a24f; }
.msheet-sw--brown { --sw: #6f4f36; } .msheet-sw--blue { --sw: #3f5b78; }
.msheet-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msheet-tile { display: flex; flex-direction: column; gap: 6px; min-height: 96px; padding: 12px;
  border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2); }
.msheet-tile .mi { color: var(--gold); width: 28px; height: 28px; }
.msheet-tile-l { font-weight: 700; }
.msheet-towns { display: flex; flex-direction: column; gap: 6px; }
.msheet-town-l { padding: 0 4px; font-weight: 600; font-size: .92rem; }
.msheet-town-q { width: 100%; min-height: 48px; padding: 0 14px; margin: 0; font: inherit; font-size: 16px; /* iOS zooms under 16px */
  color: var(--fg); background: var(--surface-2); border: 1px solid var(--field-border); border-radius: 10px; }
.msheet-town-q:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.msheet-town-n { margin: 0; padding: 0 4px; font-size: .85rem; color: var(--fg-muted); }
.msheet-town-n[hidden], .msheet-list li[hidden] { display: none; }

/* ── full-screen search sheet (Q18-Q20) ───────────────────────────────── */
.ssheet[open] { position: fixed; inset: 0; display: flex; height: 100vh; height: 100dvh; width: 100%; }
.ssheet-search { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
.ssheet-form { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; margin: 0 -12px; padding: 8px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border); }
.ssheet-form > button { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--fg-muted); cursor: pointer; }
.ssheet-form > button:hover { color: var(--gold-hi); }
.ssheet-form > button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ssheet-form > button[hidden] { display: none; }
.ssheet-back { color: var(--gold); }
.ssheet-input { flex: 1 1 auto; min-width: 0; height: 46px; margin: 0; padding: 0 12px; font: inherit; font-size: 16px; /* iOS zooms under 16px */
  color: var(--fg); background: var(--surface-2); border: 1px solid var(--field-border); border-radius: 10px;
  -webkit-appearance: none; appearance: none; }
.ssheet-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.ssheet-input::placeholder { color: var(--fg-subtle); }
.ssheet-input::-webkit-search-decoration { -webkit-appearance: none; }
.ssheet-search.is-listening .ssheet-input { border-color: var(--gold); }
.ssheet-empty[hidden] { display: none; }
.ssheet-sec { margin-top: 18px; }
.ssheet-sec[hidden] { display: none; }
.ssheet-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ssheet-sec-h { margin: 0 0 8px; font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-subtle); font-weight: 700; }
.ssheet-clear { min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; }
.ssheet-pop, .ssheet-recent, .ssheet-quick { list-style: none; margin: 0; padding: 0; }
.ssheet-pop { display: flex; flex-wrap: wrap; gap: 8px; }
.ssheet-pop .srch-chip { text-decoration: none; color: var(--fg); }
.ssheet-recent li + li { border-top: 1px solid var(--border); }
.ssheet-recent a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 4px; color: var(--fg); text-decoration: none; }
.ssheet-recent a:hover { color: var(--gold-hi); }
.ssheet-recent .mi { width: 20px; height: 20px; color: var(--fg-subtle); }
.ssheet-fine { margin: 6px 0 0; font-size: .78rem; color: var(--fg-subtle); }
/* SheetSearch (search-ui.js): the type-ahead panel lives IN the sheet,
   in flow, instead of floating under a header box. */
.ssheet .srch-pop { position: static; margin: 10px 0 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; max-height: none; overflow: visible; }
.ssheet .srch-opt { min-height: 56px; padding: 6px 4px; }
.ssheet .srch-thumb { width: 48px; height: 48px; }
.ssheet .srch-chips--parsed { padding: 0 0 10px; }
.ssheet-quick { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.ssheet-quick::-webkit-scrollbar { display: none; }
.ssheet-quick .srch-chip { flex: none; }
.ssheet .srch-voice-status { position: static; margin: 8px 0 0; box-shadow: none; }

/* ── motion: opt-in only ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .msheet[open] { animation: msheet-up .32s cubic-bezier(.2,.8,.2,1); transition: translate .26s cubic-bezier(.2,.8,.2,1); }
  .msheet.is-closing { animation: msheet-down .24s cubic-bezier(.4,0,1,1) forwards; }
  .msheet[open]::backdrop { animation: msheet-fade .32s ease; }
  .msheet.is-closing::backdrop { animation: msheet-fade .24s ease reverse forwards; }
  .msheet-screen { transition: translate .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
  .msheet-screen.is-active { transition: translate .3s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .ssheet[open] { animation: msheet-fade .2s ease; }
  .ssheet.is-closing { animation: msheet-fade .16s ease reverse forwards; }
}
@keyframes msheet-up { from { transform: translateY(100%); } }
@keyframes msheet-down { to { transform: translateY(100%); } }
@keyframes msheet-fade { from { opacity: 0; } }

/* phone landscape: the sheet would be taller than the screen is useful */
@media (orientation: landscape) and (max-height: 520px) {
  .msheet[open] { height: 100vh; height: 100dvh; border-radius: 0; }
  :root .site-head .head-row { min-height: 48px; padding-block: 3px; }
  :root .site-head .brand img { height: 32px; }
  .mnav-tab { min-height: 48px; flex-direction: row; gap: 6px; }
  :root body:has(> .mnav) { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}

} /* end breakpoint */

/* Above the breakpoint the sheets are never shown, even if script opened one
   (a resize from portrait to landscape tablet). */
@media (min-width: 1180px) and (orientation: landscape), (min-width: 1367px) {
  .msheet, .ssheet { display: none; }
}
.msheet-screen.no-anim { transition: none !important; }
/* Icon color in the bottom nav follows each tab's text color (the sprite's
   menu-icons.css reads --mi-color / --mi-hot, default gold). */
.mnav-tab { --mi-color: currentColor; --mi-hot: currentColor; }

/* The landing (/) also loads landing.css, whose bare `section {padding…}`,
   `h2 {font-size…}` and `section:not(.hero):not(.quote) > h2` (0,2,2) would
   restyle the sheets' <section> screens and their <h2> titles (found in the
   landscape walk of /: a 56px gap above every screen header). Pin them. */
:root .msheet .msheet-screen, :root .ssheet .ssheet-sec { padding: 0; max-width: none; scroll-margin-top: 0; }
:root .ssheet .ssheet-sec { margin: 18px 0 0; }
:root .msheet .msheet-title { margin: 0; max-width: none; font-size: 1.15rem; line-height: 1.2; text-align: inherit; }
:root .msheet .msheet-screen:not([data-screen="root"]) .msheet-title { text-align: center; }
:root .ssheet .ssheet-sec-h { margin: 0 0 8px; max-width: none; font-size: .76rem; line-height: 1.3; text-align: left; }