/* Egna stilar för Berättarperspektiv. Den gemensamma layouten ligger i
   ../presentation.css.

   Bildspråket: berättaren är en kamera. Klassrummet ritas uppifrån med Adam i
   dörren, Eva vid tavlan och eleverna vid sina bänkar. Kameran sitter i Adams
   huvud (jag-berättare), står bakom Eva (tredjepersonsberättare som följer en
   person) eller svävar ovanför rummet (allvetande berättare). Synfältet lyser
   upp det kameran ser, och tankebubblorna lyser bara i de huvuden som kameran
   kan gå in i. Bara temats variabler används, så allt följer ljust och mörkt
   läge. */

:root {
  --bp-gang: cubic-bezier(0.45, 0, 0.55, 1);
}

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

.bp-pa-1, .bp-pa-2, .bp-pa-3 {
  opacity: 0;
}
.bp-pa-1, .bp-pa-2, .bp-pa-3,
.bp-av-1, .bp-av-2, .bp-av-3 {
  transition: opacity 0.7s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.bp-utlos-1.is-shown) .bp-pa-1,
.beat:has(.bp-utlos-2.is-shown) .bp-pa-2,
.beat:has(.bp-utlos-3.is-shown) .bp-pa-3 {
  opacity: 1;
}
.beat:has(.bp-utlos-1.is-shown) .bp-av-1,
.beat:has(.bp-utlos-2.is-shown) .bp-av-2,
.beat:has(.bp-utlos-3.is-shown) .bp-av-3 {
  opacity: 0;
}
.beat:has(.bp-utlos-1.is-shown) .bp-pa-1 .d-draw,
.beat:has(.bp-utlos-2.is-shown) .bp-pa-2 .d-draw,
.beat:has(.bp-utlos-3.is-shown) .bp-pa-3 .d-draw {
  stroke-dashoffset: 0;
}

/* ---------- Klassrummet ---------- */

.bp-kon {
  fill: var(--accent-soft);
  fill-opacity: 0.85;
}
.bp-stralar {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 6 8;
}
.bp-vagg {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linejoin: round;
}
.bp-dorr {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 4;
  stroke-linecap: round;
}
.bp-tavla {
  fill: none;
  stroke: var(--ink);
  stroke-width: 10;
  stroke-linecap: round;
}
.diagram__svg .bp-rumstext {
  fill: var(--ink-3);
  font-size: 18px;
  font-style: italic;
}
.bp-bank {
  fill: var(--paper-2);
  stroke: var(--rule);
  stroke-width: 2;
}
.bp-elev {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.bp-huvud {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3.5;
}
.bp-huvud--stor {
  stroke-width: 4;
}
.diagram__svg .bp-namn {
  fill: var(--ink-2);
  font-size: 20px;
  font-weight: 700;
}
.diagram__svg .bp-namn--stor {
  fill: var(--ink);
  font-size: 25px;
  font-weight: 800;
}

/* Tankebubblor: streckade och tomma när kameran inte kommer in, fyllda när
   den gör det. */
.bp-tanke circle,
.bp-tanke ellipse {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 5 5;
}
.bp-tanke--lit circle,
.bp-tanke--lit ellipse {
  fill: var(--accent);
  stroke: var(--accent);
  stroke-dasharray: none;
}
.diagram__svg .bp-tanketext {
  fill: var(--paper);
  font-size: 27px;
  font-weight: 800;
}
.diagram__svg .bp-fragetecken {
  fill: var(--ink-3);
  font-size: 46px;
  font-weight: 700;
}

/* Kameran. */
.bp-kamera__kropp,
.bp-kamera__topp {
  fill: var(--ink);
}
.bp-kamera__objektiv {
  fill: var(--accent);
}
/* Kameran som flyttar sig i metafortakten: väntar i korridoren, sätter sig i
   Adams huvud, går bakom Eva och stiger upp ovanför rummet. */
.bp-kamera--flytt {
  transform: translate(80px, 500px);
  transition: transform 1.6s var(--bp-gang);
}
.beat:has(.bp-utlos-1.is-shown) .bp-kamera--flytt {
  transform: translate(258px, 290px);
}
.beat:has(.bp-utlos-2.is-shown) .bp-kamera--flytt {
  transform: translate(930px, 360px) rotate(180deg);
}
.beat:has(.bp-utlos-3.is-shown) .bp-kamera--flytt {
  transform: translate(565px, 26px) rotate(90deg);
}
.diagram__svg .bp-steg-etikett {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 30px;
  font-weight: 600;
}

/* ---------- Figurer och föremål ---------- */

.bp-figur circle,
.bp-figur path {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.bp-figur--liten circle,
.bp-figur--liten path {
  stroke-width: 3;
}
.bp-bord,
.bp-stol {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 5;
  stroke-linecap: round;
}
.bp-arm {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.bp-penna {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
}
.bp-streckad {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 9;
}
.bp-streckad.d-draw {
  stroke-dasharray: 1;
}
.bp-streckad--accent {
  stroke: var(--accent);
  stroke-width: 4;
}
.bp-bok {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linejoin: round;
}
.bp-bokrad {
  fill: none;
  stroke: var(--rule);
  stroke-width: 3;
  stroke-linecap: round;
}
.bp-pratbubbla {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.diagram__svg .bp-bubbeltext {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 30px;
}
.bp-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
}
.bp-ram {
  fill: var(--paper-2);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.diagram__svg .bp-zon {
  fill: var(--ink-3);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.diagram__svg .bp-etikett {
  fill: var(--ink-3);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .bp-etikett--accent {
  fill: var(--accent);
}

/* Meningar som skrivs om. */
.diagram__svg .bp-mening {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 31px;
}
.diagram__svg .bp-mening--accent {
  fill: var(--accent);
  font-weight: 700;
}
.bp-ordruta {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}
.bp-stryk {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.bp-bock {
  fill: none;
  stroke: var(--good);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bp-kryss {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
}
.bp-pil {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 4;
  stroke-linecap: round;
}

/* Kort med ord. */
.bp-kort rect {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2.5;
}
.diagram__svg .bp-kort text {
  font-size: 24px;
  font-weight: 600;
}
.bp-kort--accent rect {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3;
}
.diagram__svg .bp-kort--accent text {
  fill: var(--accent);
  font-weight: 700;
}
.bp-kort--slutsats rect {
  fill: var(--accent);
  stroke: var(--accent);
}
.diagram__svg .bp-kort--slutsats text {
  fill: var(--paper);
  font-weight: 800;
}

/* Stora etiketter i ett litet diagram (Lagerlöf). */
.diagram__svg .bp-stor-etikett {
  fill: var(--accent);
  font-size: 36px;
  font-weight: 800;
}
.diagram__svg .bp-stor-etikett--svag {
  fill: var(--ink-2);
  font-weight: 700;
}

/* Inifrån och utifrån. */
.diagram__svg .bp-yttre-text {
  fill: var(--c1);
  font-size: 23px;
  font-weight: 700;
}
.diagram__svg .bp-sida {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.diagram__svg .bp-sida--inre {
  fill: var(--accent);
}
.diagram__svg .bp-sida--yttre {
  fill: var(--c1);
}

/* Tre kameror. */
.diagram__svg .bp-kolumnrubrik {
  fill: var(--accent);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 28px;
  font-weight: 600;
}
.diagram__svg .bp-kolumntext {
  font-size: 22px;
  font-weight: 700;
}
.diagram__svg .bp-kolumntext--svag {
  fill: var(--ink-2);
  font-weight: 500;
}

/* Sagor. */
.diagram__svg .bp-formel {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 31px;
}
.diagram__svg .bp-formel--slut {
  fill: var(--accent);
  font-weight: 600;
}
.diagram__svg .bp-sprak {
  fill: var(--ink-3);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.diagram__svg .bp-fraga {
  fill: var(--accent);
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 600;
}

/* Tre frågor. */
.bp-utanfor {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 6 7;
}
.bp-oga {
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.bp-oga__pupill {
  fill: var(--ink);
}
.bp-nummer {
  fill: var(--accent);
}
.diagram__svg .bp-nummertext {
  fill: var(--paper);
  font-size: 24px;
  font-weight: 800;
}
.diagram__svg .bp-fragetext {
  font-size: 27px;
  font-weight: 700;
}

/* Analysmeningen. */
.diagram__svg .bp-ram-text {
  fill: var(--ink-2);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 29px;
}
.bp-lucka {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-width: 2;
  stroke-dasharray: 7 6;
}
.diagram__svg .bp-fyllning {
  fill: var(--accent);
  font-size: 28px;
  font-weight: 700;
}

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

.bp-fig .diagram__svg {
  max-height: 46vh;
}
.bp-fig--rum .diagram__svg {
  max-height: 48vh;
}
.bp-fig--mellan .diagram__svg {
  max-height: 38vh;
}
.bp-fig--lag .diagram__svg {
  max-height: 30vh;
}
.bp-fig--liten .diagram__svg {
  max-height: 23vh;
}
.bp-fig--gissa .diagram__svg {
  max-height: 32vh;
}
.bp-delad .bp-fig--halv .diagram__svg {
  max-height: 44vh;
}
.bp-delad .bp-fig--liten .diagram__svg {
  max-height: 26vh;
}
@media (max-height: 760px) {
  .bp-fig .diagram__svg { max-height: 42vh; }
  .bp-fig--rum .diagram__svg { max-height: 44vh; }
  .bp-fig--mellan .diagram__svg { max-height: 34vh; }
  .bp-fig--lag .diagram__svg { max-height: 28vh; }
  .bp-fig--liten .diagram__svg { max-height: 21vh; }
  .bp-delad .bp-fig--halv .diagram__svg { max-height: 40vh; }
}

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

.claim.bp-claim--liten {
  font-size: clamp(1.8rem, 1rem + 2.3vw, 3.3rem);
}
.bp-tat .kicker {
  margin-bottom: 0.8rem;
}
.bp-tat .vote,
.bp-tat .answer {
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
}
.bp-tat .answer {
  padding: 0.9rem 1.4rem;
}
.aside.bp-steg {
  margin-top: clamp(0.4rem, 1.4vh, 0.9rem);
}
.bp-fig + .aside.bp-steg,
.bp-delad + .aside.bp-steg {
  margin-top: clamp(0.6rem, 2vh, 1.2rem);
}

.bp-delad {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: center;
  margin-top: clamp(0.6rem, 1.6vh, 1.2rem);
}
.bp-delad .diagram {
  margin: 0;
}
.bp-delad--citat {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
}
@media (max-width: 760px) {
  .bp-delad,
  .bp-delad--citat {
    grid-template-columns: 1fr;
  }
}

/* Fallets text: en sida ur en novell. */
.bp-text {
  max-width: 50rem;
  margin-top: clamp(0.5rem, 1.6vh, 1.1rem);
  padding: 1.1rem 1.7rem 1.2rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 0.7rem + 1.05vw, 1.7rem);
  line-height: 1.45;
}
.bp-text p {
  margin: 0 0 0.5em;
  text-wrap: pretty;
}
.bp-text p:last-child {
  margin-bottom: 0;
}
.bp-text__rubrik {
  font-family: var(--f-display);
  font-style: var(--display-style, normal);
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.1;
}
.bp-text--liten {
  margin-top: 0;
  font-size: clamp(1rem, 0.6rem + 0.9vw, 1.45rem);
}

/* Markeringar som tonar in med första steget. Kommentaren i den allvetande
   versionen kommer med andra steget, och i Lagerlöfs text med svaret. */
.bp-inre,
.bp-kommentar {
  padding: 0 0.1em;
  border-radius: 0.2em;
  background-color: transparent;
  color: inherit;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
.beat:has(.bp-utlos-1.is-shown) .bp-inre {
  background-color: var(--accent-soft);
}
.beat:has(.bp-utlos-2.is-shown) .bp-text .bp-kommentar,
.beat:has(.bp-utlos-1.is-shown) .bp-citat .bp-kommentar {
  background-color: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

/* En mening eller ett stycke ur en text. */
.bp-citat {
  max-width: 62rem;
  margin: clamp(0.4rem, 1.4vh, 1rem) 0 0;
  padding: 0.7rem 1.4rem;
  border-left: 6px solid var(--ink-2);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.1rem, 0.75rem + 1vw, 1.75rem);
  line-height: 1.34;
  text-wrap: pretty;
}
.bp-citat p {
  margin: 0;
}
.bp-citat footer {
  margin-top: 0.5rem;
  font-family: var(--f-ui);
  font-style: normal;
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.bp-ordlista {
  margin: 0.6rem 0 0;
  font-family: var(--f-ui);
  font-size: clamp(0.95rem, 0.7rem + 0.55vw, 1.25rem);
  color: var(--ink-2);
}

/* De tre frågorna under kameran. */
.bp-fragerad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.4rem;
  margin: clamp(0.4rem, 1.4vh, 1rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: bp-fraga;
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.1rem, 0.7rem + 1vw, 1.7rem);
}
.bp-fragerad li {
  counter-increment: bp-fraga;
}
.bp-fragerad li::before {
  content: counter(bp-fraga) ". ";
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}

/* Noors analys, före och efter. */
.bp-fore-efter {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(0.8rem, 2vw, 1.6rem);
  align-items: start;
}
.bp-anteckning {
  max-width: 50rem;
  margin-top: clamp(0.5rem, 1.6vh, 1rem);
  padding: 0.9rem 1.5rem 1.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.65rem + 0.95vw, 1.55rem);
  line-height: 1.42;
}
.bp-fore-efter .bp-anteckning {
  margin-top: 0;
}
.bp-anteckning--fore {
  opacity: 0.9;
}
.bp-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);
}
.bp-anteckning__rubrik--efter,
.bp-anteckning--efter strong {
  color: var(--c3);
}
.bp-anteckning__text p {
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .bp-fore-efter {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-kamera--flytt,
  .bp-inre,
  .bp-kommentar,
  .bp-pa-1, .bp-pa-2, .bp-pa-3,
  .bp-av-1, .bp-av-2, .bp-av-3 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Den opålitliga berättaren har ett längre citat; diagrammet blir lägre. */
#opalitlig .bp-fig--liten .diagram__svg {
  max-height: 19vh;
}

/* Fallet bredvid scenen: novelltexten får en spalt som ryms. */
.bp-layout-fallet {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.bp-text--fallet {
  font-size: clamp(1rem, 0.6rem + 0.95vw, 1.5rem);
}