/* ===========================================================================
   PWA / installed-app styles
   ---------------------------------------------------------------------------
   Two equivalent hooks are available:

     @media (display-mode: standalone) { ... }   pure CSS
     html.pwa-installed { ... }                  class set by the inline script
                                                 in index.html (also readable
                                                 from JS, and lets you force it
                                                 on for testing in a tab)

   "standalone" == launched from the installed app window (no browser chrome).
   A normal browser tab is display-mode: browser and matches neither hook, so
   nothing here affects the dev/debug experience in a tab.
   =========================================================================== */

@media (display-mode: standalone) {

    /* No browser chrome means the window edge is the app edge. Kill the
       rubber-band / overscroll bounce so the grids don't detach from the top. */
    html,
    body {
        overscroll-behavior: none;
    }

    /* Nothing outside an input should be selectable-by-accident in an app
       window; grid cells still get their own selection handling. Remove this
       block if you rely on drag-selecting arbitrary page text. */
    body {
        -webkit-user-select: none;
        user-select: none;
    }

    input,
    textarea,
    [contenteditable="true"],
    .selectable {
        -webkit-user-select: text;
        user-select: text;
    }
}


/* ---------------------------------------------------------------------------
   OPTIONAL: window-controls-overlay
   ---------------------------------------------------------------------------
   Reclaims the title bar too (another ~32px of vertical space for grid rows)
   by drawing the app right up into it, leaving only the minimise/maximise/close
   buttons floating on top.

   NOT enabled - "display_override" is deliberately absent from manifest.json.
   Turn it on only together with the CSS below, because once the title bar is
   gone the window has no draggable area unless you declare one, and the user
   cannot move the window at all.

   To enable:
     1. add to manifest.json:  "display_override": ["window-controls-overlay", "standalone"]
     2. uncomment this block
     3. set --wco-drag-target to whatever element sits along the top of the app
        (the header/nav bar), and make sure it has no interactive controls in
        the region env(titlebar-area-*) excludes.

@media (display-mode: window-controls-overlay) {

    :root {
        --wco-top: env(titlebar-area-y, 0px);
        --wco-left: env(titlebar-area-x, 0px);
        --wco-width: env(titlebar-area-width, 100%);
        --wco-height: env(titlebar-area-height, 33px);
    }

    .app-header {
        position: fixed;
        top: 0;
        left: var(--wco-left);
        width: var(--wco-width);
        height: var(--wco-height);

        -webkit-app-region: drag;
        app-region: drag;
    }

    .app-header button,
    .app-header a,
    .app-header input,
    .app-header select {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }
}
--------------------------------------------------------------------------- */