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

:root {
  /* Fallback colors for browsers without OKLCH support */
  --primary-color: #007bff;
  --primary-color-dark: #014389;
  --primary-color-light: #69bff7;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --danger-color-dark: #b8303b;
  --light-gray: #f8f9fadc;
  --medium-gray: #959798;
  --medium-gray-dark: #5a5c5d;
  --dark-gray: #343a40;
  --blueish-gray: #4a5568;
  --black: #000000;
  --spacing-unit: 0.5rem;

  --badge-primary: var(--primary-color);
  --badge-secondary: #5a9dd8;
  --badge-tertiary: #b8d9f2;
  --badge-stop: #0b0b0b;
  --badge-danger: #8B0000;
  --badge-warning: #d16a3a;
  --badge-caution: #d9a65c;
  --badge-notice: #f0de8f;
  --badge-ready: #5ba35b;

  /* Unified load axis — ONE scale for muscle demand, recovery state, and
     energy system intensity. Aliases `--badge-*` so there's one ladder
     across readiness, element chip tint, stimulus chips, and gap severity. */
  --load-rest: #5ba35b;      /* green — recovered / skill / low demand */
  --load-light: #f0de8f;     /* yellow — partial recovery / oxidative */
  --load-moderate: #d9a65c;  /* amber — moderate fatigue / mixed modal */
  --load-heavy: #d16a3a;     /* orange — high fatigue / glycolytic */
  --load-max: #8B0000;       /* red — very high fatigue / phosphagen */
  --load-stop: #0b0b0b;      /* near-black — critical stop */

  /* Cool accents for concepts NOT on the load axis */
  --accent-cycle: #007bff;   /* blue — cycle membership */
  --accent-skill: #6f42c1;   /* violet — skill stimulus */

  /* Surface and text tokens — many stylesheets reference these with inline
     fallbacks. Declaring them here makes the fallbacks authoritative. */
  --surface-raised: #f9fafb;
  --surface-hover: #f3f4f6;
  --border: #e5e7eb;
  --border-emphasis: #9ca3af;
  --text-muted: #6b7280;
  --medium-gray-light: #d1d5db;

  /* Light-theme surfaces (plan view, modals, light timeline) */
  --surface-white: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #f1f5f9;

  /* Text on light surfaces */
  --text-primary: #111827;
  --text-secondary: #475569;
  --text-tertiary: #64748b;

  /* Alert / status */
  --alert-error-bg: #fef2f2;
  --alert-error-border: #fecaca;
  --alert-error-text: #dc2626;
  --alert-error-muted: #7f1d1d;
  --alert-warning-bg: #fef3c7;
  --alert-warning-border: #fbbf24;
  --alert-warning-text: #92400e;
  --alert-success-bg: #dcfce7;
  --alert-success-border: #16a34a;
  --alert-success-text: #166534;

  /* Syntax-highlight grammar tokens */
  --hl-quantity: #ea580c;
  --hl-element: #16a34a;
  --hl-condition: #9333ea;
  --hl-scaling: #0d9488;
  --hl-prescription: #0369a1;

  /* Autocomplete category badge colours */
  --category-structure-bg: #f3e8ff;
  --category-structure-text: #9333ea;
  --category-element-bg: #dcfce7;
  --category-element-text: #16a34a;
  --category-unit-bg: #ffedd5;
  --category-unit-text: #ea580c;
  --category-prescription-bg: #e0f2fe;
  --category-prescription-text: #0369a1;

  /* Info badge (similar-workouts link) */
  --badge-info-bg: #e8f2fb;
  --badge-info-text: #1a5f9e;
  --badge-info-border: #b8d4ee;

  /* Light-theme timeline block tints */
  --timeline-light-neutral: #f1f5f9;
  --timeline-light-neutral-text: #64748b;
  --timeline-light-warmup: #ecfdf5;
  --timeline-light-warmup-text: #065f46;
  --timeline-light-workout: #eff6ff;
  --timeline-light-workout-text: #1e40af;

  /* Energy-system badge backgrounds */
  --energy-phosphagen: #c0503a;
  --energy-glycolytic: #c49350;
  --energy-oxidative: #4a8c4a;
  --energy-skill: #007bff;

  /* Element chip tile backgrounds by usage_type */
  --chip-partner-bg: #dbd7f5;
  --chip-partner-bg-hover: #c9c2f0;
  --chip-activation-bg: #d8e6f3;
  --chip-activation-bg-hover: #bfd5ec;
  --chip-stretching-bg: #d5eae9;
  --chip-stretching-bg-hover: #bbdde0;
}

/* OKLCH colors for modern browsers */
@supports (color: oklch(0 0 0)) {
  :root {
    /* Chroma (vibrancy) control - adjust this single value to change saturation globally */
    --chroma: 0.15;
    --chroma-gray: 0.02;  /* For grays only */
    --chroma-none: 0;     /* For pure black */

    /* Primary colors - blue */
    --primary-color: oklch(55% var(--chroma) 250);
    --primary-color-dark: oklch(35% var(--chroma) 250);
    --primary-color-light: oklch(75% var(--chroma) 250);

    /* Secondary and grays */
    --secondary-color: oklch(55% var(--chroma-gray) 255);
    --light-gray: oklch(98% 0.01 255 / 0.86);
    --medium-gray: oklch(65% 0.01 255);
    --medium-gray-dark: oklch(45% 0.01 255);
    --dark-gray: oklch(30% var(--chroma-gray) 255);
    --blueish-gray: oklch(40% var(--chroma-gray) 250);
    --black: oklch(0% var(--chroma-none) 0);

    /* Success and danger */
    --success-color: oklch(60% var(--chroma) 145);
    --danger-color: oklch(55% var(--chroma) 25);
    --danger-color-dark: oklch(45% var(--chroma) 25);

    /* Badge colors */
    --badge-secondary: color-mix(in oklch, var(--primary-color) 70%, white 20%);
    --badge-tertiary: color-mix(in oklch, var(--primary-color) 70%, white 70%);

    /* Rank badge colors - cycle progress indicators */
    --badge-stop: oklch(20% var(--chroma-gray) 0);
    --badge-danger: oklch(40% var(--chroma) 25);
    --badge-warning: oklch(55% var(--chroma) 35);
    --badge-caution: oklch(70% var(--chroma) 70);
    --badge-notice: oklch(85% var(--chroma) 95);
    --badge-ready: oklch(65% var(--chroma) 145);

    /* Unified load axis — aliases the --badge-* ladder. Any surface that
       represents muscle demand, recovery, intensity, or fatigue should
       reference these semantic names rather than --badge-* directly. */
    --load-rest: var(--badge-ready);
    --load-light: var(--badge-notice);
    --load-moderate: var(--badge-caution);
    --load-heavy: var(--badge-warning);
    --load-max: var(--badge-danger);
    --load-stop: var(--badge-stop);

    /* Cool accents for concepts off the load axis */
    --accent-cycle: var(--primary-color);
    --accent-skill: oklch(55% var(--chroma) 280);

    /* Surface and text tokens */
    --surface-raised: oklch(98% 0.005 255);
    --surface-hover: oklch(96% 0.005 255);
    --border: oklch(92% 0.005 255);
    --border-emphasis: oklch(72% 0.01 255);
    --text-muted: oklch(55% 0.01 255);
    --medium-gray-light: oklch(85% 0.01 255);

    /* Light-theme surfaces */
    --surface-white: oklch(100% 0 0);
    --surface-subtle: oklch(98.5% 0.005 255);
    --surface-muted: oklch(97% 0.01 250);

    /* Text on light surfaces */
    --text-primary: oklch(15% 0.01 255);
    --text-secondary: oklch(40% 0.01 250);
    --text-tertiary: oklch(50% 0.01 250);

    /* Alert / status */
    --alert-error-bg: oklch(97% 0.01 25);
    --alert-error-border: oklch(88% 0.06 25);
    --alert-error-text: oklch(50% 0.18 25);
    --alert-error-muted: oklch(25% 0.05 25);
    --alert-warning-bg: oklch(97% 0.04 85);
    --alert-warning-border: oklch(80% 0.14 85);
    --alert-warning-text: oklch(45% 0.1 70);
    --alert-success-bg: oklch(96% 0.04 145);
    --alert-success-border: oklch(60% 0.15 145);
    --alert-success-text: oklch(35% 0.08 145);

    /* Syntax-highlight grammar tokens */
    --hl-quantity: oklch(60% 0.16 40);
    --hl-element: oklch(60% 0.16 145);
    --hl-condition: oklch(50% 0.2 305);
    --hl-scaling: oklch(55% 0.12 185);
    --hl-prescription: oklch(50% 0.12 240);

    /* Autocomplete category badge colours */
    --category-structure-bg: oklch(95% 0.04 305);
    --category-structure-text: oklch(50% 0.2 305);
    --category-element-bg: oklch(96% 0.04 145);
    --category-element-text: oklch(60% 0.16 145);
    --category-unit-bg: oklch(96% 0.04 55);
    --category-unit-text: oklch(60% 0.16 40);
    --category-prescription-bg: oklch(96% 0.04 240);
    --category-prescription-text: oklch(50% 0.12 240);

    /* Info badge */
    --badge-info-bg: color-mix(in oklch, var(--primary-color) 12%, white);
    --badge-info-text: oklch(45% 0.1 250);
    --badge-info-border: color-mix(in oklch, var(--primary-color) 30%, white);

    /* Light-theme timeline block tints */
    --timeline-light-neutral: var(--surface-muted);
    --timeline-light-neutral-text: var(--text-tertiary);
    --timeline-light-warmup: color-mix(in oklch, var(--success-color) 8%, white);
    --timeline-light-warmup-text: oklch(35% 0.08 160);
    --timeline-light-workout: color-mix(in oklch, var(--primary-color) 8%, white);
    --timeline-light-workout-text: oklch(40% 0.12 255);

    /* Energy-system badge backgrounds */
    --energy-phosphagen: oklch(55% 0.2 25);
    --energy-glycolytic: oklch(65% 0.18 55);
    --energy-oxidative: oklch(60% 0.18 145);
    --energy-skill: var(--primary-color);

    /* Element chip tile backgrounds by usage_type — identify type at a glance.
       Activation is now cool-blue (was amber 70°, which collided with
       --load-moderate). */
    --chip-partner-bg: oklch(92% 0.07 280);
    --chip-partner-bg-hover: oklch(88% 0.1 280);
    --chip-activation-bg: oklch(93% 0.06 220);
    --chip-activation-bg-hover: oklch(89% 0.08 220);
    --chip-stretching-bg: oklch(93% 0.06 200);
    --chip-stretching-bg-hover: oklch(89% 0.08 200);
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  background: linear-gradient(to bottom, var(--blueish-gray) 0px, var(--dark-gray) 600px);
  background-repeat: no-repeat;
  background-color: var(--dark-gray); /* Fallback for content beyond 600px */
  color: var(--light-gray);
  font-size: 16px;
  min-height: 100vh; /* Ensure body fills viewport */
}

footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--medium-gray);
}

dl {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
}

dt {
  font-weight: 900;
}

dd {
  margin-left: 1rem;
}

@keyframes ready-gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

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

/* Modal Styles */
.modal-open {
  overflow: hidden;
}

/* Generic Modal System */
.modal-dialog {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  max-width: 32rem;
  margin: auto; /* Center in viewport */
  position: fixed;
  inset: 0;
  z-index: 1001;
  padding: 0;
  border: none;
  transform: scale(0.95);
  opacity: 0;
  animation: modalFadeIn 0.15s ease-out forwards;
}

.modal-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.modal-dialog:not([open]) {
  display: none;
}

@keyframes modalFadeIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-header {
  background-color: var(--light-gray);
  border-bottom: 1px solid var(--medium-gray);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  background-color: white;
  color: var(--dark-gray);
  padding: 1.5rem;
}

.modal-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 1rem;
}

/* Modal component variations */
.modal-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-text {
  margin-bottom: 1.5rem;
}

/* Error list styling */
.errors {
  margin-bottom: 1rem;
  color: var(--danger-color);
  list-style: disc;
  padding-left: 1.5rem;
}

.errors li {
  margin-bottom: 0.25rem;
}