/* VMSS Global Styles — Version 20.4
   ===================================
   Table of Contents:
   1. FONT IMPORT & HEADING FONT
   2. DESIGN TOKENS (dark/light)
   3. BASE & LAYOUT (box model, body gradient, flex order)
   4. NAVBAR
   5. HERO, PANELS & CARDS
   6. BUTTONS & CTAs
   7. TYPOGRAPHY (prose, headings, lists)
   8. FOOTER
   9. ACCORDIONS (simulation & FAQ cards)
   10. BACK ARROW & MOBILE MENU
   11. ANIMATIONS & KEYFRAMES
   12. LAYER CARD VARIANTS & RING DIAGRAM
   13. JUSTICE FLOW
   14. SYSTEMS & SAD PAGE COMPONENTS
   15. PERFORMANCE & REDUCED MOTION
   16. INTERACTIVE DIAGRAMS & STI SIMULATION
   17. HUD / LIVE STATE PANEL
   18. ACCESSIBILITY
   19. DENSITY OVERRIDES (Tailwind inline class overrides)
   =================================== */

/* ----- 1. FONT IMPORT & HEADING FONT ----- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

h1, h2, h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* ----- 2. DESIGN TOKENS ----- */
:root {
  --bg-primary: #07090f;
  --bg-secondary: #101522;
  --bg-tertiary: #151c2d;
  --bg-elevated: rgba(16, 21, 34, 0.84);
  --text-primary: #f7f8fb;
  --text-secondary: #c6cfdd;
  --text-muted: #8792a6;
  --accent: #f3c15f;
  --accent-soft: #f7d68c;
  --accent-glow: rgba(243, 193, 95, 0.18);
  --border: rgba(144, 158, 182, 0.18);
  --border-strong: rgba(243, 193, 95, 0.22);
  --shadow: rgba(0, 0, 0, 0.42);
  --shadow-accent: rgba(243, 193, 95, 0.2);
}

[data-theme="light"] {
  --bg-primary: #f5f7fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #edf2f8;
  --bg-elevated: rgba(255, 255, 255, 0.88);
  --text-primary: #0e1728;
  --text-secondary: #344156;
  --text-muted: #607089;
  --accent: #b7791f;
  --accent-soft: #8a5b12;
  --accent-glow: rgba(183, 121, 31, 0.11);
  --border: rgba(99, 115, 141, 0.18);
  --border-strong: rgba(183, 121, 31, 0.25);
  --shadow: rgba(25, 39, 67, 0.08);
  --shadow-accent: rgba(183, 121, 31, 0.14);
}

/* ----- 3. BASE & LAYOUT ----- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Layered radial + linear gradient gives the page a subtle warm glow
   at the top without a harsh edge. Transitions smoothly on theme change. */
body {
  background:
    radial-gradient(circle at top, var(--accent-glow), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 22%),
    var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
}

.vmss-page-shell {
  position: relative;
}

/* Ambient glow orbs — fixed pseudo-elements behind all page content.
   Left orb: warm gold accent. Right orb: cool blue counterbalance.
   Disabled on mobile to avoid paint cost on low-power devices. */
.vmss-page-shell::before,
.vmss-page-shell::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.45;
  will-change: opacity;
  transform: translateZ(0);
}

.vmss-page-shell::before {
  top: 8rem;
  left: -4rem;
  width: 14rem;
  height: 14rem;
  background: var(--accent-glow);
}

.vmss-page-shell::after {
  right: -5rem;
  bottom: 8rem;
  width: 18rem;
  height: 18rem;
  background: rgba(89, 131, 255, 0.08);
}

main, section, footer, nav, #navbar-placeholder, #footer-placeholder {
  position: relative;
  z-index: 1;
}

/* Layout order guards — ensures navbar → main → footer stacking regardless
   of DOM insertion order. The navbar and footer are fetched asynchronously
   and injected into placeholders, so explicit flex order prevents any flash
   of incorrect stacking during the fetch. */
body {
  display: flex;
  flex-direction: column;
}

#navbar-placeholder {
  order: 0;
  width: 100%;
}

main {
  order: 1;
  width: 100%;
}

#footer-placeholder {
  order: 2;
  width: 100%;
}

/* ----- 4. NAVBAR ----- */
.hero-bg {
  background:
    radial-gradient(circle at 20% 15%, var(--accent-glow), transparent 28%),
    radial-gradient(circle at 80% 10%, rgba(75, 130, 255, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%),
    var(--bg-primary);
}

.vmss-nav {
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 20px 40px -28px var(--shadow);
}

.vmss-nav-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--accent-glow), transparent), var(--bg-tertiary);
  color: var(--accent);
  font-size: 1.4rem;
  box-shadow: 0 12px 28px -18px var(--shadow-accent);
}

.vmss-icon-button {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  transition: transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.vmss-icon-button:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  color: var(--accent);
}

.vmss-mobile-menu {
  background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
  border-color: var(--border);
}

.nav-link {
  color: var(--text-secondary);
  position: relative;
}

.nav-link:hover {
  color: var(--accent) !important;
}

.nav-link-active {
  color: var(--accent) !important;
  font-weight: 700;
}

.nav-link-join {
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--accent-glow), transparent);
}

/* ----- 5. HERO, PANELS & CARDS ----- */
.vmss-home-section {
  position: relative;
}

.vmss-home-section-muted {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent), rgba(255,255,255,0.015);
}

.vmss-hero-surface,
.vmss-panel,
.vmss-panel-strong,
.vmss-mini-panel,
.vmss-stat-card,
.layer-card,
.sad-card,
.page-hero-card,
.vmss-enhanced-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 42%), var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  box-shadow: 0 30px 60px -44px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
}

.vmss-hero-surface {
  padding: 1.5rem;
}

.vmss-panel,
.vmss-enhanced-panel {
  padding: 2rem;
}

.vmss-mini-panel {
  padding: 1rem 1.1rem;
}

.vmss-mini-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.vmss-mini-copy {
  margin-top: 0.65rem;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.96rem;
}

.vmss-status-pill {
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(94, 205, 159, 0.25);
  background: rgba(94, 205, 159, 0.1);
  color: #87e2b5;
}

/* ----- 6. BUTTONS & CTAs ----- */
.vmss-cta-primary,
.vmss-cta-secondary,
button#open-entry-modal,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.95rem 1.45rem;
  border-radius: 1rem;
  font-weight: 700;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.vmss-cta-primary,
button#open-entry-modal,
button[type="submit"] {
  color: #1d1402 !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 86%, white), var(--accent));
  box-shadow: 0 22px 38px -22px var(--shadow-accent);
}

.vmss-cta-primary:hover,
button#open-entry-modal:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 28px 40px -22px var(--shadow-accent);
}

.vmss-cta-secondary {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary) !important;
}

.vmss-cta-secondary:hover {
  border-color: var(--border-strong);
  color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}

.vmss-stat-card {
  padding: 1rem;
}

.vmss-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
}

.vmss-stat-label {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vmss-eyebrow {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--text-muted);
}

.vmss-section-heading-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.vmss-section-title {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.vmss-section-copy {
  color: var(--text-secondary);
  line-height: 1.8;
}

.vmss-layer-stack {
  padding: 1.15rem;
  border-radius: 2rem;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent), var(--bg-elevated);
  box-shadow: 0 32px 50px -38px var(--shadow);
}

.vmss-layer-band {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: 1.2rem;
  border: 1px solid var(--border);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.vmss-layer-band + .vmss-layer-band {
  margin-top: 0.75rem;
}

.vmss-layer-band:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.vmss-layer-band-plus { background: rgba(243, 193, 95, 0.12); }
.vmss-layer-band-zero { background: rgba(255, 255, 255, 0.04); }
.vmss-layer-band-negative { background: rgba(237, 136, 59, 0.11); }
.vmss-layer-band-negative-deep { background: rgba(210, 94, 94, 0.11); }
.vmss-layer-band-terminal { background: rgba(167, 58, 58, 0.12); }

.vmss-layer-level {
  min-width: 3.2rem;
  min-height: 3.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-soft);
}

.vmss-layer-name {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
}

.vmss-layer-desc {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.vmss-content-frame {
  position: relative;
}

.vmss-title {
  font-size: clamp(2.8rem, 5vw, 4.8rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em;
  color: var(--text-primary) !important;
}

.vmss-subtitle {
  margin-top: 1rem !important;
  color: var(--text-secondary) !important;
  line-height: 1.8 !important;
}

.vmss-page-intro {
  padding: 2rem;
  margin-bottom: 2rem;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.layer-card, .sad-card {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.layer-card:hover, .sad-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 30px 45px -30px var(--shadow-accent);
}

.vmss-enhanced-card {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.22s ease, box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.vmss-enhanced-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 26px 42px -32px var(--shadow-accent);
}

/* ----- 7. TYPOGRAPHY ----- */
.vmss-prose,
.prose {
  color: var(--text-secondary) !important;
  max-width: none !important;
  line-height: 1.85 !important;
}

.vmss-prose h2,
.prose h2 {
  font-size: clamp(1.7rem, 2.4vw, 2.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.035em;
  color: var(--text-primary) !important;
  margin-top: 3.5rem !important;
  margin-bottom: 1.25rem !important;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.vmss-prose h3,
.prose h3 {
  font-size: clamp(1.3rem, 2vw, 1.75rem) !important;
  color: var(--accent) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.9rem !important;
}

.vmss-prose p,
.prose p,
.vmss-prose li,
.prose li {
  color: var(--text-secondary) !important;
}

.vmss-prose strong,
.prose strong {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.vmss-prose ul,
.vmss-prose ol,
.prose ul,
.prose ol {
  padding-left: 1.45rem;
}

.vmss-prose li + li,
.prose li + li {
  margin-top: 0.5rem;
}

/* ----- 8. FOOTER ----- */
.vmss-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), color-mix(in srgb, var(--bg-secondary) 88%, transparent);
}

/* ----- 9. ACCORDIONS ----- */
.simulation-card,
.faq-card {
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.simulation-card:hover,
.faq-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 32px -16px var(--shadow);
}

.simulation-content,
.faq-content {
  border-top: 1px solid var(--border);
}

.simulation-content p + p,
.faq-content p + p {
  margin-top: 1rem;
}

/* ----- 10. BACK ARROW & MOBILE MENU ----- */
.back-arrow {
  z-index: 60;
  transition: opacity 0.3s ease, transform 0.2s ease, color 0.2s ease;
  width: 3.1rem;
  height: 3.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--accent) !important;
  box-shadow: 0 18px 28px -20px var(--shadow);
}

.back-arrow:hover {
  transform: translateY(-1px) scale(1.04);
}

.back-arrow.scrolled-hidden {
  opacity: 0;
  pointer-events: none;
}

.emblem-logo {
  animation: none;
}

#mobile-menu {
  transition: all 0.3s ease-in-out;
  transform-origin: top;
}

#mobile-menu:not(.hidden) {
  animation: slideDown 0.28s ease-out forwards;
}

/* ----- 11. ANIMATIONS & KEYFRAMES ----- */
/* Scroll-reveal: elements start invisible/offset and transition in when
   IntersectionObserver fires (see initReveal in script.js). */
.reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}

a {
  color: inherit;
}

a:hover {
  color: var(--accent);
}

[data-theme="light"] .text-zinc-100,
[data-theme="light"] .text-zinc-200,
[data-theme="light"] .text-zinc-300,
[data-theme="light"] .text-zinc-400,
[data-theme="light"] .text-zinc-500 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-yellow-400,
[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-red-400,
[data-theme="light"] .text-red-500 {
  color: var(--accent) !important;
}

[data-theme="light"] .bg-zinc-950,
[data-theme="light"] .bg-zinc-900,
[data-theme="light"] .bg-zinc-800 {
  background-color: var(--bg-secondary) !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 0.95; transform: scale(1); }
}

@keyframes subtlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 900px) {
  .vmss-section-heading-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
  }
}

@media (max-width: 768px) {
  .vmss-panel,
  .vmss-enhanced-panel,
  .vmss-hero-surface,
  .layer-card,
  .sad-card {
    padding: 1.4rem !important;
  }

  .vmss-page-intro {
    padding: 1.35rem;
  }

  .back-arrow {
    left: 1rem !important;
    top: 5.8rem !important;
  }
}

/* ----- 12. LAYER CARD VARIANTS & RING DIAGRAM ----- */
.layer-card h2 {
  line-height: 1.1;
  overflow-wrap: anywhere;
}

/* Layer card level variants */

.layer-card.level-positive {
  border-color: rgba(251,191,36,0.35);
  background: linear-gradient(
    to bottom,
    rgba(251,191,36,0.12),
    rgba(251,191,36,0.03)
  );
}

.layer-card.level-neutral {
  border-color: rgba(255,255,255,0.12);
}

.layer-card.level-negative {
  border-color: rgba(255,255,255,0.08);
  opacity: 0.92;
}

/* Ring diagram (SVG) */

.vmss-ring-diagram {
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.ring-label {
  font-size: 16px;
  letter-spacing: 2px;
  fill: var(--text-secondary);
  font-weight: 600;
  text-anchor: middle;
}

.ring-center-label {
  font-size: 18px;
  font-weight: 700;
  fill: var(--text-primary);
}

/* Ring stroke colours */

.ring {
  fill: none;
  stroke-width: 4;
  opacity: 0.95;
  stroke-linecap: round;
}

/* Segmented ring dashes */

.ring-main,
.ring-noncompliance,
.ring-predatory,
.ring-terminal {
  stroke-dasharray: 10 6;
}

/* Sanctuary ring: solid with gold glow */

.ring-sanctuary {
  stroke: var(--accent);
  stroke-width: 6;
  filter: drop-shadow(0 0 6px rgba(255,200,80,0.35));
}

.ring-main {
  stroke: rgba(220,220,220,0.8);
}

.ring-noncompliance {
  stroke: rgba(255,180,60,0.8);
}

.ring-predatory {
  stroke: rgba(255,120,120,0.8);
}

.ring-terminal {
  stroke: rgba(200,40,40,0.9);
}

.vmss-ring-diagram circle {
  transform-origin: 300px 300px;
  animation: ringRotate 120s linear infinite;
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ----- 13. JUSTICE FLOW ----- */

.vmss-flow-shell {
  border: 1px solid var(--border);
  border-radius: 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent), var(--bg-elevated);
  box-shadow: 0 30px 60px -44px var(--shadow);
  padding: 2rem;
}

.vmss-flow-top {
  display: grid;
  gap: 1rem;
  max-width: 820px;
  margin: 0 auto;
}

.vmss-flow-node {
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  background: rgba(255,255,255,0.03);
  padding: 1.4rem 1.5rem;
  text-align: center;
}

.vmss-flow-node-accent {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--accent-glow), transparent), rgba(255,255,255,0.03);
}

.vmss-flow-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}

.vmss-flow-node h3,
.vmss-flow-box h4,
.vmss-flow-branch-head h3 {
  color: var(--text-primary);
}

.vmss-flow-node p,
.vmss-flow-box p,
.vmss-flow-branch-head p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-top: 0.6rem;
}

.vmss-flow-arrow {
  text-align: center;
  color: var(--accent);
  font-size: 1.8rem;
  line-height: 1;
}

.vmss-flow-branch-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.2rem 0 1.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.76rem;
}

.vmss-flow-branch-divider::before,
.vmss-flow-branch-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.vmss-flow-branches {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: 1fr 1fr;
}

.vmss-flow-branch {
  border: 1px solid var(--border);
  border-radius: 1.6rem;
  padding: 1.4rem;
}

.vmss-flow-branch-social {
  background: rgba(255,255,255,0.02);
}

.vmss-flow-branch-criminal {
  background: linear-gradient(180deg, rgba(190,70,70,0.09), transparent), rgba(255,255,255,0.02);
  border-color: rgba(210,94,94,0.25);
}

.vmss-flow-branch-head {
  text-align: center;
  margin-bottom: 1.2rem;
}

.vmss-flow-branch-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

.vmss-flow-branch-grid {
  display: grid;
  gap: 1rem;
}

.vmss-flow-box {
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  background: rgba(255,255,255,0.03);
  padding: 1rem 1.1rem;
}

.vmss-flow-box-warn {
  border-color: rgba(210,94,94,0.22);
  background: rgba(210,94,94,0.08);
}

@media (max-width: 900px) {
  .vmss-flow-branches {
    grid-template-columns: 1fr;
  }

  .vmss-flow-shell {
    padding: 1.3rem;
  }
}

/* ----- 14. SYSTEMS & SAD PAGE COMPONENTS ----- */
.systems-hero-card,
.sad-hero-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%), var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 34px 70px -50px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
}

.systems-jump-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.systems-jump-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-secondary);
  font-weight: 600;
  transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.systems-jump-link:hover {
  color: var(--accent);
  border-color: var(--border-strong);
  transform: translateY(-1px);
  background: rgba(255,255,255,0.045);
}

.systems-diagram-shell {
  padding: 2rem;
}

.systems-diagram-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.systems-flow-grid {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

.systems-flow-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.systems-flow-grid-5 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.systems-flow-node {
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  background: rgba(255,255,255,0.03);
  padding: 1.15rem;
  text-align: center;
}

.systems-flow-node span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.systems-flow-node strong {
  display: block;
  color: var(--text-primary);
  font-size: 1rem;
}

.systems-flow-node p {
  margin-top: 0.55rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.7;
}

.systems-flow-node-accent {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--accent-glow), transparent), rgba(255,255,255,0.03);
}

.systems-flow-node-warn {
  border-color: rgba(210,94,94,0.26);
  background: rgba(210,94,94,0.08);
}

.systems-flow-arrow,
.systems-flow-arrow-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.8rem;
}

.systems-callout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.systems-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.systems-pill {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(255,255,255,0.03);
  padding: 1rem 1.15rem;
  color: var(--text-secondary);
}

.systems-pill i {
  color: var(--accent);
}

.systems-column-shell {
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: rgba(255,255,255,0.02);
  padding: 1.1rem;
}

.systems-column-shell-warn {
  border-color: rgba(210,94,94,0.25);
  background: linear-gradient(180deg, rgba(210,94,94,0.08), transparent), rgba(255,255,255,0.02);
}

.systems-column-label,
.sad-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.systems-stack-flow {
  display: grid;
  gap: 0.8rem;
}

.sad-summary-panel {
  position: relative;
  overflow: hidden;
}

.sad-summary-panel::after,
.systems-hero-card::after,
.sad-hero-card::after {
  content: "";
  position: absolute;
  width: 14rem;
  height: 14rem;
  right: -4rem;
  top: -4rem;
  background: var(--accent-glow);
  filter: blur(45px);
  pointer-events: none;
}

.sad-card {
  position: relative;
  overflow: hidden;
}

.sad-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 55%);
  pointer-events: none;
}

.sad-card-featured {
  border-color: var(--border-strong);
  box-shadow: 0 26px 42px -32px var(--shadow-accent);
}

.sad-standards-shell {
  padding: 1.5rem;
}

.sad-tier-grid {
  display: grid;
  gap: 0.85rem;
}

.sad-tier-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: rgba(255,255,255,0.03);
  padding: 1rem 1.1rem;
}

.sad-tier-row-elite {
  border-color: var(--border-strong);
  background: linear-gradient(180deg, var(--accent-glow), transparent), rgba(255,255,255,0.03);
}

.sad-tier-name {
  color: var(--text-primary);
  font-weight: 700;
}

.sad-tier-copy {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin-top: 0.25rem;
}

.sad-tier-values {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 8rem;
  text-align: right;
}

.sad-tier-values span {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
}

.sad-tier-values-single {
  min-width: 6rem;
}

@media (min-width: 900px) {
  .systems-diagram-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
  }
}

@media (max-width: 1100px) {
  .systems-flow-grid-5 {
    grid-template-columns: 1fr;
  }

  .systems-flow-grid-5 .systems-flow-arrow {
    transform: rotate(90deg);
    min-height: 1.6rem;
  }

  .systems-flow-grid-4,
  .systems-callout-grid,
  .systems-pill-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .systems-jump-grid,
  .systems-callout-grid,
  .systems-pill-grid,
  .systems-flow-grid-4 {
    grid-template-columns: 1fr;
  }

  .sad-tier-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .sad-tier-values {
    text-align: left;
    min-width: 0;
  }

  .systems-diagram-shell,
  .sad-standards-shell {
    padding: 1.2rem;
  }
}

/* ----- 15. PERFORMANCE & REDUCED MOTION ----- */
@media (max-width: 768px) {
  .vmss-page-shell::before,
  .vmss-page-shell::after {
    display: none;
  }
}

img {
  max-width: 100%;
  height: auto;
}

.reveal-item {
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-item,
  .emblem-logo,
  .vmss-ring-diagram circle,
  #mobile-menu,
  body,
  .vmss-hud,
  .vmss-layer-card.is-linked-active,
  .is-vmss-current,
  .vmss-flash {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* ----- 16. INTERACTIVE DIAGRAMS & STI SIMULATION ----- */
.vmss-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, var(--accent-glow), transparent);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vmss-diagram-shell { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr); gap:1.5rem; align-items:stretch; }
.vmss-diagram-stage,.vmss-sim-panel,.vmss-score-card,.vmss-breakdown-card,.vmss-profile-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 42%), var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 1.8rem;
  box-shadow: 0 30px 60px -44px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  padding: 1.5rem;
}
.vmss-diagram-stage svg { width:100%; height:auto; overflow:visible; }
/* The detail panel sits beside the ring diagram but should read as floating
   content, not a card. All card chrome (border, background, shadow) is
   suppressed here. padding retained for alignment. */
.vmss-detail-panel { background:transparent; border:none; box-shadow:none; backdrop-filter:none; padding:1.5rem 0.5rem; }
.vmss-detail-panel--card { background:linear-gradient(180deg,rgba(255,255,255,0.025),transparent 50%),var(--bg-elevated); border:1px solid var(--border) !important; border-radius:1.8rem; box-shadow:0 20px 50px -40px var(--shadow); padding:1.8rem 1.6rem; }
.vmss-ring-svg { width:110%; height:auto; max-height:580px; display:block; margin:0 auto; margin-left:-5%; overflow:visible; }
@media (max-width:960px) { .vmss-ring-svg { width:100%; margin-left:0; } }
.vmss-ring-node { cursor:pointer; transition:opacity .22s ease, transform .22s ease; }
.vmss-ring-node .ring-hit,.vmss-ring-node .ring-core,.layer-card {
  transition: transform .22s ease, opacity .22s ease, stroke .22s ease, stroke-opacity .22s ease, fill .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease, stroke-width .22s ease;
}
/* Inverted glow: all rings glow by default, selected ring dims to spotlight the detail panel */
.vmss-ring-node .ring-core { filter:drop-shadow(0 0 18px currentColor); }
.vmss-ring-outer .ring-core { stroke-opacity:.3; filter:drop-shadow(0 0 6px currentColor); }
[data-theme="light"] .vmss-ring-outer .ring-core { stroke-opacity:.45; }
[data-theme="light"] .vmss-ring-node .ring-core { filter:none; }
[data-theme="light"] .vmss-ring-node.is-active .ring-core { filter:drop-shadow(0 0 12px rgba(0,0,0,0.35)); stroke-opacity:1; stroke-width:16; }
[data-theme="light"] .vmss-ring-node:hover:not(.is-active) .ring-core { filter:drop-shadow(0 0 6px rgba(0,0,0,0.2)); stroke-width:15; }
[data-theme="light"] .vmss-ring-outer.is-active .ring-core { filter:drop-shadow(0 0 8px rgba(0,0,0,0.25)); stroke-opacity:.4; stroke-width:12; }
.vmss-ring-outer:hover:not(.is-active) .ring-core { stroke-opacity:.9; }
.vmss-ring-node.is-dimmed { opacity:1; }
.vmss-ring-node.is-active { opacity:1; }
.vmss-ring-node.is-active .ring-core { stroke-opacity:1; stroke-width:16; filter:drop-shadow(0 0 32px currentColor) drop-shadow(0 0 8px currentColor); }
.vmss-ring-node.is-active .ring-hit { opacity:.35; }
.vmss-ring-outer.is-active .ring-core { stroke-opacity:.35; stroke-width:12; filter:none; }
.vmss-ring-outer.is-active .ring-hit { opacity:.15; }
.vmss-ring-node:hover:not(.is-active) .ring-core { stroke-width:16; filter:drop-shadow(0 0 28px currentColor); }
.vmss-ring-node:hover:not(.is-active) .ring-hit { transform-origin:center; transform:scale(1.02); }
.vmss-ring-status { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.vmss-layer-pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.vmss-layer-pill { padding:.4rem .75rem; border-radius:999px; border:1px solid var(--border); color:var(--text-secondary); background:rgba(255,255,255,0.03); font-size:.76rem; font-weight:500; }
.vmss-detail-stat { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-top:1.2rem; }
.vmss-detail-stat > div,.vmss-readout-tile { padding:1rem 1.1rem; border-radius:1rem; background:rgba(255,255,255,0.025); border:1px solid rgba(144,158,182,0.12); }
.vmss-detail-stat dt,.vmss-readout-label,.vmss-input-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.18em; color:var(--text-muted); }
.vmss-detail-stat dd,.vmss-readout-value { margin-top:.4rem; color:var(--text-primary); font-weight:600; font-size:.9rem; line-height:1.45; }
.layer-card { transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.layer-card.is-linked-active,.vmss-layer-card.is-linked-active { border-color:var(--accent); box-shadow:0 24px 42px -28px var(--shadow-accent); transform:translateY(-3px); }
.layer-card--gold:hover { border-color:rgba(243,193,95,0.4); box-shadow:0 16px 36px -24px rgba(243,193,95,0.3); }
.layer-card--white:hover { border-color:rgba(255,255,255,0.25); box-shadow:0 16px 36px -24px rgba(255,255,255,0.12); }
.layer-card--orange:hover { border-color:rgba(237,136,59,0.4); box-shadow:0 16px 36px -24px rgba(237,136,59,0.25); }
.layer-card--red:hover { border-color:rgba(210,94,94,0.4); box-shadow:0 16px 36px -24px rgba(210,94,94,0.2); }
.vmss-mini-flow { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1rem; }
.vmss-mini-flow .flow-step { flex:1 1 140px; padding:.9rem 1rem; border-radius:1rem; border:1px solid var(--border); background:rgba(255,255,255,0.03); }
.vmss-slider-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.vmss-range-row { padding:1rem; border-radius:1rem; border:1px solid var(--border); background:rgba(255,255,255,0.03); }
.vmss-range-row input[type="range"] { width:100%; margin-top:.8rem; accent-color:var(--accent); }
.vmss-range-meta { display:flex; justify-content:space-between; gap:1rem; margin-top:.5rem; color:var(--text-muted); font-size:.82rem; }
.vmss-console-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,0.95fr); gap:1.5rem; align-items:start; }
.vmss-profile-buttons { display:flex; flex-wrap:wrap; gap:.65rem; }
.vmss-chip-button { padding:.7rem 1rem; border-radius:999px; border:1px solid var(--border); color:var(--text-primary); background:rgba(255,255,255,0.03); font-weight:600; transition:transform .22s ease,border-color .22s ease,color .22s ease; }
.vmss-chip-button:hover,.vmss-chip-button.is-active { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.vmss-readouts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.vmss-trajectory-arrow { display:inline-block; font-weight:800; margin-right:.25rem; }
.vmss-trajectory-arrow.is-improving { color:#4ade80; }
.vmss-trajectory-arrow.is-declining { color:#f87171; }
.vmss-trajectory-arrow.is-stable { color:var(--text-muted); }
.vmss-trajectory-arrow.is-neutral { color:var(--text-muted); opacity:.5; }
/* STI gauge — SVG circle with stroke-dashoffset animation.
   The gauge starts fully hidden (dashoffset = circumference) and
   transitions to (1 - score/100) * circumference on each render.
   .is-strong adds a brighter glow when score >= 70 (Main Layer+). */
.vmss-gauge { position:relative; width:min(280px,100%); aspect-ratio:1; margin:0 auto; }
.vmss-gauge svg { width:100%; height:100%; }
.vmss-gauge-track { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:14; }
.vmss-gauge-progress { fill:none; stroke:var(--accent); stroke-width:14; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .5s ease, stroke .3s ease; filter:drop-shadow(0 0 10px var(--shadow-accent)); }
.vmss-gauge-center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.vmss-score-number { font-size:clamp(2.8rem,6vw,4rem); line-height:.95; font-weight:800; color:var(--text-primary); }
.vmss-score-caption { color:var(--text-muted); margin-top:.35rem; }
.vmss-ladder { margin-top:1.25rem; display:grid; gap:.65rem; }
/* Ladder step — the left-edge accent bar (::before) is transparent by default
   and fills with accent colour when .is-current is applied. The translateX(4px)
   nudge gives a subtle "selected" indent effect. */
.vmss-ladder-step { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; border-radius:1rem; border:1px solid var(--border); background:rgba(255,255,255,0.03); overflow:hidden; transition:border-color .22s ease, transform .22s ease, background-color .22s ease; }
.vmss-ladder-step::before { content:""; position:absolute; inset:0 auto 0 0; width:.35rem; background:transparent; transition:background .22s ease; }
.vmss-ladder-step.is-current { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--bg-secondary)); transform:translateX(4px); }
.vmss-ladder-step.is-current::before { background:var(--accent); }
.vmss-ladder-step .step-range { color:var(--text-muted); font-size:.84rem; }
.vmss-breakdown-bars { display:grid; gap:.75rem; margin-top:1rem; }
/* Factor breakdown bar — three-column grid: label | track | number.
   On mobile (<960px) this reflows to two rows: label+number on row 1,
   track spanning full width on row 2 (see mobile breakpoint below). */
.vmss-breakdown-bar { display:grid; grid-template-columns:130px minmax(0,1fr) 56px; gap:.85rem; align-items:center; }
.vmss-breakdown-bar .bar-track { position:relative; height:.6rem; border-radius:999px; background:rgba(255,255,255,0.06); overflow:hidden; }
.vmss-breakdown-bar .bar-fill { position:absolute; inset:0 auto 0 0; width:0%; border-radius:999px; background:linear-gradient(90deg, var(--accent-soft), var(--accent)); transition:width .45s ease; }
.vmss-insight-list { display:grid; gap:.75rem; margin-top:1rem; }
.vmss-insight-item { padding:.9rem 1rem; border:1px solid var(--border); border-radius:1rem; background:rgba(255,255,255,0.03); color:var(--text-secondary); }
.vmss-insight-item strong { color:var(--text-primary); }
.vmss-action-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }
.vmss-action-row .vmss-dash-btn { text-align:center; justify-content:center; }
@media (max-width: 1100px) { .vmss-readouts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 960px) {
  .vmss-diagram-shell,.vmss-console-layout,.vmss-slider-grid,.vmss-readouts,.vmss-detail-stat { grid-template-columns:1fr; }
  .vmss-breakdown-bar {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: .4rem .85rem;
  }
  .vmss-breakdown-bar .bar-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .bar-number {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}

/* ----- 17. HUD / LIVE STATE PANEL ----- */
.vmss-hud {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: min(21rem, calc(100vw - 1.5rem));
  z-index: 80;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 1.2rem;
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--accent);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%), var(--bg-elevated);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 50px -30px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: opacity .24s ease, transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.vmss-hud[data-layer="+1"] { box-shadow: 0 18px 54px -30px rgba(243,193,95,0.55), inset 0 1px 0 rgba(255,255,255,0.08); }
[data-theme="light"] .vmss-hud { box-shadow: 0 18px 50px -30px var(--shadow), inset 0 1px 0 rgba(255,255,255,0.5); backdrop-filter:blur(20px); background:linear-gradient(180deg,rgba(255,255,255,0.85),rgba(255,255,255,0.72)),var(--bg-elevated); }
[data-theme="light"] .vmss-hud[data-layer="+1"] { box-shadow: 0 18px 54px -30px rgba(183,121,31,0.24), inset 0 1px 0 rgba(255,255,255,0.65); }
.vmss-hud-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.65rem; font-weight:700; }
.vmss-hud-body { display:grid; gap:1px; margin:.4rem 0; background:var(--border); border-radius:.5rem; overflow:hidden; }
.vmss-hud-row { display:flex; justify-content:space-between; gap:1rem; padding:0.4rem .6rem; color:var(--text-secondary); font-size:.82rem; background:var(--bg-elevated); }
.vmss-hud-row strong { color: var(--text-primary); font-weight:700; }
.vmss-hud-label { color: var(--text-muted); font-size: 0.72rem; text-transform:uppercase; letter-spacing:.1em; }
.vmss-hud-actions { display:grid; grid-template-columns: 1fr 1fr; gap:0.5rem; margin-top:0.75rem; }
.vmss-hud-btn { display:inline-flex; align-items:center; justify-content:center; padding:.5rem .7rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text-primary); font-weight:600; font-size:.78rem; transition:border-color .15s,color .15s; }
.vmss-hud-btn:hover { border-color:var(--accent); color:var(--accent); }
.vmss-hud-btn.is-primary { background:linear-gradient(180deg, var(--accent-soft), var(--accent)); color:#1a1403; border-color: rgba(243,193,95,0.55); }
.vmss-hud-btn.is-primary:hover { filter:brightness(1.1); }
.is-vmss-current { transform: translateY(-4px); border-color: rgba(243,193,95,0.55) !important; box-shadow: 0 24px 44px -32px rgba(243,193,95,0.45); }
.vmss-live-panel { padding: 1.3rem; border-radius: 1.6rem; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 42%), var(--bg-elevated); box-shadow: 0 24px 50px -38px var(--shadow); }
.vmss-live-panel--v17 { padding:1.2rem 1.4rem; border-radius:1.2rem; background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent 50%),var(--bg-elevated); border:1px solid var(--border-strong); }
.vmss-live-panel--v17 .vmss-readout-tile { padding:.75rem 1rem; border-radius:.75rem; border-color:rgba(144,158,182,0.12); transition:border-color .2s; }
.vmss-live-panel--v17 .vmss-readout-tile:hover { border-color:var(--accent); }
.vmss-live-panel--v17 .vmss-readout-value { font-size:.95rem; font-weight:800; }
.vmss-live-panel--v17 .vmss-readout-label { font-size:.6rem; letter-spacing:.2em; }
.vmss-event-buttons { display:flex; flex-wrap:wrap; gap:0.65rem; }
.vmss-event-buttons .vmss-chip-button { flex:1 1 auto; text-align:center; }
.vmss-randomize-btn { flex:1 1 100% !important; justify-content:center; }
.vmss-event-divider { border:none; border-top:1px solid var(--border); margin:1.2rem 0 1rem; }
.vmss-chip-severe { border-color:rgba(248,113,113,0.3) !important; color:#f87171 !important; }
.vmss-chip-severe:hover { border-color:#f87171 !important; }

/* Event history log (v17.6) */
.vmss-event-history { max-height:280px; overflow-y:auto; display:grid; gap:.5rem; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.vmss-event-empty { color:var(--text-muted); font-size:.85rem; padding:.5rem 0; }
.vmss-event-entry { padding:.65rem .85rem; border-radius:.75rem; border:1px solid var(--border); background:rgba(255,255,255,0.02); position:relative; padding-left:1.15rem; }
.vmss-event-entry::before { content:""; position:absolute; left:0; top:.5rem; bottom:.5rem; width:3px; border-radius:2px; }
.vmss-event-entry.is-clearable::before { background:#4ade80; }
.vmss-event-entry.is-permanent::before { background:#f87171; }
.vmss-event-entry-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.vmss-event-entry-label { font-size:.82rem; font-weight:600; color:var(--text-primary); }
.vmss-event-badge { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; padding:.2rem .5rem; border-radius:999px; font-weight:700; }
.vmss-event-badge.is-clearable { background:rgba(74,222,128,0.12); color:#4ade80; }
.vmss-event-badge.is-permanent { background:rgba(248,113,113,0.12); color:#f87171; }
.vmss-event-entry-meta { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.3rem; }
.vmss-event-delta { font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; }
.vmss-event-delta.is-positive { color:#4ade80; }
.vmss-event-delta.is-negative { color:#f87171; }
.vmss-event-age { font-size:.72rem; color:var(--text-muted); }

/* Three-axis proportional response (v17.6, Art. XIV) */
.vmss-axis-panel { display:grid; gap:.5rem; }
.vmss-axis-row { display:flex; align-items:center; justify-content:space-between; padding:.45rem .65rem; border-radius:.6rem; background:rgba(255,255,255,0.02); border:1px solid var(--border); }
.vmss-axis-label { font-size:.78rem; font-weight:600; color:var(--text-secondary); }
.vmss-axis-value { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.15rem .5rem; border-radius:999px; }
.vmss-axis-value.is-low,.vmss-axis-value.is-isolated,.vmss-axis-value.is-reversible { background:rgba(74,222,128,0.1); color:#4ade80; }
.vmss-axis-value.is-moderate,.vmss-axis-value.is-emerging { background:rgba(251,191,36,0.12); color:#fbbf24; }
.vmss-axis-value.is-high,.vmss-axis-value.is-established,.vmss-axis-value.is-irreversible { background:rgba(248,113,113,0.12); color:#f87171; }
.vmss-axis-divider { border:none; border-top:1px solid var(--border); margin:.25rem 0; }
.vmss-axis-response { font-size:.82rem; color:var(--text-secondary); padding:.5rem .65rem; border-radius:.6rem; border:1px solid var(--border); }
.vmss-axis-response.is-level-0 { border-color:rgba(74,222,128,0.15); }
.vmss-axis-response.is-level-1 { border-color:rgba(251,191,36,0.2); background:rgba(251,191,36,0.04); }
.vmss-axis-response.is-level-2 { border-color:rgba(248,113,113,0.2); background:rgba(248,113,113,0.04); }
.vmss-axis-response.is-level-3 { border-color:rgba(248,113,113,0.35); background:rgba(248,113,113,0.08); color:#f87171; }
.vmss-reversibility-row { font-size:.82rem; }
.vmss-toggle-label { display:flex; align-items:center; gap:.6rem; cursor:pointer; color:var(--text-secondary); }
.vmss-toggle-label input[type="checkbox"] { accent-color:var(--accent); width:1rem; height:1rem; }

/* 10:1 ratio badge (v17.6) */
.vmss-ratio-badge { text-align:center; margin-top:.75rem; font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--accent); padding:.4rem .8rem; border-radius:999px; border:1px solid var(--border-strong); background:var(--accent-glow); }

/* Article reference panel (v17.6) */
.vmss-article-ref { grid-column:1 / -1; margin-top:.5rem; border:1px solid var(--border); border-radius:1rem; background:rgba(255,255,255,0.02); }
.vmss-article-ref-toggle { padding:.85rem 1.1rem; cursor:pointer; font-size:.82rem; font-weight:600; color:var(--text-secondary); list-style:none; }
.vmss-article-ref-toggle::-webkit-details-marker { display:none; }
.vmss-article-ref-toggle::before { content:"\25B6"; display:inline-block; margin-right:.5rem; font-size:.65rem; transition:transform .2s ease; }
details[open].vmss-article-ref .vmss-article-ref-toggle::before { transform:rotate(90deg); }
.vmss-article-ref-body { padding:0 1.1rem 1rem; }
.vmss-article-ref-list { display:grid; gap:.5rem; }
.vmss-article-ref-list > div { display:grid; grid-template-columns:auto 1fr; gap:.5rem .75rem; align-items:baseline; padding:.4rem .6rem; border-radius:.5rem; background:rgba(255,255,255,0.02); border:1px solid var(--border); }
.vmss-article-ref-list dt { font-weight:700; font-size:.78rem; color:var(--accent); white-space:nowrap; }
.vmss-article-ref-list dd { font-size:.78rem; color:var(--text-secondary); margin:0; }
/* ===== COMPACT DASHBOARD LAYOUT (v17.6 redesign) ===== */
.vmss-dash { display:grid; gap:.75rem; margin-bottom:4rem; }

/* Header bar */
.vmss-dash-header { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; padding:.85rem 1.1rem; border-radius:1.2rem; background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent 50%),var(--bg-elevated); border:1px solid var(--border); }
.vmss-dash-header .vmss-kicker { margin-right:auto; }
.vmss-dash-controls { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.vmss-dash-select { appearance:none; padding:.45rem .85rem .45rem .6rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%238792a6'/%3E%3C/svg%3E") no-repeat right .6rem center/8px; color:var(--text-primary); font-size:.78rem; font-weight:600; cursor:pointer; min-width:7.5rem; }
.vmss-dash-select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.vmss-dash-select option,.vmss-dash-select optgroup { background:var(--bg-secondary); color:var(--text-primary); }
.vmss-dash-btn { padding:.45rem .9rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--text-primary); font-size:.78rem; font-weight:600; cursor:pointer; transition:border-color .2s,color .2s; }
.vmss-dash-btn:hover { border-color:var(--accent); color:var(--accent); }
.vmss-dash-btn--accent { background:linear-gradient(180deg,var(--accent-soft),var(--accent)); color:#1a1403; border-color:rgba(243,193,95,0.5); }
.vmss-dash-btn--accent:hover { border-color:var(--accent); color:#1a1403; filter:brightness(1.1); }
.vmss-dash-btn--lg { padding:.7rem 1.4rem; font-size:.9rem; }
.vmss-dash-disclaimer { font-size:.66rem; color:var(--text-muted); margin:0; padding:.15rem 0 0; opacity:.7; }

/* Main body — two-column dashboard */
.vmss-dash-body { display:grid; grid-template-columns:220px minmax(0,1fr); gap:1rem; padding:1rem 1.1rem; border-radius:1.2rem; background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent 42%),var(--bg-elevated); border:1px solid var(--border); }

/* Score column */
.vmss-dash-score { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.vmss-gauge--sm { width:160px; }
.vmss-gauge--sm .vmss-score-number { font-size:clamp(2rem,5vw,2.8rem); }
.vmss-gauge--sm .vmss-score-caption { font-size:.72rem; }
.vmss-dash-score .vmss-ratio-badge { font-size:.62rem; padding:.25rem .6rem; margin-top:0; }
.vmss-ladder--compact { margin-top:.4rem; gap:.3rem; width:100%; }
.vmss-ladder--compact .vmss-ladder-step { padding:.4rem .6rem; border-radius:.6rem; font-size:.78rem; gap:.4rem; }
.vmss-ladder--compact .vmss-ladder-step::before { width:2.5px; }
.vmss-ladder--compact .step-range { font-size:.68rem; }
.vmss-ladder-step.is-locked { border-color:#f87171; background:rgba(248,113,113,0.08); }
.vmss-ladder-step.is-locked::before { background:#f87171; }
.vmss-ladder-step.is-locked .step-range::after { content:" \1F512"; font-size:.6rem; }
.vmss-toggle-label--sm { font-size:.72rem; margin-top:.25rem; gap:.4rem; }
.vmss-toggle-label--sm input[type="checkbox"] { width:.85rem; height:.85rem; }
/* Day tally (10:1 ratio visualization) */
.vmss-day-tally { width:100%; margin-top:.4rem; display:grid; gap:.2rem; padding:.5rem .6rem; border-radius:.6rem; border:1px solid var(--border); background:rgba(255,255,255,0.02); }
.vmss-tally-row { display:flex; justify-content:space-between; align-items:center; }
.vmss-tally-label { font-size:.68rem; color:var(--text-muted); }
.vmss-tally-value { font-size:.72rem; font-weight:700; font-variant-numeric:tabular-nums; }
.vmss-tally-value.is-positive { color:#4ade80; }
.vmss-tally-value.is-negative { color:#f87171; }
.vmss-tally-net { border-top:1px solid var(--border); padding-top:.25rem; margin-top:.1rem; }
.vmss-tally-net .vmss-tally-label { font-weight:600; color:var(--text-secondary); }

.vmss-toggle-label--lg { font-size:.85rem; font-weight:700; margin-top:.5rem; gap:.5rem; color:var(--text-primary); }
.vmss-toggle-label--lg input[type="checkbox"] { width:1.15rem; height:1.15rem; }
.vmss-irrev-banner { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.7rem 1rem; border-radius:1rem; border:1px solid rgba(248,113,113,0.2); background:rgba(248,113,113,0.04); cursor:pointer; font-size:.92rem; font-weight:700; color:var(--text-primary); transition:border-color .2s,background .2s; }
.vmss-irrev-banner:hover { border-color:rgba(248,113,113,0.4); background:rgba(248,113,113,0.07); }
.vmss-irrev-banner:has(input:checked) { border-color:#f87171; background:rgba(248,113,113,0.12); color:#f87171; }
.vmss-irrev-banner input[type="checkbox"] { width:1.3rem; height:1.3rem; accent-color:#f87171; }

/* Event pills */
.vmss-event-pills { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.5rem; align-items:center; }
.vmss-event-pills .vmss-pill-sep { width:1px; height:1rem; background:var(--border); margin:0 .15rem; flex-shrink:0; }
.vmss-pill { padding:.3rem .65rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text-secondary); font-size:.68rem; font-weight:600; cursor:pointer; transition:border-color .15s,color .15s,transform .15s,background .15s; white-space:nowrap; }
.vmss-pill:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.vmss-pill:active { transform:translateY(0); background:rgba(255,255,255,0.08); }
.vmss-pill--mild { border-color:rgba(251,191,36,0.25); color:#fbbf24; }
.vmss-pill--mild:hover { border-color:#fbbf24; color:#fbbf24; }
.vmss-pill--severe { border-color:rgba(248,113,113,0.25); color:#f87171; }
.vmss-pill--severe:hover { border-color:#f87171; color:#f87171; }

/* Factor grid (interactive bars) */
.vmss-factor-grid { display:grid; gap:.35rem; }
.vmss-factor-row { display:grid; grid-template-columns:85px minmax(0,1fr) 52px 26px 26px; gap:.4rem; align-items:center; padding:.3rem .5rem; border-radius:.5rem; border:1px solid var(--border); background:rgba(255,255,255,0.02); }
.vmss-factor-row.is-violation { border-color:rgba(248,113,113,0.15); }
.vmss-factor-label { font-size:.74rem; font-weight:600; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vmss-factor-track { position:relative; height:.5rem; border-radius:999px; background:rgba(255,255,255,0.06); overflow:hidden; cursor:pointer; }
.vmss-factor-fill { position:absolute; inset:0 auto 0 0; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--accent-soft),var(--accent)); transition:width .35s ease; pointer-events:none; }
.vmss-factor-row.is-violation .vmss-factor-fill { background:linear-gradient(90deg,#fca5a5,#f87171); }
.vmss-factor-val { font-size:.72rem; font-weight:700; color:var(--text-primary); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.vmss-factor-row.is-violation .vmss-factor-val { color:#f87171; }
.vmss-step-btn { width:24px; height:24px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text-secondary); font-size:.82rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; transition:border-color .15s,color .15s; }
.vmss-step-btn:hover { border-color:var(--accent); color:var(--accent); }
.vmss-step-btn:active { background:rgba(255,255,255,0.1); transform:scale(0.9); }
.vmss-factor-row:hover { background:rgba(255,255,255,0.04); }

/* Readout tiles compact */
.vmss-readouts--compact { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; margin-top:.5rem; }
.vmss-readouts--compact .vmss-readout-tile { padding:.5rem .65rem; border-radius:.6rem; }
.vmss-readouts--compact .vmss-readout-label { font-size:.6rem; }
.vmss-readouts--compact .vmss-readout-value { font-size:.74rem; font-weight:700; margin-top:.2rem; }

/* Bottom panels side-by-side */
.vmss-dash-bottom { display:grid; grid-template-columns:auto 1fr; gap:.5rem; margin-top:.5rem; }
.vmss-dash-card { padding:.6rem .75rem; border-radius:.75rem; border:1px solid var(--border); background:rgba(255,255,255,0.02); }
.vmss-dash-card-label { font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; color:var(--text-muted); margin-bottom:.4rem; }
.vmss-dash-card .vmss-axis-panel { gap:.3rem; }
.vmss-dash-card .vmss-axis-row { padding:.3rem .5rem; }
.vmss-dash-card .vmss-axis-response { padding:.35rem .5rem; font-size:.74rem; }
.vmss-dash-card .vmss-insight-list { display:flex; flex-direction:column; gap:.4rem; margin-top:.4rem; height:320px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.vmss-dash-card .vmss-insight-item { padding:.5rem .65rem; border-radius:.6rem; font-size:.74rem; flex-shrink:0; }
.vmss-consequence.is-negative { border-color:rgba(248,113,113,0.3); background:rgba(248,113,113,0.06); }
.vmss-consequence.is-negative strong { color:#f87171; }
.vmss-consequence.is-positive { border-color:rgba(74,222,128,0.3); background:rgba(74,222,128,0.06); }
.vmss-consequence.is-positive strong { color:#4ade80; }
.vmss-terminal-tag { font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; opacity:.8; }

/* Terminal banner */
.vmss-terminal-banner { display:none; align-items:center; justify-content:center; gap:1rem; padding:.75rem 1.2rem; border-radius:.75rem; border:1px solid var(--accent); background:var(--accent-glow); margin-bottom:.5rem; }
.vmss-terminal-banner span { font-size:.85rem; font-weight:700; color:var(--text-primary); }
.vmss-dash.is-terminal .vmss-terminal-banner { display:flex; }

/* Terminal state — simulation ended */
.vmss-dash.is-terminal .vmss-event-pills,
.vmss-dash.is-terminal .vmss-factor-grid,
.vmss-dash.is-terminal .vmss-dash-controls,
.vmss-dash.is-terminal .vmss-irrev-banner { opacity:.3; pointer-events:none; }
.vmss-dash.is-terminal .vmss-dash-controls [data-reset-sim] { opacity:1; pointer-events:auto; }

/* Right column layout */
.vmss-dash-main { display:flex; flex-direction:column; }

/* Event history horizontal strip */
.vmss-dash-history { display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem; border-radius:1rem; border:1px solid var(--border); background:rgba(255,255,255,0.02); overflow:hidden; }
.vmss-dash-history .vmss-dash-card-label { margin-bottom:0; white-space:nowrap; flex-shrink:0; }
.vmss-event-strip { display:flex; gap:.4rem; overflow-x:auto; flex:1; scrollbar-width:thin; scrollbar-color:var(--border) transparent; padding:.15rem 0; }
.vmss-event-chip { display:flex; align-items:center; gap:.35rem; padding:.3rem .6rem; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.02); white-space:nowrap; flex-shrink:0; font-size:.68rem; font-weight:600; }
.vmss-event-chip::before { content:""; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.vmss-event-chip.is-clearable::before { background:#4ade80; }
.vmss-event-chip.is-permanent::before { background:#f87171; }
.vmss-event-chip .vmss-event-delta { font-size:.66rem; }

/* Dashboard responsive */
@media (max-width: 960px) {
  .vmss-dash-body { grid-template-columns:1fr; }
  .vmss-dash-score { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:.75rem; }
  .vmss-gauge--sm { width:120px; }
  .vmss-ladder--compact { width:auto; flex:1; min-width:200px; }
  .vmss-readouts--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vmss-dash-bottom { grid-template-columns:1fr; }
  .vmss-factor-row { grid-template-columns:70px minmax(0,1fr) 46px 24px 24px; }
}
@media (max-width: 600px) {
  .vmss-dash-header { flex-direction:column; align-items:stretch; }
  .vmss-dash-controls { justify-content:stretch; }
  .vmss-dash-select { flex:1; min-width:0; }
  .vmss-readouts--compact { grid-template-columns:1fr 1fr; }
}

@media (max-width: 768px) {
  .vmss-hud:not(.is-minimized) { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width:auto; }
  .vmss-hud.is-minimized { right: 0.75rem; bottom: 0.75rem; left: auto; width: auto; }
}

/* Body fade-in: starts at opacity:0, transitions in once script.js
   applies .vmss-ui-ready after navbar/footer inject. Prevents FOUC. */
body {
  opacity: 0;
  transition: opacity 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}
body.vmss-ui-ready {
  opacity: 1;
}
.vmss-main-section {
  padding-top: 8.75rem !important;
  padding-bottom: 6.5rem !important;
}
.vmss-main-section + .vmss-main-section {
  padding-top: 5.25rem !important;
}
.vmss-content-frame > * + * {
  margin-top: 1.15rem;
}
.vmss-page-intro + * {
  margin-top: 2rem !important;
}
.layer-card,
.sad-card,
.vmss-enhanced-card,
.vmss-panel,
.vmss-enhanced-panel,
.vmss-sim-panel,
.vmss-score-card,
.vmss-breakdown-card,
.vmss-profile-card,
.vmss-live-panel,
.vmss-hud,
.vmss-chip-button,
.vmss-hud-btn,
.vmss-ladder-step,
.vmss-range-row,
.vmss-readout-tile,
.vmss-insight-item,
.vmss-mini-flow .flow-step {
  transition: transform .28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .28s cubic-bezier(0.22, 1, 0.36, 1), border-color .22s ease, background-color .22s ease, opacity .22s ease;
}
.layer-card:active,
.vmss-chip-button:active,
.vmss-hud-btn:active,
.vmss-ring-node:active {
  transform: translateY(0) scale(.985);
}
.vmss-ring-node:focus {
  outline: none;
}
/* Keyboard focus outline — only shown for focus-visible (keyboard nav),
   not for mouse clicks. vmss-ring-node:focus { outline:none } suppresses
   the default rectangular browser outline that SVG <g> elements produce
   on click; blur() in diagrams.js ensures it's never visible after clicks. */
.vmss-chip-button:focus-visible,
.vmss-hud-btn:focus-visible,
.vmss-ring-node:focus-visible,
.layer-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 78%, white 12%);
  outline-offset: 3px;
}
.vmss-layer-card.is-linked-active,
.is-vmss-current {
  animation: vmssPulseLift .42s ease;
}
.vmss-ladder-step.is-current {
  box-shadow: 0 22px 40px -34px var(--shadow-accent);
}
.vmss-gauge-progress.is-strong {
  filter: drop-shadow(0 0 14px var(--shadow-accent));
}
.vmss-score-number,
[data-vmss-hud-score] {
  font-variant-numeric: tabular-nums;
}
.vmss-hud {
  transform-origin: bottom right;
  transition: transform .24s ease, opacity .24s ease, box-shadow .24s ease, border-color .24s ease, background-color .24s ease;
}
.vmss-hud.is-idle {
  opacity: .78;
}
.vmss-hud.is-minimized {
  width: auto;
  min-width: 14rem;
  padding-bottom: .9rem;
}
.vmss-hud.is-minimized .vmss-hud-body,
.vmss-hud.is-minimized .vmss-hud-actions {
  display: none;
}

/* On mobile, minimized HUD collapses to just the toggle button — no kicker text */
@media (max-width: 768px) {
  .vmss-hud.is-minimized {
    min-width: 0;
    width: auto;
    padding: 0.45rem;
    border-radius: 999px;
  }
  .vmss-hud.is-minimized .vmss-hud-kicker {
    display: none;
  }
  .vmss-hud.is-minimized .vmss-hud-top {
    margin-bottom: 0;
    gap: 0;
  }
  .vmss-hud.is-minimized .vmss-hud-toggle {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
  }
}
.vmss-hud-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.4rem;
}
.vmss-hud-toggle {
  width:1.8rem;
  height:1.8rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.04);
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  cursor:pointer;
  transition:border-color .15s,color .15s;
  flex-shrink:0;
}
.vmss-hud-toggle:hover { border-color:var(--accent); color:var(--accent); }
/* .is-updating: brief accent border flash on each state change (triggered in script.js) */
.vmss-hud.is-updating {
  border-color: rgba(243,193,95,0.5);
  box-shadow: 0 24px 60px -34px rgba(243,193,95,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.vmss-hud-event {
  max-width: 11rem;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vmss-event-buttons .vmss-chip-button,
.vmss-profile-buttons .vmss-chip-button {
  min-height: 2.9rem;
}
.vmss-range-row {
  background: linear-gradient(180deg, rgba(255,255,255,0.035), transparent 58%), rgba(255,255,255,0.02);
}
.vmss-range-row:hover,
.vmss-readout-tile:hover,
.vmss-insight-item:hover,
.vmss-mini-flow .flow-step:hover {
  border-color: var(--border-strong);
}
.vmss-insight-item {
  position: relative;
  overflow: hidden;
}
.vmss-insight-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .28rem;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  opacity: .55;
}
.vmss-motion-soft {
  transition: opacity .28s ease, transform .28s ease;
}
.vmss-flash {
  animation: vmssFlash .52s ease;
}
@keyframes vmssPulseLift {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(-3px); }
}
/* vmssFlash — ripple-style box-shadow pulse used on layer transitions
   and state updates. Applied/removed programmatically via pulseElement(). */
@keyframes vmssFlash {
  0% { box-shadow: 0 0 0 0 rgba(243,193,95,0); }
  35% { box-shadow: 0 0 0 8px rgba(243,193,95,0.12); }
  100% { box-shadow: 0 0 0 0 rgba(243,193,95,0); }
}
/* Mobile HUD — stretches edge-to-edge at the bottom on small screens.
   min-width:0 override allows the minimized HUD to shrink fully rather
   than being constrained by the desktop min-width rule. */
@media (max-width: 768px) {
  body {
    transform: none;
  }
  .vmss-main-section {
    padding-top: 7.5rem !important;
    padding-bottom: 5.25rem !important;
  }
  .vmss-main-section + .vmss-main-section {
    padding-top: 4rem !important;
  }
  .vmss-hud {
    max-width: none;
    transform-origin: bottom center;
  }
  .vmss-hud.is-minimized {
    min-width: 0;
    transform-origin: bottom right;
  }
  .vmss-hud-event {
    max-width: 7rem;
  }
}

/* ----- 18. ACCESSIBILITY ----- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- ENTRY MODAL (responsive) ----- */
.entry-modal-box {
  height: min(92dvh, 920px);
}
.entry-modal-scroll {
  height: 100%;
  padding-bottom: max(8rem, calc(env(safe-area-inset-bottom) + 6rem));
}

/* Desktop: auto-height, no forced scroll, compact padding */
@media (min-width: 1024px) {
  .entry-modal-box {
    height: auto;
    max-height: 90dvh;
  }
  .entry-modal-scroll {
    height: auto;
    max-height: 90dvh;
    padding-bottom: 2.5rem;
  }
  .entry-modal-textarea {
    height: 5rem;
    min-height: 5rem;
  }
}

/* ----- 19. DENSITY OVERRIDES -----
   Must be at end of file to override Tailwind CDN inline classes.
   Proportional tightening: smaller text, tighter gaps, same containers. */

/* Prose content headings */
.prose h2.text-4xl {
  font-size: 1.875rem !important; /* 30px, down from 36px */
}
.prose h3.text-3xl {
  font-size: 1.25rem !important;  /* 20px, down from 30px */
}

/* Body text */
.prose p, .prose li {
  font-size: 1rem !important;     /* 16px, down from 18px */
  line-height: 1.7 !important;
}

/* Card and component headings (outside prose) */
.vmss-card h2, .not-prose h3, .not-prose h2 {
  font-size: 1.25rem !important;  /* 20px — tighter card headers */
  margin-top: 0 !important;
}

/* Section gaps — tighter vertical rhythm between major blocks */
.vmss-card.reveal-item {
  margin-bottom: 1.5rem !important;
}

/* Flow chart and grid gaps */
.not-prose .gap-8 {
  gap: 1.25rem !important;
}
.not-prose .gap-6 {
  gap: 1rem !important;
}
.not-prose .gap-4 {
  gap: 0.75rem !important;
}

/* Flow chart node text */
.not-prose .rounded-2xl p,
.not-prose .rounded-2xl div {
  font-size: 0.875rem !important;
}

/* Tighter spacing between prose sections */
.prose .mt-12 {
  margin-top: 1.5rem !important;
}
.prose .mt-8 {
  margin-top: 1rem !important;
}
.prose .mb-8 {
  margin-bottom: 1rem !important;
}
.prose .mb-6 {
  margin-bottom: 0.75rem !important;
}

/* Tighter bullet point spacing */
.prose .space-y-4 > * + * {
  margin-top: 0.5rem !important;
}
.prose .space-y-6 > * + * {
  margin-top: 0.75rem !important;
}

/* Tighter gaps between not-prose diagram/card blocks */
.not-prose.my-10 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}