/* Egna stilar för etiska-teorier. Den gemensamma layouten ligger i ../presentation.css,
   och Mermaid-diagrammen ritas av Pele via kärnan (pre.pele-diagram).
   Bara temats variabler används, så diagrammen följer ljust och mörkt läge. */

/* Rälsen i spårvagnsproblemet och bron. */
.et-spar {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.et-syll {
  fill: none;
  stroke: var(--rule);
  stroke-width: 4;
}

/* Människofigurerna. */
.et-figur {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.et-figur circle {
  fill: var(--ink);
  stroke: none;
}
.et-hjul {
  fill: var(--ink);
}

/* Vagnen rullar fram en gång när steget visas. */
.et-vagn {
  transform: translateX(-210px);
  transition: transform 2.2s var(--ease);
}
[data-step].is-shown .et-vagn {
  transform: none;
}

/* Ram som lyfter fram en ruta i teorikartan. */
.et-ram {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
}
.diagram__svg .et-stor {
  font-size: 27px;
}
.et-streckad {
  stroke-dasharray: 10 10;
}

/* Vågen i konsekvensetikens kalkyl: balken tippar mot den tyngre skålen. */
.et-balk,
.et-skal {
  transform-box: view-box;
  transition: transform 1.4s var(--ease);
}
.et-balk {
  transform-origin: 450px 100px;
}
.et-balk-linje {
  fill: none;
  stroke: var(--ink);
  stroke-width: 7;
  stroke-linecap: round;
}
.et-vag:has(.et-steg-hoger.is-shown) .et-balk {
  transform: rotate(4deg);
}
.et-vag:has(.et-steg-hoger.is-shown) .et-skal--v {
  transform: translateY(-19.5px);
}
.et-vag:has(.et-steg-hoger.is-shown) .et-skal--h {
  transform: translateY(19.5px);
}
.et-vag:has(.et-steg-vanster.is-shown) .et-balk {
  transform: rotate(-6deg);
}
.et-vag:has(.et-steg-vanster.is-shown) .et-skal--v {
  transform: translateY(29px);
}
.et-vag:has(.et-steg-vanster.is-shown) .et-skal--h {
  transform: translateY(-29px);
}

@media (prefers-reduced-motion: reduce) {
  .et-vagn,
  .et-balk,
  .et-skal {
    transition-duration: 0.01ms !important;
  }
}

/* Bron har röstknappar och en fråga under diagrammet, så det får vara lägre. */
.et-lag .diagram__svg {
  max-height: 44vh;
}