/* ============================================================================
   TILE KMS — Operator Console design system
   ----------------------------------------------------------------------------
   One hand-authored stylesheet, served from the embedded FS. It replaces the
   Tailwind Play CDN the templates used to pull at runtime: that shipped a JIT
   compiler to every browser, needed outbound internet from an operator
   workstation, and restyled the page after first paint. An air-gapped
   deployment now renders correctly with no network at all.

   Sections
     1. Tokens
     2. Reset & base
     3. Typography & text utilities
     4. Layout primitives (app shell, page header, grid, stack)
     5. Surfaces (panel, metric, definition list, copyable value)
     6. Buttons
     7. Forms
     8. Tables
     9. Badges, status, chips
    10. Alerts
    11. Modals
    12. Menus
    13. Empty / loading states
    14. Toast
    15. Auth & standalone pages
    16. Cluster tabs & monitoring
    17. Utilities
    18. Responsive & print
   ========================================================================== */

/* ── 1. Tokens ───────────────────────────────────────────────────────────── */

:root {
  /* Neutrals — a graphite ramp with a faint cool cast. Deliberately narrow:
     the interface separates things with hairlines and spacing, not with a
     dozen competing surface shades. */
  --ink-0:  #0e1113;   /* page */
  --ink-1:  #131719;   /* rails: sidebar, header */
  --ink-2:  #171b1e;   /* panels */
  --ink-3:  #1c2124;   /* inputs, nested surfaces */
  --ink-4:  #232a2e;   /* hover */
  --ink-5:  #2b3338;   /* pressed */

  --line:    #232a2e;  /* hairline between rows and sections */
  --line-2:  #303940;  /* control borders */
  --line-3:  #3c464e;  /* hovered control borders */

  --text-0: #e6ebee;   /* primary */
  --text-1: #a7b2b9;   /* secondary */
  --text-2: #78848c;   /* muted, labels */
  --text-3: #5a666e;   /* faint, placeholders */

  /* Brand — used sparingly: primary action, active navigation, ACTIVE state.
     Large fills use the darker step so white label text stays legible. */
  --accent-700: #077854;
  --accent-600: #0a9066;
  --accent-500: #0ba876;
  --accent-400: #14c089;
  --accent-tint: rgba(20, 192, 137, 0.10);
  --accent-line: rgba(20, 192, 137, 0.28);

  /* Status — one hue per meaning, muted enough to sit beside body text. */
  --info-400:  #5aa2e0;
  --info-tint: rgba(90, 162, 224, 0.10);
  --info-line: rgba(90, 162, 224, 0.26);

  --warn-400:  #d9a441;
  --warn-tint: rgba(217, 164, 65, 0.10);
  --warn-line: rgba(217, 164, 65, 0.26);

  --danger-400: #e06a6a;
  --danger-500: #cf4f4f;
  --danger-600: #b83e3e;
  --danger-tint: rgba(224, 106, 106, 0.10);
  --danger-line: rgba(224, 106, 106, 0.26);

  --violet-400: #9d8ff0;
  --violet-tint: rgba(157, 143, 240, 0.10);
  --violet-line: rgba(157, 143, 240, 0.26);

  /* Typography */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Consolas,
               "Liberation Mono", Menlo, monospace;

  --fs-2xs: 10.5px;
  --fs-xs:  11.5px;
  --fs-sm:  12.5px;
  --fs-md:  13px;
  --fs-base: 14px;
  --fs-lg:  16px;
  --fs-xl:  19px;
  --fs-2xl: 24px;

  /* Spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Radius — small on purpose. Pill-shaped cards read as consumer SaaS. */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* One elevation, for overlays only. Everything else uses a hairline. */
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.55);

  --sidebar-w: 236px;
  --header-h: 52px;
}

/* ── 2. Reset & base ─────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text-0);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd, dt { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text-0); }

svg { display: block; flex-shrink: 0; }

code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

/* Focus: one visible ring everywhere, never removed. A keyboard operator on a
   console that provisions cryptographic keys must always see where they are. */
:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-line); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }

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

.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;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -100px; z-index: 300;
  background: var(--ink-3); color: var(--text-0);
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm);
}
.skip-link:focus { top: var(--sp-3); }

/* ── 3. Typography & text utilities ──────────────────────────────────────── */

.t-2xs { font-size: var(--fs-2xs); }
.t-xs  { font-size: var(--fs-xs); }
.t-sm  { font-size: var(--fs-sm); }
.t-md  { font-size: var(--fs-md); }
.t-lg  { font-size: var(--fs-lg); }

.t-primary   { color: var(--text-0); }
.t-secondary { color: var(--text-1); }
.t-muted     { color: var(--text-2); }
.t-faint     { color: var(--text-3); }
.t-accent    { color: var(--accent-400); }
.t-danger    { color: var(--danger-400); }
.t-warn      { color: var(--warn-400); }
.t-info      { color: var(--info-400); }

.t-medium { font-weight: 500; }
.t-semi   { font-weight: 600; }

.t-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-break    { word-break: break-all; overflow-wrap: anywhere; }
.t-nowrap   { white-space: nowrap; }
.t-right    { text-align: right; }
.t-center   { text-align: center; }
.t-clamp-2  { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 4. Layout primitives ────────────────────────────────────────────────── */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--ink-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
}
.sidebar-brand .mark { color: var(--accent-400); }
.sidebar-brand .wordmark { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.sidebar-brand .subtitle { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 1px; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3) var(--sp-2); }

.nav-group + .nav-group { margin-top: var(--sp-5); }
.nav-group-label {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 var(--sp-2); margin-bottom: var(--sp-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 7px var(--sp-2);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--text-1);
  border-left: 2px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.nav-item + .nav-item { margin-top: 1px; }
.nav-item svg { width: 15px; height: 15px; color: var(--text-3); transition: color 0.12s ease; }
.nav-item:hover { background: var(--ink-3); color: var(--text-0); }
.nav-item:hover svg { color: var(--text-1); }
.nav-item.is-active {
  background: var(--accent-tint);
  color: var(--accent-400);
  border-left-color: var(--accent-500);
  font-weight: 500;
}
.nav-item.is-active svg { color: var(--accent-400); }

.sidebar-footer { border-top: 1px solid var(--line); padding: var(--sp-3); }

.identity { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-2) var(--sp-3); min-width: 0; }
.avatar {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase;
}
.avatar-lg { width: 44px; height: 44px; flex-basis: 44px; font-size: var(--fs-lg); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--header-h);
  flex: 0 0 var(--header-h);
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  position: sticky;
  top: 0;
  z-index: 20;
}
.breadcrumb { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-2); min-width: 0; }
.breadcrumb .sep { color: var(--text-3); }
.breadcrumb .current { color: var(--text-0); font-weight: 500; }

.topbar-meta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
.meta-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-2); }
.meta-item svg { width: 13px; height: 13px; color: var(--text-3); }

.content { flex: 1; padding: var(--sp-6); min-width: 0; }
.content-narrow { max-width: 900px; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.page-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); }
.page-desc  { font-size: var(--fs-md); color: var(--text-2); margin-top: 3px; max-width: 78ch; }
.page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

.row  { display: flex; align-items: center; gap: var(--sp-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.row-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.row-wrap { flex-wrap: wrap; }
.row-center { justify-content: center; }
.col  { display: flex; flex-direction: column; min-width: 0; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 5. Surfaces ─────────────────────────────────────────────────────────── */

.panel {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.panel-pad { padding: var(--sp-5); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.panel-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.panel-body { padding: var(--sp-4); }
.panel-dashed { border-style: dashed; background: transparent; }

/* Metric — a labelled number. No sparkline, no delta arrow, no invented trend:
   the backend reports a count, so the tile shows a count. */
.metric { padding: var(--sp-4) var(--sp-5); }
.metric-label { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.metric-value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; color: var(--text-0); margin-top: var(--sp-2); line-height: 1.1; }
.metric-value.is-accent { color: var(--accent-400); }
.metric-value.is-warn   { color: var(--warn-400); }
.metric-value.is-empty  { color: var(--text-3); }
.metric-note { font-size: var(--fs-xs); color: var(--text-3); margin-top: var(--sp-2); }

.dl-row { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.dl-row + .dl-row { border-top: 1px solid var(--line); }
.dl-key { flex: 0 0 168px; font-size: var(--fs-sm); color: var(--text-2); }
.dl-val { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--text-0); }

.value-box { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.value-code {
  flex: 1; min-width: 0;
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-1);
  word-break: break-all;
  overflow-wrap: anywhere;
}
.value-code.is-secret { color: var(--warn-400); }
.value-code.is-accent { color: var(--accent-400); }
.value-code.is-scroll { max-height: 240px; overflow-y: auto; white-space: pre-wrap; }

/* ── 6. Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px var(--sp-3);
  min-height: 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-3);
  color: var(--text-0);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn:hover { background: var(--ink-4); border-color: var(--line-3); color: var(--text-0); }
.btn:active { background: var(--ink-5); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 14px; height: 14px; }

.btn-primary { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-primary:hover { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }
.btn-primary:active { background: var(--accent-700); border-color: var(--accent-700); }

.btn-danger { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
.btn-danger:hover { background: var(--danger-500); border-color: var(--danger-500); color: #fff; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-1); }
.btn-ghost:hover { background: var(--ink-3); border-color: var(--line); color: var(--text-0); }

/* Outline variants keep a row-level action quieter than the page's primary
   action while still reading as its own risk class. */
.btn-outline-danger { background: transparent; border-color: var(--danger-line); color: var(--danger-400); }
.btn-outline-danger:hover { background: var(--danger-tint); border-color: var(--danger-400); color: var(--danger-400); }

.btn-outline-warn { background: transparent; border-color: var(--warn-line); color: var(--warn-400); }
.btn-outline-warn:hover { background: var(--warn-tint); border-color: var(--warn-400); color: var(--warn-400); }

.btn-outline-accent { background: transparent; border-color: var(--accent-line); color: var(--accent-400); }
.btn-outline-accent:hover { background: var(--accent-tint); border-color: var(--accent-400); color: var(--accent-400); }

.btn-sm { min-height: 26px; padding: 3px var(--sp-2); font-size: var(--fs-sm); }
.btn-sm svg { width: 12px; height: 12px; }
.btn-lg { min-height: 38px; padding: var(--sp-2) var(--sp-5); font-size: var(--fs-base); }
.btn-block { width: 100%; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--text-3);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.btn-icon:hover { background: var(--ink-4); color: var(--text-0); }
.btn-icon svg { width: 14px; height: 14px; }
.btn-icon.is-ok { color: var(--accent-400); }

/* A pagination endpoint that is unavailable — rendered as text, not a button,
   because there is nothing to activate. */
.btn-static {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--sp-3); min-height: 30px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: var(--fs-md); color: var(--text-3);
  background: transparent; cursor: not-allowed;
}

/* ── 7. Forms ────────────────────────────────────────────────────────────── */

.field { display: block; }
.field + .field { margin-top: var(--sp-4); }

.label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--text-1); margin-bottom: 5px; }
.label .req { color: var(--danger-400); margin-left: 2px; }
.hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 5px; }
.hint-mono { font-family: var(--font-mono); }

.input, .select, .textarea {
  display: block;
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 7px var(--sp-3);
  color: var(--text-0);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: 1.45;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.textarea { resize: vertical; min-height: 64px; }
.input-mono, .textarea-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

.select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378848c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}
.select option { background: var(--ink-3); color: var(--text-0); }

.input-search { position: relative; }
.input-search > svg {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--text-3); pointer-events: none;
}
.input-search .input { padding-left: var(--sp-8); }

.check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: var(--fs-md); color: var(--text-1); }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 15px; height: 15px; margin: 0; accent-color: var(--accent-500);
  cursor: pointer; flex-shrink: 0;
}
.check:hover { color: var(--text-0); }
.check-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* A checkbox rendered as a full-width option row. */
.check-card {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-3);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.check-card:hover { border-color: var(--line-3); background: var(--ink-4); }
.check-card:focus-within { border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-tint); }
.check-card input { margin-top: 2px; }

/* A bordered group of related fields — the key slots on Create Application. */
.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--ink-3);
  margin: 0;
}
.fieldset + .fieldset { margin-top: var(--sp-4); }
.fieldset-optional { border-style: dashed; background: transparent; }
.fieldset > legend { padding: 0; }
.fieldset-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.fieldset-title { font-size: var(--fs-md); font-weight: 600; color: var(--text-0); }
.fieldset-note { font-size: var(--fs-xs); color: var(--text-3); }

.slot-mark {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 700;
}
.slot-rest    { background: var(--accent-tint); color: var(--accent-400); }
.slot-transit { background: var(--info-tint);   color: var(--info-400); }
.slot-signing { background: var(--violet-tint); color: var(--violet-400); }
.slot-mac     { background: var(--warn-tint);   color: var(--warn-400); }

.filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.filterbar .field { margin: 0; }
.filterbar-actions { display: flex; gap: var(--sp-2); margin-left: auto; }

/* Masked secret textarea.
   A <textarea> is required so a multi-line PEM private key can be pasted, and
   it has no type="password" to hide what is typed. -webkit-text-security draws
   discs in Chromium/Safari; Firefox has no equivalent, so blur stands in — the
   text is still unreadable over someone's shoulder and one click reveals it. */
.secret-masked { -webkit-text-security: disc; text-security: disc; }
@supports not (-webkit-text-security: disc) {
  .secret-masked { filter: blur(3.5px); }
}

/* ── 8. Tables ───────────────────────────────────────────────────────────── */

.table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-2);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }

.table thead th {
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4);
  text-align: left;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.table thead th.num { text-align: right; }

.table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  color: var(--text-1);
  vertical-align: middle;
}
.table tbody td.num { text-align: right; }
.table tbody tr:first-child td { border-top: 0; }
.table tbody tr { transition: background-color 0.1s ease; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.022); }

.table tr.is-expandable { cursor: pointer; }
.table tr.is-expandable:focus-visible { outline: 2px solid var(--accent-400); outline-offset: -2px; }
.row-chevron { width: 13px; height: 13px; color: var(--text-3); transition: transform 0.15s ease, color 0.12s ease; }
.table tr.is-expandable:hover .row-chevron { color: var(--text-1); }
.row-chevron.is-open { transform: rotate(90deg); }

.detail-cell { background: var(--ink-0); padding: var(--sp-4); }

.table-nested { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table-nested th {
  text-align: left; padding: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.table-nested td { padding: 7px var(--sp-4) 7px 0; border-top: 1px solid var(--line); color: var(--text-1); }
.table-nested tbody tr:first-child td { border-top: 0; }

.cell-primary { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cell-icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-sm);
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
}
.cell-icon svg { width: 14px; height: 14px; }
.cell-name { font-size: var(--fs-md); font-weight: 500; color: var(--text-0); }
.cell-sub  { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; }

.id-cell { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }

/* Copy affordance that appears on row hover but stays reachable by keyboard:
   focus restores it too, so it is not a mouse-only control. */
.hover-reveal { opacity: 0; transition: opacity 0.12s ease; }
tr:hover .hover-reveal, .hover-reveal:focus-visible { opacity: 1; }

.table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-3); min-height: 28px; flex-wrap: wrap;
}
.result-count { font-size: var(--fs-md); color: var(--text-2); }
.result-count strong { color: var(--text-0); font-weight: 600; }
.filter-tags { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-4); flex-wrap: wrap;
}
.pagination-note { font-size: var(--fs-sm); color: var(--text-3); }
.pagination-controls { display: flex; gap: var(--sp-2); }

/* ── 9. Badges, status, chips ────────────────────────────────────────────── */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-1);
  white-space: nowrap;
}
.badge-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.badge-info   { background: var(--info-tint);   border-color: var(--info-line);   color: var(--info-400); }
.badge-warn   { background: var(--warn-tint);   border-color: var(--warn-line);   color: var(--warn-400); }
.badge-danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger-400); }
.badge-violet { background: var(--violet-tint); border-color: var(--violet-line); color: var(--violet-400); }
.badge-mono   { font-family: var(--font-mono); letter-spacing: 0; font-weight: 500; }

/* Status = coloured dot + plain label. In a dense table that reads faster than
   a filled pill on every row, and it stays legible for a reader who cannot
   separate the hues, because the word is always there. */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); white-space: nowrap; color: var(--text-1); }
.status .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.status-active      { color: var(--accent-400); font-weight: 500; }
.status-active .dot { background: var(--accent-400); }
.status-pre-active      { color: var(--info-400); }
.status-pre-active .dot { background: var(--info-400); }
.status-suspended      { color: var(--warn-400); }
.status-suspended .dot { background: var(--warn-400); }
.status-deactivated      { color: var(--text-1); }
.status-deactivated .dot { background: var(--text-2); }
.status-revoked      { color: var(--danger-400); }
.status-revoked .dot { background: var(--danger-400); }
.status-compromised      { color: var(--warn-400); font-weight: 500; }
.status-compromised .dot { background: var(--warn-400); }
.status-destroyed      { color: var(--text-3); }
.status-destroyed .dot { background: var(--text-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--ink-3);
  font-size: var(--fs-sm);
  color: var(--text-1);
  max-width: 230px;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: var(--r-xs);
  background: transparent; color: var(--text-3); cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.chip-remove:hover { background: var(--danger-tint); color: var(--danger-400); }
.chip-remove svg { width: 10px; height: 10px; }

.chip-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--text-3);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.chip-add:hover { border-color: var(--line-3); color: var(--text-1); }
.chip-add svg { width: 10px; height: 10px; }

.chip-list { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* ── 10. Alerts ──────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--ink-2);
  font-size: var(--fs-md);
  color: var(--text-1);
}
.alert svg { width: 16px; height: 16px; margin-top: 1px; }
.alert-title { font-weight: 600; color: var(--text-0); display: block; margin-bottom: 2px; }

.alert-danger { border-color: var(--danger-line); border-left-color: var(--danger-500); background: var(--danger-tint); color: #eec2c2; }
.alert-danger svg { color: var(--danger-400); }
.alert-danger .alert-title { color: var(--danger-400); }

.alert-warn { border-color: var(--warn-line); border-left-color: var(--warn-400); background: var(--warn-tint); color: #e6d2ac; }
.alert-warn svg { color: var(--warn-400); }
.alert-warn .alert-title { color: var(--warn-400); }

.alert-info { border-color: var(--info-line); border-left-color: var(--info-400); background: var(--info-tint); color: #c3d9ee; }
.alert-info svg { color: var(--info-400); }
.alert-info .alert-title { color: var(--info-400); }

.alert-accent { border-color: var(--accent-line); border-left-color: var(--accent-500); background: var(--accent-tint); color: #b6e3d1; }
.alert-accent svg { color: var(--accent-400); }
.alert-accent .alert-title { color: var(--accent-400); }

.mb-alert { margin-bottom: var(--sp-4); }

/* ── 11. Modals ──────────────────────────────────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(6, 8, 9, 0.72);
}

.modal-box {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 4 * var(--sp-4));
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-overlay);
}
.modal-box.is-wide { max-width: 580px; }

.modal-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); flex: 1; min-width: 0; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-foot {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.modal-foot .btn { flex: 1; }

.modal-mark {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
}
.modal-mark svg { width: 15px; height: 15px; }
.modal-mark.is-danger { background: var(--danger-tint); color: var(--danger-400); }
.modal-mark.is-warn   { background: var(--warn-tint);   color: var(--warn-400); }
.modal-mark.is-accent { background: var(--accent-tint); color: var(--accent-400); }
.modal-mark.is-info   { background: var(--info-tint);   color: var(--info-400); }

.result-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.result-mark {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
}
.result-mark svg { width: 12px; height: 12px; }
.result-text { font-size: var(--fs-md); font-weight: 600; color: var(--accent-400); }

/* ── 12. Menus ───────────────────────────────────────────────────────────── */

.menu-anchor { position: relative; display: inline-block; }
.menu {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  z-index: 30;
  min-width: 168px;
  padding: var(--sp-1);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-overlay);
}
.menu-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: 6px var(--sp-2);
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-1);
  font-family: inherit; font-size: var(--fs-md); text-align: left;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.menu-item:hover { background: var(--ink-4); color: var(--text-0); }
.menu-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.menu-label {
  padding: var(--sp-2) var(--sp-2) 4px;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── 13. Empty / loading states ──────────────────────────────────────────── */

.empty { padding: var(--sp-16) var(--sp-6); text-align: center; }
.empty-mark {
  width: 40px; height: 40px; margin: 0 auto var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--ink-3);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
}
.empty-mark svg { width: 18px; height: 18px; }
.empty-title { font-size: var(--fs-base); font-weight: 500; color: var(--text-1); }
.empty-desc { font-size: var(--fs-md); color: var(--text-3); margin-top: var(--sp-2); max-width: 56ch; margin-left: auto; margin-right: auto; }
.empty-actions { margin-top: var(--sp-5); display: flex; justify-content: center; gap: var(--sp-2); }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--line-3);
  border-top-color: var(--accent-400);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 14. Toast ───────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 200;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--ink-3);
  box-shadow: var(--shadow-overlay);
  font-size: var(--fs-md);
  color: var(--text-0);
}
.toast.is-success { border-left-color: var(--accent-500); }
.toast.is-error   { border-left-color: var(--danger-500); }
.toast.is-info    { border-left-color: var(--info-400); }

/* ── 15. Auth & standalone pages ─────────────────────────────────────────── */

/* Split layout: the form on the left, a factual panel on the right stating
   what this deployment actually enforces. The panel is descriptive only and
   is dropped below 1024px. */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-form-col { display: flex; align-items: center; justify-content: center; padding: var(--sp-10) var(--sp-6); }
.auth-form { width: 100%; max-width: 368px; }

.auth-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-10); }
.auth-brand .mark { color: var(--accent-400); }
.auth-brand .wordmark { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); }
.auth-brand .subtitle { font-size: var(--fs-2xs); color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase; }

.auth-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text-0); }
.auth-desc { font-size: var(--fs-md); color: var(--text-2); margin-top: var(--sp-2); margin-bottom: var(--sp-6); }

.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; font-size: var(--fs-xs); color: var(--text-3); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.btn-google { width: 100%; background: var(--ink-3); border-color: var(--line-2); color: var(--text-0); min-height: 38px; }
.btn-google:hover { background: var(--ink-4); }
.btn-google svg { width: 16px; height: 16px; }

.auth-foot { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }

.auth-aside {
  background: var(--ink-1);
  border-left: 1px solid var(--line);
  padding: var(--sp-10);
  display: flex; flex-direction: column; justify-content: center;
}
.auth-aside-inner { max-width: 420px; }
.auth-aside h2 { font-size: var(--fs-lg); color: var(--text-0); margin-bottom: var(--sp-5); }

.spec-row { display: flex; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.spec-row:first-child { border-top: 0; }
.spec-key { flex: 0 0 132px; font-size: var(--fs-sm); color: var(--text-2); }
.spec-val { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-1); }

/* Centred single-card pages: pending approval, cluster mismatch, error,
   device authorization. */
.centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.centered-card { width: 100%; max-width: 440px; }
.centered-card.is-wide { max-width: 520px; }

.state-mark {
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-4);
}
.state-mark svg { width: 20px; height: 20px; }
.state-mark.is-accent { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-400); }
.state-mark.is-info   { background: var(--info-tint);   border-color: var(--info-line);   color: var(--info-400); }
.state-mark.is-warn   { background: var(--warn-tint);   border-color: var(--warn-line);   color: var(--warn-400); }
.state-mark.is-danger { background: var(--danger-tint); border-color: var(--danger-line); color: var(--danger-400); }
.state-mark.is-center { margin-left: auto; margin-right: auto; }

.error-code { font-size: 64px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-3); line-height: 1; }

/* ── 16. Cluster tabs ────────────────────────────────────────────────────── */

/* Every list in this console is per-cluster: the same query runs against each
   registered cluster and each answer is its own panel. Tabs switch panels
   client-side; a cluster that failed to answer keeps its tab and shows the
   reason inside, because hiding it would make an unreachable cluster look
   like a cluster with no data. */
.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
}
.tab {
  padding: 8px var(--sp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.tab:hover { color: var(--text-0); }
.tab[aria-selected="true"] {
  color: var(--text-0);
  border-bottom-color: var(--accent-500);
}
.tab .warn-mark { color: var(--warn-400); }

/* ── 16b. Monitoring ──────────────────────────────────────────────────────
   The node monitor is a live view of Access and Director RAFT members. It is
   the one screen here that is genuinely dense with numbers, so it gets its own
   components rather than being forced into the generic table. */

.node-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--sp-4);
}

.node-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-md);
  overflow: hidden;
}
/* The left edge carries the node's RAFT role, so role is readable from the
   page margin without reading any text. */
.node-card.is-leader    { border-left-color: var(--accent-500); }
.node-card.is-follower  { border-left-color: var(--info-400); }
.node-card.is-candidate { border-left-color: var(--warn-400); }
.node-card.is-unknown   { border-left-color: var(--line-3); }
.node-card.is-error     { border-left-color: var(--danger-500); }

.node-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.node-id { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); }
.node-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; word-break: break-all; }
.node-meta b { color: var(--text-1); font-weight: 600; }

.node-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }

/* Three-up counter row: term / commit / apply lag. */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.stat-cell {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}
.stat-cell .val { font-size: var(--fs-lg); font-weight: 600; color: var(--text-0); }
.stat-cell .lbl { font-size: var(--fs-2xs); color: var(--text-3); margin-top: 1px; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-cell.is-warn .val { color: var(--warn-400); }
.stat-cell.is-crit .val { color: var(--danger-400); }

.node-note { font-size: var(--fs-xs); color: var(--text-2); display: flex; gap: 5px; flex-wrap: wrap; }
.node-note b { color: var(--text-1); font-family: var(--font-mono); font-weight: 500; }
.node-note.is-crit { color: var(--danger-400); }

/* Usage meter. The fill width and hue are set from JS via CSS custom
   properties — a style="" attribute would be refused by the CSP. */
.meter { display: flex; flex-direction: column; gap: 4px; }
.meter-head { display: flex; justify-content: space-between; font-size: var(--fs-xs); }
.meter-head .name { color: var(--text-2); }
.meter-head .value { color: var(--text-1); font-variant-numeric: tabular-nums; }
.meter-track { height: 4px; background: var(--ink-4); border-radius: 2px; overflow: hidden; }
.meter-fill {
  height: 100%;
  width: var(--meter-width, 0%);
  background: var(--meter-color, var(--accent-500));
  border-radius: 2px;
  transition: width 0.4s ease;
}
.meter-fill.is-warn { background: var(--warn-400); }
.meter-fill.is-crit { background: var(--danger-400); }

/* Cluster grouping on the status pane */
.node-group + .node-group { margin-top: var(--sp-8); }
.node-group-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.node-group-head .name { font-size: var(--fs-base); font-weight: 600; color: var(--text-0); }
.node-group-head .count { font-size: var(--fs-sm); color: var(--text-3); }

/* Chart cards */
.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-4); }
.chart-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); gap: var(--sp-3); }
.chart-name { font-size: var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-2); }
.chart-stats { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; display: flex; gap: 8px; flex-wrap: wrap; }
.chart-canvas { width: 100%; height: 92px; display: block; }

.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-top: 0; border-bottom: 1px solid var(--line); }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-1); }
.legend-swatch { width: 16px; height: 3px; border-radius: 2px; background: var(--legend-color, var(--text-3)); }

/* Quick-range buttons on the history filter */
.range-group { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.range-btn {
  padding: 4px var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--ink-3);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.range-btn:hover { color: var(--text-0); border-color: var(--line-3); }
.range-btn[aria-pressed="true"] {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  color: var(--accent-400);
  font-weight: 500;
}

.filter-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 var(--sp-1); }

.freshness { font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap; }
.freshness.is-warn  { color: var(--warn-400); }
.freshness.is-stale { color: var(--danger-400); }



/* File input styled as a drop target. The native control sits on top at zero
   opacity so the whole area stays clickable and keyboard-focusable. */
.file-field { position: relative; }
.file-field input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 1;
}
.file-label {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--ink-3);
  color: var(--text-3);
  font-size: var(--fs-md);
  transition: border-color 0.12s ease, color 0.12s ease;
}
.file-field:hover .file-label { border-color: var(--line-3); color: var(--text-1); }
.file-field input[type="file"]:focus-visible + .file-label {
  border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-tint);
}
.file-label.is-chosen { border-style: solid; border-color: var(--accent-line); color: var(--accent-400); }

/* ── 17. Utilities ───────────────────────────────────────────────────────── */

.mt-1 { margin-top: var(--sp-1); }  .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }  .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.ml-auto { margin-left: auto; }
.w-full { width: 100%; }
.flush { margin: 0 !important; }
.inline-block { display: inline-block; }
.block { display: block; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

/* Sizing helpers.
   These exist because the Content-Security-Policy forbids style="" attributes,
   so a one-off width has to be a class. Naming them by role rather than by
   pixel value keeps the column widths of the tables consistent across pages. */
.fw-sm { min-width: 170px; }
.fw-md { min-width: 210px; }
.fw-lg { min-width: 260px; }
.fw-xl { min-width: 280px; }

.w-id-sm  { max-width: 10rem; }
.w-id-md  { max-width: 12rem; }
.w-id-lg  { max-width: 15rem; }
.w-sub    { max-width: 190px; }
.w-desc   { max-width: 22rem; }
.w-chevron { width: 32px; }

.dot-accent { background: var(--accent-400) !important; }
.dot-info   { background: var(--info-400) !important; }

/* ── 18. Responsive & print ──────────────────────────────────────────────── */

/* Laptop: tighten the shell before anything collapses. */
@media (max-width: 1280px) {
  :root { --sidebar-w: 212px; }
  .content { padding: var(--sp-5); }
}

/* Tablet: the sidebar becomes a horizontal rail above the content. Desktop is
   the primary target for this console, so this is a graceful fallback rather
   than a separate small-screen design. */
@media (max-width: 1024px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex-basis: auto; height: auto; position: static;
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .sidebar-nav { display: flex; gap: var(--sp-3); overflow-x: auto; padding: var(--sp-2) var(--sp-4); }
  .nav-group { display: flex; align-items: center; gap: var(--sp-1); }
  .nav-group + .nav-group { margin-top: 0; }
  .nav-group-label { display: none; }
  .nav-item { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .nav-item + .nav-item { margin-top: 0; }
  .nav-item.is-active { border-left: 0; border-bottom-color: var(--accent-500); }
  .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
  .identity { padding: 0 var(--sp-2); }
  .sidebar-footer form { flex-shrink: 0; }

  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .dl-key { flex-basis: 140px; }
}

@media (max-width: 720px) {
  .content { padding: var(--sp-4); }
  .page-head { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .filterbar-actions { margin-left: 0; }
  .dl-row { flex-direction: column; gap: var(--sp-1); }
  .dl-key { flex-basis: auto; }
  .spec-row { flex-direction: column; gap: var(--sp-1); }
  .spec-key { flex-basis: auto; }
  .section { padding: var(--sp-12) 0; }
  .hero { padding: var(--sp-12) 0 var(--sp-10); }
  .topbar { padding: 0 var(--sp-4); }
  .topbar-meta { gap: var(--sp-3); }
}

/* Operators do print key inventories for change records. */
@media print {
  .sidebar, .topbar, .page-actions, .filterbar, .pagination, .toast, .modal { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .table-wrap { border-color: #ccc; background: #fff; }
  .table tbody td, .table thead th { color: #000; border-color: #ddd; background: #fff; }
}