/* Egna stilar för Bildspråk i poesi. Den gemensamma layouten ligger i ../presentation.css.

   Bildspråket: en liknelse eller metafor är en bro mellan två stränder. På
   vänstra stranden står det som beskrivs, på högra bilden (accentfärg). Bron
   byggs planka för planka av det som de två har gemensamt, och under bron
   står tolkningen. Liknelsen har ett räcke med skylten "som", metaforen inget.
   Besjälning är en bro till en människa, symbolen en bro från en sak som
   finns i texten till en idé, och ett idiom en bro som alla redan går över.
   Bara temats variabler används, så allt följer ljust och mörkt läge. */

/* ---------- Stegen i diagrammen ----------
   Ett steg med klassen bs-utlos-N (N = 1–3) tonar in bs-pa-N i samma takt. */

.bs-pa-1, .bs-pa-2, .bs-pa-3 {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.bs-utlos-1.is-shown) .bs-pa-1,
.beat:has(.bs-utlos-2.is-shown) .bs-pa-2,
.beat:has(.bs-utlos-3.is-shown) .bs-pa-3 {
  opacity: 1;
}

/* ---------- Bron ---------- */

.bs-strand {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.bs-vatten {
  fill: none;
  stroke: var(--c1);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.7;
}
.bs-vatten--svag {
  opacity: 0.4;
}
.bs-ord {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.bs-ord--bild {
  stroke: var(--accent);
  stroke-width: 3.5;
}
.diagram__svg .bs-ord-text {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 27px;
  font-weight: 600;
}
.diagram__svg .bs-strand-etikett {
  fill: var(--ink-2);
  font-size: 18px;
  letter-spacing: 0.04em;
}
.diagram__svg .bs-strand-etikett--bild {
  fill: var(--accent);
}
.diagram__svg .bs-rubrik {
  font-size: 24px;
  font-weight: 700;
}
.bs-skiss {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 3;
  stroke-dasharray: 10 12;
}
.bs-planka {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.5;
}
.diagram__svg .bs-planka-text {
  font-size: 20px;
  font-weight: 700;
}
.bs-racke__stolpe,
.bs-racke__ledstang {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.bs-skylt {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3;
}
.diagram__svg .bs-skylt-text {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 27px;
  font-weight: 700;
}
.diagram__svg .bs-tolkning {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 30px;
  font-weight: 600;
}
.diagram__svg .bs-fraga {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 600;
}
.diagram__svg .bs-fraga--stor {
  font-size: 38px;
}

/* Plankorna läggs ovanifrån en i taget: i ett steg, i ett svar eller när
   takten syns (diagram--auto, förskjutna med --i). */
.bs-lagg {
  opacity: 0;
  transform: translateY(-46px);
  transform-box: fill-box;
  transition:
    opacity 0.5s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 260ms);
}
[data-step].is-shown .bs-lagg,
.beat.is-visible .diagram--auto .bs-lagg {
  opacity: 1;
  transform: none;
}
.bs-fig.diagram--auto .bs-lagg {
  transition-delay: calc(0.5s + var(--i, 0) * 260ms);
}

/* ---------- Andra delar i diagrammen ---------- */

.diagram__svg .bs-fel {
  fill: var(--warn);
  font-weight: 700;
}
.diagram__svg .bs-ratt {
  fill: var(--good);
  font-weight: 700;
}
.diagram__svg .bs-accent,
.diagram__svg .bs-accent-text {
  fill: var(--accent);
  font-weight: 700;
}
.diagram__svg .bs-bildtext {
  font-size: 22px;
}
.diagram__svg .bs-verb {
  transition: fill 0.6s var(--ease);
}
.beat:has(.bs-utlos-1.is-shown) .diagram__svg .bs-verb {
  fill: var(--accent);
  font-weight: 800;
}
.bs-steg {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.bs-steg--mal {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.diagram__svg .bs-steg-nr {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 600;
}
.diagram__svg .bs-steg-text {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 600;
}
.bs-bubbla {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.diagram__svg .bs-bubbla-text {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 26px;
}
.bs-ram,
.bs-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
}
.bs-ikon {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.bs-ikon--sol,
.bs-ikon--accent {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.bs-visare {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.bs-nav,
.bs-oga {
  fill: var(--ink);
}
.bs-streck {
  fill: none;
  stroke: var(--warn);
  stroke-width: 4;
  stroke-linecap: round;
}
.bs-fonster {
  fill: var(--paper-2);
  stroke: var(--ink);
  stroke-width: 2;
}
.bs-fonster-ljus {
  fill: var(--accent);
}
.bs-vag {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 26;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bs-vag-mitt {
  fill: none;
  stroke: var(--paper);
  stroke-width: 3;
  stroke-dasharray: 10 10;
}
.diagram__svg .bs-betydelse {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 34px;
  font-weight: 600;
}
.bs-vass path,
.bs-kvist {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 4;
  stroke-linecap: round;
}
.bs-kvist {
  stroke-width: 7;
}
.bs-kvist--liten {
  stroke-width: 4;
}
.bs-kolv ellipse {
  fill: var(--ink-2);
}
.bs-tal {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 8 8;
}
.bs-knopp ellipse,
.bs-knopp-sluten {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.bs-blad {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
}
.bs-linje {
  stroke: var(--rule);
  stroke-width: 2;
}
.diagram__svg .bs-sprak {
  fill: var(--ink-2);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .bs-uttryck {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 29px;
}
.diagram__svg .bs-betyder-text {
  fill: var(--ink-2);
  font-size: 20px;
}
.diagram__svg .bs-rad {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 34px;
}
.diagram__svg .bs-rad--bild {
  fill: var(--accent);
  font-weight: 600;
}
.diagram__svg .bs-nr {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
}
.bs-bage {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}
.diagram__svg .bs-tolkning--vanster {
  text-anchor: start;
}

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

.bs-fig .diagram__svg {
  max-height: 50vh;
}
.bs-fig--hog .diagram__svg {
  max-height: 58vh;
}
.bs-fig--lag .diagram__svg {
  max-height: 40vh;
}
.bs-fig--mellan .diagram__svg {
  max-height: 30vh;
}
.bs-fig--liten .diagram__svg {
  max-height: 22vh;
}
.bs-fig--sida .diagram__svg {
  max-height: 44vh;
}
@media (max-height: 760px) {
  .bs-fig .diagram__svg {
    max-height: 42vh;
  }
  .bs-fig--hog .diagram__svg {
    max-height: 52vh;
  }
  .bs-fig--lag .diagram__svg {
    max-height: 34vh;
  }
  .bs-fig--mellan .diagram__svg {
    max-height: 26vh;
  }
  .bs-fig--liten .diagram__svg {
    max-height: 18vh;
  }
  .bs-fig--sida .diagram__svg {
    max-height: 38vh;
  }
}
.answer .diagram {
  margin-top: 0.6rem;
}

/* ---------- Dikterna ---------- */

.bs-dikt {
  max-width: 34rem;
  padding: 1rem 1.6rem 0.9rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
}
.bs-dikt__titel {
  margin: 0 0 0.4rem;
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 0.8rem + 1vw, 1.8rem);
  font-weight: 700;
}
.bs-dikt__rader,
.bs-text__rader {
  margin: 0;
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.25rem, 0.8rem + 1.25vw, 2.1rem);
  line-height: 1.35;
}
.bs-dikt__kalla {
  margin: 0.6rem 0 0;
  font-family: var(--f-ui);
  font-size: clamp(0.8rem, 0.6rem + 0.4vw, 1rem);
  color: var(--ink-2);
}
.bs-dikt--liten .bs-dikt__rader {
  font-size: clamp(1.1rem, 0.75rem + 1vw, 1.8rem);
}
.bs-bild {
  border-radius: 0.2em;
  transition:
    background-color 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}
.beat:has(.bs-utlos-1.is-shown) .bs-bild {
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent);
}
.bs-dikten .aside {
  max-width: 40rem;
}
.lead.bs-citat {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
}

/* Fröding: dikten och vassen bredvid varandra. */
.bs-tva {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 2.4rem);
  align-items: center;
}
.bs-tva .diagram {
  margin: 0;
}
@media (max-width: 760px) {
  .bs-tva {
    grid-template-columns: 1fr;
  }
}

/* ---------- Idiomen ---------- */

.bs-idiomlista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 2vw, 1.4rem);
  margin-top: clamp(0.6rem, 2vh, 1.4rem);
}
.bs-idiom {
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.bs-idiom__uttryck {
  margin: 0;
  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.2;
}
.bs-idiom__betyder {
  margin: 0.5rem 0 0;
  padding-top: 0.5rem;
  border-top: 2px solid var(--accent);
  font-family: var(--f-ui);
  font-size: clamp(1rem, 0.7rem + 0.8vw, 1.4rem);
  color: var(--accent);
  font-weight: 600;
}
@media (max-width: 760px) {
  .bs-idiomlista {
    grid-template-columns: 1fr;
  }
}
.bs-val .vote__btn {
  min-width: 8em;
}
.bs-val + .talk__q {
  margin-top: clamp(1.2rem, 3.5vh, 2.4rem);
}

/* ---------- Strategin ---------- */

.bs-fragor {
  margin: clamp(0.6rem, 1.6vh, 1.2rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
}
.bs-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;
}
.bs-fragor__n {
  flex: none;
  width: 1.1em;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Före och efter ---------- */

.bs-fore-efter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
  margin-top: clamp(0.4rem, 1.5vh, 1rem);
}
.bs-anteckning {
  padding: 0.9rem 1.3rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1.05rem, 0.7rem + 1.05vw, 1.7rem);
  line-height: 1.35;
}
.bs-anteckning ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45em;
}
.bs-anteckning__rad {
  font-family: var(--f-ui);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-right: 0.35em;
}
.bs-anteckning__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;
}
.bs-anteckning--fore {
  opacity: 0.9;
}
.bs-anteckning--fore .bs-anteckning__rubrik {
  color: var(--warn);
}
.bs-anteckning--efter {
  border-color: var(--good);
}
.bs-anteckning--efter .bs-anteckning__rubrik {
  color: var(--good);
}
.bs-anteckning__slut {
  margin: 0.7rem 0 0;
  padding-top: 0.6rem;
  border-top: 2px solid var(--good);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-weight: 600;
}
@media (max-width: 760px) {
  .bs-fore-efter {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sammanfattning och verkstad ---------- */

.bs-slutfraga {
  margin: clamp(0.8rem, 2.4vh, 1.6rem) 0 0;
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.3rem, 0.8rem + 1.4vw, 2.3rem);
  color: var(--accent);
}
.bs-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);
}

@media (prefers-reduced-motion: reduce) {
  .bs-lagg,
  .bs-bild,
  .bs-verb,
  .bs-pa-1, .bs-pa-2, .bs-pa-3 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}