/* =============================================================================
   EMBER ATHLETIC — Design System
   A bespoke, production-grade visual language for WorkoutGenerator.

   Goals (researched 2026 guidance):
   - Distinct warm "ember" identity (not the generic purple / neon-green crowd).
   - Restrained, role-based palette with real 50–950 scales + semantic colors.
   - Anti-liquid-glass: crisp surfaces, hairline borders + layered shadow (no blur soup).
   - Telemetry typography: condensed athletic display + tabular monospaced stats.
   - Fluid type via clamp(), accessible focus, prefers-reduced-motion.
   - One bespoke hero gradient + atmospheric glow (no gradients-on-everything).

   Architecture: this sheet loads LAST on every page. It (a) redefines the
   design tokens the app already consumes so existing components reskin
   instantly, and (b) ships new Ember components + careful light/dark theming
   for surfaces and modals.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* -----------------------------------------------------------------------------
   1. TOKENS
---------------------------------------------------------------------------- */
:root {
  /* --- Ember brand scale (50 → 950) --- */
  --ember-50:  #FFF4EC;
  --ember-100: #FFE6D3;
  --ember-200: #FFC9A3;
  --ember-300: #FFA567;
  --ember-400: #FF8A3D;
  --ember-500: #FF6B00;   /* core brand */
  --ember-600: #E85D00;
  --ember-700: #C24A04;
  --ember-800: #993B0B;
  --ember-900: #7A320F;
  --ember-950: #421803;

  /* --- Signature gradients (bespoke, NOT stock presets) --- */
  --grad-ember:   linear-gradient(135deg, #FFA62B 0%, #FF6B00 46%, #FF2E4D 112%);
  --grad-ember-soft: linear-gradient(135deg, #FF8A3D 0%, #FF5630 100%);
  --grad-coal:    linear-gradient(160deg, #1A1A22 0%, #0C0C10 100%);
  --grad-solar:   radial-gradient(120% 120% at 85% -10%, rgba(255,107,0,.20) 0%, rgba(255,46,77,.06) 38%, transparent 70%);

  /* --- Semantic colors --- */
  --c-success: #16B364;
  --c-success-soft: rgba(22,179,100,.14);
  --c-warning: #F5A524;
  --c-warning-soft: rgba(245,165,36,.16);
  --c-danger:  #F4334E;
  --c-danger-soft: rgba(244,51,78,.14);
  --c-info:    #2D8CFF;
  --c-info-soft: rgba(45,140,255,.14);

  /* --- Warm-tinted neutral scale --- */
  --n-0:  #FFFFFF;
  --n-25: #FBFAF8;
  --n-50: #F6F4F1;
  --n-100:#EDEAE5;
  --n-200:#DEDAD3;
  --n-300:#C4BEB4;
  --n-400:#9C958A;
  --n-500:#736C61;
  --n-600:#544E45;
  --n-700:#3A352E;
  --n-800:#26221C;
  --n-900:#171411;
  --n-950:#0C0A08;

  /* --- LIGHT THEME surfaces (default) --- */
  --bg-app:      #F4F1EC;          /* warm paper backdrop */
  --bg-app-tint: var(--grad-solar);
  --surface-1:   #FFFFFF;          /* cards */
  --surface-2:   #FBF9F6;          /* insets / subtle panels */
  --surface-3:   #F2EEE8;          /* hover / track */
  --line:        rgba(23,20,17,.10);
  --line-strong: rgba(23,20,17,.16);
  --ink-1:       #1A1712;          /* primary text */
  --ink-2:       #564F45;          /* secondary text */
  --ink-3:       #837B6E;          /* muted text */
  --ink-on-brand:#FFFFFF;

  /* --- Elevation (layered, soft, warm-tinted) --- */
  --shadow-xs: 0 1px 2px rgba(40,28,12,.06);
  --shadow-sm: 0 1px 2px rgba(40,28,12,.06), 0 2px 6px rgba(40,28,12,.06);
  --shadow-md: 0 2px 4px rgba(40,28,12,.06), 0 8px 20px rgba(40,28,12,.10);
  --shadow-lg: 0 4px 8px rgba(40,28,12,.07), 0 20px 40px rgba(40,28,12,.14);
  --shadow-xl: 0 8px 16px rgba(40,28,12,.08), 0 32px 64px rgba(40,28,12,.18);
  --glow-ember: 0 6px 22px rgba(255,107,0,.34);

  /* --- Radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Spacing scale (8pt-ish, athletic ledger) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* --- Typography --- */
  --font-display: 'Barlow Condensed', 'Oswald', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-2xs: clamp(.68rem, .66rem + .1vw, .72rem);
  --fs-xs:  clamp(.75rem, .72rem + .12vw, .8rem);
  --fs-sm:  clamp(.85rem, .82rem + .15vw, .92rem);
  --fs-md:  clamp(.95rem, .92rem + .2vw, 1.02rem);
  --fs-lg:  clamp(1.1rem, 1.04rem + .35vw, 1.28rem);
  --fs-xl:  clamp(1.4rem, 1.25rem + .7vw, 1.85rem);
  --fs-2xl: clamp(1.9rem, 1.55rem + 1.5vw, 2.9rem);
  --fs-3xl: clamp(2.6rem, 2rem + 2.6vw, 4.2rem);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;

  /* === Bridge: override the app's existing tokens so legacy components reskin === */
  --primary-color: var(--ember-500);
  --primary-hover: var(--ember-600);
  --primary-dark:  var(--ember-700);
  --primary-light: var(--ember-300);
  --secondary-color: #2A2632;
  --secondary-hover: #1F1C26;
  --accent-color: var(--ember-400);
  --success-color: var(--c-success);
  --warning-color: var(--c-warning);
  --error-color: var(--c-danger);
  --danger-color: var(--c-danger);
  --info-color: var(--c-info);
  --time-color: var(--ember-600);

  --text-primary: var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-color: var(--ink-1);
  --text-inverse: #FFFFFF;
  --white: #FFFFFF;
  --dark: var(--n-900);

  --light-bg: var(--bg-app);
  --bg-primary: var(--bg-app);
  --bg-secondary: var(--surface-2);
  --bg-card: var(--surface-1);
  --card-bg: var(--surface-1);
  --modal-bg: var(--surface-1);
  --hover-bg: var(--surface-3);
  --bg-hover: var(--surface-3);
  --border-color: var(--line);
  --border-light: var(--line-strong);
  --hover-border-color: var(--ember-400);
  --ring-color: var(--ember-500);

  --card-shadow: var(--shadow-md);
  --shadow-sm: var(--shadow-sm);
  --border-radius: var(--r-md);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
  --font-family: var(--font-ui);
  --transition-speed: var(--t-med);

  /* kill the stock uiGradients presets that screamed "vibe-coded template" */
  --primary-gradient: var(--grad-ember);
  --secondary-gradient: linear-gradient(135deg, #3A3543 0%, #211E29 100%);
  --accent-gradient: var(--grad-ember-soft);
  --success-gradient: linear-gradient(135deg, #16B364 0%, #36CE86 100%);
  --warning-gradient: linear-gradient(135deg, #F5A524 0%, #FFC861 100%);

  /* card-selection bridge vars */
  --selected-border-color: var(--ember-500);
  --selected-bg-start: var(--ember-50);
  --selected-name-color: var(--ember-700);
  --selected-checkmark-color: var(--ember-500);
}

/* -----------------------------------------------------------------------------
   2. DARK THEME
   The app toggles dark mode via body.dark-mode / [data-theme="dark"]; also
   respect the OS preference. Warm-tinted zinc surfaces, never pure black.
---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not([data-theme="light"]) { color-scheme: dark; }
}

/* Higher specificity (html …) so these Ember dark tokens win over the app's
   own css/dark-mode.css even when that sheet is loaded later in the document. */
html body.dark-mode, html body.dark, html [data-theme="dark"],
html[data-theme="dark"], html .dark-mode {
  --bg-app:    #0B0A0D;
  --bg-app-tint: radial-gradient(120% 120% at 85% -10%, rgba(255,107,0,.16) 0%, rgba(255,46,77,.05) 40%, transparent 72%);
  --surface-1: #17161C;
  --surface-2: #1F1D25;
  --surface-3: #2A2833;
  --line:        rgba(255,255,255,.09);
  --line-strong: rgba(255,255,255,.16);
  --ink-1: #F5F3F0;
  --ink-2: #BCB6AD;
  --ink-3: #8B857B;

  /* bridge vars the app's dark sheet also sets — keep them on-system */
  --card-bg: #17161C;
  --modal-bg: #17161C;
  --hover-bg: #2A2833;
  --border-light: rgba(255,255,255,.16);
  --bg-card: #17161C;
  --light-bg: #0B0A0D;
  --text-primary: #F5F3F0;
  --text-secondary: #BCB6AD;
  --text-muted: #8B857B;
  --text-color: #F5F3F0;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 2px 6px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 6px 14px rgba(0,0,0,.5), 0 26px 50px rgba(0,0,0,.55);
  --shadow-xl: 0 10px 22px rgba(0,0,0,.55), 0 40px 80px rgba(0,0,0,.6);
  --glow-ember: 0 6px 26px rgba(255,107,0,.45);

  --secondary-color: #EDEAE5;
  --secondary-hover: #FFFFFF;
  --dark: #FFFFFF;
  --white: #17161C;
  --text-inverse: #0B0A0D;
  --selected-bg-start: rgba(255,107,0,.12);
  --selected-name-color: var(--ember-300);
}

/* OS-level dark when the app hasn't explicitly chosen light */
@media (prefers-color-scheme: dark) {
  body:not(.dark-mode):not(.theme-light):not([data-theme="light"]):not(.light-mode) {
    --bg-app:    #0B0A0D;
    --bg-app-tint: radial-gradient(120% 120% at 85% -10%, rgba(255,107,0,.16) 0%, rgba(255,46,77,.05) 40%, transparent 72%);
    --surface-1: #17161C; --surface-2: #1F1D25; --surface-3: #2A2833;
    --line: rgba(255,255,255,.09); --line-strong: rgba(255,255,255,.16);
    --ink-1: #F5F3F0; --ink-2: #BCB6AD; --ink-3: #8B857B;
    --secondary-color: #EDEAE5; --dark: #FFFFFF; --white: #17161C;
  }
}

/* -----------------------------------------------------------------------------
   3. BASE / GLOBAL POLISH
---------------------------------------------------------------------------- */
body {
  font-family: var(--font-ui);
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: .005em;
}

/* Atmospheric ember glow over the app background (subtle, fixed) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-app-tint);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, .display, .ember-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .005em;
  line-height: 1.04;
  color: var(--ink-1);
}
h1, .ember-display { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

a { color: var(--ember-600); }
a:hover { color: var(--ember-700); }
.dark-mode a, [data-theme="dark"] a { color: var(--ember-300); }
.dark-mode a:hover, [data-theme="dark"] a:hover { color: var(--ember-200); }

::selection { background: rgba(255,107,0,.24); color: var(--ink-1); }

/* Accessible focus ring everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ember-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Tabular figures for any explicit numeric/stat element */
.stat-value, .metric-value, .count, [data-numeric], .ember-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

/* Refined scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
.dark-mode *, [data-theme="dark"] * { scrollbar-color: #3A3743 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--n-300);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
.dark-mode ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3743; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ember-400); background-clip: content-box; }

/* -----------------------------------------------------------------------------
   4. COMPONENT POLISH (hooks onto common existing classes, safely)
---------------------------------------------------------------------------- */

/* Buttons: primary brand actions */
.btn-primary, .primary-btn, .button-primary,
button.primary, .cta-button, .generate-btn, .btn.btn-primary {
  background: var(--grad-ember) !important;
  color: var(--ink-on-brand) !important;
  border: none !important;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--glow-ember);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              filter var(--t-fast) var(--ease-out);
}
.btn-primary:hover, .primary-btn:hover, .button-primary:hover,
button.primary:hover, .cta-button:hover, .generate-btn:hover, .btn.btn-primary:hover {
  transform: translateY(-2px);
  filter: saturate(1.06) brightness(1.03);
  box-shadow: 0 10px 30px rgba(255,107,0,.42);
}
.btn-primary:active, .primary-btn:active, .cta-button:active, .generate-btn:active {
  transform: translateY(0);
}

/* Secondary / ghost buttons */
.btn-secondary, .secondary-btn, .button-secondary, .btn-outline, .ghost-btn {
  background: var(--surface-1);
  color: var(--ink-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-weight: 600;
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn-secondary:hover, .secondary-btn:hover, .btn-outline:hover, .ghost-btn:hover {
  border-color: var(--ember-400);
  color: var(--ember-600);
  transform: translateY(-1px);
}

/* Generic card surfaces */
.card, .dashboard-card, .stat-card, .panel, .widget,
.workout-card, .info-card, .summary-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="date"], select, textarea {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-1);
  font-family: var(--font-ui);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ember-500);
  box-shadow: 0 0 0 3px rgba(255,107,0,.16);
  outline: none;
}
::placeholder { color: var(--ink-3); }

/* Badges / chips */
.badge, .tag, .chip, .pill {
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   5. MODALS — light & dark, readable text, preserved spacing
   Targets the many modal conventions used across the app without changing
   their box-model/spacing (only color, border, radius, shadow, type).
---------------------------------------------------------------------------- */
.modal-overlay, .modal-backdrop, .overlay,
.modal.show, .modal.open, .modal[style*="display: flex"], .modal[style*="display:flex"] {
  background: rgba(12,10,8,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.modal-content, .modal-dialog, .modal-box, .modal-inner, .dialog,
.modal-container, .popup-content, .modal .content, .wizard-modal,
.modal-card {
  background: var(--surface-1);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
}

/* Make sure modal text inherits a readable color in BOTH themes
   (only sets color where the element/theme would otherwise be ambiguous) */
.modal-content, .modal-dialog, .modal-box, .modal-inner, .dialog,
.modal-container, .popup-content, .wizard-modal, .modal-card {
  --_modal-ink: var(--ink-1);
}
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4,
.modal-dialog h1, .modal-dialog h2, .modal-dialog h3, .modal-dialog h4,
.modal-box h1, .modal-box h2, .modal-box h3,
.modal-title, .modal-header h2, .modal-header h3, .dialog-title {
  color: var(--ink-1);
}
.modal-content p, .modal-content li, .modal-content label, .modal-content span:not([class*="badge"]):not([class*="tag"]),
.modal-dialog p, .modal-dialog label, .dialog p, .popup-content p {
  color: var(--ink-2);
}
.modal-content small, .modal-content .muted, .modal-content .hint,
.modal-content .subtitle, .dialog .subtitle { color: var(--ink-3); }

.modal-header, .modal-footer, .dialog-header, .dialog-footer {
  border-color: var(--line);
}
.modal-close, .close-btn, .modal-close-btn, .close {
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.modal-close:hover, .close-btn:hover, .modal-close-btn:hover, .close:hover {
  color: var(--ember-600);
  transform: rotate(90deg);
}

/* Inputs inside modals follow the same readable treatment */
.modal-content input, .modal-content select, .modal-content textarea,
.modal-dialog input, .modal-dialog select, .modal-dialog textarea {
  background: var(--surface-2);
  color: var(--ink-1);
  border: 1px solid var(--line-strong);
}

/* Toasts / notifications */
.toast, .notification, .snackbar {
  background: var(--surface-1);
  color: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
}

/* -----------------------------------------------------------------------------
   6. EMBER SIGNATURE COMPONENTS (opt-in classes for the flagship surfaces)
---------------------------------------------------------------------------- */

/* Section eyebrow / athletic label */
.ember-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ember-600);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.ember-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--grad-ember);
  border-radius: 2px;
}
.dark-mode .ember-eyebrow, [data-theme="dark"] .ember-eyebrow { color: var(--ember-400); }

/* Display heading utility */
.ember-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1.02;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--ink-1);
}
.ember-title .accent { color: transparent; background: var(--grad-ember); -webkit-background-clip: text; background-clip: text; }

/* Hero panel with coal background + solar glow */
.ember-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-coal);
  color: #F5F3F0;
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-6), 4vw, var(--sp-12));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.ember-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 88% -8%, rgba(255,107,0,.34), rgba(255,46,77,.10) 40%, transparent 68%);
  z-index: -1;
}
.ember-hero h1, .ember-hero h2, .ember-hero .ember-title { color: #FFFFFF; }
.ember-hero p { color: rgba(245,243,240,.74); }

/* Stat readout — telemetry style */
.ember-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.ember-stat__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--ink-1);
}
.ember-stat__value .unit { font-size: .5em; color: var(--ink-3); margin-left: 3px; font-weight: 600; }
.ember-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ember-stat--brand {
  background: var(--grad-ember);
  border: none;
  box-shadow: var(--glow-ember);
}
.ember-stat--brand .ember-stat__value,
.ember-stat--brand .ember-stat__label { color: #fff; }
.ember-stat--brand .ember-stat__value .unit { color: rgba(255,255,255,.8); }

/* Chip */
.ember-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--ember-50);
  color: var(--ember-700);
  border: 1px solid rgba(255,107,0,.22);
}
.dark-mode .ember-chip, [data-theme="dark"] .ember-chip {
  background: rgba(255,107,0,.14);
  color: var(--ember-300);
  border-color: rgba(255,107,0,.3);
}
.ember-chip--success { background: var(--c-success-soft); color: var(--c-success); border-color: transparent; }
.ember-chip--info { background: var(--c-info-soft); color: var(--c-info); border-color: transparent; }

/* Crisp card with hover lift (anti-glass) */
.ember-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-6);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.ember-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}
.ember-card--active {
  border-color: var(--ember-500);
  box-shadow: 0 0 0 1px var(--ember-500), var(--shadow-lg);
}
.ember-card--active::after {
  content: "";
  position: absolute; left: 0; top: var(--sp-5); bottom: var(--sp-5);
  width: 3px; border-radius: 3px; background: var(--grad-ember);
}

/* Activity ring (Apple-watch style) — pure CSS conic */
.ember-ring {
  --val: 72;
  --size: 116px;
  --track: var(--surface-3);
  width: var(--size); height: var(--size);
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--surface-1) 79%, transparent 80% 100%),
    conic-gradient(from -90deg, #FF8A3D, #FF6B00 40%, #FF2E4D calc(var(--val) * 1%), var(--track) 0);
  position: relative;
}
.ember-ring__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--ink-1);
}
.ember-ring__cap { font-size: .6rem; }

/* Divider */
.ember-rule { height: 1px; background: var(--line); border: 0; margin: var(--sp-6) 0; }

/* -----------------------------------------------------------------------------
   7. MOTION + ACCESSIBILITY
---------------------------------------------------------------------------- */
@keyframes ember-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ember-animate-in { animation: ember-fade-up var(--t-slow) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep interactive content above the atmospheric glow layer */
header, main, footer, .container, .dashboard-container,
.modal, .modal-overlay, nav, .navbar, section { position: relative; z-index: 1; }