/* Egna stilar för att-skriva-referat. Den gemensamma layouten ligger i ../presentation.css,
   och arbetsgången ritas av Pele via kärnan (pre.pele-diagram).

   Fallet: Nora Eks debattartikel förvandlas till ett referat i sex takter
   (.rf-forv). Bredvid texten står en liten mätare som följer förvandlingen:
   huset, meningarna som staplar, formuleringarna, rösterna och källans fyra
   uppgifter. Bara temats variabler används, så allt följer ljust och mörkt läge. */

/* ---------- Stegen ----------
   Ett steg med klassen rf-utlos-N (N = 1–6) styr andra delar i samma takt:
   rf-pa-N tonar in, rf-av-N tonar ut, rf-dimma-N bleknar och rf-vid-N flyttas
   med --dx och --dy (och vrids med --rot). --d fördröjer. I förvandlingen
   växer och krymper texten dessutom, så att meningarna sluter sig. */

.rf-pa-1, .rf-pa-2, .rf-pa-3, .rf-pa-4, .rf-pa-5, .rf-pa-6 {
  opacity: 0;
}
.rf-pa-1, .rf-pa-2, .rf-pa-3, .rf-pa-4, .rf-pa-5, .rf-pa-6,
.rf-av-1, .rf-av-2, .rf-av-3, .rf-av-4, .rf-av-5, .rf-av-6,
.rf-dimma-1, .rf-dimma-2, .rf-dimma-3,
.rf-vid-1, .rf-vid-2, .rf-vid-3, .rf-vid-4, .rf-vid-5, .rf-vid-6 {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.7s var(--ease),
    transform 1.4s var(--ease);
  transition-delay: var(--d, 0s);
}
.beat:has(.rf-utlos-1.is-shown) .rf-pa-1,
.beat:has(.rf-utlos-2.is-shown) .rf-pa-2,
.beat:has(.rf-utlos-3.is-shown) .rf-pa-3,
.beat:has(.rf-utlos-4.is-shown) .rf-pa-4,
.beat:has(.rf-utlos-5.is-shown) .rf-pa-5,
.beat:has(.rf-utlos-6.is-shown) .rf-pa-6 {
  opacity: 1;
}
.beat:has(.rf-utlos-1.is-shown) .rf-av-1,
.beat:has(.rf-utlos-2.is-shown) .rf-av-2,
.beat:has(.rf-utlos-3.is-shown) .rf-av-3,
.beat:has(.rf-utlos-4.is-shown) .rf-av-4,
.beat:has(.rf-utlos-5.is-shown) .rf-av-5,
.beat:has(.rf-utlos-6.is-shown) .rf-av-6 {
  opacity: 0;
}
.beat:has(.rf-utlos-1.is-shown) .rf-dimma-1,
.beat:has(.rf-utlos-2.is-shown) .rf-dimma-2,
.beat:has(.rf-utlos-3.is-shown) .rf-dimma-3 {
  opacity: 0.22;
}
.beat:has(.rf-utlos-1.is-shown) .rf-vid-1,
.beat:has(.rf-utlos-2.is-shown) .rf-vid-2,
.beat:has(.rf-utlos-3.is-shown) .rf-vid-3,
.beat:has(.rf-utlos-4.is-shown) .rf-vid-4,
.beat:has(.rf-utlos-5.is-shown) .rf-vid-5,
.beat:has(.rf-utlos-6.is-shown) .rf-vid-6 {
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
}
/* Linjer i delar som tonar in ritas fram. */
.beat:has(.rf-utlos-1.is-shown) .rf-pa-1 .d-draw,
.beat:has(.rf-utlos-1.is-shown) .d-draw.rf-pa-1,
.beat:has(.rf-utlos-2.is-shown) .rf-pa-2 .d-draw {
  stroke-dashoffset: 0;
}
/* Ett steg som bara utlöser något och inte syns själv. */
.rf-tyst {
  display: block;
  height: 0;
}

/* ---------- Fallet: debattartikeln ---------- */

.rf-artikel {
  max-width: 56rem;
  padding: clamp(0.9rem, 2.2vh, 1.5rem) clamp(1.2rem, 3vw, 2.2rem);
  border-top: 5px solid var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
}
.rf-artikel__tidning {
  margin: 0 0 0.3rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.rf-artikel__rubrik {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  line-height: 1.1;
}
.rf-artikel__av {
  margin: 0.3rem 0 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink-2);
}
.rf-artikel__text {
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 0.75rem + 1vw, 1.65rem);
  line-height: 1.42;
}
.rf-artikel__text p {
  margin: 0 0 0.5em;
}
.rf-artikel__text p:last-child {
  margin-bottom: 0;
}

/* ---------- Förvandlingen ---------- */

.rf-fall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 21vw, 280px);
  gap: clamp(1rem, 2.5vw, 2.2rem);
  align-items: start;
  max-width: 76rem;
}
.rf-forv {
  padding: clamp(0.9rem, 2vh, 1.4rem) clamp(1.1rem, 2.6vw, 2rem);
  border-left: 6px solid var(--accent);
  border-radius: 6px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.rf-forv__etikett {
  margin: 0 0 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rf-forv__text {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.1rem, 0.7rem + 1.05vw, 1.75rem);
  line-height: 1.5;
}
.rf-forv--markor .rf-forv__text,
.rf-forv--kalla .rf-forv__text,
.rf-forv--egna .rf-forv__text {
  font-size: clamp(1.2rem, 0.8rem + 1.2vw, 1.95rem);
}
.rf-forv__text span {
  border-radius: 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-repeat: no-repeat;
  text-decoration-line: underline;
  text-decoration-thickness: 0.12em;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  text-decoration-skip-ink: none;
  transition:
    font-size 1.5s cubic-bezier(0.45, 0, 0.2, 1),
    opacity 1.5s cubic-bezier(0.45, 0, 0.2, 1),
    background-size 1.1s var(--ease),
    background-color 0.8s var(--ease),
    box-shadow 0.8s var(--ease),
    color 0.8s var(--ease),
    text-decoration-color 0.8s var(--ease);
  transition-delay: var(--d, 0s);
}
/* Bitar som växer fram eller krymper bort. Det nya växer fram när det gamla
   nästan har krympt bort, så att bytet syns. */
.rf-forv__text [class*="rf-pa-"],
.rf-forv__text .rf-bokstav {
  transition-delay: calc(var(--d, 0s) + 0.6s);
}
.rf-forv .rf-pa-1, .rf-forv .rf-pa-2, .rf-forv .rf-pa-3 {
  font-size: 0;
}
.beat:has(.rf-utlos-1.is-shown) .rf-forv .rf-pa-1,
.beat:has(.rf-utlos-2.is-shown) .rf-forv .rf-pa-2,
.beat:has(.rf-utlos-3.is-shown) .rf-forv .rf-pa-3 {
  font-size: 1em;
}
.beat:has(.rf-utlos-1.is-shown) .rf-forv .rf-av-1,
.beat:has(.rf-utlos-2.is-shown) .rf-forv .rf-av-2,
.beat:has(.rf-utlos-3.is-shown) .rf-forv .rf-av-3 {
  font-size: 0;
}
/* Rollerna: huvudtanken markeras, stöden stryks under och detaljerna bleknar.
   I första takten kommer de med stegen, sedan står de kvar. */
.rf-forv--roller .rf-h,
.beat:has(.rf-utlos-1.is-shown) .rf-forv--karna .rf-h {
  background-color: var(--accent-soft);
}
.rf-forv--roller .rf-s,
.beat:has(.rf-utlos-2.is-shown) .rf-forv--karna .rf-s {
  text-decoration-color: var(--c1);
}
.rf-forv--roller .rf-d,
.beat:has(.rf-utlos-3.is-shown) .rf-forv--karna .rf-d {
  color: var(--ink-3);
}
/* Detaljerna stryks: ett streck som dras över texten. */
.rf-forv--stryk .rf-d {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 58%;
  background-size: 0% 0.1em;
}
.beat:has(.rf-utlos-1.is-shown) .rf-forv--stryk .rf-d {
  background-size: 100% 0.1em;
}
/* De två meningarna som dras ihop ringas in. */
.beat:has(.rf-utlos-1.is-shown) .rf-forv--dra .rf-s1 {
  background-color: color-mix(in srgb, var(--c1) 18%, transparent);
}
.beat:has(.rf-utlos-2.is-shown) .rf-forv--dra .rf-s1 {
  background-color: transparent;
}
/* Egna ord, referatmarkörer och källans presentation. */
.rf-forv .rf-ny {
  text-decoration-color: var(--good);
}
.rf-m {
  color: var(--accent);
  font-weight: 700;
}
.rf-forv .rf-k {
  background-color: color-mix(in srgb, var(--c1) 16%, transparent);
}

/* Teckenförklaringen under kortet i första takten. */
.rf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: clamp(0.7rem, 2vh, 1.2rem) 0 0;
}
.rf-chip-l {
  padding: 0.25rem 0.9rem;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: clamp(0.95rem, 0.7rem + 0.6vw, 1.3rem);
  font-weight: 700;
}
.rf-chip-l--h {
  background: var(--accent-soft);
  color: var(--accent);
}
.rf-chip-l--s {
  box-shadow: inset 0 -0.18em 0 var(--c1);
  color: var(--c1);
}
.rf-chip-l--d {
  color: var(--ink-3);
  box-shadow: inset 0 0 0 2px var(--rule);
}

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

.rf-fore-efter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.6rem);
  max-width: 76rem;
}
.rf-mini-kort {
  padding: 0.8rem 1.2rem 1rem;
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-body);
  font-size: clamp(0.95rem, 0.6rem + 0.85vw, 1.4rem);
  line-height: 1.4;
}
.rf-mini-kort p {
  margin: 0;
}
.rf-mini-kort .rf-mini-kort__rubrik {
  margin-bottom: 0.4rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rf-mini-kort--fore {
  border-left: 6px solid var(--rule);
  color: var(--ink-2);
}
.rf-mini-kort--efter {
  border-left: 6px solid var(--accent);
}
.rf-mini-kort--efter .rf-mini-kort__rubrik {
  color: var(--accent);
}
.rf-remsa .diagram__svg {
  max-height: 14vh;
}

/* ---------- Övningstexten i verkstaden ---------- */

.rf-ovning {
  max-width: 62rem;
  margin: 0 0 clamp(0.8rem, 2vh, 1.4rem);
  padding: 0.9rem 1.5rem;
  border-left: 6px solid var(--accent);
  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.38;
}
.rf-ovning p {
  margin: 0;
}
.rf-ovning .rf-ovning__kalla {
  margin-bottom: 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Diagrammen ---------- */

.rf-fig .diagram__svg {
  max-height: 54vh;
}
.rf-matare {
  margin: 0;
}
.rf-matare .diagram__svg {
  max-height: 46vh;
}
.diagram__svg .rf-mening {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: 34px;
}
.diagram__svg .rf-not {
  fill: var(--ink-2);
  font-size: 24px;
}
.diagram__svg .rf-fraga {
  fill: var(--ink-3);
  font-size: 30px;
  font-weight: 700;
}
.diagram__svg .rf-varning {
  fill: var(--warn);
  font-weight: 700;
}
.diagram__svg .rf-ok {
  fill: var(--good);
  font-weight: 700;
}
.diagram__svg .rf-ok--stor {
  font-size: 26px;
  font-weight: 700;
}
.diagram__svg .rf-c1 {
  fill: var(--c1);
  font-weight: 700;
}
.diagram__svg .rf-c2 {
  fill: var(--c2);
  font-weight: 700;
}
.diagram__svg .rf-c3 {
  fill: var(--c3);
  font-weight: 700;
}
.diagram__svg .rf-accent {
  fill: var(--accent);
}
.diagram__svg .rf-mini-text {
  font-size: 20px;
}
.diagram__svg .rf-antal {
  font-size: 26px;
  font-weight: 700;
}
.rf-osynlig {
  fill: none;
  stroke: none;
}

/* Människorna och pratbubblorna. */
.rf-person circle,
.rf-person path {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.rf-person--kalla circle,
.rf-person--kalla path {
  stroke: var(--c1);
  fill: color-mix(in srgb, var(--c1) 14%, var(--card));
}
.rf-person--du circle,
.rf-person--du path {
  stroke: var(--c2);
  fill: color-mix(in srgb, var(--c2) 14%, var(--card));
}
.rf-bubbla {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.rf-film {
  fill: var(--paper-2);
  stroke: var(--ink-3);
  stroke-width: 2;
}
.rf-film__ruta {
  stroke: var(--rule);
  stroke-width: 2;
}
.rf-film--kort {
  fill: var(--accent);
  stroke: var(--accent);
}

/* Vägen och dikena. */
.rf-vag {
  fill: var(--paper-2);
  stroke: var(--rule);
  stroke-width: 2;
}
.rf-mittlinje {
  fill: none;
  stroke: var(--rule);
  stroke-width: 4;
  stroke-dasharray: 22 18;
}
.rf-dike {
  fill: var(--warn-soft);
  stroke: var(--warn);
  stroke-width: 2;
}
.rf-dike-monster {
  fill: url(#rf-di-h);
}
.rf-hatch {
  stroke: var(--warn);
  stroke-width: 2;
  opacity: 0.35;
}
.rf-spar-streck {
  fill: none;
  stroke: var(--warn);
  stroke-width: 3;
  stroke-linecap: round;
}
.rf-vag-spar {
  stroke: var(--good);
  stroke-width: 4;
}
.d-dot.rf-dot-varn {
  fill: var(--warn);
}

/* Huset. */
.rf-tak {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
}
.rf-balk {
  fill: var(--accent);
}
.diagram__svg .rf-tak-text {
  fill: var(--accent);
  font-size: 30px;
  font-weight: 800;
}
.rf-pelare {
  fill: color-mix(in srgb, var(--c1) 22%, var(--card));
  stroke: var(--c1);
  stroke-width: 3;
}
.rf-mark {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 4;
  stroke-linecap: round;
}
.rf-girlang {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 2;
}
.rf-flagga {
  stroke: var(--card);
  stroke-width: 1;
}
.rf-flagga--1 {
  fill: var(--c2);
}
.rf-flagga--2 {
  fill: var(--c3);
}
.rf-flagga--3 {
  fill: var(--warn);
}
.rf-tavla {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 3;
}
.rf-tavla__bild {
  fill: var(--c3);
}
.rf-tavla__sol {
  fill: var(--c2);
}
.rf-mini {
  fill: var(--paper-2);
  stroke: var(--rule);
  stroke-width: 2;
}

/* Meningarna som staplar. */
.rf-stapel--h {
  fill: var(--accent);
}
.rf-stapel--s {
  fill: var(--c1);
}
.rf-stapel--d {
  fill: var(--rule);
}
.rf-ring {
  fill: none;
  stroke: var(--c1);
  stroke-width: 3;
  stroke-dasharray: 7 5;
}

/* Mätaren. */
.rf-spar {
  opacity: 0.85;
}
.rf-stop-kalla {
  stop-color: var(--c1);
}
.rf-stop-du {
  stop-color: var(--c2);
}
.rf-stop-varn {
  stop-color: var(--warn);
}
.rf-stop-ok {
  stop-color: var(--good);
}
.rf-tick {
  stroke: var(--ink-3);
  stroke-width: 2;
}
.rf-nal path {
  fill: var(--ink);
}
.rf-nal .rf-nal__streck {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.rf-lucka {
  stroke: var(--ink-3);
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
}
.rf-chip {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.rf-chip--aktiv {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 3;
}
.diagram__svg .rf-chip-text {
  fill: var(--accent);
  font-weight: 700;
}

/* Tidslinjen. */
.rf-sida {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
}
.rf-sida__rad {
  stroke: var(--ink-3);
  stroke-width: 3;
  stroke-linecap: round;
}
.rf-punkt--c3 {
  fill: var(--c3);
}

/* Skalan från avskrift till referat. */
.rf-ord {
  stroke-width: 2.5;
}
.rf-ord--kalla {
  fill: var(--card);
  stroke: var(--ink-2);
}
.rf-ord--kopia {
  fill: var(--warn-soft);
  stroke: var(--warn);
}
.rf-ord--bytt {
  fill: var(--card);
  stroke: var(--ink-3);
  stroke-dasharray: 6 5;
}
.rf-ord--egen {
  fill: var(--good-soft);
  stroke: var(--good);
}
.rf-ord--markor {
  fill: var(--accent-soft);
  stroke: var(--accent);
}
.rf-skelett {
  fill: none;
  stroke: var(--warn);
  stroke-width: 2.5;
  stroke-dasharray: 1;
}
.rf-brott {
  stroke: var(--rule);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}

/* Tabellen: referat, citat och plagiat. */
.rf-cell {
  fill: var(--paper-2);
  stroke: var(--rule);
  stroke-width: 2;
}
.rf-cell--ok {
  fill: var(--good-soft);
  stroke: var(--good);
}
.rf-cell--c1 {
  fill: color-mix(in srgb, var(--c1) 14%, var(--card));
  stroke: var(--c1);
}
.rf-cell--varn {
  fill: var(--warn-soft);
  stroke: var(--warn);
}
.rf-etikett {
  fill: var(--card);
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.rf-etikett--tom {
  fill: none;
  stroke: var(--ink-3);
  stroke-dasharray: 6 5;
}
.rf-etikett__hal {
  fill: var(--ink-2);
}
.diagram__svg .rf-etikett-text {
  font-size: 20px;
  font-weight: 700;
}

/* Källhänvisningens anatomi. */
.diagram__svg .rf-ana {
  font-size: 24px;
}
.diagram__svg .rf-chip-namn {
  font-size: 20px;
  font-weight: 700;
}
.diagram__svg .rf-lista-text {
  font-size: 24px;
}
.diagram__svg .rf-fet {
  font-weight: 700;
}
.rf-under {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}
.rf-pil {
  fill: none;
  stroke-width: 2.5;
  stroke-dasharray: 1;
}
.rf-u1 { stroke: var(--c1); }
.rf-u2 { stroke: var(--c2); }
.rf-u3 { stroke: var(--c3); }
.rf-u4 { stroke: var(--accent); }
.rf-u1-chip, .rf-u2-chip, .rf-u3-chip, .rf-u4-chip {
  fill: var(--card);
  stroke-width: 3;
}
.rf-u1-chip { stroke: var(--c1); }
.rf-u2-chip { stroke: var(--c2); }
.rf-u3-chip { stroke: var(--c3); }
.rf-u4-chip { stroke: var(--accent); }

/* Checklistan och remsan. */
.rf-bockring {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2.5;
}
.rf-bockring--ok {
  fill: var(--good-soft);
  stroke: var(--good);
}
.rf-bock {
  fill: none;
  stroke: var(--good);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rf-prick--h {
  fill: var(--accent);
}
.rf-prick--s {
  fill: var(--c1);
}
.rf-prick--d {
  fill: var(--rule);
}
.rf-prick--r {
  fill: var(--card);
  stroke: var(--accent);
  stroke-width: 3.5;
}
.rf-lank {
  stroke-dasharray: 1;
}

/* ---------- Lägre och smalare skärmar ---------- */

@media (max-height: 860px) {
  .rf-fig .diagram__svg {
    max-height: 48vh;
  }
  .rf-forv__text {
    font-size: clamp(1rem, 0.65rem + 0.95vw, 1.55rem);
  }
}
@media (max-height: 740px) {
  .rf-fig .diagram__svg {
    max-height: 42vh;
  }
  .rf-matare .diagram__svg {
    max-height: 38vh;
  }
  .rf-remsa .diagram__svg {
    max-height: 13vh;
  }
}
@media (max-width: 760px) {
  .rf-fall,
  .rf-fore-efter {
    grid-template-columns: 1fr;
  }
  .rf-matare {
    max-width: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-forv__text span,
  .rf-pa-1, .rf-pa-2, .rf-pa-3, .rf-pa-4, .rf-pa-5, .rf-pa-6,
  .rf-av-1, .rf-av-2, .rf-av-3, .rf-av-4, .rf-av-5, .rf-av-6,
  .rf-dimma-1, .rf-dimma-2, .rf-dimma-3,
  .rf-vid-1, .rf-vid-2, .rf-vid-3, .rf-vid-4, .rf-vid-5, .rf-vid-6 {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}