/* ============================================================
   Chrome — masthead, sidebar, navbar, login, page-header
   Load order: AFTER
   ============================================================ */

/* ---- Bootstrap re-skin ----
   Bootstrap 5's btn-primary uses hard-coded hex colors instead of var(),
   so the --bs-primary override in app.css never reaches the buttons.
   Re-skin all primary/light/success buttons to use the lime palette. */
.btn-primary {
  --bs-btn-color: #0e1322;
  --bs-btn-bg: var(--c-lime-500);
  --bs-btn-border-color: var(--c-lime-500);
  --bs-btn-hover-color: #0e1322;
  --bs-btn-hover-bg: var(--c-lime-700);
  --bs-btn-hover-border-color: var(--c-lime-700);
  --bs-btn-active-color: #0e1322;
  --bs-btn-active-bg: var(--c-lime-700);
  --bs-btn-active-border-color: var(--c-lime-700);
  --bs-btn-disabled-color: #0e1322;
  --bs-btn-disabled-bg: var(--c-lime-500);
  --bs-btn-disabled-border-color: var(--c-lime-500);
  font-weight: 600;
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--c-lime-300);
  --bs-btn-border-color: var(--c-lime-300);
  --bs-btn-hover-bg: var(--c-lime-500);
  --bs-btn-hover-border-color: var(--c-lime-500);
  --bs-btn-active-bg: var(--c-lime-500);
  --bs-btn-active-border-color: var(--c-lime-500);
}
.btn-outline-primary {
  --bs-btn-color: var(--c-lime-700);
  --bs-btn-border-color: var(--c-lime-700);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #0e1322;
  --bs-btn-hover-bg: var(--c-lime-500);
  --bs-btn-hover-border-color: var(--c-lime-500);
  --bs-btn-active-color: #0e1322;
  --bs-btn-active-bg: var(--c-lime-500);
  --bs-btn-active-border-color: var(--c-lime-500);
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--c-lime-300);
  --bs-btn-border-color: var(--c-lime-300);
  --bs-btn-hover-color: #0e1322;
  --bs-btn-hover-bg: var(--c-lime-300);
  --bs-btn-hover-border-color: var(--c-lime-300);
}

/* Pushes the existing editorial system further: bigger, bolder,
   more "instrument panel" character without breaking the layout
   that already works. These classes compose with the existing
   masthead-* / colophon-* / nav-* classes from . */

/* Local variables used throughout chrome.css (kept here so a single
   @import of this file brings them along with the rules that use them). */

/* Fraunces — display face for editorial moments (Anmelden, Guten Morgen, etc.).
   Loaded as italic + regular so the variable-axis defaults render with WONK
   accents. Self-hosted alongside Poppins. */
@font-face {
  font-family: 'Fraunces';
  src: url("/static/fonts/Fraunces/Fraunces-Regular.500edf351c4f.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/static/fonts/Fraunces/Fraunces-Italic.b5b0818335f2.ttf") format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/static/fonts/Fraunces/Fraunces-Bold.80db4c340664.ttf") format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Plex Mono — fallback when Poppins is unavailable in CSS-load paths that
   bypass typography.css (e.g. the login screen). */
@font-face {
  font-family: 'Plex Mono';
  src: url("/static/fonts/Plex/Mono/IBMPlexMono-Regular.814fe1615d4d.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url("/static/fonts/Plex/Mono/IBMPlexMono-Medium.6708425c446b.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Fraunces variable axes — used on .bridge-headline, .login-card h5, etc. */
  --display-axes: "opsz" 144, "SOFT" 0, "WONK" 0;
  --display-axes-wonk: "opsz" 36, "SOFT" 0, "WONK" 1;

  /* Semantic type scale — apply consistently across chrome components */
  --t-eyebrow: 0.65rem;   /* uppercase labels, section markers */
  --t-label:   0.78rem;   /* meta, captions, button text */
  --t-body:    0.875rem;  /* supporting copy */
  --t-title:   clamp(1.5rem, 1.2rem + 1vw, 1.875rem);

  /* Motion */
  --dur-fast:    160ms;
  --dur-normal:  280ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows lifted from  */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.10);
  --shadow-4: 0 4px 16px rgba(0, 0, 0, 0.08), 0 30px 60px rgba(0, 0, 0, 0.14);

  /* Atmosphere */
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.4'/></svg>");

  /* Hairline rules */
  --sidebar-rule: rgba(255, 255, 255, 0.08);
  --grid-line:    rgba(15, 23, 42, 0.04);
  --app-border-strong: var(--c-ink-300);
}
[data-bs-theme="dark"] {
  --grid-line:    rgba(255, 255, 255, 0.04);
  --app-border-strong: var(--c-ink-700);
}

/* ---- Ambient atmosphere (overrides .content from app.css) ----
   Layered paper grain + corner glows + engineer's-notepad grid.
   Fixed attachment so the atmosphere stays put while content scrolls.
   Dark-mode tuned via tokens.css color-mix. */
.content {
  position: relative;
  background-color: var(--app-surface);
  background-image:
    /* lime spread, top-right */
    radial-gradient(ellipse 720px 460px at 100% -6%, rgba(194, 209, 7, 0.13), transparent 60%),
    /* deep ink, bottom-left for composition */
    radial-gradient(ellipse 520px 360px at -4% 108%, rgba(15, 14, 12, 0.08), transparent 65%),
    /* paper grain */
    var(--texture-grain),
    /* engineer's notepad grid */
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 160px 160px, 48px 48px, 48px 48px;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}
.content > * { position: relative; z-index: 1; }
@media (max-width: 575.98px) {
  .content {
    background-image:
      var(--texture-grain),
      radial-gradient(ellipse 480px 320px at 100% 0%, rgba(194, 209, 7, 0.18), transparent 60%);
    background-size: 160px 160px, 100% 100%;
  }
}
[data-bs-theme="dark"] .content {
  background-image:
    radial-gradient(ellipse 720px 460px at 100% -6%, rgba(214, 224, 70, 0.10), transparent 60%),
    radial-gradient(ellipse 520px 360px at -4% 108%, rgba(0, 0, 0, 0.5), transparent 65%),
    var(--texture-grain),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to right,  var(--grid-line) 1px, transparent 1px);
}

/* ---- Sidebar shell: darker, calmer, more "console" ----
   The base .sidebar rules in  still apply; this
   refines the surface to feel more like a control panel. */
.sidebar {
  background: linear-gradient(
    180deg,
    var(--sidebar-bg) 0%,
    color-mix(in srgb, var(--sidebar-bg) 95%, var(--c-ink-900)) 100%
  );
  box-shadow: 1px 0 0 var(--sidebar-rule), 4px 0 24px rgba(15, 14, 12, 0.04);
}
[data-bs-theme="dark"] .sidebar {
  box-shadow: 1px 0 0 var(--sidebar-rule), 4px 0 32px rgba(0, 0, 0, 0.5);
}

/* ---- Masthead: elevate to "newspaper masthead" character ----
   Bigger date, signature rule, volume mark. Composes with .masthead-* */
.masthead {
  padding: 1.25rem 1.25rem 1rem;
  gap: 0.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-lime-500) 5%, transparent) 0%,
      transparent 60%);
}
.masthead::after {
  /* Editorial page rule under the masthead */
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: -1px;
  height: 1px;
  background: var(--sidebar-rule);
}
.masthead-logo {
  display: block;
  height: 1.85rem;
  width: auto;
}
.masthead-meta {
  font-family: var(--bs-font-monospace);
  font-size: 0.58rem !important;
  letter-spacing: 0.18em !important;
  margin-top: 0.1rem;
  text-transform: uppercase;
  color: var(--sidebar-muted, var(--app-text-muted));
  opacity: 0.7;
}
.masthead-date {
  font-family: var(--bs-font-monospace);
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--sidebar-text);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.masthead-mark {
  font-size: 1.5rem !important;
  letter-spacing: -0.03em !important;
  font-weight: 700;
}
.masthead-suffix {
  font-size: 0.75rem !important;
  letter-spacing: 0.18em !important;
  opacity: 0.75;
}
.masthead-meta {
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  margin-top: 0.1rem;
}
.masthead-date {
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ---- Colophon: instrument readout at the bottom of the sidebar ---- */
.sidebar-colophon {
  padding: 1rem 1.25rem 1.125rem;
  gap: 0.65rem;
  background: color-mix(in srgb, var(--c-ink-900) 3%, transparent);
  border-top: 1px solid var(--sidebar-rule);
}
[data-bs-theme="dark"] .sidebar-colophon {
  background: rgba(255, 255, 255, 0.015);
}

.colophon-row {
  gap: 0.65rem;
  padding: 0.4rem 0;
}
.colophon-row .pip {
  width: 7px;
  height: 7px;
}
.colophon-eyebrow {
  font-size: 0.6rem !important;
  letter-spacing: 0.18em !important;
  opacity: 0.75;
}
.colophon-value {
  font-size: 0.78rem !important;
  letter-spacing: 0;
  font-weight: 500;
}

/* Colophon serial: "v1.41.0 · 12 jul 2026 · 17:14" */
.colophon-serial {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0 0;
  border-top: 1px dashed var(--sidebar-rule);
  font-family: var(--bs-font-monospace);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sidebar-muted, var(--app-text-muted));
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.colophon-serial-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.colophon-serial-line strong {
  color: var(--app-text-heading);
  font-weight: 500;
  opacity: 1;
}

/* ---- Navbar: lift it with a thin signature rule ---- */
/* ---- Top navbar — editorial chrome ----
   Mirrors the masthead vocabulary: monospace eyebrows, lime signature
   rule, icon-button hover, editorial dropdowns with corner brackets. */
.navbar {
  min-height: 60px;
  padding: 0 1.5rem;
  gap: 1rem;
  border-bottom: 1px solid var(--app-border) !important;
  background: color-mix(in srgb, var(--app-surface-raised) 95%, transparent) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.navbar::after {
  /* Signature horizontal mark under the navbar */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--c-lime-500) 30%,
    var(--c-lime-500) 70%,
    transparent 100%
  );
  opacity: 0.4;
  pointer-events: none;
}

/* Sidebar toggler — square pill, lime hover */
.navbar-toggler-sidebar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  color: var(--app-text-heading);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.navbar-toggler-sidebar:hover {
  border-color: var(--c-lime-500);
  background: color-mix(in srgb, var(--c-lime-500) 10%, transparent);
}
/* Sidebar is always visible above 991.98px (see app.css), so the toggler
   that reveals it only makes sense below that breakpoint. */
@media (min-width: 992px) {
  .navbar-toggler-sidebar { display: none; }
}

/* Center context strip — eyebrow with sync pip */
.navbar-context {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--app-text-muted);
}
.navbar-context .pip--accent { background: var(--app-status-ok); }
.navbar-context .sep { opacity: 0.4; }
.navbar-context strong { color: var(--app-text-heading); font-weight: 600; }
@media (max-width: 767.98px) {
  .navbar-context { display: none; }
}

/* Right-side nav cluster */
.navbar .navbar-nav {
  gap: 0.4rem;
  align-items: center;
}
.navbar .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bs-font-monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--app-text-heading);
  background: color-mix(in srgb, var(--c-lime-500) 10%, transparent);
}
.navbar .nav-link i.bi { font-size: 1.05rem; }

/* Notification bell badge — refined to editorial chip */
.navbar .notification-badge {
  top: 2px;
  right: 0;
  transform: none;
  font-size: 0.58rem;
  padding: 0 4px;
  min-width: 16px;
  height: 16px;
  line-height: 1;
  border-radius: 999px;
}

/* Theme trigger — square pill, mirrors the toggler */
.theme-trigger {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  color: var(--app-text-heading);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.theme-trigger:hover,
.theme-trigger:focus {
  border-color: var(--c-lime-500);
  background: color-mix(in srgb, var(--c-lime-500) 10%, transparent);
  color: var(--app-text-heading);
}

/* User trigger — editorial pill with avatar + chevron */
.user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.65rem 0.3rem 0.35rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  font-family: var(--bs-font-monospace);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--app-text-heading);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.user-trigger:hover,
.user-trigger:focus,
.user-trigger[aria-expanded="true"] {
  border-color: var(--c-lime-500);
  background: color-mix(in srgb, var(--c-lime-500) 8%, transparent);
  color: var(--app-text-heading);
}
.user-trigger .user-avatar {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-lime-500);
  color: var(--c-ink-950);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0;
}
.user-trigger .user-name { font-weight: 500; }
.user-trigger .user-chevron {
  font-size: 0.8rem;
  opacity: 0.55;
  margin-left: 0.1rem;
}
@media (max-width: 575.98px) {
  .user-trigger .user-name { display: none; }
  .user-trigger { padding-right: 0.5rem; }
}

/* Dropdown menus — editorial cards with lime corner brackets */
.navbar .dropdown-menu {
  border: 1px solid var(--app-border);
  border-radius: 0.625rem;
  box-shadow: var(--shadow-4);
  padding: 0.5rem;
  background: var(--app-surface-raised);
  min-width: 260px;
  margin-top: 0.6rem !important;
}
.navbar .dropdown-menu::before {
  /* Tiny lime corner mark — matches the login-card vocabulary */
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 1.5px solid var(--c-lime-500);
  border-left: 1.5px solid var(--c-lime-500);
  border-top-left-radius: 0.5rem;
  pointer-events: none;
}
.navbar .dropdown-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--app-text-muted);
  padding: 0.45rem 0.65rem 0.6rem;
  margin: 0;
}
.navbar .dropdown-eyebrow::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--c-lime-500);
}
.navbar .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.4rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--app-text);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: color-mix(in srgb, var(--c-lime-500) 10%, transparent);
  color: var(--app-text-heading);
}
.navbar .dropdown-item i.bi { font-size: 1rem; }
.navbar .dropdown-divider {
  border-color: var(--app-border);
  margin: 0.4rem 0;
}

/* Notification rows inside the menu */
.navbar .dropdown-menu .notif-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.4rem;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.85rem;
  color: var(--app-text);
  font-family: var(--bs-font-sans-serif);
  line-height: 1.25;
}
.navbar .dropdown-menu .notif-row:hover,
.navbar .dropdown-menu .notif-row:focus {
  background: color-mix(in srgb, var(--c-lime-500) 10%, transparent);
  color: var(--app-text);
}
.navbar .dropdown-menu .notif-row .notif-icon {
  font-size: 0.95rem;
  line-height: 1.25;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.navbar .dropdown-menu .notif-row .notif-title { font-weight: 500; }
.navbar .dropdown-menu .notif-row .notif-ts {
  font-family: var(--bs-font-monospace);
  font-size: 0.65rem;
  color: var(--app-text-muted);
  margin-top: 0.1rem;
  letter-spacing: 0.04em;
}
.navbar .dropdown-menu .notif-empty {
  font-family: var(--bs-font-monospace);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  padding: 0.85rem 0.65rem;
  text-align: center;
  margin: 0;
}
.navbar .dropdown-menu .notif-empty::before {
  content: "—";
  display: block;
  margin-bottom: 0.4rem;
  opacity: 0.4;
}

/* ============================================================
   LOGIN SCREEN — refine the auth card into a true moment
   ============================================================ */
.login-page {
  background: var(--app-surface);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 800px 600px at 50% 0%, color-mix(in srgb, var(--c-lime-500) 12%, transparent), transparent 65%),
    radial-gradient(ellipse 600px 400px at 0% 100%, color-mix(in srgb, var(--app-text-heading) 5%, transparent), transparent 65%),
    var(--texture-grain, none);
  background-size: 100% 100%, 100% 100%, 160px 160px;
}

/* Login layout: editorial masthead above the auth card. */
.auth-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem 2rem;
  gap: 1.5rem;
  position: relative;
}
.auth-logo-area { text-align: center; }
.login-wordmark {
  display: inline-flex;
  align-items: baseline;
  margin: 0 auto;
}
.login-logo {
  height: 2.75rem;
  width: auto;
}
/* Two logo variants ship pre-colored for their surface; swap by theme
   instead of recoloring a single asset at runtime. */
.login-logo--for-dark { display: none; }
[data-bs-theme="dark"] .login-logo--for-light { display: none; }
[data-bs-theme="dark"] .login-logo--for-dark { display: inline-block; }
.login-submark {
  margin-top: 0.45rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.36em;
  color: var(--app-text-muted);
}
.login-card {
  width: 100%;
  max-width: 460px;
}
.sso-btn {
  border-radius: 0.5rem;
  padding: 0.6rem 1rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}
.login-card {
  position: relative;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.625rem;
  padding: 2.75rem 2.25rem 2.25rem;
  box-shadow: var(--shadow-4);
  z-index: 1;
}
.login-card::before {
  /* Corner brackets on the card */
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 18px; height: 18px;
  border-top: 1.5px solid var(--c-lime-500);
  border-left: 1.5px solid var(--c-lime-500);
  border-top-left-radius: 0.5rem;
  pointer-events: none;
}
.login-card::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 18px; height: 18px;
  border-bottom: 1.5px solid var(--c-lime-500);
  border-right: 1.5px solid var(--c-lime-500);
  border-bottom-right-radius: 0.5rem;
  pointer-events: none;
}
.login-card h5 {
  font-family: var(--app-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--app-text-heading);
  letter-spacing: -0.035em;
  margin: 0 0 0.5rem;
  font-variation-settings: var(--display-axes);
  line-height: 1.02;
}
.login-card .page-subtitle { color: var(--app-text-muted); }
.login-card .login-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--app-text-muted);
  margin-bottom: 1.5rem;
}
.login-card .login-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--c-lime-500);
}

/* Login divider: rule with centered word */
.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--app-text-muted);
  opacity: 0.65;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--app-border);
}

/* Login card extras: serial number, version mark */
.login-serial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--app-border);
  font-family: var(--bs-font-monospace);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
}
.login-serial .serial-key { color: var(--app-text-heading); opacity: 0.7; }

/* ============================================================
   PAGE HEADER — standard pattern used across detail/list pages
   Pulls together breadcrumbs + title + meta + actions with
   consistent rhythm and editorial structure.
   ============================================================ */
.page-header {
  position: relative;
  padding: 0 0 1.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.page-header::after {
  /* Signature tick mark in the rule */
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 32px;
  height: 3px;
  background: var(--c-lime-500);
  border-radius: 2px;
}

.page-header .breadcrumb {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  padding: 0;
  background: transparent;
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.page-header .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  opacity: 0.4;
  color: var(--app-text-muted);
}
.page-header .breadcrumb-item a {
  color: var(--app-text-muted);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s, color 0.15s;
}
.page-header .breadcrumb-item a:hover {
  opacity: 1;
  color: var(--app-text-heading);
}
.page-header .breadcrumb-item.active {
  color: var(--app-text-heading);
  font-weight: 500;
}

.page-title,
.page-header h1,
.page-header h2,
.page-header h3,
.page-header h4,
.page-header h5 {
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  font-style: normal;
  color: var(--app-text-heading);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-size: var(--t-title);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-subtitle {
  font-size: 0.9375rem;
  color: var(--app-text-muted);
  margin: 0;
  max-width: 65ch;
  line-height: 1.5;
}

/* ============================================================
   EDITORIAL TAB STRIP — drop-in replacement for default nav-tabs
   ============================================================ */
.editorial-tabs {
  border-bottom: 1px solid var(--app-border);
  gap: 0;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-label);
}
.editorial-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.7rem 1rem 0.6rem;
  color: var(--app-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.editorial-tabs .nav-link:hover {
  color: var(--app-text-heading);
  border-bottom-color: var(--app-border-strong);
}
.editorial-tabs .nav-link.active {
  color: var(--app-text-heading);
  border-bottom-color: var(--c-lime-500);
  background: transparent;
}
.editorial-tabs .tab-eyebrow {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--app-text-muted);
  opacity: 0.7;
  margin-right: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.editorial-tabs .nav-link.active .tab-eyebrow {
  color: var(--c-lime-500);
  opacity: 1;
}
.editorial-tabs .nav-link .badge {
  font-size: 0.65rem;
  padding: 2px 7px;
}

/* ============================================================
   LIST PAGE — refine list-card pattern (toolbar composes into header)
   ============================================================ */
.list-card {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.list-card > .table { margin-bottom: 0; }

/* When used WITHOUT a toolbar, the card carries its own editorial header */
.list-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--app-border);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
}
.list-card-header .count {
  margin-left: auto;
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.65rem;
  color: var(--app-text-heading);
}

/* ---- List toolbar (v2) ----
   Splits the toolbar into three slots: scope (count, select-all), filters,
   and actions (primary buttons, dropdowns). Padding mirrors the eyebrow
   header so the toolbar slots line up with the rest of the chrome. */
:root {
  --row-y: .55rem;  /* table row vertical padding for list-card density */
}
/* Comfortable density — toggled globally via density.js, persists in
   localStorage. Attribute lives on <html> so it survives htmx-boosted
   navigation swaps (which only replace #content-root). */
html[data-density="comfortable"] {
  --row-y: 1rem;
}
.list-card-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .65rem 1.125rem;
  border-bottom: 1px solid var(--app-border);
  background: var(--app-surface-raised);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--app-text-muted);
}
.list-card-toolbar--tight { padding: .45rem 1.125rem; }
.list-card-toolbar > .list-toolbar-scope,
.list-card-toolbar > .list-toolbar-filters,
.list-card-toolbar > .list-toolbar-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.list-card-toolbar > .list-toolbar-actions { justify-content: flex-end; }
.list-card-toolbar > .list-toolbar-filters { font-family: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; }

/* ---- Toolbar with inline filter form ----
   The filters slot hosts a flex row of selects + filter/reset buttons.
   Stays a single visual band at any width: flex-wrap on small screens,
   horizontal scroll as a safety net for very narrow viewports. */
.list-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  min-width: 0;
}
.list-toolbar-filters > .status-strip-select {
  font-family: inherit;
  font-size: inherit;
  color: var(--app-text-heading);
  background: transparent;
  border: 1px solid var(--app-border);
  border-radius: .375rem;
  padding: .25rem 1.75rem .25rem .5rem;
  cursor: pointer;
}
.list-toolbar-filters > .status-strip-select:focus {
  outline: 2px solid color-mix(in srgb, var(--app-accent-emphasis) 35%, transparent);
  outline-offset: 1px;
  color: var(--app-accent-emphasis);
}

/* ---- Table search input ----
   Auto-injected into .list-toolbar-filters by dashboard.js. Sized so it
   doesn't crowd the filter selects; flex-grows in wide toolbars. */
.list-toolbar-search {
  min-width: 12rem;
  max-width: 18rem;
  flex: 0 1 16rem;
}

/* Progressive-disclosure filter panel — sits BELOW the toolbar when the
   "+N Filter" toggle is opened. Each row is a labelled select; the panel
   itself is a flex row so the rows flow horizontally when there's room. */
.list-toolbar-more-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem .75rem;
  padding: .65rem 1.125rem;
  background: var(--app-surface-sunken);
  border-bottom: 1px solid var(--app-border);
}
.list-toolbar-more-filters .toolbar-filter-row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: 0;
  min-width: 12rem;
  flex: 0 1 16rem;
}
.list-toolbar-more-filters .toolbar-filter-label {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--app-text-muted);
}
.list-toolbar-more-filters .status-strip-select {
  width: 100%;
  font-size: .8125rem;
  color: var(--app-text-heading);
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: .375rem;
  padding: .35rem 1.75rem .35rem .55rem;
}

@media (max-width: 768px) {
  /* On narrow screens, scope + filters + actions stack into three rows
     but the filters row stays a single wrapping band of selects + buttons
     (per design requirement: "all filters in one row even on mobile"). */
  .list-card-toolbar--filters {
    grid-template-columns: 1fr;
    row-gap: .5rem;
  }
  .list-card-toolbar--filters > .list-toolbar-filters {
    overflow-x: auto;
    flex-wrap: wrap;
    scrollbar-width: thin;
    padding-bottom: .25rem;
  }
  .list-card-toolbar--filters > .list-toolbar-actions {
    justify-content: flex-start;
  }
}

/* Tighter table rows under list-card; keep table-sm rows compatible. */
.list-card .table > :not(caption) > * > * { padding-block: var(--row-y); }

/* ---- Bulk panel (card-within-card) ----
   Replaces the .bg-light.collapse pattern. Identical surface to the parent
   list-card so the eye reads it as a drawer, not a separate form. */
.bulk-panel {
  background: var(--app-surface-sunken);
  border-bottom: 1px solid var(--app-border);
}
.bulk-panel-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  padding: 1rem 1.125rem .5rem;
}
.bulk-panel-footer {
  display: flex;
  justify-content: flex-end;
  padding: .25rem 1.125rem 1rem;
  border-top: 1px dashed var(--app-border);
  margin-top: .5rem;
}

/* ---- Group toggle chip ----
   Labelled "+N" / "−N" replaces the rotating chevron. Keeps the same
   click target so the existing localStorage persistence contract is intact. */
.group-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-family: var(--bs-font-monospace);
  font-size: .7rem;
  font-weight: 500;
  color: var(--app-text-muted);
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: .35rem;
  cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.group-toggle-chip:hover { background: var(--app-surface); border-color: var(--app-accent); }
.group-toggle-chip[aria-expanded="true"] {
  background: var(--app-accent-subtle);
  border-color: var(--app-accent);
  color: var(--app-accent-emphasis);
}
tr.group-expanded .group-toggle-chip[aria-expanded="true"] i { transform: rotate(0deg); }

/* ---- Domain list: split out subdomain rows under their apex ----
   Subdomains collapse by default; the chip on the apex row toggles
   `.is-expanded` on each sibling subdomain row to reveal it. The
   `.group-expanded` class on the apex keeps the chip in its expanded
   state. Previously lived as an inline <style> block in list.html,
   which drifted out of sync after the v2 chrome refactor (commit
   37425ff) — moving it here ensures the rules stay loaded everywhere
   the page renders. */
tr.subdomain-row { display: none; }
tr.subdomain-row.is-expanded { display: table-row; }
tr.subdomain-row > td:first-child { padding-left: 2.5rem; }
tr.subdomain-row .table-mono { color: var(--bs-secondary); }

/* ============================================================
   NEUTRAL TOOLBAR — single clean row (ref: neutral SaaS toolbar)
   Filters collapse behind one "Filter" dropdown; search sits right.
   Neutralises the mono/uppercase eyebrow chrome on the toolbar so the
   whole list header reads calm instead of terminal.
   ============================================================ */
.list-card-toolbar {
  font-family: var(--bs-body-font-family);
  text-transform: none;
  letter-spacing: normal;
  font-size: .8125rem;
  color: var(--app-text-heading);
}
.list-card-toolbar .list-toolbar-scope { color: var(--app-text-muted); }
/* Toolbar + page-header buttons drop the global editorial uppercase so the
   list header reads as one coherent neutral surface (sentence-case). */
.list-card-toolbar .btn,
.page-header .btn { text-transform: none; letter-spacing: normal; }
.list-card-toolbar .count {
  font-family: var(--bs-body-font-family);
  text-transform: none;
  letter-spacing: normal;
}

/* Filters slot hugs the right on one line — search + Filter dropdown. */
.list-toolbar-filters {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: .5rem;
}

/* Search input with a leading icon.
   ponytail: padding/font-size mirror .btn-sm so the input sits on the same
   baseline as the toolbar buttons — without this the input ends up shorter
   (Bootstrap .form-control-sm defaults → ~23px vs .btn-sm → ~29px) and
   floats low inside the stretched flex form. */
.toolbar-search { position: relative; flex: 0 1 18rem; min-width: 10rem; }
.toolbar-search > .bi {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--app-text-muted); font-size: .85rem; pointer-events: none;
}
.toolbar-search > input {
  padding: .35rem .7rem .35rem 1.9rem;  /* right matches .btn-sm, left keeps room for the icon */
  font-size: var(--t-eyebrow);
  line-height: 1.5;
  height: auto;
  border-radius: .5rem;
  background: var(--app-surface-sunken);
  border-color: var(--app-border);
}
.toolbar-search > input:focus {
  background: var(--app-surface-raised);
  border-color: var(--c-blue-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-blue-500) 18%, transparent);
}

/* Neutral toolbar action button (Filter, Bulk-Aktionen, …). */
.btn-toolbar {
  display: inline-flex; align-items: center; gap: .35rem;
  flex-wrap: nowrap;          /* override Bootstrap .btn-toolbar (wrap) so icon+text stay on one line */
  white-space: nowrap;
  font-family: var(--bs-body-font-family);
  font-weight: 500; text-transform: none; letter-spacing: normal;
  color: var(--app-text-heading);
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: .5rem;
}
.btn-toolbar:hover {
  background: var(--app-surface-sunken);
  border-color: var(--app-border-strong);
  color: var(--app-text-heading);
}
.btn-toolbar.is-active {
  border-color: var(--c-blue-500);
  color: var(--c-blue-500);
}
.btn-toolbar.is-active:hover {
  background: color-mix(in srgb, var(--c-blue-500) 6%, var(--app-surface-sunken));
  border-color: var(--c-blue-500);
  color: var(--c-blue-500);
}
.btn-toolbar.dropdown-toggle::after { margin-left: .1rem; opacity: .5; }

/* Toolbar search + filter slot.
   ponytail: form (default display:block, with browser-default margins) is
   reset + made a flex row so its children align with the buttons in the
   trailing grid cell. align-self: end collapses the form to its content
   height so the stretched-grid centering doesn't push it below the row. */
.toolbar-filters {
  display: flex;
  align-items: center;
  gap: .5rem .75rem;
  justify-self: end;
  align-self: center;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* Active-filter dot — shown on the "Filter" trigger when any filter_spec
   has a value, so users know filters are applied without a chip row. */
.toolbar-filter-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-blue-500); display: inline-block;
  margin-left: .35rem;
}

/* ============================================================
   FILTER MODAL — opened by the toolbar's single "Filter" button
   Editorial chrome: eyebrow header, corner brackets, monospace labels.
   Lives portaled to <body> (see wireFilterModals in dashboard.js) so
   htmx-boosted nav can't destroy it mid-edit.
   ============================================================ */
.filter-modal .modal-content {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-4);
  overflow: hidden;
  position: relative;
}
.filter-modal .modal-content::before,
.filter-modal .modal-content::after {
  /* Corner brackets — mirror the login-card vocabulary */
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  pointer-events: none;
}
.filter-modal .modal-content::before {
  top: -1px; left: -1px;
  border-top: 1.5px solid var(--c-lime-500);
  border-left: 1.5px solid var(--c-lime-500);
  border-top-left-radius: 0.625rem;
}
.filter-modal .modal-content::after {
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--c-lime-500);
  border-right: 1.5px solid var(--c-lime-500);
  border-bottom-right-radius: 0.625rem;
}
.filter-modal .modal-header {
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 1px solid var(--app-border);
  padding: 1.1rem 1.25rem 0.9rem;
  position: relative;
}
.filter-modal .modal-header .filter-modal-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--app-text-muted);
  margin-bottom: 0.5rem;
}
.filter-modal .modal-title {
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  color: var(--app-text-heading);
  margin: 0;
}
.filter-modal .btn-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-size: 0.85rem;
  color: var(--app-text-muted);
  opacity: 0.7;
}
.filter-modal .btn-close:hover { opacity: 1; color: var(--app-text-heading); }

/* Filter grid — 2 cols on wide, 1 col on narrow */
.filter-modal .modal-body {
  padding: 1.1rem 1.25rem 0.5rem;
}
.filter-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem 1rem;
}
.filter-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}
.filter-modal-label {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  font-weight: 500;
}
.filter-modal-field .status-strip-select {
  font-family: var(--bs-body-font-family);
  font-size: 0.875rem;
  color: var(--app-text-heading);
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 0.5rem 2rem 0.5rem 0.7rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.filter-modal-field .status-strip-select:hover { border-color: var(--app-border-strong); }
.filter-modal-field .status-strip-select:focus {
  outline: none;
  background: var(--app-surface-raised);
  border-color: var(--c-lime-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lime-500) 18%, transparent);
}

.filter-modal .modal-footer {
  border-top: 1px dashed var(--app-border);
  padding: 0.85rem 1.25rem;
  justify-content: space-between;
  gap: 0.5rem;
}
.filter-modal-reset {
  margin-right: auto;
}

/* ---- Dark-mode overrides for the v2 list chrome ---- */
[data-bs-theme="dark"] .list-card-toolbar { background: var(--app-surface-sunken); }
[data-bs-theme="dark"] .bulk-panel { background: rgba(255,255,255,.02); }

/* Pagination strip — terminal-style meta on the left, controls on the right */
.pagination-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  /* ponytail: keep meta + buttons off the container edge so they don't sit flush */
  padding-inline: 0.5rem;
}

/* ponytail: align note-card body padding with the chrome 1.125rem horizontal
   rhythm used by .list-card-toolbar / .list-card-header so the legend and
   the info card sit visually flush with the table they describe. */
.card-note > .card-body { padding-inline: 1.125rem; }
.pagination-strip-meta {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--app-text-muted);
}

/* ============================================================
   Hero attention block — refined composition
   The single most important visual moment on the overview.
   ============================================================ */
.hero-attention {
  position: relative;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.75rem;
  padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  overflow: hidden;
  box-shadow: var(--shadow-3);
  isolation: isolate;
}
.hero-attention::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, var(--app-accent) 0%, transparent 100%);
  z-index: 2;
}
.hero-attention::after {
  /* Atmospheric corner glow inside the panel */
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle at 70% 30%, color-mix(in srgb, var(--c-lime-500) 8%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-attention--quiet::before { background: var(--app-status-ok); }

/* ============================================================
   Stack panel + module panel: refined for the overview
   ============================================================ */
.stack-panel {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 1.125rem 1.25rem 1.125rem;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 100%;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-expo);
}
.stack-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.stack-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--app-text-muted);
}
.stack-panel-value {
  font-family: var(--app-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--app-text-heading);
  font-variation-settings: var(--display-axes);
  font-feature-settings: "lnum", "tnum";
  font-variant-numeric: tabular-nums lining-nums;
}
.stack-panel-detail {
  font-size: var(--t-body);
  color: var(--app-text-muted);
  line-height: 1.45;
}
.stack-panel-action {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-label);
  color: var(--app-accent-emphasis);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.stack-panel-action::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out-expo);
}
.stack-panel-action:hover { text-decoration: underline; }
.stack-panel-action:hover::after { transform: translateX(2px); }

/* ============================================================
   Activity feed — refined "shell transcript" look
   ============================================================ */
.activity-feed {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.activity-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--app-border);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--app-text-muted);
}
.activity-feed-list li {
  display: grid;
  grid-template-columns: 8px 90px 1fr;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.125rem;
  border-bottom: 1px solid var(--app-border);
}
.activity-feed-list li:last-child { border-bottom: none; }
.activity-feed-list .ts {
  color: var(--app-text-muted);
  font-size: var(--t-eyebrow);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.activity-feed-list .msg {
  color: var(--app-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   Module panel — list of CRM/DNS/Hosting modules
   ============================================================ */
.module-panel {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 1.125rem 1.25rem 1.125rem;
  box-shadow: var(--shadow-1);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-fast) var(--ease-out-expo),
              border-color var(--dur-fast) ease;
}
.module-panel::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: var(--module-color, var(--app-border));
  border-radius: 0.5rem 0 0 0.5rem;
}
.module-panel:hover,
.module-panel:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--module-color, var(--app-accent)) 50%, var(--app-border));
}
.module-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--app-text-muted);
}
.module-panel-name {
  font-family: var(--bs-body-font-family);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.1;
  color: var(--app-text-heading);
  letter-spacing: -0.01em;
}

/* ============================================================
   Status strip — terminal-style status row
   ============================================================ */
.status-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0.75rem 1.125rem;
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-label);
  color: var(--app-text-muted);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}
.status-strip::before {
  /* Faint scan stripe */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 3px,
    color-mix(in srgb, var(--app-text-heading) 1.5%, transparent) 3px,
    color-mix(in srgb, var(--app-text-heading) 1.5%, transparent) 4px
  );
  pointer-events: none;
}
.status-strip > * {
  position: relative;
  z-index: 1;
}
.status-strip > * + * {
  padding-left: 1rem;
  margin-left: 1rem;
  border-left: 1px solid var(--app-border);
}
.status-strip-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--t-eyebrow);
  color: var(--app-text-muted);
  opacity: 0.7;
  margin-right: 0.4rem;
}
.status-strip-value {
  color: var(--app-text-heading);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---- Status strip variant used for table filter bars ---- */
.status-strip--filters {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.status-strip-select {
  background: transparent;
  border: none;
  color: var(--app-text-heading);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  padding: 0 1.25rem 0 0;
  margin: 0;
  cursor: pointer;
}
.status-strip-select:focus {
  outline: none;
  color: var(--app-accent-emphasis);
}

/* ============================================================
   Bridge header — greeting moment on overview
   ============================================================ */
.bridge-header {
  margin-bottom: 1.5rem;
  position: relative;
}
.bridge-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--app-text-muted);
  margin-bottom: 1rem;
}
.bridge-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--c-lime-500);
}
.bridge-eyebrow > .dot {
  width: 6px;
  height: 6px;
  background: var(--app-status-ok);
  border-radius: 50%;
  display: inline-block;
}
.bridge-eyebrow > .sep {
  opacity: 0.4;
  margin: 0 0.25rem;
}
.bridge-sub {
  font-size: 1rem;
  color: var(--app-text-muted);
  max-width: 60ch;
  margin: 1rem 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.bridge-sub strong { color: var(--app-text-heading); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Bridge headline — the masthead moment on overview. */
.bridge-headline {
  font-family: var(--app-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--app-text-heading);
  margin: 0.25rem 0 0;
  font-variation-settings: var(--display-axes);
}
.bridge-headline em {
  font-family: var(--bs-body-font-family);
  font-style: normal;
  font-weight: 700;
  color: var(--app-text-heading);
  font-feature-settings: "lnum";
}

/* Section label used to break the page into bands */
.section-label {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--app-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.section-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--c-lime-500);
}

/* ============================================================
   Pip / status indicator — refined micro-component
   ============================================================ */
.pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--app-text-muted);
  position: relative;
}
.pip--ok      { background: var(--app-status-ok); }
.pip--warn    { background: var(--app-status-warn); }
.pip--error   { background: var(--app-status-error); }
.pip--sync    { background: var(--app-status-syncing); }
.pip--accent  { background: var(--app-accent); }
.pip--pulse::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  color: var(--app-status-syncing);
  animation: pip-pulse 2s var(--ease-out-expo) infinite;
  opacity: 0;
}
@keyframes pip-pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ============================================================
   Chart frame — refine the chart wrapper
   ============================================================ */
.chart-frame {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-1);
}
.chart-frame-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--app-text-muted);
  margin-bottom: 0.75rem;
}

/* ============================================================
   Empty states — terminal aesthetic
   ============================================================ */
.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  font-family: var(--bs-font-monospace);
  font-size: 0.85rem;
  color: var(--app-text-muted);
  background: var(--app-surface-raised);
  border: 1px dashed var(--app-border);
  border-radius: 0.5rem;
}
.empty-state .empty-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background: currentColor;
  vertical-align: text-bottom;
  margin-left: 0.25em;
  animation: cursor-blink 1.1s steps(2) infinite;
  opacity: 0.6;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

/* ============================================================
   FORM CONTROLS — editorial-fied Bootstrap
   Flat surface, lime focus ring, monospace eyebrow labels.
   ============================================================ */
.form-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.form-label .required {
  color: var(--c-lime-500);
  font-family: var(--bs-font-monospace);
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1;
}
.form-text {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--app-text-muted);
  opacity: 0.85;
}

.form-control,
.form-select {
  background: var(--app-surface-raised);
  color: var(--app-text-heading);
  border: 1px solid var(--app-border);
  border-radius: 0.375rem;
  padding: 0.55rem 0.75rem;
  font-size: var(--t-body);
  line-height: 1.4;
  box-shadow: none;
  transition: border-color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease,
              background-color var(--dur-fast) ease;
}
.form-control::placeholder { color: var(--app-text-muted); opacity: 0.55; }
.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
  border-color: var(--app-border-strong);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--c-lime-500);
  background: var(--app-surface-raised);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lime-500) 22%, transparent);
}
.form-control:disabled,
.form-select:disabled {
  background: var(--app-surface-sunken);
  color: var(--app-text-muted);
  opacity: 0.7;
}

/* File input — squared, dashed-when-empty feel via subtle border */
.form-control[type="file"] {
  padding: 0.45rem 0.6rem;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-label);
  color: var(--app-text-muted);
}
.form-control[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  background: var(--app-surface);
  color: var(--app-text-heading);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.form-control[type="file"]::file-selector-button:hover {
  background: color-mix(in srgb, var(--c-lime-500) 14%, var(--app-surface));
  border-color: var(--c-lime-500);
}

/* Checkboxes + radios — square corners, lime check */
.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.form-check-input {
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.18em;
  margin-right: 0.5em;
  background-color: var(--app-surface-raised);
  border: 1px solid var(--app-border-strong);
  border-radius: 0.2rem;
  box-shadow: none;
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
  cursor: pointer;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:hover:not(:disabled) {
  border-color: var(--c-lime-500);
}
.form-check-input:focus {
  border-color: var(--c-lime-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lime-500) 22%, transparent);
  outline: none;
}
.form-check-input:checked {
  background-color: var(--c-lime-500);
  border-color: var(--c-lime-500);
}
.form-check-input:checked[type="radio"]::after {
  /* Inner dot for radio */
  content: "";
  display: block;
  width: 0.4em;
  height: 0.4em;
  margin: 0.28em auto 0;
  border-radius: 50%;
  background: var(--c-ink-950);
}
.form-check-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.form-check-label {
  font-size: var(--t-body);
  color: var(--app-text-heading);
  cursor: pointer;
}

/* Switch — sliding track, lime thumb */
.form-switch {
  padding-left: 2.5em;
  min-height: 1.5em;
}
.form-switch .form-check-input {
  width: 2em;
  height: 1.15em;
  margin-left: -2.5em;
  background-color: var(--app-surface-sunken);
  border: 1px solid var(--app-border-strong);
  border-radius: 999px;
  background-image: none;
  cursor: pointer;
  position: relative;
}
.form-switch .form-check-input::before {
  /* The thumb */
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(1.15em - 4px);
  height: calc(1.15em - 4px);
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border-strong);
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
.form-switch .form-check-input:checked {
  background-color: var(--c-lime-500);
  border-color: var(--c-lime-500);
}
.form-switch .form-check-input:checked::before {
  transform: translateX(0.85em);
  background: var(--c-ink-950);
  border-color: var(--c-ink-950);
}
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lime-500) 22%, transparent);
}

/* Range — flat track, lime fill */
.form-range {
  width: 100%;
  height: 1.25rem;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0.25rem 0;
}
.form-range:focus {
  outline: none;
}
.form-range::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--app-border-strong);
  border-radius: 999px;
}
.form-range::-moz-range-track {
  height: 4px;
  background: var(--app-border-strong);
  border-radius: 999px;
}
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: var(--c-lime-500);
  border: 2px solid var(--c-ink-950);
  border-radius: 50%;
  box-shadow: none;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--c-lime-500);
  border: 2px solid var(--c-ink-950);
  border-radius: 50%;
  box-shadow: none;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.form-range:hover::-webkit-slider-thumb,
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-lime-500) 22%, transparent);
}
.form-range:hover::-moz-range-thumb,
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-lime-500) 22%, transparent);
}

/* Input group — cohesive, no pill radius */
.input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  border-radius: 0.375rem;
}
.input-group > .form-control,
.input-group > .form-select {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  border-radius: 0.375rem;
  position: relative;
  z-index: 1;
}
.input-group > .form-control + .form-control,
.input-group > .form-control + .form-select,
.input-group > .form-select + .form-control,
.input-group > .form-select + .form-select {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .input-group-text {
  display: flex;
  align-items: center;
  padding: 0.55rem 0.75rem;
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border);
  color: var(--app-text-muted);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.input-group > .input-group-text + .form-control,
.input-group > .input-group-text + .form-select {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group:focus-within > .form-control,
.input-group:focus-within > .form-select,
.input-group:focus-within > .input-group-text {
  border-color: var(--c-lime-500);
}

/* Invalid state — red rail + red border */
.form-control.is-invalid,
.form-select.is-invalid,
.form-check-input.is-invalid {
  border-color: var(--app-status-error);
  background-image: none;
  padding-right: 0.75rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--app-status-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-status-error) 22%, transparent);
}
.invalid-feedback {
  display: block;
  margin-top: 0.35rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--app-status-error);
  font-family: var(--bs-font-monospace);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--app-status-error);
  text-transform: uppercase;
}

/* Form section — dashed top rule + eyebrow label band */
.form-section {
  position: relative;
  padding: 1.5rem 1.25rem 0.25rem;
  margin-top: 1.25rem;
  border-top: 1px dashed var(--app-border);
}
.form-section:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0.25rem;
}
.form-section > .form-section-label,
.form-section > label.form-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  top: -0.55rem;
  left: 1rem;
  padding: 0.1rem 0.55rem;
  background: var(--app-surface);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--app-text-muted);
}
.form-section > .form-section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c-lime-500);
  border-radius: 50%;
  display: inline-block;
}

/* Form actions row — dashed separator above submit/cancel bar */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--app-border);
}
.form-actions .btn { margin: 0; }

/* ============================================================
   BUTTONS — ghost, icon, link, size, loading
   ============================================================ */
.btn-ghost {
  --bs-btn-color: var(--app-text-heading);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--app-text-heading);
  --bs-btn-hover-bg: color-mix(in srgb, var(--c-lime-500) 10%, transparent);
  --bs-btn-hover-border-color: var(--c-lime-500);
  --bs-btn-active-color: var(--app-text-heading);
  --bs-btn-active-bg: color-mix(in srgb, var(--c-lime-500) 18%, transparent);
  --bs-btn-active-border-color: var(--c-lime-500);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0.375rem;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--app-border);
  color: var(--app-text-muted);
  border-radius: 0.375rem;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur-fast) ease,
              background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
.btn-icon:hover,
.btn-icon:focus-visible {
  color: var(--app-text-heading);
  background: color-mix(in srgb, var(--c-lime-500) 12%, transparent);
  border-color: var(--c-lime-500);
}
.btn-icon.btn-icon-sm { width: 1.85rem; height: 1.85rem; font-size: 0.8rem; }
.btn-icon.btn-icon-lg { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }

.btn-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--c-lime-700);
  font-family: var(--bs-body-font-family);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) ease;
}
.btn-link:hover,
.btn-link:focus-visible {
  color: var(--c-lime-500);
  text-decoration: none;
}
[data-bs-theme="dark"] .btn-link { color: var(--c-lime-300); }
[data-bs-theme="dark"] .btn-link:hover,
[data-bs-theme="dark"] .btn-link:focus-visible { color: var(--c-lime-500); }

/* Size refinements — keep editorial uppercase mono on small/large */
.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--bs-font-monospace);
  font-weight: 500;
  border-radius: 0.3rem;
}
/* ponytail: .btn-toolbar.btn-sm overrides the chrome .btn-sm rule above so
   the toolbar buttons read as ONE shape with the search input:
   - same .5rem border-radius (input uses .5rem; chrome .btn-sm was .3rem)
   - body font + sentence-case + normal letter-spacing (input is body font,
     not the chrome .btn-sm uppercase monospace)
   Padding + font-size already match (.35rem .7rem, var(--t-eyebrow)). */
.btn-toolbar.btn-sm {
  border-radius: 0.5rem;
  text-transform: none;
  letter-spacing: normal;
  font-family: var(--bs-body-font-family);
}
.btn-lg {
  padding: 0.75rem 1.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  font-weight: 600;
  border-radius: 0.45rem;
}

/* Button loading — re-exposed here for editorial contexts.
   The base rule lives in app.css; this just makes sure primary + ghost
   variants look right while the spinner is showing. */
.btn-primary.btn-loading::after,
.btn-outline-primary.btn-loading::after {
  color: var(--c-ink-950);
}

/* ============================================================
   TABLES — editorial
   Flat, hairline row borders, tabular nums, tight padding.
   ============================================================ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text-heading);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: color-mix(in srgb, var(--app-text-heading) 2%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--c-lime-500) 8%, transparent);
  margin-bottom: 0;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  border-color: var(--app-border);
}
.table > :not(caption) > * > * {
  padding: 0.7rem 0.95rem;
  border-bottom-color: var(--app-border);
  vertical-align: middle;
}
.table thead th {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  font-weight: 500;
  background: var(--app-surface-sunken);
  border-bottom: 1px solid var(--app-border);
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  white-space: nowrap;
}
.table tbody tr:hover > * {
  background-color: color-mix(in srgb, var(--c-lime-500) 8%, transparent);
  color: var(--app-text-heading);
}
.table-sm > :not(caption) > * > * {
  padding: 0.4rem 0.7rem;
}

/* Numeric/date columns — right-align data and header alike so figures
   compare cleanly; .table already sets tabular-nums for the whole table. */
.table th.num-cell,
.table td.num-cell {
  text-align: right;
}
.table-sm thead th {
  font-size: 0.6rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* Sticky table head — drop on .table via .table-sticky */
.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--app-surface-raised);
  box-shadow: inset 0 -1px 0 var(--app-border);
}

/* Sticky first/last column — opt-in via .table-sticky-edges on wide tables
   so the identifying column and row actions stay reachable while scrolling
   horizontally. Desktop-only; mobile switches to the stacked-card layout
   below, where sticky columns make no sense. */
@media (min-width: 768px) {
  .table-sticky-edges > :not(caption) > * > *:first-child,
  .table-sticky-edges > :not(caption) > * > *:last-child {
    position: sticky;
    z-index: 1;
    background: var(--app-surface-raised);
  }
  .table-sticky-edges > :not(caption) > * > *:first-child { left: 0; box-shadow: 1px 0 0 var(--app-border); }
  .table-sticky-edges > :not(caption) > * > *:last-child { right: 0; box-shadow: -1px 0 0 var(--app-border); }
  .table-sticky-edges thead > * > *:first-child,
  .table-sticky-edges thead > * > *:last-child {
    z-index: 3;
    background: var(--app-surface-sunken);
  }
  .table-sticky-edges tbody tr:hover > *:first-child,
  .table-sticky-edges tbody tr:hover > *:last-child {
    background: color-mix(in srgb, var(--c-lime-500) 8%, var(--app-surface-raised));
  }
  [data-bs-theme="dark"] .table-sticky-edges > :not(caption) > * > *:first-child,
  [data-bs-theme="dark"] .table-sticky-edges > :not(caption) > * > *:last-child {
    background: var(--app-surface-raised);
  }
  [data-bs-theme="dark"] .table-sticky-edges thead > * > *:first-child,
  [data-bs-theme="dark"] .table-sticky-edges thead > * > *:last-child {
    background: rgba(255, 255, 255, 0.025);
  }
  [data-bs-theme="dark"] .table-sticky-edges tbody tr:hover > *:first-child,
  [data-bs-theme="dark"] .table-sticky-edges tbody tr:hover > *:last-child {
    background: color-mix(in srgb, var(--c-lime-300) 10%, var(--app-surface-raised));
  }
}

/* Horizontal scroll shadow cues — wired by wireScrollShadows() in
   dashboard.js. Opt-in via .table-responsive on wide tables (netcup,
   API keys) to hint that columns are hidden off-screen. */
.table-responsive {
  position: relative;
}
.table-responsive::before,
.table-responsive::after {
  content: "";
  position: sticky;
  top: 0;
  width: 24px;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out-expo);
  z-index: 4;
}
.table-responsive::before {
  left: 0;
  margin-right: -24px;
  float: left;
  background: linear-gradient(to right, color-mix(in srgb, var(--app-surface-raised) 90%, transparent), transparent);
}
.table-responsive::after {
  right: 0;
  margin-left: -24px;
  float: right;
  background: linear-gradient(to left, color-mix(in srgb, var(--app-surface-raised) 90%, transparent), transparent);
}
.table-responsive.has-scroll-start::before,
.table-responsive.has-scroll-end::after {
  opacity: 1;
}

/* Mobile card-collapse — every list-card table stacks into label/value
   cards below the tablet breakpoint. Labels come from the <thead> cell
   text at runtime (see wireMobileCardLabels in dashboard.js) rather than
   per-template markup, so this applies to every list-card table for free. */
@media (max-width: 767.98px) {
  .list-card table.table thead { display: none; }
  .list-card table.table,
  .list-card table.table tbody,
  .list-card table.table tr,
  .list-card table.table td {
    display: block;
    width: 100%;
  }
  .list-card table.table tbody tr {
    padding: .65rem .95rem;
    border-bottom: 1px solid var(--app-border);
  }
  .list-card table.table tr.subdomain-row:not(.is-expanded) { display: none; }
  .list-card table.table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .2rem 0;
    border-bottom: none;
    text-align: right;
  }
  .list-card table.table td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .list-card table.table td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    text-align: left;
    font-family: var(--bs-font-monospace);
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--app-text-muted);
  }
}

/* Empty-state row — centered, mono, muted */
.table-empty td {
  text-align: center;
  padding: 2.5rem 1rem !important;
  color: var(--app-text-muted);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  background: var(--app-surface-sunken);
  border-bottom: none !important;
}

/* Dark-mode table — same shape, but darker surface and brighter lime hover */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text-heading);
  --bs-table-border-color: var(--app-border);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: color-mix(in srgb, var(--c-lime-300) 10%, transparent);
}
[data-bs-theme="dark"] .table thead th {
  background: rgba(255, 255, 255, 0.025);
  color: var(--app-text-muted);
}
[data-bs-theme="dark"] .table tbody tr:hover > * {
  background-color: color-mix(in srgb, var(--c-lime-300) 10%, transparent);
}
[data-bs-theme="dark"] .table-empty td { background: rgba(255, 255, 255, 0.015); }

/* ============================================================
   CARDS / SURFACES — elevated, inset, outlined, accent rails
   ============================================================ */
.card-elevated {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: var(--shadow-3);
}
.card-inset {
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
}
.card-outlined {
  background: var(--app-surface-raised);
  border: 1.5px solid var(--app-border-strong);
  border-radius: 0.5rem;
  padding: 1.25rem;
  box-shadow: none;
}

/* Accent rail — left vertical band, tone-tinted */
.accent-rail-lime,
.accent-rail-indigo,
.accent-rail-green,
.accent-rail-violet,
.accent-rail-red,
.accent-rail-blue,
.accent-rail-amber {
  position: relative;
  padding-left: 0.95rem;
}
.accent-rail-lime::before,
.accent-rail-indigo::before,
.accent-rail-green::before,
.accent-rail-violet::before,
.accent-rail-red::before,
.accent-rail-blue::before,
.accent-rail-amber::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 3px;
  border-radius: 2px;
}
.accent-rail-lime::before    { background: var(--c-lime-500); }
.accent-rail-indigo::before  { background: #6366f1; }
.accent-rail-green::before   { background: #16a34a; }
.accent-rail-violet::before  { background: #8b5cf6; }
.accent-rail-red::before     { background: #dc2626; }
.accent-rail-blue::before    { background: #2563eb; }
.accent-rail-amber::before   { background: #f59e0b; }
[data-bs-theme="dark"] .accent-rail-lime::before    { background: var(--c-lime-300); }
[data-bs-theme="dark"] .accent-rail-indigo::before  { background: #818cf8; }
[data-bs-theme="dark"] .accent-rail-green::before   { background: #4ade80; }
[data-bs-theme="dark"] .accent-rail-violet::before  { background: #a78bfa; }
[data-bs-theme="dark"] .accent-rail-red::before     { background: #f87171; }
[data-bs-theme="dark"] .accent-rail-blue::before    { background: #60a5fa; }
[data-bs-theme="dark"] .accent-rail-amber::before   { background: #fbbf24; }

/* Accent dot — small tone marker in the top-left corner */
.accent-dot-lime,
.accent-dot-indigo,
.accent-dot-green,
.accent-dot-violet,
.accent-dot-red,
.accent-dot-blue,
.accent-dot-amber {
  position: relative;
}
.accent-dot-lime::before,
.accent-dot-indigo::before,
.accent-dot-green::before,
.accent-dot-violet::before,
.accent-dot-red::before,
.accent-dot-blue::before,
.accent-dot-amber::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.accent-dot-lime::before    { background: var(--c-lime-500); }
.accent-dot-indigo::before  { background: #6366f1; }
.accent-dot-green::before   { background: #16a34a; }
.accent-dot-violet::before  { background: #8b5cf6; }
.accent-dot-red::before     { background: #dc2626; }
.accent-dot-blue::before    { background: #2563eb; }
.accent-dot-amber::before   { background: #f59e0b; }
[data-bs-theme="dark"] .accent-dot-lime::before    { background: var(--c-lime-300); }
[data-bs-theme="dark"] .accent-dot-indigo::before  { background: #818cf8; }
[data-bs-theme="dark"] .accent-dot-green::before   { background: #4ade80; }
[data-bs-theme="dark"] .accent-dot-violet::before  { background: #a78bfa; }
[data-bs-theme="dark"] .accent-dot-red::before     { background: #f87171; }
[data-bs-theme="dark"] .accent-dot-blue::before    { background: #60a5fa; }
[data-bs-theme="dark"] .accent-dot-amber::before   { background: #fbbf24; }

/* ============================================================
   BADGES / CHIPS — small, square, tone-tinted
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* letter-spacing only trails the last glyph, so trim the right
     padding by that amount to keep the text visually centered. */
  padding: 2px calc(8px - 0.12em) 2px 8px;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid;
  border-radius: 0.25rem;
  background: transparent;
  white-space: nowrap;
}
.chip-lg {
  padding: 4px calc(12px - 0.1em) 4px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  border-radius: 0.3rem;
}
.chip > .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chip-ok      { color: var(--app-status-ok);     border-color: color-mix(in srgb, var(--app-status-ok) 45%, transparent); }
.chip-ok      > .chip-dot { background: var(--app-status-ok); }
.chip-warn    { color: var(--app-status-warn);   border-color: color-mix(in srgb, var(--app-status-warn) 45%, transparent); }
.chip-warn    > .chip-dot { background: var(--app-status-warn); }
.chip-error   { color: var(--app-status-error);  border-color: color-mix(in srgb, var(--app-status-error) 45%, transparent); }
.chip-error   > .chip-dot { background: var(--app-status-error); }
.chip-info    { color: #2563eb;                  border-color: color-mix(in srgb, #2563eb 45%, transparent); }
.chip-info    > .chip-dot { background: #2563eb; }
.chip-neutral { color: var(--app-text-muted);    border-color: var(--app-border-strong); }
.chip-neutral > .chip-dot { background: var(--app-text-muted); }
[data-bs-theme="dark"] .chip-info { color: #60a5fa; }
[data-bs-theme="dark"] .chip-info > .chip-dot { background: #60a5fa; }

/* ============================================================
   ALERTS / BANNERS / TOASTS — editorial tone system
   ============================================================ */
.alert {
  position: relative;
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  background: var(--app-surface-raised);
  color: var(--app-text-heading);
  font-size: var(--t-body);
  margin-bottom: 1rem;
}
.alert::before {
  /* Tone rail */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.alert > .alert-eyebrow {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  margin-bottom: 0.2rem;
  font-weight: 500;
}

.alert-success { background: color-mix(in srgb, var(--app-status-ok) 8%, var(--app-surface-raised)); }
.alert-success::before { background: var(--app-status-ok); }
.alert-success > .alert-eyebrow { color: var(--app-status-ok); }

.alert-warning { background: color-mix(in srgb, var(--app-status-warn) 10%, var(--app-surface-raised)); }
.alert-warning::before { background: var(--app-status-warn); }
.alert-warning > .alert-eyebrow { color: var(--app-status-warn); }

.alert-danger { background: color-mix(in srgb, var(--app-status-error) 10%, var(--app-surface-raised)); }
.alert-danger::before { background: var(--app-status-error); }
.alert-danger > .alert-eyebrow { color: var(--app-status-error); }

.alert-info { background: color-mix(in srgb, #2563eb 8%, var(--app-surface-raised)); }
.alert-info::before { background: #2563eb; }
.alert-info > .alert-eyebrow { color: #2563eb; }
[data-bs-theme="dark"] .alert-info { background: color-mix(in srgb, #60a5fa 10%, var(--app-surface-raised)); }
[data-bs-theme="dark"] .alert-info::before { background: #60a5fa; }
[data-bs-theme="dark"] .alert-info > .alert-eyebrow { color: #60a5fa; }

.alert-neutral { background: var(--app-surface-raised); }
.alert-neutral::before { background: var(--app-border-strong); }
.alert-neutral > .alert-eyebrow { color: var(--app-text-muted); }

/* Banner — full-width page-level band */
.banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: var(--app-surface-raised);
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
  position: relative;
}
.banner::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--c-lime-500);
}
.banner > .banner-eyebrow {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--app-text-muted);
  flex-shrink: 0;
}
.banner > .banner-body {
  flex: 1 1 auto;
  font-size: var(--t-body);
  color: var(--app-text-heading);
}

/* Toast — same tone system, slight elevation */
.toast {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-3);
  color: var(--app-text-heading);
  font-size: var(--t-body);
  overflow: hidden;
  position: relative;
}
.toast::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--app-border-strong);
}
.toast.toast-success::before { background: var(--app-status-ok); }
.toast.toast-warning::before { background: var(--app-status-warn); }
.toast.toast-error::before   { background: var(--app-status-error); }
.toast.toast-info::before    { background: #2563eb; }
.toast .toast-header {
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
}

/* ============================================================
   STEPPER — wizard progress (drop-in for .progress + .bg-primary)
   ============================================================ */
.stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 1rem 0;
  font-family: var(--bs-font-monospace);
  list-style: none;
  margin: 0;
}
.stepper-step {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  min-width: 0;
}
.stepper-step > .stepper-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-surface-raised);
  border: 1.5px solid var(--app-border-strong);
  color: var(--app-text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.stepper-step > .stepper-label {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  opacity: 0.85;
  max-width: 11ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stepper-rail {
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: var(--app-border);
  z-index: 0;
}
.stepper-step:first-child .stepper-rail { display: none; }
.stepper-step--done > .stepper-num {
  background: var(--c-lime-500);
  border-color: var(--c-lime-500);
  color: var(--c-ink-950);
}
.stepper-step--done > .stepper-num::after {
  content: "\2713";
  font-size: 0.85rem;
  line-height: 1;
}
.stepper-step--done > .stepper-num > .stepper-num-text { display: none; }
.stepper-step--done + .stepper-step .stepper-rail,
.stepper-step--done .stepper-rail { background: var(--c-lime-500); }
.stepper-step--active > .stepper-num {
  background: var(--app-surface-raised);
  border-color: var(--c-lime-500);
  color: var(--c-lime-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-lime-500) 22%, transparent);
}
.stepper-step--active > .stepper-label { color: var(--app-text-heading); opacity: 1; }
.stepper-step--pending > .stepper-num {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  color: var(--app-text-muted);
  opacity: 0.7;
}

/* ============================================================
   MODALS — editorial
   Flat surface, corner brackets (like .login-card), mono eyebrow.
   ============================================================ */
.modal-editorial,
.modal-content {
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.625rem;
  box-shadow: var(--shadow-4);
  position: relative;
  overflow: visible;
}
.modal-content::before,
.modal-editorial::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 1.5px solid var(--c-lime-500);
  border-left: 1.5px solid var(--c-lime-500);
  border-top-left-radius: 0.5rem;
  pointer-events: none;
  z-index: 2;
}
.modal-content::after,
.modal-editorial::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 14px; height: 14px;
  border-bottom: 1.5px solid var(--c-lime-500);
  border-right: 1.5px solid var(--c-lime-500);
  border-bottom-right-radius: 0.5rem;
  pointer-events: none;
  z-index: 2;
}
.modal-editorial .modal-header,
.modal-content .modal-header {
  border-bottom: 1px solid var(--app-border);
  padding: 1.125rem 1.5rem 0.875rem;
}
.modal-editorial .modal-title,
.modal-content .modal-title {
  font-family: var(--app-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--app-text-heading);
  font-variation-settings: var(--display-axes);
}
.modal-editorial .modal-body,
.modal-content .modal-body {
  padding: 1.25rem 1.5rem;
  font-size: var(--t-body);
  color: var(--app-text-heading);
}
.modal-editorial .modal-footer,
.modal-content .modal-footer {
  border-top: 1px solid var(--app-border);
  padding: 0.875rem 1.5rem 1.125rem;
  gap: 0.5rem;
}

/* ============================================================
   TIMELINE — vertical with rail + tone-tinted dots
   ============================================================ */
.timeline {
  position: relative;
  list-style: none;
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 0;
}
.timeline::before {
  /* Vertical rail */
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.4rem;
  width: 1px;
  background: var(--app-border-strong);
}
.timeline-item {
  position: relative;
  padding: 0 0 1.1rem 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.85rem;
  align-items: start;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-border-strong);
  margin-top: 0.4rem;
  position: relative;
  left: -0.65rem;
  border: 2px solid var(--app-surface);
  box-shadow: 0 0 0 1px var(--app-border);
}
.timeline-dot--ok    { background: var(--app-status-ok); box-shadow: 0 0 0 1px var(--app-status-ok); }
.timeline-dot--warn  { background: var(--app-status-warn); box-shadow: 0 0 0 1px var(--app-status-warn); }
.timeline-dot--error { background: var(--app-status-error); box-shadow: 0 0 0 1px var(--app-status-error); }
.timeline-dot--accent { background: var(--c-lime-500); box-shadow: 0 0 0 1px var(--c-lime-500); }
.timeline-content {
  min-width: 0;
}
.timeline-content .timeline-ts {
  font-family: var(--bs-font-monospace);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--app-text-muted);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 0.15rem;
}
.timeline-content .timeline-text {
  font-size: var(--t-body);
  color: var(--app-text-heading);
}

/* ============================================================
   SKELETON — loading blocks
   ============================================================ */
.skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--app-surface-sunken) 0%,
    color-mix(in srgb, var(--app-surface-sunken) 60%, var(--app-surface-raised)) 50%,
    var(--app-surface-sunken) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: 0.25rem;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.skeleton-line {
  height: 0.7rem;
  margin: 0.4rem 0;
}
.skeleton-line.skeleton-line-lg { height: 1.1rem; }
.skeleton-line.skeleton-line-sm { height: 0.5rem; }
.skeleton-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.skeleton-block {
  height: 80px;
  border-radius: 0.375rem;
}

/* ============================================================
   MISC — kbd, code, signature-tick, page-rule
   ============================================================ */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 1px 6px;
  font-family: var(--bs-font-monospace);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--app-text-heading);
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border-strong);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  line-height: 1.4;
  white-space: nowrap;
}
.code-inline {
  font-family: var(--bs-font-monospace);
  font-size: 0.85em;
  color: var(--app-text-heading);
  background: var(--app-surface-sunken);
  border: 1px solid var(--app-border);
  border-radius: 0.2rem;
  padding: 1px 5px;
  font-feature-settings: "calt" 0;
}
.code-block {
  display: block;
  font-family: var(--bs-font-monospace);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--app-text-heading);
  background: var(--app-surface-raised);
  border: 1px solid var(--app-border);
  border-radius: 0.4rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  white-space: pre;
  margin: 0.5rem 0;
}
.code-block code {
  font-family: inherit;
  background: transparent;
  padding: 0;
  border: none;
  color: inherit;
  font-size: inherit;
}

/* Signature tick — matches .page-header::after, can be dropped anywhere */
.signature-tick {
  display: inline-block;
  width: 32px;
  height: 3px;
  background: var(--c-lime-500);
  border-radius: 2px;
  vertical-align: middle;
}

/* Page rule — full-width hairline with a lime tick on the left */
.page-rule {
  position: relative;
  height: 1px;
  background: var(--app-border);
  margin: 1.25rem 0;
}
.page-rule::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 3px;
  background: var(--c-lime-500);
  border-radius: 2px;
}

/* ============================================================
   DARK-MODE OVERRIDES for existing components
   ============================================================ */

/* Editorial tabs — keep the lime underline, soften the inactive color */
[data-bs-theme="dark"] .editorial-tabs { border-bottom-color: var(--app-border); }
[data-bs-theme="dark"] .editorial-tabs .nav-link { color: var(--app-text-muted); }
[data-bs-theme="dark"] .editorial-tabs .nav-link:hover {
  color: var(--app-text-heading);
  border-bottom-color: var(--app-border-strong);
}
[data-bs-theme="dark"] .editorial-tabs .nav-link.active {
  color: var(--app-text-heading);
  border-bottom-color: var(--c-lime-300);
}

/* List card + header — darker surface, lighter border */
[data-bs-theme="dark"] .list-card {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .list-card-header {
  border-bottom-color: var(--app-border);
  color: var(--app-text-muted);
}
[data-bs-theme="dark"] .list-card-header .count {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--app-border);
  color: var(--app-text-heading);
}

/* Stack panel + module panel — softer shadows on dark */
[data-bs-theme="dark"] .stack-panel {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .stack-panel:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
[data-bs-theme="dark"] .module-panel {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Navbar — dark mode lime tone shifts to c-lime-300, corner brackets match */
[data-bs-theme="dark"] .navbar .dropdown-menu::before {
  border-top-color: var(--c-lime-300);
  border-left-color: var(--c-lime-300);
}
[data-bs-theme="dark"] .user-trigger .user-avatar {
  background: var(--c-lime-300);
  color: var(--c-ink-950);
}
[data-bs-theme="dark"] .navbar-context .pip--accent { background: var(--app-status-ok); }

/* Status strip — scanline preserved */
[data-bs-theme="dark"] .status-strip {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .status-strip::before {
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 3px,
    rgba(255, 255, 255, 0.025) 3px,
    rgba(255, 255, 255, 0.025) 4px
  );
}
[data-bs-theme="dark"] .status-strip > * + * { border-left-color: var(--app-border); }

/* Bridge — drop the strong lime glow into lime-300 */
[data-bs-theme="dark"] .bridge-eyebrow::before { background: var(--c-lime-300); }
[data-bs-theme="dark"] .bridge-eyebrow > .dot { background: var(--app-status-ok); }
[data-bs-theme="dark"] .bridge-sub { color: var(--app-text-muted); }
[data-bs-theme="dark"] .bridge-sub strong { color: var(--app-text-heading); }

/* Chart frame */
[data-bs-theme="dark"] .chart-frame {
  background: var(--app-surface-raised);
  border-color: var(--app-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .chart-frame-header { color: var(--app-text-muted); }

/* Breadcrumb inside page header */
[data-bs-theme="dark"] .page-header .breadcrumb-item a { color: var(--app-text-muted); }
[data-bs-theme="dark"] .page-header .breadcrumb-item a:hover { color: var(--app-text-heading); }
[data-bs-theme="dark"] .page-header .breadcrumb-item.active { color: var(--app-text-heading); }

/* Table — already covered above with [data-bs-theme="dark"] .table */

/* ============================================================
   SYSTEM INVENTORY
   Every class in chrome.css, with a one-line purpose statement.
   Keep this list in sync as the file grows.
   ============================================================
   .btn-primary                            — lime-filled primary button (Bootstrap re-skin)
   .btn-outline-primary                    — outlined lime primary (Bootstrap re-skin)
   @font-face Fraunces                     — self-hosted italic display face
   @font-face Plex Mono                    — self-hosted monospace fallback
   :root tokens                            — type scale, motion, shadows, grid texture
   .content                                — page atmosphere: grain + glows + grid
   .sidebar                                — console-feel surface for the sidebar shell
   .masthead                               — newspaper masthead container
   .masthead-logo                          — sidebar brand logo (light-fill SVG on dark shell)
   .masthead-meta                          — mono caption line under wordmark
   .masthead-date                          — tabular-nums date row
   .masthead-mark                          — large Fraunces character mark
   .masthead-suffix                        — small mono suffix beside wordmark
   .sidebar-colophon                       — bottom instrument panel of the sidebar
   .colophon-row, .colophon-eyebrow, ...   — colophon meta primitives
   .colophon-value                         — emphasized mono value in a colophon row
   .colophon-serial                        — version + date serial at sidebar bottom
   .navbar                                 — sticky navbar with lime signature rule
   .login-page                             — login atmosphere and isolation
   .auth-wrapper                           — vertical centering for login layout
   .login-wordmark, .login-submark         — editorial login title
   .login-card                             — corner-bracketed auth card
   .login-card h5, .login-eyebrow          — login card typography
   .login-divider                          — rule + centered word
   .login-serial                           — version serial in login card footer
   .sso-btn                                — mono-uppercase SSO button
   .page-header                            — top-of-page title + breadcrumb block
   .page-header .breadcrumb                — mono slash-separator breadcrumbs
   .page-title                             — main page title typography
   .page-subtitle                          — muted lead text under page title
   .editorial-tabs                         — drop-in Bootstrap tabs replacement
   .editorial-tabs .nav-link               — lime-underlined tab
   .editorial-tabs .tab-eyebrow            — small mono prefix on a tab
   .list-card                              — table/section container
   .list-card-header                       — eyebrow header inside list-card
   .pagination-strip                       — terminal-style pagination row
   .hero-attention                         — overview hero block with lime rail
   .stack-panel                            — KPI/stat card with display value
   .module-panel                           — colored module tile (CRM/DNS/Hosting)
   .activity-feed                          — log-style feed list
   .status-strip                           — terminal-style status row
   .bridge-header, .bridge-eyebrow, ...    — overview greeting moment
   .bridge-headline                        — Fraunces italic overview headline
   .section-label                          — band label with lime tick
   .pip, .pip--ok/--warn/...               — small status dots
   .chart-frame                            — chart wrapper with eyebrow header
   .empty-state, .empty-cursor             — terminal empty-state block + blink cursor
   .form-label, .required, .form-text      — editorial form labels and help text
   .form-control, .form-select             — flat form fields with lime focus ring
   .form-control[type=file]                — file input with mono picker button
   .form-check, .form-check-input/label    — checkbox + radio primitives
   .form-switch                            — sliding toggle (lime track)
   .form-range                             — range slider with lime thumb
   .input-group                            — cohesive input group wrapper
   .is-invalid, .invalid-feedback          — error state with red rail
   .form-section, .form-section-label      — dashed-rule field grouping band
   .btn-ghost                              — transparent → tinted on hover
   .btn-icon                               — square icon-only button
   .btn-link                               — lime text link, no underline
   .btn-sm, .btn-lg                        — size refinements
   .btn-loading                            — spinner overlay (also in app.css)
   .table, .table thead, .table-sm         — editorial table styling
   .table-striped, .table-empty, .table-sticky — table variants
   .card-elevated, .card-inset, .card-outlined — surface variants
   .accent-rail-{tone}                     — left rail in 7 tones
   .accent-dot-{tone}                      — corner dot in 7 tones
   .chip, .chip-ok/--warn/--error/...      — small mono chips with tone tint
   .chip-lg                                — larger chip size
   .alert, .alert-success/--warning/...    — tone-tinted alerts with rail + eyebrow
   .banner                                 — full-width page-level banner
   .toast, .toast-{tone}                   — toast tone variants
   .stepper, .stepper-step                 — wizard horizontal progress
   .stepper-step--done/--active/--pending  — stepper state variants
   .stepper-rail                           — connector between steps
   .modal-editorial, .modal-content       — flat modal with corner brackets
   .timeline, .timeline-item, .timeline-dot — vertical timeline with rail
   .skeleton, .skeleton-line/--circle/--block — shimmer loading blocks
   .kbd                                    — keyboard key chip
   .code-inline, .code-block               — inline and block code
   .signature-tick                         — standalone lime tick (matches .page-header::after)
   .page-rule                              — full-width hairline with lime tick
*/