/* Modern Astronomy - الإمارات نحو الفضاء (UAE_Space_Experience).
 *
 * Premium museum-exhibit visual system built entirely with CSS on top of the
 * shared theme tokens (Req 14.1/14.2 - no framework, no build step):
 *   - animated starfield + nebula backdrop, rendered BEHIND content (Req 2.1)
 *   - glassmorphism cards: translucent surface + backdrop blur + border (2.3)
 *   - parallax layers driven by the --uae-parallax custom property (2.4)
 *   - scroll entrance animations <= 700ms (2.4, wired via OrbitFX [data-reveal])
 *   - :hover affordances and :focus-visible indicators (5.4, 13.3)
 *   - mobile-first responsive from 320px to 1920px, no horizontal overflow (2.7, 13.5)
 *   - logical properties + [dir="rtl"] mirroring for Arabic (11.3, 11.4)
 *
 * The experience follows the portal theme: local --uae-* tokens carry the whole
 * palette, so the [data-theme="light"] block below re-points them once and the
 * entire module moves onto paper with its 4.5:1 / 3:1 contrast floors intact
 * (2.5, 13.1). Add colours as tokens, never as literals, or they will not make
 * the trip. Every motion rule is gated behind prefers-reduced-motion (2.6, 13.8). */

.uae-experience {
  /* Local surface tokens. Every colour in this stylesheet resolves through one
     of these, which is what lets the whole module follow the portal theme from
     the single override block below. */
  --uae-bg-1: #070b18;
  --uae-bg-2: #0d1430;
  --uae-nebula-a: rgba(124, 156, 255, 0.16);
  --uae-nebula-b: rgba(77, 208, 225, 0.12);
  --uae-nebula-c: rgba(184, 154, 255, 0.10);
  --uae-text: #eef2ff;        /* vs #0d1430: 15.9:1 */
  --uae-text-soft: #c9d4f6;   /* vs #0d1430: 11.2:1 */
  --uae-muted: #9aa8d0;       /* vs #0d1430: 6.4:1  */
  --uae-accent: #6fd7e6;      /* vs #0d1430: 8.9:1  */
  --uae-on-accent: #06121f;   /* ink laid on an --uae-accent fill: 11.3:1 */
  --uae-danger: #ffb1b1;      /* vs #0d1430: 9.5:1 */
  --uae-gold: #e6c25a;        /* continuity with the history path gold */
  --uae-glass: rgba(18, 24, 41, 0.62);
  --uae-glass-border: rgba(198, 212, 255, 0.22);
  --uae-hairline: rgba(255, 255, 255, 0.25);
  --uae-surface-soft: rgba(18, 24, 41, 0.4);
  --uae-accent-wash: rgba(111, 215, 230, 0.14);
  --uae-accent-wash-strong: rgba(111, 215, 230, 0.22);
  --uae-accent-line: rgba(111, 215, 230, 0.35);
  --uae-gold-wash: rgba(230, 194, 90, 0.12);
  --uae-gold-line: rgba(230, 194, 90, 0.4);
  --uae-danger-wash: rgba(255, 107, 107, 0.12);
  --uae-danger-line: rgba(255, 107, 107, 0.4);
  --uae-good: #5cf2a0;
  --uae-good-wash: rgba(92, 242, 160, 0.1);
  --uae-good-line: rgba(92, 242, 160, 0.45);
  --uae-parallax: 0px;

  /* The completion medal is an object rather than a surface - a gold medal is
     gold in daylight too - so like the sky views it keeps one palette. */
  --uae-medal-a: rgba(230, 194, 90, 0.95);
  --uae-medal-b: rgba(160, 118, 26, 0.9);
  --uae-medal-ink: #241a02;
  --uae-medal-glow: rgba(230, 194, 90, 0.25);

  /* Hero scene: drawn straight onto the page surface, so these DO follow the
     theme (the SVG carries these same values as presentation attributes, which
     the CSS overrides - they are the no-CSS fallback). */
  --uae-scene-arc: rgba(111, 215, 230, 0.5);
  --uae-scene-ring: rgba(198, 212, 255, 0.4);

  /* Sky-view tokens. These are deliberately NOT re-pointed for the light theme:
     the orbit and transfer canvases are framed views OF space, and space is
     dark in daylight too - the same call the sky map makes. They are separate
     tokens so the drawing code can never accidentally pick up a paper-mode
     accent and paint deep teal onto a black field. */
  --uae-viz-surface: rgba(7, 11, 24, 0.92);
  --uae-viz-accent: #6fd7e6;
  --uae-viz-gold: #e6c25a;

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--uae-text);
  background:
    radial-gradient(60rem 40rem at 85% -5%, var(--uae-nebula-a), transparent 60%),
    radial-gradient(50rem 36rem at 0% 30%, var(--uae-nebula-b), transparent 65%),
    radial-gradient(46rem 40rem at 70% 90%, var(--uae-nebula-c), transparent 60%),
    linear-gradient(180deg, var(--uae-bg-1), var(--uae-bg-2) 45%, var(--uae-bg-1));
  border-radius: 18px;
  margin-block: 8px;
}

/* ---- light theme (Req 2.5, 13.1) ----------------------------------------
   The module used to pin a deep-space surface in BOTH themes, on the Explore
   page precedent. That left a full-width black slab sitting in the middle of an
   otherwise white page - the one route in the portal that ignored the reader's
   own theme setting, and the reason someone reading in daylight got a wall of
   glare in the middle of the page.

   Because every colour in this stylesheet resolves through a --uae-* token,
   re-pointing the tokens here is the whole change: the nebula washes become the
   portal's rose/teal tints on paper, glass becomes translucent white, and the
   accent and gold darken until they clear AA on it. Contrast is stated per
   token against --uae-bg-2 (#ece7f0) or the white glass, whichever is lighter.
   The starfield is dropped rather than recoloured - dark specks on paper read
   as dust, not stars. */
[data-theme="light"] .uae-experience {
  --uae-bg-1: #f6f3f7;
  --uae-bg-2: #ece7f0;
  --uae-nebula-a: rgba(255, 92, 134, 0.10);
  --uae-nebula-b: rgba(15, 107, 112, 0.09);
  --uae-nebula-c: rgba(230, 194, 90, 0.10);
  --uae-text: #191430;        /* vs #ece7f0: 14.6:1 */
  --uae-text-soft: #3a3358;   /* vs #ece7f0:  9.3:1 */
  --uae-muted: #5b5480;       /* vs #ece7f0:  5.9:1 */
  --uae-accent: #0f6b70;      /* vs white:     6.3:1 */
  --uae-on-accent: #ffffff;   /* white ink on the accent fill: 6.3:1 */
  --uae-danger: #b3241a;      /* vs white:     5.9:1 */
  --uae-gold: #7a5c10;        /* vs white:     5.6:1, matches the history gold */
  --uae-glass: rgba(255, 255, 255, 0.74);
  --uae-glass-border: rgba(25, 20, 48, 0.14);
  --uae-hairline: rgba(25, 20, 48, 0.22);
  --uae-scene-arc: rgba(15, 107, 112, 0.55);
  --uae-scene-ring: rgba(25, 20, 48, 0.3);
  /* The washes keep the same job on paper - a faint colour-coded fill behind
     text - but take the darker hue, since a bright cyan tint on white reads as
     a smudge rather than a state. */
  --uae-surface-soft: rgba(255, 255, 255, 0.88);
  --uae-accent-wash: rgba(15, 107, 112, 0.10);
  --uae-accent-wash-strong: rgba(15, 107, 112, 0.17);
  --uae-accent-line: rgba(15, 107, 112, 0.38);
  --uae-gold-wash: rgba(122, 92, 16, 0.11);
  --uae-gold-line: rgba(122, 92, 16, 0.4);
  --uae-danger-wash: rgba(179, 36, 26, 0.09);
  --uae-danger-line: rgba(179, 36, 26, 0.38);
  --uae-good: #14714a;        /* vs white: 5.4:1 */
  --uae-good-wash: rgba(20, 113, 74, 0.10);
  --uae-good-line: rgba(20, 113, 74, 0.45);
}
[data-theme="light"] .uae-stars { display: none; }

/* ---- animated starfield (Req 2.1, 2.2): two drifting star tiles behind
   everything (z-index -1 + isolation), pure transform animation so it stays
   compositor-only and comfortably above 30 fps. ---------------------------- */
.uae-stars {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.uae-stars::before,
.uae-stars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 200%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1px 1px at 32% 44%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(2px 2px at 54% 12%, rgba(198,222,255,0.8), transparent 55%),
    radial-gradient(1px 1px at 71% 63%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 86% 32%, rgba(255,244,214,0.8), transparent 55%),
    radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(1.5px 1.5px at 63% 87%, rgba(198,222,255,0.7), transparent 55%),
    radial-gradient(1px 1px at 92% 74%, rgba(255,255,255,0.5), transparent 55%);
  background-size: 340px 340px;
  animation: uae-star-drift 140s linear infinite;
}
.uae-stars::after {
  background-size: 520px 520px;
  opacity: 0.6;
  animation-duration: 220s;
}
@keyframes uae-star-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Parallax layers: uae-space.js drives --uae-parallax from scroll (gated by
   reduced motion); each layer multiplies it by its own depth (Req 2.4). */
.uae-experience [data-parallax] {
  transform: translateY(calc(var(--uae-parallax) * var(--uae-depth, 0.2)));
  will-change: transform;
}

/* ---- layout shell -------------------------------------------------------- */
.uae-section {
  padding-block: clamp(28px, 6vw, 72px);
  padding-inline: clamp(14px, 4vw, 56px);
  max-width: 1240px;
  margin-inline: auto;
}
.uae-section > h2,
.uae-section-title {
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--uae-text);
}
.uae-section-intro {
  color: var(--uae-text-soft);
  max-width: 62ch;
  margin: 0 0 22px;
}

/* ---- glassmorphism card (Req 2.3): translucent surface + blur + border --- */
.uae-glass {
  background: var(--uae-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--uae-glass-border);
  border-radius: 16px;
  box-shadow: var(--elev-2);
}

/* ---- entrance animation (Req 2.4): applied by OrbitFX adding .in ---------- */
.uae-experience .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease; /* < 1000 ms */
}
.uae-experience .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- interactive affordances (Req 5.4, 13.3) ----------------------------- */
.uae-experience button,
.uae-experience [href] {
  touch-action: manipulation;
}
.uae-experience :is(button, a, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, #7c9cff);
  outline-offset: 2px;
  border-radius: 8px;
}
.uae-card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.uae-card-hover:hover {
  transform: translateY(-3px);
  border-color: var(--uae-accent);
  box-shadow: var(--elev-3);
}

/* ======================= Hero (Req 3) ===================================== */
.uae-hero {
  display: grid;
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  min-height: min(78vh, 640px);
}
.uae-hero-copy { max-width: 60ch; }
.uae-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--uae-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}
/* Req 3.4: UAE flag imagery in exactly one supporting element, exactly once. */
.uae-flag {
  inline-size: 34px;
  block-size: 22px;
  border-radius: 3px;
  overflow: hidden;
  flex: none;
  border: 1px solid var(--uae-hairline);
}
.uae-hero h1 {
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  line-height: 1.15;
  margin: 0 0 12px;
  background: linear-gradient(92deg, var(--uae-text), var(--uae-accent) 65%, var(--uae-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.uae-hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--uae-text-soft);
  margin: 0 0 16px;
}
.uae-hero-continuity {
  border-inline-start: 3px solid var(--uae-gold);
  padding-inline-start: 14px;
  color: var(--uae-muted);
  margin: 0;
}

/* Earth -> Mars scene: pure SVG + CSS. The craft rides an offset-path across
   the transfer arc (starts < 1s, completes 6s <= 8s, Req 3.2); orbit rings
   loop continuously (Req 3.3). Under reduced motion everything is static
   imagery (Req 3.5); .uae-hero-scene.is-static forces the same for the 8s
   asset-failure fallback (Req 3.6). */
.uae-hero-scene {
  position: relative;
  min-height: 240px;
}
.uae-hero-scene svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 420px;
}
/* The hero scene sits directly on the page surface (not in a framed dark view),
   so its strokes and satellite dots follow the theme. These CSS declarations
   override the SVG presentation attributes in the template, which carry the
   dark-theme values as the no-CSS fallback. */
.uae-hero-scene svg path[stroke-dasharray] { stroke: var(--uae-scene-arc); }
.uae-hero-scene .uae-orbit-ring ellipse { stroke: var(--uae-scene-ring); }
.uae-hero-scene .uae-orbit-ring circle { fill: var(--uae-accent); }
.uae-hero-scene .uae-orbit-ring[data-speed="fast"] circle { fill: var(--uae-gold); }
.uae-hero-scene .uae-craft polygon { fill: var(--uae-text); }
.uae-hero-scene .uae-craft circle { fill: var(--uae-accent); }

.uae-orbit-ring {
  transform-origin: var(--uae-ring-cx, 50%) var(--uae-ring-cy, 50%);
  animation: uae-orbit-spin 14s linear infinite;
}
.uae-orbit-ring[data-speed="fast"] { animation-duration: 8s; }
@keyframes uae-orbit-spin {
  from { transform: rotate(0turn); }
  to   { transform: rotate(1turn); }
}
.uae-craft {
  offset-path: path("M 60 200 C 160 40, 340 40, 440 150");
  offset-rotate: auto;
  animation: uae-transfer 6s ease-in-out 0.4s forwards;
}
@keyframes uae-transfer {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
.uae-hero-scene.is-static .uae-orbit-ring,
.uae-hero-scene.is-static .uae-craft {
  animation: none;
}
.uae-hero-scene.is-static .uae-craft { offset-distance: 100%; }

@media (min-width: 900px) {
  .uae-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

/* ======================= Learning Journey (Req 4) ========================= */
.uae-journey {
  position: relative;
  display: grid;
  gap: 18px;
  padding-inline-start: 26px;
}
/* Continuous orbital path connecting the six milestones (Req 4.1). */
.uae-journey::before {
  content: "";
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 8px;
  inline-size: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--uae-accent), var(--uae-gold));
  box-shadow: 0 0 12px rgba(111, 215, 230, 0.55);
}
.uae-milestone {
  position: relative;
  padding: 0;
}
.uae-milestone::before {
  content: "";
  position: absolute;
  inset-inline-start: -24px;
  inset-block-start: 22px;
  inline-size: 13px;
  block-size: 13px;
  border-radius: 50%;
  background: var(--uae-bg-2);
  border: 3px solid var(--uae-accent);
  box-shadow: 0 0 10px rgba(111, 215, 230, 0.8);
}
.uae-milestone.is-complete::before {
  background: var(--uae-good);
  border-color: var(--uae-good);
}
.uae-milestone-head {
  display: flex;
  align-items: center;
  gap: 14px;
  inline-size: 100%;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: start;
  padding: 16px 18px;
  cursor: pointer;
  border-radius: 16px;
  min-block-size: 44px;
}
.uae-milestone-icon {
  flex: none;
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--uae-accent-wash);
  color: var(--uae-accent);
}
.uae-milestone-icon svg {
  inline-size: 26px;
  block-size: 26px;
}
.uae-milestone-titles { flex: 1 1 auto; min-inline-size: 0; }
.uae-milestone-ordinal {
  color: var(--uae-muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.uae-milestone-title {
  display: block;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--uae-text);
}
.uae-milestone-check {
  flex: none;
  color: var(--uae-good);
  font-size: 1.1rem;
  visibility: hidden;
}
.uae-milestone.is-complete .uae-milestone-check { visibility: visible; }
.uae-milestone-chevron {
  flex: none;
  color: var(--uae-muted);
  transition: transform 0.3s ease;
}
.uae-milestone-head[aria-expanded="true"] .uae-milestone-chevron {
  transform: rotate(180deg);
}
/* Timeline-style expansion: grid-rows animation completes in 350ms (< 1000ms,
   Req 4.4/4.8); reduced motion snaps to the end state instantly. */
.uae-milestone-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.uae-milestone-body > div {
  overflow: hidden;
  min-block-size: 0;
}
.uae-milestone.open .uae-milestone-body { grid-template-rows: 1fr; }
.uae-milestone-content {
  padding: 0 18px 18px;
  display: grid;
  gap: 12px;
}
.uae-milestone-content h4 {
  margin: 0 0 4px;
  color: var(--uae-accent);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.uae-milestone-content ul {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--uae-text-soft);
  display: grid;
  gap: 6px;
}
.uae-learn-more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--uae-accent);
  background: var(--uae-accent-wash);
  border: 1px solid var(--uae-accent-line);
  border-radius: 999px;
  padding: 8px 16px;
  min-block-size: 44px;
  text-decoration: none;
  font-weight: 600;
}
.uae-learn-more:hover { background: var(--uae-accent-wash-strong); }
.uae-inline-error {
  color: var(--uae-danger);
  background: var(--uae-danger-wash);
  border: 1px solid var(--uae-danger-line);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0;
}

/* ======================= Interactive components (Req 5) =================== */
.uae-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-block-end: 22px;
}
.uae-stat {
  padding: 14px 16px;
  text-align: center;
}
.uae-stat b {
  display: block;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--uae-accent);
}
.uae-stat span { color: var(--uae-muted); font-size: 0.85rem; }

.uae-visuals {
  display: grid;
  gap: 16px;
  margin-block-end: 26px;
}
@media (min-width: 768px) {
  .uae-visuals { grid-template-columns: 1fr 1fr; }
}
.uae-visual {
  padding: 16px;
  min-inline-size: 0;
}
.uae-visual h3 { margin: 0 0 8px; font-size: 1rem; color: var(--uae-text); }
.uae-visual canvas {
  display: block;
  inline-size: 100%;
  block-size: 220px;
  border-radius: 10px;
  /* A framed view of space, like a photograph: dark in both themes. */
  background: var(--uae-viz-surface);
  border: 1px solid var(--uae-glass-border);
}
.uae-visual-alt { color: var(--uae-muted); font-size: 0.85rem; margin: 8px 0 0; }

/* Ecosystem map (Req 5.2): keyboard/pointer-operable entity chips + a detail
   panel revealed on activate and hidden on dismiss. */
.uae-eco-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.uae-eco-entity {
  font: inherit;
  color: var(--uae-text);
  padding: 14px;
  min-block-size: 44px;
  cursor: pointer;
  text-align: center;
  display: grid;
  gap: 4px;
}
.uae-eco-entity[aria-expanded="true"] {
  border-color: var(--uae-accent);
  background: var(--uae-accent-wash);
}
.uae-eco-entity .uae-eco-role { color: var(--uae-muted); font-size: 0.8rem; line-height: 1.5; }
.uae-eco-detail {
  margin-block-start: 14px;
  padding: 16px 18px;
}
.uae-eco-detail h3 { margin: 0 0 6px; color: var(--uae-accent); }
.uae-eco-detail p { margin: 0; color: var(--uae-text-soft); }
.uae-eco-dismiss {
  margin-block-start: 10px;
  background: none;
  border: 1px solid var(--uae-glass-border);
  color: var(--uae-muted);
  border-radius: 999px;
  padding: 6px 14px;
  min-block-size: 36px;
  font: inherit;
  cursor: pointer;
}

/* ======================= Comparison (Req 6) =============================== */
/* Mobile-first: stacked with the legacy panel FIRST (Req 6.6); side-by-side
   with the bridge between the panels' inner edges at >= 768px (Req 6.4, 6.5). */
.uae-compare {
  display: grid;
  gap: 16px;
}
.uae-compare-panel { padding: 20px; }
.uae-compare-panel h3 {
  margin: 0 0 14px;
  font-size: 1.15rem;
  text-align: center;
}
.uae-compare-panel.legacy h3 { color: var(--uae-gold); }
.uae-compare-panel.today h3 { color: var(--uae-accent); }
.uae-compare-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.uae-compare-panel li {
  border: 1px solid var(--uae-glass-border);
  border-radius: 12px;
  padding: 10px 14px;
}
.uae-compare-panel.legacy li { border-inline-start: 3px solid var(--uae-gold); }
.uae-compare-panel.today li { border-inline-start: 3px solid var(--uae-accent); }
.uae-compare-panel li b { display: block; margin-block-end: 4px; color: var(--uae-text); }
.uae-compare-panel li span { color: var(--uae-muted); font-size: 0.9rem; }
.uae-compare-bridge {
  align-self: center;
  text-align: center;
  padding: 18px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--uae-gold-wash), var(--uae-accent-wash));
  border: 1px solid var(--uae-glass-border);
}
.uae-compare-bridge b {
  display: block;
  color: var(--uae-gold);
  margin-block-end: 6px;
  font-size: 1.02rem;
}
.uae-compare-bridge p { margin: 0; color: var(--uae-text-soft); font-size: 0.92rem; }
@media (min-width: 768px) {
  .uae-compare {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.55fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

/* ======================= Knowledge checks (Req 8) ========================= */
.uae-checks {
  display: grid;
  gap: 18px;
}
.uae-check { padding: 20px; }
.uae-check-kind {
  color: var(--uae-accent);
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.uae-check-prompt { margin: 0 0 14px; font-weight: 600; color: var(--uae-text); }
.uae-check.is-passed { border-color: var(--uae-good-line); }

/* timeline ordering: keyboard-first move up/down controls */
.uae-order-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.uae-order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--uae-glass-border);
  border-radius: 10px;
  padding: 8px 12px;
}
.uae-order-item b { flex: 1 1 auto; font-weight: 500; color: var(--uae-text-soft); }
.uae-order-item button {
  flex: none;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 8px;
  border: 1px solid var(--uae-glass-border);
  background: var(--uae-accent-wash);
  color: var(--uae-accent);
  font-size: 1rem;
  cursor: pointer;
}
.uae-order-item button:disabled { opacity: 0.35; cursor: default; }

/* matching: select-then-place, fully keyboard operable (Req 8.6) */
.uae-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: center;
  margin-block-end: 10px;
}
.uae-match-row > b { color: var(--uae-text-soft); font-weight: 550; }
.uae-match-row select {
  font: inherit;
  color: var(--uae-text);
  background: var(--uae-bg-2);
  border: 1px solid var(--uae-glass-border);
  border-radius: 8px;
  padding: 10px;
  min-block-size: 44px;
  max-inline-size: 100%;
}

/* quiz / hotspot / mission-card options */
.uae-options { display: grid; gap: 8px; margin: 0 0 14px; }
.uae-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  text-align: start;
  color: var(--uae-text-soft);
  background: var(--uae-surface-soft);
  border: 1px solid var(--uae-glass-border);
  border-radius: 10px;
  padding: 10px 14px;
  min-block-size: 44px;
  cursor: pointer;
}
.uae-option[aria-pressed="true"] {
  border-color: var(--uae-accent);
  background: var(--uae-accent-wash);
  color: var(--uae-text);
}
.uae-option .uae-option-detail {
  display: block;
  color: var(--uae-muted);
  font-size: 0.85rem;
}
.uae-submit {
  font: inherit;
  font-weight: 650;
  color: var(--uae-on-accent);
  background: var(--uae-accent);
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  min-block-size: 44px;
  cursor: pointer;
}
.uae-submit:hover { filter: brightness(1.08); }
.uae-check-result { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; }
.uae-check-result.ok {
  color: var(--uae-good);
  background: var(--uae-good-wash);
  border: 1px solid var(--uae-good-line);
}
.uae-check-result.no {
  color: var(--uae-danger);
  background: var(--uae-danger-wash);
  border: 1px solid var(--uae-danger-line);
}
.uae-check-result.warn {
  color: var(--uae-gold);
  background: var(--uae-gold-wash);
  border: 1px solid var(--uae-gold-line);
}

/* ======================= Infographics (Req 9) ============================= */
.uae-infographics { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .uae-infographics { grid-template-columns: 1fr 1fr; }
  .uae-infographic:first-child { grid-column: 1 / -1; }
}
.uae-infographic { padding: 16px; min-inline-size: 0; }
.uae-infographic h3 { margin: 0 0 10px; font-size: 1rem; }
.uae-plot { min-block-size: 260px; }
.uae-infographic details {
  margin-block-start: 10px;
  color: var(--uae-muted);
  font-size: 0.88rem;
}
.uae-infographic summary { cursor: pointer; color: var(--uae-text-soft); min-block-size: 32px; }
.uae-placeholder {
  display: grid;
  place-items: center;
  min-block-size: 260px;
  color: var(--uae-muted);
  text-align: center;
  padding: 14px;
}

/* ======================= Completion (Req 10) ============================== */
.uae-completion-card {
  padding: clamp(22px, 5vw, 44px);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.uae-progress-summary { color: var(--uae-muted); margin: 0 0 14px; }
.uae-badge {
  inline-size: 96px;
  block-size: 96px;
  margin-inline: auto;
  margin-block-end: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--uae-medal-a), var(--uae-medal-b));
  color: var(--uae-medal-ink);
  box-shadow: 0 0 0 5px var(--uae-medal-glow), var(--elev-3);
  filter: grayscale(1) opacity(0.55);
}
.uae-badge svg {
  inline-size: 54px;
  block-size: 54px;
}
.uae-completion.is-earned .uae-badge { filter: none; }
.uae-badge-name { font-weight: 700; color: var(--uae-gold); font-size: 1.1rem; }
.uae-cert-note { color: var(--uae-text-soft); margin: 10px 0 0; }
.uae-completion-message {
  margin: 16px 0 0;
  color: var(--uae-text-soft);
  border-block-start: 1px solid var(--uae-glass-border);
  padding-block-start: 16px;
}

/* ======================= Resources (end of the path) ====================== */
.uae-resource-grid {
  display: grid;
  gap: 14px;
}
@media (min-width: 700px) {
  .uae-resource-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.uae-resource {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--uae-text);
  min-block-size: 44px;
}
.uae-resource b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--uae-accent);
  font-size: 1.02rem;
}
.uae-resource span { color: var(--uae-muted); font-size: 0.9rem; }
.uae-resource-ext {
  display: inline-flex;
  flex: none;
}
.uae-resource-ext svg {
  inline-size: 14px;
  block-size: 14px;
}
[dir="rtl"] .uae-resource-ext svg { scale: -1 1; }

/* ---- shared notices ------------------------------------------------------ */
.uae-progress-warning {
  margin: 10px auto 0;
  max-width: 1240px;
  padding-inline: clamp(14px, 4vw, 56px);
}
.uae-progress-warning p {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--uae-gold);
  background: var(--uae-gold-wash);
  border: 1px solid var(--uae-gold-line);
}
.uae-fallback-note { color: var(--uae-muted); font-size: 0.85rem; }

/* ---- RTL mirroring (Req 11.3): logical properties handle most of it; the
   few directional glyph/paths flip explicitly. --------------------------- */
[dir="rtl"] .uae-milestone-chevron { scale: -1 1; }
[dir="rtl"] .uae-craft { offset-rotate: auto 180deg; }

/* ---- reduced motion (Req 2.6, 3.5, 5.6, 13.8): static, fully readable ---- */
@media (prefers-reduced-motion: reduce) {
  .uae-stars::before,
  .uae-stars::after,
  .uae-orbit-ring,
  .uae-craft {
    animation: none;
  }
  .uae-craft { offset-distance: 100%; }
  .uae-experience [data-parallax] { transform: none; }
  .uae-experience .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .uae-milestone-body { transition: none; }
  .uae-milestone-chevron,
  .uae-card-hover { transition: none; }
  .uae-card-hover:hover { transform: none; }
}

/* ---- small screens: keep everything inside 320px ------------------------- */
@media (max-width: 420px) {
  .uae-journey { padding-inline-start: 20px; }
  .uae-journey::before { inset-inline-start: 5px; }
  .uae-milestone::before { inset-inline-start: -19px; }
  .uae-match-row { grid-template-columns: 1fr; }
  .uae-stats { grid-template-columns: 1fr 1fr; }
}