/* Dxtr on every screen: installed as an app (from the browser, or the Android and iOS apps in app/) and on phones.
   1. Safe areas: an iPhone's notch and home bar, Android's status and gesture bars, a rounded screen corner. The page
      fills the whole screen (viewport-fit=cover, index.html), so the bar, the stage, the badge and the sheet move in by
      the device's insets. Elsewhere the insets are 0 and nothing changes: the 1280×800 tablet layout is as it was.
      The insets go through --sa-* so a test can set them (tests/e2e-install.mjs).
   2. Phones held upright: css/phone.css lays out the bar and every screen; the safe areas stay here. Phones on their side and small laptops: a screen too tall for the window scrolls instead of being cut off.
   3. The "Install Dxtr" row in Settings and the one-time iPhone/iPad hint (js/install.js).
   Plain CSS for Chrome/Edge 109 and Firefox 115: no :has(), no nesting, no colour blends. */
:root{--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px)}

/* ── 1. safe areas ── */
#bar{height:calc(2.75rem + var(--sa-t));padding-top:var(--sa-t);padding-left:calc(1rem + var(--sa-l));padding-right:calc(12.5rem + var(--sa-r))}
#stage{top:calc(2.75rem + var(--sa-t));left:var(--sa-l);right:var(--sa-r);bottom:var(--sa-b)}
body.bar-hidden #stage{top:var(--sa-t)}
#preview{top:calc(.55rem + var(--sa-t));right:calc(1rem + var(--sa-r))}
#rehearsal{bottom:calc(.6rem + var(--sa-b))}
#toast{bottom:calc(2rem + var(--sa-b))}
.menu{top:calc(2.6rem + var(--sa-t))}
#sheet .panel{padding-bottom:calc(1.8rem + var(--sa-b))}

/* ── 2. phones held upright: css/phone.css lays out the bar and every screen (one row; it keeps the notch clear
   with the --sa-* values above) ── */
/* phones on their side, small laptop windows: scroll rather than cut off */
@media (max-height:520px){
  .screen{overflow-y:auto}
}

/* ── 3. installing ── */
#sheet .install-row{display:flex;align-items:center;gap:.8rem;margin:.9rem 0 .2rem;padding:.75rem .9rem;border:1px solid var(--hair);border-radius:.9rem;background:var(--bg)}
#sheet .install-row img{width:2.2rem;height:2.2rem;border-radius:.6rem;flex:none}
#sheet .install-row .t{flex:1;min-width:0;font-size:.84rem;font-weight:600}
#sheet .install-row .t .sm{display:block;margin-top:.1rem}
#installhint{position:fixed;left:50%;bottom:calc(1.1rem + var(--sa-b));transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:.7rem;
  max-width:min(30rem,calc(100vw - 2rem));padding:.6rem .7rem .6rem .8rem;border-radius:.9rem;background:var(--s2);border:1px solid var(--hair);
  box-shadow:0 14px 30px -12px #000;font-size:.8rem;font-weight:600;color:var(--paper);animation:fade var(--t-base) both}
#installhint img{width:1.9rem;height:1.9rem;border-radius:.5rem;flex:none}
#installhint .share{display:inline-block;width:.95rem;height:.95rem;vertical-align:-.15rem;margin:0 .1rem}
#installhint button{flex:none;width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:.5rem;color:var(--mut)}
#installhint button .ic{width:1rem;height:1rem}