/* Elisys — global glass & interaction layer (v1.9).
   Codifies the WarRoom "Situation Board" recipe design-system-wide: liquid-glass cards
   and the hover/press/focus interaction states (a UX requirement across surfaces).
   Dark by default; light surfaces (admin, portal) and any [data-theme="light"] /
   [data-map-theme="light"] / .el-on-light context flip automatically. */
:root{
  --glass-radius:var(--radius-card, 10px);
  --glass-blur:var(--glass-card-blur, 24px);
  --glass-fill:var(--glass-card-bg);
  --glass-shadow:var(--glass-card-shadow);
  --glass-fill-light:var(--glass-card-bg-light);
  --glass-shadow-light:var(--glass-card-shadow-light);
  --ux-lift:-1px; /* @kind other */
  --ux-press:.985; /* @kind other */
}
.el-glass{background:var(--glass-fill);border:1px solid transparent;border-radius:var(--glass-radius);box-shadow:var(--glass-shadow);backdrop-filter:blur(var(--glass-blur))}
[data-theme="light"] .el-glass,[data-map-theme="light"] .el-glass,.el-on-light .el-glass,[data-surface="admin"] .el-glass,[data-surface="portal"] .el-glass{background:var(--glass-fill-light);box-shadow:var(--glass-shadow-light)}
.el-interactive{transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,filter .14s ease;cursor:pointer}
.el-interactive:hover{transform:translateY(var(--ux-lift));filter:brightness(1.12)}
.el-interactive:active{transform:translateY(0) scale(var(--ux-press));filter:brightness(1.2);transition-duration:.06s}
.el-interactive:focus-visible{outline:2px solid var(--accent-400);outline-offset:2px}
[data-theme="light"] .el-interactive:hover,[data-map-theme="light"] .el-interactive:hover,.el-on-light .el-interactive:hover,[data-surface="admin"] .el-interactive:hover,[data-surface="portal"] .el-interactive:hover{filter:brightness(.97)}
[data-theme="light"] .el-interactive:active,[data-map-theme="light"] .el-interactive:active,.el-on-light .el-interactive:active,[data-surface="admin"] .el-interactive:active,[data-surface="portal"] .el-interactive:active{filter:brightness(.93)}
.el-glass.el-interactive:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35),0 6px 18px rgba(0,0,0,.3);filter:none}
[data-theme="light"] .el-glass.el-interactive:hover,[data-map-theme="light"] .el-glass.el-interactive:hover,.el-on-light .el-glass.el-interactive:hover,[data-surface="admin"] .el-glass.el-interactive:hover,[data-surface="portal"] .el-glass.el-interactive:hover{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35),0 6px 18px rgba(26,35,51,.14)}
/* section headers: Title Case, icon-led (pair with an inline 12px stroke icon) */
.el-title{font-weight:600;text-transform:capitalize;letter-spacing:.02em;display:inline-flex;align-items:center;gap:5px}
/* ── Fixed-height panels · scrolling content (layout principle) ──────────────
   Dashboard & console panels keep a FIXED height so the surface never reflows
   as state changes (view swaps, live data, expand/collapse). Overflow lives
   INSIDE a .el-scroll region with a slim custom scrollbar — never by growing
   the panel. .el-panel is the fixed clip container: a flex column holding a
   fixed header plus one flex:1 .el-scroll body. Copper thumb on hover; the
   scrollbar auto-flips on light surfaces. */
.el-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.el-scroll{overflow:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(var(--accent-rgb),.42) transparent;overscroll-behavior:contain}
.el-scroll::-webkit-scrollbar{width:10px;height:10px}
.el-scroll::-webkit-scrollbar-track{background:linear-gradient(90deg,transparent 3px,rgba(245,241,232,.05) 3px,rgba(245,241,232,.05) 7px,transparent 7px);border-radius:10px;margin:8px 0}
.el-scroll::-webkit-scrollbar-thumb{min-height:32px;border-radius:10px;border:3px solid transparent;background:linear-gradient(180deg,rgba(var(--accent-rgb),.62),rgba(var(--accent-rgb),.3));background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:background .18s,box-shadow .18s}
.el-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(var(--accent-rgb),.92),rgba(var(--accent-rgb),.55));background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.20),0 0 12px rgba(var(--accent-rgb),.35)}
.el-scroll::-webkit-scrollbar-thumb:active{background:linear-gradient(180deg,rgba(var(--accent-rgb),1),rgba(var(--accent-rgb),.7));background-clip:padding-box}
.el-scroll::-webkit-scrollbar-corner{background:transparent}
[data-theme="light"] .el-scroll,[data-map-theme="light"] .el-scroll,.el-on-light .el-scroll,[data-surface="admin"] .el-scroll,[data-surface="portal"] .el-scroll{scrollbar-color:rgba(26,35,51,.3) transparent}
[data-theme="light"] .el-scroll::-webkit-scrollbar-thumb,[data-map-theme="light"] .el-scroll::-webkit-scrollbar-thumb,.el-on-light .el-scroll::-webkit-scrollbar-thumb,[data-surface="admin"] .el-scroll::-webkit-scrollbar-thumb,[data-surface="portal"] .el-scroll::-webkit-scrollbar-thumb{background:rgba(26,35,51,.26);border:2px solid transparent;background-clip:padding-box}
[data-theme="light"] .el-scroll::-webkit-scrollbar-thumb:hover,[data-map-theme="light"] .el-scroll::-webkit-scrollbar-thumb:hover,.el-on-light .el-scroll::-webkit-scrollbar-thumb:hover,[data-surface="admin"] .el-scroll::-webkit-scrollbar-thumb:hover,[data-surface="portal"] .el-scroll::-webkit-scrollbar-thumb:hover{background:rgba(var(--accent-rgb),.6)}
@media (prefers-reduced-motion:reduce){.el-interactive{transition:none}.el-interactive:hover,.el-interactive:active{transform:none}}

[data-theme="light"] .el-scroll::-webkit-scrollbar-track,[data-map-theme="light"] .el-scroll::-webkit-scrollbar-track,.el-on-light .el-scroll::-webkit-scrollbar-track,[data-surface="admin"] .el-scroll::-webkit-scrollbar-track,[data-surface="portal"] .el-scroll::-webkit-scrollbar-track{background:linear-gradient(90deg,transparent 3px,rgba(26,35,51,.07) 3px,rgba(26,35,51,.07) 7px,transparent 7px)}