/* ===== Phones and tablets (narrow screens, or any touch-first device): no phone mockup.
   The app fills the whole screen like an installed app, and the preview controls float over it in a dock on the right edge. ===== */
@media (max-width:1024px), (hover:none) and (pointer:coarse){
  :root{ --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px); --safe-r:env(safe-area-inset-right, 0px); }
  html,body{ height:100%; overflow:hidden; }
  body{ padding:0; display:block; min-height:0; }
  #frame-glow, #notch{ display:none; }
  #frame-wrap{ position:fixed; inset:0; max-width:none; margin:0; }
  #frame{ max-width:none; height:100%; min-height:0; border-radius:0; border:0; box-shadow:none; }
  #app{ border-radius:0; }
  /* Top bars clear the status bar / notch instead of the mockup's notch */
  .d3-row{ height:calc(56px + var(--safe-t)); padding-top:calc(14px + var(--safe-t)); }
  .d3-head.hide{ transform:translateY(calc(-56px - var(--safe-t))); }
  .dc-top, .gm-top, .ms-top{ padding-top:calc(14px + var(--safe-t)); }
  .d2-bar{ padding-top:calc(14px + var(--safe-t)); height:calc(62px + var(--safe-t)); }
  #scr-auth .scr{ padding-top:calc(28px + var(--safe-t)); padding-bottom:calc(28px + var(--safe-b)); }
  .nav{ bottom:max(14px, var(--safe-b)); }
  .search input, .sheet textarea, .au-in{ font-size:16px; }

  /* Floating glass dock of preview controls: the same glass as the desktop bar, stood on end at the right edge */
  #preview-bar{
    position:fixed; z-index:70; top:50%; right:calc(8px + var(--safe-r)); transform:translateY(-50%);
    width:auto; max-width:none; height:auto; margin:0; flex-direction:column; gap:4px; padding:6px;
    border-radius:28px; transition:opacity .2s, visibility .2s;
  }
  #preview-bar-items{ flex-direction:column; gap:4px; }
  /* Every control becomes a 44px round button; visible labels move to screen-reader-only text */
  .pv-ib, .pv-cta{ min-inline-size:44px; min-block-size:44px; }
  .pv-cta{ padding:0; margin:0; }
  .pv-cta i{ font-size:19px; }
  #preview-bar .lg{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  #dock-toggle{ display:inline-flex; color:var(--cream-dim); font-size:16px; }
  #dock-toggle:hover{ color:var(--nb-text); }
  /* Collapsed: only the toggle stays, as a tab on the screen edge */
  #preview-bar.collapsed{ padding:4px 2px 4px 4px; right:0; border-radius:16px 0 0 16px; border-right:0; }
  #preview-bar.collapsed #preview-bar-items{ display:none; }
  #preview-bar.collapsed #dock-toggle i{ transform:rotate(180deg); }
  /* Step out of the way while an in-app sheet is open (hidden from keyboard and screen readers too) */
  body:has(#sheet-host.open) #preview-bar{ opacity:0; visibility:hidden; }
}
/* Tablets in full-screen mode: content sits in a centred reading column (the Gig Map stays edge to edge) */
@media (min-width:700px) and (max-width:1024px), (min-width:700px) and (hover:none) and (pointer:coarse){
  :root{ --col:640px; }
  .screen:not(#scr-gigs) > .scr{ width:100%; max-width:var(--col); margin-inline:auto; border-inline:1px solid var(--line); }
  .screen:not(#scr-gigs) > .d2-bar{ left:max(0px, calc((100% - var(--col)) / 2)); right:max(0px, calc((100% - var(--col)) / 2)); }
  .nav{ width:min(560px, calc(100% - 28px)); margin-inline:auto; }
  .sheet{ width:min(var(--col), 100%); margin-inline:auto; border-inline:1px solid var(--line); }
  .vc{ flex-basis:min(86%, 440px); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .ap .d2-bar-bg, .ap .d2-bar-title, .ap .d2-hero .img{ animation:none !important; }
  .ap .d2-bar-bg, .ap .d2-bar-title{ opacity:1; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}