/* UnboxedAI app shell (final integration, 2026-10-29): page transitions, phone tab bar, compact header, bottom sheets, tap targets.
   Everything that changes layout sits in (max-width:819px) so the desktop look is untouched. Selectors carry an extra "html"/"body"
   because index.html and pages/service.css inline their own copies of the nav and menu rules and may load after this file.
   Stacking (existing): .nav 30, .menu 25, .local-header 20, dialogs live in the top layer. Tab bar 22, menu scrim 24. */

/* ---------- page transitions: a short fade with a slight rise between pages (cross-document, CSS only) ---------- */
@media (prefers-reduced-motion:no-preference) {
  @view-transition { navigation:auto; types:ub-nav; }
  ::view-transition-group(root) { animation-duration:.2s; }
  html:active-view-transition-type(ub-nav)::view-transition-old(root) { animation:none; }
  html:active-view-transition-type(ub-nav)::view-transition-new(root) { animation:ub-vt-in .2s cubic-bezier(.2,.8,.2,1) both; }
  html:active-view-transition-type(ub-nav) .ub-tabs { view-transition-name:ub-tabs; }   /* the bar stays put while the page changes */
  ::view-transition-group(ub-tabs) { animation-duration:0s; }
  ::view-transition-old(ub-tabs) { display:none; }
  ::view-transition-new(ub-tabs) { animation:none; }
  @keyframes ub-vt-in { from { opacity:0; transform:translateY(10px); } }
  @keyframes ub-sheet-up { from { transform:translateY(100%); } }
  @keyframes ub-scrim-in { from { opacity:0; } }
}

/* ---------- tab bar: hidden except on phones ---------- */
.ub-tabs { display:none; }

@media (max-width:819px) {
  html body { padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)); }   /* the footer is never covered by the bar */

  .ub-tabs {
    --ub-tab-bg:rgba(14,17,34,.8); --ub-tab-hair:var(--stroke-2,rgba(178,190,255,.22)); --ub-tab-ink:var(--mute,#b3b8cf); --ub-tab-on:var(--ink,#f3f4fa); --ub-tab-accent:var(--link,#8d9bff);
    position:fixed; left:0; right:0; bottom:0; z-index:22; box-sizing:border-box;
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    height:calc(56px + env(safe-area-inset-bottom,0px)); padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
    background:var(--hull,#0e1122); box-shadow:0 -1px 0 var(--ub-tab-hair);
  }
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .ub-tabs { background:var(--ub-tab-bg); -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%); }
  }
  html[data-theme="light"] .ub-tabs { --ub-tab-bg:rgba(255,255,255,.84); --ub-tab-hair:var(--stroke-2,rgba(20,24,60,.18)); }
  html[data-theme="light"] .ub-tabs { --ub-tab-ink:var(--mute,#4d5270); --ub-tab-on:var(--ink,#14162b); --ub-tab-accent:var(--link,#3445b8); }
  .ub-tab {
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:44px; min-height:56px; padding:6px 2px 4px;
    color:var(--ub-tab-ink); font:600 11px/1.1 var(--font-body,system-ui,sans-serif); letter-spacing:0; text-decoration:none; text-align:center;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .ub-tab span { display:block; max-width:100%; white-space:nowrap; }
  .ub-tab svg { display:block; flex:none; }
  .ub-tab:active { background:color-mix(in srgb,var(--ub-tab-ink) 14%,transparent); }
  .ub-tab[aria-current="page"] { color:var(--ub-tab-on); }
  .ub-tab[aria-current="page"] svg { color:var(--ub-tab-accent); }
  .ub-tab[aria-current="page"]::before { content:""; position:absolute; top:0; left:30%; right:30%; height:2px; border-radius:0 0 2px 2px; background:var(--ub-tab-accent); }
  .ub-tab:focus-visible { outline:2px solid var(--ub-tab-accent); outline-offset:-4px; border-radius:12px; }
  html.menu-open .ub-tabs { visibility:hidden; }                                  /* the open menu sheet takes its place */

  /* ---------- compact top header: the island goes from 56 to 52 px high ---------- */
  html body .nav { top:calc(env(safe-area-inset-top,0px) + 8px); padding:4px 4px 4px 16px; }
  html body .nav .logo { height:18px; width:192px; }
  html body .global-header { min-height:calc(env(safe-area-inset-top,0px) + 68px); }
  html body .local-header { top:calc(env(safe-area-inset-top,0px) + 68px); }
  html { scroll-padding-top:calc(env(safe-area-inset-top,0px) + 148px); }
  html body .burger, html body .tbtn { width:44px; height:44px; }
  html .hero-copy { bottom:calc(env(safe-area-inset-bottom,0px) + 72px); }    /* the home hero copy clears the tab bar by 16 px */

  /* ---------- the phone menu becomes a bottom sheet (same open state: html.menu-open) ---------- */
  html.nav-ready .menu {
    inset:auto 0 0 0; max-height:min(82dvh,calc(100dvh - env(safe-area-inset-top,0px) - 84px)); overflow-y:auto; overscroll-behavior:contain;
    border-radius:26px 26px 0 0; gap:2px;
    padding:34px max(24px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 20px) max(24px,env(safe-area-inset-left,0px));
    box-shadow:inset 0 1px 0 var(--stroke-2,rgba(178,190,255,.22)),0 -24px 60px -24px rgba(0,0,0,.55);
    transform:translateY(100%); opacity:0; visibility:hidden;
    transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .25s linear .1s,visibility 0s linear .42s;
  }
  html.nav-ready.menu-open .menu { transform:none; opacity:1; visibility:visible; transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .2s linear,visibility 0s; }
  html.nav-ready .menu::before { content:""; position:absolute; top:10px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--stroke-2,rgba(178,190,255,.3)); }
  html.nav-ready .menu a { font-size:28px; min-height:52px; transform:translateY(14px); }
  html.nav-ready.menu-open .menu a { transform:none; }
  html.nav-ready.menu-open::after { content:""; position:fixed; inset:0; z-index:24; background:rgba(5,6,12,.55); pointer-events:none; }
  html[data-theme="light"].nav-ready.menu-open::after { background:rgba(20,22,43,.32); }

  /* ---------- bottom sheets: product video, Station Lab detail, products shelf ---------- */
  dialog.vd { padding:0; place-items:end center; }
  dialog.vd .vd-panel { position:relative; border-radius:22px 22px 0 0; padding-bottom:env(safe-area-inset-bottom,0px); }
  dialog.vd .vd-panel::before, dialog.lab-dialog .lab-d-top::before, dialog.pv-sheet .pv-panel::before {
    content:""; position:absolute; z-index:4; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:var(--stroke-2,rgba(178,190,255,.3)); pointer-events:none;
  }
  dialog.vd .vd-panel::before { background:rgba(255,255,255,.28); }
  dialog.vd .vd-head { padding-top:16px; }

  dialog.lab-dialog { width:100%; max-width:100%; height:auto; max-height:min(92dvh,calc(100dvh - env(safe-area-inset-top,0px) - 16px)); margin:auto 0 0; border-radius:26px 26px 0 0; }
  dialog.lab-dialog .lab-d-top { padding-top:26px; border-radius:26px 26px 0 0; }
  dialog.lab-dialog .lab-d-content { padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)); }

  dialog.pv-sheet { width:100%; max-width:100%; max-height:min(92dvh,calc(100dvh - env(safe-area-inset-top,0px) - 16px)); margin:auto 0 0; border-radius:26px 26px 0 0; }
  html dialog.pv-sheet .pv-panel > .pv-close { position:absolute; right:14px; top:12px; }   /* was drawn in flow, left of the gallery */
  dialog.pv-sheet .pv-panel { max-height:min(92dvh,calc(100dvh - env(safe-area-inset-top,0px) - 16px)); border-radius:26px 26px 0 0; padding:60px 18px calc(28px + env(safe-area-inset-bottom,0px)); }

  /* ---------- filter chip rows: one scrollable row, snap, no scrollbar, 44 px chips ---------- */
  html .products .pv-filters, html .lab-chips {
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  }
  html .products .pv-filters::-webkit-scrollbar, html .lab-chips::-webkit-scrollbar { display:none; }
  html .products .pv-filters { margin-inline:calc(-1 * var(--pv-gutter,0px)); padding-inline:var(--pv-gutter,0px); scroll-padding-inline:var(--pv-gutter,0px); }
  html .lab-chips { margin:-4px; padding:4px; scroll-padding-inline:4px; }
  html .products .pv-filters button, html .lab-chip { flex:none; min-height:44px; scroll-snap-align:start; }

  /* ---------- tap targets ---------- */
  html footer a, html .tlink, html .chipset span { min-height:44px; align-items:center; }
  html .tlink { display:inline-flex; }
}

/* sheets slide up (not under reduced motion; the dialogs' own entrance animations stay where they are) */
@media (max-width:819px) and (prefers-reduced-motion:no-preference) {
  dialog.vd[open] .vd-panel { animation:ub-sheet-up .38s cubic-bezier(.2,.8,.2,1) both; }
  dialog.vd.vd-still[open] .vd-panel { animation:none; }
  dialog.lab-dialog[open] { animation:ub-sheet-up .42s cubic-bezier(.2,.8,.2,1) both; }
  html.nav-ready.menu-open::after { animation:ub-scrim-in .3s linear both; }
}
@media (max-width:819px) and (prefers-reduced-motion:reduce) {
  html.nav-ready .menu, html.nav-ready.menu-open .menu { transition:none; }
  html.nav-ready .menu a, html.nav-ready.menu-open .menu a { transition:none; transform:none; }
  dialog.vd[open] .vd-panel, dialog.lab-dialog[open], html.nav-ready.menu-open::after { animation:none; }
}
@media (max-width:389px) { html body .nav .logo { height:16px; width:171px; } }
@media (max-width:374px) { html body .nav .logo { height:14px; width:149px; } }
@media (max-width:819px) and (prefers-reduced-transparency:reduce) {
  .ub-tabs { background:var(--hull,#0e1122); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (forced-colors:active) and (max-width:819px) {
  .ub-tabs { border-top:1px solid CanvasText; }
  .ub-tab[aria-current="page"] { outline:2px solid Highlight; outline-offset:-4px; }
}