/* Egna stilar för Tema och motiv. Den gemensamma layouten ligger i
   ../presentation.css.

   Bildspråket: analysträdet. Rötterna är handlingen (vad händer?), stammen är
   motiven (vad återkommer?) och kronan är temat (vad säger texten om livet?).
   Belägget är rötterna ner i texten, och förklaringen är stammen som binder
   ihop citatet med temat. Färgerna följer nivåerna: handling i --ink-2, motiv
   i --c2, tema i --c3 och belägg i --accent. Bara temats variabler används,
   så allt följer ljust och mörkt läge. */

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

.tm-pa-1, .tm-pa-2, .tm-pa-3 {
  opacity: 0;
}
.tm-pa-1, .tm-pa-2, .tm-pa-3,
.tm-av-1, .tm-av-2, .tm-av-3 {
  transition: opacity 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.tm-utlos-1.is-shown) .tm-pa-1,
.beat:has(.tm-utlos-2.is-shown) .tm-pa-2,
.beat:has(.tm-utlos-3.is-shown) .tm-pa-3 {
  opacity: 1;
}
.beat:has(.tm-utlos-1.is-shown) .tm-av-1,
.beat:has(.tm-utlos-2.is-shown) .tm-av-2,
.beat:has(.tm-utlos-3.is-shown) .tm-av-3 {
  opacity: 0;
}
.beat:has(.tm-utlos-1.is-shown) .tm-pa-1 .d-draw,
.beat:has(.tm-utlos-2.is-shown) .tm-pa-2 .d-draw,
.beat:has(.tm-utlos-3.is-shown) .tm-pa-3 .d-draw {
  stroke-dashoffset: 0;
}
/* Delar som ritas när takten kommer i bild. */
.tm-start {
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.beat.is-visible .tm-start {
  opacity: 1;
}
.beat.is-visible .d-draw.tm-start,
.beat.is-visible .tm-start .d-draw {
  stroke-dashoffset: 0;
}
.beat.is-visible .d-pop.tm-start {
  transform: none;
}

/* ---------- Trädet ---------- */

.tm-krona {
  fill: color-mix(in srgb, var(--c3) 20%, var(--card));
  stroke: var(--c3);
  stroke-width: 3;
  stroke-linejoin: round;
}
.tm-stam {
  fill: color-mix(in srgb, var(--c2) 32%, var(--card));
  stroke: var(--c2);
  stroke-width: 3;
  stroke-linejoin: round;
}
.tm-rot {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}
.tm-rot--tunn {
  stroke-width: 4;
}
.tm-gren {
  fill: none;
  stroke: var(--c2);
  stroke-width: 10;
  stroke-linecap: round;
}
.tm-mark {
  fill: none;
  stroke: var(--rule);
  stroke-width: 3;
  stroke-linecap: round;
}
.tm-svag {
  opacity: 0.3;
}
.tm-ledare {
  stroke-dasharray: 2 7;
}
.tm-ledare.d-draw {
  stroke-dasharray: 1;
}
.tm-osynlig {
  fill: none;
  stroke: none;
}
.tm-prick-3 {
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.8s;
}
.beat:has(.tm-utlos-3.is-shown) .tm-prick-3 {
  opacity: 1;
}

/* Delar av trädet som tänds steg för steg (Noors analysmening). */
.tm-tand {
  opacity: 0.25;
  transition: opacity 0.6s var(--ease);
}
.beat:has(.tm-utlos-1.is-shown) .tm-tand--1,
.beat:has(.tm-utlos-2.is-shown) .tm-tand--2,
.beat:has(.tm-utlos-3.is-shown) .tm-tand--3 {
  opacity: 1;
}

/* Trädet utan rötter lutar och faller när svaret visas. */
.tm-tippa {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  transition: transform 1.6s var(--ease), opacity 1.6s var(--ease);
}
.beat:has(.tm-utlos-1.is-shown) .tm-tippa {
  transform: rotate(-14deg);
  opacity: 0.55;
}

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

.diagram__svg .tm-stor {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 650;
}
.diagram__svg .tm-stor--mindre {
  font-size: 28px;
}
.diagram__svg .tm-etikett {
  fill: var(--ink-3);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .tm-text--handling {
  fill: var(--ink-2);
}
.diagram__svg .tm-text--motiv {
  fill: var(--c2);
}
.diagram__svg .tm-text--tema {
  fill: var(--c3);
}
.diagram__svg .tm-text--belagg {
  fill: var(--accent);
}
.diagram__svg .tm-fraga {
  fill: var(--ink-2);
  font-size: 24px;
}
.diagram__svg .tm-kronotext {
  font-family: var(--f-display);
  font-size: 26px;
  font-weight: 600;
}
.diagram__svg .tm-temamening {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 650;
}
.diagram__svg .tm-plus {
  font-size: 48px;
  font-weight: 300;
  fill: var(--ink-2);
}

/* Noors lapp och pratbubblan. */
.tm-lapp {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.diagram__svg .tm-lapptext {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 26px;
}
.tm-bubbla {
  fill: var(--card);
  stroke: var(--c3);
  stroke-width: 3;
  stroke-linejoin: round;
}
.diagram__svg .tm-bubbeltext {
  fill: var(--c3);
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 650;
}

/* Handlingen som rot med händelser. */
.tm-nod {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.tm-nod--vand {
  fill: var(--ink-2);
}
.diagram__svg .tm-handelse {
  font-size: 30px;
}
.diagram__svg .tm-handelse--vand {
  font-weight: 700;
}

/* Ikonerna för vanliga motiv. */
.tm-ikon {
  fill: color-mix(in srgb, var(--c2) 18%, var(--card));
  stroke: var(--c2);
  stroke-width: 4;
  stroke-linejoin: round;
}
.tm-ikon-fyll {
  fill: var(--c2);
}
.tm-ikon-linje {
  fill: none;
  stroke: var(--c2);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tm-ikon-linje--tjock {
  stroke-width: 6;
}
.diagram__svg .tm-ikontext {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 600;
}

/* Novellen som sida, och orden som lyfts ut. */
.tm-sida {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.tm-rad {
  fill: none;
  stroke: var(--rule);
  stroke-width: 6;
  stroke-linecap: round;
}
.tm-chip rect {
  fill: var(--paper-2);
  stroke: var(--rule);
  stroke-width: 1.5;
  transition: fill 0.6s var(--ease), stroke 0.6s var(--ease);
}
.diagram__svg .tm-chip text {
  fill: var(--ink-2);
  font-size: 18px;
  font-weight: 600;
  transition: fill 0.6s var(--ease);
}
.beat:has(.tm-utlos-1.is-shown) .tm-chip--1 rect {
  fill: color-mix(in srgb, var(--c2) 25%, var(--card));
  stroke: var(--c2);
}
.beat:has(.tm-utlos-2.is-shown) .tm-chip--2 rect {
  fill: color-mix(in srgb, var(--c1) 22%, var(--card));
  stroke: var(--c1);
}
.beat:has(.tm-utlos-3.is-shown) .tm-chip--3 rect {
  fill: color-mix(in srgb, var(--c3) 22%, var(--card));
  stroke: var(--c3);
}
.beat:has(.tm-utlos-1.is-shown) .diagram__svg .tm-chip--1 text { fill: var(--c2); }
.beat:has(.tm-utlos-2.is-shown) .diagram__svg .tm-chip--2 text { fill: var(--c1); }
.beat:has(.tm-utlos-3.is-shown) .diagram__svg .tm-chip--3 text { fill: var(--c3); }
/* Kopior av orden som flyttar från texten till sitt motiv, en gång när
   steget visas. I utskriften står de stilla och osynliga. */
.tm-flyg {
  opacity: 0;
}
.tm-flyg rect {
  fill: var(--card);
  stroke-width: 2;
}
.diagram__svg .tm-flyg text {
  font-size: 18px;
  font-weight: 700;
}
.tm-flyg--1 rect { stroke: var(--c2); }
.tm-flyg--2 rect { stroke: var(--c1); }
.tm-flyg--3 rect { stroke: var(--c3); }
.diagram__svg .tm-flyg--1 text { fill: var(--c2); }
.diagram__svg .tm-flyg--2 text { fill: var(--c1); }
.diagram__svg .tm-flyg--3 text { fill: var(--c3); }
.beat:has(.tm-utlos-1.is-shown) .tm-flyg--1,
.beat:has(.tm-utlos-2.is-shown) .tm-flyg--2,
.beat:has(.tm-utlos-3.is-shown) .tm-flyg--3 {
  animation: tm-flyg 1.5s var(--ease) var(--d, 0s) both;
}
@keyframes tm-flyg {
  0% { opacity: 0; transform: none; }
  15% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}
.tm-motivruta {
  fill: var(--card);
  stroke-width: 3.5;
}
.tm-motivruta--1 { stroke: var(--c2); }
.tm-motivruta--2 { stroke: var(--c1); }
.tm-motivruta--3 { stroke: var(--c3); }
.diagram__svg .tm-motivtext {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 650;
}
.diagram__svg .tm-motivtext--1 { fill: var(--c2); }
.diagram__svg .tm-motivtext--2 { fill: var(--c1); }
.diagram__svg .tm-motivtext--3 { fill: var(--c3); }

/* Motiven i början och slutet. */
.diagram__svg .tm-radnamn {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 650;
}
.diagram__svg .tm-rutetext {
  font-size: 22px;
}
.tm-box--motiv {
  stroke: var(--c2);
  stroke-width: 3;
}

/* Tolkningar med och utan belägg. */
.diagram__svg .tm-felmark {
  fill: var(--accent);
  font-weight: 700;
  font-size: 28px;
}
.diagram__svg .tm-ratt-mark {
  fill: var(--c3);
  font-weight: 700;
  font-size: 28px;
}

/* Citat som rötter. */
.tm-citatruta {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.diagram__svg .tm-citat {
  font-family: var(--f-body);
  font-size: 23px;
  font-style: italic;
}

/* Mallen för analysmeningen. */
.tm-mallruta {
  fill: var(--card);
  stroke-width: 3;
}
.tm-mallruta--tema { stroke: var(--c3); }
.tm-mallruta--motiv { stroke: var(--c2); }
.tm-mallruta--belagg { stroke: var(--accent); }
.diagram__svg .tm-mallrubrik {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
}
.diagram__svg .tm-malltext {
  fill: var(--ink-2);
  font-size: 24px;
}

/* Samma motiv, olika teman. */
.tm-motivnod {
  fill: color-mix(in srgb, var(--c2) 22%, var(--card));
  stroke: var(--c2);
  stroke-width: 4;
}
.tm-vag {
  fill: none;
  stroke: var(--c2);
  stroke-width: 4;
  stroke-linecap: round;
}
.tm-temaruta {
  fill: var(--card);
  stroke: var(--c3);
  stroke-width: 2.5;
}
.diagram__svg .tm-verk {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: var(--ink-2);
}
.diagram__svg .tm-verk-ar {
  font-weight: 400;
  fill: var(--ink-3);
}
.diagram__svg .tm-temarad {
  fill: var(--c3);
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 650;
}

/* Strategikortet. */
.tm-kort {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.diagram__svg .tm-stegnr {
  font-family: var(--f-display);
  font-size: 40px;
  font-weight: 700;
}
.diagram__svg .tm-stegfraga {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 650;
}
.diagram__svg .tm-steghjalp {
  fill: var(--ink-2);
  font-size: 22px;
}
.tm-belaggslinje {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 1;
}

/* ---------- Fallets texter ---------- */

.tm-uppgift {
  max-width: 44rem;
  padding: 1rem 1.5rem 1.2rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
}
.tm-uppgift__etikett {
  margin: 0 0 0.3rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tm-uppgift__text {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 0.9rem + 1.6vw, 2.5rem);
  line-height: 1.2;
}

.tm-novell {
  columns: 2;
  column-gap: 2.4rem;
  padding: 1.2rem 1.8rem 1.3rem;
  border-top: 5px solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 0.5rem + 1.2vw, 1.8rem);
  line-height: 1.45;
}
.tm-novell p {
  margin: 0 0 0.6em;
  text-wrap: pretty;
  break-inside: avoid;
}
.tm-novell p:last-child {
  margin-bottom: 0;
}
.tm-novell--ovning {
  columns: 1;
  max-width: 60rem;
  font-size: clamp(1.05rem, 0.5rem + 1.1vw, 1.65rem);
  border-top-color: var(--accent);
}
.tm-novell__rubrik {
  font-family: var(--f-display);
  font-style: var(--display-style, normal);
  font-size: 1.3em;
  font-weight: 650;
}
.tm-kalla {
  margin: 0.7rem 0 0;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  color: var(--ink-3);
}

.tm-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  margin-top: clamp(0.8rem, 2vh, 1.4rem);
}
.tm-belaggskort {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.tm-belaggskort__nr {
  margin: 0;
  font-family: var(--f-display);
  font-size: 2.2em;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.tm-belaggskort__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1rem, 0.6rem + 0.95vw, 1.5rem);
  line-height: 1.4;
}

/* Noors analysmening i tre färger. */
.tm-analys {
  font-family: var(--f-body);
  font-size: clamp(1.15rem, 0.6rem + 1.25vw, 1.9rem);
  line-height: 1.45;
}
.tm-analys p {
  margin: 0;
}
.tm-del {
  padding: 0.05em 0.15em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tm-del--tema {
  background: color-mix(in srgb, var(--c3) 18%, transparent);
  box-shadow: inset 0 -3px 0 var(--c3);
}
.tm-del--belagg {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.tm-del--motiv {
  background: color-mix(in srgb, var(--c2) 18%, transparent);
  box-shadow: inset 0 -3px 0 var(--c2);
}

/* Före och efter. */
.tm-fore-efter {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: start;
}
.tm-anteckning {
  padding: 0.9rem 1.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.tm-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);
}
.tm-anteckning__rubrik--efter {
  color: var(--c3);
}
.tm-forsok {
  margin: 0 0 0.6em;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.1rem, 0.6rem + 1.1vw, 1.7rem);
  line-height: 1.3;
}
.tm-markering {
  display: inline-block;
  margin-left: 0.3em;
  padding: 0.05em 0.5em;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  font-family: var(--f-ui);
  font-style: normal;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--accent);
  vertical-align: middle;
}
.tm-analys--efter {
  margin: 0;
  font-size: clamp(1.05rem, 0.55rem + 1.15vw, 1.75rem);
}

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

.claim.tm-claim--liten {
  font-size: clamp(1.8rem, 1rem + 2.3vw, 3.3rem);
}
.section-title.tm-titel--liten {
  font-size: clamp(1.8rem, 1rem + 2.4vw, 3.4rem);
}
.tm-tat .kicker {
  margin-bottom: 0.8rem;
}
.tm-tat .vote,
.tm-tat .answer {
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
}
.tm-tat .answer {
  padding: 0.9rem 1.4rem;
}
.tm-fig .diagram__svg {
  max-height: 50vh;
}
.tm-fig--gissa .diagram__svg {
  max-height: 31vh;
}
.tm-fig--mellan .diagram__svg {
  max-height: 34vh;
}
.tm-fig--lag .diagram__svg {
  max-height: 44vh;
}
.tm-fig--gissa.tm-fig--lagre .diagram__svg {
  max-height: 27vh;
}
.tm-fig--liten .diagram__svg {
  max-height: 40vh;
}
.tm-fig--remsa .diagram__svg {
  max-height: 13vh;
}
.tm-punch--liten {
  font-size: 0.9em;
}
.tm-delad {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: center;
}
.tm-delad .diagram {
  margin: 0;
}
@media (max-height: 860px) {
  .tm-fig .diagram__svg {
    max-height: 46vh;
  }
  .tm-fig--gissa .diagram__svg {
    max-height: 28vh;
  }
  .tm-fig--mellan .diagram__svg {
    max-height: 30vh;
  }
  .tm-fig--lag .diagram__svg {
    max-height: 40vh;
  }
  .tm-fig--gissa.tm-fig--lagre .diagram__svg {
    max-height: 24vh;
  }
}
@media (max-width: 760px) {
  .tm-novell {
    columns: 1;
  }
  .tm-par,
  .tm-delad,
  .tm-fore-efter {
    grid-template-columns: 1fr;
  }
}

/* ---------- Utskrift och lugn rörelse ---------- */

.is-print .tm-novell {
  font-size: 1.3rem;
}
@media (prefers-reduced-motion: reduce) {
  .tm-flyg {
    animation: none !important;
  }
  .tm-start,
  .tm-tand,
  .tm-tippa,
  .tm-prick-3,
  .tm-chip rect,
  .tm-chip text,
  .tm-flyg,
  .tm-pa-1, .tm-pa-2, .tm-pa-3,
  .tm-av-1, .tm-av-2, .tm-av-3 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}