/* Desktop/laptop framing: on wide viewports keep the app phone-sized and
   centered instead of stretching every page across the window. Phones and
   the Capacitor WebView are narrower than 600px, so none of this applies
   there. Linked from every page that has a `.device-shell`; the page's own
   <style> (later in <head>) still owns everything else about the shell. */
@media (min-width: 600px) {
  .device-shell {
    max-width: 430px;
    margin-inline: auto;
    /* A non-`none` transform makes the shell the containing block for
       `position: fixed` descendants (modals, sheets, toasts), so they stay
       inside the phone frame instead of spanning the whole window. Only
       applied on wide screens — on phones it would break keyboard-anchored
       floating buttons (CLAUDE.md trap #13). */
    transform: translateZ(0);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 80px rgba(0, 0, 0, 0.55);
  }

  /* Offline / storage / pending-sync banners are injected as body's first
     child (lib/offline.js) — keep them the same width as the frame. */
  #df-banner-stack {
    max-width: 430px;
    margin-inline: auto;
  }
}
