/* ============================================================================
   SRVCheck design tokens.
   Load order: bootstrap.min.css -> bootstrap-icons -> tokens.css -> app.css

   FOUR RULES, and the design stops working if any is broken:

   1. A literal colour may appear ONLY inside the :root or [data-bs-theme="dark"]
      block below. Nowhere else in this file, and nowhere in app.css.
   2. Every token is defined in BOTH blocks, even where the value is identical,
      so the next person cannot forget one.
   3. Light tokens live on :root, not [data-bs-theme="light"]. page_error() can
      render before the theme script has run, and :root is the safe default;
      the dark block wins whenever the attribute is present.
   4. RED ENCODES MACHINE STATE ONLY - never affordance, never destructiveness
      at rest. The whole system depends on red being rare: one stray .btn-danger
      on a form-validation error spends the entire budget, and the failure is
      invisible. The page still looks fine, it just stops working as an
      instrument. Delete buttons are ghost buttons; they turn red on hover only.

   No @layer (Bootstrap ships unlayered and unlayered beats layered regardless
   of order - that one line would no-op this entire file). No
   @media (prefers-color-scheme) - it desyncs from data-bs-theme. No
   color-mix() - every alpha here is a literal rgba() inside a theme block.

   On !important: Bootstrap declares its colour utilities (.text-*, .bg-*,
   .border-*, .text-bg-*) as !important, so remapping them requires it too.
   That is forced. What is NOT permitted is !important on a layout or spacing
   property — reach for specificity there instead.
   ========================================================================== */

/* --- Typeface -------------------------------------------------------------
   System-first on purpose. If inter-var-latin.woff2 404s on a bad deploy, or
   the woff2 MIME type is missing, macOS and Windows never requested it and
   NOTHING happens. Inter exists for Linux desktops, where DejaVu/Liberation
   make tabular figures a coin flip. No <link rel=preload>: preloading a font
   the majority never request wastes 48 KB on a page that reloads every 30s. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

:root {
  /* --- surfaces --------------------------------------------------------- */
  --sc-bg:            #F4F5F7;
  --sc-surface:       #FFFFFF;
  --sc-surface-2:     #F9FAFB;
  --sc-surface-3:     #EDEEF2;
  --sc-hover:         #F5F6F8;
  --sc-line:          #E3E5EA;
  --sc-line-strong:   #CDD0D7;
  --sc-nav-bg:        #1C1F25;
  --sc-nav-line:      #2A2E36;
  --sc-nav-fg:        #F1F3F5;
  --sc-nav-fg-muted:  #A2A9B3;
  --sc-nav-hover:     rgba(255,255,255,.06);
  --sc-nav-chip:        rgba(255,255,255,.07);
  --sc-nav-chip-line:   rgba(255,255,255,.09);
  --sc-nav-chip-hover:  rgba(255,255,255,.14);
  --sc-nav-chip-hover-line: rgba(255,255,255,.20);
  --sc-nav-chip-active: rgba(255,255,255,.18);
  --sc-admin-nav:     #4C2A8C;
  --sc-admin-nav-line:#5E39A3;

  /* --- ink -------------------------------------------------------------- */
  --sc-text:          #15171C;
  --sc-text-2:        #545963;
  --sc-text-3:        #616671;

  /* --- accent: fill and ink are different colours, deliberately ---------- */
  --sc-accent:        #2457D6;
  --sc-accent-hover:  #1E4BBC;
  --sc-accent-active: #193F9E;
  --sc-accent-ink:    #1E4BBC;
  --sc-accent-tint:   #EBF0FB;
  --sc-accent-line:   #C9D8F5;
  --sc-accent-rgb:    36, 87, 214;

  /* --- machine state ----------------------------------------------------- */
  --sc-ok:            #248A3D;  --sc-ok-ink:   #177245;
  --sc-ok-tint:       #E9F5EE;  --sc-ok-line:  #CBE7D6;
  --sc-warn:          #A96A00;  --sc-warn-ink: #8F5700;
  --sc-warn-tint:     #FBF1E3;  --sc-warn-line:#EFDCBC;
  --sc-fire:          #DE3226;  --sc-fire-ink: #C11225;
  --sc-fire-tint:     #FDF2F1;  --sc-fire-line:#F3D5D3;
  --sc-fire-tint-hover: #FAE6E4;
  --sc-off:           #8A8F99;  --sc-off-ink:  #616671;
  --sc-off-tint:      #F0F0F2;  --sc-off-line: #E1E1E5;

  /* --- meters: HEALTHY IS NEUTRAL. Only a breach is coloured. ------------ */
  --sc-meter-track:   #EDEEF2;
  --sc-meter-ok:      #616671;
  --sc-meter-warn:    #A96A00;
  --sc-meter-crit:    #DE3226;

  /* rgb triples for Bootstrap's utility bridge. Its .text-*, .bg-*, .border-*
     and .text-bg-* utilities are all built as rgba(var(--bs-<name>-rgb), …),
     so these are what make those classes speak the palette. Keep each in step
     with the hex above it. */
  --sc-ok-ink-rgb:     23, 114, 69;
  --sc-warn-ink-rgb:  143,  87,  0;
  --sc-fire-ink-rgb:  193,  18, 37;
  --sc-accent-ink-rgb: 30,  75, 188;
  --sc-surface-3-rgb: 237, 238, 242;
  --sc-text-rgb:       21,  23,  28;
  /* Links darken on hover in light, lighten in dark — both directions are
     "more prominent", which is the point. */
  --sc-link-hover-rgb: 25, 63, 158;

  /* --- elevation: the hairline IS the first shadow layer ------------------ */
  --sc-sh-1: 0 0 0 1px rgba(21,23,28,.055), 0 1px 2px rgba(21,23,28,.04);
  --sc-sh-2: 0 0 0 1px rgba(21,23,28,.055), 0 1px 2px rgba(21,23,28,.05),
             0 4px 12px -2px rgba(21,23,28,.06);
  --sc-sh-3: 0 0 0 1px rgba(21,23,28,.06),  0 2px 6px rgba(21,23,28,.05),
             0 8px 24px -6px rgba(21,23,28,.10);
  --sc-sh-4: 0 0 0 1px rgba(21,23,28,.07),  0 8px 20px -8px rgba(21,23,28,.12),
             0 24px 64px -16px rgba(21,23,28,.22);
  --sc-ring:      0 0 0 3px rgba(36,87,214,.24);
  --sc-halo-ok:   0 0 0 3px rgba(36,138,61,.16);
  --sc-halo-warn: 0 0 0 3px rgba(169,106,0,.18);
  --sc-halo-fire: 0 0 0 3px rgba(222,50,38,.18);

  /* --- charts ------------------------------------------------------------ */
  --sc-chart-grid:   rgba(21,23,28,.07);
  --sc-chart-axis:   rgba(21,23,28,.12);
  --sc-chart-fill:   0.18;
  --sc-tooltip-bg:   #24282F;
  --sc-tooltip-fg:   #FFFFFF;
  --sc-tooltip-fg-2: #C3C8D0;
  --sc-series-1: #2457D6; --sc-series-2: #7A3FBF; --sc-series-3: #0F7C8A;
  --sc-series-4: #B03A86; --sc-series-5: #1F6FA8; --sc-series-6: #5A6172;
  --sc-series-temp: #8F5700;
  /* Sequential ramp for the stacked disk chart — interpolated to N stops. */
  --sc-seq-from: #6B8ACE; --sc-seq-to: #16255C;

  /* --- terminal well: dark in BOTH themes, on purpose --------------------- */
  --sc-term-bg:     #16181D;
  --sc-term-fg:     #E6E9EE;
  --sc-term-line:   #2A2E36;
  --sc-term-accent: #9AD8E8;

  /* --- geometry ---------------------------------------------------------- */
  --sc-r-xs: 4px;  --sc-r-sm: 6px;  --sc-r-md: 8px;
  --sc-r-lg: 10px; --sc-r-xl: 12px; --sc-r-2xl: 16px; --sc-r-pill: 999px;

  /* --- motion ------------------------------------------------------------ */
  --sc-ease:     cubic-bezier(.4,0,.2,1);
  --sc-ease-out: cubic-bezier(.16,1,.3,1);
  --sc-d1:  90ms; --sc-d2: 120ms; --sc-d3: 180ms; --sc-d4: 240ms;

  /* --- type -------------------------------------------------------------- */
  --sc-font-sans:
    -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Text", "Segoe UI",
    "InterVariable",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    Menlo, Consolas, "Liberation Mono", monospace;
}

[data-bs-theme="dark"] {
  /* Dark is DESIGNED, not inverted. Note which relationships reverse: the page
     is DARKER than its surfaces; hairlines become highlights; elevation is a
     lighter surface plus a brighter ring, not a drop shadow; state tints are
     mixed at ~14% because 6.5% red over black is invisible while 14% red over
     white would be a pink slab. */
  --sc-bg:            #0A0B0E;
  --sc-surface:       #16181D;
  --sc-surface-2:     #1C1F25;
  --sc-surface-3:     #24282F;
  --sc-hover:         #1E2128;
  --sc-line:          #2A2E36;
  --sc-line-strong:   #3A3F48;
  --sc-nav-bg:        #101217;
  --sc-nav-line:      #23272E;
  --sc-nav-fg:        #F1F3F5;
  --sc-nav-fg-muted:  #A2A9B3;
  --sc-nav-hover:     rgba(255,255,255,.07);
  --sc-nav-chip:        rgba(255,255,255,.06);
  --sc-nav-chip-line:   rgba(255,255,255,.10);
  --sc-nav-chip-hover:  rgba(255,255,255,.13);
  --sc-nav-chip-hover-line: rgba(255,255,255,.20);
  --sc-nav-chip-active: rgba(255,255,255,.17);
  --sc-admin-nav:     #2E1B57;
  --sc-admin-nav-line:#3F2775;

  --sc-text:          #F1F3F5;
  --sc-text-2:        #A2A9B3;
  --sc-text-3:        #8B929C;

  --sc-accent:        #2C6BE0;
  --sc-accent-hover:  #3B7BEF;
  --sc-accent-active: #245CC4;
  --sc-accent-ink:    #6FA8FF;
  --sc-accent-tint:   #1A2740;
  --sc-accent-line:   #2C4470;
  --sc-accent-rgb:    44, 107, 224;

  --sc-ok:            #30D158;  --sc-ok-ink:   #4ADE80;
  --sc-ok-tint:       #1A3225;  --sc-ok-line:  #2C5638;
  --sc-warn:          #FF9F0A;  --sc-warn-ink: #FFB340;
  --sc-warn-tint:     #372B1A;  --sc-warn-line:#5A431F;
  --sc-fire:          #FF453A;  --sc-fire-ink: #FF6961;
  --sc-fire-tint:     #371E21;  --sc-fire-line:#5A2C29;
  --sc-fire-tint-hover: #43252A;
  --sc-off:           #8E8E93;  --sc-off-ink:  #A1A1A6;
  --sc-off-tint:      #222429;  --sc-off-line: #3A3A3C;

  --sc-meter-track:   #24282F;
  --sc-meter-ok:      #8B929C;
  --sc-meter-warn:    #FF9F0A;
  --sc-meter-crit:    #FF453A;

  --sc-ok-ink-rgb:     74, 222, 128;
  --sc-warn-ink-rgb:  255, 179,  64;
  --sc-fire-ink-rgb:  255, 105,  97;
  --sc-accent-ink-rgb:111, 168, 255;
  --sc-surface-3-rgb:  36,  40,  47;
  --sc-text-rgb:      241, 243, 245;
  --sc-link-hover-rgb:154, 196, 255;

  --sc-sh-1: 0 0 0 1px rgba(255,255,255,.07);
  --sc-sh-2: 0 0 0 1px rgba(255,255,255,.07),
             inset 0 1px 0 rgba(255,255,255,.035), 0 1px 2px rgba(0,0,0,.5);
  --sc-sh-3: 0 0 0 1px rgba(255,255,255,.09),
             inset 0 1px 0 rgba(255,255,255,.04), 0 12px 32px -8px rgba(0,0,0,.70);
  --sc-sh-4: 0 0 0 1px rgba(255,255,255,.10),
             inset 0 1px 0 rgba(255,255,255,.05), 0 32px 80px -16px rgba(0,0,0,.85);
  --sc-ring:      0 0 0 3px rgba(111,168,255,.30);
  --sc-halo-ok:   0 0 0 3px rgba(48,209,88,.18);
  --sc-halo-warn: 0 0 0 3px rgba(255,159,10,.20);
  --sc-halo-fire: 0 0 0 3px rgba(255,69,58,.22);

  --sc-chart-grid:   rgba(255,255,255,.07);
  --sc-chart-axis:   rgba(255,255,255,.12);
  --sc-chart-fill:   0.14;
  --sc-tooltip-bg:   #24282F;
  --sc-tooltip-fg:   #FFFFFF;
  --sc-tooltip-fg-2: #C3C8D0;
  --sc-series-1: #6FA8FF; --sc-series-2: #BE9BFF; --sc-series-3: #3FCEDB;
  --sc-series-4: #FF8FC4; --sc-series-5: #9AA6FF; --sc-series-6: #A6AEBC;
  --sc-series-temp: #FFB340;
  --sc-seq-from: #3B62C4; --sc-seq-to: #BBD6FF;

  --sc-term-bg:     #0E1013;
  --sc-term-fg:     #E6E9EE;
  --sc-term-line:   #23272E;
  --sc-term-accent: #9AD8E8;

  --sc-r-xs: 4px;  --sc-r-sm: 6px;  --sc-r-md: 8px;
  --sc-r-lg: 10px; --sc-r-xl: 12px; --sc-r-2xl: 16px; --sc-r-pill: 999px;

  --sc-ease:     cubic-bezier(.4,0,.2,1);
  --sc-ease-out: cubic-bezier(.16,1,.3,1);
  --sc-d1:  90ms; --sc-d2: 120ms; --sc-d3: 180ms; --sc-d4: 240ms;

  --sc-font-sans:
    -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Text", "Segoe UI",
    "InterVariable",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
    Menlo, Consolas, "Liberation Mono", monospace;
}

/* ============================================================================
   THE BOOTSTRAP BRIDGE
   Global --bs-* variables. Components that scope their own variables INSIDE
   the component class (.card sets --bs-card-bg on itself, so a :root override
   never reaches it) are handled in the component layer further down.
   ========================================================================== */
:root,
[data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--sc-font-sans);
  --bs-font-monospace:  var(--sc-font-mono);
  --bs-body-font-family: var(--sc-font-sans);
  --bs-body-font-size:   .9375rem;
  --bs-body-line-height: 1.55;

  --bs-body-bg:          var(--sc-bg);
  --bs-body-bg-rgb:      244, 245, 247;
  --bs-body-color:       var(--sc-text);
  --bs-emphasis-color:   var(--sc-text);
  --bs-secondary-color:  var(--sc-text-2);
  --bs-tertiary-color:   var(--sc-text-3);
  --bs-heading-color:    var(--sc-text);

  --bs-secondary-bg:     var(--sc-surface-3);
  --bs-tertiary-bg:      var(--sc-surface-2);

  --bs-border-color:            var(--sc-line);
  --bs-border-color-translucent: var(--sc-line);
  --bs-border-radius:    var(--sc-r-md);
  --bs-border-radius-sm: var(--sc-r-sm);
  --bs-border-radius-lg: var(--sc-r-lg);
  --bs-border-radius-xl: var(--sc-r-xl);

  --bs-primary:      var(--sc-accent);
  --bs-primary-rgb:  var(--sc-accent-rgb);

  /* Bootstrap colours anchors from the *rgb* variable, not the named one:
     a { color: rgba(var(--bs-link-color-rgb), …) }. Setting --bs-link-color
     alone does nothing, and pointing the rgb at the accent FILL rather than the
     accent INK dropped dark-mode links to 4.02:1. Ink, in both directions. */
  --bs-link-color-rgb:       var(--sc-accent-ink-rgb);
  --bs-link-hover-color-rgb: var(--sc-link-hover-rgb);
  --bs-code-color:       var(--sc-accent-ink);

  /* The semantic utilities — .text-danger, .bg-info, .border-warning,
     .text-bg-success and friends — all resolve through these. Without them the
     whole family renders stock Bootstrap against this palette: #ffc107 on white
     measures 1.64:1, which is how an admin counter became invisible. */
  --bs-danger-rgb:   var(--sc-fire-ink-rgb);
  --bs-warning-rgb:  var(--sc-warn-ink-rgb);
  --bs-success-rgb:  var(--sc-ok-ink-rgb);
  --bs-info-rgb:     var(--sc-accent-ink-rgb);
  --bs-light-rgb:    var(--sc-surface-3-rgb);
  --bs-dark-rgb:     var(--sc-text-rgb);
  --bs-danger:       var(--sc-fire-ink);
  --bs-warning:      var(--sc-warn-ink);
  --bs-success:      var(--sc-ok-ink);
  --bs-info:         var(--sc-accent-ink);
  --bs-focus-ring-color: rgba(var(--sc-accent-rgb), .24);
  --bs-focus-ring-width: 3px;
}
[data-bs-theme="dark"] { --bs-body-bg-rgb: 10, 11, 14; }

/* ============================================================================
   BASE
   ========================================================================== */
body {
  background-color: var(--sc-bg);
  color: var(--sc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { letter-spacing: -.012em; }
h1, .h1 { font-weight: 620; letter-spacing: -.018em; }
h2, .h2 { font-weight: 600; }
h3, .h3, h4, .h4, h5, .h5 { font-weight: 600; }

/* Marketing and auth get a larger, more generous register than the app.
   Free: layout.php already emits <body class="chrome-app|auth|public|admin">. */
.chrome-public, .chrome-auth { --bs-body-font-size: 1rem; --bs-body-line-height: 1.65; }
.chrome-public .lead { font-size: 1.1875rem; line-height: 1.55; }
.chrome-public main.container { max-width: 1120px; }
.chrome-app main.container { max-width: 1240px; }

/* Tier 1 numerals: anything in a column that refreshes. cv05 gives the tailed
   l so web-01 cannot be read as web-0l. */
.table td, .table th, .badge, .srv-val, .srv-metric-val, .plan-price,
.sysinfo-grid, .sc-fig-value, [id^="stats-"], [id^="total-"], .progress,
input[type="number"], time, .tabular {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
}
/* Tier 2: a human is about to retype this, so add the slashed zero. */
.install-cmd, .secret-once, code, kbd, pre {
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Uppercase caption, used for thead, card headers and metric labels. */
.sc-caption {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sc-text-3);
}

/* ============================================================================
   FOCUS - one visible treatment everywhere, never removed
   ========================================================================== */
:focus-visible { outline: 2px solid var(--sc-accent-ink); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus,
.form-check-input:focus { box-shadow: var(--sc-ring); }
/* Bootstrap kills the outline on .nav-link and substitutes a hardcoded blue
   glow, which composited against the dark masthead measured 1.31:1 — no
   perceptible focus ring on the primary navigation. Higher specificity than
   Bootstrap's .nav-link:focus-visible, so this is the one that lands. */
.navbar .nav-link:focus-visible, .nav .nav-link:focus-visible {
  outline: 2px solid var(--sc-accent-ink);
  outline-offset: -1px;
  box-shadow: none;
}

/* ============================================================================
   COMPONENT LAYER
   Bootstrap 5.3 scopes many variables inside the component class, so these
   must be re-declared on the component, not on :root.
   ========================================================================== */

/* --- card --------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--sc-surface);
  --bs-card-color: var(--sc-text);
  /* A real 1px border, coloured transparent: the visible hairline comes from
     the box-shadow below. Zero width would make .border-danger and friends
     no-ops, because those utilities set only border-COLOR — which is how six
     "danger zone" and "shown once" cards silently lost their outline. */
  --bs-card-border-color: transparent;
  --bs-card-border-width: 1px;
  --bs-card-border-radius: var(--sc-r-lg);
  --bs-card-inner-border-radius: var(--sc-r-lg);
  --bs-card-cap-bg: var(--sc-surface-2);
  --bs-card-cap-color: var(--sc-text);
  --bs-card-spacer-x: 1.125rem;
  --bs-card-spacer-y: 1.125rem;
  --bs-card-cap-padding-x: 1.125rem;
  --bs-card-cap-padding-y: .7rem;
  box-shadow: var(--sc-sh-1);
}
/* .shadow-sm appears on 47 cards; neutralise Bootstrap's so ours is the one
   that renders, without editing 47 templates. */
.card.shadow-sm { box-shadow: var(--sc-sh-1) !important; }
.card-header {
  border-bottom: 1px solid var(--sc-line);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sc-text-3);
}
/* The header sets uppercase + tracking; anything interactive inside it opts
   back out, or the segmented range control renders as spaced-out capitals. */
.card-header .badge, .card-header .btn,
.card-header .range-group, .card-header .range-btn,
.card-header .form-select, .card-header .form-control {
  letter-spacing: 0; text-transform: none;
}
.card-footer { background: var(--sc-surface-2); border-top: 1px solid var(--sc-line); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  --bs-btn-border-radius: var(--sc-r-sm);
  --bs-btn-font-weight: 550;
  --bs-btn-padding-x: .85rem;
  --bs-btn-padding-y: .4rem;
  --bs-btn-font-size: .875rem;
  transition: background-color var(--sc-d2) var(--sc-ease),
              border-color var(--sc-d2) var(--sc-ease),
              color var(--sc-d2) var(--sc-ease);
}
.btn-sm { --bs-btn-padding-x: .6rem; --bs-btn-padding-y: .25rem; --bs-btn-font-size: .8125rem; }
.btn-lg { --bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: .6rem; --bs-btn-font-size: 1rem; }

.btn-primary {
  --bs-btn-bg: var(--sc-accent);            --bs-btn-border-color: var(--sc-accent);
  --bs-btn-hover-bg: var(--sc-accent-hover);--bs-btn-hover-border-color: var(--sc-accent-hover);
  --bs-btn-active-bg: var(--sc-accent-active);--bs-btn-active-border-color: var(--sc-accent-active);
  --bs-btn-disabled-bg: var(--sc-accent);   --bs-btn-disabled-border-color: var(--sc-accent);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--sc-accent-ink);      --bs-btn-border-color: var(--sc-accent-line);
  --bs-btn-hover-bg: var(--sc-accent-tint);  --bs-btn-hover-border-color: var(--sc-accent);
  --bs-btn-hover-color: var(--sc-accent-ink);
  --bs-btn-active-bg: var(--sc-accent-tint); --bs-btn-active-color: var(--sc-accent-ink);
  --bs-btn-active-border-color: var(--sc-accent);
}
/* Used 31 times. On dark this measured 3.29:1 before - below AA. */
.btn-outline-secondary {
  --bs-btn-color: var(--sc-text-2);        --bs-btn-border-color: var(--sc-line-strong);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--sc-surface-3);  --bs-btn-hover-border-color: var(--sc-line-strong);
  --bs-btn-hover-color: var(--sc-text);
  --bs-btn-active-bg: var(--sc-surface-3); --bs-btn-active-color: var(--sc-text);
  --bs-btn-active-border-color: var(--sc-line-strong);
  --bs-btn-disabled-color: var(--sc-text-3); --bs-btn-disabled-border-color: var(--sc-line);
}
.btn-secondary {
  --bs-btn-bg: var(--sc-surface-3);        --bs-btn-border-color: var(--sc-line-strong);
  --bs-btn-color: var(--sc-text);
  --bs-btn-hover-bg: var(--sc-line);       --bs-btn-hover-border-color: var(--sc-line-strong);
  --bs-btn-hover-color: var(--sc-text);
  --bs-btn-active-bg: var(--sc-line);      --bs-btn-active-color: var(--sc-text);
}
/* Destructive is NOT red at rest - see rule 4 at the top of this file. It
   commits to red only on hover, when the pointer is already on the target. */
.btn-danger {
  --bs-btn-bg: transparent;                  --bs-btn-border-color: var(--sc-line-strong);
  --bs-btn-color: var(--sc-text-2);
  --bs-btn-hover-bg: var(--sc-fire);         --bs-btn-hover-border-color: var(--sc-fire);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sc-fire);        --bs-btn-active-border-color: var(--sc-fire);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: var(--sc-text-3); --bs-btn-disabled-border-color: var(--sc-line);
  --bs-btn-disabled-bg: transparent;
}
.btn-outline-danger {
  --bs-btn-color: var(--sc-text-2);           --bs-btn-border-color: var(--sc-line-strong);
  --bs-btn-hover-bg: var(--sc-fire);          --bs-btn-hover-border-color: var(--sc-fire);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sc-fire);         --bs-btn-active-border-color: var(--sc-fire);
  --bs-btn-active-color: #fff;
}
.btn-outline-light {
  --bs-btn-color: var(--sc-nav-fg);        --bs-btn-border-color: var(--sc-nav-chip-line);
  --bs-btn-bg: var(--sc-nav-chip);
  --bs-btn-hover-bg: var(--sc-nav-chip-hover);
  --bs-btn-hover-border-color: var(--sc-nav-chip-hover-line);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--sc-nav-chip-active); --bs-btn-active-color: #fff;
}
.btn-link { --bs-btn-color: var(--sc-accent-ink); --bs-btn-hover-color: var(--sc-accent-hover); }
/* Amber that passes contrast on white is brown, so the outline variant uses the
   ink rather than the mark: stock #ffc107 on the page measured 1.50:1 and made
   the console's highest-privilege action effectively invisible in light mode. */
.btn-outline-warning {
  --bs-btn-color: var(--sc-warn-ink);        --bs-btn-border-color: var(--sc-warn-line);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--sc-warn-tint);    --bs-btn-hover-border-color: var(--sc-warn);
  --bs-btn-hover-color: var(--sc-warn-ink);
  --bs-btn-active-bg: var(--sc-warn-tint);   --bs-btn-active-color: var(--sc-warn-ink);
  --bs-btn-active-border-color: var(--sc-warn);
}
/* A solid, high-contrast button for restorative actions sitting on a tinted
   alert — where the neutral ghost border washes out. */
.btn-dark {
  --bs-btn-bg: var(--sc-text);            --bs-btn-border-color: var(--sc-text);
  --bs-btn-color: var(--sc-surface);
  --bs-btn-hover-bg: var(--sc-text-2);    --bs-btn-hover-border-color: var(--sc-text-2);
  --bs-btn-hover-color: var(--sc-surface);
  --bs-btn-active-bg: var(--sc-text-2);   --bs-btn-active-color: var(--sc-surface);
  --bs-btn-active-border-color: var(--sc-text-2);
}
.btn-light {
  --bs-btn-bg: var(--sc-surface-3);       --bs-btn-border-color: var(--sc-line-strong);
  --bs-btn-color: var(--sc-text);
  --bs-btn-hover-bg: var(--sc-line);      --bs-btn-hover-border-color: var(--sc-line-strong);
  --bs-btn-hover-color: var(--sc-text);
}
.btn-success {
  --bs-btn-bg: var(--sc-ok);              --bs-btn-border-color: var(--sc-ok);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--sc-ok-ink);    --bs-btn-hover-border-color: var(--sc-ok-ink);
  --bs-btn-hover-color: #fff;
}
.btn-outline-success {
  --bs-btn-color: var(--sc-ok-ink);       --bs-btn-border-color: var(--sc-ok-line);
  --bs-btn-hover-bg: var(--sc-ok-tint);   --bs-btn-hover-color: var(--sc-ok-ink);
  --bs-btn-hover-border-color: var(--sc-ok);
}
/* Amber at rest is legitimate here: an active maintenance toggle IS machine
   state — this server is muted — which is exactly what the colour budget is
   reserved for. */
.btn-warning {
  --bs-btn-bg: var(--sc-warn-tint);        --bs-btn-border-color: var(--sc-warn-line);
  --bs-btn-color: var(--sc-warn-ink);
  --bs-btn-hover-bg: var(--sc-warn-tint);  --bs-btn-hover-border-color: var(--sc-warn);
  --bs-btn-hover-color: var(--sc-warn-ink);
  --bs-btn-active-bg: var(--sc-warn-tint); --bs-btn-active-color: var(--sc-warn-ink);
  --bs-btn-active-border-color: var(--sc-warn);
}

/* --- forms --------------------------------------------------------------- */
/* Padding is set with LONGHANDS on purpose. The shorthand wiped .form-select's
   2.25rem right gutter, which is the reserved space its chevron is painted
   into as a background-image — the arrow then sat on top of the last few
   characters of every option, in every select in the app. */
.form-control, .form-select {
  background-color: var(--sc-surface);
  border: 1px solid var(--sc-line-strong);
  border-radius: var(--sc-r-sm);
  color: var(--sc-text);
  padding-top: .4rem;
  padding-bottom: .4rem;
  padding-left: .7rem;
  font-size: .875rem;
  transition: border-color var(--sc-d2) var(--sc-ease), box-shadow var(--sc-d2) var(--sc-ease);
}
.form-control { padding-right: .7rem; }
.form-select  { padding-right: 2.25rem; }
/* Bootstrap re-declares -lg only for padding/font-size, and the rule above
   out-specifies nothing — but .form-control above does beat it, so the large
   variant has to be restored explicitly the way -sm is. */
.form-control-lg {
  padding-top: .5rem; padding-bottom: .5rem;
  padding-left: .9rem; padding-right: .9rem;
  font-size: 1.0625rem; border-radius: var(--sc-r-md);
}
.form-control:focus, .form-select:focus {
  background-color: var(--sc-surface);
  border-color: var(--sc-accent);
  color: var(--sc-text);
}
.form-control::placeholder { color: var(--sc-text-3); opacity: 1; }
.form-control:disabled, .form-select:disabled {
  background-color: var(--sc-surface-3); color: var(--sc-text-3); border-color: var(--sc-line);
}
.form-control-sm, .form-select-sm {
  padding-top: .25rem; padding-bottom: .25rem; padding-left: .55rem; font-size: .8125rem;
}
.form-control-sm { padding-right: .55rem; }
.form-select-sm  { padding-right: 1.9rem; background-position: right .5rem center; }
.form-label { font-size: .875rem; font-weight: 500; margin-bottom: .3rem; color: var(--sc-text); }
.form-text { color: var(--sc-text-3); font-size: .8125rem; }
.input-group-text {
  background: var(--sc-surface-2); border-color: var(--sc-line-strong); color: var(--sc-text-2);
}
.form-check-input {
  background-color: var(--sc-surface);
  border-color: var(--sc-line-strong);
}
.form-check-input:checked {
  background-color: var(--sc-accent);
  border-color: var(--sc-accent);
}
.form-check-input:disabled { opacity: .5; }
.form-check-label { color: var(--sc-text); }

/* --- table --------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--sc-text);
  --bs-table-border-color: var(--sc-line);
  --bs-table-hover-bg: var(--sc-hover);
  --bs-table-hover-color: var(--sc-text);
  --bs-table-striped-bg: var(--sc-surface-2);
  font-size: .8125rem;
  margin-bottom: 0;
}
.table > thead > tr > th {
  background: var(--sc-surface-2);
  color: var(--sc-text-3);
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 1px solid var(--sc-line);
  padding: .55rem .75rem;
  white-space: nowrap;
}
.table > tbody > tr > td { padding: .55rem .75rem; border-color: var(--sc-line); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.card > .table-responsive:first-child > .table > thead > tr > th:first-child,
.card > .table > thead > tr > th:first-child { border-top-left-radius: var(--sc-r-lg); }
.card > .table-responsive:first-child > .table > thead > tr > th:last-child,
.card > .table > thead > tr > th:last-child { border-top-right-radius: var(--sc-r-lg); }

/* --- badges -------------------------------------------------------------- */
/* Bootstrap's colour utilities are declared !important, so any remap of them
   must be too — that is where nearly every !important in this file comes from,
   and it is forced rather than chosen. The rule to hold to is narrower than a
   count: NEVER add !important to a layout or spacing property. Those are the
   ones that make a stylesheet impossible to work with later. */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: .5rem;
  --bs-badge-padding-y: .25em;
  --bs-badge-border-radius: var(--sc-r-pill);
  font-size: .6875rem; letter-spacing: .03em;
  border: 1px solid transparent;
}
.badge.text-bg-success, .badge.bg-success {
  background-color: var(--sc-ok-tint) !important; color: var(--sc-ok-ink) !important;
  border-color: var(--sc-ok-line);
}
.badge.text-bg-warning, .badge.bg-warning {
  background-color: var(--sc-warn-tint) !important; color: var(--sc-warn-ink) !important;
  border-color: var(--sc-warn-line);
}
.badge.text-bg-danger, .badge.bg-danger {
  background-color: var(--sc-fire-tint) !important; color: var(--sc-fire-ink) !important;
  border-color: var(--sc-fire-line);
}
.badge.text-bg-secondary, .badge.bg-secondary {
  background-color: var(--sc-off-tint) !important; color: var(--sc-off-ink) !important;
  border-color: var(--sc-off-line);
}
.badge.text-bg-primary, .badge.bg-primary,
.badge.text-bg-info, .badge.bg-info,
.badge.bg-primary-subtle {
  background-color: var(--sc-accent-tint) !important; color: var(--sc-accent-ink) !important;
  border-color: var(--sc-accent-line);
}
/* .text-bg-light hardcodes color:#000 !important, so the rgb bridge alone
   leaves black text on a dark chip. Remapped to the neutral chip the palette
   actually has. */
.badge.text-bg-light, .badge.bg-light {
  background-color: var(--sc-surface-3) !important; color: var(--sc-text-2) !important;
  border-color: var(--sc-line);
}
.badge.text-bg-dark, .badge.bg-dark {
  background-color: var(--sc-text) !important; color: var(--sc-surface) !important;
  border-color: transparent;
}
.badge.bg-danger-subtle  { background-color: var(--sc-fire-tint) !important; border-color: var(--sc-fire-line); }
.badge.bg-warning-subtle { background-color: var(--sc-warn-tint) !important; border-color: var(--sc-warn-line); }
.badge.bg-success-subtle { background-color: var(--sc-ok-tint) !important;   border-color: var(--sc-ok-line); }
.badge.bg-secondary-subtle { background-color: var(--sc-off-tint) !important; border-color: var(--sc-off-line); }
.text-danger-emphasis  { color: var(--sc-fire-ink) !important; }
.text-warning-emphasis { color: var(--sc-warn-ink) !important; }
.text-success-emphasis { color: var(--sc-ok-ink) !important; }
.text-secondary-emphasis { color: var(--sc-off-ink) !important; }
.text-primary-emphasis { color: var(--sc-accent-ink) !important; }
.bg-primary-subtle { background-color: var(--sc-accent-tint) !important; }
/* .table-light pins a near-white row background and black text, which put a
   full-width white band across the dark comparison table. */
.table-light {
  --bs-table-color: var(--sc-text);
  --bs-table-bg: var(--sc-surface-2);
  --bs-table-border-color: var(--sc-line);
}

/* --- alerts -------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--sc-r-md);
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: .7rem;
  border-width: 1px;
  font-size: .875rem;
}
.alert-danger    { --bs-alert-bg: var(--sc-fire-tint); --bs-alert-color: var(--sc-fire-ink); --bs-alert-border-color: var(--sc-fire-line); }
.alert-warning   { --bs-alert-bg: var(--sc-warn-tint); --bs-alert-color: var(--sc-warn-ink); --bs-alert-border-color: var(--sc-warn-line); }
.alert-success   { --bs-alert-bg: var(--sc-ok-tint);   --bs-alert-color: var(--sc-ok-ink);   --bs-alert-border-color: var(--sc-ok-line); }
.alert-info      { --bs-alert-bg: var(--sc-accent-tint); --bs-alert-color: var(--sc-accent-ink); --bs-alert-border-color: var(--sc-accent-line); }
.alert-secondary { --bs-alert-bg: var(--sc-off-tint);  --bs-alert-color: var(--sc-text-2);   --bs-alert-border-color: var(--sc-off-line); }
.alert-link { color: inherit; text-decoration: underline; }

/* --- dropdown ------------------------------------------------------------ */
.dropdown-menu {
  --bs-dropdown-bg: var(--sc-surface);
  --bs-dropdown-color: var(--sc-text);
  --bs-dropdown-border-color: transparent;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: var(--sc-r-md);
  --bs-dropdown-link-color: var(--sc-text);
  --bs-dropdown-link-hover-bg: var(--sc-hover);
  --bs-dropdown-link-hover-color: var(--sc-text);
  --bs-dropdown-link-active-bg: var(--sc-accent-tint);
  --bs-dropdown-link-active-color: var(--sc-accent-ink);
  --bs-dropdown-header-color: var(--sc-text-3);
  --bs-dropdown-item-padding-x: .8rem;
  --bs-dropdown-item-padding-y: .4rem;
  --bs-dropdown-font-size: .875rem;
  box-shadow: var(--sc-sh-3);
  padding: .3rem;
}
.dropdown-item { border-radius: var(--sc-r-xs); }
.dropdown-header {
  font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.dropdown-divider { border-color: var(--sc-line); }

/* --- modal --------------------------------------------------------------- */
.modal {
  --bs-modal-bg: var(--sc-surface);
  --bs-modal-color: var(--sc-text);
  --bs-modal-border-color: transparent;
  --bs-modal-border-width: 0;
  --bs-modal-border-radius: var(--sc-r-xl);
  --bs-modal-header-border-color: var(--sc-line);
  --bs-modal-footer-border-color: var(--sc-line);
  --bs-modal-header-padding: 1rem 1.125rem;
}
.modal-content { box-shadow: var(--sc-sh-4); }
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-backdrop { --bs-backdrop-opacity: .42; }

/* --- toast --------------------------------------------------------------- */
/* Neutral by default. A success toast for "Notes saved" spends attention that
   the product needs for machine state. */
.toast {
  --bs-toast-bg: var(--sc-surface);
  --bs-toast-color: var(--sc-text);
  --bs-toast-border-color: transparent;
  --bs-toast-border-width: 0;
  --bs-toast-border-radius: var(--sc-r-md);
  box-shadow: var(--sc-sh-3);
  font-size: .875rem;
}

/* --- list group ---------------------------------------------------------- */
.list-group {
  --bs-list-group-bg: var(--sc-surface);
  --bs-list-group-color: var(--sc-text);
  --bs-list-group-border-color: var(--sc-line);
  --bs-list-group-border-radius: var(--sc-r-md);
  --bs-list-group-action-hover-bg: var(--sc-hover);
  --bs-list-group-action-hover-color: var(--sc-text);
  --bs-list-group-active-bg: var(--sc-accent-tint);
  --bs-list-group-active-color: var(--sc-accent-ink);
  --bs-list-group-active-border-color: var(--sc-accent-line);
}

/* --- progress ------------------------------------------------------------ */
.progress {
  --bs-progress-bg: var(--sc-meter-track);
  --bs-progress-border-radius: var(--sc-r-pill);
  --bs-progress-height: .5rem;
}
.progress-bar { border-radius: var(--sc-r-pill); transition: width var(--sc-d4) var(--sc-ease); }

/* --- navbar -------------------------------------------------------------- */
/* A distinct plane in BOTH themes. Bootstrap's .bg-dark is declared
   !important, so the override has to match it. */
.navbar.bg-dark { background-color: var(--sc-nav-bg) !important; }
.navbar {
  border-bottom: 1px solid var(--sc-nav-line);
  padding-top: .55rem; padding-bottom: .55rem;
}
.navbar .navbar-brand { color: var(--sc-nav-fg); font-weight: 620; letter-spacing: -.01em; font-size: 1rem; }
.navbar .nav-link {
  color: var(--sc-nav-fg-muted); font-size: .875rem; font-weight: 500;
  border-radius: var(--sc-r-sm); padding: .35rem .7rem; position: relative;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--sc-nav-fg); background: var(--sc-nav-hover); }
.navbar .nav-link.active { color: var(--sc-nav-fg); }
.navbar .nav-link.active::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -.62rem;
  height: 2px; background: var(--sc-accent-ink); border-radius: 2px 2px 0 0;
}
.navbar-admin.bg-dark { background-color: var(--sc-admin-nav) !important; }
.navbar-admin { border-bottom-color: var(--sc-admin-nav-line); }

/* --- misc ---------------------------------------------------------------- */
hr { border-color: var(--sc-line); opacity: 1; }
code:not(.install-cmd code) { background: var(--sc-surface-3); padding: .1em .35em; border-radius: var(--sc-r-xs); }
.text-body-secondary { color: var(--sc-text-2) !important; }
.text-muted { color: var(--sc-text-3) !important; }
.border { border-color: var(--sc-line) !important; }
.bg-body-tertiary { background-color: var(--sc-surface-2) !important; }

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