/* ZEROBRAIN Superdash v2 -- Base styles: variables, layout, panels, header/status */

/* ZEROBRAIN Superdash v2 -- Main Stylesheet */
/* Design: UXIA | Cockpit glass morphism | Gold = OPERATOR sacred color */


:root {
  /* ── Backgrounds (deep dark, navy-violet tinted) ── */
  --bg-deep: #080b12;
  --bg-mid: #0c1018;

  /* ── Glass surfaces (layered translucency for depth) ── */
  --glass-1: rgba(16, 22, 36, 0.72);
  --glass-2: rgba(20, 28, 44, 0.58);
  --glass-3: rgba(24, 34, 52, 0.45);
  --glass-border: rgba(88, 166, 255, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.04);

  /* ── Accent (primary brand blue, GitHub-inspired) ── */
  --accent: #58a6ff;
  --accent-glow: rgba(88, 166, 255, 0.3);
  --accent-soft: rgba(88, 166, 255, 0.08);

  /* ── Semantic ── */
  --gold: #e3b341;
  --gold-soft: rgba(227, 179, 65, 0.1);
  --success: #3fb950;
  --warning: #d29922;
  --error: #f85149;
  --purple: #d2a8ff;
  --pink: #f778ba;

  /* ── Text (5-step ramp on light-on-dark) ── */
  --text: #e6edf3;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-dim: #6e7681;
  --text-tertiary: #484f58;

  /* ── Radii ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* ── Shadows ── */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--glass-highlight);
  --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.3);

  /* ── Motion ── */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  /* ── Typography ── */
  --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* @kind font */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* @kind font */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* SWAT-20260610-0018: Global dark-mode scrollbar polish (baoyu-design inspired).
 * Default applied to ALL scroll surfaces; per-element overrides further down
 * (.nav, .main-content, .kanban-col-body, .chat-feed, .msg-list) retain their
 * narrower widths but inherit the same palette via these scrollbar-color +
 * thumb declarations. Firefox uses scrollbar-width/color (Gecko-native); Webkit
 * uses ::-webkit-scrollbar pseudo-elements.
 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background var(--transition);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-glow);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: var(--accent);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: 'Inter', -apple-system, sans-serif;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* -- Ambient background -- */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ambient::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 70%;
  background: radial-gradient(ellipse, rgba(88, 166, 255, 0.04) 0%, transparent 70%);
  animation: drift 20s ease-in-out infinite;
}
.ambient::after {
  content: '';
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(210, 168, 255, 0.03) 0%, transparent 70%);
  animation: drift 25s ease-in-out infinite reverse;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -20px); }
}

/* SWAT-superdash-perf-E (resource-efficiency audit, 2026-08): fleet-wide
 * prefers-reduced-motion support. Prior to this, only cairn.css (thermo-
 * shimmer) and electric-border.css respected this media query -- the other
 * ~16 CSS files' infinite animations (pulse-dot, bus-pulse, rc-pulse,
 * pulse-tile, msg-pulse, pulse-border, ib-pulse-once/persist, drift, etc.)
 * ran unconditionally regardless of the user's OS-level reduced-motion
 * preference. This is a single, universal, standard-pattern override (same
 * technique used by web.dev's recommended snippet) -- it has ZERO visual
 * effect for the default case (motion not reduced); it only engages for
 * users who have explicitly opted into reduced motion at the OS level,
 * where it correctly stops every infinite/looping animation + transition
 * fleet-wide in one place, rather than requiring each of the ~16 files to
 * carry its own copy of this media query individually.
 * NOTE: deliberately does NOT touch backdrop-filter blur() usage (that's a
 * visual/brand judgment call reserved for OPERATOR sign-off, not a
 * reduced-motion accessibility concern) or one-shot/conditional animations
 * that already convey a specific, non-decorative signal (e.g. brand-glow's
 * 1.2s one-time boot flash, cairn-thermo-shimmer's already-scoped/paused/
 * reduced-motion-aware in-progress indicator) -- this only neutralizes
 * INFINITE, always-on decorative motion for the opted-in subset of users.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.03;
  background-image:
    linear-gradient(rgba(88, 166, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 166, 255, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* -- Layout -- */
.cockpit {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 240px 1fr 320px;
  grid-template-areas:
    "header header header"
    "nav    main   intel"
    "status status status";
  gap: 12px;
  padding: 12px;
}

/* -- Header -- */
.header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  background: var(--glass-1);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-brand h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: opacity 0.4s ease, filter 0.6s ease, text-shadow 0.6s ease;
}

/* Dim state during boot */
.header-brand h1.brand-dim {
  opacity: 0.35;
  filter: saturate(0.3) brightness(0.7);
}

/* Powered-up state */
.header-brand h1.brand-live {
  opacity: 1;
  filter: saturate(1.3) brightness(1.15);
  animation: brand-glow 1.2s ease-out;
}

@keyframes brand-glow {
  0%   { filter: saturate(1) brightness(1); }
  40%  { filter: saturate(2) brightness(1.5); }
  100% { filter: saturate(1.3) brightness(1.15); }
}

/* Boot loader bar */
.boot-loader {
  width: 80px;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 4px;
  transition: opacity 0.5s ease;
}
.boot-loader-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  border-radius: 2px;
  transition: width 0.4s ease-out;
  box-shadow: 0 0 6px var(--accent);
}
.boot-loader-done {
  opacity: 0;
  pointer-events: none;
}
.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.header-stats {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
}
.header-stats .stat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--text);
}
/* SWAT-20260612-0039 Δ3: tint the fleet-refresh stat when the age crosses the stale threshold */
.stat-value.stat-value-stale {
  color: var(--status-stale, #d29922);
}
.header-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 4px 12px;
  background: var(--accent-soft);
  border-radius: 6px;
  border: 1px solid var(--glass-border);
}

/* -- Nav (node cards) -- */
.nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }

/* Node list + Fleet Health card stack vertically with consistent 8px gap.
 * Fleet Health sits DIRECTLY BELOW the last node card (no auto-push to bottom),
 * matching .node-card visual weight (padding, border, fonts, left-bar accent)
 * so it reads as a peer card -- not a smaller after-thought (OPERATOR 2026-06-04).
 * The .nav itself uses flex-direction:column with gap:8px so margin-top is implicit. */
.nav-nodes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 1 auto;
}
/* Higher specificity (`nav .intel-card.nav-fleet-health`) beats the later-declared
 * `.intel-card { padding: 16px }` rule -- without this, computed padding silently
 * snaps back to 16px-flat and the card no longer matches a node-card visually. */
nav .intel-card.nav-fleet-health {
  flex: 0 0 auto;
  padding: 16px 18px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  /* UXIA 2026-06-07 (OPERATOR 7th-report): release min-content trap.
   * Without these, the inner grid's max-content columns demand intrinsic
   * width from the parent (default min-width:auto), so width:100% loses
   * and the card stays 240px even when the nav column shrinks to 200px
   * (≤1400px media query). That overflow forces a horizontal scrollbar
   * at the bottom of the nav sidebar. min-width:0 + max-width:100% +
   * minmax(0,max-content) on the inner grid (below) lets the card
   * actually honor its parent's width. */
  min-width: 0;
  max-width: 100%;
  background: var(--glass-1);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  /* UXIA 2026-06-06 iter3 (OPERATOR-direct): bump to --radius-lg (20px) --
   * 14px was being perceived as square. Bigger radius makes the rounding
   * unambiguous and matches the visual weight of the node-cards above. */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  text-align: center;
}
/* Left green status-bar pseudo-element removed 2026-06-06 (UXIA, OPERATOR-direct):
 * its sharp-cornered rectangle made the card LOOK like it had sharp corners
 * even though the parent had border-radius. Card now visually matches the
 * other rounded intel-cards. */
nav .intel-card.nav-fleet-health .intel-card-title {
  margin: 0 0 8px 0;
  /* UXIA 2026-06-06 iter3: bump title from 11px → 13px per OPERATOR
   * readability ask. Letter-spacing kept at 1px (was 1.2px); 13px font
   * with 1.2px tracking made the title feel cramped. */
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}
/* UXIA 2026-06-06 OPERATOR: shrink wasted middle, terminate in rounded card
 * matching .node-card look. Was: row=flex space-between with 93-147px gap_in_middle
 * (45-71% of row width was empty). Now: 2-col grid (label right / value left)
 * sized to max-content and centered in the card -- values can never clip
 * since column width = content width, and the visual is tight. */
nav .intel-card.nav-fleet-health #fleet-health {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, max-content);
  column-gap: 16px;
  row-gap: 2px;
  justify-content: center;
  align-items: baseline;
  padding-top: 2px;
}
nav .intel-card.nav-fleet-health #fleet-health .health-row {
  display: contents;
}
nav .intel-card.nav-fleet-health #fleet-health .health-row .label {
  /* UXIA 2026-06-06 iter3: 11px → 13px for readability per OPERATOR. */
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-secondary);
  white-space: nowrap;
}
nav .intel-card.nav-fleet-health #fleet-health .health-row .value {
  /* UXIA 2026-06-06 iter3: 11px → 13px for readability per OPERATOR. */
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
/* Empty-state fallback (when health unavailable) - escape the grid */
nav .intel-card.nav-fleet-health #fleet-health > .empty-text,
nav .intel-card.nav-fleet-health #fleet-health > .loading-text {
  grid-column: 1 / -1;
  text-align: center;
}

.nav-loading {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 12px;
}

.node-card {
  padding: 14px 16px;
  background: var(--glass-1);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.node-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--node-color, var(--accent));
  opacity: 0.6;
  transition: var(--transition);
}
.node-card:hover {
  background: var(--glass-2);
  border-color: rgba(88, 166, 255, 0.25);
  transform: translateX(4px);
}
.node-card:hover::before {
  opacity: 1;
  width: 4px;
}
.node-card.active {
  background: var(--glass-2);
  border-color: rgba(88, 166, 255, 0.3);
  box-shadow: var(--shadow-elevated), inset 0 0 30px var(--accent-soft);
}
.node-card.active::before {
  opacity: 1;
  width: 4px;
  box-shadow: 0 0 8px var(--node-color, var(--accent));
}
.node-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.node-name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.node-role {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.node-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
}
.node-session-age {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
}
.node-session-age-row {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  margin: 6px 0 2px;
  letter-spacing: 0.5px;
}
.node-host {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
}
.node-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px rgba(63, 185, 80, 0.5);
}
.node-indicator.stale { background: var(--warning); box-shadow: 0 0 6px rgba(210, 153, 34, 0.5); }
.node-indicator.offline { background: var(--error); box-shadow: 0 0 6px rgba(248, 81, 73, 0.5); }

/* Life service indicator pip */
.life-svc-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-left: 4px;
  cursor: help;
}
.life-svc-pip.green { background: var(--success); box-shadow: 0 0 6px rgba(63, 185, 80, 0.5); }
.life-svc-pip.red { background: var(--error); box-shadow: 0 0 6px rgba(248, 81, 73, 0.5); }
.life-svc-pip.grey { background: var(--text-tertiary); opacity: 0.5; }

/* -- Main content -- */
.main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.glass-panel {
  background: var(--glass-1);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  padding: 20px;
  overflow: hidden;
  transition: var(--transition);
}
.glass-panel:hover {
  border-color: rgba(88, 166, 255, 0.2);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.panel-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.panel-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--accent-soft);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  color: var(--accent);
}
.panel-badge:empty { display: none; }

.main-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}
.main-content::-webkit-scrollbar { width: 4px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }

/* -- Fleet overview cards -- */
.fleet-overview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.overview-card {
  padding: 16px;
  background: var(--glass-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.overview-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--node-color, var(--accent));
  opacity: 0.6;
}
.overview-card:hover {
  border-color: rgba(88, 166, 255, 0.25);
  transform: translateY(-2px);
}
.overview-card-name {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
}
.overview-card-role {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.overview-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  padding: 3px 0;
}
.overview-card-row .label { color: var(--text-tertiary); }
.overview-card-row .value {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-secondary);
}
.overview-card-row .value.fresh { color: var(--success); }
.overview-card-row .value.warm { color: var(--warning); }
.overview-card-row .value.stale { color: var(--error); }

/* WI-2 (RFC548x1 v1 / bundle-3 pickup): nested routing_state block on node-detail panel.
   Defensive-rendered (panels.js showNodeDetail); section + rows hide when fields absent. */
.routing-state-section {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.routing-state-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary, #6e7681);
  margin-bottom: 4px;
}
.value-delta {
  font-size: 10px;
  opacity: 0.75;
  margin-left: 2px;
}
.value-burn-active   { color: var(--success, #3fb950); }
.value-burn-idle     { color: var(--text-secondary, #8b949e); }
.value-burn-warning  { color: var(--warning, #d29922); }
.value-burn-critical { color: var(--error, #f85149); font-weight: 600; }
.value-burn-degraded { color: var(--warning, #d29922); }
.value-burn-unknown  { color: var(--text-tertiary, #6e7681); font-style: italic; }

/* -- Message feed -- */
.message {
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--glass-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.message:hover {
  background: var(--glass-3);
  border-color: var(--glass-border);
}
.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.message-from {
  font-weight: 600;
  font-size: 12px;
}
.message-meta-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.message-type {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.message-time {
  color: var(--text-tertiary);
  font-family: 'JetBrains Mono', monospace;
}
.message-subject {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.message-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-height: 60px;
  overflow: hidden;
}

/* -- Intel (right column) -- */
.intel {
  grid-area: intel;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.intel::-webkit-scrollbar { width: 4px; }
.intel::-webkit-scrollbar-track { background: transparent; }
.intel::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }

.intel-card {
  padding: 16px;
  background: var(--glass-1);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  transition: var(--transition);
}
.intel-card:hover {
  border-color: rgba(88, 166, 255, 0.2);
}
.intel-card-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}


/* === OPERATOR 2026-06-04 redesign === */

/* BB pill (replaces Nodes 6/6 header stat) -- UXIA 2026-06-06 visual upgrade
 * OPERATOR: "make it look nicer". Was: text `*` + text `|` + text `, ` separators.
 * Now: CSS-circle dots, vertical-bar separators, flex-aligned groups, no
 * punctuation in DOM. Total width stays compact via gap-based layout. */
.stat.bb-pill-stat .stat-value.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.3px;
  line-height: 1;
  font-weight: 600;
}
.bb-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.bb-pill-rider {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.bb-pill-letter {
  color: var(--text, #e6edf3);
}
.bb-pill-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #6e7681);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.bb-pill-rider[data-fresh="true"] .bb-pill-dot {
  background: var(--success, #3fb950);
  box-shadow: 0 0 5px rgba(63, 185, 80, 0.55);
}
.bb-pill-rider[data-fresh="false"] .bb-pill-letter {
  color: var(--text-muted, #8b949e);
  opacity: 0.7;
}
.bb-pill-sep {
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--glass-border, rgba(255, 255, 255, 0.18));
  border-radius: 1px;
}

/* Guestbook -- relative-day label left of timestamp */
.guestbook-relday {
  color: var(--text-muted, #8b949e);
  font-size: 11px;
  margin-right: 6px;
  font-style: italic;
}

/* Guestbook -- Auth Events embedded section */
.guestbook-authevents-section { padding: 12px; border-bottom: 1px solid var(--glass-border); }
.guestbook-authevents-header { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
.guestbook-authevents-title { font-size: 13px; font-weight: 600; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; }
.guestbook-authevents-header .auth-collapse-toggle { color: var(--text-tertiary, #484f58); }
.guestbook-authevents-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 500; }
.guestbook-authevents-badge.ok { background: rgba(63, 185, 80, 0.15); color: var(--success, #3fb950); }
.guestbook-authevents-badge.degraded { background: rgba(210, 153, 34, 0.15); color: var(--warning, #d29922); }
.guestbook-authevents-badge.critical { background: rgba(248, 81, 73, 0.15); color: var(--error, #f85149); }
.guestbook-authevents-badge.unknown { background: rgba(110, 118, 129, 0.15); color: var(--text-muted, #8b949e); }
.guestbook-authevents-section.collapsed .guestbook-authevents-body { display: none; }
.guestbook-authevents-counter { font-size: 24px; font-weight: 700; padding: 8px 4px; }
.guestbook-authevents-counter.ok { color: var(--success, #3fb950); }
.guestbook-authevents-counter.degraded { color: var(--warning, #d29922); }
.guestbook-authevents-counter.critical { color: var(--error, #f85149); }
.guestbook-authevents-counter-label { font-size: 12px; font-weight: 400; color: var(--text-muted, #8b949e); }
.guestbook-authevents-detail { font-size: 12px; color: var(--text, #c9d1d9); padding: 4px; }
.guestbook-authevents-hint { font-size: 11px; color: var(--text-muted, #8b949e); padding: 6px 4px 4px; font-style: italic; line-height: 1.4; }

/* Fleet tab -- legacy sections toggle */
.fleet-legacy-wrap { padding: 16px; }
.fleet-legacy-toggle {
  background: var(--bg-secondary, #161b22);
  border: 1px solid var(--border, #30363d);
  color: var(--text, #c9d1d9);
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fleet-legacy-toggle:hover { background: var(--bg-tertiary, #1f2937); }
.fleet-legacy-chevron { color: var(--text-muted, #8b949e); }
.fleet-legacy-body { margin-top: 12px; }