/* Egna stilar för Retorik och muntlig framställning. Den gemensamma layouten
   ligger i ../presentation.css.

   Bildspråket: talet är en väg som publiken går med talaren.
   - vägen (rt-vag) med sex stationer (rt-station) för den retoriska
     arbetsprocessen; en tänd station är fylld i accentfärg. Kapitelsidorna
     visar samma väg i liten skala (rt-mini) med kapitlets stationer tända,
   - stigarna (rt-stig) är vägar till publiken: förtroende, känsla och
     förnuft i kategorifärgerna, och öglan tillbaka till början,
   - vägskyltarna (rt-skylt) är sambandsorden,
   - manussidan (rt-sida) med täta rader och stödordskortet (rt-kort),
   - rutorna (rt-ruta) är klassens röster, en per elev.
   Bara temats variabler används. */

/* ---------- Stegen i diagrammen ----------
   Ett steg med klassen rt-utlos-N styr andra delar i samma takt: rt-pa-N
   tonar in. Delar i rt-start rör sig när takten kommer i bild. */

.rt-pa-1,
.rt-pa-2,
.rt-pa-3 {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.beat:has(.rt-utlos-1.is-shown) .rt-pa-1,
.beat:has(.rt-utlos-2.is-shown) .rt-pa-2,
.beat:has(.rt-utlos-3.is-shown) .rt-pa-3 {
  opacity: 1;
}
.beat.is-visible .rt-start .d-pop,
.beat.is-visible .rt-start-alla .d-pop {
  opacity: 1;
  transform: none;
}
.beat.is-visible .rt-start .d-draw {
  stroke-dashoffset: 0;
}
.beat.is-visible .rt-start .d-bar {
  transform: none;
}

/* ---------- Vägen ---------- */

.rt-vag-kant,
.rt-vag,
.rt-vag-mitt {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rt-vag-kant {
  stroke: var(--rule);
  stroke-width: 42;
}
.rt-vag {
  stroke: var(--paper-2);
  stroke-width: 36;
}
.rt-vag-mitt {
  stroke: var(--card);
  stroke-width: 3;
  stroke-dasharray: 14 12;
}
.rt-station {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 3;
}
.rt-station--tand {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagram__svg .rt-nr {
  fill: var(--ink-2);
  font-family: var(--f-ui);
  font-size: 28px;
  font-weight: 800;
}
.diagram__svg .rt-nr--tand {
  fill: var(--paper);
}
.rt-port {
  fill: var(--ink-2);
}
.rt-port--mal {
  fill: var(--accent);
}

/* Vägen i liten skala på kapitelsidorna. */
.rt-kapvag {
  grid-column: 1 / -1;
  margin: clamp(1.4rem, 5vh, 3.2rem) 0 0;
}
.rt-kapvag .diagram__svg {
  max-height: 16vh;
}
.rt-mini-vag {
  fill: none;
  stroke: color-mix(in srgb, var(--chapter-ink) 22%, transparent);
  stroke-width: 14;
  stroke-linecap: round;
}
.rt-mini-st {
  fill: var(--chapter-bg);
  stroke: color-mix(in srgb, var(--chapter-ink) 40%, transparent);
  stroke-width: 3;
}
.rt-mini-st--klar {
  fill: color-mix(in srgb, var(--chapter-ink) 35%, var(--chapter-bg));
}
.rt-mini-st--tand {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagram__svg .rt-mini-nr {
  fill: var(--chapter-ink);
  font-family: var(--f-ui);
  font-size: 22px;
  font-weight: 800;
}
.diagram__svg .rt-mini-nr--tand {
  fill: var(--chapter-bg);
}
.diagram__svg .rt-mini-t {
  fill: color-mix(in srgb, var(--chapter-ink) 60%, transparent);
  font-family: var(--f-ui);
  font-size: 24px;
  font-weight: 600;
}
.diagram__svg .rt-mini-t--tand {
  fill: var(--chapter-ink);
  font-weight: 800;
}

/* ---------- Stigar till publiken ---------- */

.rt-stig {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.rt-stig--1 {
  stroke: var(--c1);
}
.rt-stig--2 {
  stroke: var(--c2);
}
.rt-stig--3 {
  stroke: var(--c3);
}
.diagram__svg .rt-stig-t--1 {
  fill: var(--c1);
}
.diagram__svg .rt-stig-t--2 {
  fill: var(--c2);
}
.diagram__svg .rt-stig-t--3 {
  fill: var(--c3);
}
.diagram__svg .rt-grek {
  fill: var(--ink-2);
  font-weight: 500;
  font-style: italic;
}
.diagram__svg .rt-citat-t {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 27px;
}

/* ---------- Vägskyltar ---------- */

.rt-stolpe {
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.rt-skylt {
  fill: var(--accent);
}
.diagram__svg .rt-skylt-t {
  fill: var(--paper);
  font-family: var(--f-ui);
  font-size: 27px;
  font-weight: 800;
}

/* ---------- Manus, kort och block ---------- */

.rt-sida {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.rt-sidrad {
  stroke: var(--ink-3);
  stroke-width: 5;
  stroke-linecap: round;
}
.rt-markering {
  fill: color-mix(in srgb, var(--accent) 45%, transparent);
}
.rt-kort {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3;
}
.rt-punkt {
  fill: var(--accent);
}
.rt-kortrad {
  stroke: var(--ink);
  stroke-width: 8;
  stroke-linecap: round;
}
.diagram__svg .rt-kort-lab {
  fill: var(--accent);
  font-family: var(--f-ui);
  font-size: 22px;
  font-weight: 800;
}
.diagram__svg .rt-kort-t {
  font-family: var(--f-ui);
  font-size: 23px;
  font-weight: 600;
}
.diagram__svg .rt-kort-t--ordagrant {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-weight: 500;
}
.diagram__svg .rt-kort-lab--stor {
  font-size: 32px;
}
.rt-tomrad {
  stroke: var(--rule);
  stroke-width: 3;
  stroke-dasharray: 6 6;
}
.rt-klammer {
  fill: none;
  stroke: var(--c1);
  stroke-width: 5;
  stroke-linecap: round;
}
.rt-ram {
  fill: none;
  stroke: var(--c1);
  stroke-width: 3;
  stroke-dasharray: 10 7;
}
.rt-bricka {
  fill: var(--c1);
}
.diagram__svg .rt-bricka-t {
  fill: var(--paper);
  font-family: var(--f-ui);
  font-size: 26px;
  font-weight: 800;
}
.rt-ordblock {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.rt-ordblock--bort {
  fill: var(--ink-3);
}
.rt-langblock {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2.5;
  stroke-dasharray: 8 5;
}
.diagram__svg .rt-langblock-t {
  fill: var(--ink-2);
  font-family: var(--f-ui);
  font-size: 22px;
  font-weight: 600;
}
.rt-kortblock {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.rt-kortblock--poang {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagram__svg .rt-kortblock-t {
  font-family: var(--f-ui);
  font-size: 23px;
  font-weight: 700;
}
.diagram__svg .rt-kortblock--poang + .rt-kortblock-t {
  fill: var(--paper);
}

/* Det Noor har samlat: tre kort väljs när steget visas. */
.rt-stoffkort {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2.5;
  transition:
    fill 0.6s var(--ease),
    stroke 0.6s var(--ease);
}
.diagram__svg .rt-stoff-t {
  font-family: var(--f-ui);
  font-size: 23px;
  font-weight: 600;
  transition: fill 0.6s var(--ease);
}
.rt-stoff {
  transition: opacity 0.6s var(--ease);
}
.beat:has(.rt-utlos-1.is-shown) .rt-stoff--bort {
  opacity: 0.35;
}
.beat:has(.rt-utlos-1.is-shown) .rt-stoff--vald .rt-stoffkort {
  fill: var(--accent);
  stroke: var(--accent);
}
.beat:has(.rt-utlos-1.is-shown) .rt-stoff--vald .rt-stoff-t {
  fill: var(--paper);
  font-weight: 800;
}
.diagram__svg .rt-tagg {
  fill: var(--accent);
  font-family: var(--f-ui);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Klassens röster. */
.rt-ruta {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 1.5;
}
.rt-ruta--ja {
  fill: var(--accent);
  stroke: var(--accent);
}

/* Knepen mot nervositet. */
.rt-ikon {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.rt-ikon--accent {
  fill: var(--accent-soft, var(--paper-2));
  stroke: var(--accent);
}
.rt-ikon-rad {
  stroke: var(--ink-3);
  stroke-width: 4;
  stroke-linecap: round;
}
.rt-andning {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
}
.rt-andning.d-draw {
  transition-duration: 2.6s;
}

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

.diagram__svg .rt-etikett {
  font-family: var(--f-ui);
  font-size: 27px;
  font-weight: 800;
}
.diagram__svg .rt-etikett--accent {
  fill: var(--accent);
}
.diagram__svg .rt-fraga-t {
  fill: var(--ink-2);
  font-family: var(--f-ui);
  font-size: 22px;
  font-weight: 500;
}
.diagram__svg .rt-sprak {
  font-family: var(--f-ui);
  font-size: 28px;
  font-weight: 800;
}
.diagram__svg .rt-lista {
  fill: var(--ink-2);
  font-size: 22px;
}
.diagram__svg .rt-fraga {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 600;
}

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

.rt-fig .diagram__svg {
  max-height: 52vh;
}
.rt-fig--mellan .diagram__svg {
  max-height: 38vh;
}
.rt-fig--kort .diagram__svg {
  max-height: 27vh;
}
.rt-fig--liten .diagram__svg {
  max-height: 20vh;
}
.rt-fig--rad .diagram__svg {
  max-height: 9vh;
}
@media (max-height: 760px) {
  .rt-fig .diagram__svg {
    max-height: 44vh;
  }
  .rt-fig--mellan .diagram__svg {
    max-height: 32vh;
  }
  .rt-fig--kort .diagram__svg {
    max-height: 23vh;
  }
  .rt-fig--liten .diagram__svg {
    max-height: 16vh;
  }
  .rt-fig--rad .diagram__svg {
    max-height: 8vh;
  }
}
.answer .diagram,
.rt-fig--rad {
  margin-top: 0.8rem;
}

/* ---------- Fallet: uppgiften och manuset ---------- */

.rt-uppgift {
  max-width: 46rem;
  padding: 1rem 1.5rem 1.1rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1.15rem, 0.8rem + 1vw, 1.75rem);
  line-height: 1.4;
}
.rt-uppgift p {
  margin: 0 0 0.5em;
}
.rt-uppgift p:last-child {
  margin-bottom: 0;
}
.rt-uppgift__rubrik,
.rt-manus__rubrik,
.rt-text__etikett,
.rt-rad__etikett {
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.rt-uppgift__forslag span {
  font-family: var(--f-ui);
  font-size: 0.75em;
  font-weight: 700;
  color: var(--ink-2);
}

.rt-manus {
  max-width: 64rem;
  padding: 0.9rem 1.5rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(0.95rem, 0.65rem + 0.8vw, 1.4rem);
  line-height: 1.45;
}
.rt-manus__rubrik {
  margin: 0 0 0.4rem;
  color: var(--ink-2);
}
.rt-manus__rubrik--efter {
  color: var(--accent);
}
.rt-manus__text p {
  margin: 0 0 0.45em;
}
.rt-manus__text p:last-child {
  margin-bottom: 0;
}
.rt-manus--efter {
  border: 2px solid var(--accent);
}
.rt-fore-efter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: start;
}
.rt-fore-efter .rt-manus {
  font-size: clamp(0.9rem, 0.6rem + 0.75vw, 1.3rem);
}
.rt-stodkort {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35em;
  font-family: var(--f-ui);
  font-size: 1.1em;
  font-weight: 600;
}
.rt-stodkort__lab {
  display: inline-block;
  min-width: 1.4em;
  color: var(--accent);
  font-weight: 800;
}
@media (max-width: 760px) {
  .rt-fore-efter {
    grid-template-columns: 1fr;
  }
}

/* Ett yttrande att rösta om och alternativen för inledningen. */
.rt-yttrande {
  max-width: 54rem;
  margin-bottom: clamp(1rem, 3vh, 2rem);
}
.rt-alternativ {
  display: grid;
  gap: clamp(0.5rem, 1.4vh, 0.9rem);
  max-width: 60rem;
  margin: 0 0 clamp(1rem, 3vh, 2rem);
}
.rt-alternativ__rad {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  margin: 0;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--card);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.2rem, 0.8rem + 1.2vw, 2rem);
  line-height: 1.25;
}
.rt-alternativ__bokstav {
  flex: none;
  font-family: var(--f-ui);
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}

/* En replik ur fallet under diagrammet. */
.rt-rad {
  max-width: 60rem;
  margin: clamp(0.6rem, 1.6vh, 1.2rem) 0 0;
  padding: 0.5rem 1.1rem;
  border-left: 5px solid var(--accent);
  background: var(--card);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.15rem, 0.8rem + 1vw, 1.8rem);
  line-height: 1.35;
}
.rt-rad__etikett {
  margin-right: 0.6rem;
  font-style: normal;
}

/* Den långa meningen i verkstaden. */
.rt-lang {
  max-width: 62rem;
  margin: 0 0 0.6rem;
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.15rem, 0.8rem + 1vw, 1.8rem);
  line-height: 1.35;
}

/* Numrerade rader: knep, frågor och steg. */
.rt-fragor {
  margin: clamp(0.8rem, 2vh, 1.4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.rt-fragor li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 0.8rem + 1.4vw, 2.3rem);
  line-height: 1.15;
}
.rt-fragor__n {
  flex: none;
  width: 1.1em;
  color: var(--accent);
  font-weight: 300;
}

/* Strategin: kortet till vänster, frågorna till höger. */
.rt-strategi {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
}
.rt-strategi .rt-fig .diagram__svg {
  max-height: 48vh;
}
.rt-strategi .rt-fragor {
  margin-top: 0;
}
@media (max-width: 760px) {
  .rt-strategi {
    grid-template-columns: 1fr;
  }
}

/* Övningen i verkstaden. */
.rt-text {
  max-width: 60rem;
  margin: 0 0 clamp(1rem, 2.6vh, 1.8rem);
  padding: 1.1rem 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;
}
.rt-text__etikett {
  display: block;
  margin-bottom: 0.4rem;
  font-style: normal;
}

/* Röstningen om elevernas egna språk har fyra knappar. */
.rt-sprakval + .talk__q {
  margin-top: clamp(1.2rem, 3.5vh, 2.4rem);
}

/* ---------- Quiz: påståendet markeras när svaret visas ---------- */

.rt-markera-fel,
.rt-markera-ratt {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.16em;
  transition: text-decoration-color 0.6s var(--ease);
}
.beat:has(.answer.is-shown) .rt-markera-fel {
  text-decoration-style: wavy;
  text-decoration-color: var(--warn);
}
.beat:has(.answer.is-shown) .rt-markera-ratt {
  text-decoration-color: var(--good);
}

@media (prefers-reduced-motion: reduce) {
  .rt-pa-1,
  .rt-pa-2,
  .rt-pa-3,
  .rt-stoff,
  .rt-stoffkort,
  .rt-stoff-t,
  .rt-markera-fel,
  .rt-markera-ratt {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}