/* ══════════════════════════════════════════════════════════════════════
   00 · FONTS
   ══════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap");

/* ══════════════════════════════════════════════════════════════════════
   01 · TOKENS
   ══════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;

    /* ── Substrate: the space behind the console ─────────────────────── */
    --space-void: #04070c;
    --space-deep: #070c14;
    --nebula-teal: rgba(20, 72, 86, 0.42);
    --nebula-indigo: rgba(38, 44, 102, 0.34);
    --nebula-violet: rgba(58, 34, 86, 0.22);
    --star-dim: rgba(178, 204, 230, 0.3);
    --star-mid: rgba(198, 222, 245, 0.44);
    --star-bright: rgba(216, 238, 255, 0.66);

    /* ── Surfaces ────────────────────────────────────────────────────── */
    --surface-inset: #080e16; /* wells: inputs, progress track, secrets   */
    --surface-0: #0a1119; /* sidebar rail, page gutters               */
    --surface-1: #0d1420; /* recessed: filter bars, tab pills         */
    --surface-2: #111a27; /* panel base                               */
    --surface-3: #16202f; /* elevated: dialogs, popovers, hover       */
    --scrim: rgba(3, 6, 11, 0.74);

    /* ── Borders ─────────────────────────────────────────────────────── */
    --line-hair: #1c2836; /* table row rules, quiet dividers          */
    --line-strong: #33475f; /* section rules, focused field borders     */
    --line-inset: rgba(255, 255, 255, 0.045); /* 1px top bevel        */

    /* ── Text ────────────────────────────────────────────────────────── */
    --text-hi: #f2f8fa; /* h1, metric numerals                      */
    --text-2: #b9c8d6; /* table body copy                          */
    /* Quietest text. Measured at 4.75:1 on --surface-2 and 5.15:1 on the
       sidebar: it lands on 9px nav group heads and 11px table headers, which
       are below the large-text threshold and so need the full 4.5:1. */
    --dim: #75879c;
    --on-accent: #04120f; /* ink on a mint fill                       */

    /* ── Status · GO (mint, primary) ─────────────────────────────────── */
    --go: #2bd0a4;
    --go-ink: #8ff0d6;
    --go-line: #1f6a5b;
    --go-fill: rgba(43, 208, 164, 0.12);
    --go-glow: rgba(43, 208, 164, 0.55);

    /* ── Status · CAUTION (amber) ────────────────────────────────────── */
    --caution: #f2b94b;
    --caution-ink: #ffd98a;
    --caution-line: #7a6330;
    --caution-fill: rgba(242, 185, 75, 0.12);
    --caution-glow: rgba(242, 185, 75, 0.5);

    /* ── Status · TELEMETRY (cyan, informational — never "good") ─────── */
    --info: #7fd7ff;
    --info-ink: #bfe9ff;
    --info-line: #2f5f7e;
    --info-fill: rgba(127, 215, 255, 0.12);
    --info-glow: rgba(127, 215, 255, 0.45);

    /* ── Status · OFF-NOMINAL (red) ──────────────────────────────────── */
    --off: #ff6d72;
    --off-ink: #ffb0b3;
    --off-line: #7a3a44;
    --off-fill: rgba(255, 109, 114, 0.12);
    --off-glow: rgba(255, 109, 114, 0.5);

    /* ── Focus: deliberately cyan, so a focus ring is never mistaken
          for a GO status lamp ─────────────────────────────────────────── */
    --focus: #7fd7ff;
    --focus-offset: 2px;

    /* ── Geometry ────────────────────────────────────────────────────── */
    --r-xs: 4px;
    --r-sm: 7px;
    --r-md: 9px;
    --r-lg: 13px;
    --r-pill: 999px;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 22px;
    --s-6: 32px;
    --s-7: 44px;

    /* ── Elevation ───────────────────────────────────────────────────── */
    --shadow-panel: inset 0 1px 0 var(--line-inset), 0 18px 40px rgba(0, 0, 0, 0.34);
    --shadow-pop: 0 22px 64px rgba(0, 0, 0, 0.58);

    /* ── Type ────────────────────────────────────────────────────────── */
    --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --track-label: 0.14em;

    /* ── Motion ──────────────────────────────────────────────────────── */
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --sweep: 9s; /* radar period: slow enough for an eight-hour shift */

    /* ── LEGACY ALIASES — do not remove ───────────────────────────────
          Roughly 200 declarations across this file, operations.css and
          links.css reference these six names. Custom properties inherit at
          runtime, so retinting here re-themes all three sheets at once with
          no import and no edits to the other two. ───────────────────────── */
    --ink: var(--space-deep);
    --line: #26364a;
    --text: #e8f1f5;
    --muted: #8698ab;
    --green: var(--go);
    --red: var(--off);

    /* ── MOCKUP-IMPORT ALIASES — do not remove ────────────────────────
          updates.css, links.css and operations.css were ported from the
          standalone HTML mockups, which used a different token vocabulary.
          Nine of those names were never defined here. Where the porter wrote
          a fallback (var(--brand, #38bdf8), var(--accent, #3b82f6)) the
          fallback won and injected an off-palette blue; where they didn't
          (var(--cyan), var(--text-muted), var(--line-subtle)) the whole
          declaration went invalid-at-computed-value-time and resolved to
          inherit/unset. Mapping them onto the real ramps fixes both. ────── */
    --cyan: var(--info);
    --text-muted: var(--muted);
    --text-dim: var(--muted);
    --line-subtle: var(--line-hair);
    --radius-sm: var(--r-sm);
    --radius-md: var(--r-md);
    --brand: var(--info);
    --border: var(--line);
    --accent: var(--go);
    --hi: var(--text-hi);
}

/* ══════════════════════════════════════════════════════════════════════
   02 · BASE
   ══════════════════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
}

/* The base colour lives on html, not body. A background on body propagates to
   the canvas and would paint over the z-index:-1 atmosphere pseudo-elements. */
html {
    background: var(--space-void);
}

/* Set while the mobile nav drawer is open. On <html>, not <body>: body is
   `display: flex; min-height: 100vh` and overflow:hidden on it does not
   reliably stop the document scroller on iOS Safari. */
html.mc-nav-open {
    overflow: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    background: transparent;
    color: var(--text);
    font-family: var(--font-ui);
    /* Console numerals: aligns every version string, count and duration. */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

form {
    margin: 0;
}

/* There was no visible focus style on any link or button, and two rules set
   outline:0 outright. Cyan rather than mint, so a focus ring is never mistaken
   for a GO status lamp. */
:is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: var(--focus-offset);
    border-radius: var(--r-xs);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   03 · ATMOSPHERE
   ══════════════════════════════════════════════════════════════════════ */

/* body is display:flex, so an unpositioned pseudo-element becomes a flex item
   and shoves the sidebar sideways. Both layers are position:fixed, which takes
   them out of flow entirely. Fixed also anchors them to the viewport rather
   than to body's box -- on a long list page that box is several thousand
   pixels tall, and a gradient stretched over it degrades into flat murk. */

/* Layer 1 -- the nebula wash. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(122% 92% at 80% -20%, var(--nebula-teal) 0, transparent 58%),
        radial-gradient(92% 74% at 6% 2%, var(--nebula-indigo) 0, transparent 62%),
        radial-gradient(72% 62% at 58% 118%, var(--nebula-violet) 0, transparent 60%),
        var(--space-deep);
}

/* Layer 2 -- the starfield, in three parallax depths expressed as three
   background-size groups. Masked so the stars fade out behind the content
   column: nothing should compete with a numeral being read for eight hours.
   Static, so it composites once and costs nothing on scroll. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    background-repeat: repeat;
    background-image:
        radial-gradient(1px 1px at 23% 17%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 71% 44%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 12% 81%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 92%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1px 1px at 49% 63%, var(--star-dim) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 34% 9%, var(--star-mid) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 8% 52%, var(--star-mid) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 77% 28%, var(--star-mid) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 61% 87%, var(--star-mid) 50%, transparent 51%),
        radial-gradient(2px 2px at 18% 36%, var(--star-bright) 50%, transparent 51%),
        radial-gradient(2px 2px at 82% 12%, var(--star-bright) 50%, transparent 51%),
        radial-gradient(2px 2px at 55% 74%, var(--star-bright) 50%, transparent 51%);
    background-size:
        300px 300px,
        300px 300px,
        300px 300px,
        300px 300px,
        300px 300px,
        560px 560px,
        560px 560px,
        560px 560px,
        560px 560px,
        940px 940px,
        940px 940px,
        940px 940px;
    -webkit-mask-image: radial-gradient(
        150% 108% at 50% -8%,
        #000 0,
        rgba(0, 0, 0, 0.3) 52%,
        transparent 90%
    );
    mask-image: radial-gradient(
        150% 108% at 50% -8%,
        #000 0,
        rgba(0, 0, 0, 0.3) 52%,
        transparent 90%
    );
}

/* ── Hero panels: orbital rings ───────────────────────────────────────
   Addressed by the seven panels that already override .panel's background,
   so this needs no Blade edits. Higher specificity than .panel::before, so
   heroes get rings and working panels keep their corner bezel. */
.hero-panel,
:is(
    .command,
    .about-intro,
    .admin-intro,
    .operations-intro,
    .wpvivid-intro,
    .profile-intro,
    .link-signal
) {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        112deg,
        rgba(20, 64, 72, 0.55) 0,
        rgba(13, 22, 36, 0.94) 56%,
        rgba(34, 26, 62, 0.55) 100%
    );
}

/* Ring 1: solid hairline, off the right edge. */
.hero-panel::before,
:is(
    .command,
    .about-intro,
    .admin-intro,
    .operations-intro,
    .wpvivid-intro,
    .profile-intro,
    .link-signal
)::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -140px;
    width: 480px;
    aspect-ratio: 1;
    transform: translateY(-50%);
    border: 1px solid rgba(127, 215, 255, 0.1);
    border-radius: 50%;
    box-shadow:
        inset 0 0 100px rgba(43, 208, 164, 0.055),
        0 0 0 1px rgba(43, 208, 164, 0.04);
    pointer-events: none;
}

/* Ring 2: dashed and tilted, reading as an orbital plane. */
.hero-panel::after,
:is(
    .command,
    .about-intro,
    .admin-intro,
    .operations-intro,
    .wpvivid-intro,
    .profile-intro,
    .link-signal
)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -46px;
    width: 300px;
    aspect-ratio: 1;
    transform: translateY(-50%) rotate(-14deg) scaleY(0.42);
    border: 1px dashed rgba(127, 215, 255, 0.14);
    border-radius: 50%;
    pointer-events: none;
}

/* ── Icons (resources/views/components/icon.blade.php) ────────────────
   The component carries no width/height attributes; size comes from here, or
   from a per-call --icon-size. Colour is inherited via currentColor, so the
   nav active state, badge tints and panel-head green all just work. */
.icon {
    --icon-size: 1em;
    display: inline-block;
    /* Load-bearing: .nav-group a and .brand are flex containers, and without
       this a long label squashes the icon. */
    flex: 0 0 auto;
    width: var(--icon-size);
    height: var(--icon-size);
    vertical-align: -0.135em;
    overflow: visible;
}

.nav-group a .icon,
.admin-nav a .icon {
    --icon-size: 16px;
    color: var(--dim);
    transition: color var(--dur-fast) var(--ease);
}

.nav-group a:hover .icon,
.nav-group a.active .icon,
.admin-nav a:hover .icon,
.admin-nav a.active .icon {
    color: var(--go);
}

.brand .orb {
    --icon-size: 30px;
    color: var(--go);
    filter: drop-shadow(0 0 10px var(--go-glow));
}

.panel-head a .icon,
.plain .icon,
.operation-signal .icon {
    --icon-size: 13px;
}

.badge .icon,
.chip .icon {
    --icon-size: 11px;
}

.admin-shortcuts i .icon {
    --icon-size: 16px;
}

.admin-icon .icon,
.about-capability-mark .icon {
    --icon-size: 17px;
}

/* The links disclosure chevron rotates with its <details>, same as the
   sidebar's. Sized here because links.css set a font-size for the old glyph. */
.chevron .icon {
    --icon-size: 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   04 · TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════════ */

.eyebrow {
    font: 10px var(--font-mono);
    letter-spacing: var(--track-label);
    color: var(--go);
    margin: 0 0 8px;
}

/* The console tick is a pseudo-element on purpose: three eyebrow strings
   (LOGIN EMAIL, UPTIME, HEALTH MONITORS) are asserted verbatim by the test
   suite, so the copy itself must not be touched. */
.eyebrow::before {
    content: "\25B8 ";
    opacity: 0.5;
}

h1 {
    color: var(--text-hi);
    font-size: 34px;
    margin: 0;
    letter-spacing: -1.4px;
}

h2 {
    font-size: 17px;
    margin: 0;
}

.good {
    color: var(--green) !important;
}

.alert {
    color: var(--red) !important;
}

.plain {
    color: inherit;
    text-decoration: none;
}

.plain:hover {
    color: var(--green);
}

.subtle {
    font-size: 12px;
    color: var(--muted);
    margin: 6px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════
   05 · SHELL & SIDEBAR REDESIGN
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --sidebar-w: 270px;
}

aside {
    width: var(--sidebar-w);
    border-right: 1px solid var(--line-hair);
    padding: 0;
    background: rgba(8, 14, 24, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 40;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.brand-orb-container {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    background: radial-gradient(circle at 35% 30%, rgba(43, 208, 164, 0.25), rgba(8, 14, 24, 0.9));
    border: 1px solid rgba(43, 208, 164, 0.35);
    display: grid;
    place-items: center;
    box-shadow: 0 0 16px var(--go-glow);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover .brand-orb-container {
    border-color: var(--go);
    box-shadow: 0 0 22px var(--go-glow);
    transform: scale(1.04);
}

.brand .brand-orb-icon {
    --icon-size: 22px;
    color: var(--go);
    filter: drop-shadow(0 0 4px var(--go-glow));
    transition: transform 0.6s ease;
}

.brand:hover .brand-orb-icon {
    transform: rotate(25deg);
}

.brand-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.brand-text span:first-child {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--text-hi);
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.brand-subtext {
    font-size: 9.5px;
    font-family: var(--font-mono);
    letter-spacing: 0.12em;
    color: var(--go-ink);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    white-space: nowrap;
}

.pulse-beacon {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--go);
    box-shadow: 0 0 8px var(--go);
    animation: beacon-pulse 2s infinite ease-in-out;
}

@keyframes beacon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

main {
    width: min(1380px, calc(100% - var(--sidebar-w)));
    flex: 1;
    min-width: 0;
    padding: 44px 54px;
}

/* The width transition exists only to ease the rail toggle, which is
   desktop-only. Ungated it also fired on every resize, device rotation and
   iOS URL-bar collapse -- 280ms of animated width that reads as jank. */
@media (min-width: 901px) {
    main {
        transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
    padding-bottom: var(--s-5);
    border-bottom: 1px solid var(--line-hair);
}

header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 40px;
    height: 1px;
    background: var(--go);
    box-shadow: 0 0 8px var(--go-glow);
}

.system {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Header left cell: hamburger + eyebrow/title. min-width:0 so a long
   heading shrinks rather than pushing the .system cluster off-screen. */
.header-lede {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: 0;
}

/* Both revealed at <=900px, where the sidebar becomes a drawer. Qualified
   with .btn because the base .btn rule sets `display: inline-flex` and sits
   later in the file -- at equal specificity it would otherwise win and leave
   the hamburger visible on desktop. */
.btn.nav-trigger {
    display: none;
}

/* Occupies the same top-right slot as .sidebar-collapse-btn, which is
   hidden at the width where this one appears. Absolute so it does not take a
   row of its own in the header's flex column. */
.sidebar-close-btn {
    display: none;
    place-items: center;
    position: absolute;
    top: 16px;
    right: 12px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
}

.sidebar-close-btn:hover {
    color: var(--text-hi);
    border-color: var(--line-strong);
}

/* Was `.system button { ... }`, a pill-shaped one-off whose (0,1,1)
   specificity quietly beat .btn and gave the two header buttons a different
   radius and padding from every other button on the page. Only the spacing
   is a real layout concern, so only the spacing survives. */
.system .btn {
    margin-left: 15px;
}

.profile-link {
    color: var(--text);
    text-decoration: none;
}

.profile-link:hover {
    color: var(--green);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.sidebar-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--line-hair);
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.sidebar-collapse-btn {
    position: absolute;
    top: 20px;
    right: 14px;
    width: 26px;
    height: 26px;
    background: var(--surface-1);
    border: 1px solid var(--line-hair);
    border-radius: 6px;
    color: var(--dim);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.sidebar-collapse-btn:hover {
    color: var(--text-hi);
    background: var(--surface-2);
    border-color: var(--line-strong);
}

.sidebar-collapse-btn .collapse-icon {
    --icon-size: 14px;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-search-box {
    position: relative;
    margin-top: 2px;
}

.quick-search-input {
    width: 100%;
    background: var(--surface-0);
    border: 1px solid var(--line-hair);
    border-radius: 7px;
    padding: 7px 30px 7px 32px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-hi);
    outline: none;
    transition: all var(--dur-fast) var(--ease);
}

.quick-search-input:focus {
    border-color: var(--go);
    box-shadow: 0 0 0 2px var(--go-fill);
    background: var(--surface-1);
}

.quick-search-input::placeholder {
    color: var(--dim);
}

.search-icon-left {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--dim);
    pointer-events: none;
}

.search-shortcut-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 9.5px;
    background: var(--surface-2);
    border: 1px solid var(--line-hair);
    border-radius: 4px;
    padding: 2px 5px;
    color: var(--dim);
    pointer-events: none;
}

.sidebar-nav-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-nav-scroll::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background: var(--surface-2);
    border-radius: 4px;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--line-strong);
}

.primary-nav {
    display: grid;
    gap: 16px;
    margin-top: 0;
}

.nav-group {
    display: grid;
    gap: 3px;
}

.nav-group-title {
    margin: 0 12px 5px;
    color: var(--dim);
    font: 9.5px var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

.nav-group-title .group-index {
    opacity: 0.6;
    margin-right: 4px;
}

.nav-group a,
.admin-nav-head > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}

.nav-group a:hover,
.admin-nav-head > a:hover {
    background: var(--surface-1);
    color: var(--text-hi);
    transform: translateX(2px);
}

.nav-group a.active,
.admin-nav-head > a.active {
    background: linear-gradient(90deg, var(--go-fill), transparent 90%);
    color: var(--text-hi);
    font-weight: 600;
}

.nav-group a.active::before,
.admin-nav-head > a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--go);
    box-shadow: 0 0 10px var(--go-glow);
}

.nav-group a:hover .icon,
.admin-nav a:hover .icon {
    color: var(--text-hi);
    transform: scale(1.08);
}

.nav-group a.active .icon,
.admin-nav a.active .icon {
    color: var(--go);
    filter: drop-shadow(0 0 6px var(--go-glow));
}

.nav-item-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font: inherit !important;
}

.nav-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--dim);
    border: 1px solid var(--line-hair);
    line-height: 1.2;
    transition: all var(--dur-fast) var(--ease);
}

.nav-badge.caution {
    background: var(--caution-fill);
    color: var(--caution-ink);
    border-color: rgba(242, 185, 75, 0.3);
}

.admin-nav {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line-hair);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--r-sm);
    background: rgba(18, 30, 49, 0.35);
    border: 1px solid var(--line-hair);
    transition: all var(--dur-fast) var(--ease);
}

.admin-nav-head:hover {
    background: rgba(18, 30, 49, 0.7);
    border-color: var(--line-strong);
}

.admin-nav-head > a {
    flex: 1;
    color: var(--text-hi);
}

.admin-disclosure {
    width: 34px;
    height: 34px;
}

.admin-disclosure summary {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--dim);
    cursor: pointer;
    list-style: none;
    transition: all var(--dur-fast) var(--ease);
}

.admin-disclosure summary::-webkit-details-marker {
    display: none;
}

.admin-disclosure summary:hover,
.admin-disclosure summary:focus-visible {
    background: var(--surface-3);
    color: var(--text-hi);
}

.admin-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
}

.admin-disclosure[open] .admin-chevron {
    transform: rotate(180deg);
}

.admin-links {
    display: none;
    gap: 2px;
    margin: 4px 0 0 14px;
    padding-left: 10px;
    border-left: 1px solid var(--line-strong);
}

.admin-nav:has(.admin-disclosure[open]) .admin-links {
    display: grid;
}

.admin-links a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}

.admin-links a:hover {
    background: var(--surface-1);
    color: var(--text-hi);
    transform: translateX(2px);
}

.admin-links a.active {
    background: var(--go-fill);
    color: var(--text-hi);
    font-weight: 600;
}

.admin-links a.active .icon {
    color: var(--go);
}

.sidebar-version {
    margin: 12px 12px 0;
    color: var(--dim);
    font: 9.5px var(--font-mono);
    letter-spacing: 0.05em;
}

.sidebar-footer-deck {
    padding: 12px 14px;
    border-top: 1px solid var(--line-hair);
    background: rgba(6, 10, 16, 0.85);
}

.operator-deck {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 4px;
    border-radius: 8px;
    transition: background var(--dur-fast) var(--ease);
}

.operator-deck:hover {
    background: var(--surface-1);
}

.operator-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #193830, #0a1f1b);
    border: 1px solid var(--go-line);
    color: var(--go-ink);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    box-shadow: 0 0 10px rgba(43, 208, 164, 0.2);
    position: relative;
}

.operator-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--go);
    border: 2px solid var(--surface-0);
    box-shadow: 0 0 6px var(--go);
}

.operator-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.operator-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-hi);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operator-role {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* The 72px rail is a desktop affordance only. Gated to >=901px because
   `.sidebar.collapsed ~ main` below is specificity (0,2,1) and outranks the
   `main { width: 100% }` in the 900px block -- so a phone belonging to an
   operator who had collapsed the rail on desktop rendered `main` 72px
   narrower than the viewport, with 72px of dead gutter beside a sidebar
   that was `display: none`. Gating here also means the mobile off-canvas
   block needs no `.collapsed` overrides of its own. */
@media (min-width: 901px) {
/* ── Collapsed Rail Mode (72px) ────────────────────────────────────── */
.sidebar.collapsed {
    width: 72px;
}

.sidebar.collapsed ~ main {
    width: min(1380px, calc(100% - 72px));
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-group-title,
.sidebar.collapsed .nav-item-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .quick-search-box,
.sidebar.collapsed .admin-disclosure,
.sidebar.collapsed .admin-head-link span,
.sidebar.collapsed .admin-links a span,
.sidebar.collapsed .operator-info,
.sidebar.collapsed .sidebar-version {
    display: none !important;
}

.sidebar.collapsed .sidebar-header {
    padding: 16px 8px 12px;
    align-items: center;
}

.sidebar.collapsed .brand {
    justify-content: center;
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-collapse-btn {
    position: static;
    margin: 12px auto 0;
    width: 32px;
    height: 32px;
}

.sidebar.collapsed .sidebar-collapse-btn .collapse-icon {
    transform: rotate(180deg);
}

.sidebar.collapsed .sidebar-nav-scroll {
    padding: 12px 6px;
    align-items: center;
}

.sidebar.collapsed .primary-nav,
.sidebar.collapsed .nav-group {
    width: 100%;
    align-items: center;
}

.sidebar.collapsed .nav-group a,
.sidebar.collapsed .admin-nav-head,
.sidebar.collapsed .admin-links a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 2px auto;
    justify-content: center;
    border-radius: 9px;
}

.sidebar.collapsed .nav-group a.active::before,
.sidebar.collapsed .admin-nav-head > a.active::before {
    display: none;
}

.sidebar.collapsed .nav-group a.active,
.sidebar.collapsed .admin-links a.active {
    background: var(--go-fill);
    border: 1px solid rgba(43, 208, 164, 0.4);
    box-shadow: 0 0 14px var(--go-glow);
}

.sidebar.collapsed .admin-nav {
    width: 100%;
    align-items: center;
    padding-top: 10px;
}

.sidebar.collapsed .admin-head-link {
    width: 100%;
    height: 100%;
    padding: 0;
    justify-content: center;
}

.sidebar.collapsed .admin-links {
    margin: 6px auto 0;
    padding: 0;
    border-left: none;
    width: 100%;
    align-items: center;
}

.sidebar.collapsed .operator-deck {
    justify-content: center;
    padding: 4px 0;
}

.sidebar.collapsed .sidebar-footer-deck {
    padding: 12px 6px;
    align-items: center;
}
}
/* ── end rail mode ─────────────────────────────────────────────────── */

.tooltip-popover {
    position: fixed;
    background: var(--surface-3);
    border: 1px solid var(--line-strong);
    color: var(--text-hi);
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 1000;
    white-space: nowrap;
}

.tooltip-popover.visible {
    opacity: 1;
    transform: translateX(12px);
}

/* Rail-mode labels are hover-only, so on a touch device the tooltip can
   only ever appear as a stuck artefact after a tap. The JS gates its
   listeners on the same query. */
@media (hover: none) {
    .tooltip-popover {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   06 · SURFACES
   ══════════════════════════════════════════════════════════════════════ */

.wpvivid-page {
    display: grid;
    gap: 20px;
}

.wpvivid-page .panel {
    margin: 0;
}

.queue-panel {
    border-color: var(--line-strong);
}

.queue-panel .panel-head {
    align-items: flex-start;
    margin-bottom: 16px;
}

.queue-panel .panel-head .eyebrow {
    margin-bottom: 6px;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-4);
}

.metrics strong {
    color: var(--text-hi);
}

.metrics article {
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.metrics article:hover {
    border-color: var(--line-strong);
}

.metrics article:has(a:hover) {
    border-color: var(--go-line);
}

.metrics article,
.panel {
    position: relative;
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 38%),
        linear-gradient(135deg, var(--surface-2), var(--surface-1) 74%);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
}

/* A machined-bezel corner tick. Reads as equipment up close and disappears at
   reading distance. Note .panel deliberately keeps overflow visible --
   .column-picker-menu escapes its panel, which is why .managed-sites sets it. */
.panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 22px;
    height: 22px;
    border-top: 1px solid var(--go-line);
    border-left: 1px solid var(--go-line);
    border-radius: var(--r-lg) 0 0 0;
    opacity: 0.55;
    pointer-events: none;
}

.metrics article {
    position: relative;
    padding: 22px;
    min-height: 150px;
}

.metrics span,
.metrics em {
    display: block;
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
}

.metrics strong {
    font-size: 45px;
    line-height: 1.35;
    letter-spacing: -2px;
}

/* Update telemetry is a control board: category lamps are intentionally quiet
   until one needs action, while the count is the dominant readout. */
.update-overview {
    padding: 0;
    overflow: hidden;
}

.update-overview-head {
    align-items: center;
    margin: 0;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-hair);
}

.update-overview-head h2 { margin: 0; }

.update-overview-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(170px, 1fr));
    overflow-x: auto;
}

.update-overview-card {
    display: flex;
    min-height: 164px;
    flex-direction: column;
    padding: 18px;
    border-right: 1px solid var(--line-hair);
    background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 60%);
}

.update-overview-card:last-child { border-right: 0; }
.update-overview-card-head { display: flex; align-items: center; gap: 10px; color: var(--info-ink); }
.update-overview-card--plugin .update-overview-card-head { color: var(--go-ink); }
.update-overview-card--abandoned .update-overview-card-head { color: var(--caution-ink); }
.update-overview-card-head .icon { width: 19px; height: 19px; }
.update-overview-count { color: var(--text-hi); font: 700 29px/1 var(--font-mono); letter-spacing: -.08em; }
.update-overview-card > p { min-height: 36px; margin: 13px 0; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.update-overview-actions { display: flex; gap: 7px; margin-top: auto; flex-wrap: wrap; }

.grid,
.two-col {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.grid {
    grid-template-columns: 1fr 1.45fr;
}

.two-col {
    grid-template-columns: 1.1fr 0.9fr;
}

.panel {
    padding: 23px;
}

/* Most of the inline style="margin-*" attributes across the views existed only
   because stacked panels and sections had no gap of their own. Adjacent-sibling
   margins collapse, so this coexists with any that remain rather than doubling
   them, and it survives a <nav> or a flash notice sitting between two panels. */
main > * + section,
main > * + .panel,
.panel + .panel {
    margin-top: var(--s-4);
}

.command {
    min-height: 260px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, #1b2535, #171827 60%, #292044);
}

.command > div:first-child {
    flex: 1 1 auto;
}

.command h2 {
    font-size: 24px;
    max-width: 320px;
    letter-spacing: -1px;
}

.command p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.6;
    font-size: 13px;
    max-width: 340px;
}

.radar {
    flex: 0 0 240px;
    align-self: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    width: 240px;
    height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(
        circle,
        rgba(43, 208, 164, 0.13) 0%,
        rgba(11, 22, 35, 0.95) 58%,
        rgba(7, 12, 20, 0.98) 72%
    );
    box-shadow: 
        0 0 35px rgba(43, 208, 164, 0.08),
        inset 0 0 25px rgba(0, 0, 0, 0.8);
}

/* The real children sit above both pseudo-elements. */
.radar > b,
.radar > span {
    position: relative;
    z-index: 2;
}

/* Graticule: eight range spokes and two range rings. Static. */
.radar::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 1;
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 44.5deg,
            rgba(127, 215, 255, 0.075) 44.5deg 45deg
        ),
        radial-gradient(
            circle,
            transparent 0 28%,
            rgba(127, 215, 255, 0.085) 28% 29%,
            transparent 29% 58%,
            rgba(127, 215, 255, 0.085) 58% 59%,
            transparent 59% 88%,
            rgba(127, 215, 255, 0.085) 88% 89%,
            transparent 89%
        );
    pointer-events: none;
}

/* The sweep. One slow rotation, and the only rotating element in the app. */
.radar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    /*background: conic-gradient(
        from 0deg,
        var(--go-glow) 0deg,
        rgba(43, 208, 164, 0.1) 28deg,
        transparent 62deg
    );*/
    background-image: conic-gradient(
        rgba(43, 208, 164, 0) 0deg,
        rgba(43, 208, 164, 0.1) 298deg,
        rgba(43, 208, 164, 0.55) 360deg
    );
    opacity: 0.5;
    transform-origin: 50% 50%;
    animation: radar-sweep var(--sweep) linear infinite;
    pointer-events: none;
}

@keyframes radar-sweep {
    to {
        transform: rotate(360deg);
    }
}

/* One blip per site. Nothing here rotates: the sweep stays the only rotating
   element, and the blips only rise and fall in place as it passes. */
.radar-blips {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.radar-blip {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--lamp);
    box-shadow: 0 0 6px var(--lamp-glow);
    pointer-events: auto;
    cursor: pointer;
    /* Resting state. Legible, but well back from the count in the middle. */
    opacity: 0.3;
    /* --blip-phase is set per blip: the fraction of a revolution before the beam
       reaches that bearing, so each dot lights as the sweep crosses it. */
    animation: radar-blip-return var(--sweep) linear calc(var(--sweep) * var(--blip-phase, 0)) infinite;
}

/* Phosphor decay: the return flares as the beam hits, then falls back over about a
   second. The 11% is that second as a share of the 9s --sweep; retune both together. */
@keyframes radar-blip-return {
    0% {
        opacity: 1;
        transform: scale(1.6);
    }

    15% {
        opacity: 0.3;
        transform: scale(1);
    }

    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}

.radar-blip.go {
    --lamp: var(--go);
    --lamp-glow: var(--go-glow);
}

.radar-blip.caution {
    --lamp: var(--caution);
    --lamp-glow: var(--caution-glow);
}

.radar-blip.off {
    --lamp: var(--off);
    --lamp-glow: var(--off-glow);
}

.radar-hub {
    position: relative;
    z-index: 4;
    text-align: center;
    background: rgba(7, 12, 20, 0.9);
    border: 1px solid rgba(43, 208, 164, 0.35);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.radar-hub:hover {
    transform: scale(1.06);
    border-color: var(--go);
}

.radar-hub b {
    font-size: 24px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--text-hi);
    line-height: 1;
}

.radar-hub span {
    font-size: 9px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radar > b {
    font-size: 33px;
}

.radar > span {
    font: 9px "DM Mono";
    color: var(--muted);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* For a panel that has zeroed its own padding so a table can run edge to
   edge: the head supplies the container inset itself, on the same --s-5
   edge as .table-toolbar and .table-flush's outer cells. */
.panel-head--inset {
    margin: 0;
    padding: 20px var(--s-5) 16px;
}

.panel-head a {
    font-size: 12px;
    color: var(--green);
    text-decoration: none;
}

.site-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* min(100%, 280px) is what lets auto-fit drop to a single column below
   280px without a media query -- a bare minmax(280px, 1fr) would overflow. */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
}

/* ══════════════════════════════════════════════════════════════════════
   07 · CONTROLS
   ══════════════════════════════════════════════════════════════════════ */

textarea {
    min-height: 96px;
    resize: vertical;
    background: var(--surface-inset);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 10px 11px;
    font: 13px Manrope;
}

textarea:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

.action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.site-picker {
    min-inline-size: 0;
    margin: 3px 0 0;
    padding: 13px 15px 7px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.site-picker legend {
    padding: 0 6px;
    color: var(--muted);
    font: 10px "DM Mono";
    letter-spacing: 1px;
}

.site-picker .check {
    padding: 5px 0;
}

.site-picker .check small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

.queue-footer {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

.queue-footer .subtle {
    margin: 0;
}

.queue-footer a {
    color: var(--green);
}

.form-grid,
.check-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 4px 0 8px;
}

.filters,
.policy {
    display: grid;
    gap: 13px;
}

.filters {
    grid-template-columns: 1fr 190px auto;
    margin-bottom: 22px;
}

.filters input,
.filters select {
    margin: 0;
}

label {
    font-size: 12px;
    color: var(--muted);
    display: grid;
    gap: 6px;
}

input,
select {
    background: var(--surface-inset);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: 10px 11px;
    font: 13px Manrope;
}

input:focus,
select:focus {
    outline: 2px solid var(--green);
    outline-offset: 1px;
}

.check {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-2);
}

.check input {
    accent-color: var(--green);
}

/* ══════════════════════════════════════════════════════════════════════
   08b · BUTTONS

   One vocabulary, three intents, two modifiers. Every button and
   button-styled link in the app is `.btn` plus exactly one intent
   (`-primary` / `-secondary` / `-danger`) and optionally one size or shape
   modifier (`-sm` / `-icon`).

   This replaces three competing identities that had accumulated: a mint
   gradient `.primary` (73 uses), a cyan-outlined `.button-link` (146 uses,
   used as the default even for submit actions), and `.btn-primary` /
   `.btn-secondary` / `.btn-ghost` / `.btn-sm` / `.btn-resolve`, which were
   copied out of mockups/*.html without their <style> blocks and so were
   referenced in 30+ places while being defined nowhere at all.

   The mockups disagreed on what "primary" looks like — dashboard_redesign
   has mint, available_updates_redesign has blue. Mint wins: it is the
   --go ramp that the rest of the token palette is built around.
   ══════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font: 600 12px var(--font-ui);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        color var(--dur-fast) var(--ease);
}

.btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: var(--focus-offset);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Intent: primary — the one affirmative action on a view ─────────── */
.btn-primary {
    background: var(--go);
    border-color: var(--go);
    color: var(--on-accent);
    box-shadow: 0 2px 10px rgba(43, 208, 164, 0.25);
}

.btn-primary:hover:not(:disabled) {
    background: var(--go-ink);
    border-color: var(--go-ink);
}

/* ── Intent: secondary — the neutral default ────────────────────────── */
.btn-secondary {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--text-hi);
    box-shadow: inset 0 1px 0 var(--line-inset);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--surface-3);
    border-color: var(--info-line);
}

/* ── Intent: danger — destructive only. Delete, revoke, disconnect. ─── */
.btn-danger {
    background: var(--off-fill);
    border-color: var(--off-line);
    color: var(--off-ink);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(255, 109, 114, 0.22);
    border-color: var(--off);
    color: var(--text-hi);
}

/* ── Size modifier: table-row and toolbar actions ───────────────────── */
.btn-sm {
    padding: 4px 9px;
    font-size: 11px;
    gap: var(--s-1);
}

/* ── Shape modifier: square icon button (drawer/modal close, etc.) ──── */
.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    flex: none;
}

.btn-icon.btn-sm {
    width: 26px;
    height: 26px;
}

/* Touch target floor. Gated on the input device rather than a width, because
   target size tracks the pointer, not the viewport -- this correctly covers a
   landscape tablet and correctly leaves a narrow desktop window alone. The
   base .btn computes to ~33px tall and is deliberately untouched: raising it
   would reflow every desktop toolbar and table action row. */
@media (pointer: coarse) {
    .btn {
        min-height: var(--s-7);
        padding-inline: var(--s-4);
    }
    .btn-icon {
        min-width: var(--s-7);
    }
    /* 16px is load-bearing, not cosmetic: iOS Safari force-zooms the page on
       focus for any input below it, which would break the mobile nav on the
       exact tap it exists to serve. */
    .quick-search-input {
        min-height: var(--s-7);
        font-size: 16px;
    }
    .sidebar .nav-group a,
    .sidebar .admin-links a,
    .sidebar .admin-nav-head > a {
        min-height: var(--s-7);
    }
    summary {
        min-height: var(--s-7);
    }
    /* There is no ⌘K on a phone. */
    .search-shortcut-kbd {
        display: none;
    }
}

dialog {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 15px 80px #000;
    /* .operation-modal, .drawer and .inspector-drawer clamp themselves; the
       base rule did not, so an ad-hoc <dialog> could exceed the viewport.
       .operation-modal's min(600px, 94vw) is more specific and still wins. */
    max-width: min(560px, 94vw);
    max-height: 85vh;
    overflow: auto;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

/* Dashboard alert summary: a compact handoff from the command badge to the
   operational surface that can resolve each active signal. */
button.status-badge,
button.status-alert-count { border: 0; cursor: pointer; font: inherit; }
.status-alert-trigger:focus-visible,
.status-alert-count:focus-visible { outline: 2px solid var(--caution); outline-offset: 3px; }
dialog.dashboard-alerts-dialog { width: min(680px, calc(100vw - 28px)); max-height: min(720px, calc(100vh - 28px)); padding: 0; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-hi); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.dashboard-alerts-head { display: flex; justify-content: space-between; gap: 20px; padding: 22px 22px 18px; border-bottom: 1px solid var(--line-hair); }
.dashboard-alerts-head h2 { margin: 2px 0 4px; font-size: 20px; }
.dashboard-alerts-head .subtle { margin: 0; }
.dashboard-alert-list { padding: 8px 14px 14px; }
.dashboard-alert-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 8px; border-bottom: 1px solid var(--line-hair); }
.dashboard-alert-item:last-child { border-bottom: 0; }
.dashboard-alert-count { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(242, 185, 75, .42); border-radius: 50%; background: var(--caution-fill); color: var(--caution-ink); font: 700 13px var(--font-mono); }
.dashboard-alert-item h3 { margin: 0 0 3px; font-size: 13px; }
.dashboard-alert-item p { margin: 0; color: var(--text-2); font-size: 12px; }
@media (max-width: 560px) { .dashboard-alerts-head { padding: 18px; } .dashboard-alert-item { grid-template-columns: 30px minmax(0, 1fr); } .dashboard-alert-item .btn { grid-column: 2; justify-self: start; } }

/* Reusable recurring-window controls and the one-off uptime window dialog. */
.maintenance-schedule { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 8px; }
.maintenance-schedule legend, .maintenance-label { padding: 0 5px; color: var(--muted); font: 10px "DM Mono"; letter-spacing: 1px; text-transform: uppercase; }
.maintenance-schedule-fields { display: grid; gap: 11px; margin-top: 12px; }
.maintenance-days { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.maintenance-days .check { font-size: 12px; }
.maintenance-source { margin: 8px 0 0; }
dialog.maintenance-windows-dialog { width: min(760px, 94vw); max-height: 88vh; overflow: auto; }
.maintenance-windows-dialog .panel-head { align-items: flex-start; }
.maintenance-windows-dialog .maintenance-card { gap: 12px; }
.maintenance-status-list { display: grid; gap: 7px; margin: 14px 0; }
.maintenance-status-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-1); }

.inline-form {
    display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════════
   08 · STATUS
   ══════════════════════════════════════════════════════════════════════ */

/* Status lamps. The base colour stays GO because .dot has always relied on the
   default for the `connected` state; .connected is now also stated outright.
   The inner black ring seats each lamp in a bezel. */
.pulse,
.dot,
.health-dot {
    --lamp: var(--go);
    --lamp-glow: var(--go-glow);
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lamp);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        0 0 10px 1px var(--lamp-glow);
}

.dot {
    margin-right: 6px;
}

.dot.connected,
.health-dot.healthy {
    --lamp: var(--go);
    --lamp-glow: var(--go-glow);
}

.health-dot.recommended {
    --lamp: var(--caution);
    --lamp-glow: var(--caution-glow);
}

.dot.disconnected,
.dot.failed,
.health-dot.unhealthy {
    --lamp: var(--off);
    --lamp-glow: var(--off-glow);
}

.dot.pending,
.dot.revoked {
    --lamp: var(--caution);
    --lamp-glow: var(--caution-glow);
}

/* Exactly one breathing lamp in the whole app: the header heartbeat. Six
   pulsing health dots would be unbearable across an eight-hour shift. */
@keyframes lamp-breathe {
    0%,
    100% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.6),
            0 0 8px 0 var(--lamp-glow);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(0, 0, 0, 0.6),
            0 0 17px 2px var(--lamp-glow);
    }
}

.pulse {
    animation: lamp-breathe 3.8s var(--ease) infinite;
}

.empty {
    text-align: center;
    color: var(--muted);
    padding: 35px;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.notice {
    --tone: var(--go);
    --tone-ink: var(--go-ink);
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
    background: color-mix(in srgb, var(--tone) 13%, transparent);
    color: var(--tone-ink);
    border-radius: var(--r-md);
    margin-bottom: var(--s-4);
    font-size: 13px;
}

/* The layout rendered validation errors in the success colour. */
.notice.error {
    --tone: var(--off);
    --tone-ink: var(--off-ink);
}

.status {
    display: block;
    margin-bottom: 9px;
    font-size: 13px;
}

.facts {
    display: flex;
    gap: 16px;
    font: 11px "DM Mono";
    color: var(--muted);
}

/* One recipe, one variable. --bdg drives all 46 badges plus every operation
   status pill in operations.css. */
.badge {
    --bdg: var(--go);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 10px var(--font-mono);
    letter-spacing: 0.1em;
    color: var(--bdg);
    background: color-mix(in srgb, var(--bdg) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bdg) 42%, transparent);
    border-radius: var(--r-pill);
    padding: 4px 8px;
    white-space: nowrap;
}

/* Leading annunciator lamp, as on a real console readout. */
.badge::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
}

.badge.failed {
    --bdg: var(--off);
}

.badge.good {
    --bdg: var(--go);
}

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    --chip: var(--info);
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--info-ink);
    /* Tag colours come from the database via style="--chip:...". A malformed
       value makes the whole color-mix() invalid at computed-value time, so
       these plain declarations stay in front as the fallback layer. */
    background: var(--info-fill);
    border: 1px solid var(--info-line);
    background: color-mix(in srgb, var(--chip) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--chip) 45%, transparent);
    text-decoration: none;
}

.chip:hover {
    background: color-mix(in srgb, var(--chip) 34%, transparent);
}

.uptime-tick {
    width: 14px;
    height: 22px;
    border-radius: 3px;
    display: inline-block;
    padding: 0;
}

.uptime-tick.up {
    background: var(--go);
}

.uptime-tick.down {
    background: var(--off);
}

/* ── Uptime telemetry: a quiet instrument panel, not a generic chart card. */
.uptime-monitor {
    margin-top: 16px;
    padding: 16px 20px;
}

.uptime-head { align-items: flex-start; gap: 16px; }
.uptime-head h2 { margin: 3px 0 4px; }
.uptime-head .subtle { margin: 0; }
.uptime-range, .uptime-toggle { display: flex; gap: 4px; flex-wrap: wrap; }
.uptime-range a, .uptime-toggle button {
    color: var(--dim); background: var(--surface-inset); border: 1px solid var(--line-hair);
    border-radius: var(--r-xs); padding: 5px 8px; font: 500 11px var(--font-mono); text-decoration: none;
}
.uptime-range a:hover, .uptime-range a.active, .uptime-toggle button:hover, .uptime-toggle button.active {
    color: var(--go-ink); border-color: var(--go-line); background: var(--go-fill);
}
.uptime-summary { display: grid; grid-template-columns: 1.15fr repeat(2, 1fr); gap: 10px; margin: 12px 0; }
.uptime-summary article, .uptime-stat-row article {
    min-width: 0; padding: 10px 14px; border: 1px solid var(--line-hair); border-radius: var(--r-sm); background: rgba(4, 10, 17, .34);
}
.uptime-summary strong, .uptime-stat-row strong { display: block; color: var(--text-hi); font-size: 22px; letter-spacing: -0.5px; line-height: 1.15; }
.uptime-summary small, .uptime-stat-row small { display: block; margin-top: 4px; color: var(--dim); font-size: 11px; }
.uptime-status { display: flex; align-items: center; gap: 10px; }
.uptime-orb { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; color: var(--on-accent); font-size: 18px; font-weight: 800; background: var(--go); border-radius: 50%; box-shadow: 0 0 0 3px var(--go-fill), 0 0 16px rgba(43, 208, 164, .27); }
.uptime-status.down .uptime-orb { color: #25070a; background: var(--off); box-shadow: 0 0 0 3px var(--off-fill), 0 0 16px rgba(255, 109, 114, .25); }
.uptime-status.maintenance .uptime-orb { color: #1c1402; background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .25), 0 0 16px rgba(245, 158, 11, .3); }
.uptime-status strong { font-size: 16px; letter-spacing: 0; }
.uptime-status small { margin-top: 2px; }
.uptime-chart-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; }
.uptime-chart-head b { color: var(--text-2); font-size: 12px; }
.uptime-chart-head span { margin-left: 5px; color: var(--dim); font: 10px var(--font-mono); }
.uptime-chart-wrap { position: relative; overflow: hidden; min-height: 90px; padding: 6px 0 0; border-top: 1px solid var(--line-hair); border-bottom: 1px solid var(--line-hair); background: linear-gradient(180deg, rgba(43, 208, 164, .035), transparent 68%); }
.uptime-chart { display: block; width: 100%; min-height: 90px; overflow: visible; }
.uptime-grid-line { stroke: var(--line-hair); stroke-width: 1; stroke-dasharray: 2 5; }
.uptime-area { fill: url(#uptime-fill); fill: rgba(43, 208, 164, .13); }
.uptime-line { fill: none; stroke: var(--go); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(43, 208, 164, .38)); }
.uptime-point { fill: var(--go); stroke: var(--surface-0); stroke-width: 2; opacity: 0; cursor: crosshair; }
.uptime-point.uptime-point-visible { opacity: .75; stroke-width: 1.5; }
.uptime-point-solo { opacity: 1 !important; fill: var(--go); stroke: var(--surface-0); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(43, 208, 164, .5)); cursor: pointer; }
.uptime-point:hover, .uptime-point:focus, .uptime-point-active { opacity: 1; outline: none; }
.uptime-point-active { stroke: var(--text-hi); stroke-width: 3; filter: drop-shadow(0 0 7px rgba(43, 208, 164, .75)); }
.uptime-point-down { fill: var(--off); }
.uptime-point-down.uptime-point-solo { filter: drop-shadow(0 0 6px rgba(255, 109, 114, .5)); }
.uptime-outage { stroke: var(--off); stroke-width: 2; opacity: .88; }
.uptime-axis-label { fill: var(--dim); font: 9px var(--font-mono); }
.uptime-tooltip { position: absolute; z-index: 2; top: 8px; right: 12px; max-width: calc(100% - 24px); padding: 5px 8px; color: var(--text-hi); background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: var(--r-xs); box-shadow: var(--shadow-pop); font: 10px var(--font-mono); pointer-events: none; }
.uptime-data { margin-top: 8px; color: var(--dim); font-size: 11px; }
.uptime-data table { margin-top: 8px; font-size: 11px; }
/* Was `.uptime-data tbody { max-height: 220px; overflow: auto }`, which did
   nothing: neither property applies to a table-row-group box. The cap has to
   live on a real block box, so it moves to the wrapping <details> — and the
   <summary> is pinned so it doesn't scroll away with the rows. */
.uptime-data[open] { max-height: 260px; overflow-y: auto; overscroll-behavior-y: contain; }
.uptime-data[open] > summary { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.uptime-empty { display: grid; gap: 4px; min-height: 75px; align-content: center; color: var(--dim); border-top: 1px solid var(--line-hair); border-bottom: 1px solid var(--line-hair); }
.uptime-empty b { color: var(--text-2); }
.uptime-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; border: 1px solid var(--line-hair); }
.uptime-stat-row article { border: 0; border-radius: 0; background: transparent; }
.uptime-stat-row article + article { border-left: 1px solid var(--line-hair); }
.uptime-fleet-link { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; color: var(--go-ink); font-size: 12px; text-decoration: none; }

.badge.subtle {
    --bdg: var(--muted);
}

.badge.warn {
    --bdg: var(--caution);
}

/* ══════════════════════════════════════════════════════════════════════
   09 · DATA
   ══════════════════════════════════════════════════════════════════════ */

/* Cells previously had `padding: 14px 0` — no horizontal padding at all, so
   adjacent columns touched and separation depended entirely on content
   width. That is why fleet/updates/* had to hand-add `min-width: 200px` to
   every <th>. The gutter now lives here instead.

   The :first-child / :last-child zeroing is load-bearing: .panel's 23px
   padding IS the outer cell padding today, so padding the edge cells too
   would push every table's first and last column out of alignment with its
   container. Use .table-flush when the panel itself has no padding. */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th {
    text-align: left;
    color: var(--dim);
    font: 11px var(--font-mono);
    letter-spacing: var(--track-label);
    padding: 0 var(--s-4) 10px;
    border-bottom: 1px solid var(--line-strong);
}

td {
    border-top: 1px solid var(--line-hair);
    padding: 14px var(--s-4);
    color: var(--text-2);
    /* Lowers every cell's min-content width so an unbroken URL or error
       string stops forcing page-level overflow. No-op for tables pinned by
       min-width -- those still scroll. */
    overflow-wrap: anywhere;
}

th:first-child,
td:first-child {
    padding-left: 0;
}

th:last-child,
td:last-child {
    padding-right: 0;
}

tbody tr:hover td {
    background: rgba(127, 215, 255, 0.035);
}

/* .data-table is referenced by all five fleet/updates/* tables and was
   defined nowhere, so those tables silently fell back to the base rules.
   Keeping it as an explicit no-op alias means the Blade stays honest. */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

/* Likewise .panel-card, the wrapper those same views use. It was undefined,
   so the updates tables sat on the page with no surface, border or padding
   at all. Matches .panel. */
.panel-card {
    position: relative;
    padding: var(--s-5);
    border: 1px solid var(--line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 38%),
        linear-gradient(135deg, var(--surface-2), var(--surface-1) 74%);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-panel);
}

/* Column-dense tables that should scroll rather than crush. Same idiom as
   .site-command-table and .operations-table, which already do this. Replaces
   the per-<th> `min-width: 200px` inline hacks in fleet/updates/*, which were
   only ever there because cells had no horizontal padding of their own. */
.table-wide {
    min-width: 880px;
}

/* Edge-to-edge table inside a zero-padding panel: the cells supply the
   container inset themselves rather than inheriting it from the panel. */
.table-flush th:first-child,
.table-flush td:first-child {
    padding-left: var(--s-5);
}

.table-flush th:last-child,
.table-flush td:last-child {
    padding-right: var(--s-5);
}

/* Present in fleet/sites.blade.php with no rule behind it, so the 840px-wide
   managed-sites table overflowed the viewport instead of scrolling.
   .operations-table-wrap is the same thing under a second name. */
/* .table-wrap joins the list: seo/index and seo/site both reference it and
   it was defined nowhere, so a 7-column and a 5-column table overflowed the
   viewport instead of scrolling. */
.table-wrap,
.table-scroll,
.operations-table-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
    /* Self-hiding scroll cue. The two `local` gradients scroll with the
       content and uncover the `scroll` shadows only while there is more
       table in that direction, so a scrollable table announces itself and a
       table that fits shows nothing. No JS, no state class. */
    background:
        linear-gradient(90deg, var(--surface-2) 40%, rgba(17, 26, 39, 0)) left center / 26px 100% no-repeat,
        linear-gradient(90deg, rgba(17, 26, 39, 0), var(--surface-2) 60%) right center / 26px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.45), transparent) left center / 11px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.45), transparent) right center / 11px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

td small {
    display: block;
    color: var(--muted);
    margin-top: 3px;
    font-size: 11px;
}

/* Cells holding an unbounded payload -- json_encode dumps, exception
   strings. overflow-wrap alone lets these wrap, but a single noisy row can
   still become the whole page; cap the column and clamp the height. */
.cell-blob {
    display: block;
    max-width: 38ch;
    max-height: 4.5em;
    overflow: hidden;
    font: 11px var(--font-mono);
    color: var(--muted);
}

.pagination {
    margin-top: 18px;
    color: var(--muted);
    font-size: 12px;
}

.pagination nav {
    display: block;
    margin: 0;
}
/* Rendered by resources/views/vendor/pagination/mission-control.blade.php.
   Named `pager` so it does not collide with the .pagination wrapper div. */
.pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font: 11px "DM Mono";
}
.pager li > a,
.pager li > span {
    display: grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface-1);
    color: var(--muted);
    text-decoration: none;
}
.pager li > a:hover {
    border-color: var(--line-strong);
    background: var(--surface-3);
    color: var(--text);
}
.pager li.active > span {
    border-color: var(--go-line);
    background: var(--go-fill);
    color: var(--green);
}
.pager li.disabled > span {
    opacity: 0.38;
}
.pager li.ellipsis > span {
    border-color: transparent;
    background: none;
}

.matrix {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 4px;
}

/* The one table with real cell borders, so unlike every other table its
   edge cells do need horizontal padding — the border, not the panel, is
   what the content aligns to. Vertical padding is tighter than the base
   because these cells hold checkmarks, not prose. */
.matrix th,
.matrix td {
    border: 1px solid var(--line);
    padding: 9px var(--s-3);
    text-align: left;
    vertical-align: top;
}

.matrix th:first-child,
.matrix td:first-child,
.matrix th:last-child,
.matrix td:last-child {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
}

.matrix thead th {
    font: 10px "DM Mono";
    letter-spacing: 1px;
    color: var(--muted);
    background: var(--surface-1);
    white-space: nowrap;
}

.matrix thead th .badge {
    margin-left: 6px;
}

.matrix tbody th {
    font-weight: 400;
}

.matrix tbody th small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.matrix td .check {
    padding: 0;
}

.delivery-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 13px;
    margin: 16px 0 6px;
}

.delivery-config label b {
    display: block;
}

.delivery-config label small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

.delivery-config input {
    width: 100%;
    margin-top: 6px;
}

details.site-list summary {
    cursor: pointer;
    color: var(--muted);
    font: 11px "DM Mono";
    padding: 4px 0;
}

details.site-list ul {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--text-2);
    font-size: 12px;
}

details.site-list li {
    padding: 3px 0;
}

/* ══════════════════════════════════════════════════════════════════════
   10 · NAVIGATION
   ══════════════════════════════════════════════════════════════════════ */

/* Filter pills. .link-tabs was a hand-copy in links.css that had drifted to a
   different padding and font size; it joins the shared selector here. The
   underline rail in .site-tabs stays separate -- switching sub-views of one
   entity is a different pattern from filtering a list. */
.wpvivid-tabs,
.tab-nav,
.link-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 18px;
}

.wpvivid-tabs a,
.tab-nav a,
.link-tabs a {
    font: 11px var(--font-mono);
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--muted);
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface-1);
}

.wpvivid-tabs a:hover,
.tab-nav a:hover,
.link-tabs a:hover {
    color: var(--text);
    border-color: var(--line-strong);
}

/* Tinted rather than filled solid mint: a filled pill competed with the GO
   status colour everywhere else on the page. */
.wpvivid-tabs a.active,
.tab-nav a.active,
.link-tabs a.active {
    color: var(--go);
    background: var(--go-fill);
    border-color: var(--go-line);
    box-shadow: 0 0 14px -4px var(--go-glow);
}

.site-tabs {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    margin: -1px 0 22px;
    padding: 0 4px 0;
    border-bottom: 1px solid var(--line);
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Same self-hiding edge cue as .table-scroll, tinted to the page gutter.
       Deliberately gradients rather than a mask-image: the active tab's
       underline sits at bottom: -1px and a mask would clip it at the strip's
       edges. The site page renders 11 tabs, so on a phone the strip is
       always scrollable and needs to say so. */
    background:
        linear-gradient(90deg, var(--surface-0) 40%, rgba(10, 17, 25, 0)) left center / 22px 100% no-repeat,
        linear-gradient(90deg, rgba(10, 17, 25, 0), var(--surface-0) 60%) right center / 22px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.4), transparent) left center / 9px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.4), transparent) right center / 9px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.site-tabs::-webkit-scrollbar {
    height: 0;
}

.site-tabs a {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 11px 12px 12px;
    color: var(--muted);
    font: 11px "DM Mono";
    letter-spacing: 0.3px;
    text-decoration: none;
}

.site-tabs a:hover {
    color: var(--text);
}

.site-tabs a.active {
    color: var(--green);
}

.site-tabs a.active:after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: -1px;
    left: 10px;
    height: 2px;
    background: var(--green);
    box-shadow: 0 0 10px rgba(43, 208, 164, 0.6);
}

.tab-nav a span {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--surface-inset);
    color: var(--muted);
    font-size: 10px;
}

.tab-nav a.active span {
    background: rgba(6, 19, 17, 0.25);
    color: var(--on-accent);
}

/* ══════════════════════════════════════════════════════════════════════
   11 · PAGES
   ══════════════════════════════════════════════════════════════════════ */

.wpvivid-intro {
    padding: 25px 23px;
    background: linear-gradient(
        110deg,
        rgba(22, 54, 60, 0.9),
        rgba(20, 29, 42, 0.96) 58%,
        rgba(31, 43, 57, 0.92)
    );
}

.wpvivid-intro h2 {
    font-size: 21px;
    letter-spacing: -0.6px;
}

.profile-page {
    display: grid;
    gap: 16px;
}

.profile-intro {
    background: linear-gradient(
        110deg,
        rgba(22, 54, 60, 0.9),
        rgba(20, 29, 42, 0.96) 58%,
        rgba(31, 43, 57, 0.92)
    );
}

.profile-grid {
    margin-top: 0;
}

.profile-section-head {
    margin: 18px 0 -2px;
}

.profile-section-head h2 {
    font-size: 21px;
}

.admin-intro {
    margin: 0;
    background: linear-gradient(
        110deg,
        rgba(22, 54, 60, 0.9),
        rgba(20, 29, 42, 0.96) 58%,
        rgba(31, 43, 57, 0.92)
    );
}

.admin-intro h2 {
    font-size: 24px;
    letter-spacing: -0.7px;
}

.admin-signals {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.admin-signals article {
    min-height: 125px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(19, 29, 41, 0.88);
}

.admin-signals span,
.admin-signals em {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
}

.admin-signals strong {
    display: block;
    margin: 7px 0 3px;
    font-size: 31px;
    letter-spacing: -1px;
}

.admin-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.admin-shortcuts > a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    min-height: 98px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(31, 43, 57, 0.92), rgba(17, 25, 35, 0.95));
    color: var(--text);
    text-decoration: none;
}

.admin-shortcuts > a:hover {
    border-color: var(--go-line);
    background: linear-gradient(135deg, var(--go-fill), rgba(17, 25, 35, 0.95));
}

.admin-shortcuts b,
.admin-shortcuts small {
    display: block;
}

.admin-shortcuts small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.admin-shortcuts i {
    color: var(--green);
    font-style: normal;
}

/* The 34px box is the container; the icon inside is 17px. */
.admin-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--go-line);
    border-radius: var(--r-sm);
    background: var(--go-fill);
    color: var(--go);
}

.about-page {
    display: grid;
    gap: 16px;
}

.about-intro {
    padding: 28px;
    background: linear-gradient(
        112deg,
        rgba(17, 68, 65, 0.88),
        rgba(21, 31, 45, 0.96) 62%,
        rgba(31, 43, 57, 0.92)
    );
}

.about-intro h2 {
    max-width: 620px;
    font-size: 25px;
    letter-spacing: -0.8px;
}

.about-intro > p:not(.eyebrow) {
    max-width: 710px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.about-capabilities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.about-capabilities article {
    position: relative;
    min-height: 185px;
    padding: 22px 22px 21px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(31, 43, 57, 0.92), rgba(17, 25, 35, 0.95));
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.about-capabilities article:hover {
    border-color: var(--go-line);
}

.about-capabilities .eyebrow {
    margin: 17px 0 7px;
}

.about-capabilities h2 {
    font-size: 17px;
}

.about-capabilities article > p:not(.eyebrow) {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.about-capability-mark {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--go-line);
    border-radius: var(--r-sm);
    background: var(--go-fill);
    color: var(--go);
}

.about-details {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) 1fr;
    gap: 26px;
    align-items: start;
}

.about-details-heading h2 {
    font-size: 18px;
    line-height: 1.35;
}

.about-details table {
    margin-top: -2px;
    width: 100%;
    border-collapse: collapse;
}

.about-details tr {
    border-bottom: 1px solid var(--line-hair);
}

.about-details tr:last-child {
    border-bottom: none;
}

.about-details th,
.about-details td {
    padding: 12px var(--s-4);
    border: none;
    vertical-align: middle;
}

.about-details th {
    width: 45%;
    font: 500 11px var(--font-mono);
    letter-spacing: var(--track-label);
    color: var(--dim);
    text-transform: uppercase;
}

.about-details td {
    color: var(--text-hi);
    font: 500 13px var(--font-mono);
}

/* Managed Sites: MainWP-style operations table, expressed in Mission Control's visual language. */
.managed-sites {
    overflow: visible;
}

.managed-sites-head {
    align-items: flex-start;
}

.site-table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin: 18px 0;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-1);
}

.site-table-filters label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font: 10px "DM Mono";
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.site-table-filters input,
.site-table-filters select {
    min-height: 35px;
}

.site-table-filters .site-search {
    min-width: 220px;
    flex: 1;
}

.site-table-filters .site-search input {
    width: 100%;
}

.site-table-filters select[multiple] {
    min-width: 130px;
    padding: 5px;
}

.site-table-filters .filter-check {
    display: flex;
    align-items: center;
    min-height: 35px;
    gap: 5px;
    text-transform: none;
    letter-spacing: 0;
    font-family: Manrope;
    font-size: 12px;
}

.site-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
}

.selection-copy {
    color: var(--muted);
    font-size: 12px;
}

.selection-copy strong {
    color: var(--text);
    font: 13px "DM Mono";
}

.selection-copy span {
    font-size: 11px;
}

/* Site overview: content column + sidecar. Also formerly an inline style,
   so the 280px sidecar could not be collapsed by a query. */
.site-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1000px) {
    .site-overview-layout {
        grid-template-columns: 1fr;
    }
}

.site-command-table {
    min-width: 840px;
}

.site-command-table .selection-column {
    width: 38px;
    padding-right: 3px;
}

.site-command-table tbody tr:has([data-site-select]:checked) {
    background: rgba(57, 217, 138, 0.06);
}

.site-command-table input[type="checkbox"] {
    accent-color: var(--green);
}

.column-picker {
    position: relative;
}

.column-picker summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    font-size: 12px;
}

.column-picker summary::-webkit-details-marker {
    display: none;
}

.column-picker[open] summary {
    color: var(--text);
    border-color: var(--go-line);
}

.column-picker-menu {
    position: absolute;
    z-index: 5;
    right: 0;
    top: 39px;
    width: 245px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-3);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
}

.column-picker-menu label {
    display: block;
    margin: 5px 0;
    font-size: 12px;
}

.column-picker-menu input {
    margin-right: 6px;
}

.column-order-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    color: var(--muted);
    font: 10px "DM Mono";
    text-transform: capitalize;
}

.column-order-row span {
    flex: 1;
}

.column-order-row button {
    min-width: 25px;
    padding: 3px 6px;
}

.tags-drawer {
    margin-top: 16px;
    padding: 17px;
    border: 1px solid var(--go-line);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(18, 44, 48, 0.8), var(--surface-1));
}

.tag-batch {
    display: grid;
    grid-template-columns: minmax(125px, 0.65fr) 1fr 1fr auto;
    align-items: end;
    gap: 11px;
    margin: 14px 0;
    padding: 13px;
    border: 1px solid rgba(57, 217, 138, 0.26);
    border-radius: 8px;
    background: rgba(6, 19, 17, 0.22);
}

.tag-batch p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.tag-batch label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font: 10px "DM Mono";
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.tag-batch select {
    min-height: 74px;
}

.tag-catalog {
    margin-top: 17px;
}

.tag-catalog h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.tag-catalog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.tag-catalog-item form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-catalog-item input {
    max-width: 160px;
}

.tag-create {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tag-create input {
    max-width: 180px;
}

.servers-drawer {
    margin-top: 16px;
    padding: 17px;
    border: 1px solid var(--go-line);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(18, 44, 48, 0.8), var(--surface-1));
}

.server-catalog {
    margin-top: 17px;
}

.server-catalog h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.server-catalog-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.server-catalog-item form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.server-catalog-item input {
    max-width: 220px;
}

.server-create {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.server-create input {
    max-width: 240px;
}

.security-grid {
    margin-top: 0;
}

.secret {
    display: block;
    margin: 16px 0;
    padding: 13px;
    background: var(--surface-inset);
    border: 1px solid var(--line);
    color: var(--go-ink);
    font:
        16px "DM Mono",
        monospace;
    letter-spacing: 2px;
    overflow-wrap: anywhere;
}

.recovery {
    margin-top: 16px;
    border-color: var(--caution-line);
}

.codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.codes code {
    padding: 9px 12px;
    background: var(--surface-inset);
    border: 1px solid var(--line);
    font:
        12px "DM Mono",
        monospace;
    color: var(--caution-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   12 · AUTH
   ══════════════════════════════════════════════════════════════════════ */

/* Transparent so the shared atmosphere layers show through; the auth pages
   get a tighter, brighter sky of their own and an unmasked starfield, since
   there is no content column to keep clear here. */
.login-page {
    align-items: center;
    justify-content: center;
    background: transparent;
}

.login-page::before {
    background:
        radial-gradient(96% 76% at 50% -14%, rgba(30, 86, 104, 0.58) 0, transparent 60%),
        radial-gradient(64% 52% at 50% 112%, rgba(46, 32, 84, 0.42) 0, transparent 62%),
        var(--space-void);
}

.login-page::after {
    opacity: 0.95;
    -webkit-mask-image: none;
    mask-image: none;
}

.login-card {
    position: relative;
    overflow: hidden;
    /* Both sign-in screens share this card. Keep it comfortably contained
       on large displays while preserving a gutter on narrow ones. */
    width: min(800px, calc(100% - 36px));
    max-width: 800px;
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(13, 21, 33, 0.82);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow:
        var(--shadow-pop),
        inset 0 1px 0 var(--line-inset);
}

/* An orbital ring behind the form, matching the hero-panel motif. */
.login-card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -160px;
    width: 380px;
    aspect-ratio: 1;
    border: 1px solid rgba(127, 215, 255, 0.11);
    border-radius: 50%;
    pointer-events: none;
}

.login-card > * {
    position: relative;
}

.login-card .orb {
    --icon-size: 34px;
}

.login-card .brand {
    margin-bottom: 42px;
}

.login-card h1 {
    margin: 0 0 28px;
}

.login-card form {
    display: grid;
    gap: 16px;
}

.form-error {
    font-size: 12px;
    color: var(--red);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   13 · RESPONSIVE
   ══════════════════════════════════════════════════════════════════════

   Four tiers, all max-width (desktop-first, matching the rest of the file):

     1200px  narrow desktop -- padding only
      900px  the nav goes off-canvas; two-column layouts collapse
      700px  grids drop to one column; the header stacks
      560px  phone -- padding tightens, tables and cards compact

   These cannot be custom properties: @media does not evaluate var(), and
   there is no build step to preprocess it. Four literals and this comment
   are the whole convention -- please do not introduce a fifth value.

   Note that sections 13.5 and the dashboard block below define base rules,
   so at equal specificity a rule down there beats a media query up here.
   New component rules should carry their own adjacent query instead of
   being added to this section; that is already the pattern in updates.css,
   links.css and operations.css. Everything here is legacy.

   links.css deliberately keeps 1050/850/700: those are tuned to its
   progressive column-hiding ladder, which is the best responsive work in
   the repo and is not worth breaking for numeric tidiness.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
    /* .system carries "Sync all sites" + pulse + name + "Sign out", roughly
       340px, which overflows well before the old 560px stacking point. */
    header {
        align-items: flex-start;
        gap: 18px;
        flex-direction: column;
    }
    .form-grid,
    .check-grid {
        grid-template-columns: 1fr;
    }
    .queue-footer {
        align-items: flex-start;
        flex-direction: column-reverse;
    }
    .uptime-summary { grid-template-columns: 1fr; }
    .uptime-head, .uptime-chart-head { align-items: flex-start; flex-direction: column; }
    .uptime-stat-row { grid-template-columns: 1fr; }
    .uptime-stat-row article + article { border-left: 0; border-top: 1px solid var(--line-hair); }
}

@media (max-width: 1200px) {
    main {
        padding: 32px 28px;
    }
}

@media (max-width: 900px) {
    /* The sidebar becomes a left off-canvas drawer rather than disappearing.
       Mirrors .drawer (see the DRAWERS section) with the direction inverted,
       with one deliberate difference: .drawer relies on transform alone,
       which leaves its ~35 links focusable by keyboard and exposed to
       screen readers while off-screen. `visibility` closes that hole, and
       its transition is delayed by the slide duration so the panel stays
       visible for the whole animation out. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(300px, 86vw);
        height: 100vh;
        z-index: 1001; /* above .drawer-overlay's 1000 */
        border-right: 1px solid var(--line-strong);
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.65);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.28s;
    }
    html.mc-nav-open .sidebar {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
    }
    .btn.nav-trigger {
        display: inline-flex;
    }
    .sidebar-close-btn {
        display: grid;
    }
    /* The rail is desktop-only; its toggle would be meaningless here. */
    .sidebar-collapse-btn {
        display: none;
    }
    main {
        width: 100%;
        padding: 24px 20px;
    }
    /* Without this the hamburger scrolls away and a long list page has no
       route back to navigation. Background must be opaque -- a --surface-*
       alpha lets the atmosphere layers bleed through. The negative margins
       cancel main's padding at this tier exactly. */
    header {
        position: sticky;
        top: 0;
        z-index: 30;
        margin: -24px -20px 24px;
        padding: 12px 20px var(--s-4);
        background: var(--space-deep);
        border-bottom: 1px solid var(--line-hair);
    }
    header::after {
        left: 20px;
    }
    .system {
        flex-wrap: wrap;
        gap: var(--s-2);
    }
    .system .btn {
        margin-left: 0;
    }
    .admin-signals {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .metrics,
    .grid,
    .two-col {
        grid-template-columns: 1fr 1fr;
    }
    .two-col {
        grid-template-columns: 1fr;
    }
    .filters {
        grid-template-columns: 1fr;
    }
    .site-hero {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }
    .update-overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
    .update-overview-card:nth-child(3) { border-right: 0; }
    .update-overview-card:nth-child(n+4) { border-top: 1px solid var(--line-hair); }
    .facts {
        flex-wrap: wrap;
    }
}

@media (max-width: 560px) {
    main {
        padding: 18px 14px;
    }
    .panel,
    .panel-card {
        padding: 16px;
    }
    /* Keep the flush-table inset, the toolbar and the panel on one shared
       edge as the panel narrows, and tighten the inter-column gutter so
       wide tables spend their space on content instead of padding. */
    th,
    td {
        padding-left: var(--s-2);
        padding-right: var(--s-2);
    }
    .table-flush th:first-child,
    .table-flush td:first-child {
        padding-left: 16px;
    }
    .table-flush th:last-child,
    .table-flush td:last-child {
        padding-right: 16px;
    }
    .table-toolbar {
        padding: 14px 16px;
    }
    .metrics {
        grid-template-columns: 1fr;
    }
    /* main's padding tightens at this tier, so the sticky header's negative
       margins have to follow it. */
    header {
        margin: -18px -14px 18px;
        padding: 12px 14px var(--s-3);
    }
    header::after {
        left: 14px;
    }
    /* The sidebar footer's operator deck already links to the profile. */
    .system .profile-link {
        display: none;
    }
    .update-overview-head { align-items: flex-start; gap: 8px; flex-direction: column; }
    .update-overview-grid { grid-template-columns: 1fr; }
    .update-overview-card { min-height: 0; border-right: 0; border-top: 1px solid var(--line-hair); }
    .update-overview-card:first-child { border-top: 0; }
    .update-overview-card > p { min-height: 0; }
}

@media (max-width: 560px) {
    .admin-signals,
    .admin-shortcuts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .about-capabilities {
        grid-template-columns: 1fr;
    }
    .about-details {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .about-details table {
        margin: 0;
    }
}

@media (max-width: 900px) {
    .site-table-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-table-filters .site-search {
        grid-column: 1/-1;
    }
    .tag-batch {
        grid-template-columns: 1fr 1fr;
    }
    .tag-batch p {
        grid-column: 1/-1;
    }
}

@media (max-width: 560px) {
    .managed-sites-head,
    .site-table-toolbar,
    .tag-catalog-item {
        align-items: flex-start;
        flex-direction: column;
    }
    .site-table-filters {
        grid-template-columns: 1fr;
    }
    .site-table-filters .site-search {
        grid-column: auto;
    }
    .tag-batch {
        grid-template-columns: 1fr;
    }
    .tag-catalog-item form {
        flex-wrap: wrap;
    }
    .tag-catalog-item input {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .codes {
        grid-template-columns: 1fr;
    }
    /* Fits more of the 11 site tabs into one swipe. */
    .site-tabs a {
        padding: 11px 10px 12px;
    }
}

/* ── Table column priority ───────────────────────────────────────────
   Marked on the <th> and its matching <td>s together, so hiding is keyed to
   the class rather than to column position. Adding or reordering a column
   cannot misalign cells, and there is no per-table rule to keep in sync --
   which is why this is not done with nth-child. Anything dropped here stays
   reachable on the row's own detail page.

   These sit at the end of section 13 on purpose: sections 13.5 and the
   dashboard block that follow define base rules, and at equal specificity a
   later base rule would beat a media query placed above it. */
@media (max-width: 900px) {
    .col-tertiary {
        display: none;
    }
}

@media (max-width: 700px) {
    .col-secondary {
        display: none;
    }
}

/* Keeps the row's identity column pinned while the operator scrubs a wide
   table sideways. Opt-in, because it only makes sense where column 1 is the
   row's key and is narrow enough to spare the width. */
@media (max-width: 700px) {
    .table-scroll.sticky-key th:first-child,
    .table-scroll.sticky-key td:first-child,
    .table-wrap.sticky-key th:first-child,
    .table-wrap.sticky-key td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        max-width: 42vw;
        padding-right: var(--s-3);
        background: var(--surface-2);
        box-shadow: 1px 0 0 var(--line-hair);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   13.5 · SETTINGS & CONFIGURATION BUILDERS (SOLID SECURITY & WPVIVID)
   ══════════════════════════════════════════════════════════════════════ */

.module-nav-tabs {
    display: flex;
    gap: var(--s-2);
    overflow-x: auto;
    padding: var(--s-2) 0 var(--s-3);
    border-bottom: 1px solid var(--line-hair);
    margin-bottom: var(--s-5);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.module-nav-tabs::-webkit-scrollbar {
    height: 4px;
}

.module-nav-tabs::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--r-pill);
}

.module-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--surface-1);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-pill);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.module-tab-btn:hover {
    background: var(--surface-3);
    border-color: var(--line-strong);
    color: var(--text-hi);
}

.module-tab-btn.active {
    background: var(--surface-3);
    border-color: var(--go-line);
    color: var(--go-ink);
    box-shadow: inset 0 0 0 1px var(--go-line);
}

.module-tab-btn .tab-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dim);
}

.module-tab-btn.active .tab-dot {
    background: var(--go);
    box-shadow: 0 0 8px var(--go-glow);
}

.settings-section-divider {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-5) 0 var(--s-4);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--line-hair);
}

.settings-section-divider:first-of-type {
    margin-top: 0;
}

.settings-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--caution-ink);
    margin: 0;
}

.settings-field-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--s-4);
    align-items: flex-start;
    padding: var(--s-3) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.settings-field-row:last-child {
    border-bottom: none;
}

@media (max-width: 700px) {
    .settings-field-row {
        grid-template-columns: 1fr;
        gap: var(--s-2);
    }
}

.settings-field-label {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.settings-field-label span {
    font-weight: 600;
    color: var(--text-hi);
    font-size: 14px;
}

.settings-field-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-1);
}

.override-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
}

.override-badge.profile {
    background: rgba(127, 215, 255, 0.1);
    color: var(--info-ink);
    border: 1px solid var(--info-line);
}

.override-badge.custom {
    background: rgba(242, 185, 75, 0.12);
    color: var(--caution-ink);
    border: 1px solid var(--caution-line);
}

.field-reset-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--dim);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.field-reset-link:hover {
    color: var(--caution-ink);
}

.settings-field-input {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    max-width: 580px;
}

.settings-field-help {
    font-size: 12px;
    color: var(--dim);
    line-height: 1.45;
    margin: 0;
}

.switch-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    cursor: pointer;
    user-select: none;
}

.switch-toggle {
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--surface-inset);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.switch-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--text-2);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}

.switch-label input:checked + .switch-toggle {
    background: var(--go-fill);
    border-color: var(--go-line);
}

.switch-label input:checked + .switch-toggle::after {
    transform: translateX(16px);
    background: var(--go);
    box-shadow: 0 0 6px var(--go-glow);
}

.switch-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--s-3);
}

.checkbox-matrix-card {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    background: var(--surface-1);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-sm);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.checkbox-matrix-card:hover {
    background: var(--surface-3);
    border-color: var(--line-strong);
}

.checkbox-matrix-card input[type="checkbox"] {
    margin-top: 2px;
}

.checkbox-matrix-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkbox-matrix-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-hi);
}

.checkbox-matrix-desc {
    font-size: 11px;
    color: var(--dim);
}

.schedule-builder-box {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    background: var(--surface-1);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-md);
    padding: var(--s-4);
    margin-bottom: var(--s-4);
}

.days-of-week-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

.day-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    background: var(--surface-inset);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.day-chip input {
    display: none;
}

.day-chip:has(input:checked) {
    background: var(--go-fill);
    border-color: var(--go-line);
    color: var(--go-ink);
    box-shadow: 0 0 6px var(--go-glow);
}

/* ══════════════════════════════════════════════════════════════════════
   14 · MOTION GUARD
   ══════════════════════════════════════════════════════════════════════ */

/* The previous guard suppressed `transition` but not `animation`, so anything
   keyframed would have ignored a user's reduced-motion preference entirely. */
/* Set by a debounced resize listener in the layout. Dragging a desktop
   window edge otherwise animates the shell continuously for the whole drag. */
html.mc-resizing main,
html.mc-resizing .sidebar {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Freeze the sweep at a pleasing angle rather than leaving a bald circle:
       the composition survives, only the motion goes. */
    .radar::after {
        animation: none !important;
        opacity: 0.34;
        transform: rotate(-38deg);
    }

    /* With no beam to light them, the returns hold at full strength rather than
       sitting permanently dim: the fleet stays readable, only the motion goes. */
    .radar-blip {
        animation: none !important;
        opacity: 1;
    }

    .pulse {
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   15 · OPERATION PROGRESS MODALS
   ══════════════════════════════════════════════════════════════════════ */
dialog.operation-modal {
    width: min(600px, 94vw);
    max-height: 85vh;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-3);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.operation-modal-content {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 16px;
    max-height: 85vh;
}

.operation-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.operation-modal-header h2 {
    margin: 4px 0 2px;
    font-size: 1.25rem;
    color: var(--text-hi);
}

.operation-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.operation-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.operation-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--info), var(--go));
    border-radius: 999px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--go-glow);
}

.operation-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-subtle);
}

.operation-failure-summary {
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--danger) 55%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    font-size: 13px;
}

.operation-failure-summary h3 {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--text-hi);
}

.operation-failure-summary ul {
    margin: 0 0 12px;
    padding-left: 18px;
}

.operation-failure-summary li + li {
    margin-top: 8px;
}

.operation-failure-summary small {
    display: block;
    margin-top: 2px;
    color: var(--text-subtle);
    overflow-wrap: anywhere;
}

.operation-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 4px;
}

.operation-item {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 13px;
}

.operation-item-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.operation-item-name {
    font-weight: 500;
    color: var(--text-hi);
    word-break: break-all;
}

.operation-item-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--success {
    background: var(--go-fill);
    color: var(--go-ink);
    border: 1px solid var(--go-line);
}

.badge--failed {
    background: var(--error-fill);
    color: var(--error-ink);
    border: 1px solid var(--error-line);
}

.badge--running {
    background: var(--info-fill);
    color: var(--info-ink);
    border: 1px solid var(--info-line);
    animation: pulse 1.5s infinite;
}

.operation-item-error {
    margin-top: 4px;
    font-size: 12px;
    color: var(--error-ink);
}

.operation-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

/* A JS/selector hook that had grown a full duplicate button style, which
   outranked .btn and left the header's Sync button a different size and
   radius from everything else. Only its spacing is layout, not identity. */
.sync-all-header-btn {
    margin-right: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL UTILITIES & CARD LAYOUTS (SOLID SECURITY & WPVIVID)
   ══════════════════════════════════════════════════════════════════════ */

.hidden, [hidden] {
    display: none !important;
}

.settings-card {
    background: var(--surface-2);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-card, 8px);
    margin-bottom: var(--s-5);
    overflow: hidden;
}

.settings-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--s-4) var(--s-5);
    background: var(--surface-1);
    border-bottom: 1px solid var(--line-hair);
    gap: var(--s-4);
}

.settings-card-header-main h3 {
    margin: 0 0 var(--s-1) 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-hi);
}

.settings-card-header-main p {
    margin: 0;
    font-size: 13px;
    color: var(--text-2);
}

.settings-card-body {
    padding: var(--s-4) var(--s-5);
}

.settings-category-card {
    background: var(--surface-inset);
    border: 1px solid var(--line-hair);
    border-radius: 6px;
    padding: var(--s-4);
    margin-bottom: var(--s-4);
}

.settings-category-card:last-child {
    margin-bottom: 0;
}

.settings-category-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: var(--track-label, 0.05em);
    text-transform: uppercase;
    color: var(--caution-ink);
    margin: 0 0 var(--s-3) 0;
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--line-hair);
}

.settings-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) var(--s-5);
    background: var(--surface-1);
    border-top: 1px solid var(--line-hair);
    gap: var(--s-3);
}

.module-tab-btn .tab-dot.inactive {
    background: var(--dim);
}

.module-tab-btn .tab-dot.active {
    background: var(--go);
    box-shadow: 0 0 6px var(--go-glow);
}

.view-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    background: var(--surface-inset);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-pill, 9999px);
    padding: 2px 4px;
}

.view-mode-toggle button {
    background: transparent;
    border: none;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--r-pill, 9999px);
    color: var(--dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-mode-toggle button.active {
    background: var(--surface-3);
    color: var(--text-hi);
    border: 1px solid var(--line-strong);
}

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD REDESIGN: METRICS, RADAR, ATTENTION QUEUE & DRAWERS
   ══════════════════════════════════════════════════════════════════════ */

/* Executive Telemetry Row (4-Card Grouped Hierarchy) */
/* The card count here is fixed at four, so auto-fit is the wrong tool -- it
   would open a phantom fifth track on a wide screen and narrow every card.
   Explicit tiers instead; the stepped queries live below .metric-card.
   Not to be confused with .metrics, a different class that section 13
   already steps down. */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.metric-card {
    background: var(--surface-2);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-card, 10px);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    min-height: 120px;
}

.metric-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.metric-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
}

.metric-card.nominal::before { background: var(--go); }
.metric-card.warning::before { background: var(--caution); }
.metric-card.attention::before { background: var(--alert); }
.metric-card.info::before { background: var(--cyan, #38bdf8); }

.metric-card .metric-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-card .metric-label {
    font-size: 11px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dim);
}

.metric-card .metric-value-wrap {
    margin: 12px 0 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.metric-card .metric-value {
    font-size: 32px;
    font-weight: 800;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--text-hi);
    letter-spacing: -0.03em;
    line-height: 1;
}

.metric-card .metric-subval {
    font-size: 12px;
    color: var(--dim);
    font-family: var(--font-mono, 'DM Mono', monospace);
}

.metric-card .metric-footer {
    font-size: 11.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.metric-card .card-cue {
    font-size: 11px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--dim);
    opacity: 0.75;
    transition: opacity 0.15s, color 0.15s;
}

.metric-card:hover .card-cue {
    opacity: 1;
    color: var(--cyan, #38bdf8);
}

/* Placed after .metric-card, not in section 13: at equal specificity the
   base rule above would otherwise win and the min-height reset below would
   silently do nothing. Four KPI cards at repeat(4, 1fr) were ~75px wide on
   a phone; the min-height reset is what keeps the stacked column from
   running several screens tall. */
@media (max-width: 900px) {
    .metrics-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .metrics-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .metric-card {
        min-height: 0;
        padding: 13px 14px;
    }
    .metric-card .metric-value {
        font-size: 24px;
    }
}

/* Radar scope + fleet action queue. Was an inline style on the <section>,
   which no media query could override -- the 340px radar floor plus a 1fr
   sibling forced ~624px of content and overflowed every phone.

   Stacks at 1100px rather than 900px: the radar has a hard 340px floor and
   the queue needs roughly 500px to stay legible, so the pair should break
   before the sidebar goes off-canvas, not after. */
.dashboard-tactical {
    grid-template-columns: minmax(340px, 460px) 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .dashboard-tactical {
        grid-template-columns: 1fr;
    }
}

/* Radar Scope Enhancements */
.radar-hub {
    position: relative;
    z-index: 4;
    text-align: center;
    background: rgba(7, 12, 20, 0.92);
    border: 1px solid rgba(43, 208, 164, 0.35);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

.radar-hub:hover {
    transform: scale(1.06);
    border-color: var(--go);
}

.radar-hub b {
    font-size: 22px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--text-hi);
    line-height: 1;
}

.radar-hub span {
    font-size: 9px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radar-blip.dimmed {
    opacity: 0.08 !important;
    animation: none !important;
    filter: grayscale(80%);
}

.radar-blip.highlighted {
    opacity: 1 !important;
    transform: scale(1.8) !important;
    box-shadow: 0 0 12px currentColor !important;
}

.radar-legend {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid var(--line-hair);
}

.radar-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--dim);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--r-pill, 9999px);
    border: 1px solid transparent;
    transition: all 0.15s;
    user-select: none;
    background: transparent;
}

.radar-legend .legend-item:hover {
    background: var(--surface-3);
    color: var(--text-hi);
}

.radar-legend .legend-item.active {
    background: var(--surface-3);
    color: var(--text-hi);
    border-color: var(--line-strong);
}

.radar-legend .legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.radar-legend .legend-dot.go { background: var(--go); box-shadow: 0 0 5px var(--go-glow); }
.radar-legend .legend-dot.caution { background: var(--caution); box-shadow: 0 0 5px var(--caution-glow); }
.radar-legend .legend-dot.off { background: var(--alert); box-shadow: 0 0 5px var(--alert-glow); }

/* Priority Attention Queue */
.priority-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feed-item {
    background: var(--surface-1);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-card, 8px);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.15s ease;
}

.feed-item:hover {
    border-color: var(--line-strong);
    background: var(--surface-3);
}

.feed-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feed-badge {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}

.feed-badge.alert {
    background: var(--alert-fill);
    color: var(--alert-ink);
    border: 1px solid rgba(244, 63, 94, 0.3);
}

.feed-badge.warn {
    background: var(--caution-fill);
    color: var(--caution-ink);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.feed-badge.update {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.feed-content h4 {
    font-size: 13px;
    color: var(--text-hi);
    font-weight: 600;
    margin: 0;
}

.feed-content p {
    font-size: 11.5px;
    color: var(--dim);
    margin: 2px 0 0;
}

.feed-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Slide-Over Drawers */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 11, 0.78);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: none;
}

.drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(560px, 92vw);
    height: 100vh;
    background: var(--surface-2);
    border-left: 1px solid var(--line-strong);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.65);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-overlay.open .drawer {
    transform: translateX(0);
}

.drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line-hair);
    background: var(--surface-1);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.drawer-title-wrap h3 {
    font-size: 18px;
    color: var(--text-hi);
    font-weight: 700;
    margin: 0;
}

.drawer-title-wrap a {
    color: #38bdf8;
    font-size: 12px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

/* .drawer-close, .drawer-close-btn and .operation-modal-close were three
   near-identical square close buttons. All three are now
   `.btn .btn-icon .btn-secondary` in the markup. */

.drawer-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.drawer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.drawer-card {
    background: var(--surface-1);
    border: 1px solid var(--line-hair);
    border-radius: 8px;
    padding: 12px 14px;
}

.drawer-card-label {
    font-size: 10px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dim);
    margin-bottom: 4px;
}

.drawer-card-val {
    font-size: 14px;
    color: var(--text-hi);
    font-weight: 600;
    margin-bottom: 2px;
}

.drawer-section-title {
    font-size: 11px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dim);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--line-hair);
    background: var(--surface-1);
    display: flex;
    gap: 10px;
}

/* Quiet Footer Telemetry Strip */
.telemetry-strip {
    background: var(--surface-2);
    border: 1px solid var(--line-hair);
    border-radius: 8px;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    color: var(--dim);
    margin-top: 24px;
}

.telemetry-group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.telemetry-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.telemetry-item span.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--go);
}

.telemetry-item span.dot.alert {
    background: var(--alert);
    box-shadow: 0 0 6px var(--alert-glow);
}

/* ══════════════════════════════════════════════════════════════════════
   FLEET DIRECTORY TOOLBAR & FILTERS
   ══════════════════════════════════════════════════════════════════════ */
.table-toolbar {
    padding: 14px var(--s-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line-hair);
    background: var(--surface-1);
    flex-wrap: wrap;
    gap: 12px;
}

.search-box {
    position: relative;
    width: 280px;
    max-width: 100%;
}

.search-box input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--line-hair);
    border-radius: 8px;
    padding: 7px 12px 7px 32px;
    color: var(--text-hi);
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-box input:focus {
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.18);
}

.search-box svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    fill: var(--dim);
    pointer-events: none;
}

.table-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--line-hair);
    color: var(--dim);
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-mono, 'DM Mono', monospace);
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--surface-2);
    color: var(--text-hi);
    border-color: var(--line-strong);
}

.site-cell {
    display: flex;
    flex-direction: column;
}

.site-cell strong {
    color: var(--text-hi);
    font-weight: 600;
}

.site-cell span {
    font-size: 11px;
    color: var(--dim);
    font-family: var(--font-mono, 'DM Mono', monospace);
}

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.badge-status.connected {
    color: var(--go);
    background: rgba(43, 208, 164, 0.12);
}

.badge-status.down {
    color: var(--alert);
    background: rgba(244, 63, 94, 0.12);
}

.badge-status.stale {
    color: var(--caution);
    background: rgba(245, 158, 11, 0.12);
}

.updates-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-2);
    border: 1px solid var(--line-hair);
    padding: 2px 8px;
    border-radius: 9999px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: 11px;
    color: var(--dim);
}

.updates-pill.has-updates {
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--caution-ink, #fde68a);
    background: rgba(245, 158, 11, 0.12);
}

.action-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* Hide duplicate fleet link inside drawer since drawer footer has primary link */
.drawer-body .uptime-fleet-link {
    display: none;
}

/* ==========================================================================
   Site Detail Redesign: Subtab Navigation & Health/Settings Layouts
   ========================================================================== */
.subtab-nav {
    display: flex;
    gap: 6px;
    align-items: center;
    border-bottom: 1px solid var(--line, #1c2b42);
    padding-bottom: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.subtab-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--dim, #6e8297);
    padding: 7px 14px;
    border-radius: var(--radius-sm, 6px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}

.subtab-btn:hover {
    color: var(--hi, #f1f7fb);
    background: var(--surface-1, #0e1724);
    border-color: var(--line-hair, #192638);
}

.subtab-btn.active {
    background: var(--surface-2, #121c2d);
    color: var(--brand, #38bdf8);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.1);
}

.settings-pane {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.health-scorecard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.health-scorecard {
    background: linear-gradient(180deg, var(--surface-1, #0e1724), var(--surface-0, #0a1119));
    border: 1px solid var(--line, #18253a);
    border-radius: var(--radius-md, 10px);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.health-scorecard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.health-scorecard-facts {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   SITE DETAIL COMMAND DECK HUD & TELEMETRY
   ══════════════════════════════════════════════════════════════════════ */

.site-hud {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 38%),
        linear-gradient(135deg, var(--surface-2), var(--surface-1) 74%);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px 26px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-panel);
    margin-bottom: var(--s-4);
}

.site-hud::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--info-line), var(--go), transparent);
    opacity: 0.8;
}

.hud-main-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.hud-identity {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    /* Without this the row cannot shrink below its min-content width, and
       .site-hud's `overflow: hidden` clips the overflow silently rather than
       scrolling it -- the status, server pill and environment badge simply
       vanished off the right edge on a phone. */
    min-width: 0;
}

.site-avatar {
    width: 52px;
    height: 52px;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--cyan);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.15);
    flex-shrink: 0;
    text-transform: uppercase;
}

.site-info-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.site-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.site-title-line h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-hi);
    letter-spacing: -0.01em;
    margin: 0;
}

.env-badge {
    font-size: 10.5px;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--r-sm);
    background: rgba(56, 189, 248, 0.12);
    color: var(--cyan);
    border: 1px solid rgba(56, 189, 248, 0.3);
}

.client-pill,
.server-pill {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--surface-2);
    border: 1px solid var(--line-hair);
    color: var(--dim);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.client-pill b {
    color: var(--text-2);
}

.server-pill {
    font-family: var(--font-mono);
}

.site-url-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    color: var(--dim);
    flex-wrap: wrap;
    min-width: 0;
}

/* The avatar beside a wrapping identity block leaves the text a very narrow
   column, so stack them once there is no room for both. */
@media (max-width: 560px) {
    .hud-identity {
        flex-direction: column;
        gap: 12px;
    }
}

.site-url-line a {
    color: var(--cyan);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.site-url-line a:hover {
    text-decoration: underline;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px currentColor;
}

.status-dot.connected {
    background: var(--go);
    color: var(--go);
}

.status-dot.warning,
.status-dot.needs_attention {
    background: var(--caution);
    color: var(--caution);
}

.status-dot.alert,
.status-dot.disconnected,
.status-dot.revoked {
    background: var(--red);
    color: var(--red);
}

/* HUD Quick Action Buttons */
.hud-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.maint-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--dim);
    font: 600 12px var(--font-ui);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.maint-toggle-btn:hover {
    border-color: var(--info-line);
    color: var(--text-hi);
}

.maint-toggle-btn.active {
    background: var(--caution-fill);
    border-color: var(--caution);
    color: var(--caution-ink);
}

.maint-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}

.maint-toggle-btn.active .maint-indicator {
    background: var(--caution);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* HUD Telemetry Metric Strip */
.hud-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line-hair);
}

.telemetry-card {
    background: rgba(14, 23, 36, 0.6);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    transition: border-color var(--dur-fast) var(--ease);
}

.telemetry-card:hover {
    border-color: var(--line-strong);
}

.telemetry-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.telemetry-value {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-hi);
    font-family: var(--font-mono);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.telemetry-sub {
    font-size: 11px;
    color: var(--muted);
    font-family: var(--font-ui);
}

.telemetry-sub.good {
    color: var(--go-ink);
}

.telemetry-sub.warn {
    color: var(--caution-ink);
}

.telemetry-sub.alert {
    color: var(--red);
}

/* Vitals Pills Row below HUD */
.vitals-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: var(--surface-0);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-md);
    font-size: 12px;
    color: var(--dim);
    font-family: var(--font-mono);
    margin-bottom: var(--s-4);
}

.vital-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vital-chip b {
    color: var(--text-hi);
    font-weight: 600;
}

.vital-divider {
    color: var(--line-strong);
}

/* Audit stream inside Overview tab right column */
.audit-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
}

.audit-item {
    border-bottom: 1px solid var(--line-hair);
    padding-bottom: 8px;
}

.audit-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.audit-item-title {
    color: var(--text-hi);
    font-weight: 600;
}

.audit-item-meta {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11px;
    margin-top: 2px;
}

/* ========================================================
   SITE DETAIL: UPDATES / SOFTWARE TAB & DATA TABLES
   ======================================================== */
.panel-card {
    background: var(--surface-0);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    box-shadow: var(--shadow-panel);
    margin-bottom: 20px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 16px;
    flex-wrap: wrap;
}

.panel-header-title {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.panel-eyebrow {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--dim);
    margin: 0;
}

.panel-header-title h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-hi);
    margin: 0;
}

.panel-subtitle {
    font-size: 12px;
    color: var(--dim);
}

.update-telemetry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.update-telemetry-card {
    background: var(--surface-1);
    border: 1px solid var(--line-hair);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all var(--dur-fast) var(--ease);
}

.update-telemetry-card:hover {
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.update-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.update-card-count {
    font-size: 22px;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-hi);
    line-height: 1;
}

.update-telemetry-card--total .update-card-count {
    color: var(--info);
}

.update-telemetry-card--abandoned .update-card-count {
    color: var(--off);
}

.update-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--dim);
    margin: 2px 0 0;
}

.update-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line-hair);
    gap: 6px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.data-table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--dim);
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-strong);
    background: rgba(14, 23, 36, 0.4);
}

.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-hair);
    color: var(--text-2);
    vertical-align: middle;
}

.data-table tr:hover td {
    background: rgba(24, 37, 58, 0.4);
}

.badge.info {
    --bdg: var(--info);
    background: var(--info-fill);
    color: var(--info-ink);
    border: 1px solid var(--info-line);
}

.badge.warn {
    --bdg: var(--caution);
    background: var(--caution-fill);
    color: var(--caution-ink);
    border: 1px solid var(--caution-line);
}

.badge.alert {
    --bdg: var(--off);
    background: var(--off-fill);
    color: var(--off-ink);
    border: 1px solid var(--off-line);
}

.badge.muted {
    --bdg: var(--dim);
    background: var(--surface-2);
    color: var(--dim);
    border: 1px solid var(--line-hair);
}

.badge.good {
    --bdg: var(--go);
    background: var(--go-fill);
    color: var(--go-ink);
    border: 1px solid var(--go-line);
}

.update-telemetry-card .badge::before,
.panel-card .badge::before,
.data-table .badge::before {
    display: none;
}

/* Status and email controls share the console's spacing and state colors. */
.status-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--r-md); color: var(--go-ink); background: var(--go-fill); font: 600 11px/1.5 var(--font-mono); letter-spacing: .04em; }
.status-badge.status-alert-trigger { color: var(--caution-ink); background: var(--caution-fill); }
.email-delivery-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin-top: var(--s-4); min-width: 0; }
.email-delivery-page > .panel + .panel { margin-top: 0; }
.email-delivery-page .panel-head { flex-wrap: wrap; gap: 16px; }
.email-delivery-page .panel-head > div { flex: 1 1 280px; min-width: 0; }
.email-settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.email-settings-form > .btn { justify-self: start; }
.email-field-group { grid-column: 1 / -1; min-width: 0; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.email-field-group legend { padding: 0 6px; }
.email-provider-list { display: grid; gap: 12px; }
.email-provider { border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.email-provider > summary { cursor: pointer; padding: 16px; }
.email-provider > form { padding: 0 16px 16px; }
.email-pagination, .email-oauth { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.email-pagination .pager { margin: 0; }
.email-delivery-page > .panel { min-width: 0; }
.email-delivery-page table { min-width: 760px; }
.email-delivery-page th, .email-delivery-page td { white-space: nowrap; }
.email-delivery-page .details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; }
.email-delivery-page .details-grid dd { margin: 6px 0 0; overflow-wrap: anywhere; }
.email-pagination nav { min-width: 0; }
.email-pagination .pager { flex-wrap: wrap; }
@media (max-width: 600px) { .email-delivery-page .details-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .email-settings-fields { grid-template-columns: minmax(0, 1fr); } .email-delivery-page > .panel { padding: 16px; } .email-pagination { gap: 8px; } }

/* These overrides follow the later desktop card rules so mobile insets win. */
.panel-head { gap: 16px; flex-wrap: wrap; }
.panel-head > div { min-width: 0; }
.update-hold-options { display: grid; gap: 10px; max-height: 280px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 560px) { .panel-card { padding: 16px; } }