/* ═══════════════════════════════════════════════════════════════════════════
   Illustrated Analytics — the close button
   ───────────────────────────────────────────────────────────────────────────
   An inventory on 19 August found ELEVEN distinct close controls using THREE
   different glyphs:

       fa-xmark   card facts dialog
       fa-times   photo viewer, compare dialog, filter drawer, account editor,
                  operations QC, global flash
       ×    confirm modal, registration
       ✕          the compare chip -- a bare character in a <button> with no
                  class and no sizing at all, which is why it rendered as an
                  off-centre rectangle

   One control, three sizes, one glyph (fa-xmark).

       .isl-close            dialogs and panels            38px
       .isl-close.is-sm      chips and inline removals     24px
       .isl-close.is-lg      full-screen viewers           46px

   RAISED, not flat: a light top edge, a shadow beneath, and a press that moves
   it one pixel down while the shadow shrinks -- so the button reads as a
   physical thing rather than a glyph someone drew on the surface.
   ═══════════════════════════════════════════════════════════════════════════ */

.isl-close {
    --isl-close-size: 38px;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--isl-close-size);
    height: var(--isl-close-size);
    padding: 0;
    border: 1px solid rgba(176, 204, 230, .42);
    border-radius: 50%;
    background: linear-gradient(160deg, #46617f 0%, #2b4560 46%, #16283f 100%);
    color: #f2f7fc;
    font-size: calc(var(--isl-close-size) * .42);
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .34),      /* the lit top edge      */
        inset 0 -2px 4px rgba(0, 0, 0, .28),         /* the shaded underside  */
        0 4px 10px rgba(0, 0, 0, .38),               /* the drop              */
        0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .11s ease, box-shadow .11s ease, filter .11s ease;
}

.isl-close.is-sm { --isl-close-size: 24px; border-radius: 50%; }
.isl-close.is-lg { --isl-close-size: 46px; }

.isl-close:hover { filter: brightness(1.14); }

/* Pressed: it sinks. The travel and the shadow shrink together, which is what
   sells the depth -- moving it without shrinking the shadow reads as a glitch. */
.isl-close:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        inset 0 -1px 3px rgba(0, 0, 0, .3),
        0 1px 3px rgba(0, 0, 0, .34);
}

.isl-close:focus-visible {
    outline: 3px solid rgba(113, 180, 241, .95);
    outline-offset: 3px;
}

.isl-close > i { pointer-events: none; }

[data-theme="light"] .isl-close {
    border-color: rgba(120, 150, 182, .5);
    background: linear-gradient(160deg, #ffffff 0%, #e3eaf2 48%, #c6d3e0 100%);
    color: #17324f;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -2px 4px rgba(38, 66, 96, .16),
        0 4px 10px rgba(24, 40, 63, .2),
        0 1px 2px rgba(24, 40, 63, .16);
}
[data-theme="light"] .isl-close:active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        inset 0 -1px 3px rgba(38, 66, 96, .2),
        0 1px 3px rgba(24, 40, 63, .2);
}

@media (prefers-reduced-motion: reduce) {
    .isl-close { transition: none; }
    .isl-close:active { transform: none; }
}