/* Simulation chrome — load only on /simulaties/* pages */

.sim {
  --sim-curve: var(--accent);
  --sim-ghost: var(--text-mute);
  --sim-axis: var(--line-2);
  --sim-grid: var(--grid);
  --sim-vertex: var(--accent);
  --sim-root: var(--ok);
  --sim-sym: var(--warn);
}

.sim.sim--cb {
  --sim-curve: var(--text);
  --sim-vertex: var(--lvl-havo);
  --sim-root: var(--lvl-vmbo);
  --sim-sym: var(--lvl-vwo);
}

.sim.sim--large-text {
  font-size: 1.125em;
}

.sim-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  margin-block: 1rem 1.25rem;
}

.sim-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.sim-toolbar__label {
  font-size: var(--fs-small);
  color: var(--text-mute);
  margin-inline-end: 0.35rem;
}

.sim-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* no min-content blow-out at 320 px */
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 900px) {
  .sim-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.9fr);
  }
}

.sim-graph-wrap {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.5rem;
}

.sim-graph-wrap svg[data-sim-svg] {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  touch-action: pan-y;
}

/* With vector-effect: non-scaling-stroke, stroke widths and dash lengths are
   screen pixels, not graph units (Phase 14 fix: they were 0.03–0.12 px). */
.sim-axis {
  stroke: var(--sim-axis);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

.sim-grid line {
  stroke: var(--sim-grid);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

.sim--no-raster .sim-grid {
  display: none;
}

.sim-curve {
  stroke: var(--sim-curve);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.sim-ghost {
  stroke: var(--sim-ghost);
  stroke-width: 2px;
  stroke-dasharray: 7 5;
  opacity: 0.55;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.sim-sym {
  stroke: var(--sim-sym);
  stroke-width: 1.5px;
  stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}

.sim-vertex {
  fill: var(--sim-vertex);
  stroke: var(--bg-1);
  stroke-width: 0.06;
  cursor: grab;
  touch-action: none;
}

.sim-vertex:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sim-root {
  fill: var(--sim-root);
  stroke: var(--bg-1);
  stroke-width: 0.05;
}

.sim-zoom {
  display: flex;
  gap: 0.35rem;
  position: absolute;
  inset-block-end: 0.65rem;
  inset-inline-end: 0.65rem;
}

/* Phones: three 44 px buttons would cover ~¼ of the drawing, so they sit below it (L1/U1) */
@media (max-width: 599px) {
  .sim-zoom {
    position: static;
    justify-content: flex-end;
    margin-block-start: 0.5rem;
  }
}

.sim-zoom button,
.sim-actions button,
.sim-preset,
.sim-stepper button {
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.sim-zoom button:focus-visible,
.sim-actions button:focus-visible,
.sim-preset:focus-visible,
.sim-stepper button:focus-visible,
.sim-param input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sim-panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.sim-formula {
  font-size: 1.05em;
  overflow-x: auto;
}

.sim-formula math {
  font-family: inherit;
}

.sim-param {
  display: grid;
  gap: 0.35rem;
}

.sim-param__head {
  display: flex;
  flex-wrap: wrap; /* long labels ("Angle α (degrees)") + the stepper did not fit at 320 px (L1/U3) */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sim-param__label {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sim-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sim-stepper input[type="number"] {
  width: 4.5rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.sim-param input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--accent-fill);
}

.sim-live {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.45;
  min-height: 3.2em;
}

.sim-live__label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-block-end: 0.2rem;
}

.sim-note {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  color: var(--text-dim);
  font-size: var(--fs-small);
}

.sim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sim-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sim-values {
  font-size: var(--fs-small);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.sim-values[hidden],
.sim-param[hidden],
.sim-note[hidden] {
  display: none !important;
}

.sim-table-wrap {
  margin-block-start: 0.25rem;
}

.sim-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
}

.sim-table-wrap th,
.sim-table-wrap td {
  border: 1px solid var(--line);
  padding: 0.35rem 0.5rem;
  text-align: end;
}

.sim-table-wrap caption {
  text-align: start;
  font-weight: 600;
  margin-block-end: 0.35rem;
  color: var(--text);
}

.sim-prefs {
  font-size: var(--fs-small);
}

.sim-prefs summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.sim-prefs__grid {
  display: grid;
  gap: 0.45rem;
  margin-block-start: 0.6rem;
}

.sim-prefs label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
}

.sim-prefs input[type="number"],
.sim-prefs select {
  min-height: 44px;
  width: 4.5rem;
  margin-inline-start: auto;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.sim-leerpad {
  margin-block-start: var(--space-section);
}

.sim-leerpad section {
  margin-block: 1.75rem;
}

.sim-leerpad section:nth-child(n + 3) {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* The video cards (~800 px on phones) and the syllabus checklist (~700 px with three levels) are much taller
   than the 320 px placeholder, which made the page jump and gave wrong positions to layout checks. */
.sim-leerpad section#video,
.sim-leerpad section#wat-moet-ik-kennen {
  content-visibility: visible;
}

.sim-mode [role="radio"][aria-disabled="true"],
.sim-mode [role="radio"][disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.sim-target {
  stroke: var(--text-mute);
  stroke-width: 2.5px;
  stroke-dasharray: 8 5;
  opacity: 0.7;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.sim-curve-2 {
  stroke: var(--lvl-vmbo);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.sim-slope {
  stroke: var(--warn);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.sim-hit {
  fill: var(--lvl-vwo);
  stroke: var(--bg-1);
  stroke-width: 0.05;
}

.sim-sq-a {
  stroke: var(--accent);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
}

.sim-sq-b {
  stroke: var(--ok);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  fill: color-mix(in srgb, var(--ok) 12%, transparent);
}

.sim-sq-c {
  stroke: var(--warn);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  fill: color-mix(in srgb, var(--warn) 12%, transparent);
}

.sim-mode-panel {
  margin-block-start: 0.5rem;
}

.sim-mode-card {
  padding: 0.75rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sim-mode-kicker {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-mute);
  font-weight: 600;
}

.sim-mode-prompt {
  margin: 0;
  color: var(--text);
}

.sim-mode-status {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-dim);
  min-height: 1.4em;
}

.sim-mode-actions,
.sim-mode-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.sim-mode-choice,
.sim-mode-actions button,
.sim-two-toggle {
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.sim-mode-choice[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.sim-two-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
}

.sim-mode-hint {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-dim);
  border-left: 3px solid var(--accent);
  padding-inline-start: 0.55rem;
}

.card-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.card-list li {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

.card-list p {
  margin: 0.35rem 0 0;
  color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
  .sim-curve,
  .sim-ghost,
  .sim-vertex {
    transition: none;
  }
}

/* T3: SVG text defaults to black; labels follow the theme (dark and light) */
.sim-label {
  fill: var(--text);
}

/* T7: horizontal reference lines in graphs that draw their own ticks (exponentiële groei) */
.sim-grid-line {
  stroke: var(--sim-grid);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}