/* Generated by scripts/build-css-bundle.js. Do not edit by hand. */
/* Source order: static/css/styles.css */

/* static/css/base.css */
/* miniBIOTA Modern Design System - legacy aliases */
:root {
  /* Primary ecosystem accents */
  --deep-ocean: var(--color-deep-glass);
  --current-primary: var(--theme-eel-biological-accent);
  --bright-water: var(--color-rain-blue-bright);
  --light-aqua: var(--color-mist-muted);
  --pale-sky: var(--theme-eel-mist-card);
  /* Added for phase-image-frame background */

  /* Legacy aliases now resolve to lab-neutral surfaces by default. */
  --forest-green: var(--color-raised-charcoal);
  --coral: #ff6b6b;
  --sandy-brown: var(--color-warm-soil-readable);
  --deep-kelp: var(--color-deep-glass);

  /* Neutral Grays with Warmth */
  --charcoal: var(--color-deep-glass);
  --storm-gray: var(--color-soft-slate);
  --mist: var(--color-mist-white);
  --pure-white: var(--color-mist-white);

  /* Textured Design Elements */
  --organic-radius: var(--radius-md);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --soft-shadow: var(--shadow-sm);
  --inner-shadow: var(--shadow-inner);
  --glow-effect: var(--shadow-inner);

  /* Editorial lab gradients */
  --surface-gradient: linear-gradient(135deg, var(--color-mist-white) 0%, var(--color-mist-muted) 100%);
  --depth-gradient: var(--gradient-primary);
  --subtle-gradient: linear-gradient(135deg, var(--light-aqua) 0%, var(--mist) 100%);
  --nature-gradient: linear-gradient(135deg, var(--forest-green) 0%, var(--deep-kelp) 100%);

  /* Typography with Organic Feel */
  --heading-font: var(--font-display);
  --body-font: var(--font-body);
  --code-font: var(--font-mono);
}

html {
  scroll-behavior: smooth;
}

/* Critical CSS optimizations */
* {
  box-sizing: border-box;
}

/* Reduce layout shifts */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Optimize font loading */
body {
  font-display: swap;
}

/* Reduce paint complexity */
.site-header {
  contain: layout style paint;
}

.site-footer {
  contain: layout style paint;
}

/* Optimize animations */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: var(--motion-duration-instant) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--motion-duration-instant) !important;
  }
}

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="switch"], [role="checkbox"]):focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="switch"], [role="checkbox"]):focus-visible {
  box-shadow: var(--focus-ring-shadow);
  transition: none;
}

:where(button, [role="button"], [role="tab"], input, select, textarea):active:focus-visible {
  box-shadow: var(--focus-active-shadow);
}

:where(.nav-link, .mobile-nav-item, .footer-social-link, .social-link):focus-visible {
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--theme-focus-outline);
  text-decoration-thickness: var(--border-width-accent);
  text-underline-offset: var(--mb-space-2xs);
}

/* static/css/components/buttons.css */
/* Shared public button variants. Legacy .btn-primary/.btn-secondary aliases stay supported. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-xs);
  padding: var(--mb-space-3-5) var(--mb-space-xl);
  min-height: var(--size-control-min);
  border: var(--border-control-transparent);
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  text-transform: var(--text-case-uppercase);
  touch-action: manipulation;
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard), box-shadow var(--motion-duration-fast) var(--motion-ease-standard), background var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  text-decoration: none;
}

.btn--primary,
.btn-primary {
  background: var(--gradient-primary);
  border-color: var(--current-primary);
  color: var(--theme-on-accent);
}

.btn--primary:hover,
.btn-primary:hover {
  background: var(--theme-accent);
  border-color: var(--current-primary);
  box-shadow: var(--shadow-md);
  color: var(--theme-on-accent);
  transform: translateY(var(--motion-lift-sm));
}

.btn--secondary,
.btn-secondary {
  background: var(--glass-fill);
  border: var(--border-glass-toplight);
  color: var(--theme-text);
}

.btn--secondary:hover,
.btn-secondary:hover {
  background: var(--theme-card-hover-bg);
  border-color: var(--theme-border);
  color: var(--theme-text);
  transform: translateY(var(--motion-lift-sm));
}

.btn--quiet {
  background: transparent;
  border-color: var(--theme-border);
  color: var(--theme-text-muted);
}

.btn--quiet:hover {
  background: var(--glass-fill-soft);
  color: var(--theme-text);
}

.btn--danger {
  background: var(--color-state-critical);
  border-color: var(--color-state-critical);
  color: var(--color-on-accent);
}

.btn--danger:hover {
  background: var(--color-state-warning);
  border-color: var(--color-state-warning);
  color: var(--color-on-accent);
}

.btn--on-dark {
  color: var(--color-on-surface);
}

.btn--on-light {
  color: var(--color-mist-ink);
}

.btn--on-light.btn--secondary,
.btn--on-light.btn-secondary {
  background: var(--color-mist-card);
  border-color: var(--color-border-mist);
  color: var(--color-mist-ink);
}

.btn--on-light.btn--secondary:hover,
.btn--on-light.btn-secondary:hover {
  background: var(--color-mist-white);
  color: var(--color-mist-ink);
}

/* static/css/components/sections.css */
/* Shared section variants expose local role variables for page composition. */
.mb-section {
  --section-bg: var(--theme-section-bg);
  --section-text: var(--theme-text);
  --section-muted: var(--theme-text-muted);
  --section-card-muted: var(--section-muted);
  --section-card-bg: var(--theme-card-bg);
  --section-card-text: var(--theme-text);
  --section-border: var(--theme-border);
  --section-accent: var(--theme-accent);
  background: var(--section-bg);
  color: var(--section-text);
}

.mb-section.mb-section--dark {
  --section-bg: var(--theme-bg);
  --section-text: var(--color-on-surface);
  --section-muted: var(--color-on-surface-variant);
  --section-card-bg: var(--glass-fill-card);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--color-border-default);
}

.mb-section.mb-section--mist {
  --section-bg: var(--theme-section-bg-alt);
  --section-text: var(--color-mist-ink);
  --section-muted: var(--color-mist-ink-muted);
  --section-card-bg: var(--color-mist-card);
  --section-card-text: var(--color-mist-ink);
  --section-border: var(--color-border-mist);
}

.mb-section.mb-section--cinematic {
  --section-bg: var(--color-graphite-glass);
  --section-text: var(--color-on-surface);
  --section-muted: var(--color-on-surface-variant);
  --section-card-bg: var(--glass-fill-card);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--color-border-default);
  background:
    radial-gradient(circle at 82% 18%, var(--atmosphere-rain) 0%, transparent 40%),
    var(--section-bg);
}

.mb-section.mb-section--workspace {
  --section-bg: var(--theme-eel-instrument-bg);
  --section-text: var(--color-on-surface);
  --section-muted: var(--theme-eel-text-muted-dark);
  --section-card-bg: var(--theme-eel-archive-card-bg);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--theme-eel-border-dark);
  background: var(--section-bg);
}

.eel-hero-zone {
  --section-bg: var(--theme-eel-ink);
  --section-text: var(--color-on-surface);
  --section-muted: var(--theme-eel-text-muted-dark);
  --section-card-bg: var(--theme-eel-archive-card-bg);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--theme-eel-border-dark);
  background: var(--section-bg);
  color: var(--section-text);
}

.eel-detail-shell,
.species-detail-workspace,
.biome-detail-workspace,
.engineering-detail-workspace,
.biosphere-workspace {
  --section-bg: var(--theme-eel-ink);
  --section-text: var(--color-on-surface);
  --section-muted: var(--theme-eel-text-muted-dark);
  --section-card-bg: var(--theme-eel-archive-card-bg);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--theme-eel-border-dark);
}

.mb-section.eel-detail-shell,
.mb-section.species-detail-workspace,
.mb-section.biome-detail-workspace,
.mb-section.engineering-detail-workspace,
.mb-section.biosphere-workspace {
  background: var(--section-bg);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  color: var(--section-text);
  padding: 0 0 var(--mb-space-16);
}

.eel-content-section {
  background: var(--section-bg);
  color: var(--section-text);
}

.eel-detail-shell .mb-section--workspace,
.species-detail-workspace .mb-section--workspace,
.biome-detail-workspace .mb-section--workspace,
.engineering-detail-workspace .mb-section--workspace,
.biosphere-workspace .mb-section--workspace {
  background: transparent;
}

.mb-section.mb-section--editorial {
  --section-bg: var(--theme-eel-mist);
  --section-text: var(--color-mist-ink);
  --section-muted: var(--theme-eel-text-muted-mist);
  --section-card-bg: var(--theme-eel-mist-card);
  --section-card-text: var(--color-mist-ink);
  --section-border: var(--theme-eel-border-mist);
}

.mb-section.mb-section--contrast-cards {
  --section-bg: var(--theme-bg);
  --section-text: var(--color-on-surface);
  --section-muted: var(--color-on-surface-variant);
  --section-card-muted: var(--color-mist-ink-muted);
  --section-card-bg: var(--color-mist-section);
  --section-card-text: var(--color-mist-ink);
  --section-border: var(--color-border-mist);
  background:
    radial-gradient(circle at 84% 72%, var(--atmosphere-soil) 0%, transparent 42%),
    var(--section-bg);
}

/* Ecological Editorial Lab section system. Opt-in bands for scoped rollout. */
.mb-section.mb-section--eel-dark,
.mb-section.mb-section--eel-mist,
.mb-section.mb-section--eel-archive,
.mb-section.mb-section--eel-evidence {
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  background: var(--section-bg);
}

.mb-section.mb-section--eel-dark {
  --section-bg: var(--theme-eel-ink);
  --section-text: var(--color-on-surface);
  --section-muted: var(--theme-eel-text-muted-dark);
  --section-card-bg: var(--theme-eel-archive-card-bg);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--theme-eel-border-dark);
  --section-accent: var(--theme-eel-biological-accent);
}

.mb-section.mb-section--eel-mist {
  --section-bg: var(--theme-eel-mist);
  --section-text: var(--color-mist-ink);
  --section-muted: var(--theme-eel-text-muted-mist);
  --section-card-bg: var(--theme-eel-mist-card);
  --section-card-text: var(--color-mist-ink);
  --section-border: var(--theme-eel-border-mist);
  --section-accent: var(--theme-eel-earth-accent);
}

.mb-section.mb-section--eel-archive {
  --section-bg: var(--theme-eel-ink);
  --section-text: var(--color-on-surface);
  --section-muted: var(--theme-eel-text-muted-dark);
  --section-card-bg: var(--theme-eel-archive-card-bg);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--theme-eel-border-dark);
  --section-accent: var(--theme-eel-earth-accent);
}

.mb-section.mb-section--eel-evidence {
  --section-bg: var(--theme-eel-instrument-bg);
  --section-text: var(--color-on-surface);
  --section-muted: var(--theme-eel-text-muted-dark);
  --section-card-bg: var(--theme-eel-archive-card-bg);
  --section-card-text: var(--color-on-surface);
  --section-border: var(--theme-eel-border-dark);
  --section-accent: var(--theme-eel-biological-accent);
}

.mb-section.mb-section--eel-compact {
  padding-block: var(--mb-space-12);
}

.mb-section__header {
  display: grid;
  gap: var(--mb-space-sm);
  max-width: var(--container-readable);
  margin-bottom: var(--mb-space-xl);
  padding-bottom: var(--mb-space-lg);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
}

.mb-section__kicker {
  margin: 0;
  color: var(--section-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.mb-section__title {
  margin: 0;
  color: var(--section-text);
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.mb-section__lede {
  max-width: var(--container-prose);
  margin: 0;
  color: var(--section-muted);
  font-family: var(--font-eel-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.mb-section__body {
  color: var(--section-text);
}

/* static/css/components/detail-disclosure.css */
/* Shared EEL detail tabs and accordions. Page-specific classes remain aliases. */
.eel-detail-tabs,
.species-tabs {
  display: flex;
  gap: var(--mb-space-sm);
  margin-bottom: var(--mb-space-lg);
  padding-top: var(--mb-space-sm);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.eel-detail-tab,
.species-tab {
  background: transparent;
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-bottom: var(--border-control-transparent);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--theme-eel-text-muted-dark);
  cursor: pointer;
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-tight);
  padding: var(--mb-space-3-5) var(--mb-space-5-5);
  text-transform: var(--text-case-uppercase);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
}

.eel-detail-tab:hover,
.species-tab:hover {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.eel-detail-tab:focus-visible,
.species-tab:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.eel-detail-tab.active,
.species-tab.active {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  box-shadow: none;
  color: var(--theme-eel-biological-accent);
}

.eel-detail-tab-panel,
.species-tab-panel {
  display: none;
}

.eel-detail-tab-panel.active,
.species-tab-panel.active {
  display: block;
}

.eel-detail-accordion-list,
.species-accordion-list {
  display: grid;
  gap: var(--mb-space-md);
}

.eel-detail-accordion,
.species-accordion {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  box-shadow: none;
  overflow: hidden;
}

.eel-detail-accordion__toggle,
.species-accordion__toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-on-surface);
  cursor: pointer;
  display: flex;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  justify-content: space-between;
  padding: var(--mb-space-5) var(--mb-space-5-5);
  text-align: left;
  width: 100%;
}

.eel-detail-accordion__toggle:hover,
.species-accordion__toggle:hover {
  background: var(--theme-eel-instrument-bg);
}

.eel-detail-accordion__toggle:focus-visible,
.species-accordion__toggle:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.eel-detail-accordion__icon,
.species-accordion__icon {
  color: var(--theme-eel-earth-accent);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.eel-detail-accordion.is-open .eel-detail-accordion__icon,
.eel-detail-accordion.is-open .species-accordion__icon,
.species-accordion.is-open .eel-detail-accordion__icon,
.species-accordion.is-open .species-accordion__icon {
  transform: rotate(45deg);
}

.eel-detail-accordion__content,
.species-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--motion-duration-disclosure) var(--motion-ease-standard);
}

.eel-detail-accordion__inner,
.species-accordion__inner {
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  padding: 0 var(--mb-space-5-5) var(--mb-space-5-5);
}

.eel-detail-data-grid,
.species-data-grid {
  display: grid;
  gap: var(--mb-space-sm);
  margin: var(--mb-space-5) 0 0;
}

.eel-detail-data-row,
.species-data-row {
  display: grid;
  gap: var(--mb-space-xs);
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  padding-bottom: var(--mb-space-sm);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.eel-detail-data-row:last-child,
.species-data-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.eel-detail-data-row dt,
.species-data-row dt {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.eel-detail-data-row dd,
.species-data-row dd {
  color: var(--color-on-surface);
  margin: 0;
}

@media (max-width: 900px) {
  .eel-detail-data-row,
  .species-data-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .eel-detail-tabs,
  .species-tabs {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .eel-detail-tabs,
  .species-tabs {
    flex-direction: column;
  }

  .eel-detail-accordion__toggle,
  .eel-detail-accordion__inner,
  .species-accordion__toggle,
  .species-accordion__inner {
    padding-left: var(--mb-space-md);
    padding-right: var(--mb-space-md);
  }
}

/* static/css/layout/shell.css */
/* Flash messages */
.flash-messages {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: var(--layer-overlay);
}

.flash-message {
  padding: var(--mb-space-md) var(--mb-space-lg);
  margin-bottom: var(--mb-space-xs);
  border-radius: var(--organic-radius);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--card-shadow);
  animation: slideIn var(--motion-duration-standard) var(--motion-ease-out);
  will-change: transform, opacity;
  border: var(--border-transparent);
  position: relative;
  overflow: hidden;
}

.flash-message::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: currentColor;
  opacity: var(--opacity-muted);
}

.flash-success {
  background: var(--color-mist-card);
  color: var(--forest-green);
  border-color: var(--color-state-nominal);
}

.flash-error {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 107, 107, 0.05) 100%);
  color: var(--coral);
  border-color: var(--color-state-critical);
}

.flash-info {
  background: var(--color-mist-card);
  color: var(--color-mist-ink);
  border-color: var(--color-border-mist);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* —— layout helpers —— */
.container {
  max-width: var(--container-page);
  margin: 0 auto;
  padding: 0 var(--mb-space-lg);
  width: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  background: var(--theme-eel-ink);
  color: var(--color-on-surface);
  line-height: var(--leading-normal);
  position: relative;
}

/* Subtle depth vignette — bioluminescent pressure */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 18% 18%, var(--theme-eel-border-dark) 0%, transparent 46%),
    radial-gradient(circle at 82% 82%, var(--theme-eel-border-dark) 0%, transparent 50%);
  pointer-events: none;
  z-index: var(--layer-behind);
}

.site-main {
  flex: 1;
}

/* Header — glass panel docked to top */
.site-header {
  background: var(--theme-eel-ink);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-top: 0;
  padding: var(--mb-space-md) 0;
  position: sticky;
  top: 0;
  z-index: var(--layer-sticky);
  transition:
    background var(--motion-duration-standard) var(--motion-ease-standard),
    border-color var(--motion-duration-standard) var(--motion-ease-standard);
  box-shadow: none;
}

/* Biome-spectrum accent line at bottom of header */
.site-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--border-width-subtle);
  background: var(--theme-eel-earth-accent);
  opacity: var(--opacity-depth);
}

.site-header.scrolled {
  padding: var(--mb-space-xs) 0;
  box-shadow: none;
  background: var(--theme-eel-instrument-bg);
  border-bottom-color: var(--theme-eel-border-dark);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mb-space-md);
  padding: var(--mb-space-xs) var(--mb-space-md);
  transition: padding var(--motion-duration-standard) var(--motion-ease-standard);
}

.site-header.scrolled .container {
  padding: var(--mb-space-2xs) var(--mb-space-md);
}

/* Main navigation */
.main-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(var(--mb-space-xs), 1.5vw, var(--mb-space-lg));
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.nav-link {
  color: var(--theme-eel-text-muted-dark) !important;
  text-decoration: none;
  font-family: var(--font-metadata);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
  padding: var(--mb-space-xs) var(--mb-space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard), background var(--motion-duration-fast) var(--motion-ease-standard);
  position: relative;
  white-space: nowrap;
  background: transparent;
}

/* Responsive navigation spacing */
@media (max-width: 1200px) {
  .main-nav {
    gap: var(--mb-space-lg);
  }
}

@media (max-width: 1024px) {
  .main-nav {
    gap: var(--mb-space-md);
  }

  .nav-link {
    padding: var(--mb-space-xs) var(--mb-space-sm);
    font-size: var(--text-sm);
  }
}

@media (max-width: 900px) {
  .main-nav {
    gap: var(--mb-space-sm);
  }

  .nav-link {
    padding: var(--mb-space-xs) var(--mb-space-xs);
    font-size: var(--text-sm);
  }
}

.nav-link:hover {
  color: var(--color-on-surface) !important;
  background: var(--theme-eel-archive-card-bg);
}

.nav-link:active,
.nav-link.active {
  color: var(--theme-eel-biological-accent) !important;
  background: transparent;
}

.logo {
  height: var(--size-logo-header);
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  min-width: var(--size-logo-header);
}

.logo-link {
  display: inline-block;
  flex-shrink: 0;
}

.nav-link:focus-visible,
.logo-link:focus-visible,
.social-link:focus-visible,
.footer-social-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: none;
}

/* —— social media icons —— */
.social-links {
  display: flex;
  gap: var(--mb-space-sm);
  align-items: center;
  flex-shrink: 0;
}

.social-link {
  color: var(--theme-eel-text-muted-dark);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
  text-decoration: none;
}

.social-link:hover {
  color: var(--theme-eel-biological-accent);
}

.social-link svg {
  display: block;
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
}

/* —— footer —— */
.site-footer {
  background: var(--theme-eel-ink);
  color: var(--theme-eel-text-muted-dark);
  padding: var(--mb-space-lg) 0;
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mb-space-md);
  font-size: var(--text-md);
}

.footer-left {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-xs);
  align-items: center;
}

.footer-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.footer-social-links {
  display: flex;
  gap: var(--mb-space-sm);
  align-items: center;
}

.footer-social-link {
  color: var(--theme-eel-text-muted-dark);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
  text-decoration: none;
}

.footer-social-link:hover {
  color: var(--theme-eel-biological-accent);
}

.footer-social-link svg {
  display: block;
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
}

.footer-text {
  font-family: var(--font-metadata);
  font-size: var(--text-md);
  text-align: center;
}

/* static/css/pages/feature-pages.css */
/* ---------- feature pages ---------- */
.feature-hero {
  background: var(--theme-eel-ink);
  color: var(--color-on-surface);
  padding: var(--mb-space-20) 0 var(--mb-space-24) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .feature-hero {
    padding: var(--mb-space-12) 0 var(--mb-space-16) 0;
  }
}

@media (max-width: 480px) {
  .feature-hero {
    padding: var(--mb-space-xl) 0 var(--mb-space-12) 0;
  }
}

.feature-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--theme-eel-ink) 0%, var(--theme-eel-instrument-bg) 100%),
    radial-gradient(circle at 50% 0%, var(--theme-eel-border-dark) 0%, transparent 54%);
  opacity: var(--opacity-subtle);
  pointer-events: none;
}

.feature-hero.eel-hero-zone::before {
  background: var(--theme-eel-ink);
  opacity: 1;
}

.feature-hero > .container {
  position: relative;
  z-index: var(--layer-content);
}

.feature-header {
  max-width: var(--container-prose);
  margin: 0 auto;
  position: relative;
  z-index: var(--layer-content);
}

.feature-header-with-image {
  max-width: var(--container-page);
  margin: 0 auto;
  position: relative;
  z-index: var(--layer-content);
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--mb-space-16);
  align-items: center;
}

.feature-text-content {
  text-align: left;
}

.feature-image-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inhabitants-hero-image {
  width: 100%;
  max-width: var(--size-panel-sm);
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard), box-shadow var(--motion-duration-standard) var(--motion-ease-standard);
  display: block;
  background-color: var(--color-surface-container-lowest);
  min-height: var(--size-media-object-min);
  object-fit: cover;
}

.inhabitants-hero-image:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  margin-bottom: var(--mb-space-xl);
  color: var(--color-state-info);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
}

.feature-icon:hover {
  transform: scale(1.05);
}

.feature-icon svg {
  width: var(--size-icon-3xl);
  height: var(--size-icon-3xl);
}

.feature-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-heavy);
  margin-bottom: var(--mb-space-lg);
  line-height: var(--leading-tight);
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

.feature-title--plain {
  background: transparent;
  -webkit-text-fill-color: inherit;
  color: var(--color-on-surface);
}

.feature-description {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  opacity: var(--opacity-prominent);
  margin-bottom: var(--mb-space-12);
  color: var(--color-on-surface);
  max-width: var(--container-copy);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .feature-title {
    margin-bottom: var(--mb-space-md);
  }

  .feature-description {
    margin-bottom: var(--mb-space-xl);
    line-height: var(--leading-normal);
  }
}

.feature-description br {
  display: block;
  margin-bottom: var(--mb-space-md);
}

@media (max-width: 768px) {
  .feature-hero {
    padding: var(--mb-space-12) 0 var(--mb-space-16) 0;
  }

  .feature-icon {
    margin-bottom: var(--mb-space-lg);
  }

  .feature-icon svg {
    width: var(--size-icon-2xl);
    height: var(--size-icon-2xl);
  }

  .feature-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--mb-space-md);
  }

  .feature-description {
    font-size: var(--text-lg);
    margin-bottom: var(--mb-space-xl);
  }

  .feature-header-with-image {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
    text-align: center;
  }

  .feature-text-content {
    text-align: center;
  }

  .inhabitants-hero-image {
    max-width: var(--size-panel-xs);
  }
}

/* static/css/pages/timeline.css */
/* Timeline styles */
.timeline-section {
  padding: var(--mb-space-16) 0;
}

.timeline-controls {
  display: flex;
  gap: var(--mb-space-md);
  justify-content: center;
  margin-bottom: var(--mb-space-12);
  flex-wrap: wrap;
}

.timeline-btn {
  padding: var(--mb-space-sm) var(--mb-space-lg);
  border: var(--border-thick-subtle);
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
}

.timeline-btn.active,
.timeline-btn:hover {
  background: var(--color-state-info);
  color: var(--color-on-surface-inverse);
  border-color: var(--color-state-info);
}

.timeline {
  position: relative;
  max-width: var(--container-xl);
  margin: 0 auto;
}

.timeline-item {
  display: flex;
  margin-bottom: var(--mb-space-xl);
  gap: var(--mb-space-xl);
  align-items: flex-start;
}

.timeline-timestamp {
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--mb-space-xs);
  margin-left: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  display: block;
  font-family: var(--font-body);
  border: none;
  box-shadow: none;
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
}

.timeline-content {
  color: var(--color-on-surface);
  line-height: var(--leading-loose);
  font-size: var(--text-md);
  background: transparent;
  margin: 0;
  padding: 0;
  white-space: normal;
}

.timeline-content.legacy-note {
  margin: 0;
  padding: 0;
}

.timeline-stats {
  display: flex;
  gap: var(--mb-space-md);
  margin-top: var(--mb-space-md);
  flex-wrap: wrap;
}

.stat {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  padding: var(--mb-space-2xs) var(--mb-space-sm);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

.timeline-media img {
  width: 100%;
  max-width: var(--size-panel-xs);
  height: auto;
  border-radius: var(--radius-md);
  margin-top: var(--mb-space-md);
}

/* Timeline entry cards */
.timeline-entry {
  padding: var(--mb-space-5);
  margin: 0 0 var(--mb-space-lg) 0;
  background: var(--color-surface-container);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: var(--border-subtle);
}

.timeline-entry.new-entry {
  animation: slideIn var(--motion-duration-reveal) var(--motion-ease-out);
}

.timeline-entry,
.timeline-entry::before,
.timeline-entry::after {
  border-left: none !important;
}

.timeline-entry:hover {
  transform: translateY(var(--motion-lift-sm));
  box-shadow: var(--shadow-lg);
}

.timeline-entry::before {
  display: none;
}

/* static/css/pages/inhabitants.css */
/* Inhabitants styles */
.inhabitants-section {
  padding: var(--mb-space-16) 0;
}

.species-filter-stack {
  display: grid;
  gap: var(--mb-space-4);
  min-width: 0;
}

.inhabitants-filters {
  margin-bottom: var(--mb-space-16);
  padding: var(--mb-space-xl);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.species-filter-search-row {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.species-filter-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--mb-space-3);
  column-gap: var(--mb-space-4);
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.filter-select {
  flex: 1 1 var(--size-control-inline-lg);
  min-height: var(--size-control-touch);
  max-width: var(--size-filter-inline);
  min-width: var(--size-control-inline-md);
  padding: var(--mb-space-md) var(--mb-space-5);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  background: var(--theme-eel-archive-card-bg);
  font-family: var(--font-metadata);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--theme-eel-text-muted-dark);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
  cursor: pointer;
}

.filter-select:hover {
  background: var(--theme-eel-instrument-bg);
  border-color: var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.filter-select:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-color: var(--theme-eel-border-dark);
  box-shadow: var(--focus-ring-shadow);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, var(--size-panel-sm));
  min-width: 0;
}

.search-box input {
  min-height: var(--size-control-touch);
  padding: var(--mb-space-md) var(--mb-space-5) var(--mb-space-md) var(--mb-space-12);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  width: 100%;
  background: var(--theme-eel-archive-card-bg);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-tight);
  color: var(--color-on-surface);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard);
}

.search-box input:hover {
  background: var(--theme-eel-instrument-bg);
  border-color: var(--theme-eel-border-dark);
}

.search-box input:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-color: var(--theme-eel-border-dark);
  box-shadow: var(--focus-ring-shadow);
}

.search-box input::placeholder {
  color: var(--theme-eel-text-muted-dark);
  font-weight: var(--font-weight-regular);
}

.search-box svg {
  position: absolute;
  left: var(--mb-space-4);
  color: var(--theme-eel-text-muted-dark);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.search-box:hover svg {
  color: var(--theme-eel-biological-accent);
}

.species-results-summary {
  margin: 0 0 var(--mb-space-6);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.species-results-state {
  display: grid;
  justify-items: start;
  gap: var(--mb-space-4);
  margin-top: var(--mb-space-8);
  padding: var(--mb-space-5);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.species-results-state[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .inhabitants-filters {
    padding: var(--mb-space-lg);
  }

  .species-filter-stack {
    gap: var(--mb-space-3);
  }

  .species-filter-row {
    row-gap: var(--mb-space-2);
    column-gap: var(--mb-space-3);
  }

  .filter-select {
    padding: var(--mb-space-sm) var(--mb-space-md);
    flex-basis: var(--size-filter-inline);
    max-width: none;
  }

  .search-box {
    width: 100%;
  }

  .search-box input {
    width: 100%;
    padding: var(--mb-space-sm) var(--mb-space-md) var(--mb-space-sm) var(--mb-space-2xl);
  }

  .search-box svg {
    left: var(--mb-space-3);
  }
}

/* Additional mobile optimizations for inhabitants page */
@media (max-width: 480px) {
  .inhabitants-filters {
    padding: var(--mb-space-md);
  }

  .species-filter-stack {
    gap: var(--mb-space-3);
  }

  .species-filter-row {
    display: grid;
    gap: var(--mb-space-2);
  }

  .filter-select {
    width: 100%;
    min-width: unset;
    max-width: none;
    padding: var(--mb-space-3-5) var(--mb-space-md);
  }

  .search-box input {
    padding: var(--mb-space-3-5) var(--mb-space-md) var(--mb-space-3-5) var(--mb-space-2xl);
  }

  /* Species card mobile optimization */
  .species-card {
    margin: var(--mb-space-xs) 0;
  }

  .species-image {
    margin: var(--mb-space-md) var(--mb-space-md) 0 var(--mb-space-md);
  }

  .species-photo {
    height: 160px;
  }

  .species-info {
    padding: var(--mb-space-md);
    gap: var(--mb-space-sm);
  }

  .species-name {
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
  }

  .species-scientific {
    font-size: var(--text-md);
  }

  .species-meta-grid {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xs);
  }

  .meta-item {
    padding: var(--mb-space-xs) 0;
    border-bottom: var(--divider-subtle);
  }

  .meta-item:last-child {
    border-bottom: none;
  }

  .meta-label {
    font-size: var(--text-sm);
  }

  .meta-value {
    font-size: var(--text-md);
  }
}

.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--mb-space-xl);
  padding: var(--mb-space-xl);
  background: transparent;
}

@media (max-width: 480px) {
  .species-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--mb-space-lg);
    padding: var(--mb-space-md);
  }
}

.species-card {
  background: var(--color-surface-container);
  border-radius: var(--organic-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  transition: all var(--motion-duration-slow) var(--motion-ease-standard);
  border: var(--border-subtle);
  position: relative;
  will-change: transform, box-shadow;
  backdrop-filter: var(--blur-md);
}


.species-card:hover {
  transform: translateY(var(--motion-lift-hero)) translateZ(0);
  box-shadow: var(--card-shadow-hover);
  cursor: pointer;
  border-color: var(--color-border-hover);
}


@media (hover: none) {
  .species-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
}

.species-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  touch-action: manipulation;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.species-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--organic-radius);
  margin: var(--mb-space-lg) var(--mb-space-lg) 0 var(--mb-space-lg);
  background: var(--color-surface-container-lowest);
  box-shadow: var(--inner-shadow);
  z-index: var(--layer-content);
}

.species-photo {
  width: 100%;
  height: var(--size-media-card);
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
  background: var(--color-surface-container-lowest);
}


.species-info {
  padding: var(--mb-space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-md);
}

.species-header {
  border-bottom: var(--divider-subtle);
  padding-bottom: var(--mb-space-md);
  margin-bottom: var(--mb-space-md);
}

.species-name {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-xs);
  line-height: var(--leading-tight);
  font-family: var(--heading-font);
}

.species-scientific {
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  margin-bottom: var(--mb-space-sm);
  font-family: var(--body-font);
}

.species-realm {
  display: inline-block;
  color: var(--color-on-surface-inverse);
  padding: var(--mb-space-xs) var(--mb-space-md);
  border-radius: var(--organic-radius);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  box-shadow: var(--soft-shadow);
  border: var(--border-glass-toplight);
}

/* Realm-specific colors */
.species-realm[data-realm="saltwater"] {
  background: var(--mb-realm-saltwater);
  box-shadow: 0 2px 8px rgba(91, 132, 243, 0.3);
}

.species-realm[data-realm="freshwater"] {
  background: var(--mb-realm-freshwater);
  box-shadow: 0 2px 8px rgba(78, 205, 196, 0.3);
}

.species-realm[data-realm="brackish"] {
  background: var(--mb-realm-brackish);
  box-shadow: 0 2px 8px rgba(184, 181, 106, 0.3);
}

.species-realm[data-realm="terrestrial"] {
  background: var(--mb-realm-terrestrial);
  box-shadow: 0 2px 8px rgba(184, 112, 79, 0.3);
}

/* Fallback for unknown realms or missing data-realm attribute */
.species-realm:not([data-realm]) {
  background: var(--mb-biome-default);
  box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

.species-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mb-space-md);
  margin-top: auto;
  padding-top: var(--mb-space-md);
  border-top: var(--divider-subtle);
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-compact);
}

.meta-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  font-size: var(--text-xs);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wider);
}

.meta-value {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
}

.meta-value.population-count {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-bold);
}

/* Enhanced population status styling */
.population-status-tag,
.status-thriving,
.status-established {
  background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
  color: var(--color-on-surface-inverse);
  padding: var(--mb-space-compact) var(--mb-space-3-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  box-shadow: 0 2px 6px rgba(34, 84, 61, 0.2);
}

.status-vulnerable {
  background: linear-gradient(135deg, #fef5e7 0%, #ffeaa7 100%);
  color: var(--color-on-surface-inverse);
  padding: var(--mb-space-compact) var(--mb-space-3-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  box-shadow: 0 2px 6px rgba(151, 90, 22, 0.2);
}


.status-extirpated {
  background: linear-gradient(135deg, #e2e3e5 0%, #cbd5e0 100%);
  color: var(--color-on-surface-inverse);
  padding: var(--mb-space-compact) var(--mb-space-3-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  box-shadow: 0 2px 6px rgba(56, 61, 65, 0.2);
}

.status-uncertain {
  background: linear-gradient(135deg, #d1ecf1 0%, #9decf9 100%);
  color: var(--color-on-surface-inverse);
  padding: var(--mb-space-compact) var(--mb-space-3-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  box-shadow: 0 2px 6px rgba(12, 84, 96, 0.2);
}

.status-removed {
  background: linear-gradient(135deg, #f8d7da 0%, #f1aeb5 100%);
  color: var(--color-on-surface-inverse);
  padding: var(--mb-space-compact) var(--mb-space-3-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  box-shadow: 0 2px 6px rgba(114, 28, 36, 0.2);
}

/* Species role/trophic styling */
.species-role {
  color: var(--color-on-surface-variant);
  margin-bottom: var(--mb-space-lg);
}

.species-stats {
  display: flex;
  gap: var(--mb-space-xs);
  margin-bottom: var(--mb-space-lg);
  align-items: center;
}

.population {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
}

.trend {
  font-size: var(--text-md);
  padding: var(--mb-space-2xs) var(--mb-space-xs);
  border-radius: var(--radius-md);
}

.trend.positive {
  background: #d4edda;
  color: #155724;
}

.trend.stable {
  background: #fff3cd;
  color: #856404;
}

.species-scientific-name {
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  margin-bottom: var(--mb-space-sm);
  font-weight: var(--font-weight-medium);
  font-style: italic;
}

.species-description {
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin-top: var(--mb-space-md);
}

.placeholder-image {
  font-size: var(--text-3xl);
  height: var(--size-media-card);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: var(--radius-md);
  color: var(--color-on-surface-subtle);
}

.image-upload {
  border: var(--border-dashed-subtle);
  padding: var(--mb-space-md);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
}

.image-upload:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-container-high);
}

.form-help {
  color: var(--color-on-surface-variant);
  font-size: var(--text-sm);
  margin-top: var(--mb-space-2xs);
  display: block;
}

.reproduction-successfully {
  color: #28a745;
}

.reproduction-unsuccessfully {
  color: #dc3545;
}

.reproduction-not-reproducing {
  color: #6c757d;
}

.reproduction-unknown {
  color: #ffc107;
}

.no-species-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--mb-space-12);
  background: var(--color-surface-container);
  border-radius: var(--radius-md);
  color: var(--color-on-surface-variant);
}

.no-species-message h3 {
  margin-bottom: var(--mb-space-md);
  color: var(--color-on-surface);
}

.no-species-message .btn {
  margin-top: var(--mb-space-md);
}

.removed-species-section--hidden {
  display: none;
}

.telemetry-loading-indicator {
  display: grid;
  place-items: center;
  min-height: var(--size-control-touch);
  margin-top: var(--mb-space-xl);
  text-align: center;
}

.telemetry-loading-indicator__text {
  color: var(--dimmed-cached-text-color);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.telemetry-loading-indicator[data-load-state="complete"] .telemetry-loading-indicator__text {
  color: var(--theme-eel-biological-accent);
}

.telemetry-loading-indicator[data-load-state="error"] .telemetry-loading-indicator__text {
  color: var(--color-state-critical);
}

/* static/css/pages/species-detail.css */
/* Breadcrumb styles */
.breadcrumb-section {
  background: var(--color-surface-container-low);
  padding: var(--mb-space-md) 0;
  border-bottom: var(--divider-subtle);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--mb-space-xs);
  font-size: var(--text-md);
}

.breadcrumb-link {
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}

.breadcrumb-link:hover {
  color: var(--color-on-surface);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-on-surface-subtle);
  font-weight: var(--font-weight-light);
}

.breadcrumb-current {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-medium);
}

/* Data Card Styling - Unified for Species and Biomes */
.data-card {
  background: var(--color-surface-container);
  border-radius: var(--organic-radius);
  box-shadow: var(--card-shadow);
  padding: var(--mb-space-lg);
  border: var(--border-subtle);
}

.data-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  margin: 0 0 var(--mb-space-lg) 0;
  padding-bottom: var(--mb-space-md);
  border-bottom: var(--divider-strong);
}

.data-items {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-md);
}

.data-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--mb-space-sm) 0;
  border-bottom: var(--divider-subtle);
}

.data-item:last-child {
  border-bottom: none;
}

.data-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  flex-shrink: 0;
  margin-right: var(--mb-space-md);
}

.data-value {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface);
  text-align: right;
}

/* Species detail page styles within gradient hero */
.feature-hero .species-detail-header {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: var(--mb-space-2xl);
  align-items: center;
  max-width: var(--container-page);
  margin: 0 auto;
}

/* Biome detail content grid - sidebar on left */
.species-content-grid {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: var(--mb-space-12);
  margin-bottom: var(--mb-space-12);
}

.feature-hero .species-detail-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-heavy);
  margin-bottom: var(--mb-space-md);
  line-height: var(--leading-tight);
  color: var(--color-on-surface);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.feature-hero .species-detail-scientific {
  font-size: var(--text-2xl);
  color: var(--color-on-surface-variant);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--mb-space-xl);
  font-style: italic;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Slideshow styling within gradient hero */
.feature-hero .species-hero-slideshow {
  position: relative;
  width: 100%;
  max-width: var(--size-media-feature);
  height: var(--size-media-feature);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-container-lowest);
}

.species-detail-image {
  text-align: center;
}

.species-detail-photo {
  width: 100%;
  max-width: var(--size-media-sm);
  height: var(--size-media-sm);
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.image-caption {
  text-align: center;
  margin-top: var(--mb-space-sm);
}

.image-caption-text {
  font-size: var(--text-md);
  color: var(--color-on-surface-variant);
  font-style: italic;
  background: var(--color-surface-container-high);
  padding: var(--mb-space-2xs) var(--mb-space-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.species-detail-placeholder {
  width: var(--size-media-sm);
  height: var(--size-media-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-md);
  font-size: var(--text-3xl);
  color: var(--color-on-surface-variant);
  border: var(--border-dashed-subtle);
}

.species-detail-info h1 {
  font-size: var(--text-2xl);
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-xs);
  line-height: var(--leading-tight);
  font-weight: var(--font-weight-bold);
}

.species-detail-info h2 {
  font-size: var(--text-2xl);
  color: var(--color-on-surface-variant);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--mb-space-lg);
  font-style: italic;
}

.species-common-name {
  font-style: normal !important;
}

.species-scientific-name {
  font-style: italic !important;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--mb-space-md);
  margin-top: var(--mb-space-xl);
  padding: var(--mb-space-lg);
  background: var(--glass-fill);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur-md);
}

.quick-stat {
  text-align: center;
  padding: var(--mb-space-sm);
  background: var(--color-surface-container-high);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.quick-stat-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--mb-space-2xs);
}

.quick-stat-value {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
}

.feature-hero .species-meta {
  display: flex;
  gap: var(--mb-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--mb-space-xl);
}

.feature-hero .species-meta .biome-tag,
.feature-hero .species-meta .type-tag,
.feature-hero .species-meta .conservation-tag {
  background: var(--glass-fill);
  color: var(--color-on-surface);
  padding: var(--mb-space-2-5) var(--mb-space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-md);
  backdrop-filter: var(--blur-md);
  border: var(--border-glass-toplight);
}

.feature-hero .species-quick-facts {
  background: rgba(255, 255, 255, 0.1);
  padding: var(--mb-space-lg);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur-md);
  border: var(--border-glass);
  box-shadow: var(--shadow-md);
}

.feature-hero .quick-fact {
  color: var(--color-on-surface-variant);
}

.feature-hero .quick-fact strong {
  color: var(--color-on-surface);
}

.species-meta .biome-tag,
.species-meta .type-tag,
.species-meta .conservation-tag {
  display: flex;
  align-items: center;
  gap: var(--mb-space-xs);
  padding: var(--mb-space-xs) var(--mb-space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-md);
}

.species-meta svg {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}

.type-tag {
  background: #fff3cd;
  color: #856404;
  padding: var(--mb-space-xs) var(--mb-space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
}

/* Override type-tag styling when it's also a species-realm */
.type-tag.species-realm {
  color: var(--color-on-surface-inverse);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
}

.species-detail-content {
  padding: var(--mb-space-16) 0;
}

/* Content tabs */
.content-tabs {
  display: flex;
  gap: var(--mb-space-xs);
  margin-bottom: var(--mb-space-12);
  border-bottom: var(--divider-strong);
  padding-bottom: 0;
}

.tab-button {
  padding: var(--mb-space-md) var(--mb-space-lg);
  border: none;
  background: transparent;
  border-bottom: var(--divider-tab-idle);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-variant);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.tab-button:hover {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

.tab-button.active {
  color: var(--color-on-surface);
  border-bottom-color: var(--color-state-info);
  background: var(--color-surface-container-high);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Content cards */
.content-card {
  background: var(--color-surface-container);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--mb-space-xl);
  overflow: hidden;
  transition: box-shadow var(--motion-duration-standard) var(--motion-ease-standard);
}

.content-card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  background: var(--color-surface-container-high);
  padding: var(--mb-space-lg);
  border-bottom: var(--divider-subtle);
}

.card-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--mb-space-sm);
  color: var(--color-on-surface);
  font-size: var(--text-lg);
}

.card-header svg {
  color: var(--color-state-info);
}

.card-content {
  padding: var(--mb-space-lg);
}

.card-content p {
  margin: 0;
  line-height: var(--leading-normal);
  color: var(--color-on-surface-variant);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--mb-space-16) var(--mb-space-xl);
  color: var(--color-on-surface-variant);
}

.empty-state svg {
  margin-bottom: var(--mb-space-md);
  color: var(--color-on-surface-subtle);
}

.empty-state h3 {
  margin-bottom: var(--mb-space-xs);
  color: var(--color-on-surface-variant);
}

/* Data grid and rows */
.data-grid {
  display: grid;
  gap: var(--mb-space-xl);
}

.data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--mb-space-sm) 0;
  border-bottom: var(--divider-subtle);
}

.data-row:last-child {
  border-bottom: none;
}

.data-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  flex: 1;
}

.data-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  flex: 1;
  text-align: right;
}

.species-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--mb-space-16);
  margin-bottom: var(--mb-space-12);
}

.species-main-content {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2xl);
}

.species-description-section,
.species-role-section {
  background: var(--color-surface-container);
  border: var(--border-subtle);
  padding: var(--mb-space-xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.species-description-section h3,
.species-role-section h3 {
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-md);
  font-size: var(--text-xl);
  border-bottom: var(--divider-strong);
  padding-bottom: var(--mb-space-xs);
}

.species-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-xl);
}

.sidebar-card {
  background: var(--color-surface-container);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow var(--motion-duration-standard) var(--motion-ease-standard);
}

.sidebar-card:hover {
  box-shadow: var(--shadow-md);
}

.sidebar-card .card-header {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}

.sidebar-card .card-header svg {
  color: var(--color-state-info);
}

/* Enhanced stat items */
.sidebar-card .stat-item {
  display: flex;
  align-items: center;
  gap: var(--mb-space-md);
  padding: var(--mb-space-md) 0;
  border-bottom: var(--divider-subtle);
}

.sidebar-card .stat-item:last-child {
  border-bottom: none;
}

.stat-icon {
  font-size: var(--text-xl);
  width: var(--size-control-compact);
  height: var(--size-control-compact);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-high);
  border-radius: 50%;
  flex-shrink: 0;
}

.stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.stat-content .stat-label {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--mb-space-2xs);
}

.stat-content .stat-value {
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
}

/* Action buttons */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-sm);
}

.action-btn {
  display: flex;
  align-items: center;
  gap: var(--mb-space-sm);
  padding: var(--mb-space-3-5) var(--mb-space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  border: var(--border-control-transparent);
}

.action-btn.primary {
  background: var(--gradient-primary);
  color: var(--color-on-accent);
}

.action-btn.primary:hover {
  background: var(--theme-eel-biological-accent);
  transform: translateY(var(--motion-lift-sm));
  box-shadow: var(--shadow-md);
}

.action-btn.secondary {
  background: transparent;
  color: var(--color-on-surface);
  border-color: var(--color-border-default);
}

.action-btn.secondary:hover {
  background: var(--color-surface-container-high);
  border-color: var(--color-border-hover);
  transform: translateY(var(--motion-lift-sm));
}

/* Share functionality */
.share-text {
  margin-bottom: var(--mb-space-md);
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
}

.share-buttons {
  display: flex;
  gap: var(--mb-space-xs);
}

.share-btn {
  display: flex;
  align-items: center;
  gap: var(--mb-space-xs);
  padding: var(--mb-space-sm) var(--mb-space-md);
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
}

.share-btn:hover {
  background: var(--theme-eel-biological-accent);
  transform: translateY(var(--motion-lift-sm));
}

.species-stats-card,
.species-classification-card {
  background: var(--color-surface-container);
  border: var(--border-subtle);
  padding: var(--mb-space-xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.species-stats-card h3,
.species-classification-card h3 {
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-lg);
  font-size: var(--text-lg);
  border-bottom: var(--divider-strong);
  padding-bottom: var(--mb-space-xs);
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--mb-space-md);
  padding: var(--mb-space-xs) 0;
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-variant);
}

.stat-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface);
}

.classification-item {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--mb-space-md);
  padding: var(--mb-space-sm) 0;
  border-bottom: var(--divider-subtle);
}

.classification-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.classification-label {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--mb-space-2xs);
}

.classification-value {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface);
}

/* Species navigation footer */
.species-navigation {
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  padding: var(--mb-space-12) 0;
  margin-top: var(--mb-space-xl);
}

.nav-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--mb-space-xl);
}

.nav-section h4 {
  margin-bottom: var(--mb-space-md);
  color: var(--color-on-surface);
  font-size: var(--text-lg);
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-sm);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--mb-space-sm);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  padding: var(--mb-space-sm) var(--mb-space-md);
  border-radius: var(--radius-md);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  border: var(--border-transparent);
}

.nav-link:hover {
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  border-color: var(--color-border-hover);
  transform: translateX(var(--motion-shift-inline-md));
}

.nav-link svg {
  color: var(--color-state-info);
}

/* Responsive adjustments for species detail hero */
@media (max-width: 768px) {
  .feature-hero .species-detail-header {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
    text-align: center;
  }

  .feature-hero .species-hero-slideshow {
    max-width: var(--size-media-sm);
    height: var(--size-media-sm);
    margin: 0 auto;
  }

  .feature-hero .species-detail-title {
    font-size: var(--text-2xl);
  }

  .feature-hero .species-detail-scientific {
    font-size: var(--text-xl);
  }

  .feature-hero .species-meta {
    justify-content: center;
  }

  /* Content grid - stack sidebar on top on mobile */
  .species-content-grid {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
  }

  /* Reorder for mobile - sidebar first */
  .species-sidebar {
    order: 1;
  }

  .species-main-content {
    order: 2;
  }

  /* Tab navigation - make responsive */
  .content-tabs {
    flex-wrap: wrap;
    gap: var(--mb-space-2xs);
    margin-bottom: var(--mb-space-xl);
  }

  .tab-button {
    padding: var(--mb-space-sm) var(--mb-space-md);
    font-size: var(--text-md);
    flex: 1;
    min-width: calc(50% - 0.125rem);
  }
}

/* Additional mobile optimizations for small screens */
@media (max-width: 480px) {
  .feature-hero .species-detail-header {
    gap: var(--mb-space-lg);
    padding: 0 var(--mb-space-md);
  }

  .feature-hero .species-hero-slideshow {
    max-width: var(--size-media-compact);
    height: var(--size-media-compact);
  }

  .feature-hero .species-detail-title {
    font-size: var(--text-2xl);
  }

  .feature-hero .species-detail-scientific {
    font-size: var(--text-lg);
  }

  /* Content tabs - stack vertically on very small screens */
  .content-tabs {
    flex-direction: column;
    gap: var(--mb-space-xs);
  }

  .tab-button {
    width: 100%;
    min-width: unset;
  }

  /* Adjust content spacing */
  .species-content-grid {
    gap: var(--mb-space-lg);
  }

  .species-detail-container {
    padding: 0 var(--mb-space-md);
  }
}

/* Shared species/detail overflow and quick-fact helpers */
.species-detail-title,
.species-detail-scientific,
.species-name,
.species-scientific,
.species-description,
.meta-value {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.species-quick-facts {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-sm);
  margin-top: var(--mb-space-lg);
  padding: var(--mb-space-lg) 0;
  border-top: var(--divider-subtle);
}

.quick-fact {
  display: flex;
  align-items: center;
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  padding: var(--mb-space-2xs) 0;
}

.quick-fact strong {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-semibold);
  min-width: var(--size-control-inline-sm);
  margin-right: var(--mb-space-md);
  font-size: var(--text-md);
}

.status-badge {
  padding: var(--mb-space-compact) var(--mb-space-3-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  display: inline-block;
}

.feature-hero .species-detail-header {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: var(--mb-space-16);
  align-items: start;
  max-width: var(--container-page);
  margin: 0 auto;
}

.feature-hero .species-hero-left {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-xl);
}

.feature-hero .species-page-hero-left {
  background: transparent;
}

.feature-hero .species-hero-slideshow {
  width: 100%;
}

.feature-hero .eel-page-hero__media .species-hero-slideshow {
  max-width: none;
  height: 100%;
  min-height: 0;
  max-height: inherit;
  aspect-ratio: inherit;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
}

.feature-hero .species-page-hero-left .species-hero-slideshow {
  max-width: var(--size-media-hero);
  height: auto;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.feature-hero .species-hero-slideshow .carousel-container {
  position: relative;
  width: 100%;
  height: var(--size-media-lg);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--theme-eel-instrument-bg);
  box-shadow: none;
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.feature-hero .eel-page-hero__media .species-hero-slideshow .carousel-container {
  height: 100%;
  min-height: 0;
  max-width: none;
  max-height: inherit;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.feature-hero .species-hero-right {
  display: flex;
  align-items: center;
  min-height: var(--size-media-lg);
}

.feature-hero .species-detail-header .species-detail-info {
  text-align: left;
  width: 100%;
}

.feature-hero .species-detail-header .back-button-container {
  display: flex;
  justify-content: center;
  width: var(--size-media-hero);
  margin: 0;
}

.feature-hero .species-hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mb-space-xl);
}

.feature-hero .species-detail-header .species-header-description {
  margin-top: var(--mb-space-xl);
  width: 100%;
}

.feature-hero .species-detail-header .back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-sm);
  padding: var(--mb-space-sm) var(--mb-space-lg);
  background: var(--theme-eel-archive-card-bg);
  color: var(--color-on-surface);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-md);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  backdrop-filter: var(--blur-md);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.feature-hero .species-detail-header .back-button:hover {
  background: var(--theme-eel-instrument-bg);
  transform: translateY(var(--motion-lift-sm));
  box-shadow: var(--shadow-lg);
  color: var(--theme-eel-biological-accent);
  text-decoration: none;
}

.feature-hero .species-detail-header .back-button svg {
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
}

.feature-hero .species-detail-header .back-button:hover svg {
  transform: translateX(var(--motion-shift-inline-sm));
}

.feature-hero .species-hero-slideshow .carousel-track {
  display: flex;
  transition: transform var(--motion-duration-emphasized) var(--motion-ease-emphasized);
  position: relative;
  height: 100%;
}

.feature-hero .species-hero-slideshow .carousel-slide {
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  height: 100%;
}

.feature-hero .species-hero-slideshow .carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  cursor: pointer;
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
  user-select: none;
}

.feature-hero .species-hero-slideshow .carousel-slide img:hover {
  transform: scale(1.02);
}

.feature-hero .species-hero-slideshow .carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--theme-eel-instrument-bg);
  color: var(--theme-eel-text-muted-dark);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  width: var(--size-control-touch);
  height: var(--size-control-touch);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
  z-index: var(--layer-carousel-control);
  box-shadow: var(--shadow-sm);
}

.feature-hero .species-hero-slideshow .carousel-btn:hover {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  color: var(--color-on-surface);
  transform: translateY(-50%) scale(1.1);
  box-shadow: var(--shadow-sm);
}

.feature-hero .species-hero-slideshow .carousel-btn:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.feature-hero .species-hero-slideshow .carousel-btn-prev {
  left: 20px;
}

.feature-hero .species-hero-slideshow .carousel-btn-next {
  right: 20px;
}

.feature-hero .species-hero-slideshow .carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--mb-space-xs);
  z-index: var(--layer-carousel-control);
}

.feature-hero .species-hero-slideshow .indicator {
  width: var(--size-indicator-md);
  height: var(--size-indicator-md);
  border-radius: var(--radius-pill);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  background: var(--theme-eel-instrument-bg);
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.feature-hero .species-hero-slideshow .indicator.active {
  background: var(--theme-eel-biological-accent);
  border-color: var(--theme-eel-border-dark);
  box-shadow: var(--shadow-sm);
  transform: scale(1.2);
}

.feature-hero .species-hero-slideshow .indicator:hover:not(.active) {
  background: var(--theme-eel-earth-accent);
  border-color: var(--theme-eel-border-dark);
  transform: scale(1.1);
}

.feature-hero .species-hero-slideshow .indicator:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

/* Shared detail disclosure structure lives in components/detail-disclosure.css. */

.species-page-workspace .species-section-notes {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-md);
  margin-top: var(--mb-space-5);
  padding: var(--mb-space-md) var(--mb-space-5);
}

.species-page-workspace .species-section-notes h3 {
  color: var(--color-on-surface);
  font-size: var(--text-md);
  margin: 0 0 var(--mb-space-xs);
}

.species-page-workspace .species-section-notes p {
  color: var(--color-on-surface-variant);
  line-height: var(--leading-loose);
  margin: 0;
}

.species-page-workspace .species-empty-state {
  padding-top: var(--mb-space-5);
}

.species-page-workspace .species-empty-state h3 {
  color: var(--color-on-surface);
  font-size: var(--text-md);
  margin: 0 0 var(--mb-space-compact);
}

.species-page-workspace .species-empty-state p {
  color: var(--color-on-surface-variant);
  margin: 0;
}

.species-page-workspace .chr-media img,
.species-page-workspace .chr-video iframe {
  border: 0;
  border-radius: var(--radius-md);
  display: block;
  width: 100%;
}

.species-page-workspace .chr-video--horizontal iframe {
  aspect-ratio: 16 / 9;
}

.species-page-workspace .chr-video--vertical {
  margin-inline: auto;
  max-width: var(--size-media-video-rail);
}

.species-page-workspace .chr-video--vertical iframe {
  aspect-ratio: 9 / 16;
}

.species-linked-biomes {
  margin-top: var(--mb-space-xl);
}

.species-linked-biomes .mb-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  justify-content: start;
  padding: var(--mb-space-5) 0 0;
}

.species-linked-biomes__header {
  margin-bottom: var(--mb-space-md);
}

.species-linked-biomes__header h2 {
  color: var(--color-on-surface);
  font-size: var(--text-2xl);
  margin: var(--mb-space-2xs) 0 var(--mb-space-xs);
}

.species-linked-biomes__header p {
  color: var(--color-on-surface-variant);
  margin: 0;
  max-width: var(--container-copy-wide);
}

@media (max-width: 900px) {
  .feature-hero .species-detail-header {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
  }
}

@media (max-width: 640px) {
  .species-linked-biomes .mb-card-grid {
    grid-template-columns: 1fr;
    padding-top: var(--mb-space-md);
  }

  .feature-hero .species-detail-header {
    justify-items: center;
  }

  .feature-hero .species-hero-left {
    order: 1;
    width: 100%;
  }

  .feature-hero .species-page-hero-left .species-hero-slideshow {
    max-width: var(--size-media-md);
    width: 100%;
  }

  .feature-hero .species-hero-right {
    order: 2;
    min-height: auto;
    justify-content: center;
    width: 100%;
  }

  .feature-hero .species-detail-header .species-detail-info {
    text-align: center;
    margin: 0 auto;
    max-width: var(--container-detail-card);
  }

  .feature-hero .species-hero-slideshow .carousel-container {
    height: var(--size-media-sm);
    max-width: var(--size-media-md);
    margin: 0 auto;
  }

  .feature-hero .species-hero-slideshow .carousel-btn {
    width: var(--size-control-compact);
    height: var(--size-control-compact);
  }

  .feature-hero .species-hero-slideshow .carousel-btn-prev {
    left: 10px;
  }

  .feature-hero .species-hero-slideshow .carousel-btn-next {
    right: 10px;
  }

  .feature-hero .species-hero-slideshow .carousel-indicators {
    bottom: 15px;
  }

  .feature-hero .species-hero-slideshow .indicator {
    width: var(--size-indicator-sm);
    height: var(--size-indicator-sm);
  }

  .feature-hero .species-detail-header .species-detail-title {
    font-size: var(--text-2xl);
  }

  .feature-hero .species-detail-header .species-detail-scientific {
    font-size: var(--text-xl);
  }

  .feature-hero .species-detail-header .back-button-container {
    justify-content: center;
    width: 100%;
    max-width: var(--size-media-md);
    margin: 0 auto;
  }

  .feature-hero .species-detail-header .species-header-description {
    margin-top: var(--mb-space-lg);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .feature-hero .species-detail-header .species-header-description p {
    color: var(--color-on-surface);
    line-height: var(--leading-normal);
    font-size: var(--text-md);
    margin: 0;
    font-weight: var(--font-weight-regular);
  }
}

@media (max-width: 480px) {
  .feature-hero .species-detail-header {
    gap: var(--mb-space-lg);
  }

  .feature-hero .species-page-hero-left .species-hero-slideshow {
    max-width: var(--size-media-compact);
  }

  .feature-hero .species-hero-slideshow .carousel-container {
    height: var(--size-media-compact);
  }

  .feature-hero .species-detail-header .back-button-container {
    max-width: var(--size-media-compact);
  }

  .feature-hero .species-detail-header .species-detail-title {
    font-size: var(--text-2xl);
  }

  .feature-hero .species-detail-header .species-detail-scientific {
    font-size: var(--text-lg);
  }

  .feature-hero .species-detail-header .species-header-description {
    margin-top: var(--mb-space-5);
  }

  .feature-hero .species-hero-slideshow .carousel-btn {
    width: var(--size-icon-2xl);
    height: var(--size-icon-2xl);
  }
}

/* static/css/components/ecosystem-web.css */
.ecosystem-web-section {
  margin-top: 0;
}

.ecosystem-web-section__header {
  margin-bottom: var(--mb-space-lg);
}

.ecosystem-web-section__header h2 {
  color: var(--color-on-surface);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--mb-space-xs);
}

.ecosystem-web-section__header p {
  color: var(--color-on-surface-variant);
  line-height: var(--leading-normal);
  margin: 0;
  max-width: var(--container-copy-wide);
}

.ecosystem-web {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-xl);
}

.ecosystem-web__group {
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  padding: var(--mb-space-lg);
}

.ecosystem-web__group-header {
  margin-bottom: var(--mb-space-md);
}

.ecosystem-web__kicker {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  margin: 0 0 var(--mb-space-compact);
  text-transform: var(--text-case-uppercase);
}

.ecosystem-web__group-header h3 {
  color: var(--color-on-surface);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: 0;
}

.ecosystem-web__list {
  display: grid;
  gap: var(--mb-space-md);
}

.ecosystem-web__edge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--mb-space-md);
  align-items: center;
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  padding: var(--mb-space-md);
}

.ecosystem-web__edge[data-relationship-status="current"] {
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
}

.ecosystem-web__edge--selected {
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
  box-shadow: var(--shadow-ring);
}

.ecosystem-web__edge[data-relationship-status="potential"] .ecosystem-web__connector,
.ecosystem-web__edge[data-relationship-status="historical"] .ecosystem-web__connector {
  background: transparent;
  border-top: var(--border-width-accent) var(--border-style-dashed) var(--theme-eel-earth-accent);
}

.ecosystem-web__edge[data-relationship-status="historical"],
.ecosystem-web__edge[data-relationship-status="retired"] {
  opacity: var(--opacity-subtle);
}

.ecosystem-web__edge[data-relationship-status="retired"] .ecosystem-web__connector {
  background: var(--color-state-stale);
}

.ecosystem-web__node {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-compact);
  min-width: 0;
}

.ecosystem-web__node--target {
  text-align: right;
}

.ecosystem-web__node-label {
  color: var(--color-on-surface);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.ecosystem-web__node-label a {
  color: inherit;
  text-decoration: none;
}

.ecosystem-web__node-label a:hover,
.ecosystem-web__node-label a:focus-visible {
  color: var(--theme-eel-biological-accent);
  text-decoration: underline;
}

.ecosystem-web__node-role {
  color: var(--color-on-surface-variant);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.ecosystem-web__relationship {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-xs);
  align-items: center;
  min-width: var(--size-control-inline-sm);
}

.ecosystem-web__relationship-type {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-align: center;
  text-transform: var(--text-case-uppercase);
}

.ecosystem-web__connector {
  display: block;
  width: var(--size-control-inline-sm);
  height: var(--border-width-accent);
  background: var(--theme-eel-biological-accent);
}

.ecosystem-web__evidence {
  grid-column: 1 / -1;
  border-top: var(--divider-subtle);
  display: grid;
  gap: var(--mb-space-xs);
  padding-top: var(--mb-space-md);
}

.ecosystem-web__evidence p {
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: 0;
}

.ecosystem-web__evidence a {
  color: var(--theme-eel-biological-accent);
  text-decoration: none;
}

.ecosystem-web__evidence a:hover,
.ecosystem-web__evidence a:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .ecosystem-web__edge {
    grid-template-columns: 1fr;
    gap: var(--mb-space-sm);
    padding: var(--mb-space-sm);
  }

  .ecosystem-web__node--target {
    text-align: left;
  }

  .ecosystem-web__relationship {
    align-items: flex-start;
    min-width: 0;
    padding: var(--mb-space-sm) 0;
    border-top: var(--divider-subtle);
    border-bottom: var(--divider-subtle);
  }

  .ecosystem-web__connector {
    width: var(--size-control-inline-md);
  }

  .ecosystem-web__evidence {
    padding-top: var(--mb-space-sm);
  }

  .ecosystem-web__evidence p,
  .ecosystem-web__node-label {
    font-size: var(--text-sm);
  }
}

/* static/css/pages/engineering-detail.css */
.engineering-detail-header {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: var(--mb-space-16);
  align-items: start;
  max-width: var(--container-page);
  margin: 0 auto;
}

.engineering-hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mb-space-xl);
}

.engineering-hero-media {
  width: 100%;
  max-width: var(--size-media-hero);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-container-lowest);
  border: var(--border-subtle);
}

.engineering-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.engineering-hero-right {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--size-media-lg);
}

.engineering-hero-right .mb-card__badge {
  margin-bottom: var(--mb-space-md);
}

.back-button-container {
  display: flex;
  justify-content: center;
  width: var(--size-media-hero);
  margin: 0;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-sm);
  padding: var(--mb-space-sm) var(--mb-space-lg);
  background: var(--theme-eel-archive-card-bg);
  color: var(--color-on-surface);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-md);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  backdrop-filter: var(--blur-md);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.back-button:hover {
  background: var(--theme-eel-instrument-bg);
  transform: translateY(var(--motion-lift-sm));
  box-shadow: var(--shadow-lg);
  color: var(--theme-eel-biological-accent);
  text-decoration: none;
}

.back-button svg {
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
}

.back-button:hover svg {
  transform: translateX(var(--motion-shift-inline-sm));
}

/* Shared detail disclosure structure lives in components/detail-disclosure.css. */
.engineering-detail-workspace .eel-detail-data-row dt,
.engineering-detail-workspace .species-data-row dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
}

.engineering-detail-workspace .eel-detail-data-row dd,
.engineering-detail-workspace .species-data-row dd {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
}

.engineering-chronicle-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-2-5);
  margin-bottom: var(--mb-space-compact);
}

@media (max-width: 960px) {
  .engineering-detail-header {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
  }

  .engineering-hero-left,
  .engineering-hero-right {
    width: 100%;
  }

  .engineering-hero-right {
    min-height: auto;
    justify-content: center;
  }

  .back-button-container {
    justify-content: center;
    width: 100%;
    max-width: var(--size-media-hero);
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .species-detail-info {
    text-align: center;
    margin: 0 auto;
    max-width: var(--container-detail-card);
  }
}

@media (max-width: 480px) {
  .engineering-hero-media {
    max-width: var(--size-media-compact);
  }

  .back-button-container {
    max-width: var(--size-media-compact);
  }
}

/* static/css/pages/biomes.css */
.biosphere-hero {
  padding: var(--mb-space-16) 0 var(--mb-space-xl);
}

.biosphere-hero__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
  gap: var(--mb-space-xl);
  align-items: stretch;
}

.biosphere-hero__media {
  min-height: var(--size-media-hero-min);
  border: var(--border-glass-toplight);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.biosphere-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.biosphere-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mb-space-md);
  padding: var(--mb-space-lg) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.biosphere-kicker {
  color: var(--theme-eel-biological-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: var(--text-case-uppercase);
}

.biosphere-title {
  color: var(--section-text);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0;
  text-shadow: none;
}

.biosphere-mission {
  color: var(--section-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  margin: 0;
  max-width: var(--container-copy-narrow);
}

/* Shared detail disclosure structure lives in components/detail-disclosure.css. */
.biosphere-workspace .eel-detail-tab,
.biosphere-workspace .species-tab {
  border-bottom: 0;
}

.biosphere-workspace .eel-detail-accordion__icon,
.biosphere-workspace .species-accordion__icon {
  color: var(--theme-eel-biological-accent);
}

.biosphere-workspace .species-empty-state {
  padding-top: var(--mb-space-5);
}

.biosphere-workspace .species-empty-state h3 {
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-md);
  margin: 0 0 var(--mb-space-compact);
}

.biosphere-workspace .species-empty-state p {
  color: var(--theme-eel-text-muted-dark);
  margin: 0;
}

.biosphere-biomes {
  margin-top: var(--mb-space-16);
  padding-top: var(--mb-space-xl);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.biosphere-engineering {
  margin-top: var(--mb-space-12);
}

.biosphere-biomes__header {
  margin-bottom: var(--mb-space-lg);
}

.biosphere-biomes__header h2 {
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  margin: var(--mb-space-3xs) 0 var(--mb-space-compact);
}

.biosphere-biomes__header p {
  color: var(--theme-eel-text-muted-dark);
  margin: 0;
  max-width: var(--container-copy-narrow);
}

.biosphere-workspace .chr-media img,
.biosphere-workspace .chr-video iframe {
  border: 0;
  border-radius: var(--radius-md);
  display: block;
  width: 100%;
}

.biosphere-workspace .chr-video--horizontal iframe {
  aspect-ratio: 16 / 9;
}

.biosphere-workspace .chr-video--vertical {
  margin-inline: auto;
  max-width: var(--size-media-video-rail);
}

.biosphere-workspace .chr-video--vertical iframe {
  aspect-ratio: 9 / 16;
}

@media (max-width: 900px) {
  .biosphere-hero__shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .biosphere-hero__media {
    min-height: var(--size-media-compact);
  }
}

/* static/css/pages/live-monitoring.css */
/* Live monitoring styles */
.live-monitoring,
.live-monitoring.mb-section--workspace {
  background: var(--theme-eel-ink);
  padding: var(--mb-space-16) 0;
}

.live-monitoring__hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: var(--mb-space-2xl);
  align-items: start;
  margin-bottom: var(--mb-space-2xl);
}

/* Telemetry panels keep a stable structure because live JS updates target these IDs/classes directly. */
.live-monitoring__hero-copy {
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--color-on-surface);
}

.live-monitoring__hero-copy,
.live-monitoring__contract {
  padding: var(--mb-space-xl);
}

.live-monitoring__kicker,
.live-monitoring__contract-kicker,
.live-monitoring__section-kicker {
  margin: 0 0 var(--mb-space-xs);
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.live-monitoring__title {
  margin: 0 0 var(--mb-space-sm);
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.live-monitoring__lead,
.live-monitoring__contract-copy p,
.live-monitoring__contract-note p,
.live-monitoring__section-meta {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.live-monitoring__summary-grid,
.telemetry-panel__metrics,
.telemetry-node-card__metrics {
  display: grid;
  gap: var(--mb-space-sm);
}

.live-monitoring__summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-monitoring__summary-grid dt {
  margin: 0 0 var(--mb-space-2xs);
  color: var(--color-on-surface-subtle);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.live-monitoring__summary-grid dd {
  margin: 0;
  color: var(--color-on-surface);
  font-size: var(--text-sm);
}

.live-monitoring__contract {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--mb-space-lg);
  align-items: start;
  margin-bottom: var(--mb-space-2xl);
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--color-mist-ink);
}

.live-monitoring__contract-kicker {
  color: var(--theme-eel-earth-accent);
}

.live-monitoring__contract-copy {
  display: grid;
  gap: var(--mb-space-sm);
}

.live-monitoring__contract-copy h2,
.live-monitoring__section-head h2 {
  margin: 0 0 var(--mb-space-xs);
  color: inherit;
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.live-monitoring__contract-copy p,
.live-monitoring__contract-note p {
  color: var(--theme-eel-text-muted-mist);
}

.live-monitoring__contract-note {
  padding: var(--mb-space-md);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-sm);
  background: var(--theme-eel-mist);
}

.live-monitoring__panel-grid,
.telemetry-node-grid {
  display: grid;
  gap: var(--mb-space-xl);
  align-items: start;
}

.live-monitoring__panel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--mb-space-2xl);
}

.live-monitoring__section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--mb-space-lg);
  margin-bottom: var(--mb-space-lg);
  padding-bottom: var(--mb-space-lg);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.live-monitoring__refresh-status {
  display: flex;
  gap: var(--mb-space-3);
  align-items: flex-start;
  margin: 0 0 var(--mb-space-lg);
  padding: var(--mb-space-md);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.live-monitoring__refresh-status::before {
  content: "";
  flex: 0 0 var(--size-indicator-sm);
  width: var(--size-indicator-sm);
  height: var(--size-indicator-sm);
  margin-top: var(--mb-space-1);
  background: var(--theme-eel-biological-accent);
  border-radius: var(--radius-pill);
}

.live-monitoring__summary-panel .eel-metadata-row {
  margin-top: var(--mb-space-sm);
}

.live-monitoring__nodes .eel-state {
  align-items: center;
}

.live-monitoring__refresh-status[data-refresh-state="stale"],
.live-monitoring__refresh-status[data-refresh-state="warning"],
.live-monitoring__refresh-status[data-refresh-state="critical"] {
  color: var(--theme-eel-earth-accent);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-earth-accent);
}

.live-monitoring__refresh-status[data-refresh-state="stale"]::before,
.live-monitoring__refresh-status[data-refresh-state="warning"]::before,
.live-monitoring__refresh-status[data-refresh-state="critical"]::before {
  background: var(--theme-eel-earth-accent);
}

.telemetry-node-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.telemetry-node-grid .eel-instrument-panel {
  height: 100%;
  min-height: var(--size-media-lg);
}

.telemetry-node-grid .eel-instrument-panel__body {
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

.telemetry-node-grid .eel-instrument-panel__detail {
  min-height: calc(var(--size-control-min) + var(--mb-space-2));
}

.telemetry-node-grid .eel-sensor-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(var(--size-control-inline-md), 1fr));
}

.telemetry-node-grid .eel-sensor-readout {
  min-width: 0;
}

.telemetry-node-grid .eel-sensor-readout:last-child {
  grid-column: 1 / -1;
}

.telemetry-node-grid .eel-sensor-readout__reading,
.telemetry-node-grid .eel-sensor-readout__value {
  white-space: nowrap;
}

.telemetry-node-grid .eel-metadata-row {
  margin-top: auto;
}

.telemetry-node-grid .eel-metadata-item {
  min-width: 0;
}

.telemetry-node-grid .eel-metadata-item__value {
  overflow-wrap: anywhere;
}

.telemetry-empty-state {
  text-align: left;
}

@media (max-width: 1024px) {
  .live-monitoring__hero,
  .live-monitoring__contract,
  .live-monitoring__panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .live-monitoring {
    padding: var(--mb-space-12) 0;
  }

  .live-monitoring__hero-copy,
  .live-monitoring__contract {
    padding: var(--mb-space-md);
  }

  .live-monitoring__title {
    font-size: var(--text-2xl);
  }

  .live-monitoring__section-head {
    align-items: start;
    flex-direction: column;
  }

  .live-monitoring__summary-grid {
    grid-template-columns: 1fr;
  }

  .telemetry-node-grid {
    grid-template-columns: 1fr;
  }

  .telemetry-node-grid .eel-sensor-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(var(--size-control-inline-sm), 1fr));
  }

  .telemetry-node-grid .eel-instrument-panel {
    min-height: var(--size-media-sm);
  }

  .telemetry-node-grid .eel-instrument-panel__detail {
    min-height: var(--size-control-modal);
  }

  .telemetry-node-grid .eel-sensor-readout__value {
    font-size: var(--text-2xl);
  }
}

/* static/css/pages/home.css */
/* ---------- EEL immersive homepage hero ---------- */
.home-hero.eel-page-hero {
  width: 100vw;
  min-height: calc(100vh - var(--size-control-nav) - var(--mb-space-xl));
  margin-left: calc(-50vw + 50%);
  border: 0;
  border-radius: 0;
}

.home-hero .home-hero__media {
  background: var(--theme-eel-ink);
}

.home-hero__image {
  filter: var(--filter-hero-dim);
}

.home-hero .home-hero__scrim {
  background:
    linear-gradient(90deg, var(--theme-eel-ink) 0%, var(--theme-eel-ink) 34%, transparent 78%),
    linear-gradient(180deg, transparent 54%, var(--theme-eel-ink) 100%);
  opacity: var(--opacity-prominent);
}

.home-hero .home-hero__content {
  width: min(100%, var(--container-page));
  max-width: none;
  min-height: calc(100vh - var(--size-control-nav) - var(--mb-space-xl));
  margin: 0 auto;
  padding: var(--mb-space-20) var(--mb-space-16) var(--mb-space-16);
  text-align: left;
}

.home-hero__title {
  max-width: var(--container-readable);
}

.home-hero__lede {
  max-width: var(--container-copy);
}

.home-hero__actions {
  gap: var(--mb-space-md);
}

.home-hero__actions .btn {
  max-width: 100%;
  white-space: normal;
}

.home-section {
  position: relative;
  overflow: hidden;
}

.home-section > .container,
.home-section .scope-container {
  position: relative;
  z-index: var(--layer-content);
}

.home-section--intro {
  padding: var(--mb-space-20) 0 var(--mb-space-24);
}

.home-section--intro .mb-section__title,
.home-section--scope .mb-section__title {
  text-align: center;
}

.home-section--intro .container {
  max-width: var(--container-wide);
}

.home-section--intro .support-content {
  display: grid;
  gap: var(--mb-space-12);
}

.home-section--intro .home-showcase {
  margin-top: 0;
}

.home-section--scope .scope-text-column h3 {
  margin-bottom: var(--mb-space-md);
  color: var(--section-card-text);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.home-section--scope .scope-text-column p {
  color: var(--section-muted);
  font-family: var(--font-eel-body);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

.home-section--scope .scope-image-card figcaption {
  color: var(--theme-eel-text-muted-mist);
  font-family: var(--font-metadata);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: var(--mb-space-md) 0 0;
}

.home-section--scope .scope-image-card {
  width: 100%;
  max-width: var(--size-media-feature);
  margin: 0;
  padding: var(--mb-space-lg);
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.project-scope {
  padding: var(--mb-space-16) 0;
}

.scope-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--mb-space-xl);
}

.scope-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--size-media-compact), var(--size-media-feature));
  gap: var(--mb-space-12);
  align-items: center;
  margin-bottom: var(--mb-space-16);
}

.scope-row:last-child {
  margin-bottom: 0;
}

.scope-row-reverse {
  grid-template-columns: minmax(var(--size-media-compact), var(--size-media-feature)) minmax(0, 1fr);
}

.scope-row-reverse .scope-text-column {
  grid-column: 2;
  grid-row: 1;
}

.scope-row-reverse .scope-image-card {
  grid-column: 1;
  grid-row: 1;
}

.scope-text-column {
  max-width: var(--container-readable);
  padding: var(--mb-space-xl);
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-radius: var(--radius-sm);
}

.scope-diagram {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: var(--size-media-lg);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.home-showcase {
  margin: var(--mb-space-xl) auto 0;
  text-align: center;
  max-width: var(--container-hero);
}

.home-showcase__image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  box-shadow: var(--shadow-sm);
}

.home-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--mb-space-xl);
  margin-top: 0;
  margin-bottom: var(--mb-space-12);
  text-align: left;
}

.home-pillar {
  padding: var(--mb-space-lg);
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.home-pillar--seagrass {
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-biological-accent);
}

.home-pillar--meadow {
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
}

.home-pillar__title {
  margin-bottom: var(--mb-space-sm);
  color: var(--section-card-text);
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.home-pillar__text {
  color: var(--section-muted);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.home-section--matters {
  padding: var(--mb-space-20) 0 var(--mb-space-24);
}

.matters-title {
  margin: 0;
  text-align: center;
}

.matters-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-12);
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--mb-space-xl);
}

.matters-copy,
.matters-media {
  flex: 1 1 400px;
}

.matters-copy {
  color: var(--section-muted);
  padding: var(--mb-space-xl);
  background: var(--section-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  border-radius: var(--radius-sm);
  font-family: var(--font-eel-body);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-loose);
  max-width: var(--container-readable);
}

.matters-lead {
  margin-bottom: var(--mb-space-xl);
  color: var(--section-text);
  font-size: var(--text-lg);
}

.matters-paragraph {
  margin-bottom: var(--mb-space-lg);
}

.builder-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}

.homepage-feed__container {
  max-width: var(--container-prose);
}

.home-section__header.home-section__header--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.homepage-feed__header {
  max-width: var(--container-prose);
}

.homepage-feed__title {
  margin: 0;
}

.news-stack--home {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-lg);
}

.home-section--feed .news-card {
  background: var(--section-card-bg);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  box-shadow: var(--shadow-sm);
}

.home-section--feed .news-date {
  color: var(--section-accent);
}

.home-section--feed .news-title {
  color: var(--section-card-text);
}

.home-section--feed .news-content {
  color: var(--section-muted);
}

.poll-state--hidden {
  display: none;
}

.signup-honeypot {
  display: none;
}

/* Email signup section */
.email-signup-section {
  padding: var(--mb-space-16) 0;
  background: var(--section-bg);
  color: var(--section-text);
}

.signup-content {
  text-align: center;
  max-width: var(--container-md);
  margin: 0 auto;
}

.signup-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--mb-space-md);
  color: var(--color-on-surface);
}

.signup-description {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin-bottom: var(--mb-space-2xl);
  opacity: var(--opacity-high);
}

.signup-form {
  display: flex;
  justify-content: center;
}

.signup-input-group {
  display: flex;
  gap: var(--mb-space-md);
  max-width: var(--container-sm);
  width: 100%;
}

.signup-input {
  flex: 1;
  padding: var(--mb-space-3-5) var(--mb-space-5);
  font-size: var(--text-md);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
}

.signup-input:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-color: var(--color-border-strong);
  box-shadow: var(--focus-ring-shadow);
}

.signup-btn {
  min-width: var(--size-control-inline-md);
  white-space: nowrap;
}

/* Poll section */
.poll-section {
  padding: var(--mb-space-16) 0;
  background: var(--section-bg);
}

.poll-content {
  max-width: var(--container-md);
  margin: 0 auto;
  text-align: center;
}

.poll-title {
  font-size: var(--text-2xl);
  margin-bottom: var(--mb-space-md);
  color: var(--color-on-surface);
}

.poll-description {
  font-size: var(--text-lg);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--mb-space-xl);
}

.poll-form {
  text-align: left;
}

.poll-options {
  margin-bottom: var(--mb-space-xl);
}

.poll-option {
  display: flex;
  align-items: center;
  padding: var(--mb-space-md);
  margin-bottom: var(--mb-space-xs);
  background: var(--color-surface-container-high);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  border: var(--border-subtle);
}

.poll-option:hover {
  background: var(--color-surface-container-highest);
  border-color: var(--color-border-hover);
}

.poll-option input[type="radio"] {
  margin-right: var(--mb-space-md);
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  accent-color: var(--color-state-nominal);
}

.option-text {
  font-size: var(--text-md);
  color: var(--color-on-surface);
  font-weight: var(--font-weight-medium);
}

.poll-submit {
  display: block;
  margin: 0 auto;
  padding: var(--mb-space-sm) var(--mb-space-xl);
}

.poll-results {
  text-align: left;
  margin-top: var(--mb-space-xl);
  padding: var(--mb-space-xl);
  background: var(--color-surface-container-high);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
}

.poll-results h3 {
  text-align: center;
  margin-bottom: var(--mb-space-lg);
  color: var(--color-on-surface);
}

.result-bar {
  margin-bottom: var(--mb-space-md);
}

.result-label {
  display: block;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--mb-space-xs);
  color: var(--color-on-surface);
}

.bar-container {
  display: flex;
  align-items: center;
  gap: var(--mb-space-md);
  width: 100%;
}

.bar {
  height: var(--size-icon-xl);
  background: var(--theme-eel-biological-accent);
  border-radius: var(--radius-md);
  min-width: 0;
  width: 0%;
  transition: width var(--motion-duration-progress) var(--motion-ease-out);
}

.percentage {
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface);
  font-size: var(--text-md);
  min-width: var(--size-control-compact);
}

.total-votes {
  text-align: center;
  margin-top: var(--mb-space-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-on-surface-variant);
}

/* ---------- video showcase section ---------- */
.video-showcase {
  padding: var(--mb-space-16) 0;
}

.video-content {
  text-align: center;
  max-width: var(--container-xl);
  margin: 0 auto;
}

.video-title {
  margin: 0;
}

.video-description {
  margin: 0;
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  margin: 0 auto;
  border-radius: var(--radius-sm);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.home-section--poll .poll-content,
.home-section--signup .signup-content {
  padding: var(--mb-space-xl);
  background: var(--section-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--section-card-text);
  max-width: var(--container-readable);
  margin: 0 auto;
}

.home-section--poll .poll-option {
  background: var(--color-mist-card);
  border-color: var(--section-border);
}

.home-section--poll .poll-option:hover {
  background: var(--color-mist-white);
  border-color: var(--color-border-hover);
}

.home-section--poll .poll-form,
.home-section--signup .signup-form {
  margin-top: var(--mb-space-xl);
}

.home-section--signup .signup-input-group {
  align-items: stretch;
}

.home-section--poll .poll-title,
.home-section--poll .poll-results h3,
.home-section--poll .result-label,
.home-section--poll .option-text,
.home-section--poll .percentage,
.home-section--signup .signup-title {
  color: var(--section-card-text);
}

.home-section--poll .poll-description,
.home-section--poll .total-votes,
.home-section--signup .signup-description {
  color: var(--section-card-muted);
  opacity: 1;
}

.home-section--poll .poll-results {
  background: var(--color-mist-card);
  border-color: var(--section-border);
}

.home-section--signup .signup-input {
  background: var(--color-mist-card);
  color: var(--color-mist-ink);
  border-color: var(--section-border);
  min-height: var(--size-control-min);
}

.home-section--signup .signup-input::placeholder {
  color: var(--color-mist-ink-muted);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .home-hero.eel-page-hero,
  .home-hero .home-hero__content {
    min-height: calc(100vh - var(--size-control-nav) - var(--mb-space-lg));
  }

  .home-hero .home-hero__content {
    width: 100%;
    padding: var(--mb-space-12) var(--mb-space-lg);
  }

  .home-hero .home-hero__scrim {
    background:
      linear-gradient(180deg, var(--theme-eel-ink) 0%, var(--theme-eel-ink) 62%, transparent 100%),
      linear-gradient(0deg, var(--theme-eel-ink) 0%, transparent 42%);
  }

  .home-hero__title {
    font-size: var(--text-3xl);
  }

  .home-hero__lede {
    font-size: var(--text-lg);
  }

  .home-hero__actions {
    flex-direction: column;
    gap: var(--mb-space-md);
    align-items: stretch;
  }

  .home-hero__actions .btn {
    width: 100%;
    max-width: var(--size-panel-xs);
  }

  .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }

  .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .video-title {
    font-size: var(--text-2xl);
  }

  .video-description {
    font-size: var(--text-md);
    padding: 0 var(--mb-space-md);
  }

  .video-showcase {
    padding: var(--mb-space-12) 0;
  }

  .home-section--intro,
  .home-section--matters {
    padding: var(--mb-space-16) 0;
  }

  .home-section--intro .home-section__header,
  .home-section--matters .home-section__header {
    margin-bottom: var(--mb-space-xl);
  }

  .home-section--intro .support-content,
  .matters-layout {
    gap: var(--mb-space-xl);
  }

  .home-pillars {
    margin-bottom: var(--mb-space-xl);
  }

  .matters-layout {
    padding: 0 var(--mb-space-lg);
  }

  .project-scope {
    padding: var(--mb-space-12) 0;
  }

  .scope-container {
    padding: 0 var(--mb-space-lg);
  }

  .scope-row,
  .scope-row-reverse {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
    margin-bottom: var(--mb-space-12);
  }

  .scope-row-reverse .scope-text-column,
  .scope-row-reverse .scope-image-card {
    grid-column: auto;
    grid-row: auto;
  }

  .home-section--scope .scope-image-card {
    max-width: var(--size-panel-sm);
    justify-self: center;
  }

  .signup-title {
    font-size: var(--text-2xl);
  }

  .signup-description {
    font-size: var(--text-md);
  }

  .signup-input-group {
    flex-direction: column;
    gap: var(--mb-space-md);
    align-items: center;
  }

  .signup-input,
  .signup-btn {
    width: 100%;
    max-width: var(--size-panel-xs);
  }

  .poll-options {
    grid-template-columns: 1fr;
    gap: var(--mb-space-md);
  }

  .poll-option {
    padding: var(--mb-space-md);
  }
}

@media (max-width: 480px) {
  .home-hero.eel-page-hero,
  .home-hero .home-hero__content {
    min-height: calc(100vh - var(--size-control-nav) - var(--mb-space-md));
  }

  .home-hero .home-hero__content {
    padding: var(--mb-space-10) var(--mb-space-md);
  }

  .home-hero__title {
    font-size: var(--text-2xl);
  }

  .home-hero__lede {
    font-size: var(--text-md);
  }

  .video-title {
    font-size: var(--text-2xl);
  }

  .home-section--intro,
  .home-section--matters {
    padding: var(--mb-space-12) 0;
  }

  .home-section--intro .mb-section__title,
  .home-section--matters .mb-section__title {
    font-size: var(--text-2xl);
  }

  .home-section--intro .home-section__header,
  .home-section--matters .home-section__header {
    margin-bottom: var(--mb-space-lg);
  }

  .home-section--intro .support-content,
  .matters-layout {
    gap: var(--mb-space-lg);
  }

  .home-pillars {
    margin-bottom: var(--mb-space-lg);
  }

  .matters-layout {
    padding: 0 var(--mb-space-md);
  }

  .matters-copy {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
  }

  .scope-container {
    padding: 0 var(--mb-space-md);
  }

  .home-section--scope .mb-section__title {
    font-size: var(--text-2xl);
  }

  .home-section--scope .scope-text-column h3 {
    font-size: var(--text-lg);
  }

  .home-section--scope .scope-text-column p {
    font-size: var(--text-md);
    line-height: var(--leading-normal);
  }

  .home-section--scope .scope-image-card {
    padding: var(--mb-space-md);
  }

  .signup-title,
  .poll-title {
    font-size: var(--text-2xl);
  }

  .signup-description {
    font-size: var(--text-md);
  }

  .poll-option {
    padding: var(--mb-space-sm);
  }

  .home-section--poll .poll-content,
  .home-section--signup .signup-content {
    padding: var(--mb-space-lg);
  }
}

/* static/css/components/cookie-consent.css */
/* Cookie Consent Banner */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--theme-eel-instrument-bg);
  border-top: var(--border-width-emphasis) var(--border-style-solid) var(--theme-eel-biological-accent);
  box-shadow: var(--shadow-md);
  color: var(--color-on-surface);
  z-index: var(--layer-toast);
  padding: var(--mb-space-5);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  animation: slideUp var(--motion-duration-standard) var(--motion-ease-out);
}

.cookie-consent-banner--hidden {
  display: none;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-consent-content {
  max-width: var(--container-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-space-5);
}

.cookie-consent-text h4 {
  margin: 0 0 var(--mb-space-xs) 0;
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.cookie-consent-text p {
  margin: 0 0 var(--mb-space-xs) 0;
  color: var(--theme-eel-text-muted-dark);
}

.cookie-consent-text p:last-child {
  margin-bottom: 0;
}

.cookie-link {
  color: var(--theme-eel-earth-accent);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

.cookie-link:hover {
  color: var(--theme-eel-biological-accent);
  text-decoration: underline;
}

.cookie-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.cookie-consent-actions {
  display: flex;
  gap: var(--mb-space-sm);
  flex-shrink: 0;
}

.cookie-consent-actions .btn {
  padding: var(--mb-space-xs) var(--mb-space-md);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  cursor: pointer;
  font-family: var(--font-metadata);
  font-weight: var(--font-weight-semibold);
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard),
    transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.cookie-consent-actions .btn-secondary {
  background: transparent;
  color: var(--theme-eel-text-muted-dark);
}

.cookie-consent-actions .btn-secondary:hover {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.cookie-consent-actions .btn-primary {
  background: var(--theme-eel-biological-accent);
  border: var(--border-control-transparent);
  color: var(--color-on-accent);
}

.cookie-consent-actions .btn-primary:hover {
  background: var(--theme-eel-biological-accent);
  box-shadow: var(--shadow-sm);
  color: var(--color-on-accent);
  transform: translateY(var(--motion-lift-sm));
}

@media (max-width: 768px) {
  .cookie-consent-content {
    flex-direction: column;
    text-align: center;
  }

  .cookie-consent-actions {
    width: 100%;
    justify-content: center;
  }
}

/* static/css/components/flash.css */
/* Flash Messages */
.flash-messages {
  position: fixed;
  top: var(--mb-space-5);
  right: var(--mb-space-5);
  z-index: var(--layer-overlay);
  max-width: var(--size-panel-sm);
}

.flash-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--mb-space-md) var(--mb-space-5);
  margin-bottom: var(--mb-space-xs);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-eel-body);
  line-height: var(--leading-normal);
  animation: slideInRight var(--motion-duration-standard) var(--motion-ease-out);
  position: relative;
  overflow: hidden;
}

.flash-message::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--border-width-accent);
  background: var(--theme-eel-earth-accent);
  opacity: var(--opacity-high);
}

.flash-success {
  background-color: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--color-state-nominal);
  color: var(--color-mist-ink);
}

.flash-success::before {
  background: var(--theme-eel-biological-accent);
}

.flash-error {
  background-color: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--color-state-critical);
  color: var(--color-on-surface);
}

.flash-error::before {
  background: var(--color-state-critical);
}

.flash-info {
  background-color: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.flash-info::before {
  background: var(--theme-eel-earth-accent);
}

.flash-warning {
  background-color: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--color-state-warning);
  color: var(--color-mist-ink);
}

.flash-warning::before {
  background: var(--theme-eel-earth-accent);
}

.flash-text {
  flex: 1;
  margin-right: var(--mb-space-md);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.flash-close {
  background: transparent;
  border: var(--border-control-transparent);
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: var(--text-xl);
  cursor: pointer;
  padding: 0;
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: var(--opacity-faded);
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.flash-close:hover {
  background: var(--theme-eel-border-dark);
  opacity: 1;
}

.flash-close:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .flash-messages {
    top: var(--mb-space-sm);
    right: var(--mb-space-sm);
    left: var(--mb-space-sm);
    max-width: none;
  }

  .flash-message {
    padding: var(--mb-space-sm) var(--mb-space-md);
  }
}

/* static/css/components/forms.css */
/* Form buttons styling */
.form-buttons {
  display: flex;
  gap: var(--mb-space-md);
  justify-content: flex-start;
  margin-top: var(--mb-space-xl);
  padding-top: var(--mb-space-lg);
  border-top: var(--divider-subtle);
}

.form-buttons .btn {
  padding: var(--mb-space-sm) var(--mb-space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  border: var(--border-control-transparent);
  min-width: var(--size-control-inline-sm);
}

.form-buttons .btn-primary {
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  border-color: var(--current-primary);
}

.form-buttons .btn-primary:hover {
  background: var(--theme-eel-biological-accent);
  border-color: var(--current-primary);
  transform: translateY(var(--motion-lift-xs));
  box-shadow: var(--shadow-md);
}

.form-buttons .btn-secondary {
  background: var(--theme-eel-archive-card-bg);
  color: var(--theme-eel-text-muted-dark);
  border-color: var(--color-state-stale);
}

.form-buttons .btn-secondary:hover {
  background: var(--theme-eel-instrument-bg);
  border-color: var(--color-state-stale);
  transform: translateY(var(--motion-lift-xs));
  box-shadow: var(--shadow-sm);
}

/* static/css/performance.css */
/* Progressive enhancement and performance optimizations */

/* Lazy loading placeholder */
.lazy-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading var(--motion-duration-loading) infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Intersection Observer optimizations */
.fade-in {
  opacity: 0;
  transform: translateY(var(--motion-reveal-distance));
  transition: opacity var(--motion-duration-reveal) var(--motion-ease-standard), transform var(--motion-duration-reveal) var(--motion-ease-standard);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Critical resource hints */
.preload {
  font-display: swap;
}

/* Touch improvements */
@media (pointer: coarse) {
  .btn {
    min-height: var(--size-control-touch);
    min-width: var(--size-control-touch);
    padding: var(--mb-space-md) var(--mb-space-xl);
  }

  .social-link svg,
  .footer-social-link svg {
    width: 28px;
    height: 28px;
  }
}

/* High DPI optimizations */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .hero-img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Connection-aware loading */
@media (prefers-reduced-data: reduce) {
  .hero-img {
    display: none;
  }

  .species-photo,
  .species-detail-photo {
    filter: var(--filter-media-unavailable);
  }
}

/* static/css/pages/faq.css */
/* FAQ Page Styles */
.page-header {
  text-align: center;
  padding: var(--mb-space-12) 0 var(--mb-space-xl) 0;
  max-width: var(--container-xl);
  margin: 0 auto;
}

.page-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-md);
}

.page-header p {
  font-size: var(--text-lg);
  color: var(--color-on-surface-variant);
  line-height: var(--leading-normal);
  margin: 0;
}

.faq-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--mb-space-xl) 0;
}

.faq-section {
  margin-bottom: var(--mb-space-12);
}

.faq-section__lede {
  max-width: var(--container-copy-wide);
  margin: 0 0 var(--mb-space-lg);
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.faq-section h2 {
  color: var(--color-on-surface);
  font-size: var(--text-xl);
  margin-bottom: var(--mb-space-lg);
  padding-bottom: var(--mb-space-xs);
  border-bottom: var(--divider-subtle);
}

/* FAQ items are disclosure controls, so they keep accordion-specific markup instead of .mb-card. */
.faq-item {
  margin-bottom: var(--mb-space-md);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  background: var(--color-surface-container);
}

.faq-item:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-md);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--mb-space-lg);
  cursor: pointer;
  background: var(--color-surface-container);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  border-bottom: var(--divider-transparent);
}

.faq-question:hover {
  background: var(--color-surface-container-high);
}

.faq-question.active,
.faq-item.is-open .faq-question {
  background: var(--color-surface-container-high);
  border-bottom-color: var(--color-border-default);
}

.faq-question h3 {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-on-surface);
  flex: 1;
}

.faq-toggle {
  font-size: var(--text-xl);
  color: var(--color-state-info);
  font-weight: var(--font-weight-bold);
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
  margin-left: var(--mb-space-md);
}

.faq-question.active .faq-toggle,
.faq-item.is-open .faq-toggle {
  transform: rotate(45deg);
}

.faq-question:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

/* Contact Form Styles */
.contact-form-section {
  margin-top: var(--mb-space-12);
  padding: 0 var(--mb-space-md);
}

.contact-form-section h4 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  text-align: center;
  margin-bottom: var(--mb-space-xs);
}

.contact-form-section p {
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  text-align: center;
  margin-bottom: var(--mb-space-xl);
  line-height: var(--leading-normal);
}

.contact-form {
  background: var(--color-surface-container);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--mb-space-xl);
  max-width: var(--container-form);
  width: 100%;
  margin: 0 auto;
}

.contact-form .form-group {
  margin-bottom: var(--mb-space-lg);
}

.contact-form label {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-surface);
  font-size: var(--text-sm);
  margin-bottom: var(--mb-space-xs);
  line-height: var(--leading-tight);
}

.contact-form .form-control {
  width: 100%;
  padding: var(--mb-space-sm) var(--mb-space-md);
  font-size: var(--text-md);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--motion-duration-quick) var(--motion-ease-in-out);
  background-color: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  line-height: var(--leading-normal);
  box-sizing: border-box;
}

.contact-form .form-control:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-color: var(--color-border-strong);
  box-shadow: var(--focus-ring-shadow);
}

.contact-form .form-control:hover {
  border-color: var(--color-border-hover);
}

.contact-form textarea.form-control {
  resize: vertical;
  min-height: var(--size-textarea-md);
  font-family: inherit;
  line-height: var(--leading-normal);
}

.contact-form .form-control::placeholder {
  color: var(--color-on-surface-subtle);
  opacity: 1;
}

.contact-form .btn {
  width: 100%;
  padding: var(--mb-space-3-5) var(--mb-space-lg);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  border: none;
  background-color: var(--theme-eel-biological-accent);
  color: var(--color-on-accent);
  cursor: pointer;
  transition: all var(--motion-duration-fast) var(--motion-ease-in-out);
  margin-top: var(--mb-space-md);
}

.contact-form .btn:hover {
  background-color: var(--theme-eel-biological-accent);
  transform: translateY(var(--motion-lift-sm));
  box-shadow: var(--shadow-md);
}

.contact-form .btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-inner);
}

/* Utility classes */
.mt-3 {
  margin-top: var(--mb-space-sm);
}

.mt-8 {
  margin-top: var(--mb-space-xl);
}

/* Form validation styling */
.contact-form .form-control:invalid:not(:placeholder-shown) {
  border-color: var(--color-state-critical);
  box-shadow: var(--shadow-ring);
}

.contact-form .form-control:valid:not(:placeholder-shown) {
  border-color: var(--color-state-nominal);
}

/* Contact form success message */
.contact-success {
  background: var(--color-surface-container-high);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--mb-space-xl);
  text-align: center;
  max-width: var(--container-form);
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}

.contact-success .success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-touch);
  height: var(--size-control-touch);
  background: var(--color-state-nominal);
  color: var(--color-on-accent);
  border-radius: 50%;
  margin-bottom: var(--mb-space-md);
}

.contact-success .success-icon svg {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
}

.contact-success h4 {
  color: var(--color-on-surface);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--mb-space-sm);
}

.contact-success p {
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  margin: 0;
  line-height: var(--leading-normal);
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .contact-form-section {
    padding: 0 var(--mb-space-xs);
  }

  .contact-form {
    padding: var(--mb-space-lg);
    margin: 0 auto;
    max-width: 100%;
  }

  .contact-form-section h4 {
    font-size: var(--text-xl);
  }

  .contact-form .form-group {
    margin-bottom: var(--mb-space-5);
  }

  .contact-form .form-control {
    padding: var(--mb-space-3-5);
  }

  .contact-form textarea.form-control {
    min-height: var(--size-textarea-sm);
  }
}

@media (max-width: 480px) {
  .contact-form {
    padding: var(--mb-space-md);
  }

  .contact-form-section h4 {
    font-size: var(--text-xl);
  }

  .contact-form .form-group {
    margin-bottom: var(--mb-space-md);
  }
}

.faq-answer {
  padding: 0 var(--mb-space-lg);
  max-height: 0;
  overflow: hidden;
  transition:
    max-height var(--motion-duration-standard) var(--motion-ease-standard),
    opacity var(--motion-duration-standard) var(--motion-ease-standard);
  background: var(--color-surface-container-low);
  opacity: 0;
}

.faq-answer.active,
.faq-item.is-open .faq-answer {
  padding: var(--mb-space-lg) var(--mb-space-lg) var(--mb-space-xl);
  max-height: var(--size-media-hero);
  opacity: 1;
}

.faq-answer p {
  margin: 0 0 var(--mb-space-lg) 0;
  color: var(--color-on-surface-variant);
  line-height: var(--leading-normal);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .faq-question {
    padding: var(--mb-space-md);
  }

  .faq-answer.active,
  .faq-item.is-open .faq-answer {
    padding: var(--mb-space-md) var(--mb-space-md) var(--mb-space-lg);
  }
}

.faq-contact {
  text-align: center;
  padding: var(--mb-space-xl);
  background: var(--color-surface-container);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  margin-top: var(--mb-space-xl);
}

.contact-form-section {
  margin-bottom: var(--mb-space-xl);
  max-width: var(--container-md);
  margin-left: auto;
  margin-right: auto;
}

.contact-form-section h4 {
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-xs);
  text-align: center;
}

.contact-form-section p {
  color: var(--color-on-surface-variant);
  margin-bottom: var(--mb-space-lg);
  text-align: center;
}

.social-section {
  text-align: center;
  margin-top: var(--mb-space-xl);
}

.social-section h4 {
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-xs);
}

.social-section p {
  color: var(--color-on-surface-variant);
  margin-bottom: var(--mb-space-md);
}

.social-links {
  display: flex;
  gap: var(--mb-space-md);
  justify-content: center;
}

/* EEL scoped alignment for the public FAQ route. Accordions remain specialized controls. */
.faq-page {
  padding: var(--mb-space-16) 0 var(--mb-space-20);
  background: var(--theme-eel-ink);
  color: var(--color-on-surface);
}

.faq-page > .container {
  max-width: var(--container-wide);
}

.faq-page .page-header:not(.eel-page-hero) {
  max-width: var(--container-readable);
  padding: 0 0 var(--mb-space-12);
  margin-bottom: var(--mb-space-12);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.faq-page .faq-hero {
  max-width: var(--container-page);
  margin: 0 auto var(--mb-space-12);
  text-align: left;
}

.faq-page .faq-hero.eel-page-hero--split {
  grid-template-columns: minmax(0, 1.4fr) minmax(var(--size-media-compact), 0.6fr);
  padding: var(--mb-space-12);
  background: var(--theme-eel-ink);
  border: 0;
}

.faq-page .faq-hero .eel-page-hero__content {
  gap: var(--mb-space-md);
  padding-right: var(--mb-space-xl);
}

.faq-page .faq-hero .eel-page-hero__title {
  max-width: var(--container-prose);
  font-size: var(--text-3xl);
}

.faq-page .faq-hero .eel-page-hero__lede {
  max-width: var(--container-readable);
}

.faq-page .faq-hero .eel-page-hero__media {
  align-self: center;
  min-height: var(--size-media-md);
  max-height: var(--size-media-hero);
}

.faq-page .faq-hero .eel-page-hero__image {
  object-position: center center;
}

.faq-page .page-header:not(.eel-page-hero) h1 {
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.faq-page .page-header:not(.eel-page-hero) p {
  max-width: var(--container-copy-narrow);
  margin: 0 auto;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
}

.faq-page .faq-container {
  max-width: var(--container-page);
  padding: 0;
}

.faq-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: var(--mb-space-xl);
  margin-bottom: var(--mb-space-12);
  padding: var(--mb-space-12);
  background: var(--theme-eel-archive-card-bg);
  border-radius: var(--radius-sm);
}

.faq-intro__header {
  display: grid;
  gap: var(--mb-space-md);
  max-width: var(--container-readable);
}

.faq-intro__kicker {
  margin: 0;
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.faq-intro h2 {
  margin: 0;
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.faq-intro__header p:last-child {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.faq-narrative-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-space-md);
}

.faq-narrative-card {
  display: grid;
  align-content: start;
  gap: var(--mb-space-xs);
  min-height: auto;
  padding: var(--mb-space-md) var(--mb-space-lg);
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  box-shadow: none;
}

.faq-narrative-card__eyebrow {
  margin: 0;
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.faq-narrative-card h3 {
  margin: 0;
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.faq-narrative-card p:last-child {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.faq-page .faq-section {
  max-width: var(--container-hero);
  margin: 0 auto var(--mb-space-12);
}

.faq-page .faq-section:not(.faq-section--questions):not(.faq-acknowledgements):not(.faq-section--closing) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--mb-space-md);
  row-gap: var(--mb-space-sm);
}

.faq-page .faq-section:not(.faq-section--questions):not(.faq-acknowledgements):not(.faq-section--closing) h2,
.faq-page .faq-section:not(.faq-section--questions):not(.faq-acknowledgements):not(.faq-section--closing) .faq-section__lede {
  grid-column: 1 / -1;
}

.faq-page .faq-section:not(.faq-section--questions):not(.faq-acknowledgements):not(.faq-section--closing) .faq-item {
  margin-bottom: 0;
}

.faq-page .faq-section h2 {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--mb-space-md);
  padding-bottom: var(--mb-space-sm);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.faq-page .faq-section__lede {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-bottom: var(--mb-space-lg);
}

.faq-page .faq-section--questions {
  padding-top: var(--mb-space-md);
}

.faq-page .faq-item {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.faq-page .faq-item:hover {
  border-color: var(--theme-eel-border-dark);
  box-shadow: none;
}

.faq-page .faq-question {
  background: transparent;
  border-bottom: var(--divider-transparent);
  padding: var(--mb-space-md) var(--mb-space-lg);
}

.faq-page .faq-question:hover,
.faq-page .faq-question.active,
.faq-page .faq-item.is-open .faq-question {
  background: var(--theme-eel-instrument-bg);
  border-bottom-color: var(--theme-eel-border-dark);
}

.faq-page .faq-question h3 {
  color: var(--color-on-surface);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.faq-page .faq-toggle {
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-metadata);
}

.faq-page .faq-answer {
  background: var(--theme-eel-instrument-bg);
}

.faq-page .faq-answer p {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
}

.faq-page .faq-answer a {
  color: var(--theme-eel-biological-accent);
}

.faq-page .faq-support-boundary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--mb-space-xl);
  padding: var(--mb-space-xl);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-biological-accent);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.faq-page .faq-support-boundary__copy {
  display: grid;
  gap: var(--mb-space-sm);
}

.faq-page .faq-support-boundary__kicker {
  margin: 0;
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.faq-page .faq-support-boundary h3 {
  margin: 0;
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.faq-page .faq-support-boundary p,
.faq-page .faq-support-boundary li {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.faq-page .faq-support-boundary p {
  margin: 0;
}

.faq-page .faq-support-boundary__list {
  display: grid;
  gap: var(--mb-space-sm);
  margin: 0;
  padding-left: var(--mb-space-lg);
}

.faq-page .faq-patreon-recognition {
  display: grid;
  gap: var(--mb-space-xl);
  padding: var(--mb-space-xl);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-biological-accent);
  border-radius: var(--radius-sm);
}

.faq-page .faq-patreon-recognition__header {
  display: grid;
  gap: var(--mb-space-sm);
  max-width: var(--container-reading);
}

.faq-page .faq-patreon-recognition__kicker {
  margin: 0;
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.faq-page .faq-patreon-recognition h3,
.faq-page .faq-patreon-biome h4 {
  margin: 0;
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  line-height: var(--leading-tight);
}

.faq-page .faq-patreon-recognition h3 {
  font-size: var(--text-xl);
}

.faq-page .faq-patreon-biome h4 {
  font-size: var(--text-lg);
}

.faq-page .faq-patreon-recognition p {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.faq-page .faq-patreon-recognition__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mb-space-lg);
}

.faq-page .faq-patreon-biome {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--mb-space-md);
  padding: var(--mb-space-md);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.faq-page .faq-patreon-nameplates {
  display: grid;
  gap: var(--mb-space-sm);
}

.faq-page .faq-nameplate {
  position: relative;
  display: grid;
  gap: var(--mb-space-xs);
  min-height: var(--size-control-touch);
  padding: var(--mb-space-md);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-left: var(--border-width-status) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.faq-page .faq-nameplate::before,
.faq-page .faq-nameplate::after {
  content: "";
  position: absolute;
  top: var(--mb-space-xs);
  width: var(--size-indicator-xs);
  height: var(--size-indicator-xs);
  background: var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
}

.faq-page .faq-nameplate::before {
  left: var(--mb-space-xs);
}

.faq-page .faq-nameplate::after {
  right: var(--mb-space-xs);
}

.faq-page .faq-nameplate--biosphere {
  border-left: var(--border-width-status) var(--border-style-solid) var(--theme-eel-biological-accent);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
  border-right: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
}

.faq-page .faq-nameplate--realm {
  border-left: var(--border-width-status) var(--border-style-solid) var(--theme-eel-earth-accent);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.faq-page .faq-nameplate__name {
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

.faq-page .faq-nameplate--biosphere .faq-nameplate__name {
  font-size: var(--text-lg);
}

.faq-page .faq-nameplate--realm .faq-nameplate__name {
  font-size: var(--text-lg);
}

.faq-page .faq-nameplate__tier {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.faq-page .faq-patreon-recognition__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mb-space-lg);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  padding-top: var(--mb-space-lg);
}

.faq-page .faq-patreon-recognition__footer p {
  max-width: var(--container-reading);
}

.faq-page .faq-patreon-recognition__footer .btn {
  flex: 0 0 auto;
  min-width: var(--size-control-inline-lg);
  text-align: center;
}

.faq-page .faq-patreon-recognition__footer .faq-patreon-cta {
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.faq-page .faq-patreon-recognition__footer .faq-patreon-cta:hover {
  background: var(--theme-eel-mist);
  box-shadow: var(--shadow-sm);
  color: var(--color-mist-ink);
}

.faq-page .faq-section--closing {
  max-width: var(--container-page);
  margin-bottom: 0;
}

.faq-page .faq-contact {
  display: grid;
  gap: var(--mb-space-md);
  max-width: var(--container-hero);
  margin: 0 auto;
  padding: var(--mb-space-10) var(--mb-space-12);
  background: var(--theme-eel-mist);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.faq-page .contact-form-section {
  margin-top: 0;
  margin-bottom: var(--mb-space-md);
}

.faq-page .social-section {
  margin-top: 0;
}

.faq-page .contact-form-section h4,
.faq-page .social-section h4 {
  color: var(--color-mist-ink);
  font-family: var(--font-editorial);
}

.faq-page .contact-form-section p,
.faq-page .social-section p {
  color: var(--theme-eel-text-muted-mist);
  font-family: var(--font-eel-body);
}

.faq-page .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-touch);
  height: var(--size-control-touch);
  color: var(--color-mist-ink);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-pill);
  background: var(--theme-eel-mist-card);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), background var(--motion-duration-fast) var(--motion-ease-standard);
}

.faq-page .social-link:hover {
  color: var(--color-on-surface);
  border-color: var(--theme-eel-border-dark);
  background: var(--theme-eel-biological-accent);
}

@media (max-width: 768px) {
  .faq-page {
    padding: var(--mb-space-12) 0 var(--mb-space-16);
  }

  .faq-page .page-header:not(.eel-page-hero) {
    padding-bottom: var(--mb-space-xl);
    margin-bottom: var(--mb-space-xl);
  }

  .faq-page .faq-hero {
    margin-bottom: var(--mb-space-12);
  }

  .faq-page .faq-hero.eel-page-hero--split {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--mb-space-md);
  }

  .faq-page .faq-hero .eel-page-hero__content {
    padding-right: 0;
  }

  .faq-page .faq-hero .eel-page-hero__title {
    font-size: var(--text-3xl);
  }

  .faq-page .faq-hero .eel-page-hero__media {
    min-height: var(--size-media-card);
  }

  .faq-intro {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: var(--mb-space-12);
    padding: var(--mb-space-xl);
  }

  .faq-intro h2 {
    font-size: var(--text-2xl);
  }

  .faq-intro__header p:last-child {
    font-size: var(--text-md);
  }

  .faq-narrative-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-narrative-card {
    min-height: auto;
  }

  .faq-page .faq-section {
    margin-bottom: var(--mb-space-12);
  }

  .faq-page .faq-section:not(.faq-section--questions):not(.faq-acknowledgements):not(.faq-section--closing) {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-page .faq-support-boundary,
  .faq-page .faq-patreon-recognition__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-page .faq-patreon-recognition,
  .faq-page .faq-contact {
    padding: var(--mb-space-xl);
  }

  .faq-page .faq-patreon-recognition__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .faq-page .faq-patreon-recognition__footer .btn {
    width: 100%;
  }
}

/* static/css/responsive-overrides.css */
/* Responsive design */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--mb-space-md);
  }

  .btn {
    width: 100%;
    max-width: var(--size-filter-inline);
  }

  .main-nav {
    display: none;
  }

  .social-links {
    gap: var(--mb-space-md);
  }

  .social-link {
    width: var(--size-control-compact);
    height: var(--size-control-compact);
  }

  .social-link svg {
    width: var(--size-icon-lg);
    height: var(--size-icon-lg);
  }

  .contact-options {
    grid-template-columns: 1fr;
  }
}

/* Additional mobile optimizations for very small screens */
@media (max-width: 480px) {
  .btn {
    padding: var(--mb-space-sm) var(--mb-space-lg);
    font-size: var(--text-md);
  }
}

/* static/css/layout/mobile-nav.css */
/* Hamburger Menu */
.hamburger-menu {
  display: none;
  flex-direction: column;
  background: transparent;
  border: var(--border-control-transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: var(--mb-space-xs);
  gap: var(--mb-space-2xs);
  z-index: var(--layer-critical-control);
  position: relative;
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.hamburger-menu span {
  width: 25px;
  height: 3px;
  background: var(--theme-eel-text-muted-dark);
  transition:
    transform var(--motion-duration-standard) var(--motion-ease-standard),
    opacity var(--motion-duration-standard) var(--motion-ease-standard),
    background var(--motion-duration-standard) var(--motion-ease-standard);
  border-radius: var(--radius-pill);
}

.hamburger-menu:hover {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
}

.hamburger-menu:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: none;
}

.hamburger-menu.active span {
  background: var(--theme-eel-biological-accent);
}

.hamburger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--theme-eel-ink);
  z-index: var(--layer-mobile-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-duration-slow) var(--motion-ease-standard),
    visibility var(--motion-duration-slow) var(--motion-ease-standard);
  overflow-y: auto;
}

.mobile-nav-overlay.active,
.mobile-nav-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.mobile-nav-lock,
body.mobile-nav-lock {
  overflow: hidden;
}

.mobile-nav-content {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-lg);
  text-align: center;
  padding: var(--mb-space-xl) var(--mb-space-lg);
  width: 100%;
  max-width: var(--size-panel-sm);
  margin: auto;
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.mobile-nav-item {
  color: var(--theme-eel-text-muted-dark);
  text-decoration: none;
  font-family: var(--font-metadata);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
  padding: var(--mb-space-3-5) var(--mb-space-lg);
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-duration-standard) var(--motion-ease-standard),
    background var(--motion-duration-standard) var(--motion-ease-standard),
    border-color var(--motion-duration-standard) var(--motion-ease-standard),
    transform var(--motion-duration-standard) var(--motion-ease-standard);
  border: var(--border-control-transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-nav-item:hover {
  background: var(--theme-eel-archive-card-bg);
  transform: translateY(var(--motion-lift-sm));
  color: var(--theme-eel-biological-accent);
  border-color: var(--theme-eel-border-dark);
  text-decoration: none;
}

.mobile-nav-item:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .hamburger-menu,
  .hamburger-menu span,
  .mobile-nav-overlay,
  .mobile-nav-item {
    transition: none;
  }

  .mobile-nav-item:hover {
    transform: none;
  }
}

@media (max-width: 768px) {
  .main-nav {
    display: none !important;
  }

  .hamburger-menu {
    display: flex;
  }

  .site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .social-links {
    display: none;
  }

  .mobile-nav-content {
    gap: var(--mb-space-5);
    padding: var(--mb-space-xl) var(--mb-space-md);
  }

  .mobile-nav-item {
    font-size: var(--text-lg);
    padding: var(--mb-space-sm) var(--mb-space-5);
  }

  .fuel-project-btn-mobile {
    font-size: var(--text-md);
    padding: var(--mb-space-3-5) var(--mb-space-5);
  }
}

/* Additional mobile optimizations for very small screens */
@media (max-width: 320px) {
  .site-header .container {
    padding: var(--mb-space-xs) var(--mb-space-sm);
  }

  .logo {
    height: 35px;
    /* Slightly smaller logo on very small screens */
  }

  .mobile-nav-content {
    padding: var(--mb-space-lg) var(--mb-space-sm);
    gap: var(--mb-space-md);
  }

  .mobile-nav-item {
    font-size: var(--text-md);
    padding: var(--mb-space-sm) var(--mb-space-md);
  }

  .fuel-project-btn-mobile {
    font-size: var(--text-md);
    padding: var(--mb-space-sm) var(--mb-space-md);
  }
}

/* static/css/components/gallery-modal.css */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Modal for full-screen view - Improved */
.carousel-modal {
  display: none;
  position: fixed;
  z-index: var(--layer-lightbox);
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-surface);
  margin: 0;
  padding: 0;
  border: none;
}

html.page-scroll-lock,
body.page-scroll-lock {
  overflow: hidden;
}

.carousel-modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalFadeIn var(--motion-duration-standard) var(--motion-ease-out);
}

.carousel-modal .modal-content {
  position: relative;
  background: transparent;
  border-radius: 0;
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  margin: auto;
  padding: 0;
  overflow: visible;
  box-shadow: none;
  pointer-events: auto;
}

.carousel-modal .modal-content img {
  width: 100%;
  height: auto;
  max-height: calc(95vh - 5rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  cursor: default;
  display: block;
}

.carousel-modal .modal-meta {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--mb-space-md);
  margin-top: 0;
  color: var(--color-on-surface);
  font-size: var(--text-md);
  pointer-events: none;
}

.carousel-modal .modal-counter {
  background: var(--color-surface-container-high);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--mb-space-compact) var(--mb-space-3-5);
  font-weight: var(--font-weight-semibold);
}

.carousel-modal .modal-caption {
  margin-left: auto;
  max-width: var(--container-modal-caption);
  text-align: right;
  color: var(--color-on-surface);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.carousel-modal .modal-close {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  background: var(--color-surface-container-highest) !important;
  color: var(--color-on-surface) !important;
  border: none !important;
  width: var(--size-control-modal) !important;
  height: var(--size-control-modal) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--motion-duration-standard) var(--motion-ease-standard) !important;
  z-index: var(--layer-mobile-overlay) !important;
  box-shadow: var(--shadow-lg);
  border: var(--border-width-emphasis) var(--border-style-solid) var(--color-border-ghost) !important;
  backdrop-filter: var(--blur-sm) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.carousel-modal .modal-close:hover {
  background: var(--color-surface-container-high) !important;
  color: var(--theme-eel-biological-accent) !important;
  transform: scale(1.1) !important;
  box-shadow: var(--shadow-lg);
}

.carousel-modal .modal-close:focus-visible,
.carousel-modal .modal-nav:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.carousel-modal .modal-close:active {
  transform: scale(0.95) !important;
}

.carousel-modal .modal-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: var(--size-control-nav);
  height: var(--size-control-nav);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  cursor: pointer;
  font-size: var(--text-2xl);
  box-shadow: var(--shadow-lg);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard), background var(--motion-duration-fast) var(--motion-ease-standard);
  z-index: var(--layer-mobile-overlay);
}

.carousel-modal .modal-nav:hover {
  background: var(--color-surface-container-highest);
  transform: translateY(-50%) scale(1.05);
}

.carousel-modal .modal-nav-prev {
  left: 20px;
}

.carousel-modal .modal-nav-next {
  right: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-modal.active {
    animation: none;
  }

  .carousel-modal .modal-close,
  .carousel-modal .modal-nav {
    transition: none !important;
  }

  .carousel-modal .modal-close:hover,
  .carousel-modal .modal-close:active {
    transform: none !important;
  }

  .carousel-modal .modal-nav:hover {
    transform: translateY(-50%);
  }
}

.chr-media--gallery {
  display: grid;
  gap: var(--mb-space-3-5);
}

.chr-gallery-primary {
  position: relative;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
  line-height: 0;
  appearance: none;
  -webkit-appearance: none;
}

.chr-gallery-primary img {
  margin-bottom: 0;
}

.chr-gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--mb-space-2-5);
}

.chr-gallery-thumb {
  position: relative;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
}

.chr-gallery-thumb img {
  width: auto;
  height: var(--size-gallery-thumb);
  max-width: 100%;
  border-radius: var(--radius-md);
  display: block;
}

.chr-gallery-thumb-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 768px) {
  .carousel-modal .modal-nav {
    width: var(--size-control-touch);
    height: var(--size-control-touch);
    font-size: var(--text-xl);
  }

  .carousel-modal .modal-nav-prev {
    left: 12px;
  }

  .carousel-modal .modal-nav-next {
    right: 12px;
  }

  .carousel-modal .modal-meta {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .carousel-modal .modal-caption {
    max-width: var(--container-modal-caption-compact);
    text-align: right;
  }

  .chr-gallery-thumbs {
    gap: var(--mb-space-xs);
  }

  .chr-gallery-thumb img {
    height: var(--size-control-modal);
  }
}

/* static/css/pages/biome-detail.css */
/* Biome Detail Page Styling */
.biome-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mb-space-16);
  align-items: center;
}

.biome-hero-slideshow {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.biome-hero-image {
  width: 100%;
  max-width: var(--size-media-feature);
  height: var(--size-media-feature);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard), box-shadow var(--motion-duration-standard) var(--motion-ease-standard);
  display: block;
  object-fit: cover;
}

.biome-hero-image:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.biome-hero-info {
  color: var(--color-on-surface);
}

.species-realm-badge {
  display: inline-block;
  background: var(--gradient-primary);
  color: var(--color-on-accent);
  padding: var(--mb-space-xs) var(--mb-space-md);
  border-radius: var(--radius-pill);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  box-shadow: var(--shadow-md);
}

.biome-meta-section {
  background: rgba(255, 255, 255, 0.1);
  padding: var(--mb-space-lg);
  border-radius: var(--radius-md);
  backdrop-filter: var(--blur-md);
}

.biome-conditions {
  padding-top: var(--mb-space-2xl);
  padding-bottom: var(--mb-space-2xl);
}

.biome-conditions .eel-instrument-panel {
  max-width: var(--container-page);
  margin-inline: auto;
  gap: var(--mb-space-lg);
  padding: var(--mb-space-md);
  background: var(--theme-eel-mist-card);
  border-color: var(--theme-eel-border-mist);
  box-shadow: var(--shadow-sm);
}

.biome-conditions .eel-instrument-panel__title {
  margin-top: var(--mb-space-xs);
}

.biome-conditions__channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mb-space-sm);
}

.biome-conditions__channel {
  display: grid;
  gap: var(--mb-space-xs);
  padding: var(--mb-space-md);
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.biome-conditions__channel[data-weather-state="unavailable"] {
  background: var(--theme-eel-mist);
}

.biome-conditions__channel[data-weather-state="unavailable"] .eel-sensor-grid,
.biome-conditions__channel[data-weather-state="unavailable"] .eel-metadata-row {
  opacity: var(--opacity-faded);
}

.biome-conditions__channel .eel-sensor-readout[data-readout-state="unavailable"] {
  opacity: var(--opacity-muted);
}

.biome-conditions__channel .eel-sensor-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mb-space-xs);
}

.biome-conditions__channel .eel-sensor-readout {
  min-width: 0;
  padding: var(--mb-space-xs);
  background: var(--theme-eel-mist);
}

.biome-conditions__channel .eel-sensor-readout__reading {
  flex-wrap: wrap;
}

.biome-conditions__channel .eel-sensor-readout__value {
  font-size: var(--text-xl);
}

.biome-conditions__channel .eel-sensor-readout__detail {
  font-family: var(--font-telemetry);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.biome-conditions__channel .eel-sensor-readout[data-readout-state="unavailable"] .eel-sensor-readout__value {
  font-size: var(--text-lg);
}

.biome-conditions__channel .eel-sensor-readout[data-readout-state="unavailable"] .eel-sensor-readout__unit,
.biome-conditions__channel .eel-sensor-readout[data-readout-state="unavailable"] .eel-sensor-readout__detail {
  font-weight: var(--font-weight-regular);
}

.biome-conditions__channel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-space-sm);
}

.biome-conditions__channel-header .eel-status-chip {
  gap: var(--mb-space-xs);
  padding: var(--mb-space-2xs) var(--mb-space-sm);
  letter-spacing: var(--tracking-wide);
}

.biome-conditions__channel-title {
  margin: 0;
  color: var(--color-mist-ink);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

.biome-conditions__channel .eel-metadata-row {
  padding: 0;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

.biome-conditions__channel .eel-metadata-item {
  min-height: auto;
  font-size: var(--text-xs);
}

.biome-conditions__channel .eel-metadata-item__label {
  font-weight: var(--font-weight-medium);
}

.biome-conditions__channel .eel-metadata-item__value {
  color: var(--theme-eel-text-muted-mist);
}

@media (max-width: 900px) {
  .biome-conditions__channels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .biome-conditions .eel-instrument-panel {
    padding: var(--mb-space-sm);
  }

  .biome-conditions__channel {
    padding: var(--mb-space-sm);
  }

  .biome-conditions__channel .eel-sensor-grid--compact {
    grid-template-columns: 1fr;
  }
}

/* Biome Detail Container - Match Species Detail spacing */
.biome-detail-container {
  padding: 0;
  min-height: calc(100vh - 68px);
  background: var(--color-surface);
}

.biome-detail-container .container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--mb-space-xl);
}

.biome-detail-container .content-tabs {
  max-width: var(--container-page);
  margin: var(--mb-space-xl) auto;
  padding: var(--mb-space-sm) var(--mb-space-xl);
}

.biome-hero-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--mb-space-2xl);
  flex-wrap: wrap;
}

.biome-hero-copy {
  flex: 1 1 320px;
  min-width: 0;
  text-align: left;
}

.biome-detail-container .species-content-grid {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--mb-space-xl) var(--mb-space-16) var(--mb-space-xl);
}

@media (max-width: 968px) {
  .biome-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
    text-align: center;
  }

  .biome-hero-image {
    max-width: var(--size-media-md);
    height: var(--size-media-md);
    margin: 0 auto;
  }

  .biome-meta-section {
    text-align: left;
  }

  .biome-detail-container .container {
    padding: 0 var(--mb-space-lg);
  }

  .biome-detail-container .content-tabs {
    margin: var(--mb-space-xl) calc(var(--mb-space-md) * -1);
    padding: var(--mb-space-xs);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .biome-detail-container .species-content-grid {
    padding: 0 var(--mb-space-lg) var(--mb-space-12) var(--mb-space-lg);
  }
}

@media (max-width: 768px) {
  .biome-hero-panel {
    flex-wrap: wrap;
  }

}

@media (max-width: 480px) {
  .biome-detail-container .container {
    padding: 0 var(--mb-space-md);
  }

  .biome-detail-container .species-content-grid {
    padding: 0 var(--mb-space-md) var(--mb-space-xl) var(--mb-space-md);
  }
}

.biome-detail-header {
  display: grid;
  grid-template-columns: 450px 1fr;
  gap: var(--mb-space-16);
  align-items: start;
  max-width: var(--container-page);
  margin: 0 auto;
}

.biome-hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mb-space-xl);
}

.biome-hero-media {
  width: 100%;
  max-width: var(--size-media-hero);
  height: var(--size-media-lg);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-container-lowest);
  box-shadow: var(--shadow-lg);
  border: var(--border-subtle);
}

.biome-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.biome-hero-right {
  display: flex;
  align-items: center;
  min-height: var(--size-media-lg);
}

.biome-detail-header .species-detail-info {
  width: 100%;
}

.biome-detail-header .back-button-container {
  display: flex;
  justify-content: center;
  width: var(--size-media-hero);
  margin: 0;
}

.biome-detail-header .back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-sm);
  padding: var(--mb-space-sm) var(--mb-space-lg);
  background: var(--theme-eel-archive-card-bg);
  color: var(--color-on-surface);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-md);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-md);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  backdrop-filter: var(--blur-md);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.biome-detail-header .back-button:hover {
  background: var(--theme-eel-instrument-bg);
  transform: translateY(var(--motion-lift-sm));
  box-shadow: var(--shadow-lg);
  color: var(--theme-eel-biological-accent);
  text-decoration: none;
}

.biome-detail-header .back-button svg {
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard);
}

.biome-detail-header .back-button:hover svg {
  transform: translateX(var(--motion-shift-inline-sm));
}

.biome-detail-header .species-header-description {
  margin-top: var(--mb-space-xs);
  width: 100%;
}

.biome-detail-header .species-header-description p {
  color: var(--color-on-surface);
  line-height: var(--leading-loose);
  margin: 0;
}

/* Shared detail disclosure structure lives in components/detail-disclosure.css. */

.biome-detail-workspace .species-empty-state {
  padding-top: var(--mb-space-5);
}

.biome-detail-workspace .species-empty-state h3 {
  color: var(--color-on-surface);
  font-size: var(--text-md);
  margin: 0 0 var(--mb-space-compact);
}

.biome-detail-workspace .species-empty-state p {
  color: var(--color-on-surface-variant);
  margin: 0;
}

.biome-detail-workspace .chr-media img,
.biome-detail-workspace .chr-video iframe {
  border: 0;
  border-radius: var(--radius-md);
  display: block;
  width: 100%;
}

.biome-detail-workspace .chr-video--horizontal iframe {
  aspect-ratio: 16 / 9;
}

.biome-detail-workspace .chr-video--vertical {
  margin-inline: auto;
  max-width: var(--size-media-video-rail);
}

.biome-detail-workspace .chr-video--vertical iframe {
  aspect-ratio: 9 / 16;
}

.biome-species-grid {
  margin-top: var(--mb-space-xl);
}

.biome-species-grid .mb-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 340px));
  justify-content: start;
  padding: var(--mb-space-5) 0 0;
}

.biome-species-grid__header {
  margin-bottom: var(--mb-space-md);
}

.biome-kicker {
  color: var(--theme-eel-biological-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: var(--text-case-uppercase);
}

.biome-species-grid__header h2 {
  color: var(--color-on-surface);
  font-size: var(--text-2xl);
  margin: var(--mb-space-2xs) 0 var(--mb-space-compact);
}

.biome-species-group-title {
  color: var(--color-on-surface);
  font-size: var(--text-xl);
  margin: var(--mb-space-7) 0 var(--mb-space-md);
}

.biome-species-group-title--muted {
  color: var(--color-on-surface-variant);
}

@media (max-width: 900px) {
  .biome-detail-header {
    grid-template-columns: 1fr;
    gap: var(--mb-space-xl);
  }
}

@media (max-width: 768px) {
  .biome-hero-left {
    width: 100%;
  }

  .biome-hero-media {
    max-width: var(--size-media-md);
    height: var(--size-media-sm);
    margin: 0 auto;
  }

  .biome-hero-right {
    min-height: auto;
    justify-content: center;
    width: 100%;
  }

  .biome-detail-header .species-detail-info {
    text-align: center;
    margin: 0 auto;
    max-width: var(--container-detail-card);
  }

  .biome-detail-header .back-button-container {
    justify-content: center;
    width: 100%;
    max-width: var(--size-media-md);
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .biome-species-grid .mb-card-grid {
    grid-template-columns: 1fr;
    padding-top: var(--mb-space-md);
  }

}

@media (max-width: 480px) {
  .biome-hero-media {
    max-width: var(--size-media-compact);
    height: var(--size-media-compact);
  }

  .biome-detail-header .back-button-container {
    max-width: var(--size-media-compact);
  }

  .biome-detail-header .species-header-description {
    margin-top: var(--mb-space-5);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
}

/* static/css/components/cards.css */
/* ==========================================================================
   miniBIOTA Organism Card Design System - "Living Lab, Through Glass"
   ========================================================================== */

/* Card Grid Layout */
.mb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mb-space-lg);
  padding: var(--mb-space-lg);
}

.mb-card-grid--index {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@supports (content-visibility: auto) {
  .mb-card-grid--index .mb-card-wrapper {
    content-visibility: auto;
    contain-intrinsic-size: var(--size-panel-sm) var(--size-panel-sm);
  }
}

.mb-card-wrapper {
  display: flex;
  min-width: 0;
  position: relative;
}

.species-section-heading {
  margin: var(--mb-space-xl) 0 var(--mb-space-md);
  color: var(--color-on-surface);
  font-size: var(--text-2xl);
}

.species-section-heading--offset {
  margin-top: var(--mb-space-12);
}

@media (max-width: 480px) {
  .mb-card-grid {
    grid-template-columns: 1fr;
    gap: var(--mb-space-md);
    padding: var(--mb-space-md);
  }
}

/* Main Card Component */
.mb-card {
  --mb-card-realm-color: var(--mb-biome-default);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--mb-card-realm-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-on-surface);
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard), box-shadow var(--motion-duration-standard) var(--motion-ease-standard), border-color var(--motion-duration-standard) var(--motion-ease-standard), background var(--motion-duration-standard) var(--motion-ease-standard);
}

.mb-card--system {
  --mb-card-realm-color: var(--mb-biome-seagrass);
}

.mb-card--realm-accent {
  --mb-card-realm-color: var(--mb-realm-freshwater);
}

.mb-card--realm-accent[data-card-realm="saltwater"],
.mb-card--realm-accent[data-card-realm="marine-saltwater"] {
  --mb-card-realm-color: var(--mb-realm-saltwater);
}

.mb-card--realm-accent[data-card-realm="terrestrial"] {
  --mb-card-realm-color: var(--mb-realm-terrestrial);
}

.mb-card--realm-accent[data-card-realm="brackish"] {
  --mb-card-realm-color: var(--mb-realm-brackish);
}

.mb-card--realm-accent[data-card-realm="riparian-amphibious"] {
  --mb-card-realm-color: var(--mb-biome-seagrass);
}

.mb-card--glass {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.mb-card--mist {
  background: var(--color-mist-card);
  border-color: var(--color-border-mist);
  color: var(--color-mist-ink);
}

.mb-card--mist .mb-card__title {
  color: var(--color-mist-ink);
}

.mb-card--mist .mb-card__subtitle,
.mb-card--mist .mb-card__description {
  color: var(--color-mist-ink-muted);
}

.mb-card--editorial {
  background: var(--section-card-bg);
  color: var(--section-card-text);
}

.mb-card--interactive {
  cursor: pointer;
}

.mb-card:hover {
  will-change: transform;
  transform: translateY(var(--motion-lift-xl));
  box-shadow: var(--shadow-lg);
  background: var(--color-surface-container-highest);
  border-color: var(--color-border-hover);
  border-left-color: var(--mb-card-realm-color);
  text-decoration: none;
  color: var(--color-on-surface);
}

@media (hover: none) {
  .mb-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
}

/* Realm Accent Stripe */
.mb-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--mb-card-realm-color);
  border-radius: var(--mb-radius) 0 0 var(--mb-radius);
  z-index: var(--layer-content);
}

/* Card Media Section */
.mb-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-container-low);
}

.mb-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-duration-slow) var(--motion-ease-standard);
}

.mb-card:hover .mb-card__img {
  transform: scale(1.03);
}

.eel-image-expand {
  position: absolute;
  inset-block-start: var(--mb-space-sm);
  inset-inline-end: var(--mb-space-sm);
  z-index: var(--layer-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-control-compact);
  height: var(--size-control-compact);
  padding: 0;
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  color: var(--theme-eel-text-muted-dark);
  cursor: zoom-in;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.eel-image-expand:hover {
  background: var(--color-surface-container-highest);
  border-color: var(--theme-eel-border-mist);
  color: var(--theme-eel-biological-accent);
  transform: scale(1.04);
}

.eel-image-expand:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.eel-image-expand svg {
  width: var(--size-icon-md);
  height: var(--size-icon-md);
}

/* Placeholder for missing images */
.mb-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-surface-container-low);
  color: var(--color-on-surface-subtle);
}

.mb-card__placeholder svg {
  width: var(--size-icon-3xl);
  height: var(--size-icon-3xl);
  opacity: var(--opacity-quiet);
}

/* Card Body */
.mb-card__body {
  padding: var(--mb-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-xs);
  flex: 1;
}

/* Card Title (Common Name) */
.mb-card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-surface);
  line-height: var(--leading-tight);
  margin: 0;
}

/* Card Subtitle (Scientific Name) */
.mb-card__subtitle {
  font-size: var(--text-md);
  color: var(--color-mist-muted);
  font-style: italic;
  margin: 0;
  line-height: var(--leading-normal);
}

.mb-card__description {
  color: var(--color-mist-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.mb-card__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: var(--mb-space-3-5);
  padding: var(--mb-space-2xs) var(--mb-space-2-5);
  border-radius: var(--radius-pill);
  background: var(--color-surface-container-low);
  border: var(--border-glass);
  color: var(--color-state-standby);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: var(--text-case-uppercase);
}

.mb-card__badge[data-state="nominal"],
.mb-chip--state[data-state="nominal"] {
  border-color: var(--color-state-nominal);
  color: var(--color-state-nominal);
}

.mb-card__badge[data-state="standby"],
.mb-card__badge[data-state="in-progress"],
.mb-chip--state[data-state="standby"],
.mb-chip--state[data-state="in-progress"] {
  border-color: var(--color-state-standby);
  color: var(--color-state-standby);
}

.mb-card__badge[data-state="warning"],
.mb-chip--state[data-state="warning"] {
  border-color: var(--color-state-warning);
  color: var(--color-state-warning);
}

.mb-card__badge[data-state="critical"],
.mb-chip--state[data-state="critical"] {
  border-color: var(--color-state-critical);
  color: var(--color-state-critical);
}

.mb-card__badge[data-state="stale"],
.mb-chip--state[data-state="stale"] {
  border-color: var(--color-state-stale);
  color: var(--color-state-stale);
}

.mb-card__badge[data-state="info"],
.mb-chip--state[data-state="info"] {
  border-color: var(--color-state-info-status);
  color: var(--color-state-info-status);
}

.mb-inline-back {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: var(--mb-space-md);
  color: var(--theme-eel-biological-accent);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-decoration: none;
  text-transform: var(--text-case-uppercase);
}

.mb-inline-back:hover {
  color: var(--color-on-surface);
}

.mb-card__realm-wrap {
  margin-top: auto;
  padding-top: var(--mb-space-sm);
}

.mb-card__realm {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-xs);
  color: var(--theme-eel-text-muted-dark);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: var(--text-case-uppercase);
  line-height: var(--leading-tight);
}

.mb-card__realm::before {
  content: "";
  width: var(--size-control-compact);
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: var(--opacity-marker);
}

.mb-card__realm[data-realm="freshwater"] {
  --mb-card-realm-color: var(--mb-realm-freshwater);
}

.mb-card__realm[data-realm="saltwater"] {
  --mb-card-realm-color: var(--mb-realm-saltwater);
}

.mb-card__realm[data-realm="marine-saltwater"] {
  --mb-card-realm-color: var(--mb-realm-saltwater);
}

.mb-card__realm[data-realm="terrestrial"] {
  --mb-card-realm-color: var(--mb-realm-terrestrial);
}

.mb-card__realm[data-realm="brackish"] {
  --mb-card-realm-color: var(--mb-realm-brackish);
}

.mb-card__realm[data-realm="riparian-amphibious"] {
  --mb-card-realm-color: var(--mb-biome-seagrass);
}

/* Meta Row */
.mb-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  font-size: var(--text-sm);
  color: var(--color-on-surface-variant);
  margin-top: var(--mb-space-xs);
}

.mb-card__meta-item {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2xs);
}

.mb-card__meta-item svg {
  width: var(--size-indicator-lg);
  height: var(--size-indicator-lg);
  opacity: var(--opacity-muted);
}

.mb-card__meta:empty {
  display: none;
}

/* Chips Container */
.mb-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-compact);
  margin-top: auto;
  padding-top: var(--mb-space-sm);
}

.mb-card__chips:empty {
  display: none;
}

/* Chip Base Styles */
.mb-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--mb-space-2xs) var(--mb-space-2-5);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--mb-radius-chip);
  border: var(--border-width-subtle) var(--border-style-solid) var(--mb-chip-border);
  background: var(--mb-chip-bg);
  color: var(--color-on-surface-variant);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard), background var(--motion-duration-fast) var(--motion-ease-standard);
}

.mb-card:hover .mb-chip {
  border-color: var(--mb-chip-border-hover);
}

/* Biome Chip Variant */
.mb-chip--biome {
  border-color: var(--mb-biome-default);
  color: var(--mb-biome-default);
  background: var(--glass-fill-soft);
}

/* Realm Chip Variant */
.mb-chip--realm {
  --chip-realm-bg: var(--mb-realm-freshwater);
  background: var(--chip-realm-bg);
  color: var(--color-on-surface-inverse);
  border-color: transparent;
}

.mb-chip--realm[data-realm="freshwater"] {
  --chip-realm-bg: var(--mb-realm-freshwater);
}

.mb-chip--realm[data-realm="saltwater"] {
  --chip-realm-bg: var(--mb-realm-saltwater);
}

.mb-chip--realm[data-realm="marine-saltwater"] {
  --chip-realm-bg: var(--mb-realm-saltwater);
}

.mb-chip--realm[data-realm="terrestrial"] {
  --chip-realm-bg: var(--mb-realm-terrestrial);
}

.mb-chip--realm[data-realm="brackish"] {
  --chip-realm-bg: var(--mb-realm-brackish);
}

/* Status Chip Variant */
.mb-chip--status {
  font-size: var(--text-xs);
}

.mb-chip--status[data-status="thriving"] {
  border-color: var(--mb-status-thriving);
  color: var(--mb-status-thriving);
}

.mb-chip--status[data-status="established"] {
  border-color: var(--mb-status-established);
  color: var(--mb-status-established);
}

.mb-chip--status[data-status="vulnerable"] {
  border-color: var(--mb-status-vulnerable);
  color: var(--mb-status-vulnerable);
}

.mb-chip--status[data-status="extirpated"] {
  border-color: var(--mb-status-extirpated);
  color: var(--mb-status-extirpated);
}

.mb-chip--status[data-status="removed"] {
  border-color: var(--mb-status-removed);
  color: var(--mb-status-removed);
}

.mb-chip--status[data-status="uncertain"] {
  border-color: var(--mb-status-uncertain);
  color: var(--mb-status-uncertain);
}

/* Role Chip Variant */
.mb-chip--role {
  border-color: var(--color-border-default);
  color: var(--color-on-surface-variant);
}

/* Ecological Editorial Lab unified card prototypes. */
.mb-card--eel {
  --theme-eel-card-surface: var(--theme-eel-instrument-bg);
  --theme-eel-card-text: var(--color-on-surface);
  --theme-eel-card-muted: var(--theme-eel-text-muted-dark);
  --theme-eel-card-accent: var(--theme-eel-biological-accent);
  position: relative;
  overflow: hidden;
  background: var(--theme-eel-card-surface);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  color: var(--theme-eel-card-text);
  min-width: 0;
}

.mb-card--eel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--border-width-accent);
  background: var(--theme-eel-card-accent);
  z-index: var(--layer-content);
}

.mb-card--eel-mist {
  --theme-eel-card-surface: var(--theme-eel-mist-card);
  --theme-eel-card-text: var(--color-mist-ink);
  --theme-eel-card-muted: var(--theme-eel-text-muted-mist);
  background: var(--theme-eel-card-surface);
  border-color: var(--theme-eel-border-mist);
  color: var(--theme-eel-card-text);
}

.mb-card--engineering-instrument {
  --theme-eel-card-surface: var(--theme-eel-ink);
}

.mb-card--archive,
.mb-card--observation {
  --theme-eel-card-surface: var(--theme-eel-archive-card-bg);
}

.mb-card--biome-evidence {
  --theme-eel-card-accent: var(--theme-eel-earth-accent);
}

.mb-card--visual-unavailable {
  --theme-eel-card-accent: var(--color-state-stale);
}

.mb-card--eel:hover {
  background: var(--theme-eel-card-surface);
  border-color: var(--theme-eel-border-dark);
  box-shadow: var(--shadow-md);
  color: var(--theme-eel-card-text);
  transform: none;
}

.mb-card--eel-mist:hover {
  border-color: var(--theme-eel-border-mist);
}

.mb-card--eel .mb-card__media {
  background: var(--theme-eel-ink);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.mb-card--eel-mist .mb-card__media {
  background: var(--theme-eel-mist);
  border-bottom-color: var(--theme-eel-border-mist);
}

.mb-card--eel .mb-card__img {
  transform: none;
}

.mb-card--eel:hover .mb-card__img {
  transform: none;
}

.mb-card--eel .mb-card__body {
  gap: var(--mb-space-sm);
  padding: var(--mb-space-lg);
}

.mb-card--eel .mb-card__title {
  color: var(--theme-eel-card-text);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  overflow-wrap: anywhere;
}

.mb-card--eel .mb-card__subtitle,
.eel-card__eyebrow {
  color: var(--theme-eel-card-muted);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
  text-transform: var(--text-case-uppercase);
}

.mb-card--eel .mb-card__description {
  color: var(--theme-eel-card-muted);
  display: block;
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: 0;
  overflow: visible;
  overflow-wrap: anywhere;
}

.eel-card__header {
  display: grid;
  gap: var(--mb-space-xs);
}

.eel-card__status-row,
.eel-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-xs);
}

.eel-card__actions {
  margin-top: auto;
  padding-top: var(--mb-space-xs);
}

.eel-card__actions .btn {
  max-width: 100%;
  white-space: normal;
}

.mb-card--eel .eel-metadata-row {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mb-card--eel .eel-metadata-item {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}

.mb-card--eel .eel-metadata-item__value {
  overflow-wrap: anywhere;
}

.eel-card__media-chip {
  position: absolute;
  top: var(--mb-space-sm);
  right: var(--mb-space-sm);
  z-index: var(--layer-content);
}

.mb-card--eel .eel-card__media-chip .eel-status-chip {
  background: var(--theme-eel-instrument-bg);
  border-color: var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.eel-card__visual-state {
  display: grid;
  place-items: center;
  gap: var(--mb-space-xs);
  min-height: 100%;
  padding: var(--mb-space-lg);
  color: var(--theme-eel-card-muted);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-align: center;
  text-transform: var(--text-case-uppercase);
}

.eel-card__visual-mark {
  display: inline-grid;
  place-items: center;
  width: var(--size-icon-3xl);
  height: var(--size-icon-3xl);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  color: var(--theme-eel-card-muted);
  font-size: var(--text-xl);
}

.mb-card--eel-mist .eel-card__visual-mark {
  border-color: var(--theme-eel-border-mist);
}

.eel-card__metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-control-inline-md)), 1fr));
  gap: var(--mb-space-xs);
}

.eel-card__metric {
  display: grid;
  gap: var(--mb-space-2xs);
  padding: var(--mb-space-sm);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.mb-card--eel-mist .eel-card__metric {
  background: var(--theme-eel-mist);
  border-color: var(--theme-eel-border-mist);
}

.eel-card__metric-label {
  color: var(--theme-eel-card-muted);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.eel-card__metric-value {
  color: var(--theme-eel-card-text);
  font-family: var(--font-telemetry);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

.ui-kitchen-sink__eel-card-grid {
  display: grid;
  gap: var(--mb-space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-panel-sm)), 1fr));
  min-width: 0;
}

.ui-kitchen-sink__section[aria-labelledby="ui-eel-card-system"] h2 {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .ui-kitchen-sink__eel-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mb-card--eel .eel-metadata-row {
    align-items: stretch;
  }

  .mb-card--eel .eel-metadata-item {
    flex: 1 1 100%;
  }

  .mb-card--eel .eel-card__actions .btn {
    width: 100%;
  }
}

.ui-kitchen-sink {
  background:
    radial-gradient(circle at 18% 12%, var(--atmosphere-rain) 0%, transparent 44%),
    var(--color-surface);
  padding: var(--mb-space-2xl) 0;
}

.ui-kitchen-sink__header {
  max-width: var(--container-readable);
  margin-bottom: var(--mb-space-2xl);
}

.ui-kitchen-sink__header h1 {
  color: var(--color-on-surface);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--mb-space-md);
}

.ui-kitchen-sink__header p:not(.ui-kitchen-sink__eyebrow) {
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: 0;
}

.ui-kitchen-sink__section {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  border: var(--border-glass-toplight);
  border-radius: var(--radius-md);
  margin-bottom: var(--mb-space-lg);
  padding: var(--mb-space-lg);
}

.ui-kitchen-sink__section-header {
  margin-bottom: var(--mb-space-md);
}

.ui-kitchen-sink__section h2 {
  color: var(--color-on-surface);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: 0;
}

.ui-kitchen-sink__eyebrow {
  color: var(--color-state-info);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  margin: 0 0 var(--mb-space-xs);
  text-transform: var(--text-case-uppercase);
}

.ui-kitchen-sink__swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  margin-top: var(--mb-space-sm);
}

.ui-kitchen-sink__eel-swatch-grid,
.ui-kitchen-sink__type-grid {
  display: grid;
  gap: var(--mb-space-md);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ui-kitchen-sink__type-grid {
  margin-top: var(--mb-space-lg);
}

.ui-kitchen-sink__eel-swatch,
.ui-kitchen-sink__type-sample {
  display: grid;
  gap: var(--mb-space-xs);
  min-height: var(--size-control-touch);
  padding: var(--mb-space-md);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-md);
}

.ui-kitchen-sink__eel-swatch span,
.ui-kitchen-sink__type-sample p {
  margin: 0;
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.ui-kitchen-sink__eel-swatch code {
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.ui-kitchen-sink__eel-swatch--ink {
  background: var(--theme-eel-ink);
  color: var(--color-on-surface);
}

.ui-kitchen-sink__eel-swatch--mist {
  background: var(--theme-eel-mist);
  border-color: var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.ui-kitchen-sink__eel-swatch--mist-card {
  background: var(--theme-eel-mist-card);
  border-color: var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.ui-kitchen-sink__eel-swatch--instrument {
  background: var(--theme-eel-instrument-bg);
  color: var(--color-on-surface);
}

.ui-kitchen-sink__eel-swatch--archive {
  background: var(--theme-eel-archive-card-bg);
  color: var(--color-on-surface);
}

.ui-kitchen-sink__eel-swatch--bio {
  background: var(--theme-eel-biological-accent);
  color: var(--color-on-accent);
}

.ui-kitchen-sink__eel-swatch--earth {
  background: var(--theme-eel-earth-accent);
  color: var(--color-on-accent);
}

.ui-kitchen-sink__eel-swatch--border-dark {
  background: var(--theme-eel-ink);
  border-color: var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.ui-kitchen-sink__eel-swatch--border-mist {
  background: var(--theme-eel-mist-card);
  border-color: var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.ui-kitchen-sink__type-sample {
  background: var(--glass-fill);
  color: var(--color-on-surface);
}

.ui-kitchen-sink__type-sample h3,
.ui-kitchen-sink__type-sample span {
  margin: 0;
}

.ui-kitchen-sink__type-sample--editorial h3 {
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.ui-kitchen-sink__type-sample--body span {
  color: var(--color-on-surface-variant);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.ui-kitchen-sink__type-sample--metadata span {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}

.ui-kitchen-sink__type-sample--telemetry span {
  font-family: var(--font-telemetry);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}

.ui-kitchen-sink__card-demo {
  max-width: var(--container-xs);
}

.ui-kitchen-sink__section-stack,
.ui-kitchen-sink__button-grid,
.ui-kitchen-sink__card-row {
  display: grid;
  gap: var(--mb-space-md);
}

.ui-kitchen-sink__section-stack {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.ui-kitchen-sink__button-grid,
.ui-kitchen-sink__card-row {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ui-kitchen-sink__pattern-band,
.ui-kitchen-sink__button-surface {
  border: var(--border-glass-toplight);
  border-radius: var(--radius-md);
  padding: var(--mb-space-lg);
}

.ui-kitchen-sink__pattern-band h3,
.ui-kitchen-sink__form-card h3 {
  color: var(--section-text);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin: 0 0 var(--mb-space-xs);
}

.ui-kitchen-sink__pattern-band p,
.ui-kitchen-sink__form-card p {
  color: var(--section-muted);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: 0;
}

.ui-kitchen-sink__button-surface {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
}

.ui-kitchen-sink__feature-preview {
  border: var(--border-glass-toplight);
  border-radius: var(--radius-md);
  padding: var(--mb-space-xl);
}

.ui-kitchen-sink__feature-preview .feature-description {
  margin-bottom: 0;
}

.ui-kitchen-sink__form-card {
  max-width: var(--container-sm);
  padding: var(--mb-space-lg);
  background: var(--section-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-radius: var(--radius-md);
  color: var(--section-card-text);
  box-shadow: var(--shadow-md);
}

.ui-kitchen-sink__inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  margin-top: var(--mb-space-md);
}

.ui-kitchen-sink__input {
  min-height: var(--size-control-min);
  min-width: var(--size-control-inline-lg);
  padding: var(--mb-space-sm) var(--mb-space-md);
  background: var(--color-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--color-border-mist);
  border-radius: var(--radius-sm);
  color: var(--color-mist-ink);
  font-size: var(--text-md);
}

/* Utility: Removed/Extirpated Species Grid Modifier */
.mb-card-grid--faded {
  opacity: var(--opacity-faded);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .mb-card__body {
    padding: var(--mb-space-sm);
  }

  .mb-card__title {
    font-size: var(--text-lg);
  }

  .mb-card__subtitle {
    font-size: var(--text-sm);
  }

  .mb-card__realm {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
  }

  .mb-chip {
    font-size: var(--text-xs);
    padding: var(--mb-space-3xs) var(--mb-space-xs);
  }
}

/* static/css/components/status-metadata.css */
/* Ecological Editorial Lab status chips and dense metadata rows. */
.eel-status-chip {
  --color-eel-status-accent: var(--color-state-stale);
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-xs);
  width: fit-content;
  padding: var(--mb-space-2xs) var(--mb-space-2-5);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-decoration: none;
  text-transform: var(--text-case-uppercase);
  vertical-align: middle;
}

.eel-status-chip--compact {
  gap: var(--mb-space-compact);
  padding: var(--mb-space-3xs) var(--mb-space-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
}

.eel-status-chip--mist {
  background: var(--theme-eel-mist-card);
  border-color: var(--theme-eel-border-mist);
  color: var(--theme-eel-text-muted-mist);
}

.eel-status-chip__dot {
  flex: 0 0 auto;
  width: var(--size-indicator-xs);
  height: var(--size-indicator-xs);
  background: var(--color-eel-status-accent);
  border-radius: var(--radius-pill);
}

.eel-status-chip[data-status="fresh"] {
  --color-eel-status-accent: var(--theme-eel-biological-accent);
}

.eel-status-chip[data-status="nominal"] {
  --color-eel-status-accent: var(--color-state-nominal);
}

.eel-status-chip[data-status="observed"] {
  --color-eel-status-accent: var(--theme-eel-earth-accent);
}

.eel-status-chip[data-status="warning"] {
  --color-eel-status-accent: var(--color-state-warning);
}

.eel-status-chip[data-status="critical"] {
  --color-eel-status-accent: var(--color-state-critical);
}

.eel-status-chip[data-status="stale"] {
  --color-eel-status-accent: var(--color-state-stale);
}

.eel-status-chip[data-status="uncertain"] {
  --color-eel-status-accent: var(--mb-status-uncertain);
}

.eel-status-chip[data-status="unavailable"] {
  --color-eel-status-accent: var(--color-on-surface-subtle);
}

a.eel-status-chip:hover {
  border-color: var(--color-border-hover);
  color: var(--color-on-surface);
}

a.eel-status-chip--mist:hover {
  border-color: var(--color-border-mist);
  color: var(--color-mist-ink);
}

a.eel-status-chip:focus-visible,
a.eel-metadata-item:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.eel-metadata-row {
  --color-eel-metadata-text: var(--theme-eel-text-muted-dark);
  --color-eel-metadata-strong: var(--color-on-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-xs) var(--mb-space-sm);
  padding: var(--mb-space-sm);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-md);
  color: var(--color-eel-metadata-text);
}

.eel-metadata-row--mist {
  --color-eel-metadata-text: var(--theme-eel-text-muted-mist);
  --color-eel-metadata-strong: var(--color-mist-ink);
  background: var(--theme-eel-mist-card);
  border-color: var(--theme-eel-border-mist);
}

.eel-metadata-row--compact {
  gap: var(--mb-space-compact) var(--mb-space-xs);
  padding: var(--mb-space-xs);
}

.eel-metadata-item {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-compact);
  min-height: var(--size-control-compact);
  color: inherit;
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-tight);
  text-decoration: none;
}

.eel-metadata-row--compact .eel-metadata-item {
  min-height: auto;
}

.eel-metadata-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-icon-lg);
  color: var(--color-eel-metadata-strong);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.eel-metadata-item__label {
  color: var(--color-eel-metadata-text);
  font-weight: var(--font-weight-semibold);
  text-transform: var(--text-case-uppercase);
}

.eel-metadata-item__value {
  color: var(--color-eel-metadata-strong);
}

a.eel-metadata-item:hover {
  color: var(--color-eel-metadata-strong);
}

.eel-metadata-row .eel-status-chip {
  margin: 0;
}

/* static/css/components/instrument-panels.css */
/* Ecological Editorial Lab scientific instrument and live data panels. */
.eel-instrument-panel {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-sm);
  padding: var(--mb-space-lg);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  color: var(--color-on-surface);
}

.eel-instrument-panel--mist {
  background: var(--theme-eel-mist-card);
  border-color: var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.eel-instrument-panel--compact {
  gap: var(--mb-space-xs);
  padding: var(--mb-space-md);
}

.eel-instrument-panel[data-instrument-state="stale"],
.eel-instrument-panel[data-instrument-state="unavailable"],
.eel-instrument-panel[data-instrument-state="unknown"],
.eel-instrument-panel[data-instrument-state="info"],
.eel-instrument-panel[data-instrument-state="standby"] {
  box-shadow: var(--shadow-sm);
}

.eel-instrument-panel[data-instrument-state="unavailable"],
.eel-instrument-panel[data-instrument-state="unknown"],
.eel-instrument-panel[data-instrument-state="standby"] {
  opacity: var(--opacity-faded);
}

.eel-instrument-panel__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--mb-space-md);
}

.eel-instrument-panel__eyebrow,
.eel-sensor-readout__label,
.eel-sensor-row__label {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.eel-instrument-panel--mist .eel-instrument-panel__eyebrow,
.eel-instrument-panel--mist .eel-sensor-readout__label,
.eel-instrument-panel--mist .eel-sensor-row__label {
  color: var(--theme-eel-text-muted-mist);
}

.eel-instrument-panel__title {
  margin: var(--mb-space-2xs) 0 0;
  color: inherit;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

.eel-instrument-panel__body {
  display: grid;
  gap: var(--mb-space-sm);
}

.eel-instrument-panel__headline {
  margin: 0;
  color: inherit;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

.eel-instrument-panel__detail {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.eel-instrument-panel--mist .eel-instrument-panel__detail {
  color: var(--theme-eel-text-muted-mist);
}

.eel-sensor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--mb-space-sm);
}

.eel-sensor-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--mb-space-xs);
}

.eel-sensor-readout {
  display: grid;
  gap: var(--mb-space-2xs);
  min-height: var(--size-control-touch);
  padding: var(--mb-space-sm);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.eel-instrument-panel--mist .eel-sensor-readout {
  background: var(--theme-eel-mist);
  border-color: var(--theme-eel-border-mist);
}

.eel-sensor-readout[data-readout-state="unavailable"],
.eel-sensor-readout[data-readout-state="stale"] {
  opacity: var(--opacity-faded);
}

.eel-sensor-readout__reading {
  display: flex;
  align-items: baseline;
  gap: var(--mb-space-compact);
  color: var(--color-on-surface);
  font-family: var(--font-telemetry);
  line-height: var(--leading-tight);
}

.eel-instrument-panel--mist .eel-sensor-readout__reading {
  color: var(--color-mist-ink);
}

.eel-sensor-readout__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
}

.eel-sensor-readout__unit {
  color: var(--theme-eel-text-muted-dark);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.eel-instrument-panel--mist .eel-sensor-readout__unit {
  color: var(--theme-eel-text-muted-mist);
}

.eel-sensor-readout__detail {
  color: var(--theme-eel-text-muted-dark);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.eel-instrument-panel--mist .eel-sensor-readout__detail {
  color: var(--theme-eel-text-muted-mist);
}

.eel-sensor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-xs) var(--mb-space-sm);
  padding: var(--mb-space-sm);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.eel-sensor-row__value {
  color: var(--color-on-surface);
  font-family: var(--font-telemetry);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

/* static/css/components/form-cta.css */
/* Ecological Editorial Lab forms and CTA blocks. */
.eel-form-card,
.eel-cta-strip {
  display: grid;
  gap: var(--mb-space-md);
  min-width: 0;
  max-width: 100%;
  padding: var(--mb-space-xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.eel-form-card--dark,
.eel-cta-strip--dark {
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.eel-form-card--mist,
.eel-cta-strip--mist {
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.eel-form-card__header {
  display: grid;
  gap: var(--mb-space-xs);
}

.eel-form-card__eyebrow,
.eel-field__label {
  margin: 0;
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.eel-form-card__eyebrow,
.eel-form-card--dark .eel-field__label,
.eel-cta-strip--dark .eel-cta-strip__eyebrow {
  color: var(--theme-eel-text-muted-dark);
}

.eel-form-card--mist .eel-form-card__eyebrow,
.eel-form-card--mist .eel-field__label,
.eel-cta-strip--mist .eel-cta-strip__eyebrow {
  color: var(--theme-eel-text-muted-mist);
}

.eel-form-card__title,
.eel-cta-strip__title {
  margin: 0;
  color: inherit;
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.eel-form-card__description,
.eel-cta-strip__copy {
  margin: 0;
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.eel-form-card--dark .eel-form-card__description,
.eel-cta-strip--dark .eel-cta-strip__copy {
  color: var(--theme-eel-text-muted-dark);
}

.eel-form-card--mist .eel-form-card__description,
.eel-cta-strip--mist .eel-cta-strip__copy {
  color: var(--theme-eel-text-muted-mist);
}

.eel-form-card__body,
.eel-field,
.eel-cta-strip__content {
  display: grid;
  gap: var(--mb-space-sm);
}

.eel-field-row {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
}

.eel-field-row--compact {
  align-items: center;
  gap: var(--mb-space-xs);
}

.eel-field {
  flex: 1 1 var(--size-control-inline-lg);
  min-width: 0;
}

.eel-input,
.eel-select,
.eel-textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--size-control-min);
  padding: var(--mb-space-sm) var(--mb-space-md);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.eel-form-card--dark .eel-input,
.eel-form-card--dark .eel-select,
.eel-form-card--dark .eel-textarea {
  background: var(--theme-eel-ink);
  border-color: var(--theme-eel-border-dark);
}

.eel-form-card--mist .eel-input,
.eel-form-card--mist .eel-select,
.eel-form-card--mist .eel-textarea,
.eel-input--mist {
  background: var(--theme-eel-mist);
  border-color: var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.eel-input::placeholder,
.eel-textarea::placeholder {
  color: var(--color-on-surface-subtle);
}

.eel-form-card--mist .eel-input::placeholder,
.eel-form-card--mist .eel-textarea::placeholder,
.eel-input--mist::placeholder {
  color: var(--theme-eel-text-muted-mist);
}

.eel-input:focus,
.eel-select:focus,
.eel-textarea:focus {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-color: var(--color-border-hover);
  box-shadow: var(--focus-ring-shadow);
}

.eel-choice-list {
  display: grid;
  gap: var(--mb-space-xs);
  margin: 0;
}

.eel-choice {
  display: flex;
  align-items: center;
  gap: var(--mb-space-sm);
  margin: 0;
  padding: var(--mb-space-sm);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard), transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.eel-form-card--dark .eel-choice {
  background: var(--theme-eel-archive-card-bg);
}

.eel-form-card--mist .eel-choice {
  background: var(--theme-eel-mist);
  border-color: var(--theme-eel-border-mist);
}

.eel-choice:hover {
  border-color: var(--color-border-hover);
  transform: translateY(var(--motion-lift-xs));
}

.eel-choice:focus-within {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.eel-choice input[type="radio"],
.eel-choice input[type="checkbox"] {
  flex: 0 0 auto;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  margin: 0;
  accent-color: var(--theme-eel-biological-accent);
}

.eel-choice__label {
  color: inherit;
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.eel-button-row,
.eel-cta-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  min-width: 0;
}

.eel-button-row .btn,
.eel-field-row .btn,
.eel-cta-strip__actions .btn {
  max-width: 100%;
  white-space: normal;
}

.btn--eel-primary {
  background: var(--theme-eel-biological-accent);
  border: var(--border-control-transparent);
  color: var(--color-on-accent);
}

.btn--eel-primary:hover {
  background: var(--theme-eel-biological-accent);
  box-shadow: var(--shadow-md);
  color: var(--color-on-accent);
  transform: translateY(var(--motion-lift-sm));
}

.btn--eel-secondary {
  background: transparent;
  border: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-border-dark);
  color: var(--color-on-surface);
}

.eel-form-card--mist .btn--eel-secondary,
.eel-cta-strip--mist .btn--eel-secondary {
  border-color: var(--theme-eel-border-mist);
  color: var(--color-mist-ink);
}

.btn--eel-secondary:hover {
  background: var(--theme-eel-archive-card-bg);
  color: var(--color-on-surface);
  transform: translateY(var(--motion-lift-sm));
}

.eel-form-card--mist .btn--eel-secondary:hover,
.eel-cta-strip--mist .btn--eel-secondary:hover {
  background: var(--theme-eel-mist);
  color: var(--color-mist-ink);
}

.btn--eel-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--theme-eel-text-muted-dark);
}

.eel-form-card--mist .btn--eel-quiet,
.eel-cta-strip--mist .btn--eel-quiet {
  color: var(--theme-eel-text-muted-mist);
}

.btn--eel-quiet:hover {
  background: var(--theme-eel-archive-card-bg);
  color: var(--color-on-surface);
}

.eel-form-card--mist .btn--eel-quiet:hover,
.eel-cta-strip--mist .btn--eel-quiet:hover {
  background: var(--theme-eel-mist);
  color: var(--color-mist-ink);
}

.btn--eel-primary:disabled,
.btn--eel-secondary:disabled,
.btn--eel-quiet:disabled,
.btn--eel-primary[aria-disabled="true"],
.btn--eel-secondary[aria-disabled="true"],
.btn--eel-quiet[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  pointer-events: none;
  transform: none;
}

.eel-form-message {
  display: grid;
  gap: var(--mb-space-2xs);
  padding: var(--mb-space-sm);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  background: var(--theme-eel-archive-card-bg);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.eel-form-message--mist {
  background: var(--theme-eel-mist);
  border-color: var(--theme-eel-border-mist);
  color: var(--theme-eel-text-muted-mist);
}

.eel-form-message__title {
  color: var(--color-on-surface);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.eel-form-message--mist .eel-form-message__title {
  color: var(--color-mist-ink);
}

.eel-form-message--success .eel-form-message__title {
  color: var(--theme-eel-biological-accent);
}

.eel-form-message--error .eel-form-message__title {
  color: var(--color-state-critical);
}

.eel-form-message--info .eel-form-message__title {
  color: var(--theme-eel-earth-accent);
}

.eel-form-message p {
  margin: 0;
}

.eel-cta-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-panel-xs)), 1fr));
  align-items: center;
}

.eel-cta-strip__content {
  min-width: 0;
}

.ui-kitchen-sink__form-cta-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-panel-sm)), 1fr));
  align-items: start;
}

.ui-kitchen-sink__form-cta-grid > * {
  min-width: 0;
}

@media (max-width: 768px) {
  .eel-form-card,
  .eel-cta-strip {
    padding: var(--mb-space-lg);
  }

  .eel-field-row,
  .eel-cta-strip {
    grid-template-columns: 1fr;
  }

  .ui-kitchen-sink__form-cta-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .eel-field-row {
    flex-direction: column;
    align-items: stretch;
  }

  .eel-button-row,
  .eel-cta-strip__actions {
    flex-direction: column;
  }

  .eel-button-row .btn,
  .eel-cta-strip__actions .btn {
    width: 100%;
  }
}

/* static/css/components/eel-hero.css */
/* Ecological Editorial Lab page hero prototypes and future shared hero roles. */
.eel-page-hero {
  --theme-eel-hero-surface: var(--theme-eel-ink);
  --theme-eel-hero-text: var(--color-on-surface);
  --theme-eel-hero-muted: var(--theme-eel-text-muted-dark);
  --theme-eel-hero-border: var(--theme-eel-border-dark);
  --theme-eel-hero-accent: var(--theme-eel-biological-accent);
  position: relative;
  display: grid;
  gap: var(--mb-space-xl);
  min-width: 0;
  overflow: hidden;
  background: var(--theme-eel-hero-surface);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-hero-border);
  border-radius: var(--radius-sm);
  color: var(--theme-eel-hero-text);
}

.eel-page-hero__media {
  position: relative;
  min-height: var(--size-media-card);
  margin: 0;
  overflow: hidden;
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-hero-border);
}

.eel-page-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center center;
}

.eel-page-hero__media-frame {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  max-height: inherit;
  overflow: hidden;
}

.eel-page-hero__media-frame > :where(img, picture, video) {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center center;
}

.eel-image-modal-frame {
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: zoom-in;
}

.eel-image-modal-frame:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.eel-image-modal-frame .eel-image-expand {
  pointer-events: none;
}

.eel-page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--theme-eel-ink) 0%, transparent 72%);
  opacity: var(--opacity-high);
  pointer-events: none;
}

.eel-page-hero__content {
  position: relative;
  z-index: var(--layer-content);
  display: grid;
  align-content: center;
  gap: var(--mb-space-md);
  min-width: 0;
}

.eel-page-hero__kicker,
.eel-page-hero__classification {
  margin: 0;
  color: var(--theme-eel-hero-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
}

.eel-page-hero__scientific-kicker {
  margin: 0;
  color: var(--theme-eel-hero-accent);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.eel-page-hero__scientific-kicker em {
  font-style: inherit;
}

.eel-page-hero__title {
  max-width: var(--container-readable);
  margin: 0;
  color: var(--theme-eel-hero-text);
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.eel-page-hero__subtitle,
.eel-page-hero__lede {
  max-width: var(--container-readable);
  margin: 0;
  color: var(--theme-eel-hero-muted);
  font-family: var(--font-eel-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.eel-page-hero__subtitle {
  font-style: italic;
}

.eel-page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  align-items: center;
}

.eel-page-hero__actions .btn {
  max-width: 100%;
  white-space: normal;
}

.eel-page-hero .eel-metadata-row {
  margin-bottom: 0;
}

.eel-page-hero__record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  align-items: center;
}

.eel-page-hero__record-meta .eel-metadata-row {
  flex: 1 1 var(--container-xs);
}

.eel-page-hero--immersive {
  min-height: var(--size-media-lg);
}

.eel-page-hero--immersive .eel-page-hero__media {
  position: absolute;
  inset: 0;
  min-height: 100%;
  border: 0;
}

.eel-page-hero--immersive .eel-page-hero__content {
  max-width: var(--container-prose);
  min-height: var(--size-media-lg);
  padding: var(--mb-space-16) var(--mb-space-xl);
}

.eel-page-hero--split,
.eel-page-hero--detail {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  padding: var(--mb-space-xl);
}

.eel-page-hero--split .eel-page-hero__media,
.eel-page-hero--detail .eel-page-hero__media {
  aspect-ratio: 4 / 3;
  align-self: center;
  min-height: var(--size-media-sm);
  max-height: var(--size-media-lg);
  border-radius: var(--radius-sm);
}

.eel-page-hero--split .eel-page-hero__content,
.eel-page-hero--detail .eel-page-hero__content {
  padding: var(--mb-space-md);
}

.eel-page-hero--mist {
  --theme-eel-hero-surface: var(--theme-eel-mist-card);
  --theme-eel-hero-text: var(--color-mist-ink);
  --theme-eel-hero-muted: var(--theme-eel-text-muted-mist);
  --theme-eel-hero-border: var(--theme-eel-border-mist);
  --theme-eel-hero-accent: var(--theme-eel-earth-accent);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--mb-space-xl);
}

.eel-page-hero--mist .eel-page-hero__content {
  padding: var(--mb-space-md);
}

.eel-page-hero__specimen-mark {
  display: inline-grid;
  place-items: center;
  width: var(--size-icon-3xl);
  height: var(--size-icon-3xl);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-pill);
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.eel-page-hero--detail {
  --theme-eel-hero-surface: var(--theme-eel-instrument-bg);
}

.eel-page-hero--detail .eel-page-hero__content {
  order: 2;
}

.eel-page-hero--detail .eel-page-hero__media {
  order: 1;
}

.eel-page-hero--detail .eel-page-hero__actions {
  justify-content: center;
}

.eel-page-hero__visual-state {
  display: grid;
  place-items: center;
  gap: var(--mb-space-xs);
  min-height: inherit;
  padding: var(--mb-space-xl);
  color: var(--theme-eel-hero-muted);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  text-align: center;
  text-transform: var(--text-case-uppercase);
}

.eel-page-hero__visual-mark {
  display: inline-grid;
  place-items: center;
  width: var(--size-icon-3xl);
  height: var(--size-icon-3xl);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-hero-border);
  border-radius: var(--radius-pill);
  color: var(--theme-eel-hero-accent);
  font-size: var(--text-2xl);
}

.eel-page-hero--stacked {
  max-width: var(--container-readable);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--mb-space-md);
}

.eel-page-hero--stacked .eel-page-hero__media {
  min-height: var(--size-media-card);
  border-radius: var(--radius-sm);
}

.eel-page-hero--stacked .eel-page-hero__content {
  padding: var(--mb-space-md);
}

.eel-page-hero--stacked .eel-page-hero__title {
  font-size: var(--text-2xl);
}

.ui-kitchen-sink__eel-hero-stack {
  display: grid;
  gap: var(--mb-space-xl);
  min-width: 0;
}

@media (max-width: 768px) {
  .eel-page-hero--immersive .eel-page-hero__content {
    min-height: var(--size-media-card);
    padding: var(--mb-space-xl);
  }

  .eel-page-hero--split,
  .eel-page-hero--detail,
  .eel-page-hero--mist {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--mb-space-md);
  }

  .eel-page-hero--detail .eel-page-hero__content,
  .eel-page-hero--detail .eel-page-hero__media {
    order: initial;
  }

  .eel-page-hero--detail .eel-page-hero__media {
    justify-self: center;
    width: min(100%, var(--size-media-md));
    min-height: var(--size-media-compact);
    max-height: var(--size-media-sm);
  }

  .eel-page-hero__title {
    font-size: var(--text-2xl);
  }

  .eel-page-hero__lede,
  .eel-page-hero__subtitle {
    font-size: var(--text-md);
  }
}

/* static/css/components/eel-states.css */
/* Ecological Editorial Lab empty, loading, error, and unavailable states. */
.eel-state {
  --theme-eel-state-surface: var(--theme-eel-archive-card-bg);
  --theme-eel-state-text: var(--color-on-surface);
  --theme-eel-state-muted: var(--theme-eel-text-muted-dark);
  --theme-eel-state-border: var(--theme-eel-border-dark);
  --theme-eel-state-accent: var(--theme-eel-biological-accent);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--mb-space-md);
  align-items: start;
  min-width: 0;
  padding: var(--mb-space-lg);
  background: var(--theme-eel-state-surface);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-state-border);
  border-radius: var(--radius-sm);
  color: var(--theme-eel-state-text);
}

.eel-state--mist {
  --theme-eel-state-surface: var(--theme-eel-mist-card);
  --theme-eel-state-text: var(--color-mist-ink);
  --theme-eel-state-muted: var(--theme-eel-text-muted-mist);
  --theme-eel-state-border: var(--theme-eel-border-mist);
  --theme-eel-state-accent: var(--theme-eel-earth-accent);
}

.eel-state--error,
.eel-state--unable-to-load,
.eel-state--critical {
  --theme-eel-state-accent: var(--theme-eel-earth-accent);
}

.eel-state--loading,
.eel-state--syncing {
  --theme-eel-state-accent: var(--theme-eel-biological-accent);
}

.eel-state--compact {
  gap: var(--mb-space-sm);
  padding: var(--mb-space-md);
}

.eel-state--visual {
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  min-height: inherit;
  height: 100%;
  padding: var(--mb-space-lg);
  background: transparent;
  border: 0;
  text-align: center;
}

.eel-state__mark {
  display: inline-grid;
  place-items: center;
  width: var(--size-icon-3xl);
  height: var(--size-icon-3xl);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-state-border);
  border-radius: var(--radius-pill);
  color: var(--theme-eel-state-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

.eel-state--compact .eel-state__mark {
  width: var(--size-icon-2xl);
  height: var(--size-icon-2xl);
  font-size: var(--text-md);
}

.eel-state__content {
  display: grid;
  gap: var(--mb-space-sm);
  min-width: 0;
}

.eel-state__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-xs);
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.eel-state--visual .eel-state__header {
  justify-content: center;
}

.eel-state__title {
  margin: 0;
  color: var(--theme-eel-state-text);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.eel-state--compact .eel-state__title,
.eel-state--visual .eel-state__title {
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.eel-state__message {
  margin: 0;
  color: var(--theme-eel-state-muted);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.eel-state__meta,
.eel-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  align-items: center;
}

.eel-state__meta .eel-metadata-row {
  margin: 0;
}

.eel-state__actions .btn {
  max-width: 100%;
  white-space: normal;
}

.eel-state--loading .eel-state__mark,
.eel-state--syncing .eel-state__mark {
  animation: eel-state-pulse var(--motion-duration-loading) var(--motion-ease-standard) infinite;
}

.eel-card__visual-state,
.eel-page-hero__visual-state {
  min-height: inherit;
}

.eel-card__visual-state .eel-state__title,
.eel-page-hero__visual-state .eel-state__title {
  color: inherit;
}

@keyframes eel-state-pulse {
  0%,
  100% {
    opacity: var(--opacity-prominent);
  }

  50% {
    opacity: var(--opacity-muted);
  }
}

@media (max-width: 640px) {
  .eel-state {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* static/css/pages/chronicles.css */
/* Chronicles Timeline - Expandable Spine UI. Timeline nodes are interactive records, not generic .mb-card cards. */
.chronicles-section {
  background-color: transparent;
  padding: var(--mb-space-16) 0;
  min-height: 80vh;
}

.chronicles-archive-header {
  max-width: var(--container-lg);
  margin: 0 auto var(--mb-space-lg);
  padding: 0 var(--mb-space-md);
}

.chronicles-archive-header .mb-section__title,
.chronicles-archive-header .mb-section__lede {
  max-width: var(--container-copy-wide);
}

.chronicles-timeline {
  position: relative;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: var(--mb-space-xl) var(--mb-space-md);
}

.chr-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 36px;
  /* 16px container padding + 12px marker left + 9px marker halfwidth - 1px spine halfwidth = 36px */
  width: 2px;
  background: var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  z-index: var(--layer-raised);
}

@media (max-width: 768px) {
  .chr-spine {
    left: 32px;
  }
}

.chr-node {
  position: relative;
  margin-bottom: var(--mb-space-xl);
  padding-left: var(--mb-space-timeline-rail);
  z-index: var(--layer-content);
}

.chr-marker {
  position: absolute;
  left: 12px;
  top: 24px;
  width: var(--size-icon-md);
  height: var(--size-icon-md);
  border-radius: var(--radius-pill);
  background-color: var(--theme-eel-ink);
  border: var(--border-width-emphasis) var(--border-style-solid) var(--theme-eel-earth-accent);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  z-index: var(--layer-control);
}

.chr-node:hover .chr-marker {
  transform: scale(1.2);
  background-color: var(--theme-eel-earth-accent);
  box-shadow: var(--shadow-sm);
}

.chr-visible {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  border-radius: var(--radius-sm);
  padding: var(--mb-space-lg);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  position: relative;
  display: flex;
  flex-direction: column;
}

.chr-visible[role="button"] {
  cursor: pointer;
}

.chr-visible[role="button"]:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.chr-node:hover .chr-visible {
  border-color: var(--theme-eel-border-dark);
  background: var(--theme-eel-archive-card-bg);
  box-shadow: var(--shadow-sm);
}

.chr-date {
  font-size: var(--text-xs);
  color: var(--color-on-surface-variant);
  margin-bottom: var(--mb-space-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
}

.chr-title {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  padding-right: var(--mb-space-xl);
}

.chr-icon {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--theme-eel-text-muted-dark);
  transition: transform var(--motion-duration-slow) var(--motion-ease-standard), color var(--motion-duration-standard) var(--motion-ease-standard);
}

.chr-node.expanded .chr-icon {
  transform: translateY(-50%) rotate(180deg);
  color: var(--theme-eel-earth-accent);
}

.chr-node.expanded .chr-marker {
  background-color: var(--theme-eel-earth-accent);
  box-shadow: var(--shadow-sm);
}

.chr-node.expanded .chr-visible {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: var(--divider-transparent);
}

.chr-expanded {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--motion-duration-slow) var(--motion-ease-out), padding var(--motion-duration-slow) var(--motion-ease-out);
  padding: 0 var(--mb-space-lg);
}

/* chr-inner helps measure real height for toggle transition */
.chr-inner {
  padding-bottom: var(--mb-space-md);
}

.chr-media img {
  width: 100%;
  max-height: var(--size-media-lg);
  object-fit: contain;
  border-radius: var(--radius-md);
  margin-bottom: var(--mb-space-lg);
  background: var(--color-surface-container-lowest);
}

.chr-media--gallery .chr-gallery-primary img,
.chr-media--gallery .chr-gallery-thumb img {
  margin-bottom: 0;
}

.chr-video iframe {
  border: 0;
  border-radius: var(--radius-md);
  display: block;
  width: 100%;
}

.chr-video--horizontal iframe {
  aspect-ratio: 16 / 9;
}

.chr-video--vertical {
  margin-inline: auto;
  max-width: var(--size-media-video-rail);
}

.chr-video--vertical iframe {
  aspect-ratio: 9 / 16;
}

.chr-content p {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  line-height: var(--leading-loose);
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--text-md);
}

.no-chronicles {
  text-align: center;
  color: var(--color-on-surface-variant);
  padding: var(--mb-space-16) 0;
}

.no-chronicles .chronicles-empty-state {
  max-width: var(--container-md);
  margin: 0 auto;
  text-align: left;
}

@media (max-width: 768px) {
  .chr-node {
    padding-left: var(--mb-space-timeline-compact);
  }

  .chr-marker {
    left: 8px;
    width: var(--size-icon-sm);
    height: var(--size-icon-sm);
  }

  .chr-visible {
    padding: var(--mb-space-5);
  }

  .chr-expanded {
    padding: 0 var(--mb-space-5);
  }
}

/* Chronicle year group headers */
.chr-year-group {
  margin-bottom: var(--mb-space-2xs);
}

.chr-year-header {
  display: flex;
  align-items: center;
  gap: var(--mb-space-sm);
  padding: var(--mb-space-5) var(--mb-space-md) var(--mb-space-2-5) var(--mb-space-timeline-rail);
  margin-bottom: var(--mb-space-xs);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

.chr-year-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--theme-eel-border-dark);
}

.chr-year-label {
  font-family: var(--font-metadata);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--theme-eel-earth-accent);
  letter-spacing: var(--tracking-widest);
  text-transform: var(--text-case-uppercase);
  white-space: nowrap;
}

.chr-year-count {
  font-size: var(--text-xs);
  color: var(--theme-eel-text-muted-dark);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  font-family: var(--font-metadata);
  padding: var(--mb-space-3xs) var(--mb-space-2-5);
  white-space: nowrap;
}

.chr-year-icon {
  color: var(--color-on-surface-subtle);
  transition: transform var(--motion-duration-standard) var(--motion-ease-standard), color var(--motion-duration-standard) var(--motion-ease-standard);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: var(--mb-space-2xs);
}

.chr-year-group.is-open .chr-year-icon {
  transform: rotate(180deg);
  color: var(--theme-eel-earth-accent);
}

.chr-year-entries {
  overflow: hidden;
  transition: max-height var(--motion-duration-slow) var(--motion-ease-out);
}

.chr-year-entries--collapsed {
  max-height: 0;
  overflow: hidden;
}

/* Entry meta row (date + type badge) */
.chr-meta-row {
  display: flex;
  align-items: center;
  gap: var(--mb-space-2-5);
  margin-bottom: var(--mb-space-xs);
  flex-wrap: wrap;
}

.chr-meta-row .chr-date {
  margin-bottom: 0;
}

.chr-scope-row {
  margin-bottom: var(--mb-space-3-5);
}

/* Entry type labels */
.chr-type-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: var(--text-case-uppercase);
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-compact);
}

.chr-type-badge::before {
  content: '';
  display: inline-block;
  width: var(--size-indicator-xs);
  height: var(--size-indicator-xs);
  border-radius: 50%;
  flex-shrink: 0;
}

.chr-type--milestone {
  color: var(--color-state-warning);
}

.chr-type--milestone::before {
  background: var(--color-state-warning);
  box-shadow: 0 0 6px rgba(245, 200, 66, 0.6);
}

.chr-type--change {
  color: var(--sandy-brown);
}

.chr-type--change::before {
  background: var(--sandy-brown);
}

.chr-type--observation {
  color: var(--color-state-nominal);
}

.chr-type--observation::before {
  background: var(--color-state-nominal);
}

.chr-type--failure_event {
  color: var(--color-state-critical);
}

.chr-type--failure_event::before {
  background: var(--color-state-critical);
}

/* Media type indicator badge */
.chr-media-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: var(--text-case-uppercase);
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-1);
  color: var(--color-on-surface-variant);
  opacity: var(--opacity-faded);
}

.chr-media--youtube_vertical,
.chr-media--youtube_horizontal {
  color: var(--theme-eel-earth-accent);
  opacity: 1;
}

.chr-media--image,
.chr-media--image_gallery {
  color: var(--sandy-brown);
  opacity: 1;
}

/* Chronicle archive link */
.chr-archive-link {
  max-width: var(--container-xl);
  margin: var(--mb-space-xs) auto 0;
  padding: 0 var(--mb-space-md) 0 calc(var(--mb-space-md) + var(--mb-space-timeline-rail));
}

.chr-archive-link a {
  font-size: var(--text-sm);
  color: var(--theme-eel-biological-accent);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  opacity: var(--opacity-muted);
  transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.chr-archive-link a:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .chr-year-header {
    padding-left: var(--mb-space-timeline-compact);
  }

  .chronicles-section--eel-archive .chronicles-timeline {
    padding-inline: var(--mb-space-sm);
  }
}

/* EEL archive treatment is scoped to the public /chronicles archive. */
.chronicles-section--eel-archive .chronicles-timeline {
  max-width: var(--container-lg);
  padding-top: var(--mb-space-lg);
}

.chronicles-section--eel-archive .chr-spine {
  width: var(--border-width-subtle);
  background: var(--theme-eel-border-dark);
}

.chronicles-section--eel-archive .chr-year-group + .chr-year-group {
  margin-top: var(--mb-space-lg);
}

.chronicles-section--eel-archive .chr-marker {
  background: var(--theme-eel-ink);
  border: var(--border-width-emphasis) var(--border-style-solid) var(--theme-eel-earth-accent);
}

.chronicles-section--eel-archive .chr-node:hover .chr-marker,
.chronicles-section--eel-archive .chr-node.expanded .chr-marker {
  background: var(--theme-eel-earth-accent);
  box-shadow: var(--shadow-sm);
}

.chronicles-section--eel-archive .chr-visible.mb-card--eel {
  gap: var(--mb-space-sm);
  padding: var(--mb-space-lg);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  box-shadow: var(--shadow-sm);
}

.chronicles-section--eel-archive .chr-node:hover .chr-visible {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  box-shadow: var(--shadow-lg);
}

.chronicles-section--eel-archive .chr-title {
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.chronicles-section--eel-archive .chr-icon {
  color: var(--theme-eel-text-muted-dark);
}

.chronicles-section--eel-archive .chr-node.expanded .chr-icon {
  color: var(--theme-eel-earth-accent);
}

.chronicles-section--eel-archive .chr-expanded {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-top: 0;
  color: var(--color-on-surface);
}

.chronicles-section--eel-archive .chr-content p {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
}

.chronicles-section--eel-archive .chr-meta-row--eel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-xs);
  margin-bottom: 0;
}

.chronicles-section--eel-archive .chr-meta-row--eel .eel-metadata-row {
  margin-bottom: 0;
}

.chronicles-section--eel-archive .chr-year-header::after {
  background: var(--theme-eel-border-dark);
}

.chronicles-section--eel-archive .chr-year-label {
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-metadata);
}

.chronicles-section--eel-archive .chr-year-count {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
}

.chronicles-section--eel-archive .chr-year-group.is-open .chr-year-icon {
  color: var(--theme-eel-earth-accent);
}

.chronicles-section--eel-archive .chr-scope-chip {
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
}

.chronicles-section--eel-archive .chr-scope-chip:hover {
  border-color: var(--color-border-hover);
  color: var(--color-on-surface);
}

.chronicles-section--eel-archive .chr-media-badge {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  opacity: var(--opacity-prominent);
}

.chronicles-section--eel-archive .chr-media--youtube_vertical,
.chronicles-section--eel-archive .chr-media--youtube_horizontal,
.chronicles-section--eel-archive .chr-media--image,
.chronicles-section--eel-archive .chr-media--image_gallery {
  color: var(--theme-eel-earth-accent);
}

.chr-impact-list,
.chr-relationship-card {
  margin-top: var(--mb-space-md);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  background: var(--theme-eel-archive-card-bg);
  padding: var(--mb-space-md);
}

.chr-impact-list h4 {
  margin: 0 0 var(--mb-space-sm);
  color: var(--color-on-surface);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}

.chr-impact-list__items {
  display: grid;
  gap: var(--mb-space-sm);
}

.chr-impact-item {
  display: grid;
  gap: var(--mb-space-2xs);
}

.chr-impact-item__header,
.chr-relationship-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-xs);
  align-items: center;
}

.chr-impact-item__header a,
.chr-impact-item__header > span:first-child,
.chr-relationship-card__link {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-semibold);
}

.chr-impact-item__header > span:last-child,
.chr-relationship-card__label {
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  color: var(--theme-eel-text-muted-dark);
  font-size: var(--text-xs);
  padding: var(--mb-space-2xs) var(--mb-space-xs);
}

.chr-impact-item p {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.chr-relationship-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  justify-content: space-between;
}

/* static/css/pages/news-feed.css */
.homepage-feed,
.system-logs-section {
  padding: var(--mb-space-16) 0;
  background-color: var(--color-surface-container-low);
}

.news-feed-section {
  background-color: var(--color-surface-container-low);
  padding: var(--mb-space-16) 0;
  min-height: 60vh;
}

.news-feed-container {
  max-width: var(--container-prose);
}

.news-archive-header {
  margin-bottom: var(--mb-space-10);
  text-align: left;
}

.news-archive-header .mb-section__title,
.news-archive-header .mb-section__lede {
  max-width: var(--container-copy-wide);
}

.news-stack {
  display: flex;
  flex-direction: column;
}

.news-stack--archive {
  gap: var(--mb-space-12);
}

.homepage-feed h2 {
  color: var(--color-on-surface);
}

.system-logs-header {
  text-align: center;
  margin-bottom: var(--mb-space-12);
}

.system-logs-header h2 {
  font-size: var(--text-2xl);
  color: var(--color-on-surface);
  margin-bottom: var(--mb-space-xs);
}

.system-logs-header p {
  color: var(--color-on-surface-variant);
  font-size: var(--text-lg);
}

.system-logs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--mb-space-xl);
  max-width: var(--container-page);
  margin: 0 auto;
}

/* Feed cards keep a left-accent archive layout instead of the generic .mb-card surface. */
.log-card,
.news-card {
  background-color: var(--color-surface-container);
  border-radius: var(--radius-md);
  padding: var(--mb-space-xl);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.log-card:hover,
.news-card:hover {
  transform: translateY(var(--motion-lift-lg));
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  box-shadow: var(--shadow-lg);
}

.chr-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-compact);
  background: var(--color-surface-container-high);
  color: var(--theme-eel-earth-accent);
  border: var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--mb-space-compact) var(--mb-space-2-5);
  font-size: var(--text-xs);
  text-decoration: none;
}

.chr-scope-chip:hover {
  color: var(--theme-eel-biological-accent);
  border-color: var(--color-border-hover);
  text-decoration: none;
}

.log-date,
.news-date {
  font-family: var(--code-font);
  font-size: var(--text-sm);
  color: var(--theme-eel-earth-accent);
  margin-bottom: var(--mb-space-md);
  letter-spacing: var(--tracking-wider);
}

.log-title,
.news-title {
  font-size: var(--text-lg);
  color: var(--color-on-surface);
  margin-top: 0;
  margin-bottom: var(--mb-space-md);
  font-weight: var(--font-weight-bold);
}

.news-title--archive {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.log-content,
.news-content {
  color: var(--color-on-surface-variant);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin-bottom: var(--mb-space-lg);
}

.news-content--full {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-on-surface-variant);
  white-space: pre-wrap;
  margin-bottom: 0;
}

.news-cta {
  margin-top: var(--mb-space-lg);
  justify-content: flex-start;
}

.news-empty-state {
  margin-top: var(--mb-space-2);
}

.log-link,
.news-link {
  color: var(--theme-eel-biological-accent);
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  font-family: var(--code-font);
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
}

.log-link:hover,
.news-link:hover {
  color: var(--theme-eel-earth-accent);
}

.log-card:hover .log-link,
.news-card:hover .news-link {
  color: var(--theme-eel-earth-accent);
}

.news-card--eel {
  gap: var(--mb-space-sm);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-md);
  transform: none;
}

.news-card--eel:hover {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  box-shadow: var(--shadow-lg);
  transform: none;
}

.news-card--eel .news-card__header {
  display: grid;
  gap: var(--mb-space-xs);
}

.news-card--eel .news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-xs);
}

.news-card--eel .eel-metadata-row {
  margin-bottom: 0;
}

.news-card--eel .news-title {
  color: var(--color-on-surface);
  font-family: var(--font-editorial);
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.news-card--eel .news-content {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
}

.news-card--eel .news-link {
  align-self: flex-start;
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.news-card--eel .news-link:hover {
  color: var(--color-on-surface);
}

.home-section--feed .news-card--eel {
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--theme-eel-border-dark);
  border-left: var(--border-width-accent) var(--border-style-solid) var(--theme-eel-earth-accent);
  box-shadow: var(--shadow-md);
}

.home-section--feed .news-card--eel .news-title {
  color: var(--color-on-surface);
}

.home-section--feed .news-card--eel .news-content {
  color: var(--theme-eel-text-muted-dark);
}

.home-section--feed .news-card--eel .news-link {
  color: var(--theme-eel-earth-accent);
}

/* Project News - Homepage Cards */
.news-all-link,
.logs-all-link {
  color: var(--color-on-surface);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: all var(--motion-duration-standard) var(--motion-ease-standard);
  font-family: var(--code-font);
  display: block;
}

.news-all-link:hover,
.logs-all-link:hover {
  opacity: var(--opacity-subtle);
  color: var(--theme-eel-earth-accent);
}

/* static/css/pages/events.css */
.events-page {
  padding: var(--mb-space-16) 0;
}

.events-shell {
  display: grid;
  gap: var(--mb-space-16);
}

.events-current-state,
.events-route-section {
  min-width: 0;
}

.events-route-section {
  display: grid;
  gap: var(--mb-space-xl);
}

.events-route-section .mb-section__header {
  margin-bottom: 0;
}

.events-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mb-space-lg);
  align-items: stretch;
}

.events-card {
  gap: var(--mb-space-md);
  padding: var(--mb-space-lg);
}

.events-card__header {
  display: grid;
  gap: var(--mb-space-sm);
}

.events-card .mb-card__description {
  max-width: var(--container-xs);
}

.events-route-section {
  position: relative;
  z-index: var(--layer-content);
}

.events-inquiry-cta {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  grid-template-areas:
    "media content"
    "media actions";
  align-items: center;
  margin-top: var(--mb-space-4);
}

.events-inquiry-cta__media {
  grid-area: media;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  background: var(--theme-eel-instrument-bg);
}

.events-inquiry-cta__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.events-inquiry-cta .eel-cta-strip__content {
  grid-area: content;
  justify-items: center;
  text-align: center;
}

.events-inquiry-cta .eel-cta-strip__actions {
  grid-area: actions;
  justify-content: center;
}

@media (max-width: 768px) {
  .events-page {
    padding: var(--mb-space-12) 0;
  }

  .events-shell {
    gap: var(--mb-space-12);
  }

  .events-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .events-inquiry-cta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "content"
      "actions";
  }
}

/* static/css/pages/ecosystem-map.css */
.ecosystem-map-section {
  padding: var(--mb-space-16) 0;
}

#biosphere-ecosystem-map {
  scroll-margin-top: var(--mb-space-24);
}

.ecosystem-map-toolbar {
  display: grid;
  gap: var(--mb-space-md);
  margin-bottom: var(--mb-space-xl);
}

.ecosystem-map-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-xs);
}

.ecosystem-map-filter {
  display: inline-flex;
  gap: var(--mb-space-xs);
  align-items: center;
  justify-content: center;
  max-width: 100%;
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--mb-space-xs) var(--mb-space-md);
  text-decoration: none;
  text-transform: var(--text-case-uppercase);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard);
  overflow-wrap: anywhere;
}

.ecosystem-map-filter__count {
  display: inline-grid;
  place-items: center;
  min-width: var(--size-icon-sm);
  padding: var(--mb-space-3xs) var(--mb-space-2-5);
  color: inherit;
  background: var(--theme-eel-instrument-bg);
  border-radius: var(--radius-pill);
}

.ecosystem-map-filter--empty:not(.ecosystem-map-filter--active) {
  opacity: var(--opacity-muted);
}

.ecosystem-map-filter:hover,
.ecosystem-map-filter:focus-visible {
  background: var(--theme-eel-instrument-bg);
  border-color: var(--theme-eel-border-dark);
  color: var(--color-on-surface);
  text-decoration: none;
}

.ecosystem-map-filter:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.ecosystem-map-filter--active {
  background: var(--theme-eel-biological-accent);
  color: var(--theme-on-accent);
}

.ecosystem-map-summary {
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  margin-bottom: var(--mb-space-xl);
  padding: var(--mb-space-md);
}

.ecosystem-map-summary__state {
  margin-top: var(--mb-space-md);
}

.ecosystem-map-entry {
  display: grid;
  gap: var(--mb-space-md);
  margin-bottom: var(--mb-space-xl);
}

.ecosystem-map-entry__header {
  display: grid;
  gap: var(--mb-space-2xs);
}

.ecosystem-map-entry__kicker {
  margin: 0;
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.ecosystem-map-entry__header h3 {
  margin: 0;
  color: var(--color-on-surface);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.ecosystem-map-entry__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mb-space-sm);
}

.ecosystem-map-entry-card {
  display: grid;
  gap: var(--mb-space-xs);
  min-width: 0;
  min-height: 100%;
  padding: var(--mb-space-md);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  transition:
    background var(--motion-duration-fast) var(--motion-ease-standard),
    border-color var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast) var(--motion-ease-standard);
}

.ecosystem-map-entry-card:hover,
.ecosystem-map-entry-card:focus-visible {
  color: var(--color-on-surface);
  text-decoration: none;
  background: var(--theme-eel-archive-card-bg);
  border-color: var(--color-state-info);
}

.ecosystem-map-entry-card:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.ecosystem-map-entry-card--active {
  border-color: var(--color-state-info);
  box-shadow: var(--shadow-ring);
}

.ecosystem-map-entry-card__kicker {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.ecosystem-map-entry-card strong {
  color: var(--color-on-surface);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.ecosystem-map-entry-card span:last-child {
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ecosystem-map-explorer {
  display: grid;
  gap: var(--mb-space-lg);
}

.ecosystem-map-modebar,
.ecosystem-map-modebar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-xs);
  align-items: center;
}

.ecosystem-map-modebar__tabs {
  min-width: 0;
}

.ecosystem-map-mode,
.ecosystem-map-reset,
.ecosystem-web__inspect,
.ecosystem-map-visual__control {
  display: inline-flex;
  gap: var(--mb-space-xs);
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: var(--size-control-min);
  padding: var(--mb-space-xs) var(--mb-space-md);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: var(--text-case-uppercase);
  background: var(--theme-eel-archive-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  transition: background var(--motion-duration-fast) var(--motion-ease-standard), color var(--motion-duration-fast) var(--motion-ease-standard), border-color var(--motion-duration-fast) var(--motion-ease-standard);
  overflow-wrap: anywhere;
}

.ecosystem-map-mode:hover,
.ecosystem-map-mode:focus-visible,
.ecosystem-map-reset:hover,
.ecosystem-map-reset:focus-visible,
.ecosystem-web__inspect:hover,
.ecosystem-web__inspect:focus-visible,
.ecosystem-map-visual__control:hover,
.ecosystem-map-visual__control:focus-visible {
  color: var(--color-on-surface);
  text-decoration: none;
  background: var(--theme-eel-instrument-bg);
}

.ecosystem-map-mode:focus-visible,
.ecosystem-map-reset:focus-visible,
.ecosystem-web__inspect:focus-visible,
.ecosystem-map-visual__control:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.ecosystem-map-mode--active {
  color: var(--theme-on-accent);
  background: var(--theme-eel-biological-accent);
}

.ecosystem-map-mode__count {
  display: inline-grid;
  place-items: center;
  padding: var(--mb-space-3xs) var(--mb-space-2-5);
  color: inherit;
  background: var(--theme-eel-instrument-bg);
  border-radius: var(--radius-pill);
}

.ecosystem-map-reset {
  margin-left: auto;
}

.ecosystem-map-filter-status {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ecosystem-map-explorer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--container-xs));
  gap: var(--mb-space-lg);
  align-items: start;
}

.ecosystem-map-panel[hidden] {
  display: none;
}

.ecosystem-map-panel {
  min-width: 0;
}

.ecosystem-map-detail,
.ecosystem-map-node {
  display: grid;
  gap: var(--mb-space-md);
  min-width: 0;
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  padding: var(--mb-space-md);
}

.ecosystem-map-detail {
  position: sticky;
  top: var(--mb-space-xl);
}

.ecosystem-map-detail:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.ecosystem-map-detail__kicker,
.ecosystem-map-node__type {
  margin: 0;
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.ecosystem-map-detail h3,
.ecosystem-map-node h3 {
  margin: 0;
  color: var(--color-on-surface);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.ecosystem-map-node h3 a {
  color: inherit;
  text-decoration: none;
}

.ecosystem-map-node h3 a:hover,
.ecosystem-map-node h3 a:focus-visible {
  color: var(--theme-eel-biological-accent);
  text-decoration: underline;
}

.ecosystem-map-detail p,
.ecosystem-map-detail dd,
.ecosystem-map-detail dt {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ecosystem-map-detail__meta {
  display: grid;
  gap: var(--mb-space-sm);
  margin: 0;
}

.ecosystem-map-detail__meta div {
  display: grid;
  gap: var(--mb-space-1);
  padding-top: var(--mb-space-sm);
  border-top: var(--divider-subtle);
}

.ecosystem-map-detail dt {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
}

.ecosystem-map-detail__evidence {
  display: grid;
  gap: var(--mb-space-sm);
}

.ecosystem-map-detail__action {
  justify-self: start;
}

.ecosystem-map-detail__action[hidden] {
  display: none;
}

.ecosystem-map-node-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mb-space-md);
}

.ecosystem-map-visual {
  display: grid;
  gap: var(--mb-space-md);
  min-width: 0;
}

.ecosystem-map-visual__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-xs);
  align-items: center;
}

.ecosystem-map-visual__control {
  cursor: pointer;
}

.ecosystem-map-visual__guidance {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ecosystem-map-graph {
  position: relative;
  min-height: clamp(22rem, 58vh, 42rem);
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    var(--theme-eel-instrument-bg);
  background-size: 24px 24px;
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  touch-action: pan-y;
}

.cookie-consent-visible .ecosystem-map-panel--active[data-ecosystem-map-panel="graph"] {
  padding-bottom: clamp(var(--mb-space-16), 24vh, var(--mb-space-24));
}

.ecosystem-map-visual__status {
  margin: 0;
  color: var(--color-on-surface-variant);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ecosystem-map-visual__status[data-graph-state="ready"] {
  color: var(--theme-eel-biological-accent);
}

.ecosystem-map-visual__status[data-graph-state="empty"],
.ecosystem-map-visual__status[data-graph-state="unavailable"] {
  color: var(--theme-eel-text-muted-dark);
}

.ecosystem-map-node[data-node-type="resource"] {
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-earth-accent);
}

.ecosystem-map-node--selected {
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
  box-shadow: var(--shadow-ring);
}

.ecosystem-map-node__inspect {
  justify-self: start;
}

.ecosystem-web__inspect {
  margin-top: var(--mb-space-xs);
}

@media (max-width: 1024px) {
  .ecosystem-map-entry__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ecosystem-map-explorer__grid,
  .ecosystem-map-node-grid {
    grid-template-columns: 1fr;
  }

  .ecosystem-map-detail {
    position: static;
  }
}

@media (max-width: 640px) {
  .ecosystem-map-entry__grid {
    grid-template-columns: 1fr;
  }

  .ecosystem-map-modebar__tabs {
    flex: 1 1 100%;
    width: 100%;
  }

  .ecosystem-map-mode,
  .ecosystem-map-reset,
  .ecosystem-map-visual__control {
    flex: 1 1 100%;
    width: 100%;
  }

  .ecosystem-map-reset {
    margin-left: 0;
  }
}

/* static/css/pages/ui-kitchen-sink.css */
/* Ecological Editorial Lab kitchen-sink presentation shell.
   Scoped to the gated design showroom only. */

.ui-kitchen-sink {
  --theme-eel-sheet-bg: var(--theme-eel-ink);
  --theme-eel-sheet-panel: var(--theme-eel-instrument-bg);
  --theme-eel-sheet-legacy-panel: var(--theme-eel-archive-card-bg);
  --theme-eel-sheet-copy: var(--color-on-surface);
  --theme-eel-sheet-muted: var(--theme-eel-text-muted-dark);
  counter-reset: eel-section;
  min-height: 100%;
  padding: var(--mb-space-20) 0 var(--mb-space-24);
  background: var(--theme-eel-sheet-bg);
  color: var(--theme-eel-sheet-copy);
  font-family: var(--font-eel-body);
}

.ui-kitchen-sink > .container {
  max-width: var(--container-wide);
}

.ui-kitchen-sink__header {
  max-width: var(--container-prose);
  margin-bottom: var(--mb-space-16);
  padding-bottom: var(--mb-space-12);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.ui-kitchen-sink__header h1 {
  max-width: var(--container-readable);
  margin: 0 0 var(--mb-space-lg);
  color: var(--theme-eel-sheet-copy);
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
}

.ui-kitchen-sink__header p:not(.ui-kitchen-sink__eyebrow) {
  max-width: var(--container-readable);
  margin: 0;
  color: var(--theme-eel-sheet-muted);
  font-family: var(--font-eel-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.ui-kitchen-sink__eyebrow {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-tight);
  margin: 0 0 var(--mb-space-sm);
  text-transform: var(--text-case-uppercase);
}

.ui-kitchen-sink__section {
  counter-increment: eel-section;
  position: relative;
  margin-bottom: var(--mb-space-20);
  padding: var(--mb-space-16) 0 0;
  background: transparent;
  border: 0;
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.ui-kitchen-sink__section-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--mb-space-md) var(--mb-space-xl);
  margin-bottom: var(--mb-space-xl);
  padding-bottom: var(--mb-space-lg);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.ui-kitchen-sink__section-header::before {
  content: counter(eel-section, decimal-leading-zero);
  display: inline-grid;
  place-items: center;
  min-width: var(--size-control-touch);
  min-height: var(--size-control-compact);
  color: var(--theme-eel-earth-accent);
  font-family: var(--font-metadata);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-tight);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.ui-kitchen-sink__section-header > * {
  grid-column: 2;
}

.ui-kitchen-sink__section h2 {
  max-width: var(--container-readable);
  margin: 0;
  color: var(--theme-eel-sheet-copy);
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.ui-kitchen-sink__section .ui-kitchen-sink__eyebrow {
  margin-bottom: var(--mb-space-xs);
}

.ui-kitchen-sink__section--legacy {
  margin-bottom: var(--mb-space-16);
}

.ui-kitchen-sink__section--legacy .ui-kitchen-sink__section-header::before {
  color: var(--theme-eel-text-muted-dark);
}

.ui-kitchen-sink__section--legacy .ui-kitchen-sink__eyebrow {
  color: var(--theme-eel-earth-accent);
}

.ui-kitchen-sink__section--legacy h2 {
  color: var(--theme-eel-sheet-copy);
  font-size: var(--text-xl);
}

.ui-kitchen-sink__section--legacy .ui-kitchen-sink__section-stack,
.ui-kitchen-sink__section--legacy .ui-kitchen-sink__button-grid,
.ui-kitchen-sink__section--legacy .ui-kitchen-sink__card-row,
.ui-kitchen-sink__section--legacy .ui-kitchen-sink__swatch-row {
  opacity: var(--opacity-prominent);
}

.ui-kitchen-sink__section--compat .ui-kitchen-sink__section-header::before {
  color: var(--theme-eel-text-muted-dark);
}

.ui-kitchen-sink__section--compat .ui-kitchen-sink__eyebrow {
  color: var(--theme-eel-earth-accent);
}

.ui-kitchen-sink__eel-swatch-grid,
.ui-kitchen-sink__type-grid,
.ui-kitchen-sink__section-stack,
.ui-kitchen-sink__button-grid,
.ui-kitchen-sink__card-row,
.ui-kitchen-sink__eel-card-grid {
  gap: var(--mb-space-lg);
}

.ui-kitchen-sink__eel-section-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mb-space-xl);
}

.ui-kitchen-sink__eel-section-preview {
  padding: var(--mb-space-12) var(--mb-space-xl);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-radius: var(--radius-sm);
}

.ui-kitchen-sink__eel-section-preview.mb-section--eel-compact {
  padding-block: var(--mb-space-xl);
}

.ui-kitchen-sink__eel-section-preview .mb-section__header {
  margin-bottom: var(--mb-space-lg);
}

.ui-kitchen-sink__eel-section-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-sm);
  align-items: center;
}

.ui-kitchen-sink__eel-section-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mb-space-md);
}

.ui-kitchen-sink__eel-section-mini-card {
  min-height: var(--size-control-inline-md);
  padding: var(--mb-space-lg);
  color: var(--section-muted);
  font-family: var(--font-metadata);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: var(--text-case-uppercase);
  background: var(--section-card-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--section-border);
  border-radius: var(--radius-sm);
}

.ui-kitchen-sink__type-grid {
  margin-top: var(--mb-space-xl);
}

.ui-kitchen-sink__eel-swatch,
.ui-kitchen-sink__type-sample,
.ui-kitchen-sink__pattern-band,
.ui-kitchen-sink__button-surface,
.ui-kitchen-sink__feature-preview,
.ui-kitchen-sink__form-card {
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.ui-kitchen-sink__eel-swatch,
.ui-kitchen-sink__type-sample {
  padding: var(--mb-space-lg);
  min-width: 0;
}

.ui-kitchen-sink__eel-swatch code,
.ui-kitchen-sink__type-sample span {
  overflow-wrap: anywhere;
}

.ui-kitchen-sink__type-sample {
  background: var(--theme-eel-sheet-panel);
  color: var(--theme-eel-sheet-copy);
}

.ui-kitchen-sink__type-sample p {
  color: var(--theme-eel-biological-accent);
}

.ui-kitchen-sink__type-sample--editorial h3 {
  color: var(--theme-eel-sheet-copy);
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
}

.ui-kitchen-sink__type-sample--body span,
.ui-kitchen-sink__type-sample--metadata span {
  color: var(--theme-eel-sheet-muted);
}

.ui-kitchen-sink__type-sample--body span {
  font-family: var(--font-eel-body);
}

.ui-kitchen-sink__pattern-band,
.ui-kitchen-sink__button-surface,
.ui-kitchen-sink__feature-preview {
  background: var(--theme-eel-sheet-panel);
}

.ui-kitchen-sink__section--legacy .ui-kitchen-sink__pattern-band,
.ui-kitchen-sink__section--legacy .ui-kitchen-sink__button-surface,
.ui-kitchen-sink__section--legacy .ui-kitchen-sink__feature-preview {
  background: var(--theme-eel-sheet-legacy-panel);
}

.ui-kitchen-sink__section--legacy .mb-card {
  border-color: var(--theme-eel-border-dark);
  box-shadow: none;
}

.ui-kitchen-sink__section--legacy .mb-card:hover {
  transform: none;
}

.ui-kitchen-sink__section--legacy .status-badge,
.ui-kitchen-sink__section--legacy .mb-chip {
  box-shadow: none;
}

.ui-kitchen-sink__pattern-band h3,
.ui-kitchen-sink__form-card h3 {
  color: var(--theme-eel-sheet-copy);
  font-family: var(--font-editorial);
  font-size: var(--text-xl);
}

.ui-kitchen-sink__pattern-band p,
.ui-kitchen-sink__form-card p {
  color: var(--theme-eel-sheet-muted);
  font-family: var(--font-eel-body);
}

.ui-kitchen-sink__feature-preview {
  padding: var(--mb-space-16) var(--mb-space-xl);
}

.ui-kitchen-sink__feature-preview .feature-title {
  font-family: var(--font-editorial);
}

.ui-kitchen-sink__button-surface,
.ui-kitchen-sink__form-card {
  padding: var(--mb-space-xl);
}

.ui-kitchen-sink__focus-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-sm);
  width: fit-content;
}

.ui-kitchen-sink__compat-note {
  display: grid;
  gap: var(--mb-space-sm);
  max-width: var(--container-readable);
  padding: var(--mb-space-xl);
  background: var(--theme-eel-sheet-panel);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  color: var(--theme-eel-sheet-muted);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.ui-kitchen-sink__compat-note p {
  margin: 0;
}

.ui-kitchen-sink__form-card {
  background: var(--theme-eel-sheet-panel);
  color: var(--theme-eel-sheet-copy);
}

.ui-kitchen-sink__input {
  font-family: var(--font-eel-body);
}

@media (max-width: 768px) {
  .ui-kitchen-sink {
    padding: var(--mb-space-16) 0 var(--mb-space-20);
  }

  .ui-kitchen-sink__header {
    margin-bottom: var(--mb-space-12);
    padding-bottom: var(--mb-space-10);
  }

  .ui-kitchen-sink__header h1 {
    font-size: var(--text-3xl);
  }

  .ui-kitchen-sink__section {
    margin-bottom: var(--mb-space-16);
    padding-top: var(--mb-space-12);
  }

  .ui-kitchen-sink__section-header {
    gap: var(--mb-space-md);
  }
}

@media (max-width: 480px) {
  .ui-kitchen-sink__eel-swatch-grid,
  .ui-kitchen-sink__type-grid,
  .ui-kitchen-sink__section-stack,
  .ui-kitchen-sink__button-grid,
  .ui-kitchen-sink__card-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-kitchen-sink__section-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-kitchen-sink__section-header > * {
    grid-column: 1;
  }

  .ui-kitchen-sink__section-header::before {
    justify-self: start;
  }

  .ui-kitchen-sink__eel-section-preview {
    padding: var(--mb-space-xl) var(--mb-space-lg);
  }

  .ui-kitchen-sink__eel-section-mini-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* static/css/pages/ux-lab.css */
/* UX Lab is a development-only surface for interaction and state-system previews. */
.ux-lab {
  background: var(--theme-eel-ink);
  color: var(--theme-eel-mist);
  min-height: 100vh;
  padding: var(--mb-space-20) 0;
}

.ux-lab > .container {
  max-width: var(--container-wide);
}

.ux-lab__header {
  display: grid;
  gap: var(--mb-space-4);
  max-width: var(--container-prose);
  margin-bottom: var(--mb-space-16);
}

.ux-lab__header h1 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.ux-lab__header p:not(.ux-lab__eyebrow) {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

.ux-lab__overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--mb-space-5);
  align-items: start;
  padding: var(--mb-space-6);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-glass-toplight);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.ux-lab__overview-copy {
  display: grid;
  gap: var(--mb-space-3);
}

.ux-lab__overview-copy h2 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.ux-lab__overview-copy p:not(.ux-lab__eyebrow) {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.ux-lab__overview-status {
  min-width: 0;
}

.ux-lab__jump-nav {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: var(--mb-space-2);
  padding-top: var(--mb-space-4);
  border-top: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.ux-lab__jump-nav a {
  min-height: var(--size-control-min);
  padding: var(--mb-space-2) var(--mb-space-4);
  color: var(--theme-eel-text-dark);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-decoration: none;
  text-transform: var(--text-case-uppercase);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
}

.ux-lab__jump-nav a:hover,
.ux-lab__jump-nav a:focus-visible {
  color: var(--theme-eel-ink);
  background: var(--theme-eel-biological-accent);
  text-decoration: none;
}

.ux-lab__eyebrow {
  margin: 0;
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__section {
  display: grid;
  gap: var(--mb-space-8);
  margin-top: var(--mb-space-16);
}

.ux-lab__section-header {
  display: grid;
  gap: var(--mb-space-3);
  max-width: var(--container-prose);
}

.ux-lab__section-header h2 {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.ux-lab__definition-grid,
.ux-lab__state-grid,
.ux-lab__state-pattern-grid,
.ux-lab__telemetry-grid,
.ux-lab__interaction-grid,
.ux-lab__pattern-grid,
.ux-lab__living-web-grid,
.ux-lab__living-rule-grid,
.ux-lab__living-state-strip,
.ux-lab__stewardship-grid,
.ux-lab__rule-grid,
.ux-lab__backlog {
  display: grid;
  gap: var(--mb-space-5);
}

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

.ux-lab__state-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ux-lab__state-pattern-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ux-lab__outcome-state-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--mb-space-3);
}

.ux-lab__telemetry-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}

.ux-lab__interaction-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-lab__pattern-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-lab__living-web-grid {
  grid-template-columns: 1fr;
}

.ux-lab__living-rule-grid,
.ux-lab__living-state-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.ux-lab__rule-grid,
.ux-lab__backlog {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ux-lab__backlog {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-lab__definition,
.ux-lab__state,
.ux-lab__state-pattern,
.ux-lab__telemetry-cluster,
.ux-lab__telemetry-summary,
.ux-lab__interaction,
.ux-lab__pattern,
.ux-lab__living-web-stage-card,
.ux-lab__living-rule,
.ux-lab__stewardship-card,
.ux-lab__rule,
.ux-lab__backlog article {
  display: grid;
  gap: var(--mb-space-4);
  min-width: 0;
  padding: var(--mb-space-6);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-glass-toplight);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.ux-lab__state-pattern--wide {
  grid-column: 1 / -1;
}

.ux-lab__telemetry-cluster--wide {
  margin-top: var(--mb-space-5);
}

.ux-lab__cluster-header {
  display: grid;
  gap: var(--mb-space-2);
}

.ux-lab__cluster-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.ux-lab__cluster-header p {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.ux-lab__telemetry-stack,
.ux-lab__telemetry-panels,
.ux-lab__node-grid {
  display: grid;
  gap: var(--mb-space-4);
  min-width: 0;
}

.ux-lab__node-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-lab__weather-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mb-space-4);
  min-width: 0;
  padding: var(--mb-space-4);
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.ux-lab__weather-card {
  display: grid;
  gap: var(--mb-space-3);
  min-width: 0;
  padding: var(--mb-space-4);
  background: var(--theme-eel-mist-card);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-mist);
  border-radius: var(--radius-sm);
  color: var(--color-mist-ink);
}

.ux-lab__weather-card[data-weather-state="unavailable"] {
  background: var(--theme-eel-mist);
}

.ux-lab__weather-card[data-weather-state="unavailable"] .eel-sensor-grid,
.ux-lab__weather-card[data-weather-state="unavailable"] .eel-metadata-row {
  opacity: var(--opacity-faded);
}

.ux-lab__weather-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-space-3);
}

.ux-lab__weather-card-header h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.ux-lab__weather-pair .eel-sensor-grid--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-lab__weather-pair .eel-sensor-readout {
  min-width: 0;
  padding: var(--mb-space-2);
  background: var(--theme-eel-mist);
  border-color: var(--theme-eel-border-mist);
}

.ux-lab__weather-pair .eel-sensor-readout__reading {
  flex-wrap: wrap;
  color: var(--color-mist-ink);
}

.ux-lab__weather-pair .eel-sensor-readout__value {
  font-size: var(--text-xl);
}

.ux-lab__weather-pair .eel-sensor-readout__unit,
.ux-lab__weather-pair .eel-sensor-readout__detail {
  color: var(--theme-eel-text-muted-mist);
}

.ux-lab__weather-pair .eel-sensor-readout[data-readout-state="unavailable"] {
  opacity: var(--opacity-muted);
}

.ux-lab__weather-pair .eel-metadata-row {
  padding: 0;
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}

.ux-lab__weather-pair .eel-metadata-item {
  min-height: auto;
}

.ux-lab__telemetry-summary {
  margin-top: var(--mb-space-5);
}

.ux-lab__telemetry-summary .eel-metadata-row {
  margin-top: var(--mb-space-4);
}

.ux-lab__control-stack {
  display: grid;
  gap: var(--mb-space-3);
  min-width: 0;
}

.ux-lab__control-row,
.ux-lab__tab-preview,
.ux-lab__filter-row,
.ux-lab__state-pattern-toolbar,
.ux-lab__control-state-preview,
.ux-lab__gallery-preview,
.ux-lab__form-preview,
.ux-lab__accordion-actions,
.ux-lab__timeline-controls {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--mb-space-2);
  column-gap: var(--mb-space-3);
  align-items: center;
  min-width: 0;
}

.ux-lab__filter-preview {
  min-width: 0;
}

.ux-lab__state-pattern-preview,
.ux-lab__loading-preview,
.ux-lab__end-preview,
.ux-lab__control-state-preview {
  display: grid;
  gap: var(--mb-space-3);
  min-width: 0;
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__state-pattern-toolbar {
  padding-bottom: var(--mb-space-3);
  border-bottom: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.ux-lab__state-pattern-count,
.ux-lab__state-pattern-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-xs);
  min-height: var(--size-control-min);
  padding: var(--mb-space-2) var(--mb-space-3);
  color: var(--theme-eel-text-dark);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  text-transform: var(--text-case-uppercase);
  border-radius: var(--radius-pill);
}

.ux-lab__state-pattern-count {
  background: var(--theme-eel-biological-accent);
  color: var(--theme-eel-ink);
}

.ux-lab__state-pattern-chip {
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
}

.ux-lab__loading-preview {
  min-height: var(--size-media-card);
  align-content: center;
}

.ux-lab__loading-row {
  display: block;
  min-height: var(--size-control-min);
  width: 100%;
  background: var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
  opacity: var(--opacity-muted);
}

.ux-lab__loading-row--strong {
  background: var(--theme-eel-earth-accent);
  opacity: 1;
}

.ux-lab__loading-row--short {
  width: 62%;
}

.ux-lab__end-preview {
  min-height: var(--size-media-card);
  place-items: center;
  text-align: center;
}

.ux-lab__end-preview p {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ux-lab__end-rule {
  display: block;
  width: min(100%, var(--size-control-inline-lg));
  min-height: var(--border-width-subtle);
  background: var(--theme-eel-border-dark);
}

.ux-lab__control-state-preview {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ux-lab__tab,
.ux-lab__filter-chip,
.ux-lab__media-thumb,
.ux-lab__control-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-xs);
  min-height: var(--size-control-min);
  color: var(--theme-eel-text-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  background: var(--theme-eel-instrument-bg);
}

.ux-lab__tab,
.ux-lab__filter-chip,
.ux-lab__control-link {
  padding: var(--mb-space-2) var(--mb-space-4);
  border-radius: var(--radius-pill);
}

.ux-lab__tab.is-active,
.ux-lab__filter-chip.is-active,
.ux-lab__control-link.is-selected {
  color: var(--theme-eel-ink);
  background: var(--theme-eel-biological-accent);
}

.ux-lab__control-link {
  text-align: center;
  text-decoration: none;
}

.ux-lab__tab:disabled,
.ux-lab__filter-chip:disabled,
.ux-lab__control-link.is-disabled {
  cursor: not-allowed;
  color: var(--theme-eel-text-muted-dark);
  background: var(--theme-eel-instrument-bg);
  opacity: var(--opacity-muted);
}

.ux-lab__tab-panels,
.ux-lab__filter-results,
.ux-lab__filter-empty,
.ux-lab__timeline-empty {
  display: grid;
  gap: var(--mb-space-3);
}

.ux-lab__tab-panel[hidden],
.ux-lab__filter-empty[hidden],
.ux-lab__filter-results [hidden],
.ux-lab__timeline-empty[hidden],
.ux-lab__timeline-preview [hidden],
.ux-lab__modal-preview[hidden] {
  display: none;
}

.ux-lab__tab-panel,
.ux-lab__filter-results article,
.ux-lab__filter-status {
  min-width: 0;
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__tab-panel p,
.ux-lab__filter-status,
.ux-lab__filter-results span,
.ux-lab__filter-results strong {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ux-lab__filter-results article {
  display: grid;
  gap: var(--mb-space-1);
}

.ux-lab__filter-results span {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__filter-results strong {
  color: var(--theme-eel-text-dark);
  font-weight: var(--font-weight-semibold);
}

.ux-lab__search-field,
.ux-lab__form-preview label {
  display: grid;
  gap: var(--mb-space-2);
  min-width: min(100%, var(--size-control-inline-lg));
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__search-field input,
.ux-lab__form-preview input {
  min-height: var(--size-control-touch);
  width: 100%;
  color: var(--theme-eel-text-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
  padding: var(--mb-space-3) var(--mb-space-4);
}

.ux-lab__accordion-preview {
  display: grid;
  gap: var(--mb-space-3);
}

.ux-lab__accordion-preview details {
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__accordion-preview summary {
  color: var(--theme-eel-text-dark);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

.ux-lab__accordion-preview p {
  margin: var(--mb-space-3) 0 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ux-lab__media-thumb {
  display: grid;
  place-items: center;
  width: var(--size-control-modal);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
}

.ux-lab__media-thumb span {
  color: inherit;
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
}

.ux-lab__media-thumb.is-active {
  color: var(--theme-eel-ink);
  background: var(--theme-eel-earth-accent);
}

.ux-lab__form-preview {
  align-items: end;
}

.ux-lab__media-preview,
.ux-lab__modal-surface,
.ux-lab__form-message,
.ux-lab__timeline-count {
  display: grid;
  gap: var(--mb-space-3);
  min-width: 0;
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__media-preview {
  margin: 0;
}

.ux-lab__media-frame,
.ux-lab__modal-frame {
  display: grid;
  place-items: center;
  min-height: var(--size-media-card);
  color: var(--theme-eel-ink);
  font-family: var(--font-editorial);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  background: var(--theme-eel-biological-accent);
  border-radius: var(--radius-sm);
}

.ux-lab__media-preview figcaption,
.ux-lab__modal-copy,
.ux-lab__form-message {
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ux-lab__media-preview strong,
.ux-lab__media-preview span,
.ux-lab__modal-copy h4,
.ux-lab__modal-copy p,
.ux-lab__form-message strong,
.ux-lab__form-message span,
.ux-lab__timeline-count {
  margin: 0;
}

.ux-lab__media-preview figcaption {
  display: grid;
  gap: var(--mb-space-1);
}

.ux-lab__media-preview strong,
.ux-lab__modal-copy h4,
.ux-lab__form-message strong {
  color: var(--theme-eel-text-dark);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.ux-lab__modal-preview {
  position: fixed;
  inset: 0;
  z-index: var(--layer-overlay);
  display: grid;
  place-items: center;
  padding: var(--mb-space-5);
  background: var(--glass-fill-strong);
}

.ux-lab__modal-surface {
  width: min(100%, var(--container-prose));
  background: var(--theme-eel-ink);
}

.ux-lab__timeline-preview {
  display: grid;
  gap: var(--mb-space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.ux-lab__timeline-preview li {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr) auto;
  gap: var(--mb-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__timeline-date,
.ux-lab__timeline-title {
  min-width: 0;
}

.ux-lab__timeline-date {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__timeline-title {
  color: var(--theme-eel-text-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
}

.ux-lab__graph-preview,
.ux-lab__graph-controls,
.ux-lab__living-web-stage-card,
.ux-lab__living-web-toolbar,
.ux-lab__living-legend,
.ux-lab__living-mode-panels,
.ux-lab__living-mode-panel,
.ux-lab__living-list,
.ux-lab__living-detail,
.ux-lab__living-rule {
  display: grid;
  gap: var(--mb-space-3);
}

.ux-lab__graph-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-lab__graph-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--size-control-min), 0.5fr) minmax(0, 1fr);
  gap: var(--mb-space-3);
  align-items: center;
  min-height: var(--size-media-card);
  padding: var(--mb-space-5);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__graph-node {
  display: grid;
  place-items: center;
  min-height: var(--size-control-modal);
  padding: var(--mb-space-3);
  color: var(--theme-eel-ink);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  text-align: center;
  text-transform: var(--text-case-uppercase);
  border-radius: var(--radius-pill);
}

.ux-lab__graph-node--species {
  background: var(--theme-eel-biological-accent);
}

.ux-lab__graph-node--resource {
  background: var(--theme-eel-earth-accent);
}

.ux-lab__graph-edge {
  display: block;
  min-height: var(--border-width-accent);
  background: var(--theme-eel-border-dark);
}

.ux-lab__living-web-toolbar {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ux-lab__living-mode-panel[hidden] {
  display: none;
}

.ux-lab__living-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: var(--mb-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__living-list span,
.ux-lab__living-list strong {
  min-width: 0;
  color: var(--theme-eel-text-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ux-lab__living-list strong {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__living-web-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--size-control-inline-md), 0.42fr) minmax(0, 1fr);
  gap: var(--mb-space-5) var(--mb-space-4);
  align-items: center;
  min-height: calc(var(--size-media-card) + var(--size-control-touch));
  padding: var(--mb-space-5);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent calc(100% - var(--border-width-subtle)), var(--theme-eel-border-dark) 100%),
    linear-gradient(180deg, transparent calc(100% - var(--border-width-subtle)), var(--theme-eel-border-dark) 100%),
    var(--theme-eel-instrument-bg);
  background-size: var(--size-control-modal) var(--size-control-modal);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__living-density {
  margin: 0;
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__living-node {
  z-index: var(--layer-raised);
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: var(--size-control-modal);
  padding: var(--mb-space-2);
  color: var(--theme-eel-ink);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  text-align: center;
  text-transform: var(--text-case-uppercase);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.ux-lab__living-edge-control {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: var(--size-control-min);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  line-height: var(--leading-tight);
  text-align: center;
  text-transform: var(--text-case-uppercase);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.ux-lab__living-edge-control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  min-height: var(--border-width-accent);
  background: var(--theme-eel-biological-accent);
}

.ux-lab__living-edge-control--potential::before,
.ux-lab__living-edge-control--historical::before {
  background: transparent;
  border-top: var(--border-width-accent) var(--border-style-dashed) var(--theme-eel-earth-accent);
}

.ux-lab__living-edge-control--historical::before {
  border-color: var(--theme-eel-border-dark);
}

.ux-lab__living-edge-control span {
  position: relative;
  z-index: var(--layer-raised);
  padding: var(--mb-space-1) var(--mb-space-2);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-pill);
}

.ux-lab__living-node--species {
  background: var(--theme-eel-biological-accent);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
}

.ux-lab__living-node--resource {
  color: var(--theme-eel-text-dark);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-earth-accent);
}

.ux-lab__living-node--primary {
  grid-column: 1;
  grid-row: 1;
}

.ux-lab__living-node--detritus {
  grid-column: 3;
  grid-row: 1;
}

.ux-lab__living-node--ghost-source {
  grid-column: 1;
  grid-row: 2;
}

.ux-lab__living-node--biofilm-target {
  grid-column: 3;
  grid-row: 2;
}

.ux-lab__living-node--biofilm-source {
  grid-column: 1;
  grid-row: 3;
}

.ux-lab__living-node--ghost-target {
  grid-column: 3;
  grid-row: 3;
}

.ux-lab__living-edge-control--current {
  grid-column: 2;
  grid-row: 1;
}

.ux-lab__living-edge-control--potential {
  grid-column: 2;
  grid-row: 2;
}

.ux-lab__living-edge-control--historical {
  grid-column: 2;
  grid-row: 3;
}

.ux-lab__living-node:hover,
.ux-lab__living-node:focus-visible,
.ux-lab__living-edge-control:hover,
.ux-lab__living-edge-control:focus-visible {
  color: var(--theme-eel-ink);
  background: var(--theme-eel-biological-accent);
}

.ux-lab__living-node:focus-visible,
.ux-lab__living-edge-control:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.ux-lab__living-legend {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--mb-space-2);
}

.ux-lab__living-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  min-width: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__legend-dot,
.ux-lab__legend-line {
  flex: 0 0 auto;
}

.ux-lab__legend-dot {
  width: var(--mb-space-3);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.ux-lab__legend-dot--species {
  background: var(--theme-eel-biological-accent);
}

.ux-lab__legend-dot--resource {
  background: var(--theme-eel-earth-accent);
}

.ux-lab__legend-line {
  width: var(--size-control-inline-sm);
  height: var(--border-width-accent);
  background: var(--theme-eel-border-dark);
}

.ux-lab__legend-line--current {
  background: var(--theme-eel-biological-accent);
}

.ux-lab__legend-line--potential,
.ux-lab__legend-line--historical {
  background: transparent;
  border-top: var(--border-width-accent) var(--border-style-dashed) var(--theme-eel-earth-accent);
}

.ux-lab__legend-line--historical {
  border-color: var(--theme-eel-border-dark);
}

.ux-lab__living-detail {
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__living-detail-action {
  justify-self: start;
  color: var(--theme-eel-ink);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-decoration: none;
  text-transform: var(--text-case-uppercase);
  background: var(--theme-eel-biological-accent);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-biological-accent);
  border-radius: var(--radius-pill);
  padding: var(--mb-space-2) var(--mb-space-4);
}

.ux-lab__living-detail-action:hover,
.ux-lab__living-detail-action:focus-visible {
  color: var(--theme-eel-ink);
  text-decoration: none;
  background: var(--theme-eel-earth-accent);
}

.ux-lab__living-detail-action:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  box-shadow: var(--focus-ring-shadow);
}

.ux-lab__living-detail-kicker,
.ux-lab__living-rule .eel-status-chip {
  justify-self: start;
}

.ux-lab__living-detail-kicker {
  margin: 0 0 var(--mb-space-1);
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__living-detail h4,
.ux-lab__living-rule h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.ux-lab__living-detail p,
.ux-lab__living-rule p {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ux-lab__pattern-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mb-space-2);
  min-height: var(--size-media-card);
  padding: var(--mb-space-4);
  background: var(--theme-eel-instrument-bg);
  border: var(--border-width-subtle) var(--border-style-solid) var(--theme-eel-border-dark);
  border-radius: var(--radius-sm);
}

.ux-lab__pattern-map--detail,
.ux-lab__pattern-map--monitoring,
.ux-lab__pattern-map--graph,
.ux-lab__pattern-map--faq {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ux-lab__pattern-map--feed {
  align-content: start;
  grid-template-columns: 1fr;
}

.ux-lab__pattern-block,
.ux-lab__pattern-line,
.ux-lab__pattern-pill {
  display: block;
  min-width: 0;
  background: var(--theme-eel-border-dark);
}

.ux-lab__pattern-block {
  min-height: var(--size-control-modal);
  border-radius: var(--radius-sm);
}

.ux-lab__pattern-block--hero {
  grid-column: 1 / -1;
  min-height: var(--size-control-touch);
  background: var(--theme-eel-biological-accent);
}

.ux-lab__pattern-block--wide {
  grid-column: 1 / -1;
}

.ux-lab__pattern-line {
  min-height: var(--size-control-min);
  border-radius: var(--radius-pill);
}

.ux-lab__pattern-pill {
  min-height: var(--size-control-min);
  border-radius: var(--radius-pill);
  background: var(--theme-eel-earth-accent);
}

.ux-lab__checklist,
.ux-lab__promotion-steps {
  display: grid;
  gap: var(--mb-space-3);
  margin: 0;
  padding-left: var(--mb-space-5);
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ux-lab__checklist li,
.ux-lab__promotion-steps li {
  padding-left: var(--mb-space-1);
}

.ux-lab__definition span,
.ux-lab__backlog h3 {
  color: var(--theme-eel-biological-accent);
  font-family: var(--font-telemetry);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-telemetry);
  text-transform: var(--text-case-uppercase);
}

.ux-lab__definition h3,
.ux-lab__rule h3,
.ux-lab__backlog h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.ux-lab__definition p,
.ux-lab__rule p,
.ux-lab__backlog p {
  margin: 0;
  color: var(--theme-eel-text-muted-dark);
  font-family: var(--font-eel-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.ux-lab__state .eel-state {
  min-height: var(--size-media-card);
}

.ux-lab__state .eel-metadata-row {
  margin-top: var(--mb-space-4);
}

@media (max-width: 1024px) {
  .ux-lab__definition-grid,
  .ux-lab__overview,
  .ux-lab__state-pattern-grid,
  .ux-lab__outcome-state-grid,
  .ux-lab__telemetry-grid,
  .ux-lab__weather-pair,
  .ux-lab__interaction-grid,
  .ux-lab__pattern-grid,
  .ux-lab__living-web-grid,
  .ux-lab__living-rule-grid,
  .ux-lab__living-state-strip,
  .ux-lab__stewardship-grid,
  .ux-lab__rule-grid,
  .ux-lab__node-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-lab__state-pattern--wide {
    grid-column: 1 / -1;
  }

  .ux-lab__telemetry-grid {
    grid-template-columns: 1fr;
  }

  .ux-lab__living-web-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ux-lab {
    padding: var(--mb-space-16) 0;
  }

  .ux-lab__header {
    margin-bottom: var(--mb-space-12);
  }

  .ux-lab__overview,
  .ux-lab__state-grid,
  .ux-lab__state-pattern-grid,
  .ux-lab__outcome-state-grid,
  .ux-lab__node-grid,
  .ux-lab__weather-pair,
  .ux-lab__interaction-grid,
  .ux-lab__pattern-grid,
  .ux-lab__living-rule-grid,
  .ux-lab__living-state-strip,
  .ux-lab__stewardship-grid,
  .ux-lab__rule-grid,
  .ux-lab__backlog {
    grid-template-columns: 1fr;
  }

  .ux-lab__overview {
    padding: var(--mb-space-5);
  }

  .ux-lab__jump-nav a {
    flex: 1 1 calc(50% - var(--mb-space-2));
    text-align: center;
  }

  .ux-lab__timeline-preview li,
  .ux-lab__graph-controls,
  .ux-lab__graph-stage,
  .ux-lab__control-state-preview,
  .ux-lab__living-web-toolbar,
  .ux-lab__living-legend,
  .ux-lab__living-list article,
  .ux-lab__filter-results article {
    grid-template-columns: 1fr;
  }

  .ux-lab__state-pattern--wide {
    grid-column: auto;
  }

  .ux-lab__living-web-stage {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .ux-lab__weather-pair .eel-sensor-grid--compact {
    grid-template-columns: 1fr;
  }

  .ux-lab__graph-edge {
    min-height: var(--border-width-accent);
    width: var(--border-width-accent);
    justify-self: center;
  }

  .ux-lab__living-node--primary,
  .ux-lab__living-node--detritus,
  .ux-lab__living-node--ghost-source,
  .ux-lab__living-node--biofilm-target,
  .ux-lab__living-node--biofilm-source,
  .ux-lab__living-node--ghost-target,
  .ux-lab__living-edge-control--current,
  .ux-lab__living-edge-control--potential,
  .ux-lab__living-edge-control--historical {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .ux-lab__definition-grid {
    grid-template-columns: 1fr;
  }

  .ux-lab__header h1 {
    font-size: var(--text-2xl);
  }

  .ux-lab__section-header h2 {
    font-size: var(--text-xl);
  }
}

@media (max-width: 480px) {
  .ux-lab__overview,
  .ux-lab__definition,
  .ux-lab__state,
  .ux-lab__state-pattern,
  .ux-lab__telemetry-cluster,
  .ux-lab__telemetry-summary,
  .ux-lab__interaction,
  .ux-lab__pattern,
  .ux-lab__living-web-stage-card,
  .ux-lab__living-rule,
  .ux-lab__stewardship-card,
  .ux-lab__rule,
  .ux-lab__backlog article {
    padding: var(--mb-space-4);
  }

  .ux-lab__jump-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ux-lab__jump-nav a {
    display: grid;
    place-items: center;
    padding-inline: var(--mb-space-2);
  }
}