/* Egna stilar för Att läsa sakprosa med strategier. Den gemensamma layouten
   ligger i ../presentation.css.

   Bildspråket: läsningen är en vandring. Före läsningen tittar du på kartan
   (rubrik, ingress, bild och avsändare), under läsningen går du stigen och
   stannar vid skyltar (frågor till texten) och stenar (okända ord som du
   kliver över), och efter läsningen ser du tillbaka på hela vägen från
   kullen och berättar (sammanfattningen). Mellan raderna leder spår från
   ledtrådar till slutsatser. Fallets text, en nyhet på skolans webbplats,
   visas som en tidningsspalt. Bara temats variabler används, så allt följer
   ljust och mörkt läge. */

:root {
  --ls-gang: cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---------- Stegen i diagrammen ----------
   Ett steg med klassen ls-utlos-N (N = 1–3) styr andra delar i samma takt:
   ls-pa-N tonar in, ls-av-N tonar ut och ls-svag-N tonas ned. --d fördröjer.
   Linjer (d-draw) och delar (d-pop) i en del som tonar in ritas fram. */

.ls-pa-1, .ls-pa-2, .ls-pa-3 {
  opacity: 0;
}
.ls-pa-1, .ls-pa-2, .ls-pa-3,
.ls-av-1, .ls-av-2, .ls-av-3,
.ls-svag-1, .ls-svag-2, .ls-svag-3 {
  transition: opacity 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.ls-utlos-1.is-shown) .ls-pa-1,
.beat:has(.ls-utlos-2.is-shown) .ls-pa-2,
.beat:has(.ls-utlos-3.is-shown) .ls-pa-3 {
  opacity: 1;
}
.beat:has(.ls-utlos-1.is-shown) .ls-av-1,
.beat:has(.ls-utlos-2.is-shown) .ls-av-2,
.beat:has(.ls-utlos-3.is-shown) .ls-av-3 {
  opacity: 0;
}
.beat:has(.ls-utlos-1.is-shown) .ls-svag-1,
.beat:has(.ls-utlos-2.is-shown) .ls-svag-2,
.beat:has(.ls-utlos-3.is-shown) .ls-svag-3 {
  opacity: 0.3;
}
.beat:has(.ls-utlos-1.is-shown) .ls-pa-1 .d-draw,
.beat:has(.ls-utlos-2.is-shown) .ls-pa-2 .d-draw,
.beat:has(.ls-utlos-3.is-shown) .ls-pa-3 .d-draw {
  stroke-dashoffset: 0;
}
.beat:has(.ls-utlos-1.is-shown) .ls-pa-1 .d-pop,
.beat:has(.ls-utlos-2.is-shown) .ls-pa-2 .d-pop,
.beat:has(.ls-utlos-3.is-shown) .ls-pa-3 .d-pop {
  opacity: 1;
  transform: none;
}
/* Delar som ritas när takten kommer i bild. */
.ls-start {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.beat.is-visible .ls-start {
  opacity: 1;
}
.beat.is-visible .ls-start .d-draw,
.beat.is-visible .d-draw.ls-start {
  stroke-dashoffset: 0;
}
.ls-stenar ellipse {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.beat.is-visible .ls-stenar ellipse {
  opacity: 1;
}
.ls-stenar ellipse:nth-child(2) { transition-delay: 0.3s; }
.ls-stenar ellipse:nth-child(3) { transition-delay: 0.6s; }
.ls-stenar ellipse:nth-child(4) { transition-delay: 0.9s; }
.ls-stenar ellipse:nth-child(5) { transition-delay: 1.2s; }
.ls-stenar ellipse:nth-child(6) { transition-delay: 1.5s; }
.ls-stenar ellipse:nth-child(7) { transition-delay: 1.8s; }

/* ---------- Ordkorten ---------- */

.ls-kort rect {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.diagram__svg .ls-kort text {
  font-size: 25px;
  font-weight: 600;
}
.diagram__svg .ls-kort--liten text {
  font-size: 21px;
}
/* Ett ihoppackat ord, en nominalisering eller det som står i mitten. */
.ls-kort--nom rect {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagram__svg .ls-kort--nom text {
  fill: var(--paper);
  font-weight: 800;
}
/* Uppackat: vanliga ord och verb. */
.ls-kort--verb rect {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3;
}
.diagram__svg .ls-kort--verb text {
  fill: var(--accent);
  font-weight: 700;
}
/* En fråga vid vägvalet. */
.ls-kort--fraga rect {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-dasharray: 8 5;
}
.diagram__svg .ls-kort--fraga text {
  font-weight: 700;
}
/* Ett svar eller en slutsats. */
.ls-kort--svar rect {
  fill: var(--card);
  stroke: var(--c3);
  stroke-width: 3;
}
.diagram__svg .ls-kort--svar text {
  fill: var(--c3);
  font-weight: 700;
}
/* En ledtråd i texten. */
.ls-kort--ledtrad rect {
  fill: var(--card);
  stroke: var(--c1);
  stroke-width: 3;
  stroke-dasharray: 8 5;
}
.diagram__svg .ls-kort--ledtrad text {
  fill: var(--c1);
  font-weight: 700;
}
.ls-kort--tom rect {
  fill: none;
  stroke: var(--ink-3);
  stroke-dasharray: 6 6;
}

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

.diagram__svg .ls-etikett {
  fill: var(--ink-3);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .ls-etikett--accent {
  fill: var(--accent);
}
.diagram__svg .ls-mening {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 30px;
}
.diagram__svg .ls-mening--liten {
  font-size: 27px;
}
.diagram__svg .ls-fas {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 700;
  fill: var(--accent);
}
.diagram__svg .ls-fastext {
  fill: var(--ink-2);
  font-size: 21px;
  font-weight: 600;
}
.diagram__svg .ls-stationsnamn {
  fill: var(--ink-2);
  font-size: 19px;
  font-weight: 600;
}
.diagram__svg .ls-noor-namn {
  fill: var(--accent);
  font-size: 21px;
  font-weight: 800;
}
.diagram__svg .ls-val {
  fill: var(--ink-2);
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
}
.diagram__svg .ls-kartord {
  font-size: 26px;
  font-weight: 700;
}
.diagram__svg .ls-marginal {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 600;
}
.diagram__svg .ls-sprak {
  font-size: 25px;
  font-weight: 700;
}
.diagram__svg .ls-besk {
  fill: var(--ink-2);
  font-size: 21px;
}
.diagram__svg .ls-fraga {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 38px;
  font-weight: 600;
}
.diagram__svg .ls-fraga-text {
  fill: var(--accent);
  font-size: 22px;
  font-weight: 700;
}

/* ---------- Ordraden i gissningen ---------- */

.ls-ord {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.ls-ord--okant {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 7 5;
}
.ls-hopp {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linecap: round;
}
.ls-hopp--accent {
  stroke: var(--accent);
  stroke-width: 4;
}

/* ---------- Stigen, stenar, skyltar och kullen ---------- */

.ls-stig {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 2 12;
}
.ls-stig--tjock {
  stroke-width: 6;
  stroke-dasharray: 2 14;
}
/* En stig som ritas fram kan inte vara streckad; den blir heldragen. */
.ls-stig.d-draw {
  stroke-dasharray: 1;
}
.ls-stig--gangen {
  stroke: var(--accent);
  stroke-width: 6;
}
.ls-station {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.ls-station--klar {
  fill: var(--accent);
  stroke: var(--accent);
}
.ls-noor {
  fill: var(--accent);
  stroke: var(--card);
  stroke-width: 3;
}
.ls-sten {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linejoin: round;
}
.diagram__svg .ls-sten-text {
  font-size: 28px;
  font-weight: 800;
  fill: var(--accent);
}
.diagram__svg .ls-sten-text--liten {
  font-size: 22px;
}
.ls-stolpe {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.ls-skylt {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linejoin: round;
}
.diagram__svg .ls-skylt-text {
  font-size: 23px;
  font-weight: 700;
}
.ls-kulle {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.ls-skiljelinje {
  fill: none;
  stroke: var(--rule);
  stroke-width: 2;
  stroke-dasharray: 6 7;
}
.ls-person circle,
.ls-person path {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.ls-karta {
  fill: var(--accent-soft);
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ls-karta-vik {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.ls-karta-vag {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
}
.ls-bubbla {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ls-bubbla-rad {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---------- Pilar, ramar och spår ---------- */

.ls-pil__linje,
.ls-tanke,
.ls-ledare {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 3;
  stroke-linecap: round;
}
.ls-pil__spets {
  fill: var(--ink-3);
}
.ls-pil__linje--accent {
  stroke: var(--accent);
  stroke-width: 4;
}
.ls-pil__spets--accent {
  fill: var(--accent);
}
.ls-ledare {
  stroke: var(--accent);
  stroke-width: 2.5;
}
.ls-ram {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 8 5;
}
.ls-spar {
  fill: none;
  stroke: var(--c3);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---------- Sidan, raderna och markeringarna ---------- */

.ls-sida {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.ls-rad {
  fill: none;
  stroke: var(--rule);
  stroke-width: 8;
  stroke-linecap: round;
}
.ls-rad--fet {
  stroke: var(--ink-3);
  stroke-width: 9;
}
.ls-rad--rubrik {
  stroke: var(--ink-2);
  stroke-width: 16;
}
.ls-rad--accent {
  stroke: var(--accent);
}
.ls-markering {
  fill: var(--accent-soft);
}
.diagram__svg .ls-sida-avs {
  fill: var(--ink-3);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .ls-sida-avs--stor {
  font-size: 19px;
  fill: var(--ink-2);
}
.diagram__svg .ls-sida-rubrik {
  font-family: var(--f-display);
  font-size: 33px;
  font-weight: 700;
}
.diagram__svg .ls-sida-ingress {
  fill: var(--ink-2);
  font-size: 19px;
  font-weight: 700;
}
.diagram__svg .ls-sida-bildtext {
  fill: var(--ink-2);
  font-size: 15px;
  font-style: italic;
}
.ls-bild {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.ls-skap rect {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.ls-skap .ls-skap--accent {
  fill: var(--accent-soft);
  stroke: var(--accent);
}

/* ---------- Mätaren ---------- */

.ls-skala {
  fill: none;
  stroke: var(--paper-2);
  stroke-width: 26;
  stroke-linecap: round;
}
.ls-skala-del {
  fill: none;
  stroke: var(--warn-soft);
  stroke-width: 26;
  stroke-linecap: round;
}
.ls-skala-del--plus {
  stroke: var(--good-soft);
}
.ls-nal {
  transform-box: view-box;
  transform-origin: 300px 280px;
  transform: rotate(-6deg);
  transition: transform 1.4s var(--ls-gang) 0.2s;
}
.beat:has(.ls-utlos-1.is-shown) .ls-nal {
  transform: rotate(52deg);
}
.ls-nal__linje {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
}
.ls-nal__nav {
  fill: var(--ink);
}

/* ---------- Tankekartan och målet ---------- */

.ls-mal {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3.5;
}
.diagram__svg .ls-mal-rubrik {
  fill: var(--accent);
  font-size: 25px;
  font-weight: 800;
}
.diagram__svg .ls-mal-text {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 27px;
}

/* ---------- Triangeln ---------- */

.ls-lager {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ls-lager--topp {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.diagram__svg .ls-lager-text {
  font-size: 27px;
  font-weight: 700;
}
.diagram__svg .ls-lager-text--liten {
  font-size: 23px;
  font-weight: 600;
}
.diagram__svg .ls-lager-text--minst {
  font-size: 19px;
  font-weight: 600;
}
.ls-bricka {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.ls-bricka--ratt {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagram__svg .ls-bricka-text {
  fill: var(--paper);
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: 700;
}
.diagram__svg .ls-bricka-text--svag {
  fill: var(--ink-2);
  font-size: 23px;
}

/* ---------- Vågen ---------- */

.ls-vag-bom,
.ls-vag-stolpe,
.ls-vag-skal {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 5;
  stroke-linecap: round;
}
.ls-vag-skal {
  stroke-width: 6;
}
.ls-vag-fot {
  fill: var(--ink-2);
}

/* ---------- Språkjämförelsen ---------- */

.ls-kurva {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}
.ls-kurva-slut {
  fill: var(--accent);
}

/* ---------- Bokmärket ---------- */

.ls-bm {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ls-bm-hal {
  fill: var(--paper);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.ls-bm-linje {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}
.diagram__svg .ls-bm-rubrik {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 700;
}
.diagram__svg .ls-bm-text {
  font-size: 22px;
  font-weight: 600;
}

/* ---------- Storlekar ---------- */

.ls-fig .diagram__svg {
  max-height: 46vh;
}
.ls-fig--lag .diagram__svg {
  max-height: 38vh;
}
.ls-fig--mellan .diagram__svg {
  max-height: 32vh;
}
.ls-fig--liten .diagram__svg {
  max-height: 22vh;
}
#vagval .ls-fig .diagram__svg,
#sammanfatta .ls-fig .diagram__svg,
#vandringen .ls-fig .diagram__svg {
  max-height: 38vh;
}
#markera .ls-fig .diagram__svg {
  max-height: 43vh;
}
#fore-fragor .ls-fig--mellan .diagram__svg {
  max-height: 29vh;
}
#fastnar .ls-fig--lag .diagram__svg {
  max-height: 32vh;
}
/* Flera korta steg under ett diagram står tätt. */
.aside.ls-steg {
  margin-top: clamp(0.4rem, 1.4vh, 0.9rem);
}
.ls-fig + .aside.ls-steg {
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
}
@media (max-height: 760px) {
  .ls-fig .diagram__svg {
    max-height: 42vh;
  }
  .ls-fig--lag .diagram__svg {
    max-height: 36vh;
  }
  .ls-fig--mellan .diagram__svg {
    max-height: 30vh;
  }
  .ls-fig--liten .diagram__svg {
    max-height: 21vh;
  }
}

/* ---------- Text i HTML ---------- */

.claim.ls-claim--liten {
  font-size: clamp(1.8rem, 1rem + 2.3vw, 3.3rem);
}
.section-title.ls-titel--liten {
  font-size: clamp(1.6rem, 0.9rem + 2vw, 2.8rem);
}
.ls-delad {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: center;
  margin-top: clamp(0.6rem, 1.6vh, 1.2rem);
}
.ls-delad .diagram {
  margin: 0;
}
.ls-delad--lika {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ls-delad .ls-fig--liten .diagram__svg {
  max-height: 28vh;
}
.ls-artikel.ls-artikel--utdrag {
  font-size: clamp(0.95rem, 0.55rem + 0.85vw, 1.35rem);
}
@media (max-width: 760px) {
  .ls-delad {
    grid-template-columns: 1fr;
  }
}

/* Uppgiften i grupparbetet. */
.ls-uppgift {
  max-width: 44rem;
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
  padding: 1rem 1.6rem 1.2rem;
  border: 2px dashed var(--accent);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.ls-uppgift__etikett {
  margin: 0 0 0.3rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.ls-uppgift__text {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 0.9rem + 1.5vw, 2.3rem);
  line-height: 1.25;
  text-wrap: pretty;
}

/* Fallets text: en nyhet som en tidningsspalt. */
.ls-artikel {
  padding: 1rem 1.5rem 1.1rem;
  border-top: 5px solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.6rem + 0.95vw, 1.5rem);
  line-height: 1.42;
}
.ls-artikel p {
  margin: 0 0 0.55em;
  text-wrap: pretty;
}
.ls-artikel p:last-child {
  margin-bottom: 0;
}
.ls-artikel__avs {
  font-family: var(--f-ui);
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ls-artikel__rubrik {
  font-family: var(--f-display);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 1.12;
}
.ls-artikel__ingress {
  font-weight: 700;
}
.ls-artikel--hel {
  margin-top: clamp(0.5rem, 1.4vh, 1rem);
  font-size: clamp(0.95rem, 0.5rem + 0.85vw, 1.35rem);
  line-height: 1.38;
}
.ls-artikel__spalter {
  columns: 2;
  column-gap: 2.2rem;
}
.ls-artikel__spalter p {
  break-inside: avoid;
}
.ls-artikel--ovning {
  max-width: 52rem;
  border-top-color: var(--accent);
}
@media (max-width: 760px) {
  .ls-artikel__spalter {
    columns: 1;
  }
}
/* Noors okända ord ringas in ett i taget när takten kommer i bild. */
.ls-okant {
  border-radius: 0.3em;
  box-shadow: 0 0 0 2px transparent;
  transition: box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.3s + 0.4s);
}
.beat.is-visible .ls-okant {
  box-shadow: 0 0 0 3px var(--accent);
  background-color: var(--accent-soft);
}
/* Okända ord stryks under när steget visas. */
.ls-under {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.6s var(--ease);
}
.beat:has(.ls-utlos-1.is-shown) .ls-under {
  text-decoration-color: var(--accent);
}
.ls-lyft {
  padding: 0 0.1em;
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* En mening ur texten. */
.ls-citat {
  max-width: 60rem;
  margin: clamp(0.4rem, 1.4vh, 1rem) 0 0;
  padding: 0.7rem 1.4rem;
  border-left: 6px solid var(--ink-2);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.2rem, 0.8rem + 1.1vw, 1.9rem);
  line-height: 1.32;
  text-wrap: pretty;
}
.ls-mark {
  padding: 0 0.12em;
  border-radius: 0.2em;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

/* Tre meningar att välja mellan. */
.ls-alt {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 0.7rem + 1vw, 1.65rem);
  line-height: 1.3;
}
.ls-alt li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
}
.ls-alt__n {
  flex: none;
  width: 1.2em;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--accent);
}

/* Röstningen om elevernas egna språk har fyra knappar. */
.ls-sprakval .vote__btn {
  min-width: 7em;
}
.ls-sprakval + .talk__q {
  margin-top: clamp(1.4rem, 4vh, 2.6rem);
}

/* Före och efter. */
.ls-fore-efter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: start;
}
.ls-anteckning {
  padding: 0.9rem 1.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.6rem + 0.9vw, 1.45rem);
  line-height: 1.4;
}
.ls-anteckning--fore {
  opacity: 0.9;
}
.ls-anteckning__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(--ink-3);
}
.ls-anteckning__rubrik--efter {
  color: var(--c3);
}
.ls-anteckning__text p {
  margin: 0 0 0.5em;
  text-wrap: pretty;
}
.ls-anteckning__text p:last-child {
  margin-bottom: 0;
}
.ls-anteckning--efter strong {
  color: var(--c3);
}
@media (max-width: 760px) {
  .ls-fore-efter {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-start,
  .ls-nal,
  .ls-okant,
  .ls-under,
  .ls-stenar ellipse,
  .ls-pa-1, .ls-pa-2, .ls-pa-3,
  .ls-av-1, .ls-av-2, .ls-av-3,
  .ls-svag-1, .ls-svag-2, .ls-svag-3 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Gissningar med diagram: röstknappar och svar står tätare. */
.ls-tat .kicker {
  margin-bottom: 0.8rem;
}
.ls-tat .vote,
.ls-tat .answer {
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
}
.ls-tat .answer {
  padding: 0.9rem 1.4rem;
}

/* Korta steg bredvid varandra under sammanfattningen. */
.ls-stegrad {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.2rem;
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
}
.ls-stegrad .aside.ls-steg {
  margin-top: 0;
}
.ls-fig--gissa .diagram__svg {
  max-height: 30vh;
}
.ls-fig--inferens .diagram__svg {
  max-height: 31vh;
}