/* ============================================================
   ENIGMA DESIGN SYSTEM — production stylesheet
   Single source of truth for the operator console.
   Extracted from /home/dark/Hämtningar/enigma-design-system(1)
   Live reference: https://enigma-cyber.netlify.app
   ------------------------------------------------------------
   THEMES
     :root              -> light (default)
     [data-theme="dark"]      -> dark variant defined below
     [data-theme="workspace"] -> dark cyber console sub-theme
                                 owned by static/css/style.css
                                 (used by layouts/workspace.html
                                 and the 13 scan_*/chat/finding
                                 pages). Do NOT redefine --ws-*
                                 here; that stylesheet is the
                                 source of truth for them.
   ============================================================ */

/* ---------- 1. RESET & BASE ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  transition: background 0.2s ease, color 0.2s ease;
}

/* ---------- 2. DESIGN TOKENS (LIGHT) ---------- */
:root {
  --bg: #FFFFFF;
  --bg-2: #FAFAFA;
  --bg-3: #F5F5F5;

  --ink: #0A0A0A;
  --ink-2: #404040;
  --ink-3: #737373;

  --line: #E5E5E5;
  --line-soft: #F0F0F0;

  --red: #DC2626;
  --red-dark: #B91C1C;
  --red-bright: #EF4444;
  --red-glow: rgba(220, 38, 38, 0.10);
  --red-soft: rgba(220, 38, 38, 0.04);

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Inter Tight', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.12);

  --transition-fast: 0.15s ease;
  --transition: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ---------- 3. DARK MODE ---------- */
[data-theme="dark"] {
  --bg: #0A0A0A;
  --bg-2: #141414;
  --bg-3: #1F1F1F;

  --ink: #FAFAFA;
  --ink-2: #C0C0C0;
  --ink-3: #808080;

  --line: #262626;
  --line-soft: #1A1A1A;

  --red: #EF4444;
  --red-dark: #DC2626;
  --red-bright: #F87171;
  --red-glow: rgba(239, 68, 68, 0.18);
  --red-soft: rgba(239, 68, 68, 0.08);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.6);
}

/* ---------- 4. THEME TOGGLE BUTTON ---------- */
#theme-toggle {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
#theme-toggle:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}

/* ---------- 5. TYPOGRAPHY UTILITIES ---------- */
.heading-1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw + 1rem, 5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.heading-2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.heading-3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.body-large {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.body-small {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--red);
}
.mono {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink);
}

/* Eyebrow-block decorator (red rule + label) */
.eyebrow-block {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.eyebrow-block::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  background: var(--red);
  flex-shrink: 0;
}

/* ---------- 6. LOGO ---------- */
.logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.logo-dot {
  color: var(--red);
  margin-left: 4px;
}

/* ---------- 7. BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--red);
  color: white;
}
.btn-primary:hover {
  background: var(--red-dark);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}
.btn-outline:hover {
  background: var(--red);
  color: white;
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}
.btn-large {
  padding: 16px 28px;
  font-size: 13px;
}
.btn-small {
  padding: 8px 14px;
  font-size: 11px;
}
.btn-block {
  display: flex;
  width: 100%;
}

/* ---------- 8. INPUTS & FORMS ---------- */
.label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}
.input::placeholder { color: var(--ink-3); }
.form-group { margin-bottom: 20px; }
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- 9. CARDS ---------- */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  transition: all var(--transition);
}
.card-elevated {
  box-shadow: var(--shadow-sm);
}
.card-elevated:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--ink-3);
}
.card-feature {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
}
.card-feature::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--red), transparent);
  opacity: 0.6;
}

/* ---------- 10. BADGES ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}
.badge-red {
  background: var(--red-glow);
  color: var(--red);
  border: 1px solid var(--red);
}
.badge-outline {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.badge-solid {
  background: var(--ink);
  color: var(--bg);
}
.badge-success {
  background: rgba(34, 197, 94, 0.10);
  color: rgb(22, 163, 74);
  border: 1px solid rgba(34, 197, 94, 0.30);
}
.badge-warning {
  background: rgba(234, 179, 8, 0.10);
  color: rgb(202, 138, 4);
  border: 1px solid rgba(234, 179, 8, 0.30);
}
.badge-critical {
  background: var(--red);
  color: white;
}
[data-theme="dark"] .badge-success {
  color: rgb(74, 222, 128);
}
[data-theme="dark"] .badge-warning {
  color: rgb(250, 204, 21);
}

/* ---------- 11. NAVIGATION (top-bar pattern) ---------- */
.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
}
[data-theme="dark"] .app-nav {
  background: rgba(10, 10, 10, 0.75);
}
.app-nav-logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  text-decoration: none;
}
.app-nav-logo .logo-dot { margin-left: 0; }
.app-nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.app-nav-links a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--transition);
}
.app-nav-links a:hover { color: var(--ink); }
.app-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
  background: transparent;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
}
.app-nav-cta:hover {
  background: var(--red-soft);
}
.app-nav-cta::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* ---------- 12. UTILITIES ---------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.text-center { text-align: center; }
.text-red { color: var(--red); }
.text-ink-2 { color: var(--ink-2); }
.text-ink-3 { color: var(--ink-3); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-4 { margin-top: var(--space-4); }
.mt-8 { margin-top: var(--space-8); }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- 13. LOGIN MOCKUP ---------- */
.login-mockup {
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, var(--red-soft), transparent 60%),
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 32px),
    var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px;
  position: relative;
}
.login-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.login-card-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--red);
  border-style: solid;
}
.login-card-corner.tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.login-card-corner.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.login-card-corner.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.login-card-corner.br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.login-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}
.login-card h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
  color: var(--ink);
}
.login-card .lead-sm {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 28px;
}
.login-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.login-footer a { color: var(--ink-2); text-decoration: none; }
.login-footer a:hover { color: var(--red); }

/* Inline error inside the login card */
.login-error {
  margin-bottom: 16px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
}

/* ---------- 14. DASHBOARD MOCKUP ---------- */
.dashboard-mockup {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 720px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-2);
}
.dash-sidebar {
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
}
.dash-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 28px;
  padding: 4px 12px;
  color: var(--ink);
  text-decoration: none;
}
.dash-sidebar-section-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 12px 12px 6px;
}
.dash-sidebar-nav {
  list-style: none;
  flex: 0 0 auto;
}
.dash-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  transition: all var(--transition);
}
.dash-sidebar-nav a:hover {
  color: var(--ink);
  background: var(--bg-2);
}
.dash-sidebar-nav a.active {
  color: var(--red);
  background: var(--red-glow);
}
.dash-sidebar-nav a .icon {
  width: 14px;
  height: 14px;
  opacity: 0.8;
}
.dash-sidebar-foot {
  padding: 16px 12px 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.dash-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.dash-sidebar-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--red);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.dash-sidebar-user-info {
  flex: 1;
  min-width: 0;
}
.dash-sidebar-user-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-sidebar-user-role {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dash-main {
  padding: 28px 32px;
  overflow-y: auto;
  background: var(--bg-2);
}
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.dash-topbar-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-topbar-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}
.dash-topbar-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dash-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-topbar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
}
.pulse-dot::before, .pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--red);
}
.pulse-dot::before {
  animation: pulse 2s ease-out infinite;
  opacity: 0.5;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
@media (max-width: 1100px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dashboard-mockup { grid-template-columns: 1fr; }
}
.stat-card {
  padding: 18px 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.stat-card:hover {
  border-color: var(--ink-3);
}
.stat-card.accent {
  border-color: var(--red);
  background: var(--red-soft);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-change {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.stat-change.up { color: rgb(22, 163, 74); }
.stat-change.down { color: var(--red); }
[data-theme="dark"] .stat-change.up { color: rgb(74, 222, 128); }

.dash-section { margin-bottom: 28px; }
.dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.dash-section-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.dash-section-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dash-table th {
  padding: 12px 18px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  font-weight: 500;
}
.dash-table td {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.dash-table tr:last-child td { border-bottom: none; }
.dash-table td.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
}
.progress {
  width: 80px;
  height: 4px;
  background: var(--bg-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--red);
}

.dash-list {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.dash-list-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--transition);
}
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row:hover { background: var(--bg-2); }
.dash-list-content {
  min-width: 0;
}
.dash-list-title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 4px;
}
.dash-list-asset {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.dash-list-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) {
  .compliance-grid { grid-template-columns: repeat(2, 1fr); }
}
.compliance-card {
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.compliance-name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.compliance-score {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 10px;
}
.compliance-score sup {
  font-size: 14px;
  color: var(--ink-3);
  margin-left: 4px;
}
.compliance-bar {
  height: 4px;
  background: var(--bg-3);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: 8px;
}
.compliance-bar-fill {
  height: 100%;
  background: var(--red);
}
.compliance-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- 15. HINT BANNER ---------- */
.hint {
  padding: 16px 20px;
  background: var(--red-soft);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 24px;
}
.hint strong { color: var(--red); font-weight: 500; }

/* ---------- 16. APP SHELL (production layout for the operator console) ----------
   The dashboard-mockup pattern, scaled to fill the viewport so existing page
   templates can drop in via {{embed}} without grid scaffolding of their own.
   ---------------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--bg-2);
}
.app-shell > .dash-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.app-shell > .dash-main {
  min-width: 0;
}
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell > .dash-sidebar { display: none; }
  .app-shell > .dash-sidebar.open {
    display: flex;
    position: fixed;
    z-index: 200;
    width: 240px;
  }
}
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (max-width: 1100px) {
  .mobile-menu-btn { display: inline-flex; }
}

/* Page content wrapper inside dash-main */
.page-content {
  display: block;
  width: 100%;
}


/* === v217 quick wins === */
:root {
  --accent:        #1F2937;            /* slate-800 — primary chrome accent (opt-in) */
  --accent-soft:   rgba(31,41,55,.06);
  --accent-line:   rgba(31,41,55,.18);
  --bg-4:          #EFEFEF;
  --line-strong:   #D1D5DB;
  --ink-4:         #9CA3AF;
  --shadow-focus:  0 0 0 3px var(--accent-soft);
  --t-fast:        120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; }
  .live-dot, .spinner, .toast, .cmdk { animation: none !important; transition: none !important; }
}

/* Toast notifications */
.toasts {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 9999; pointer-events: none;
}
.toast {
  background: var(--ink, #0a0a0a); color: var(--bg, #fff);
  padding: 12px 16px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font: 500 13px/1.4 'Inter', system-ui, sans-serif;
  pointer-events: auto;
  animation: cr-toast-in 180ms ease-out;
  max-width: 380px; word-wrap: break-word;
}
.toast.error   { background: var(--red, #dc2626); }
.toast.success { background: var(--ok, #16a34a); }
.toast.info    { background: var(--info, #0369a1); }
.toast.warn    { background: var(--warn, #d97706); }
@keyframes cr-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Command palette <dialog> */
.cmdk {
  padding: 0; border: none; background: var(--bg, #fff);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,.18), 0 0 0 1px var(--line, #e5e5e5);
  width: min(640px, calc(100vw - 32px)); max-width: 640px;
  margin: 14vh auto auto;
  overflow: hidden;
}
.cmdk::backdrop { background: rgba(10,10,10,.45); backdrop-filter: blur(2px); }
.cmdk-input {
  width: 100%; padding: 14px 18px; border: none;
  border-bottom: 1px solid var(--line, #e5e5e5);
  font: 500 16px/1.4 'Inter', system-ui, sans-serif;
  outline: none; background: transparent; color: var(--ink, #0a0a0a);
  box-sizing: border-box;
}
.cmdk-list { max-height: 50vh; overflow-y: auto; padding: 6px 0; }
.cmdk-item {
  padding: 10px 18px; display: flex; justify-content: space-between; gap: 12px;
  cursor: pointer; align-items: center; font-size: 14px;
  color: var(--ink-2, #2e2e2e); border: none; background: none; width: 100%; text-align: left;
}
.cmdk-item[aria-selected="true"], .cmdk-item:hover {
  background: var(--accent-soft);
  color: var(--ink, #0a0a0a);
}
.cmdk-item .meta {
  font: 11px/1 'JetBrains Mono', ui-monospace, monospace;
  color: var(--ink-3, #6b7280); letter-spacing: .04em;
}
.cmdk-empty {
  padding: 24px 18px; text-align: center;
  color: var(--ink-3, #6b7280); font-size: 13px;
}

/* Inline keyboard hint */
.kbd-hint {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font: 500 10px/1 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg-3, #f5f5f5); border: 1px solid var(--line, #e5e5e5);
  border-radius: 4px; color: var(--ink-3, #6b7280);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  vertical-align: middle;
}

/* Page-notes editor <dialog> */
.notes-dialog {
  padding: 0; border: none;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,.18), 0 0 0 1px var(--line, #e5e5e5);
  width: min(720px, calc(100vw - 32px));
  margin: auto;
}
.notes-dialog::backdrop { background: rgba(10,10,10,.45); }
.notes-dialog-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #e5e5e5);
  display: flex; justify-content: space-between; align-items: center;
  font: 600 13px/1 'Inter', system-ui, sans-serif;
  background: var(--bg-2, #fafafa);
}
.notes-dialog-body { padding: 16px 18px; }
.notes-dialog textarea {
  width: 100%; min-height: 280px;
  padding: 12px; border: 1px solid var(--line, #e5e5e5);
  border-radius: 6px; box-sizing: border-box;
  font: 14px/1.5 'JetBrains Mono', ui-monospace, monospace;
  background: var(--bg, #fff); color: var(--ink, #0a0a0a); resize: vertical;
}
.notes-dialog textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.notes-dialog-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line, #e5e5e5);
  display: flex; gap: 8px; justify-content: flex-end;
  background: var(--bg-2, #fafafa);
}
.notes-dialog button {
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line, #e5e5e5);
  background: var(--bg, #fff); cursor: pointer;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
}
.notes-dialog button.primary {
  background: var(--ink, #0a0a0a); color: var(--bg, #fff); border-color: var(--ink, #0a0a0a);
}
.notes-dialog button.danger {
  background: var(--red, #dc2626); color: #fff; border-color: var(--red, #dc2626);
}

/* Semantic destructive class (opt-in; existing buttons unaffected) */
.btn-danger {
  background: var(--red, #dc2626) !important; color: #fff !important;
  border-color: var(--red, #dc2626) !important;
}


/* === v218 demote-red + utilities === */
/* Cascade-override: keep red as a token, but demote chrome-surface usage to --accent (slate-800).
   Red is reserved for: brand-dot, watermark, crit/danger, alarms. Everything else is calm. */

/* 1. Eyebrows + decorator rules → neutral accent */
.eyebrow                              { color: var(--accent); }
.eyebrow-block::before                { background: var(--accent); }

/* 2. Primary CTA buttons → accent (NOT red); destructive stays red via .btn-danger */
.btn-primary                          { background: var(--accent); color: #fff; }
.btn-primary:hover                    { background: var(--ink); }
.btn-outline                          { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn-outline:hover                    { background: var(--accent); color: #fff; }

/* 3. Form focus rings → accent (was red) */
.input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

/* 4. Section heading bars (the small left-rule before h2) → accent */
.section h2::before, .section-title::before { background: var(--accent); }

/* 5. KPI accent stripes — neutral by default; semantic colors only when classed */
.kpi::before                          { background: var(--ink-3); }
.kpi.accent::before                   { background: var(--accent); }
.kpi.crit::before                     { background: var(--red); }
.kpi.warn::before                     { background: var(--warn); }
.kpi.ok::before                       { background: var(--ok); }
.kpi.info::before                     { background: var(--info); }

/* 6. Team-nav (the 17-section pills) → accent on hover/active */
.team-nav a:hover                     { color: var(--accent); border-color: var(--accent); }
.team-nav a.active                    { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 7. Generic links → ink with accent hover (was red) */
a                                     { color: var(--ink); text-decoration: none; }
a:hover                               { color: var(--accent); }
a.danger                              { color: var(--red); }   /* opt-in red link */

/* 8. team-perm callout panel — tone down from red-soft → neutral */
.team-perm                            { background: var(--bg-2); border-color: var(--line); }
.team-perm-icon                       { background: var(--accent); }
.team-perm strong                     { color: var(--ink); }

/* 9. Dashboard KPI 6→4 cards on wide screens */
@media (min-width: 1024px) {
  .kpi-row                            { grid-template-columns: repeat(4, 1fr) !important; }
}

/* 10. Empty state (Vercel Geist pattern, 4-variant by class) */
.empty {
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--bg-2);
  margin: 16px 0;
}
.empty-icon         { font-size: 32px; opacity: .4; margin-bottom: 12px; }
.empty-title        { font: 600 17px/1.35 var(--font-display); margin: 0 0 6px; color: var(--ink); }
.empty-sub          { font: 400 13px/1.5 var(--font-sans); color: var(--ink-3); margin: 0 0 18px; max-width: 360px; margin-left: auto; margin-right: auto; }
.empty-cta          { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; font: 500 13px/1 var(--font-sans); text-decoration: none; display: inline-block; }
.empty-cta.subtle   { background: transparent; color: var(--accent); }

/* 11. Skeleton loaders — shape mirrors final content */
.skeleton {
  background: linear-gradient(90deg, var(--bg-3) 0%, var(--bg-2) 50%, var(--bg-3) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  display: inline-block;
}
.skel-line          { height: 12px; width: 100%; margin: 4px 0; }
.skel-line.short    { width: 40%; }
.skel-line.medium   { width: 65%; }
.skel-line.long     { width: 90%; }
.skel-row           { display: grid; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.skel-circle        { width: 24px; height: 24px; border-radius: 50%; }
.skel-block         { height: 64px; width: 100%; border-radius: 8px; }
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; background: var(--bg-3); } }

/* 12. Hover-revealed row actions (cross-page) */
.row, tr.entity-row, .t-table tbody tr {
  position: relative;
}
.row .actions, tr.entity-row .actions, .t-table tbody tr .actions {
  opacity: 0;
  transition: opacity var(--t-fast, 120ms);
}
.row:hover .actions, .row:focus-within .actions,
tr.entity-row:hover .actions, tr.entity-row:focus-within .actions,
.t-table tbody tr:hover .actions, .t-table tbody tr:focus-within .actions {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .row .actions, tr.entity-row .actions, .t-table tbody tr .actions { opacity: 1; }
}
.cr-boardroom-btn { transition: opacity var(--t-fast, 120ms); }


/* === v220 design tokens v2 === */
:root {
  /* 8-step type scale (clamp ceiling tightened) */
  --fs-xs:        11px;
  --fs-sm:        13px;
  --fs-md:        15px;
  --fs-lg:        17px;
  --fs-h4:        20px;
  --fs-h3:        24px;
  --fs-h2:        32px;
  --fs-h1:        clamp(28px, 1.6vw + 18px, 40px);
  --lh-tight:     1.2;
  --lh-snug:      1.35;
  --lh-base:      1.55;
  --lh-loose:     1.7;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semi:      600;
  /* Motion tokens */
  --t:            180ms ease-out;
  --t-slow:       280ms ease-out;
  /* Semantic severity tokens (with -soft variants for backgrounds) */
  --ok:           #16A34A;
  --ok-soft:      rgba(22,163,74,.08);
  --warn:         #D97706;
  --warn-soft:    rgba(217,119,6,.08);
  --info:         #0369A1;
  --info-soft:    rgba(3,105,161,.08);
  --crit:         #DC2626;
  --crit-soft:    rgba(220,38,38,.06);
}

/* === v220 component library === */
/* 1. PageHeader */
.page-header {
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.page-header .left { flex: 1; min-width: 220px; }
.page-header .eyebrow { color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 4px; font-weight: var(--fw-medium); }
.page-header h1 { font: var(--fw-semi) var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: -.02em; margin: 0 0 6px; color: var(--ink); }
.page-header .meta { color: var(--ink-3); font-size: var(--fs-sm); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.page-header .actions { display: flex; gap: 8px; align-items: center; }

/* 2. KPICard (with delta arrow + tabular numerals) */
.kpi-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md, 10px); padding: 16px; position: relative; overflow: hidden; transition: border-color var(--t-fast); }
.kpi-card:hover { border-color: var(--accent-line, rgba(31,41,55,.18)); }
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ink-3); }
.kpi-card.accent::before { background: var(--accent); }
.kpi-card.ok::before  { background: var(--ok); }
.kpi-card.warn::before{ background: var(--warn); }
.kpi-card.crit::before{ background: var(--crit); }
.kpi-card.info::before{ background: var(--info); }
.kpi-card .label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 4px; }
.kpi-card .value { font: var(--fw-semi) 28px/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi-card .delta { font: var(--fw-medium) 12px/1 var(--font-mono); color: var(--ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-card .delta.up   { color: var(--ok); }
.kpi-card .delta.down { color: var(--crit); }
.kpi-card .delta.flat { color: var(--ink-3); }

/* 3. EntityRow (with inline-edit + hover actions) */
.entity-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); align-items: center; transition: background var(--t-fast); position: relative; }
.entity-row:hover { background: var(--bg-2); }
.entity-row .row-main { min-width: 0; overflow: hidden; }
.entity-row .row-title { font: var(--fw-medium) var(--fs-md)/1.4 var(--font-sans); color: var(--ink); }
.entity-row .row-meta { font: var(--fw-regular) var(--fs-xs)/1.4 var(--font-mono); color: var(--ink-3); margin-top: 2px; }
.entity-row .actions { opacity: 0; transition: opacity var(--t-fast); display: flex; gap: 6px; }
.entity-row:hover .actions, .entity-row:focus-within .actions { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .entity-row .actions { opacity: 1; }
}
[data-inline-edit] { cursor: text; padding: 2px 4px; margin: -2px -4px; border-radius: 3px; transition: background var(--t-fast); }
[data-inline-edit]:hover { background: var(--bg-3); }
[data-inline-edit][contenteditable="true"] { background: var(--bg); border: 1px solid var(--accent); outline: none; box-shadow: var(--shadow-focus); }

/* 4. Tabs (component class — distinct from page-level .tabs) */
.tabs-component { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs-component button.tab { padding: 8px 14px; border: none; background: none; border-bottom: 2px solid transparent; color: var(--ink-3); font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans); cursor: pointer; }
.tabs-component button.tab[aria-selected="true"], .tabs-component button.tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.tabs-component button.tab:hover { color: var(--ink); }
.tabs-vertical { flex-direction: column; border-bottom: none; border-right: 1px solid var(--line); align-items: stretch; }
.tabs-vertical button.tab { border-bottom: none; border-right: 2px solid transparent; text-align: left; }
.tabs-vertical button.tab[aria-selected="true"], .tabs-vertical button.tab.active { border-right-color: var(--accent); border-bottom-color: transparent; }

/* 5. StatusBadge — 8 colors */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: var(--fw-medium) 10px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; border-radius: 9999px; border: 1px solid currentColor; background: transparent; }
.badge-ok      { color: var(--ok);   background: var(--ok-soft); }
.badge-warn    { color: var(--warn); background: var(--warn-soft); }
.badge-crit    { color: var(--crit); background: var(--crit-soft); }
.badge-info    { color: var(--info); background: var(--info-soft); }
.badge-neutral { color: var(--ink-3); background: var(--bg-3); border-color: var(--line-strong); }
.badge-accent  { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.badge-draft   { color: var(--ink-4); background: var(--bg-2); border-style: dashed; border-color: var(--ink-4); }
.badge-locked  { color: #6B21A8; background: rgba(107,33,168,.06); }

/* 6. Avatar + presence dot */
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-3); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font: var(--fw-semi) 11px var(--font-mono); position: relative; vertical-align: middle; }
.avatar-lg { width: 32px; height: 32px; font-size: 13px; }
.avatar-sm { width: 18px; height: 18px; font-size: 9px; }
.presence { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg); position: absolute; bottom: -2px; right: -2px; }
.presence.away { background: var(--warn); }
.presence.off  { background: var(--ink-4); }
.avatar-sm .presence { width: 6px; height: 6px; border-width: 1px; }

/* 7. Breadcrumb */
.crumbs { display: flex; gap: 6px; align-items: center; font: var(--fw-regular) var(--fs-sm)/1 var(--font-sans); color: var(--ink-3); margin-bottom: 12px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--ink-4); }
.crumbs .current { color: var(--ink); font-weight: var(--fw-medium); }

/* 8. Slide-over <dialog> variant */
dialog.slideover { padding: 0; border: none; background: var(--bg); margin: 0 0 0 auto; height: 100vh; max-height: none; max-width: 480px; width: 100%; border-radius: 12px 0 0 12px; box-shadow: -8px 0 24px rgba(0,0,0,.12); animation: cr-slidein var(--t) both; }
dialog.slideover::backdrop { background: rgba(10,10,10,.45); animation: cr-fade-in var(--t) both; }
@keyframes cr-slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes cr-fade-in { from { opacity: 0; } to { opacity: 1; } }
.slideover-head { padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--bg-2); display: flex; justify-content: space-between; align-items: center; font: var(--fw-semi) var(--fs-md)/1 var(--font-display); }
.slideover-body { padding: 20px; overflow-y: auto; flex: 1; }
.slideover-foot { padding: 14px 20px; border-top: 1px solid var(--line); background: var(--bg-2); display: flex; gap: 8px; justify-content: flex-end; }

/* 9. EmptyState 4-variant (Vercel Geist pattern) */
.empty.blank   { border-style: dashed; border-color: var(--line-strong); background: var(--bg-2); }
.empty.info    { border-style: solid; border-color: var(--info); background: var(--info-soft); }
.empty.info .empty-icon, .empty.info .empty-title { color: var(--info); }
.empty.edu     { border-style: solid; border-color: var(--accent-line); background: var(--accent-soft); }
.empty.edu .empty-title { color: var(--accent); }
.empty.guide   { border-style: solid; border-color: var(--warn); background: var(--warn-soft); }
.empty.guide .empty-icon, .empty.guide .empty-title { color: var(--warn); }

/* 10. Shortcut help dialog (referenced by chrome.js v220) */
dialog.shortcut-help { padding: 0; border: none; border-radius: 12px; box-shadow: 0 24px 48px rgba(0,0,0,.18); width: min(560px, calc(100vw - 32px)); margin: auto; background: var(--bg); }
dialog.shortcut-help::backdrop { background: rgba(10,10,10,.45); backdrop-filter: blur(2px); }
.shortcut-help-head { padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); font: var(--fw-semi) var(--fs-md)/1 var(--font-display); display: flex; justify-content: space-between; align-items: center; }
.shortcut-help-body { padding: 18px; }
.shortcut-help-body table { width: 100%; border-collapse: collapse; }
.shortcut-help-body td { padding: 6px 8px; font: var(--fs-sm)/1.4 var(--font-sans); }
.shortcut-help-body td.kbd { width: 110px; text-align: right; }
.shortcut-help-body td.desc { color: var(--ink-2); }
.shortcut-help-body .kbd-hint { margin-right: 4px; }


/* === v221 lifted from 17 numbered HQ pages === */
/* These rules previously appeared inline in 17 numbered HQ pages
   (00-15 + workflow). Page 16 has its own variant and is untouched. */
:root{--ok:#16a34a;--warn:#ea580c}
[data-theme="dark"]{--ok:#22c55e;--warn:#fb923c}
.team-wrap{max-width:1200px;margin:0 auto;padding:16px 24px}
@media(max-width:640px){.team-wrap{padding:14px 16px}}
.team-nav{display:flex;gap:4px;font-family:var(--font-mono);font-size:11px;margin-bottom:18px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.team-nav a{padding:6px 10px;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;color:var(--ink-2);text-decoration:none;white-space:nowrap;font-weight:500;letter-spacing:.04em}
.team-nav a:hover{color:var(--red);border-color:var(--red)}
.team-nav a.active{color:#fff;background:var(--red);border-color:var(--red)}
.team-head{padding:28px 28px 22px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:24px;position:relative;overflow:hidden}
.team-head::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.team-head h1{font-family:var(--font-display);font-size:clamp(1.8rem,3vw + .8rem,2.6rem);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:14px 0 8px;color:var(--ink)}
.team-head .sub{color:var(--ink-2);font-size:1rem;margin:0 0 14px;max-width:780px;line-height:1.55}
.team-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.team-meta b{color:var(--ink);font-weight:500}
.eyebrow-team{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:var(--red);text-transform:uppercase;padding:4px 9px;border:1px solid var(--red);border-radius:4px;background:var(--red-soft);display:inline-flex;align-items:center;gap:6px}
.eyebrow-team::before{content:"◢";font-size:9px}
.team-perm{background:var(--red-soft);border:1px solid var(--red);border-radius:var(--radius-md);padding:14px 18px;margin:14px 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.team-perm-icon{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700}
.team-perm-pill{font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:9999px;background:var(--bg);color:var(--red);border:1px solid var(--red);letter-spacing:.05em;text-transform:uppercase}
.section{margin:32px 0}
.section h2{font-family:var(--font-display);font-size:1.5rem;font-weight:600;margin:0 0 16px;padding:0 0 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.section h2::before{content:"";width:3px;height:20px;background:var(--red);border-radius:2px}
.section h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600;margin:18px 0 10px;color:var(--ink)}
.section h4{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--red);text-transform:uppercase;letter-spacing:.12em;margin:12px 0 6px}
.section p{color:var(--ink-2);margin:8px 0}
.t-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.t-card.accent{border-left:3px solid var(--red)}
.t-card.ok{border-left:3px solid var(--ok)}
.t-card.warn{border-left:3px solid var(--warn)}
.t-card.crit{border-left:3px solid var(--red);background:var(--red-soft)}
.t-card h3,.t-card h4{margin-top:0}
.t-card h3{font-size:1.05rem}
.t-card ul,.t-card ol{margin:8px 0;padding-left:22px}
.t-card li{margin:4px 0;color:var(--ink-2)}
.t-card p{margin:8px 0;color:var(--ink-2)}
.t-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.t-grid.cols-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.t-grid.cols-3{grid-template-columns:repeat(3,1fr)}.t-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.t-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-md);margin:14px 0;background:var(--bg)}
.t-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:600px}
.t-table th,.t-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-2)}
.t-table th{background:var(--bg-2);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-weight:600}
.t-table tr:last-child td{border-bottom:none}
.t-table tr:hover td{background:var(--bg-2)}
.t-table strong{color:var(--ink)}
code{font-family:var(--font-mono);font-size:.85em;background:var(--bg-2);color:var(--red);padding:2px 6px;border-radius:4px;border:1px solid var(--line)}
.callout{padding:13px 16px;border-radius:var(--radius-md);margin:12px 0;font-size:.94rem;border:1px solid var(--line);border-left:3px solid var(--red);background:var(--red-soft);color:var(--ink)}
.callout strong{color:var(--red);font-weight:600}
.callout.warn{border-left-color:var(--warn);background:rgba(234,88,12,.06)}
.callout.warn strong{color:var(--warn)}
.callout.crit{border-left-color:var(--red);background:var(--red-soft)}
.callout.ok{border-left-color:var(--ok);background:rgba(22,163,74,.06)}
.callout.ok strong{color:var(--ok)}
.tbadge{display:inline-block;font-family:var(--font-mono);font-size:10px;padding:2px 7px;border-radius:4px;letter-spacing:.04em;text-transform:uppercase;font-weight:600;border:1px solid currentColor;white-space:nowrap}
.tbadge.b-ok{color:var(--ok)}
.tbadge.b-warn{color:var(--warn)}
.tbadge.b-crit{color:var(--red)}
.tbadge.b-mute{color:var(--ink-3)}
.tbadge.b-accent{color:var(--red)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.crit{background:var(--red)}.dot.mute{background:var(--ink-3)}
.team-pager{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:28px 0 0}
.team-pager a{flex:1;min-width:180px;padding:14px 18px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);text-decoration:none;color:var(--ink);transition:all .15s}
.team-pager a:hover{border-color:var(--red);background:var(--bg-2)}
.team-pager .num{font-family:var(--font-mono);font-size:10px;color:var(--red);text-transform:uppercase;letter-spacing:.1em}
.team-pager .ttl{font-weight:600;margin-top:3px;color:var(--ink)}
.team-foot{margin-top:32px;padding:18px 0;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--ink-3);text-align:center}
a{color:var(--red);text-decoration:none;border-bottom:1px dotted rgba(220,38,38,.4)}
a:hover{color:var(--red-dark);border-bottom-color:var(--red)}
[data-theme="dark"] a{color:var(--red-bright)}
.theme-toggle{position:fixed;top:14px;right:14px;padding:6px 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;z-index:100;box-shadow:var(--shadow-sm)}
.theme-toggle:hover{border-color:var(--red);color:var(--red)}
.q-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;margin-bottom:10px;border-left:3px solid var(--ink-3)}
.q-card.q-ok{border-left-color:var(--ok)}
.q-card.q-research{border-left-color:var(--red)}
.q-card.q-doc{border-left-color:#0891b2}
.q-card.q-warn{border-left-color:var(--warn)}
.q-card.q-open{border-left-color:#dc2626}
.q-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:6px}
.q-head .qn{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}
.q-head h3{margin:0;font-size:1.02rem}
.q-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);margin-bottom:6px}
.q-ans{font-size:.94rem;margin-top:6px;color:var(--ink-2)}
.q-ans b{color:var(--ink)}
.kpi-grid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;position:relative}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);border-radius:var(--radius-md) 0 0 var(--radius-md)}
.kpi.ok::before{background:var(--ok)}.kpi.warn::before{background:var(--warn)}.kpi.crit::before{background:var(--red)}
.kpi-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:6px}
.kpi-value{font-family:var(--font-display);font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.kpi-value.ok{color:var(--ok)}.kpi-value.warn{color:var(--warn)}.kpi-value.crit{color:var(--red)}
.kpi-sub{font-size:.78rem;color:var(--ink-3);margin-top:6px;font-family:var(--font-mono)}
.bar{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;margin:6px 0}
.bar-fill{height:100%;background:var(--red);border-radius:3px}
.bar-fill.ok{background:var(--ok)}.bar-fill.warn{background:var(--warn)}.bar-fill.crit{background:var(--red)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 2s infinite;margin-right:6px;vertical-align:middle}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.toc-box{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 18px;margin:14px 0}
.toc-box ul{list-style:none;padding-left:0;margin:6px 0}
.toc-box li{margin:5px 0;font-family:var(--font-mono);font-size:.86rem}
.toc-box a{color:var(--ink-2)}
.toc-box a:hover{color:var(--red)}
.quote{padding:14px 18px;border-left:3px solid var(--red);background:var(--red-soft);font-style:italic;margin:14px 0;border-radius:0 var(--radius-md) var(--radius-md) 0;color:var(--ink)}


/* === v222 mega === */
/* Tabular numerals on KPI values (v223) */
.kpi-value, .kpi .value, .kpi-card .value, .kpi-v {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Slide-over inner content sections (v222) */
.slideover-row-meta {
  display: grid; grid-template-columns: 100px 1fr; gap: 6px 12px;
  font-size: var(--fs-sm, 13px); margin-bottom: 16px;
}
.slideover-row-meta dt { font-family: var(--font-mono); font-size: var(--fs-xs, 11px); text-transform: uppercase; color: var(--ink-3); letter-spacing: .06em; }
.slideover-row-meta dd { margin: 0; color: var(--ink); word-break: break-word; }
.slideover-row-meta dd .badge { vertical-align: middle; }
.slideover-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.slideover-actions a, .slideover-actions button {
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff;
  font: 500 13px/1 var(--font-sans, 'Inter', sans-serif); text-decoration: none; cursor: pointer;
}
.slideover-actions a.subtle, .slideover-actions button.subtle {
  background: transparent; color: var(--accent);
}

/* Bidder engagement chip (v225) */
.cr-bidder-engagement { margin-left: 6px; vertical-align: middle; }

/* Account vertical-tabs layout (v226) */
.account-vlayout { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
@media (max-width: 720px) { .account-vlayout { grid-template-columns: 1fr; } }
.account-vlayout .tabs-component.tabs-vertical button.tab {
  width: 100%; padding: 10px 14px; font-size: 14px; text-align: left;
}
.account-vlayout .vpanes > .card { display: none; margin: 0; }
.account-vlayout .vpanes > .card.active { display: block; }

/* Avatar wrapper inside table cells (v227) */
.cr-owner-cell { display: inline-flex; align-items: center; gap: 6px; }
.cr-owner-cell .name { font-size: var(--fs-sm, 13px); color: var(--ink-2); }