/* ═══════════════════════════════════════════════════════════════════════════
   Illustrated Analytics — the stacking scale and the shared dialog surface
   ───────────────────────────────────────────────────────────────────────────
   WHY THIS FILE EXISTS. Popups were being painted over by the site header, and
   the reason was that nothing decided the order. An audit of every z-index at
   or above 1000 found this:

       400000   .sgc-page-loader, .multiple-player-card
       390000   .sgc-network-status
       260000   .cardphotos, .isl-dd-panel, .isl-filter-pane.open
       250100   .isl-menu-dropdown
       250000   .isl-nav          <-- the SUBGRADED CARDS header
        12050   .ia-card-facts-overlay
         9999   .isl-action-sheet
         9200   .illustrated-modal

   Three whole families of dialog sat BELOW the header. The card facts dialog
   at 12050 was being covered by a header at 250000, which is exactly the
   "cut off at the very top" that kept being reported. It was not a bug in any
   one dialog; it was the absence of an agreed order.

   THE RULE: a modal dialog covers everything except system feedback. Page
   loading and network status still win, because a dialog must never hide the
   fact that the app is busy or offline.

   Use these properties. Do not invent a new number -- if something needs a
   layer that is not here, add it here so the next person can see the whole
   picture in one place.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Page furniture */
    --isl-layer-sticky:    100;      /* sticky table headers, in-page rails    */
    --isl-layer-raised:    1000;     /* cards lifted on hover, row tooltips    */

    /* The site header and anything it owns */
    --isl-layer-nav:       250000;   /* .isl-nav                               */
    --isl-layer-nav-menu:  250100;   /* .isl-menu-dropdown, owned by the nav   */

    /* Full-surface experiences that replace the page */
    --isl-layer-viewer:    260000;   /* .cardphotos, filter panes, dropdowns   */

    /* Modal dialogs. Above the header by design: a modal that the header can
       clip is not a modal. */
    --isl-layer-dialog:    300000;

    /* System feedback. Always on top -- a dialog must never hide these. */
    --isl-layer-toast:     390000;   /* .sgc-network-status                    */
    --isl-layer-blocking:  400000;   /* .sgc-page-loader                       */
}

/* ═══════════════════════════════════════════════════════════════════════════
   The dialog surface
   ───────────────────────────────────────────────────────────────────────────
   Three popup families had grown three different surfaces: the card facts
   dialog, the phone action sheet, and the confirm modal. They are the same
   idea -- a raised panel over a dimmed page -- so the parts that should never
   differ live here, and each keeps only what makes it itself.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --isl-dialog-radius:   22px;
    --isl-dialog-border:   1px solid rgba(143, 174, 204, .52);
    --isl-dialog-surface:  linear-gradient(145deg, rgba(25, 51, 82, .98), rgba(8, 24, 45, .98));
    --isl-dialog-ink:      #f5f8fc;
    --isl-dialog-shadow:   inset 0 1px 0 rgba(255,255,255,.16), 0 30px 72px rgba(0,0,0,.48);
    --isl-dialog-scrim:    rgba(2, 10, 23, .72);
    --isl-dialog-blur:     blur(13px) saturate(.82);
    /* Phones with a home indicator: a dialog anchored to the bottom must not
       put its last control under it. */
    --isl-dialog-safe-b:   env(safe-area-inset-bottom, 0px);
    --isl-dialog-safe-t:   env(safe-area-inset-top, 0px);
}

[data-theme="light"] {
    --isl-dialog-border:  1px solid rgba(120, 150, 182, .42);
    --isl-dialog-surface: linear-gradient(145deg, rgba(250,252,255,.99), rgba(224,233,242,.99));
    --isl-dialog-ink:     #0b2444;
    --isl-dialog-scrim:   rgba(12, 26, 44, .46);
}