/* ============================================================
   ARGO AeroLab — Simulation visuals
   ============================================================ */

.sim-svg { width: 100%; height: 100%; display: block; }

/* Vector simulation */
.sim-vector__grid line { stroke: var(--border-subtle); stroke-width: 1; }
.sim-vector__axis { stroke: var(--border-strong); stroke-width: 1.5; }
.sim-vector__arrow { stroke: var(--accent-emerald); stroke-width: 3; }
.sim-vector__arrowhead { fill: var(--accent-emerald); }
.sim-vector__label { fill: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; }
/* Honor the per-label font-size attributes set in simulations.js. A class-level
   font-size beats an SVG presentation attribute, so without these rules every
   label rendered at 11 user units regardless of what the simulation asked for. */
.sim-vector__label[font-size="7"]   { font-size: 7px; }
.sim-vector__label[font-size="7.5"] { font-size: 7.5px; }
.sim-vector__label[font-size="8"]   { font-size: 8px; }
.sim-vector__label[font-size="9"]   { font-size: 9px; }
.sim-vector__label[font-size="11"]  { font-size: 11px; }
.sim-vector__label[font-size="12"]  { font-size: 12px; }
.sim-vector__label[font-size="20"]  { font-size: 20px; }

/* Particle simulation */
.sim-particles__container {
  width: 100%;
  height: 100%;
  position: relative;
}
.sim-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-blue);
  box-shadow: 0 0 8px rgba(79,163,255,0.5);
  transform: translate(-50%, -50%);
}

/* Density simulation */
.sim-density__block {
  transition: fill 0.2s var(--ease-standard), width 0.2s var(--ease-standard), height 0.2s var(--ease-standard);
}
.sim-density__reference-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.82rem;
}
.sim-density__reference-row:last-child { border-bottom: none; }
.sim-density__reference-label { color: var(--text-secondary); }
.sim-density__reference-value { font-family: var(--font-mono); color: var(--text-tertiary); }
.sim-density__reference-value--match { color: var(--accent-emerald); }

/* Pressure simulation */
.sim-pressure__surface { fill: var(--bg-elevated-hi); stroke: var(--border-strong); }
.sim-pressure__contact { fill: rgba(79,163,255,0.35); stroke: var(--accent-blue); }
.sim-pressure__arrow { stroke: var(--accent-amber); stroke-width: 2; }
.sim-pressure__arrowhead { fill: var(--accent-amber); }

@media (prefers-reduced-motion: reduce) {
  .sim-density__block, .sim-particle { transition: none; }
}

/* ============================================================
   Phase 2 — Fluid Mechanics Core
   ============================================================ */

@keyframes argo-dash-flow {
  to { stroke-dashoffset: -24; }
}

/* Fluid flow (Lesson 5) */
.sim-flow__channel { fill: var(--bg-elevated-hi); stroke: var(--border-strong); stroke-width: 1.5; }
.sim-flow__streamline {
  stroke: rgba(79, 163, 255, 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
  animation-name: argo-dash-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.sim-flow__measure-line {
  stroke: var(--accent-amber);
  stroke-width: 2;
  stroke-dasharray: 3 3;
  transition: stroke 0.15s var(--ease-standard), stroke-width 0.15s var(--ease-standard);
}
.sim-flow__measure-line--flash { stroke: var(--accent-emerald); stroke-width: 4; }
.sim-flow__particle { fill: var(--accent-emerald); }

/* Continuity (Lesson 6) and Bernoulli (Lesson 8) share a pipe/nozzle shape */
.sim-continuity__pipe { fill: var(--bg-elevated-hi); stroke: var(--border-strong); stroke-width: 1.5; }
.sim-continuity__streamline {
  stroke: rgba(47, 225, 168, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  animation-name: argo-dash-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Fluid energy (Lesson 7) */
.sim-energy__pipe { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.sim-energy__dot { fill: var(--accent-blue); }
.sim-energy__bar-bg { fill: var(--bg-elevated-hi); stroke: var(--border-subtle); }
.sim-energy__seg { transition: x 0.2s var(--ease-standard), width 0.2s var(--ease-standard); }
.sim-energy__seg--pressure { fill: var(--accent-blue); }
.sim-energy__seg--kinetic { fill: var(--accent-emerald); }
.sim-energy__seg--potential { fill: var(--accent-amber); }

/* Fluid properties (Lesson 10) */
.sim-properties__wall { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.sim-properties__arrow { stroke: var(--accent-blue); stroke-width: 2; transition: x2 0.15s var(--ease-standard); }
.sim-properties__arrowhead { fill: var(--accent-blue); }

@media (prefers-reduced-motion: reduce) {
  .sim-flow__streamline, .sim-continuity__streamline { animation: none; }
}

/* ============================================================
   Phase 3 — Aerodynamics Core
   ============================================================ */

/* Airflow around objects (Lesson 11) */
.sim-airflow__shape { fill: var(--bg-elevated-hi); stroke: var(--border-strong); stroke-width: 1.5; }
.sim-airflow__stagnation { fill: var(--accent-amber); }
.sim-airflow__streamline { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-airflow__wake { fill: var(--accent-amber); opacity: 0.2; stroke: none; }

/* Boundary layer (Lesson 12) */
.sim-bl__wall { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.sim-bl__edge { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-bl__fill { fill: var(--accent-blue); opacity: 0.1; stroke: none; }
.sim-bl__profile-arrow { stroke: var(--accent-emerald); stroke-width: 1.5; }
.sim-bl__free-arrow { stroke: var(--text-secondary); stroke-width: 1.5; }

/* Reynolds number (Lesson 13) */
.sim-re__bar { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.sim-re__marker { fill: var(--accent-blue); stroke: var(--bg-void); stroke-width: 2; }

/* Airfoil anatomy (Lesson 14) — also reused by Angle of Attack, Lift, Stall */
.sim-airfoil__shape { fill: var(--bg-elevated-hi); stroke: var(--border-strong); stroke-width: 1.5; }
.sim-airfoil__chord { stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 4 4; }
.sim-airfoil__camber { fill: none; stroke: var(--accent-amber); stroke-width: 1; stroke-dasharray: 2 3; }
.sim-airfoil__thickness-marker { stroke: var(--accent-blue); stroke-width: 1.5; }

/* Angle of attack (Lesson 15) */
.sim-aoa__wind {
  stroke: var(--accent-blue); stroke-width: 2;
  stroke-dasharray: 5 5; animation: argo-dash-flow 1.2s linear infinite;
}
.sim-aoa__reference { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.sim-aoa__arc { fill: none; stroke: var(--accent-amber); stroke-width: 1.5; }

/* Lift (Lesson 16) */
.sim-lift__pressure { stroke: var(--accent-emerald); stroke-width: 2; }
.sim-lift__vector { stroke: var(--accent-emerald); stroke-width: 3; }
.sim-lift__bar { }

/* Drag (Lesson 17) */
.sim-drag__forward { stroke: var(--text-tertiary); stroke-width: 2; }
.sim-drag__vector { stroke: var(--danger); stroke-width: 3; }
.sim-drag__chart-bg { fill: var(--bg-elevated); stroke: var(--border-subtle); }
.sim-drag__parasite { fill: none; stroke: var(--accent-amber); stroke-width: 1.5; }
.sim-drag__induced { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-drag__vmarker { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 2 2; }

/* Lift-to-drag ratio (Lesson 18) — also reused by Stall */
.sim-ld__curve { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-ld__max-marker { fill: var(--accent-emerald); }
.sim-ld__cur-marker { fill: var(--accent-amber); }

/* Stall (Lesson 19) */
.sim-stall__separation { fill: var(--danger); stroke: none; transition: opacity 0.15s var(--ease-standard); }

/* Finite wings & wingtip vortices (Lesson 20) */
.sim-wingtip__vortex { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-wingtip__downwash { stroke: var(--accent-amber); stroke-width: 1.5; }

/* Aspect ratio (Lesson 21) */
.sim-ar__current { fill: var(--accent-blue); opacity: 0.35; stroke: var(--accent-blue); stroke-width: 1.5; }

/* Wing geometry (Lesson 22) */
.sim-wing__planform { fill: var(--bg-elevated-hi); stroke: var(--border-strong); stroke-width: 1.5; }
.sim-wing__horizon { stroke: var(--border-strong); stroke-width: 1; }
.sim-wing__dihedral { stroke: var(--accent-blue); stroke-width: 2.5; }

/* ============================================================
   Phase 4 — Aircraft Physics
   ============================================================ */

/* Stability (Lesson 24) */
.sim-stability__dial { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.sim-stability__needle { stroke: var(--accent-blue); stroke-width: 2.5; }
.sim-stability__restore { fill: none; stroke: var(--accent-emerald); stroke-width: 2; }

/* Control surfaces (Lesson 25) */
.sim-cs__surface { fill: var(--accent-amber); stroke: var(--bg-void); stroke-width: 0.5; transition: transform 0.15s var(--ease-standard); }
.sim-cs__flap { fill: var(--accent-blue); stroke: var(--bg-void); stroke-width: 0.5; transition: transform 0.15s var(--ease-standard); }
.sim-cs__spoiler { fill: var(--danger); stroke: var(--bg-void); stroke-width: 0.5; transition: transform 0.15s var(--ease-standard); }
.sim-cs__response { fill: none; stroke-width: 2; transition: opacity 0.15s var(--ease-standard); }
.sim-cs__response--roll { stroke: var(--accent-blue); }
.sim-cs__response--pitch { stroke: var(--accent-emerald); }
.sim-cs__response--yaw { stroke: var(--accent-amber); }

/* Propulsion (Lesson 26) */
.sim-prop__inlet { stroke: var(--text-secondary); }
.sim-prop__exhaust { stroke: var(--accent-amber); }

/* Performance (Lesson 27) */
.sim-perf__lift-curve { fill: none; stroke: var(--accent-emerald); stroke-width: 1.5; }
.sim-perf__drag-curve { fill: none; stroke: var(--accent-amber); stroke-width: 2; }
.sim-perf__parasite-curve { fill: none; stroke: var(--accent-amber); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.8; }
.sim-perf__induced-curve { fill: none; stroke: var(--accent-blue); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.8; }
.sim-perf__stall-marker { stroke: var(--danger); stroke-width: 1; stroke-dasharray: 2 2; }

@media (prefers-reduced-motion: reduce) {
  .sim-aoa__wind { animation: none; }
}

/* ============================================================
   Phase 5 — Compressible & High-Speed Aerodynamics
   ============================================================ */

/* Mach number & speed regimes (Lesson 28) */
.sim-mach__body { fill: var(--bg-elevated-hi); stroke: var(--border-strong); stroke-width: 1.5; }
.sim-mach__wave { stroke: var(--accent-blue); stroke-width: 1; opacity: 0.6; }
.sim-mach__scale-track { stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.sim-mach__scale-marker { fill: var(--accent-amber); stroke: var(--bg-void); stroke-width: 1.5; transition: cx 0.15s var(--ease-standard); }

/* Speed of sound (Lesson 29) */
.sim-sos__ripple { stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-sos__source { fill: var(--accent-emerald); }

/* Compressibility (Lesson 30) */
.sim-compress__panel-bg { fill: var(--bg-elevated); stroke: var(--border-subtle); }
.sim-compress__block { fill: var(--accent-blue); opacity: 0.5; stroke: var(--accent-blue); stroke-width: 1; transition: height 0.15s var(--ease-standard), y 0.15s var(--ease-standard); }
.sim-compress__block--variable { fill: var(--accent-amber); stroke: var(--accent-amber); }

/* Transonic flow (Lesson 31) */
.sim-transonic__zone { fill: var(--danger); stroke: none; transition: opacity 0.15s var(--ease-standard); }
.sim-transonic__shock { stroke: var(--danger); stroke-width: 2; transition: opacity 0.15s var(--ease-standard); }
.sim-transonic__drag-fill { fill: var(--accent-amber); transition: width 0.15s var(--ease-standard); }

/* Shock waves (Lesson 32) */
.sim-shock__upstream { fill: var(--accent-blue); transition: opacity 0.15s var(--ease-standard); }
.sim-shock__downstream { fill: var(--accent-amber); transition: opacity 0.15s var(--ease-standard); }
.sim-shock__front { stroke: var(--text-primary); stroke-width: 3; transition: opacity 0.15s var(--ease-standard); }
.sim-shock__flow-arrow { stroke: var(--accent-emerald); stroke-width: 2; }

/* Supersonic flow / Mach cone (Lesson 33) */
.sim-mcone__ripple { stroke: var(--accent-blue); stroke-width: 1.2; }
.sim-mcone__line { stroke: var(--accent-amber); stroke-width: 1.5; stroke-dasharray: 4 3; transition: opacity 0.15s var(--ease-standard); }
.sim-mcone__object { fill: var(--accent-emerald); }

/* Expansion waves (Lesson 34) */
.sim-exp__flow { stroke: var(--accent-emerald); stroke-width: 2; }
.sim-exp__fan-line { stroke: var(--accent-blue); stroke-width: 1; opacity: 0.7; }

/* High-speed aircraft effects (Lesson 35) */
.sim-hse__wing { fill: rgba(79, 163, 255, 0.35); stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-hse__bar { transition: width 0.15s var(--ease-standard); }
.sim-hse__bar--compress { fill: var(--accent-blue); }
.sim-hse__bar--shock { fill: var(--danger); }
.sim-hse__bar--wave-drag { fill: var(--accent-amber); }
.sim-hse__bar--heating { fill: #FF8A5C; }

@media (prefers-reduced-motion: reduce) {
  .sim-sos__ripple, .sim-mcone__ripple { animation: none; }
}

/* Phase 6 — shared line-chart primitives (airfoil analysis, aircraft performance) */
.sim-chart__grid { stroke: var(--border-subtle); stroke-width: 0.5; }
.sim-chart__curve { fill: none; stroke-width: 1.6; }
.sim-chart__curve--blue { stroke: var(--accent-blue); }
.sim-chart__curve--amber { stroke: var(--accent-amber); }
.sim-chart__curve--danger { stroke: var(--danger); }
.sim-chart__curve--emerald { stroke: var(--accent-emerald); }
.sim-chart__marker { stroke: var(--bg-primary); stroke-width: 1; }
.sim-chart__marker--blue { fill: var(--accent-blue); }
.sim-chart__marker--amber { fill: var(--accent-amber); }
.sim-chart__marker--danger { fill: var(--danger); }
.sim-chart__marker--emerald { fill: var(--accent-emerald); }
.sim-chart__marker-line { stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 2 2; }

/* Phase 6 — CFD concept visualization */
.sim-cfd__mesh { stroke: var(--border-subtle); stroke-width: 0.4; }
.sim-cfd__streamline { fill: none; stroke: var(--accent-blue); stroke-width: 1; opacity: 0.75; }
.sim-cfd__body { fill: var(--bg-elevated-hi); stroke: var(--text-secondary); stroke-width: 1; }
.sim-cfd__pressure-high { fill: var(--danger); opacity: 0.16; }
.sim-cfd__pressure-low { fill: var(--accent-blue); opacity: 0.16; }

/* Phase 6 — aircraft engineering lab */
.sim-argolab__body { fill: var(--bg-elevated-hi); stroke: var(--accent-blue); stroke-width: 1; }
.sim-argolab__source--db { color: var(--accent-emerald); }
.sim-argolab__source--user { color: var(--accent-amber); }
.sim-argolab__source--calc { color: var(--accent-blue); }
.sim-argolab__source--model { color: var(--text-secondary); font-style: italic; }
.sim-argolab__source--na { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--border-strong); }
.argolab-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.78rem; }
.argolab-table th, .argolab-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.argolab-table th { color: var(--text-secondary); font-weight: 600; }
.argolab-table td { color: var(--text-primary); }
.argolab-table-wrap { width: 100%; overflow-x: auto; }
.argolab-note { font-size: 0.78rem; color: var(--text-tertiary); margin-top: var(--space-3); }

/* Phase 7 — shared bar-chart primitive (reusable beyond Lesson 40) */
.sim-bar { transition: width 0.15s var(--ease-standard); }
.sim-bar--a { fill: var(--accent-blue); }
.sim-bar--b { fill: var(--danger); }
.sim-bar--c { fill: var(--accent-amber); }
.sim-bar--d { fill: var(--accent-emerald); }
.sim-bar--e { fill: #FF8A5C; }

/* Phase 7 — potential flow / vorticity / vortex-wing streamlines and singularities */
.sim-flow__streamline { fill: none; stroke: var(--accent-blue); stroke-width: 1; opacity: 0.8; }
.sim-flow__source { fill: var(--accent-amber); }
.sim-flow__sink { fill: var(--accent-blue); }
.sim-flow__doublet { fill: none; stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 2 2; }
.sim-flow__vortex-ccw { stroke: var(--accent-emerald); fill: none; stroke-width: 1.4; }
.sim-flow__vortex-cw { stroke: var(--danger); fill: none; stroke-width: 1.4; }
.sim-flow__vortex-core { fill: var(--text-primary); }

/* Phase 7 — boundary layer / separation */
.sim-bl__wall { stroke: var(--text-secondary); stroke-width: 1.5; }
.sim-bl__profile { fill: none; stroke: var(--accent-blue); stroke-width: 1.5; }
.sim-bl__edge { stroke: var(--accent-amber); stroke-width: 1; stroke-dasharray: 2 2; fill: none; }
.sim-bl__arrow { stroke: var(--accent-blue); stroke-width: 1; }
.sim-sep__attached { fill: none; stroke: var(--accent-blue); stroke-width: 1; opacity: 0.85; }
.sim-sep__wake { fill: var(--danger); opacity: 0.14; }
.sim-sep__reverse { stroke: var(--danger); stroke-width: 1; opacity: 0.9; }

/* Phase 7 — lifting-line / vortex-wing wing planform */
.sim-wing__planform { fill: var(--bg-elevated-hi); stroke: var(--accent-blue); stroke-width: 1; }
.sim-wing__bound-vortex { stroke: var(--accent-emerald); stroke-width: 1.6; }
.sim-wing__trailing { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 3 2; fill: none; }
.sim-wing__downwash { stroke: var(--accent-blue); stroke-width: 1; }

/* Phase 7 — unsteady aerodynamics */
.sim-unsteady__airfoil { fill: var(--bg-elevated-hi); stroke: var(--accent-blue); stroke-width: 1; }
.sim-unsteady__pivot { fill: var(--accent-amber); }

/* ============================================================
   Responsive QA — stacked multi-part lab stages (Lesson 55, Phase 9)
   ============================================================ */

/* Let the panel grid shrink below its content so long <select> options and wide
   tables scroll inside their own wrapper instead of widening the page. */
.experiment-panel { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .experiment-panel { grid-template-columns: minmax(0, 1fr) 300px; }
}
.experiment-panel__stage, .experiment-panel__controls { min-width: 0; }
.control select, .control input[type="text"] { width: 100%; min-width: 0; max-width: 100%; }

.experiment-panel__stage--stack {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
}
.experiment-panel__stage--stack > svg { width: 100%; height: auto; flex: 0 0 auto; }
.experiment-panel__stage--stack > div { min-width: 0; max-width: 100%; }
.experiment-panel__stage--stack .argolab-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.experiment-panel__stage--stack .argolab-table th,
.experiment-panel__stage--stack .argolab-table td { white-space: normal; overflow-wrap: anywhere; }
.experiment-panel__stage--stack button { max-width: 100%; }
.argolab-table-wrap:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* Breadcrumb link is distinguished from surrounding text by more than colour. */
.lesson-header__eyebrow a { text-decoration: underline; text-underline-offset: 2px; }

/* Wide tables in single-column stages (Lessons 39, 48, 53) scroll inside their wrapper
   instead of being clipped by the stage's overflow:hidden. */
.experiment-panel__stage > div { min-width: 0; max-width: 100%; }
.experiment-panel__stage > div > .argolab-table-wrap { max-width: 100%; overflow-x: auto; }