/* Keep the phone canvas still. Only the page-tab strip pans horizontally.
 * Do not fix body position, disable zoom, or block vertical content scrolling.
 * Do not put touch-action:pan-y on an ancestor: it would block the tab swipe. */
@media(max-width:760px){
  html,body{inline-size:100%;max-inline-size:100%;overflow-x:hidden;overscroll-behavior-x:none}
  @supports(overflow:clip){html,body{overflow-x:clip}}
  .wrap,.wrap.wide{inline-size:100%;max-inline-size:100%;min-inline-size:0}
  .wrap>*{min-inline-size:0;max-inline-size:100%}
  .page{min-inline-size:0;max-inline-size:100%}
  .pages{
    position:sticky;top:env(safe-area-inset-top,0px);z-index:12;
    inline-size:100%;max-inline-size:100%;min-inline-size:0;
    flex:0 0 auto;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;touch-action:pan-x pinch-zoom;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    background:var(--bg);padding-block:4px;
    scroll-padding-inline:8px
  }
  .pages::-webkit-scrollbar{display:none}
  .pages .pgtab{flex:0 0 auto;min-block-size:44px}
}

/* Pinned tab bar + steady header on phones (user 2026-10-20):
 * the bar sticks at the very top with a solid backing that covers the notch area,
 * and the header keeps one height on every page so the bar never jumps. */
@media(max-width:760px){
  .pages{top:0;padding-top:calc(env(safe-area-inset-top,0px) + 4px);
    box-shadow:-16px 0 0 var(--bg),16px 0 0 var(--bg),0 6px 10px -8px rgba(0,0,0,.6)}
  .wrap>header .eyebrow,.wrap>header .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wrap>header #status[hidden]{display:block!important;visibility:hidden}
  .wrap>header #status{min-block-size:1.3em}
}

/* The tab bar fits the screen: the tabs share the width, nothing to scroll (user 2026-10-24). */
@media(max-width:760px){
  .pages{overflow-x:hidden;gap:2px}
  .pages .pgtab:not([hidden]){flex:1 1 auto;min-inline-size:0;padding-inline:3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:clip;
    font-size:clamp(11px,3.3vw,15px);letter-spacing:.02em}
}

/* Short tab bar, flush under the header (user 2026-10-24): no empty band between the header and the tabs. The bar
 * sticks just below the notch; a strip fills the notch area only while the bar is stuck, so nothing jumps. */
@media(max-width:760px){
  .wrap>header+.pages{margin-top:-18px}
  .pages{top:env(safe-area-inset-top,0px);padding-block:0;background:transparent;box-shadow:none;transition:background-color .2s,box-shadow .2s}
  .pages .pgtab,.pages .pgtab:not([hidden]){min-block-size:34px;padding-block:6px 5px}
  html.tabs-stuck .pages{background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:-16px 0 0 color-mix(in srgb,var(--bg) 90%,transparent),16px 0 0 color-mix(in srgb,var(--bg) 90%,transparent),0 6px 10px -8px rgba(0,0,0,.6)}
}