/* Egna stilar för Att läsa en text i sin tid. Den gemensamma layouten ligger
   i ../presentation.css.

   Bildspråket: litteraturhistorien är en pendel som svänger mellan känsla och
   dröm (vänster) och verklighet och förnuft (höger). Varje epok svänger bort
   från den förra. Romantiken har färgen --c1, realismen --c2 och modernismen
   --c3; accenten används för Noor och för det som lyfts fram. Texterna i
   fallet visas som utdrag på papper. Bara temats variabler används, så allt
   följer ljust och mörkt läge. */

:root {
  --ep-sving: cubic-bezier(0.45, 0, 0.55, 1);
}

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

.ep-pa-1, .ep-pa-2, .ep-pa-3, .ep-pa-4 {
  opacity: 0;
}
.ep-pa-1, .ep-pa-2, .ep-pa-3, .ep-pa-4,
.ep-av-1, .ep-av-2,
.ep-svag-1, .ep-svag-2, .ep-svag-3, .ep-svag-4 {
  transition: opacity 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.ep-utlos-1.is-shown) .ep-pa-1,
.beat:has(.ep-utlos-2.is-shown) .ep-pa-2,
.beat:has(.ep-utlos-3.is-shown) .ep-pa-3,
.beat:has(.ep-utlos-4.is-shown) .ep-pa-4 {
  opacity: 1;
}
.beat:has(.ep-utlos-1.is-shown) .ep-av-1,
.beat:has(.ep-utlos-2.is-shown) .ep-av-2 {
  opacity: 0;
}
.beat:has(.ep-utlos-1.is-shown) .ep-svag-1,
.beat:has(.ep-utlos-2.is-shown) .ep-svag-2,
.beat:has(.ep-utlos-3.is-shown) .ep-svag-3,
.beat:has(.ep-utlos-4.is-shown) .ep-svag-4 {
  opacity: 0.3;
}
.beat:has(.ep-utlos-1.is-shown) .ep-pa-1 .d-draw,
.beat:has(.ep-utlos-2.is-shown) .ep-pa-2 .d-draw,
.beat:has(.ep-utlos-3.is-shown) .ep-pa-3 .d-draw,
.beat:has(.ep-utlos-4.is-shown) .ep-pa-4 .d-draw {
  stroke-dashoffset: 0;
}
/* Delar som ritas när takten kommer i bild. */
.ep-start {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat.is-visible .ep-start {
  opacity: 1;
}
.beat.is-visible .ep-start .d-draw {
  stroke-dashoffset: 0;
}
/* ep-start och ep-svag på samma element: nedtoningen vinner. */
.beat.is-visible:has(.ep-utlos-1.is-shown) .ep-start.ep-svag-1,
.beat.is-visible:has(.ep-utlos-3.is-shown) .ep-start.ep-svag-3 {
  opacity: 0.3;
}
.beat.is-visible:has(.ep-utlos-1.is-shown) .ep-start.ep-av-1 {
  opacity: 0;
}

/* ---------- Pendeln ---------- */

.ep-bana {
  fill: none;
  stroke: var(--rule);
  stroke-width: 3;
  stroke-dasharray: 2 12;
  stroke-linecap: round;
}
.ep-faste {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.ep-nav {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 4;
}
.ep-stang {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
}
.ep-lod {
  fill: var(--accent);
  stroke: var(--ink);
  stroke-width: 3;
}
.ep-lod--1 {
  fill: var(--c1);
}
.ep-pendel {
  transform-box: view-box;
  transition: transform 1.8s var(--ep-sving);
}
#pendeln .ep-pendel {
  transform-origin: 500px 40px;
  transform: rotate(-30deg);
}
#pendeln:has(.ep-utlos-1.is-shown) .ep-pendel {
  transform: rotate(32deg);
}
#pendeln:has(.ep-utlos-2.is-shown) .ep-pendel {
  transform: rotate(-32deg);
}
#pendeln:has(.ep-utlos-3.is-shown) .ep-pendel {
  transform: rotate(20deg);
}
#pendeln:has(.ep-utlos-4.is-shown) .ep-pendel {
  transform: rotate(26deg);
}
#romantik-mot .ep-pendel {
  transform-origin: 500px 24px;
  transform: rotate(0deg);
}
#romantik-mot.is-visible .ep-pendel {
  transform: rotate(28deg);
  transition-delay: 0.4s;
}
#nittiotalet .ep-pendel {
  transform-origin: 500px 30px;
  transform: rotate(-28deg);
}
#nittiotalet:has(.ep-utlos-1.is-shown) .ep-pendel {
  transform: rotate(18deg);
}
.diagram__svg .ep-pol {
  fill: var(--ink-2);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.diagram__svg .ep-pol--1 {
  fill: var(--c1);
}
.diagram__svg .ep-epok {
  font-family: var(--f-display);
  font-style: var(--display-style);
  font-size: 32px;
  font-weight: 700;
}
.diagram__svg .ep-epok--1 { fill: var(--c1); }
.diagram__svg .ep-epok--2 { fill: var(--c2); }
.diagram__svg .ep-epok--3 { fill: var(--c3); }
.ep-fri {
  fill: none;
  stroke: var(--c3);
  stroke-width: 5;
  stroke-linecap: round;
}

/* ---------- Tidslinjer ---------- */

.ep-tidslinje {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3;
}
.ep-tick {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
}
.ep-pilspets {
  fill: var(--ink-2);
}
.ep-pilspets--accent {
  fill: var(--accent);
}
.ep-markor {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 5 5;
}
.ep-markprick {
  fill: var(--ink);
}
.ep-markprick--3 {
  fill: var(--c3);
}
.diagram__svg .ep-handelse {
  font-size: 22px;
  font-weight: 600;
}
.diagram__svg .ep-handelse--fet {
  font-weight: 700;
  fill: var(--ink);
}
.diagram__svg .ep-handelse--3 {
  fill: var(--c3);
  font-weight: 700;
}
.ep-krig {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 2;
}
.ep-svang {
  fill: none;
  stroke: var(--c1);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---------- Rutor, kort och etiketter ---------- */

.ep-ruta {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.ep-ruta--1 { stroke: var(--c1); stroke-width: 3.5; }
.ep-ruta--2 { stroke: var(--c2); stroke-width: 3.5; }
.ep-ruta--3 { stroke: var(--c3); stroke-width: 3.5; }
.diagram__svg .ep-ruta-rubrik {
  font-family: var(--f-display);
  font-style: var(--display-style);
  font-size: 34px;
  font-weight: 700;
}
.diagram__svg .ep-ruta-rubrik--1 { fill: var(--c1); }
.diagram__svg .ep-ruta-rubrik--2 { fill: var(--c2); }
.diagram__svg .ep-ruta-rubrik--3 { fill: var(--c3); }
.diagram__svg .ep-ruta-text {
  font-size: 24px;
}
.diagram__svg .ep-ruta-text--fet {
  font-weight: 700;
}
.diagram__svg .ep-stor-bokstav {
  font-family: var(--f-display);
  font-size: 56px;
  font-weight: 800;
}
.ep-kort rect {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.diagram__svg .ep-kort text {
  font-size: 36px;
  font-weight: 700;
}
.diagram__svg .ep-kort--liten text {
  font-size: 23px;
  font-weight: 600;
}
.ep-kort--ratt rect {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 4;
}
.diagram__svg .ep-kort--ratt text {
  fill: var(--accent);
}
.diagram__svg .ep-etikett {
  fill: var(--ink-2);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.diagram__svg .ep-etikett--1 { fill: var(--c1); }
.diagram__svg .ep-etikett--3 { fill: var(--c3); }
.ep-bubbla {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3;
}
.diagram__svg .ep-bubbla-text {
  fill: var(--accent);
  font-size: 26px;
  font-weight: 700;
}
.ep-cell rect {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.diagram__svg .ep-cell text {
  font-size: 22px;
  font-weight: 600;
}
.diagram__svg .ep-rad-rubrik {
  font-family: var(--f-display);
  font-style: var(--display-style);
  font-size: 30px;
  font-weight: 700;
}
.diagram__svg .ep-fraga-stor {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: var(--display-style);
  font-size: 34px;
  font-weight: 700;
}

/* ---------- Sidor och rader ---------- */

.ep-sida {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.ep-rad {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 6;
  stroke-linecap: round;
}
.ep-rimprick {
  fill: var(--c1);
}
.ep-rimprick--b {
  fill: var(--accent);
}

/* ---------- Dikterna i SVG ---------- */

.diagram__svg .ep-dikt {
  font-family: var(--f-body);
  font-style: italic;
  font-size: 36px;
}
.diagram__svg .ep-dikt--liten {
  font-size: 28px;
}
.diagram__svg .ep-dikt--mod {
  font-size: 30px;
}
.ep-m1, .ep-m2, .ep-m3 {
  transition: fill 0.6s var(--ease);
}
.beat:has(.ep-utlos-1.is-shown) .ep-m1 {
  fill: var(--c1);
  font-weight: 700;
}
#romantik-drag:has(.ep-utlos-2.is-shown) .ep-m2,
#listan:has(.ep-utlos-1.is-shown) .ep-m2 {
  fill: var(--accent);
  font-weight: 700;
}
/* Text A: jaget först, sedan bilden. */
#modernism-drag:has(.ep-utlos-1.is-shown) .ep-m3 {
  fill: var(--c3);
  font-weight: 700;
}
#modernism-drag:has(.ep-utlos-2.is-shown) .ep-m2 {
  fill: var(--accent);
  font-weight: 700;
}
.ep-band {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.ep-band--1 { stroke: var(--c1); }
.ep-band--2 { stroke: var(--accent); }
.ep-klammer {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.diagram__svg .ep-klammer-text {
  font-size: 26px;
  font-weight: 700;
}
.ep-legend--1 { fill: var(--c1); }
.ep-legend--2 { fill: var(--accent); }
.ep-legend--3 { fill: var(--c3); }
.ep-legend-streck {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
}
.diagram__svg .ep-legendtext {
  font-size: 24px;
  font-weight: 700;
}
.ep-takt circle {
  fill: var(--c1);
}
.ep-takt--fri circle {
  fill: var(--c3);
}

/* ---------- Bilder: samhället, arv och miljö ---------- */

.ep-ikon path,
.ep-ikon circle,
.ep-stad,
.ep-ikon-linje,
.ep-slakt-linje {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ep-rok {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 3;
  stroke-linecap: round;
}
.ep-rok--1 {
  stroke: var(--c1);
}
.ep-vag {
  fill: none;
  stroke: var(--c1);
  stroke-width: 3;
}
.ep-ljud {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.diagram__svg .ep-ikontext {
  font-size: 23px;
  font-weight: 700;
}
.ep-slakt {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 3;
}
.ep-person circle,
.ep-person path {
  fill: var(--accent-soft);
  stroke: var(--ink);
  stroke-width: 3;
}
.ep-drag {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
}

/* ---------- De tre frågorna och analysen ---------- */

.ep-fraga {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.ep-fraga--accent {
  stroke: var(--accent);
  stroke-width: 3.5;
}
.ep-tanke {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 3;
  stroke-dasharray: 6 6;
}
.diagram__svg .ep-fraga-nr {
  fill: var(--ink-2);
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 800;
}
.diagram__svg .ep-fraga-nr--accent {
  fill: var(--accent);
}
.diagram__svg .ep-fraga-text {
  font-size: 27px;
  font-weight: 700;
}
.diagram__svg .ep-fraga-sub {
  fill: var(--ink-2);
  font-size: 21px;
}
.ep-lod--liten {
  stroke-width: 2;
}
.ep-block {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.ep-block--accent {
  stroke: var(--accent);
  stroke-width: 3.5;
}
.diagram__svg .ep-block-rubrik {
  font-family: var(--f-display);
  font-style: var(--display-style);
  font-size: 34px;
  font-weight: 700;
}
.diagram__svg .ep-block-rubrik--accent {
  fill: var(--accent);
}
.diagram__svg .ep-mall {
  font-family: var(--f-body);
  font-size: 30px;
}

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

.ep-fig .diagram__svg {
  max-height: 48vh;
}
.ep-fig--lag .diagram__svg {
  max-height: 38vh;
}
.ep-fig--mellan .diagram__svg {
  max-height: 40vh;
}
.ep-fig--liten .diagram__svg {
  max-height: 24vh;
}
.ep-fig--gissa .diagram__svg {
  max-height: 28vh;
}
#listan .ep-fig--lag .diagram__svg {
  max-height: 36vh;
}
@media (max-height: 760px) {
  .ep-fig .diagram__svg {
    max-height: 44vh;
  }
  .ep-fig--lag .diagram__svg {
    max-height: 34vh;
  }
  .ep-fig--liten .diagram__svg {
    max-height: 22vh;
  }
}
.aside.ep-steg {
  margin-top: clamp(0.4rem, 1.4vh, 0.9rem);
}
.ep-fig + .aside.ep-steg,
.ep-fig ~ .aside.ep-steg {
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
}

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

.claim.ep-claim--liten {
  font-size: clamp(1.8rem, 1rem + 2.3vw, 3.3rem);
}
.section-title.ep-titel--liten {
  font-size: clamp(1.6rem, 0.9rem + 2vw, 2.8rem);
}
.ep-tat .kicker {
  margin-bottom: 0.8rem;
}
.ep-tat .vote,
.ep-tat .answer {
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
}
.ep-tat .answer {
  padding: 0.9rem 1.4rem;
}

/* Uppgiften. */
.ep-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);
}
.ep-uppgift__etikett {
  margin: 0 0 0.4rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ep-uppgift__text {
  margin: 0;
  font-family: var(--f-display);
  font-style: var(--display-style);
  font-size: clamp(1.5rem, 0.9rem + 1.8vw, 2.5rem);
  line-height: 1.2;
}

/* De tre texterna. */
.ep-texter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.8rem);
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
}
.ep-text {
  position: relative;
  padding: 1.4rem 1.4rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.ep-text__bokstav {
  margin: 0 0 0.5rem;
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 1rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}
.ep-text__dikt,
.ep-text__prosa {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.6rem + 0.95vw, 1.5rem);
  line-height: 1.45;
}
.ep-text__dikt {
  font-style: italic;
}

/* Utdraget ur Röda rummet och övningstexten. */
.ep-delad {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: center;
  margin-top: clamp(0.6rem, 1.6vh, 1.2rem);
}
.ep-delad .diagram {
  margin: 0;
}
.ep-utdrag {
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 0.6rem + 1vw, 1.6rem);
  line-height: 1.5;
}
.ep-utdrag p {
  margin: 0;
}
.ep-utdrag .ep-kalla {
  margin-top: 0.8rem;
}
.ep-utdrag--ovning {
  max-width: 34rem;
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
}
.ep-h1, .ep-h2 {
  border-radius: 3px;
  transition:
    background-color 0.6s var(--ease),
    color 0.6s var(--ease);
}
.beat:has(.ep-utlos-1.is-shown) .ep-h1 {
  color: var(--c1);
  font-weight: 700;
}
.beat:has(.ep-utlos-2.is-shown) .ep-h2 {
  color: var(--accent);
  font-weight: 700;
}
.ep-kalla {
  margin: clamp(0.4rem, 1.2vh, 0.8rem) 0 0;
  font-family: var(--f-ui);
  font-size: clamp(0.85rem, 0.6rem + 0.5vw, 1.1rem);
  color: var(--ink-2);
}

/* Noors första mening. */
.ep-anteckning {
  max-width: 52rem;
  margin: clamp(0.6rem, 1.8vh, 1.1rem) 0 0;
  padding: 0.7rem 1.2rem;
  border-left: 5px solid var(--accent);
  background: var(--card);
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.6rem + 0.9vw, 1.45rem);
  line-height: 1.4;
}
.ep-anteckning__rubrik {
  display: block;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Före och efter. */
.ep-fore-efter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
  align-items: start;
}
.ep-anteckning-ruta {
  padding: 1.1rem 1.4rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  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.45;
}
.ep-anteckning-ruta--fore {
  opacity: 0.85;
}
.ep-anteckning-ruta--efter {
  border: 2px solid var(--c3);
}
.ep-anteckning-ruta__rubrik {
  margin: 0 0 0.6rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ep-anteckning-ruta__rubrik--efter {
  color: var(--c3);
}
.ep-anteckning-ruta__text p {
  margin: 0 0 0.5em;
  text-wrap: pretty;
}
.ep-anteckning-ruta__text p:last-child {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .ep-texter,
  .ep-delad,
  .ep-fore-efter {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ep-start,
  .ep-pendel,
  .ep-m1, .ep-m2, .ep-m3,
  .ep-h1, .ep-h2,
  .ep-pa-1, .ep-pa-2, .ep-pa-3, .ep-pa-4,
  .ep-av-1, .ep-av-2,
  .ep-svag-1, .ep-svag-2, .ep-svag-3, .ep-svag-4 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}