/* Egna stilar för Textbindning. Den gemensamma layouten ligger i
   ../presentation.css.

   Bildspråket är en kedja. Varje mening är en länk med en hake bak (det
   kända, tema) och en hake fram (det nya, rema). Länkar som hakar i varandra
   binds med en liten kopplingslänk. Sambandsord är färgade lås mellan
   länkarna, en färg per samband: tid --c1, orsak --accent, motsats --c3 och
   tillägg --ink-2. Färgen står alltid ihop med ordet för sambandet. Ord som
   pekar bakåt (pronomen, upprepning, synonym) är streckade pilar; en pil
   som kan träffa två ord är oklar och ritas i --warn. Fel markeras med --warn
   och ordet Fel, rätt med --good och ordet Rätt.
   Bara temats variabler används, så allt följer ljust och mörkt läge. */

:root {
  --tb-gang: cubic-bezier(0.45, 0, 0.55, 1);
  --tb-tid: 1.4s;
}

/* ---------- Stegen i diagrammen ----------
   Ett steg med klassen tb-utlos-N (N = 1–3) styr andra delar i samma takt:
   tb-pa-N tonar in, tb-av-N tonar ut, tb-dim-1 tonas ned och tb-fran-1
   flyttas från --dx, --dy och --r till sin plats (länkarna som hakar i). */

.tb-pa-1, .tb-pa-2, .tb-pa-3 {
  opacity: 0;
}
.tb-pa-1, .tb-pa-2, .tb-pa-3,
.tb-av-1, .tb-av-2, .tb-av-3,
.tb-dim-1 {
  transition: opacity 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.tb-utlos-1.is-shown) .tb-pa-1,
.beat:has(.tb-utlos-2.is-shown) .tb-pa-2,
.beat:has(.tb-utlos-3.is-shown) .tb-pa-3 {
  opacity: 1;
}
.beat:has(.tb-utlos-1.is-shown) .tb-av-1,
.beat:has(.tb-utlos-2.is-shown) .tb-av-2,
.beat:has(.tb-utlos-3.is-shown) .tb-av-3 {
  opacity: 0;
}
.beat:has(.tb-utlos-1.is-shown) .tb-dim-1 {
  opacity: 0.28;
}
.tb-fran-1 {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg));
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--tb-tid) var(--tb-gang);
}
text.tb-fran-1 {
  opacity: 0;
  transition:
    transform var(--tb-tid) var(--tb-gang),
    opacity 0.5s var(--ease);
}
.beat:has(.tb-utlos-1.is-shown) .tb-fran-1 {
  transform: none;
  opacity: 1;
}

/* ---------- Länkarna ---------- */

.tb-lank__ring {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 5;
}
.diagram__svg .tb-mening {
  fill: var(--ink);
  font-weight: 500;
}
.diagram__svg .tb-tema,
.diagram__svg .tb-rema,
.diagram__svg .tb-ante,
.diagram__svg .tb-pron,
.diagram__svg .tb-upp {
  fill: var(--ink);
  font-weight: 700;
}
.diagram__svg .tb-upp {
  fill: var(--warn);
}
.diagram__svg .tb-platt {
  fill: var(--ink-3);
  font-weight: 700;
}
.diagram__svg .tb-tid {
  fill: var(--c1);
  font-weight: 700;
}
.diagram__svg .tb-orsak {
  fill: var(--accent);
  font-weight: 700;
}
.diagram__svg .tb-motsats {
  fill: var(--c3);
  font-weight: 700;
}
.diagram__svg .tb-tillagg {
  fill: var(--ink-2);
  font-weight: 700;
}

/* Kopplingslänken mellan två meningar som hakar i varandra. */
.tb-koppling {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 5;
}
.tb-koppling--orsak {
  stroke: var(--accent);
}
.tb-koppling--liten {
  stroke-width: 3;
}

/* Låsen: sambandsord i sambandets färg. */
.tb-las rect {
  stroke: var(--card);
  stroke-width: 3;
}
.tb-las--tid rect {
  fill: var(--c1);
}
.tb-las--orsak rect {
  fill: var(--accent);
}
.tb-las--motsats rect {
  fill: var(--c3);
}
.tb-las--tillagg rect {
  fill: var(--ink-2);
}
.diagram__svg .tb-las text {
  fill: var(--paper);
  font-weight: 800;
}
/* En tom lucka där ett lås saknas. */
.tb-lucka-svg rect {
  fill: var(--paper);
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
}
.diagram__svg .tb-lucka-svg text {
  fill: var(--ink-3);
  font-weight: 800;
}

/* ---------- Pilar, ramar och streck ---------- */

.tb-halo {
  fill: none;
  stroke: var(--paper);
  stroke-width: 11;
  stroke-linecap: round;
}
.tb-pil-bak,
.tb-pil-oklar,
.tb-hake {
  fill: none;
  stroke-linecap: round;
}
.tb-pil-bak {
  stroke: var(--ink-2);
  stroke-width: 3.5;
  stroke-dasharray: 8 6;
}
.tb-pil-bak-spets {
  fill: var(--ink-2);
}
.tb-pil-oklar {
  stroke: var(--warn);
  stroke-width: 3.5;
  stroke-dasharray: 8 6;
}
.tb-pil-oklar-spets {
  fill: var(--warn);
}
.tb-hake {
  stroke: var(--ink);
  stroke-width: 4.5;
}
.tb-hake-spets {
  fill: var(--ink);
}
.tb-ram {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.tb-ram--fel {
  fill: none;
  stroke: var(--warn);
  stroke-width: 3;
  stroke-dasharray: 8 5;
}
.tb-streck {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.tb-streck--motsats {
  stroke: var(--c3);
}
.tb-streck--tema {
  stroke: var(--ink-2);
  stroke-dasharray: 7 6;
}
.tb-hel {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
}
.tb-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}
.tb-kedjelinje {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 4 5;
}

/* ---------- Bladet med den röda tråden ---------- */

.tb-blad {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.tb-blad-rad {
  fill: var(--rule);
}
.tb-trad {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.tb-trad--tunn {
  stroke-width: 4;
}
.tb-kommentar-streck {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.diagram__svg .tb-kommentar {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 36px;
}

/* ---------- Taggarna med första ledet ---------- */

.tb-tagg rect {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.diagram__svg .tb-tagg text {
  fill: var(--ink);
  font-weight: 700;
}
.tb-tagg--jag rect {
  fill: var(--warn-soft);
  stroke: var(--warn);
}
.tb-tagg--tid rect {
  fill: var(--card);
  stroke: var(--c1);
  stroke-width: 3;
}
.tb-tagg--orsak rect {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3;
}
.tb-tagg--motsats rect {
  fill: var(--card);
  stroke: var(--c3);
  stroke-width: 3;
}
.tb-tagg--pekar rect {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-dasharray: 6 4;
}
.tb-spik {
  fill: var(--ink-2);
}
.tb-snore {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
}

/* ---------- Kort i jämförelsen ---------- */

.tb-kortsvg rect {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.tb-kortsvg--annat rect {
  stroke: var(--ink-3);
}
.diagram__svg .tb-kortsvg__rubrik {
  fill: var(--ink-3);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.diagram__svg .tb-kortsvg__text {
  font-size: 20px;
  font-weight: 500;
}

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

.diagram__svg .tb-etikett {
  fill: var(--ink-2);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.diagram__svg .tb-etikett--nytt,
.diagram__svg .tb-etikett--verb {
  fill: var(--ink);
}
.diagram__svg .tb-etikett-stor {
  font-size: 26px;
  font-weight: 600;
}
.diagram__svg .tb-nr {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 600;
}
.diagram__svg .tb-ordlista {
  font-size: 26px;
  font-weight: 500;
}
.diagram__svg .tb-rel,
.diagram__svg .tb-sort {
  font-size: 20px;
  font-weight: 700;
}
.diagram__svg .tb-sort {
  font-size: 15px;
}
.diagram__svg .tb-rel--tid {
  fill: var(--c1);
}
.diagram__svg .tb-rel--orsak {
  fill: var(--accent);
}
.diagram__svg .tb-rel--motsats {
  fill: var(--c3);
}
.diagram__svg .tb-rel--tillagg,
.diagram__svg .tb-rel--pekar {
  fill: var(--ink-2);
}
.diagram__svg .tb-fel,
.diagram__svg .tb-oklar {
  fill: var(--warn);
  font-size: 22px;
  font-weight: 700;
}
.diagram__svg .tb-ratt {
  fill: var(--good);
  font-size: 22px;
  font-weight: 700;
}
/* Samma vikt som resten av meningen, så att orden får plats. */
.diagram__svg .tb-tid-ord {
  fill: var(--c1);
}
.diagram__svg .tb-verb-ord {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.diagram__svg .tb-kategori {
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: 600;
}
.diagram__svg .tb-fraga-stor {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 600;
}

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

.tb-fig .diagram__svg {
  max-height: 54vh;
}
.tb-fig--lag .diagram__svg {
  max-height: 40vh;
}
.tb-fig--liten .diagram__svg {
  max-height: 24vh;
}
.tb-fig--hog .diagram__svg {
  max-height: 46vh;
}
.tb-fig--gissa .diagram__svg {
  max-height: 36vh;
}
@media (max-height: 760px) {
  .tb-fig .diagram__svg {
    max-height: 44vh;
  }
  .tb-fig--lag .diagram__svg {
    max-height: 32vh;
  }
  .tb-fig--liten .diagram__svg {
    max-height: 20vh;
  }
  .tb-fig--hog .diagram__svg {
    max-height: 40vh;
  }
  .tb-fig--gissa .diagram__svg {
    max-height: 30vh;
  }
}
.answer .diagram {
  margin-top: 0.8rem;
}
.tb-titel--liten {
  margin-bottom: clamp(0.8rem, 2vh, 1.4rem);
}

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

.tb-markera-fel,
.tb-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) .tb-markera-fel {
  text-decoration-style: wavy;
  text-decoration-color: var(--warn);
}
.beat:has(.answer.is-shown) .tb-markera-ratt {
  text-decoration-color: var(--good);
}

/* Två korta texter sida vid sida i gissningen. */
.tb-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
}
.tb-kort {
  margin: 0;
  padding: 0.9rem 1.2rem;
  border-left: 6px solid var(--rule);
  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.3;
}
.tb-kort strong {
  font-weight: 700;
}
.tb-kort__etikett {
  display: inline-block;
  margin-right: 0.6rem;
  font-family: var(--f-ui);
  font-style: normal;
  font-weight: 800;
  color: var(--accent);
}
@media (max-width: 760px) {
  .tb-par {
    grid-template-columns: 1fr;
  }
}

/* ---------- Fallet: Noors text ---------- */

.tb-papper {
  max-width: 64rem;
  padding: 1rem 1.6rem 1.1rem;
  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.7rem + 0.95vw, 1.6rem);
  line-height: 1.45;
}
.tb-papper__rubrik {
  margin: 0 0 0.5rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15em;
}
.tb-papper__etikett {
  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;
}
.tb-papper__etikett--fore {
  color: var(--warn);
}
.tb-papper__etikett--efter {
  color: var(--good);
}
.tb-papper__text p {
  margin: 0 0 0.5em;
}
.tb-papper__text p:last-child {
  margin-bottom: 0;
}
.tb-f {
  border-radius: 0.2em;
  transition:
    background-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.beat:has(.tb-utlos-1.is-shown) .tb-f--jag {
  background: var(--warn-soft);
  box-shadow: 0 0 0 2px var(--warn);
}
.tb-fraga {
  margin: clamp(0.8rem, 2.4vh, 1.6rem) 0 0;
}
.tb-fraga + .vote {
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
}

/* Före och efter. */
.tb-s {
  background: var(--warn-soft);
  text-decoration: underline wavy var(--warn);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.2em;
}
.tb-lucka {
  display: inline-block;
  width: 2em;
  height: 0.95em;
  margin: 0 0.25em 0 0;
  vertical-align: -0.1em;
  border: 2px dashed var(--warn);
  border-radius: 999px;
}
.tb-fix {
  text-decoration: underline;
  text-decoration-color: var(--good);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.18em;
}
.tb-fore-efter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
}
.tb-fore-efter .tb-papper {
  font-size: clamp(0.95rem, 0.6rem + 0.82vw, 1.32rem);
}
.tb-papper--fore {
  opacity: 0.9;
}
@media (max-width: 760px) {
  .tb-fore-efter {
    grid-template-columns: 1fr;
  }
}

/* En rättad mening ur texten under diagrammet. */
.tb-rad {
  margin: clamp(0.6rem, 1.6vh, 1.2rem) 0 0;
  padding: 0.45rem 1rem;
  border-left: 5px solid var(--good);
  background: var(--card);
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 0.7rem + 0.95vw, 1.6rem);
}
.tb-rad__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);
}

/* Text och diagram sida vid sida. */
.tb-delad {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: center;
}
.tb-delad .diagram {
  margin: 0;
}
@media (max-width: 900px) {
  .tb-delad {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Korrläsningens tre steg under exemplet. */
.tb-fragor {
  margin: clamp(0.8rem, 2vh, 1.4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.tb-fragor li {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 0.8rem + 1.3vw, 2.2rem);
  line-height: 1.15;
}
.tb-fragor__n {
  flex: none;
  width: 1.1em;
  color: var(--accent);
  font-weight: 300;
}

/* Övningstexten i verkstaden. */
.tb-text {
  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.2rem, 0.85rem + 1.1vw, 1.95rem);
  line-height: 1.3;
  text-wrap: pretty;
}
.tb-text__etikett {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--f-ui);
  font-style: normal;
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warn);
}

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

@media (prefers-reduced-motion: reduce) {
  .tb-f,
  .tb-markera-fel,
  .tb-markera-ratt,
  .tb-pa-1, .tb-pa-2, .tb-pa-3,
  .tb-av-1, .tb-av-2, .tb-av-3,
  .tb-dim-1,
  .tb-fran-1 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Kedjorna i svaret på den första gissningen. */
.tb-fig--mini .diagram__svg {
  max-height: 19vh;
}
.tb-rost .answer {
  margin-top: 0;
  padding: 0.8rem 1.3rem;
  flex: 1 1 22rem;
}
.tb-fig + .tb-rost {
  margin-top: clamp(1rem, 3vh, 2rem);
}

/* Länkarna i text A glider isär när svaret visas. */
.tb-till-1 {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--tb-tid) var(--tb-gang);
}
.beat:has(.tb-utlos-1.is-shown) .tb-till-1 {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg));
}
@media (prefers-reduced-motion: reduce) {
  .tb-till-1 {
    transition-duration: 0.01ms !important;
  }
}

/* Röstningen och svaret på samma rad. */
.tb-rost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 2rem;
}
.tb-rost .vote {
  margin-top: 0;
}
.tb-rost .aside {
  margin: 0;
}
.diagram__svg .tb-etikett--liten {
  font-size: 18px;
}
.tb-pil-kort {
  stroke-dasharray: none;
}

/* Noors text får den bredare spalten bredvid bilden av skolgården. */
.beat .tb-layout-text {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  max-width: 74rem;
}
.tb-layout-text .tb-papper {
  font-size: clamp(0.95rem, 0.6rem + 0.85vw, 1.4rem);
}