/* =============================================================================
   admin.css — Amthal Group status console
   Consumes ONLY the tokens + primitives declared by theme.css (CONTRACT §1).
   Locally-scoped variables are prefixed --adm-* so they can never collide with
   the design system. Every dynamic value the JS needs to drive is a custom
   property (the CSP forbids inline style attributes).
   ========================================================================== */

.adm {
  --adm-rail-w: 254px;
  --adm-top-h: 64px;
  --adm-gutter: var(--s-6);
  --adm-tile-min: 274px;
  /* direction multiplier: lets a single transform work in LTR and RTL */
  --adm-flip: 1;
  /* aurora hue, re-pointed by admin.js at the live overall-state colour */
  --adm-aur: var(--sky-400);
  --adm-aur-2: var(--navy-600);

  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
[dir="rtl"] .adm { --adm-flip: -1; }

.adm *,
.adm *::before,
.adm *::after { box-sizing: border-box; }

.adm h1, .adm h2, .adm h3, .adm h4, .adm p, .adm figure { margin: 0; }
.adm a { color: inherit; text-decoration: none; }
.adm button { font: inherit; color: inherit; }
.adm [hidden] { display: none !important; }
/* an open overlay owns the viewport: no background scrolling behind it */
.adm.is-locked { overflow: hidden; }

.adm ::selection { background: color-mix(in oklab, var(--sky-400) 34%, transparent); }

/* thin, themed scrollbars everywhere in the cockpit */
.adm * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.adm *::-webkit-scrollbar { width: 10px; height: 10px; }
.adm *::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  border-radius: var(--r-full);
  background-clip: content-box;
}
.adm *::-webkit-scrollbar-thumb:hover { background: var(--slate-500); background-clip: content-box; }

/* numerics never reflow while live */
.adm .num,
.adm .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 16px; height: 16px; stroke-width: 1.7; }
.mk { width: 100%; height: 100%; fill: currentColor; stroke: none; display: block; }

.adm-link { color: var(--text-2); border-bottom: 1px solid var(--border-strong); transition: color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out); }
.adm-link:hover { color: var(--text); border-color: var(--sky-400); }

.adm-noscript {
  max-width: 30rem; margin: 20vh auto; padding: var(--s-6);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  text-align: center;
}

/* ── status vocabulary → token bundles ───────────────────────────────────────
   One class per state maps the four --st-* properties onto neutral local names,
   so every dot/pill/bar below is written once and re-tinted by the wrapper. */
.s-up,      .s-ok          { --adm-c: var(--st-ok);       --adm-cs: var(--st-ok-soft);       --adm-cb: var(--st-ok-border);       --adm-ct: var(--st-ok-text); }
.s-degraded                { --adm-c: var(--st-degraded); --adm-cs: var(--st-degraded-soft); --adm-cb: var(--st-degraded-border); --adm-ct: var(--st-degraded-text); }
.s-partial                 { --adm-c: var(--st-partial);  --adm-cs: var(--st-partial-soft);  --adm-cb: var(--st-partial-border);  --adm-ct: var(--st-partial-text); }
.s-down,    .s-major       { --adm-c: var(--st-major);    --adm-cs: var(--st-major-soft);    --adm-cb: var(--st-major-border);    --adm-ct: var(--st-major-text); }
.s-maintenance, .s-maint   { --adm-c: var(--st-maint);    --adm-cs: var(--st-maint-soft);    --adm-cb: var(--st-maint-border);    --adm-ct: var(--st-maint-text); }
.s-paused,  .s-unknown     { --adm-c: var(--st-unknown);  --adm-cs: var(--st-unknown-soft);  --adm-cb: var(--st-unknown-border);  --adm-ct: var(--st-unknown-text); }

/* status mark: hue + shape, never hue alone */
.st-dot {
  inline-size: 10px; block-size: 10px; flex: none; border-radius: var(--r-full);
  background: var(--adm-c, var(--st-unknown));
  box-shadow: 0 0 0 3px var(--adm-cs, transparent);
  position: relative;
}
.s-degraded > .st-dot::after,
.st-dot.is-degraded::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: var(--r-full);
  background: var(--bg);
}
.s-down > .st-dot,
.s-major > .st-dot,
.st-dot.is-down { border-radius: 2px; }
.s-paused > .st-dot,
.s-unknown > .st-dot { background: transparent; border: 2px solid var(--adm-c); box-shadow: none; }
.st-dot.is-pulse { animation: adm-ping var(--d-xslow) var(--e-out) 1; }
@keyframes adm-ping {
  0%   { box-shadow: 0 0 0 0 var(--adm-c); }
  70%  { box-shadow: 0 0 0 9px color-mix(in oklab, var(--adm-c) 0%, transparent); }
  100% { box-shadow: 0 0 0 3px var(--adm-cs); }
}

.st-pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding-block: 2px; padding-inline: var(--s-2) var(--s-3);
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 650;
  letter-spacing: .01em; white-space: nowrap;
  color: var(--adm-ct, var(--text-2));
  background: var(--adm-cs, var(--surface));
  border: 1px solid var(--adm-cb, var(--border));
}
.st-pill .st-dot { inline-size: 7px; block-size: 7px; box-shadow: none; }
.st-pill-lg { font-size: var(--fs-sm); padding-block: 5px; padding-inline: var(--s-3) var(--s-4); }

/* ── aurora + grain ──────────────────────────────────────────────────────── */
.adm-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: strict;
}
.adm-aurora-b {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(90px); opacity: .5; will-change: transform;
}
.adm-aurora-b1 {
  inline-size: 46vmax; block-size: 46vmax; inset-block-start: -14vmax; inset-inline-start: -8vmax;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--adm-aur) 42%, transparent), transparent 68%);
  animation: adm-drift-a 46s var(--e-in-out) infinite alternate;
}
.adm-aurora-b2 {
  inline-size: 38vmax; block-size: 38vmax; inset-block-end: -12vmax; inset-inline-end: -6vmax;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--adm-aur-2) 52%, transparent), transparent 70%);
  animation: adm-drift-b 62s var(--e-in-out) infinite alternate;
}
.adm-aurora-b3 {
  inline-size: 30vmax; block-size: 30vmax; inset-block-start: 32%; inset-inline-start: 42%;
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--adm-aur) 22%, transparent), transparent 72%);
  animation: adm-drift-c 54s var(--e-in-out) infinite alternate;
  opacity: .34;
}
@keyframes adm-drift-a { to { transform: translate3d(7%, 9%, 0) scale(1.14); } }
@keyframes adm-drift-b { to { transform: translate3d(-9%, -7%, 0) scale(1.2); } }
@keyframes adm-drift-c { to { transform: translate3d(-12%, 10%, 0) scale(.86); } }
.adm-grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; }

/* ── boot splash ─────────────────────────────────────────────────────────── */
.adm-boot {
  position: relative; z-index: 1;
  min-height: 100dvh; display: grid; place-content: center; justify-items: center;
  gap: var(--s-5); color: var(--text-3);
}
.adm-boot-txt { font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ── the orbital mark ────────────────────────────────────────────────────────
   The lockup is six nested arcs. Rotating each one at its own speed around the
   viewBox centre reads as an orbiting system — the console's signature motion. */
.adm-mark { display: block; color: var(--sky-400); }
.adm-mark-sm { inline-size: 26px; block-size: 26px; }
.adm-mark-md { inline-size: 64px; block-size: 64px; }
.adm-mark-lg { inline-size: 84px; block-size: 84px; }
.mk-p { transform-box: view-box; transform-origin: 185px 185px; }
.mk-orbit .mk-p1 { animation: adm-spin 9s linear infinite; }
.mk-orbit .mk-p2 { animation: adm-spin 14s linear infinite reverse; }
.mk-orbit .mk-p3 { animation: adm-spin 20s linear infinite; }
.mk-orbit .mk-p4 { animation: adm-spin 27s linear infinite reverse; }
.mk-orbit .mk-p5 { animation: adm-spin 36s linear infinite; }
.mk-orbit .mk-p6 { animation: adm-spin 48s linear infinite reverse; }
@keyframes adm-spin { to { transform: rotate(360deg); } }

/* ── login ───────────────────────────────────────────────────────────────── */
.adm-login {
  position: relative; z-index: 1;
  min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6);
}
.adm-login-card {
  inline-size: min(27rem, 100%);
  padding: var(--s-8) var(--s-6) var(--s-6);
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(18px) saturate(140%);
  animation: adm-card-in var(--d-slow) var(--e-spring) both;
}
@keyframes adm-card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.adm-login-head { display: grid; justify-items: center; gap: var(--s-3); margin-block-end: var(--s-6); text-align: center; }
.adm-login-title { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
.adm-login-sub { color: var(--text-3); font-size: var(--fs-sm); }
.adm-form { display: grid; gap: var(--s-4); }
.adm-form.is-shake { animation: adm-shake 420ms var(--e-out) 1; }
@keyframes adm-shake {
  10%, 90% { transform: translateX(calc(var(--adm-flip) * -2px)); }
  20%, 80% { transform: translateX(calc(var(--adm-flip) * 4px)); }
  30%, 50%, 70% { transform: translateX(calc(var(--adm-flip) * -7px)); }
  40%, 60% { transform: translateX(calc(var(--adm-flip) * 7px)); }
}
.adm-field { display: grid; gap: var(--s-2); }
.adm-label {
  font-size: var(--fs-xs); font-weight: 650; color: var(--text-2);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.adm-label .adm-req { color: var(--st-major); margin-inline-start: 2px; }
.adm .input, .adm .select, .adm .textarea { inline-size: 100%; }
.adm-pw { position: relative; display: flex; }
.adm-pw .input { padding-inline-end: 2.6rem; }
.adm-pw-btn {
  position: absolute; inset-inline-end: 4px; inset-block: 4px;
  display: grid; place-items: center; inline-size: 2rem;
  background: none; border: 0; border-radius: var(--r-sm); color: var(--text-3); cursor: pointer;
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.adm-pw-btn:hover { color: var(--text); background: var(--surface-hover); }
.adm-pw-btn[aria-pressed="true"] { color: var(--sky-400); }
.adm-hint { font-size: var(--fs-xs); color: var(--text-3); }
.adm-caps { color: var(--st-degraded-text); font-weight: 600; }
.adm-err {
  font-size: var(--fs-sm); color: var(--st-major-text); font-weight: 600;
  background: var(--st-major-soft); border: 1px solid var(--st-major-border);
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.adm-notice { font-size: var(--fs-sm); border-radius: var(--r-md); padding: var(--s-3); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.adm-notice-warn { color: var(--st-degraded-text); background: var(--st-degraded-soft); border-color: var(--st-degraded-border); }
.adm-notice-info { color: var(--st-maint-text); background: var(--st-maint-soft); border-color: var(--st-maint-border); }
.adm-submit { position: relative; justify-content: center; inline-size: 100%; }
.adm-btn-spin { display: none; inline-size: 14px; block-size: 14px; }
.adm-submit.is-busy .adm-btn-spin { display: inline-block; }
.adm-submit.is-busy { pointer-events: none; opacity: .72; }
.adm-login-foot { margin-block-start: var(--s-6); text-align: center; font-size: var(--fs-sm); }
.adm-meter { block-size: 4px; border-radius: var(--r-full); background: var(--surface-3, var(--surface)); overflow: hidden; }
.adm-meter-fill {
  display: block; block-size: 100%; inline-size: var(--adm-meter, 0%);
  border-radius: var(--r-full); background: var(--adm-meter-c, var(--st-major));
  transition: inline-size var(--d-med) var(--e-out), background var(--d-med) var(--e-out);
}

/* ── shell ───────────────────────────────────────────────────────────────── */
.adm-shell {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--adm-rail-w) minmax(0, 1fr);
  min-height: 100dvh;
}
.adm-skip {
  position: fixed; inset-block-start: var(--s-2); inset-inline-start: var(--s-2);
  z-index: 90; padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-focus, var(--border));
  transform: translateY(-200%);
}
.adm-skip:focus-visible { transform: none; }

.adm-rail {
  position: sticky; inset-block-start: 0; block-size: 100dvh;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  border-inline-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 76%, transparent);
  backdrop-filter: blur(16px);
  z-index: 40;
}
.adm-rail-brand { display: flex; align-items: center; gap: var(--s-3); padding-inline: var(--s-2); }
.adm-rail-brand-txt { display: grid; line-height: 1.15; min-inline-size: 0; }
.adm-rail-brand-txt b { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
.adm-rail-brand-txt i { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.adm-rail-close { display: none; margin-inline-start: auto; background: none; border: 0; color: var(--text-3); cursor: pointer; }

.adm-nav { display: grid; gap: 2px; margin-block-start: var(--s-3); }
.adm-nav-i {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  color: var(--text-2); font-weight: 560; font-size: var(--fs-body);
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
}
.adm-nav-i .ic { color: var(--text-3); transition: color var(--d-fast) var(--e-out), transform var(--d-med) var(--e-spring); }
.adm-nav-i:hover { background: var(--surface-hover); color: var(--text); }
.adm-nav-i:hover .ic { color: var(--sky-400); transform: translateX(calc(var(--adm-flip) * 1px)) scale(1.06); }
.adm-nav-i::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: 22%;
  inline-size: 3px; border-radius: var(--r-full); background: var(--sky-400);
  transform: scaleY(0); transform-origin: center;
  transition: transform var(--d-med) var(--e-spring);
}
.adm-nav-i.is-active {
  color: var(--text);
  background: linear-gradient(to var(--adm-grad-dir, right),
              color-mix(in oklab, var(--sky-400) 14%, transparent), transparent 82%);
}
[dir="rtl"] .adm { --adm-grad-dir: left; }
.adm-nav-i.is-active::before { transform: scaleY(1); }
.adm-nav-i.is-active .ic { color: var(--sky-400); }
.adm-nav-kbd, .adm-kbd {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-micro);
  font-style: normal; color: var(--text-3); opacity: .7;
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}
.adm-nav-badge { margin-inline-start: auto; }
.adm-nav-i .adm-nav-badge + .adm-nav-kbd { margin-inline-start: var(--s-2); }

.adm-rail-foot { margin-block-start: auto; display: grid; gap: var(--s-2); }
.adm-rail-row { display: flex; gap: var(--s-2); }
.adm-rail-btn {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.adm-rail-btn:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.adm-rail-btn:active { transform: scale(.98); }
.adm-rail-btn-sq { flex: 1; justify-content: center; padding-inline: 0; }
.adm-lang-txt { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; }
.ic-moon { display: none; }
:root[data-theme="light"] .ic-sun { display: none; }
:root[data-theme="light"] .ic-moon { display: block; }

.adm-user { position: relative; }
.adm-user-btn {
  inline-size: 100%; display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2); border-radius: var(--r-md); border: 1px solid transparent;
  background: none; cursor: pointer; text-align: start;
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.adm-user-btn:hover { background: var(--surface-hover); border-color: var(--border); }
.adm-user-btn[aria-expanded="true"] .ic-chev { transform: rotate(180deg); }
.ic-chev { margin-inline-start: auto; color: var(--text-3); transition: transform var(--d-med) var(--e-out); }
.adm-avatar {
  inline-size: 32px; block-size: 32px; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm);
  color: var(--navy-950);
  background: linear-gradient(140deg, var(--sky-400), color-mix(in oklab, var(--crimson-500) 55%, var(--sky-400)));
}
.adm-user-meta { display: grid; min-inline-size: 0; line-height: 1.2; }
.adm-user-meta b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user-meta i { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.adm-menu {
  position: absolute; inset-block-end: calc(100% + var(--s-2)); inset-inline: 0;
  padding: var(--s-2); border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: var(--shadow-3); z-index: 50;
  animation: adm-pop var(--d-med) var(--e-spring) both;
}
@keyframes adm-pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.adm-menu-i {
  display: block; inline-size: 100%; text-align: start;
  padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-sm);
  background: none; color: var(--text-2); font-size: var(--fs-sm); cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.adm-menu-i:hover, .adm-menu-i:focus-visible { background: var(--surface-hover); color: var(--text); }
.adm-menu-i-danger:hover { color: var(--st-major-text); background: var(--st-major-soft); }
.adm-menu-div { margin-block: var(--s-1); }

/* ── topbar ──────────────────────────────────────────────────────────────── */
.adm-body { display: flex; flex-direction: column; min-inline-size: 0; }
.adm-top {
  position: sticky; inset-block-start: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-4);
  min-block-size: var(--adm-top-h); padding-inline: var(--adm-gutter);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
}
.adm-top-titles { min-inline-size: 0; }
.adm-top-title { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.adm-top-sub { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-top-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.adm-icon-btn {
  display: grid; place-items: center; inline-size: 36px; block-size: 36px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.adm-icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.adm-icon-btn:active { transform: scale(.94); }
.adm-icon-btn.is-spin .ic { animation: adm-spin 900ms linear infinite; }
.adm-rail-open { display: none; }

.adm-live {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3); border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
.adm-live-txt { font-weight: 650; }
.adm-live-dot { inline-size: 7px; block-size: 7px; border-radius: var(--r-full); background: var(--st-unknown); }
.adm-live[data-sse="live"] { color: var(--st-ok-text); border-color: var(--st-ok-border); background: var(--st-ok-soft); }
.adm-live[data-sse="live"] .adm-live-dot { background: var(--st-ok); animation: adm-breathe 2.4s var(--e-in-out) infinite; }
.adm-live[data-sse="connecting"] { color: var(--st-degraded-text); border-color: var(--st-degraded-border); background: var(--st-degraded-soft); }
.adm-live[data-sse="connecting"] .adm-live-dot { background: var(--st-degraded); animation: adm-breathe 1.1s var(--e-in-out) infinite; }
.adm-live[data-sse="offline"] { color: var(--st-major-text); border-color: var(--st-major-border); background: var(--st-major-soft); }
.adm-live[data-sse="offline"] .adm-live-dot { background: var(--st-major); }
@keyframes adm-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }

.adm-outlet { padding: var(--adm-gutter) var(--adm-gutter) var(--s-16); min-inline-size: 0; }
.adm-outlet:focus-visible { outline: none; }
.adm-page { display: grid; gap: var(--s-6); max-inline-size: 1560px; }
.adm-page > * { min-inline-size: 0; }

/* staggered entrance — index set by JS as --adm-i */
.adm-in { animation: adm-rise var(--d-slow) var(--e-spring) both; animation-delay: calc(var(--adm-i, 0) * 42ms); }
@keyframes adm-rise { from { opacity: 0; transform: translateY(10px); } }

/* ── section chrome ──────────────────────────────────────────────────────── */
.adm-sec { display: grid; gap: var(--s-4); }
.adm-sec-head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.adm-sec-title {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-3);
}
.adm-sec-note { font-size: var(--fs-xs); color: var(--text-3); }
.adm-sec-tools { margin-inline-start: auto; display: flex; gap: var(--s-2); align-items: center; }

.adm-card {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  padding: var(--s-4);
}
.adm-card-p0 { padding: 0; overflow: hidden; }
.adm-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(var(--adm-tile-min), 1fr)); }
.adm-cols { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: start; }
.adm-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.adm-spacer { flex: 1 1 auto; }

/* ── dashboard: hero strip ───────────────────────────────────────────────── */
.adm-hero {
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--s-5);
  border: 1px solid var(--adm-cb, var(--border)); border-radius: var(--r-xl);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--adm-cs, transparent), transparent 62%),
    color-mix(in oklab, var(--surface-2) 72%, transparent);
  box-shadow: var(--shadow-1);
}
.adm-hero-main { display: grid; gap: var(--s-3); }
.adm-hero-verdict { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.adm-hero-h {
  font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight); color: var(--adm-ct, var(--text));
}
.adm-hero-sub { font-size: var(--fs-sm); color: var(--text-3); }
.adm-counts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.adm-count {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--adm-cb, var(--border)); background: var(--adm-cs, var(--surface));
  font-size: var(--fs-xs); color: var(--adm-ct, var(--text-2));
}
.adm-count b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-h3); line-height: 1; }
.adm-hero-arc { inline-size: 132px; block-size: 132px; display: grid; place-items: center; }
.adm-hero-arc-wrap { display: grid; justify-items: center; gap: var(--s-1); }
.adm-hero-arc-cap { font-size: var(--fs-micro); color: var(--text-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* ── monitor tiles ───────────────────────────────────────────────────────── */
.adm-tile {
  position: relative; display: grid; gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  transition: border-color var(--d-med) var(--e-out), transform var(--d-med) var(--e-out), box-shadow var(--d-med) var(--e-out), background var(--d-med) var(--e-out);
  container-type: inline-size;
}
.adm-tile::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 2px;
  border-start-start-radius: var(--r-lg); border-start-end-radius: var(--r-lg);
  background: linear-gradient(to var(--adm-grad-dir, right), var(--adm-c, transparent), transparent);
  opacity: .8;
}
.adm-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.adm-tile.is-off { opacity: .62; }
.adm-tile-head { display: flex; align-items: flex-start; gap: var(--s-3); }
.adm-tile-name { display: grid; gap: 2px; min-inline-size: 0; }
.adm-tile-name b { font-size: var(--fs-body); font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tile-name i { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-tile-tools { margin-inline-start: auto; display: flex; gap: var(--s-1); }
.adm-tile-mid { display: flex; align-items: flex-end; gap: var(--s-3); }
.adm-lat { display: grid; }
.adm-lat b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.55rem; line-height: 1; letter-spacing: -.03em; }
.adm-lat i { font-style: normal; font-size: var(--fs-micro); color: var(--text-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.adm-spark { flex: 1 1 auto; min-inline-size: 0; block-size: 42px; }
/* charts ship their own width/height attributes; the console box decides */
.adm-spark svg, .adm-hero-arc svg { inline-size: 100%; block-size: 100%; display: block; }
.adm-hero-arc svg { block-size: auto; }
.adm-tile-foot {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-block-start: var(--s-3); border-block-start: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-3);
}
.adm-kv { display: inline-flex; align-items: baseline; gap: var(--s-1); }
.adm-kv b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.adm-kv-null b { color: var(--text-3); }

.adm-btn-mini {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 3px var(--s-2); border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: var(--fs-micro); cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.adm-btn-mini:hover { background: var(--surface-hover); color: var(--text); border-color: var(--border-strong); }
.adm-btn-mini:active { transform: scale(.95); }
.adm-btn-mini.is-busy { pointer-events: none; opacity: .6; }
.adm-btn-mini.is-busy .ic { animation: adm-spin 800ms linear infinite; }
.adm-btn-mini .ic { inline-size: 13px; block-size: 13px; }

/* ── transitions feed ────────────────────────────────────────────────────── */
.adm-feed { display: grid; gap: 1px; max-block-size: 30rem; overflow: auto; }
.adm-feed-i {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md);
  transition: background var(--d-fast) var(--e-out);
}
.adm-feed-i:hover { background: var(--surface-hover); }
.adm-feed-i.is-new { animation: adm-slide-in var(--d-slow) var(--e-spring) both; }
@keyframes adm-slide-in { from { opacity: 0; transform: translateY(-8px); } }
.adm-feed-txt { display: grid; gap: 2px; min-inline-size: 0; }
.adm-feed-txt b { font-size: var(--fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-feed-txt span { font-size: var(--fs-xs); color: var(--text-3); }
.adm-feed-time { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; }
.adm-arrow { color: var(--text-3); font-family: var(--font-mono); }

/* ── table ───────────────────────────────────────────────────────────────── */
.adm-tablewrap { overflow: auto; border-radius: var(--r-lg); border: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 84%, transparent); }
.adm-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.adm-table th {
  position: sticky; inset-block-start: 0; z-index: 2;
  text-align: start; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3);
  padding: var(--s-3); background: color-mix(in oklab, var(--surface-2) 96%, transparent);
  border-block-end: 1px solid var(--border); white-space: nowrap;
  backdrop-filter: blur(8px);
}
.adm-table td { padding: var(--s-3); border-block-end: 1px solid var(--border); vertical-align: middle; }
.adm-table tbody tr { transition: background var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out); }
.adm-table tbody tr:hover { background: var(--surface-hover); }
.adm-table tbody tr.is-sel { background: color-mix(in oklab, var(--sky-400) 10%, transparent); }
.adm-table tbody tr:last-child td { border-block-end: 0; }
.adm-table .col-num { text-align: end; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-table .col-act { text-align: end; white-space: nowrap; }
.adm-t-name { display: grid; gap: 2px; min-inline-size: 12rem; }
.adm-t-name b { font-weight: 640; }
.adm-t-name span { font-size: var(--fs-micro); color: var(--text-3); font-family: var(--font-mono); word-break: break-all; }
.adm-t-tags { display: inline-flex; gap: var(--s-1); flex-wrap: wrap; }
.adm-tag {
  font-size: var(--fs-micro); padding: 1px 6px; border-radius: var(--r-full);
  border: 1px solid var(--border); color: var(--text-3); background: var(--surface);
  white-space: nowrap;
}
.adm-tag-on { color: var(--st-ok-text); border-color: var(--st-ok-border); background: var(--st-ok-soft); }
.adm-tag-off { color: var(--st-unknown-text); }

/* drag reorder: the grip is the only handle, the row lifts while dragging */
.adm-grip {
  display: grid; place-items: center; inline-size: 26px; block-size: 26px;
  border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--text-3); cursor: grab; touch-action: none;
}
.adm-grip:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border); }
.adm-grip:active { cursor: grabbing; }
.adm-grip:disabled { opacity: .3; cursor: not-allowed; }
tr.is-dragging {
  position: relative; z-index: 3;
  background: var(--surface-2) !important;
  box-shadow: var(--shadow-3);
  transform: translateY(var(--adm-dy, 0));
}
tr.is-shifted { transform: translateY(var(--adm-shift, 0)); }
.adm-table tbody tr.is-dragging td { border-color: transparent; }

/* ── drawer + dialog ─────────────────────────────────────────────────────── */
.adm-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: var(--overlay); backdrop-filter: blur(3px);
  animation: adm-fade var(--d-med) var(--e-out) both;
}
.adm-scrim.is-out { animation: adm-fade var(--d-fast) var(--e-out) reverse both; }
@keyframes adm-fade { from { opacity: 0; } }

.adm-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 70;
  inline-size: min(var(--adm-drawer-w, 34rem), 100%);
  display: flex; flex-direction: column;
  background: var(--bg-2, var(--surface-2));
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  transform: translateX(calc(var(--adm-flip) * 100%));
  transition: transform var(--d-slow) var(--e-out);
}
.adm-drawer.is-open { transform: none; }
.adm-drawer-wide { --adm-drawer-w: 62rem; }
.adm-drawer-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--border);
}
.adm-drawer-head h2 { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
.adm-drawer-head p { font-size: var(--fs-micro); color: var(--text-3); font-family: var(--font-mono); }
.adm-drawer-body { flex: 1 1 auto; overflow: auto; padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.adm-drawer-foot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 60%, transparent);
}
.adm-dirty { font-size: var(--fs-xs); color: var(--st-degraded-text); display: inline-flex; align-items: center; gap: var(--s-2); }
.adm-dirty::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: var(--r-full); background: var(--st-degraded); }

.adm-dialog-wrap { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--s-4); pointer-events: none; }
.adm-dialog {
  pointer-events: auto; inline-size: min(var(--adm-dialog-w, 30rem), 100%);
  max-block-size: min(86dvh, 52rem); overflow: auto;
  padding: var(--s-6); border-radius: var(--r-xl);
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  animation: adm-dialog-in var(--d-med) var(--e-spring) both;
  display: grid; gap: var(--s-4);
}
@keyframes adm-dialog-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.adm-dialog h2 { font-family: var(--font-display); font-size: var(--fs-h3); }
.adm-dialog-body { display: grid; gap: var(--s-3); }
.adm-dialog-actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; }
.adm-dialog-wide { --adm-dialog-w: 44rem; }

/* ── form furniture ──────────────────────────────────────────────────────── */
.adm-fieldset { display: grid; gap: var(--s-4); }
.adm-fieldset-t {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-3);
  padding-block-end: var(--s-2); border-block-end: 1px solid var(--border);
}
.adm-2col { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.adm-fh { font-size: var(--fs-micro); color: var(--text-3); }
.adm-fe { font-size: var(--fs-xs); color: var(--st-major-text); font-weight: 600; }
.adm-field.is-bad .input, .adm-field.is-bad .textarea, .adm-field.is-bad .select { border-color: var(--st-major); }
.adm .textarea { min-block-size: 6rem; resize: vertical; font-family: inherit; }
.adm .textarea-mono { font-family: var(--font-mono); font-size: var(--fs-sm); min-block-size: 7rem; }

.adm-toggle {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; text-align: start; inline-size: 100%;
  transition: background var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.adm-toggle:hover { background: var(--surface-hover); }
.adm-toggle-track {
  inline-size: 34px; block-size: 20px; flex: none; border-radius: var(--r-full);
  background: var(--surface-3, var(--border-strong)); border: 1px solid var(--border-strong);
  position: relative; transition: background var(--d-med) var(--e-out), border-color var(--d-med) var(--e-out);
}
.adm-toggle-track::after {
  content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px;
  inline-size: 14px; block-size: 14px; border-radius: var(--r-full);
  background: var(--text-2);
  transition: transform var(--d-med) var(--e-spring), background var(--d-med) var(--e-out);
}
.adm-toggle[aria-checked="true"] .adm-toggle-track { background: color-mix(in oklab, var(--st-ok) 55%, transparent); border-color: var(--st-ok); }
.adm-toggle[aria-checked="true"] .adm-toggle-track::after { transform: translateX(calc(var(--adm-flip) * 14px)); background: var(--paper-50); }
.adm-toggle-txt { display: grid; gap: 1px; min-inline-size: 0; }
.adm-toggle-txt b { font-size: var(--fs-sm); font-weight: 600; }
.adm-toggle-txt span { font-size: var(--fs-micro); color: var(--text-3); }

.adm-chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.adm-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3); border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-xs); color: var(--text-2); cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
.adm-chip:hover { border-color: var(--border-strong); color: var(--text); }
.adm-chip:active { transform: scale(.96); }
.adm-chip[aria-pressed="true"] {
  color: var(--st-maint-text); background: var(--st-maint-soft); border-color: var(--st-maint-border);
}
.adm-chip-tick { inline-size: 13px; block-size: 13px; opacity: 0; transition: opacity var(--d-fast) var(--e-out); }
.adm-chip[aria-pressed="true"] .adm-chip-tick { opacity: 1; }

.adm-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.adm-seg-b {
  padding: 4px var(--s-3); border: 0; border-radius: var(--r-sm); background: none;
  color: var(--text-3); font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.adm-seg-b:hover { color: var(--text); }
.adm-seg-b[aria-pressed="true"] { background: var(--surface-hover); color: var(--text); box-shadow: var(--shadow-1); }

.adm-code {
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.55;
  padding: var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-2, var(--surface));
  color: var(--text-2); overflow: auto; max-block-size: 18rem; white-space: pre-wrap;
  word-break: break-word;
}
.adm-probe { display: grid; gap: var(--s-3); }
.adm-table td .adm-probe { padding-block: var(--s-2); }
.adm-probe-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

/* ── incident preview (mirrors the public page's visual language) ─────────── */
.adm-preview {
  border-radius: var(--r-lg); border: 1px dashed var(--border-strong);
  padding: var(--s-4); background: color-mix(in oklab, var(--bg) 55%, transparent);
  display: grid; gap: var(--s-3);
}
.adm-preview-cap {
  font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-3);
}
.pv-card {
  position: relative; display: grid; gap: var(--s-3);
  /* the severity spine lives on the inline-start edge, so the gutter that
     clears it must be logical too or Arabic text would run over it */
  padding: var(--s-4);
  padding-inline-start: calc(var(--s-4) + 6px);
  border-radius: var(--r-lg); border: 1px solid var(--adm-cb, var(--border));
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  overflow: hidden;
}
.pv-card::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px;
  background: linear-gradient(to bottom, var(--adm-c), color-mix(in oklab, var(--adm-c) 25%, transparent));
}
.pv-head { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.pv-title { font-family: var(--font-display); font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
.pv-meta { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pv-services { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.pv-tl { display: grid; gap: var(--s-3); margin-block-start: var(--s-2); }
.pv-tl-i { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3); }
.pv-tl-rail { display: grid; justify-items: center; gap: 3px; }
.pv-tl-dot { inline-size: 9px; block-size: 9px; border-radius: var(--r-full); background: var(--adm-c, var(--st-unknown)); margin-block-start: 5px; }
.pv-tl-line { inline-size: 1px; flex: 1 1 auto; background: var(--border); min-block-size: 12px; block-size: 100%; }
.pv-tl-body { display: grid; gap: var(--s-1); }
.pv-tl-top { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.pv-tl-status { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--adm-ct, var(--text-2)); }
.pv-tl-time { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }
.pv-tl-txt { font-size: var(--fs-sm); color: var(--text-2); white-space: pre-wrap; }
.pv-tl-tools { display: flex; gap: var(--s-1); margin-inline-start: auto; }

/* ── incident list rows ──────────────────────────────────────────────────── */
.adm-inc-list { display: grid; gap: var(--s-3); }
.adm-inc {
  position: relative; display: grid; gap: var(--s-2);
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  padding: var(--s-4);
  padding-inline-start: calc(var(--s-4) + 6px);   /* clears the severity spine, RTL included */
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  cursor: pointer; text-align: start; inline-size: 100%;
  transition: border-color var(--d-med) var(--e-out), transform var(--d-med) var(--e-out), box-shadow var(--d-med) var(--e-out);
}
.adm-inc::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px;
  background: linear-gradient(to bottom, var(--adm-c), color-mix(in oklab, var(--adm-c) 20%, transparent));
}
.adm-inc:hover { transform: translateY(-1px); border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.adm-inc-main { display: grid; gap: var(--s-2); min-inline-size: 0; }
.adm-inc-t { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.adm-inc-t b { font-size: var(--fs-h3); font-weight: 640; letter-spacing: var(--tracking-tight); }
.adm-inc-sub { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.adm-inc-side { display: flex; align-items: center; gap: var(--s-2); }
.adm-flag {
  font-size: var(--fs-micro); padding: 1px 6px; border-radius: var(--r-full);
  border: 1px dashed var(--border-strong); color: var(--text-3);
}
.adm-flag-pin { color: var(--st-degraded-text); border-color: var(--st-degraded-border); border-style: solid; background: var(--st-degraded-soft); }
.adm-flag-draft { color: var(--st-unknown-text); }

/* ── settings ────────────────────────────────────────────────────────────── */
.adm-settings { display: grid; gap: var(--s-5); }
.adm-savebar {
  position: sticky; inset-block-end: var(--s-4); z-index: 20;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--border-strong); background: var(--surface-2);
  box-shadow: var(--shadow-3);
  animation: adm-rise var(--d-med) var(--e-spring) both;
}
.adm-savebar-txt { font-size: var(--fs-sm); color: var(--text-2); }

/* ── audit ───────────────────────────────────────────────────────────────── */
.adm-filters { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; }
.adm-filters .adm-field { min-inline-size: 11rem; }
.adm-audit-act {
  font-family: var(--font-mono); font-size: var(--fs-xs); padding: 1px 6px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); white-space: nowrap;
}
.adm-audit-detail { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); max-inline-size: 32rem; word-break: break-word; }

/* ── command palette ─────────────────────────────────────────────────────── */
.adm-pal-wrap { position: fixed; inset: 0; z-index: 85; display: grid; align-content: start; justify-items: center; padding: 8vh var(--s-4) var(--s-4); pointer-events: none; }
.adm-pal {
  pointer-events: auto; inline-size: min(38rem, 100%);
  border-radius: var(--r-xl); border: 1px solid var(--border-strong);
  background: color-mix(in oklab, var(--surface-2) 96%, transparent);
  box-shadow: var(--shadow-3); backdrop-filter: blur(20px) saturate(140%);
  overflow: hidden; animation: adm-dialog-in var(--d-med) var(--e-spring) both;
}
.adm-pal-top { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--border); }
.adm-pal-input {
  flex: 1 1 auto; background: none; border: 0; outline: none; color: var(--text);
  font-size: var(--fs-h3); font-family: inherit; min-inline-size: 0;
}
.adm-pal-input::placeholder { color: var(--text-3); }
.adm-pal-list { max-block-size: min(52vh, 26rem); overflow: auto; padding: var(--s-2); }
.adm-pal-group { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-3); padding: var(--s-2) var(--s-3) var(--s-1); }
.adm-pal-i {
  display: flex; align-items: center; gap: var(--s-3); inline-size: 100%;
  padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-md);
  background: none; text-align: start; cursor: pointer; color: var(--text-2);
}
.adm-pal-i .ic { color: var(--text-3); }
.adm-pal-i.is-cur { background: color-mix(in oklab, var(--sky-400) 14%, transparent); color: var(--text); }
.adm-pal-i.is-cur .ic { color: var(--sky-400); }
.adm-pal-i b { font-weight: 600; font-size: var(--fs-sm); }
.adm-pal-i em { font-style: normal; margin-inline-start: auto; font-size: var(--fs-micro); color: var(--text-3); font-family: var(--font-mono); }
.adm-pal-hit { color: var(--sky-400); font-weight: 700; }
.adm-pal-foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-4); border-block-start: 1px solid var(--border); font-size: var(--fs-micro); color: var(--text-3); }
.adm-pal-foot span { display: inline-flex; gap: var(--s-1); align-items: center; }
.adm-pal-empty { padding: var(--s-6); text-align: center; color: var(--text-3); font-size: var(--fs-sm); }

/* ── toasts ──────────────────────────────────────────────────────────────── */
.adm-toasts {
  position: fixed; z-index: 95; inset-block-end: var(--s-5); inset-inline-end: var(--s-5);
  display: grid; gap: var(--s-2); justify-items: end; max-inline-size: min(24rem, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.adm-toast {
  pointer-events: auto; position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--s-3); inline-size: 100%;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--adm-cb, var(--border)); background: var(--surface-2);
  box-shadow: var(--shadow-3);
  animation: adm-toast-in var(--d-med) var(--e-spring) both;
}
.adm-toast.is-out { animation: adm-toast-out var(--d-fast) var(--e-out) both; }
@keyframes adm-toast-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes adm-toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
.adm-toast-txt { display: grid; gap: 1px; min-inline-size: 0; }
.adm-toast-txt b { font-size: var(--fs-sm); font-weight: 650; }
.adm-toast-txt span { font-size: var(--fs-xs); color: var(--text-3); }
.adm-toast-x { background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 2px; border-radius: var(--r-sm); }
.adm-toast-x:hover { color: var(--text); background: var(--surface-hover); }
.adm-toast-bar { position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: 2px; background: var(--adm-c, var(--sky-400)); inline-size: 100%; transform-origin: var(--adm-bar-origin, left); animation: adm-toast-bar var(--adm-toast-ms, 5000ms) linear both; }
[dir="rtl"] .adm-toast-bar { --adm-bar-origin: right; }
@keyframes adm-toast-bar { to { transform: scaleX(0); } }

/* ── states: skeleton / empty / error ────────────────────────────────────── */
.adm-sk { border-radius: var(--r-md); background: var(--surface); block-size: 1rem; }
.adm-sk-tile { block-size: 9.5rem; border-radius: var(--r-lg); }
.adm-sk-row { block-size: 3rem; border-radius: var(--r-md); }
.adm-empty {
  display: grid; justify-items: center; gap: var(--s-3); text-align: center;
  padding: var(--s-12) var(--s-4);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  color: var(--text-3);
}
.adm-empty-mark { inline-size: 44px; block-size: 44px; color: var(--text-3); opacity: .55; }
.adm-empty b { font-size: var(--fs-h3); font-family: var(--font-display); color: var(--text-2); font-weight: 600; }
.adm-empty p { font-size: var(--fs-sm); max-inline-size: 34rem; }
.adm-error {
  display: grid; justify-items: center; gap: var(--s-3); text-align: center;
  padding: var(--s-10) var(--s-4); border-radius: var(--r-lg);
  border: 1px solid var(--st-major-border); background: var(--st-major-soft); color: var(--st-major-text);
}
.adm-error b { font-family: var(--font-display); font-size: var(--fs-h3); }
.adm-error p { font-size: var(--fs-sm); color: var(--text-2); max-inline-size: 34rem; }
.adm-error code { font-family: var(--font-mono); font-size: var(--fs-xs); }

/* value that just changed — a one-shot tint so live updates are legible */
.adm-flash { animation: adm-flash var(--d-xslow) var(--e-out) 1; }
@keyframes adm-flash {
  0% { color: var(--sky-400); }
  100% { color: inherit; }
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .adm-cols { grid-template-columns: minmax(0, 1fr); }
  .adm-hero { grid-template-columns: minmax(0, 1fr); }
  .adm-hero-arc-wrap { justify-self: start; }
}
@media (max-width: 900px) {
  .adm { --adm-gutter: var(--s-4); }
  .adm-shell { grid-template-columns: minmax(0, 1fr); }
  .adm-rail {
    position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(19rem, 84vw);
    transform: translateX(calc(var(--adm-flip) * -102%));
    transition: transform var(--d-med) var(--e-out);
    background: var(--surface-2);
  }
  .adm-rail.is-open { transform: none; }
  .adm-rail-close { display: block; }
  .adm-rail-open { display: grid; }
  .adm-drawer { --adm-drawer-w: 100%; }
  .adm-drawer-wide { --adm-drawer-w: 100%; }
  .adm-toasts { inset-inline: var(--s-3); justify-items: stretch; max-inline-size: none; }
}
@media (max-width: 620px) {
  .adm-top-title { font-size: var(--fs-h3); }
  .adm-top-sub { display: none; }
  .adm-hero-arc-wrap { display: none; }
  .adm-nav-kbd, .adm-kbd { display: none; }
  .adm-pal-wrap { padding-block-start: var(--s-4); }
}

/* Decorative, infinite motion only: kill it outright when the visitor asked for
   less motion. theme.css owns the global guard; this protects the pieces that
   would otherwise loop forever. */
@media (prefers-reduced-motion: reduce) {
  .adm-aurora-b, .mk-p, .adm-live-dot, .st-dot.is-pulse, .adm-toast-bar,
  .adm-in, .adm-flash, .adm-feed-i.is-new { animation: none !important; }
  .adm-aurora { opacity: .35; }
}