/* Egna stilar för satsradning. Den gemensamma layouten ligger i ../presentation.css,
   och beslutsflödet ritas av Pele via kärnan (pre.pele-diagram).

   Bildspråket: varje sats är en vagn. En huvudsats har en motor på taket
   (S + P, subjekt och predikat) och kan köra själv. Kommat är en tejpbit som
   släpper, en konjunktion ett koppel och en subjunktion en dragstång som gör
   vagnen till en släpvagn (bisats). Bara temats variabler används, så vagnarna
   följer ljust och mörkt läge. */

/* ---------- Stegen i diagrammen ----------
   Ett steg med klassen sr-utlos-N (N = 1–6) styr andra delar i samma takt:
   sr-pa-N tonar in, sr-av-N tonar ut och sr-vid-N flyttas med --dx och --dy
   (och vrids med --rot). --d fördröjer. På så sätt kan vagnar köra iväg,
   tejpen falla och kopplet flytta in när läraren trycker →. */

.sr-pa-1, .sr-pa-2, .sr-pa-3, .sr-pa-4, .sr-pa-5, .sr-pa-6 {
  opacity: 0;
}
.sr-pa-1, .sr-pa-2, .sr-pa-3, .sr-pa-4, .sr-pa-5, .sr-pa-6,
.sr-av-1, .sr-av-2, .sr-av-3, .sr-av-4, .sr-av-5, .sr-av-6,
.sr-vid-1, .sr-vid-2, .sr-vid-3, .sr-vid-4, .sr-vid-5, .sr-vid-6 {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.6s var(--ease),
    transform 1.5s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.sr-utlos-1.is-shown) .sr-pa-1,
.beat:has(.sr-utlos-2.is-shown) .sr-pa-2,
.beat:has(.sr-utlos-3.is-shown) .sr-pa-3,
.beat:has(.sr-utlos-4.is-shown) .sr-pa-4,
.beat:has(.sr-utlos-5.is-shown) .sr-pa-5,
.beat:has(.sr-utlos-6.is-shown) .sr-pa-6 {
  opacity: 1;
}
.beat:has(.sr-utlos-1.is-shown) .sr-av-1,
.beat:has(.sr-utlos-2.is-shown) .sr-av-2,
.beat:has(.sr-utlos-3.is-shown) .sr-av-3,
.beat:has(.sr-utlos-4.is-shown) .sr-av-4,
.beat:has(.sr-utlos-5.is-shown) .sr-av-5,
.beat:has(.sr-utlos-6.is-shown) .sr-av-6 {
  opacity: 0;
}
.beat:has(.sr-utlos-1.is-shown) .sr-vid-1,
.beat:has(.sr-utlos-2.is-shown) .sr-vid-2,
.beat:has(.sr-utlos-3.is-shown) .sr-vid-3,
.beat:has(.sr-utlos-4.is-shown) .sr-vid-4,
.beat:has(.sr-utlos-5.is-shown) .sr-vid-5,
.beat:has(.sr-utlos-6.is-shown) .sr-vid-6 {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
}
/* Linjer i delar som tonar in ritas fram. */
.beat:has(.sr-utlos-1.is-shown) .sr-pa-1 .d-draw,
.beat:has(.sr-utlos-2.is-shown) .sr-pa-2 .d-draw,
.beat:has(.sr-utlos-3.is-shown) .sr-pa-3 .d-draw,
.beat:has(.sr-utlos-4.is-shown) .sr-pa-4 .d-draw {
  stroke-dashoffset: 0;
}

/* Vagnar rullar in från vänster, i steget eller när takten kommer i bild
   (sr-start). Delar i sr-start tonar också in med d-pop och d-draw. */
.sr-rull {
  opacity: 0;
  transform: translateX(calc(-1 * var(--in, 260px)));
  transition:
    opacity 0.5s var(--ease),
    transform 1.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.sr-hjul {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.sr-rull .sr-hjul {
  transform: rotate(-300deg);
}
[data-step].is-shown .sr-rull,
.beat.is-visible .sr-start .sr-rull {
  opacity: 1;
  transform: none;
}
[data-step].is-shown .sr-rull .sr-hjul,
.beat.is-visible .sr-start .sr-rull .sr-hjul {
  transform: none;
}
.beat.is-visible .sr-start .d-pop {
  opacity: 1;
  transform: none;
}
.beat.is-visible .sr-start .d-draw {
  stroke-dashoffset: 0;
}
/* Hjulen rullar när vagnen flyttas (efter inrullningen, så att regeln vinner). */
.beat:has(.sr-utlos-1.is-shown) .sr-vid-1 .sr-hjul,
.beat:has(.sr-utlos-2.is-shown) .sr-vid-2 .sr-hjul,
.beat:has(.sr-utlos-3.is-shown) .sr-vid-3 .sr-hjul,
.beat:has(.sr-utlos-4.is-shown) .sr-vid-4 .sr-hjul {
  transform: rotate(var(--varv, 300deg));
}

/* Tejpen sätts på när vagnarna har rullat in. */
.sr-start-pop {
  transition-delay: 1.1s;
}

/* ---------- Vagnen ---------- */

.sr-kropp {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.sr-hjul circle {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.sr-hjul path {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.sr-rals path {
  fill: none;
  stroke: var(--rule);
  stroke-width: 4;
  stroke-linecap: round;
}
.sr-rals .sr-rals__sliper {
  stroke-width: 3;
}
.diagram__svg .sr-vt {
  font-size: 28px;
}
.diagram__svg .sr-vt--bred {
  font-weight: 700;
}
/* Textlager som bara bär hjulen och kroppen; texten ritas i varianter ovanpå. */
.diagram__svg .sr-dold {
  display: none;
}
.sr-motor rect {
  fill: var(--accent);
}
.diagram__svg .sr-motor text {
  fill: var(--paper);
  font-size: 15px;
  font-weight: 800;
}
.sr-motor--av rect {
  fill: var(--paper);
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 5 4;
}
.diagram__svg .sr-motor--av text {
  fill: var(--ink-3);
}

/* Subjekt: ett streck. Predikat: två streck. */
.sr-under {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
}

/* Subjunktionen i texten lyses upp när den blir dragstång. */
.diagram__svg .sr-subj-ord {
  transition: fill 0.6s var(--ease);
}
.beat:has(.sr-utlos-1.is-shown) .diagram__svg .sr-subj-ord {
  fill: var(--c3);
  font-weight: 700;
}

/* ---------- Skarvarna ---------- */

.sr-tejp {
  fill: color-mix(in srgb, var(--warn) 50%, transparent);
  stroke: var(--warn);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.diagram__svg .sr-tejp-text {
  fill: var(--ink);
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 800;
}
.sr-tejp-slapp {
  --rot: 14deg;
}
.sr-koppel__stang {
  fill: none;
  stroke: var(--c1);
  stroke-width: 5;
  stroke-linecap: round;
}
.sr-koppel rect {
  fill: var(--card);
  stroke: var(--c1);
  stroke-width: 3.5;
}
.diagram__svg .sr-koppel text {
  fill: var(--c1);
  font-size: 24px;
  font-weight: 700;
}
.sr-drag__ram,
.sr-drag__mitt {
  fill: none;
  stroke: var(--c3);
  stroke-width: 4.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sr-drag__mitt {
  stroke-width: 2;
  stroke-dasharray: 2 6;
}
.sr-drag__ring {
  fill: var(--card);
  stroke: var(--c3);
  stroke-width: 4;
}
.sr-drag rect {
  fill: var(--card);
  stroke: var(--c3);
  stroke-width: 3;
}
.diagram__svg .sr-drag text {
  fill: var(--c3);
  font-size: 22px;
  font-weight: 700;
}
/* Tomma platser i lådan med koppel och dragstänger. */
.sr-tom rect,
.sr-tom .sr-drag__ring {
  fill: none;
  stroke: var(--rule);
  stroke-dasharray: 6 5;
}
.sr-tom .sr-drag__ram,
.sr-tom .sr-drag__mitt {
  stroke: var(--rule);
  stroke-dasharray: 6 5;
}
.diagram__svg .sr-tom text {
  fill: none;
}
.sr-punkt {
  fill: var(--accent);
}
.diagram__svg .sr-tecken,
.diagram__svg .sr-komma {
  fill: var(--accent);
  font-size: 56px;
  font-weight: 800;
}
.diagram__svg .sr-komma {
  fill: var(--ink);
  font-family: var(--f-display);
}
.diagram__svg .sr-komma--liten {
  font-size: 44px;
}
/* Småorden: lådor som åker med i vagnen. */
.sr-last rect {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.diagram__svg .sr-last text {
  font-size: 24px;
  font-weight: 700;
}
.sr-sate {
  stroke: var(--rule);
  stroke-width: 2;
  stroke-dasharray: 4 5;
}
.sr-plats {
  fill: color-mix(in srgb, var(--accent) 18%, transparent);
  stroke: var(--accent);
  stroke-width: 3;
}
.sr-gissa-linje {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 3 6;
}
.sr-gissa rect {
  stroke-dasharray: 7 5;
}
.sr-osynlig {
  fill: none;
  stroke: none;
}

/* ---------- Text i diagrammen ---------- */

.diagram__svg .sr-roll {
  fill: var(--accent);
  font-size: 26px;
  font-weight: 700;
}
.diagram__svg .sr-varning {
  fill: var(--warn);
  font-size: 26px;
  font-weight: 700;
}
.diagram__svg .sr-ok {
  fill: var(--good);
  font-weight: 700;
}
.diagram__svg .sr-ok--stor {
  font-size: 26px;
}
.diagram__svg .sr-mening {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 30px;
}
.sr-fig .diagram__svg {
  max-height: 52vh;
}
.sr-fig--lag .diagram__svg {
  max-height: 46vh;
}
/* Lägre projektorer: diagrammet krymper så att mejlraden ryms. */
@media (max-height: 760px) {
  .sr-fig .diagram__svg {
    max-height: 40vh;
  }
  .sr-fig--lag .diagram__svg {
    max-height: 36vh;
  }
}

/* ---------- Fallet: Noors mejl ---------- */

.sr-mejl {
  max-width: 54rem;
  padding: 0.9rem 1.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 0.75rem + 1vw, 1.7rem);
  line-height: 1.42;
}
.sr-mejl__huvud {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.8rem;
  margin: 0 0 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-ui);
  font-size: 0.66em;
  color: var(--ink-2);
}
.sr-mejl__huvud dt {
  font-weight: 700;
}
.sr-mejl__huvud dd {
  margin: 0;
}
.sr-mejl__text p {
  margin: 0 0 0.45em;
}
.sr-mejl__text p:last-child {
  margin-bottom: 0;
}
.sr-mejl__rubrik {
  margin: 0 0 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.sr-skarv {
  border-radius: 0.2em;
  transition:
    background-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.beat:has(.sr-utlos-1.is-shown) .sr-skarv--fel {
  background: color-mix(in srgb, var(--warn) 50%, transparent);
  box-shadow: 0 0 0 2px var(--warn);
}
.beat:has(.sr-utlos-2.is-shown) .sr-skarv--ratt {
  background: var(--good-soft);
  box-shadow: 0 0 0 2px var(--good);
}
.sr-fix {
  text-decoration: underline;
  text-decoration-color: var(--good);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}
.sr-fore-efter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
}
.sr-fore-efter .sr-mejl {
  font-size: clamp(0.95rem, 0.6rem + 0.85vw, 1.35rem);
}
.sr-mejl--fore {
  opacity: 0.85;
}
.sr-fore-efter + .sr-fig .diagram__svg {
  max-height: 14vh;
}
@media (max-width: 760px) {
  .sr-fore-efter {
    grid-template-columns: 1fr;
  }
}

/* En rättad mening ur mejlet under diagrammet. */
.sr-mejlrad {
  margin: clamp(0.8rem, 2vh, 1.4rem) 0 0;
  padding: 0.5rem 1rem;
  border-left: 5px solid var(--good);
  background: var(--card);
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 0.75rem + 1vw, 1.7rem);
}
.sr-mejlrad__etikett {
  margin-right: 0.5rem;
  font-family: var(--f-ui);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--good);
}

/* Övningstexten i verkstaden. */
.sr-text {
  margin: 0 0 clamp(1.2rem, 3vh, 2rem);
  padding: 1.2rem 1.5rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.3rem, 0.9rem + 1.2vw, 2.1rem);
  line-height: 1.3;
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .sr-rull,
  .sr-hjul,
  .sr-skarv,
  .sr-pa-1, .sr-pa-2, .sr-pa-3, .sr-pa-4, .sr-pa-5, .sr-pa-6,
  .sr-av-1, .sr-av-2, .sr-av-3, .sr-av-4, .sr-av-5, .sr-av-6,
  .sr-vid-1, .sr-vid-2, .sr-vid-3, .sr-vid-4, .sr-vid-5, .sr-vid-6 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}