:root {
  /* Gemensam layout för presentationerna. Färger och typsnitt kommer från
     teman.css; det som är unikt för en presentation ligger i dess style.css. */
  --t-body: clamp(1.35rem, 0.9rem + 1.25vw, 2.3rem);
  --t-title: clamp(2.4rem, 1.2rem + 3.6vw, 5.4rem);
  --t-kicker: clamp(0.85rem, 0.7rem + 0.4vw, 1.15rem);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.35;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s, color 0.4s;
}

button {
  font: inherit;
  color: inherit;
}

strong {
  font-weight: 650;
}

/* ---------- Ram ---------- */

.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 4px;
  z-index: 30;
  background: transparent;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem clamp(1rem, 4vw, 3.5rem) 0.9rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: linear-gradient(var(--paper) 55%, transparent);
  pointer-events: none;
}
.masthead__name {
  font-weight: 700;
  color: var(--ink);
}
.masthead__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.masthead,
.masthead__name,
.masthead__rule {
  transition:
    color 0.4s,
    background 0.4s;
}
:root[data-on-dark] .masthead {
  background: transparent;
  color: color-mix(in srgb, var(--chapter-ink) 55%, transparent);
}
:root[data-on-dark] .masthead__name {
  color: var(--chapter-ink);
}
:root[data-on-dark] .controls {
  background: color-mix(in srgb, var(--chapter-bg) 60%, transparent);
  border-color: color-mix(in srgb, var(--chapter-ink) 20%, transparent);
}
:root[data-on-dark] .controls__btn {
  color: var(--chapter-ink);
}
:root[data-on-dark] .controls__btn:hover {
  background: color-mix(in srgb, var(--chapter-ink) 12%, transparent);
}
:root[data-on-dark] .masthead__rule {
  background: color-mix(in srgb, var(--chapter-ink) 25%, transparent);
}

/* ---------- Takter ---------- */

.beat {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 14vh clamp(1rem, 5vw, 4rem) 12vh;
}

.col {
  width: 100%;
  max-width: 46rem;
}
.col--wide {
  max-width: 74rem;
}

.kicker {
  margin: 0 0 1.2rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-style: var(--display-style, normal);
  margin: 0 0 clamp(1.5rem, 4vh, 3rem);
  font-family: var(--f-display);
  font-size: var(--t-title);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.punch {
  margin: clamp(1.5rem, 4vh, 3rem) 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  max-width: 50rem;
  text-wrap: pretty;
}

/* Rörelse: element som dyker upp när takten syns och försvinner när den lämnas */
.appear {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.beat.is-visible .appear {
  opacity: 1;
  transform: none;
}

[data-step] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.8s var(--ease);
}
[data-step].is-shown {
  opacity: 1;
  transform: none;
}

/* ---------- Ingång ---------- */

.hero__inner {
  width: 100%;
  max-width: 74rem;
}
/* Presentation som publicerats före granskning: <p class="status-badge">
   först i startbilden, och ogranskad: true i manifestet (kortet). */
.status-badge {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: 0.35em 0.9em;
  border: 1px solid var(--warn);
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: clamp(0.8rem, 0.7rem + 0.3vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero__title {
  font-style: var(--display-style, normal);
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(5rem, 2rem + 13vw, 15rem);
  font-weight: 640;
  line-height: 0.88;
  letter-spacing: -0.045em;
  hyphens: manual;
}
.hero__dek {
  margin: clamp(1.5rem, 4vh, 3rem) 0 0;
  max-width: 40rem;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.6rem);
  line-height: 1.25;
  color: var(--ink-2);
  border-top: 3px solid var(--ink);
  padding-top: 1.2rem;
}
.hero__dek em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
}
.hero__cue {
  margin-top: 3rem;
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 2em;
  height: 2em;
  border: 1px solid var(--rule);
  border-bottom-width: 3px;
  border-radius: 6px;
  font-family: var(--f-ui);
  color: var(--ink-2);
}

/* ---------- Gissa först ---------- */

.claim {
  margin: 0;
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-weight: 450;
  font-size: clamp(2.3rem, 1.2rem + 3.4vw, 5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.vote {
  display: flex;
  gap: 1rem;
  margin-top: clamp(1.5rem, 5vh, 3rem);
  flex-wrap: wrap;
}
.vote__btn {
  font-family: var(--f-ui);
  font-size: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
  font-weight: 600;
  padding: 0.8em 1.4em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s,
    transform 0.25s;
}
.vote__btn:hover {
  transform: translateY(-2px);
}
.vote__btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.answer {
  margin-top: clamp(1.5rem, 5vh, 3rem);
  padding: 1.4rem 1.6rem;
  border-left: 6px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
}
.answer__verdict {
  margin: 0 0 0.4rem;
  font-family: var(--f-display);
  font-weight: 650;
  font-size: 1.25em;
  color: var(--accent);
}
.answer__text {
  margin: 0;
}

/* ---------- Du litar redan ---------- */

.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
.trust-list li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--rule);
}
.trust-list svg {
  flex: none;
  width: clamp(2.2rem, 1.6rem + 1.6vw, 3.4rem);
  height: auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Kapitel ---------- */

.chapter {
  background: var(--chapter-bg);
  color: var(--chapter-ink);
}
.chapter__inner {
  width: 100%;
  max-width: 74rem;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.chapter__num {
  grid-row: span 2;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(8rem, 4rem + 18vw, 22rem);
  line-height: 0.78;
  color: var(--accent);
}
.chapter__title {
  font-style: var(--display-style, normal);
  margin: 0;
  font-family: var(--f-display);
  font-weight: 560;
  font-size: clamp(2.6rem, 1.2rem + 4.5vw, 6.6rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.chapter__dek {
  margin: 1rem 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.6rem);
  opacity: 0.75;
}

/* ---------- Sammanfattning ---------- */

.rules {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.rules li {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1rem + 2vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.rules__n {
  flex: none;
  width: 1.2em;
  font-weight: 300;
  color: var(--accent);
}
.coda {
  margin: clamp(1.5rem, 5vh, 3rem) 0 0;
  font-size: 1.1em;
  color: var(--ink-2);
}
.coda strong {
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 600;
}

/* ---------- Diskussion ---------- */

.talk__q {
  margin: 0 0 clamp(1.5rem, 5vh, 3rem);
  padding: 0;
  list-style: none;
}
.talk__q li {
  padding: 0.4rem 0 0.4rem 2rem;
  position: relative;
  color: var(--ink-2);
}
.talk__q li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.timer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.timer__time {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 2rem + 5vw, 7rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  min-width: 4.2ch;
}
.timer.is-done .timer__time {
  color: var(--accent);
}
.timer__btn {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
  padding: 0.7em 1.3em;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}
.timer__btn--ghost {
  background: transparent;
  color: var(--ink);
}

/* ---------- Styrning ---------- */

.controls {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.8rem);
  bottom: clamp(0.8rem, 2vw, 1.6rem);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  font-family: var(--f-ui);
  opacity: 0.35;
  transition: opacity 0.3s;
}
.controls:hover,
.controls:focus-within {
  opacity: 1;
}
.controls__btn {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
}
.controls__btn:hover {
  background: var(--paper-2);
}
.controls__btn--small {
  display: grid;
  place-items: center;
}
.controls__btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Menyn Mer (karna.js): Till början, Välj bilder, PDF och ljust eller
   mörkt. Den fälls upp ovanför knappen med de tre punkterna. */
.controls.is-open {
  opacity: 1;
}
.controls__more {
  position: relative;
  display: grid;
}
.controls__more-btn {
  position: relative;
}
.controls__more-btn circle {
  fill: currentColor;
  stroke: none;
}
.controls__more-btn[aria-expanded="true"] {
  background: var(--paper-2);
}
:root[data-on-dark] .controls__more-btn[aria-expanded="true"] {
  background: color-mix(in srgb, var(--chapter-ink) 16%, transparent);
}
/* En prick på knappen när några bilder är bortvalda. */
.controls__more:has(.more-menu__item.is-active) .controls__more-btn::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}
.more-menu {
  position: absolute;
  right: -0.35rem;
  bottom: calc(100% + 0.75rem);
  display: grid;
  gap: 0.1rem;
  min-width: 16rem;
  padding: 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  transform-origin: 90% 100%;
  animation: more-menu-in 0.16s var(--ease);
}
.more-menu[hidden] {
  display: none;
}
@keyframes more-menu-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}
.more-menu__item {
  display: grid;
  grid-template-columns: 1.2rem 1fr auto;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.62rem 0.8rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: 500 0.95rem/1.2 var(--f-ui);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.more-menu__item:hover,
.more-menu__item:focus-visible {
  background: var(--paper-2);
  outline: none;
}
.more-menu__item svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-2);
}
.more-menu__item kbd {
  padding: 0.08rem 0.42rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font: 600 0.72rem var(--f-ui);
  color: var(--ink-3);
}
.more-menu__note {
  font: 600 0.78rem var(--f-ui);
  color: var(--accent);
}
.more-menu__note:empty {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .more-menu {
    animation: none;
  }
}
.controls__count {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  min-width: 3.4rem;
  text-align: center;
}

/* ---------- Läs mer ---------- */

.more-btn {
  position: absolute;
  left: clamp(0.8rem, 2vw, 1.8rem);
  bottom: clamp(0.8rem, 2vw, 1.6rem);
  z-index: 5;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0.6;
  transition:
    opacity 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.more-btn:hover,
.more-btn:focus-visible {
  opacity: 1;
  color: var(--ink);
  border-color: var(--ink-3);
}
.chapter .more-btn {
  color: color-mix(in srgb, var(--chapter-ink) 60%, transparent);
  border-color: color-mix(in srgb, var(--chapter-ink) 25%, transparent);
}
.chapter .more-btn:hover,
.chapter .more-btn:focus-visible {
  color: var(--chapter-ink);
  border-color: color-mix(in srgb, var(--chapter-ink) 60%, transparent);
}

.more-dialog {
  width: min(40rem, calc(100% - 2rem));
  max-height: min(44rem, calc(100svh - 2rem));
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: auto;
  overscroll-behavior: contain;
}
/* Ingen backdrop-filter här: i Safari kan oskärpan göra att rutan öppnas
   utan att ritas ut, och då blir sidan oklickbar tills den laddas om. */
.more-dialog::backdrop {
  background: rgba(22, 20, 18, 0.55);
}
:root:has(.more-dialog[open]) {
  overflow: hidden;
}
.more-dialog__inner {
  position: relative;
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.more-dialog__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.more-dialog__close:hover {
  background: var(--paper-2);
  color: var(--ink);
}
.more-dialog__close svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.more-dialog__kicker {
  margin: 0 0 0.6rem;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.more-dialog__title {
  margin: 0 2.5rem 1rem 0;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.more-dialog__body {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.more-dialog__body p,
.more-dialog__body ol {
  margin: 0 0 0.9em;
}
.more-dialog__body ol {
  padding-left: 1.3em;
}
.more-dialog__body li {
  margin-bottom: 0.4em;
}
.more-dialog__body > :last-child {
  margin-bottom: 0;
}


/* ---------- Begreppen ---------- */

.hero__title--long {
  font-size: clamp(3.4rem, 1.4rem + 8vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.kind--c1,
.facts--c1,
.answer--c1,
.tag--c1,
[data-kind="c1"] {
  --k: var(--c1);
}
.kind--c2,
.facts--c2,
.answer--c2,
.tag--c2,
[data-kind="c2"] {
  --k: var(--c2);
}
.kind--c3,
.facts--c3,
.answer--c3,
.tag--c3,
[data-kind="c3"] {
  --k: var(--c3);
}

.tag {
  display: inline-block;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  background: var(--k);
  color: var(--paper);
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kinds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.kind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.6rem;
  border-top: 6px solid var(--k);
  background: var(--card);
  box-shadow: var(--shadow);
}
.kind__text {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 0.9rem + 1.3vw, 2.3rem);
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

/* ---------- Faktasidor ---------- */

.facts .kicker {
  color: var(--k);
}
.fact-list {
  margin: 0;
}
.fact-list div {
  display: grid;
  grid-template-columns: minmax(11rem, 17rem) 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.fact-list dt {
  font-family: var(--f-ui);
  font-size: var(--t-kicker);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k);
}
.fact-list dd {
  margin: 0;
  text-wrap: pretty;
}

/* ---------- Quiz ---------- */

.vote--kinds .vote__btn {
  min-width: 7.5em;
}
.quiz.is-revealed .vote__btn {
  opacity: 0.3;
}
.quiz.is-revealed .vote__btn[data-correct] {
  opacity: 1;
  border-color: var(--k);
  background: var(--k);
  color: var(--paper);
}
.answer--c1,
.answer--c2,
.answer--c3 {
  border-left-color: var(--k);
}
.answer--c1 .answer__verdict,
.answer--c2 .answer__verdict,
.answer--c3 .answer__verdict {
  color: var(--k);
}

/* ---------- Likheter ---------- */

.same-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.same-list li {
  position: relative;
  padding: 0.8rem 0 0.8rem 2.4rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 0.9rem + 1.7vw, 2.8rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.same-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 1.2rem;
  height: 3px;
  background: var(--accent);
}

/* ---------- Skillnader ---------- */

.diff__wrap {
  overflow-x: auto;
}
.diff__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(1rem, 0.6rem + 1vw, 1.7rem);
  line-height: 1.2;
}
.diff__table th,
.diff__table td {
  padding: 0.7em 0.8em;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.diff__table thead th,
.diff__table thead td {
  border-bottom: 2px solid var(--ink);
}
.diff__table th[scope="row"] {
  width: 22%;
  padding-left: 0;
  font-family: var(--f-ui);
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Förändring ---------- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.timeline__year {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1.5rem + 3vw, 5rem);
  font-weight: 300;
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.timeline__text {
  text-wrap: pretty;
}

/* ---------- Smalare skärmar ---------- */

@media (max-width: 760px) {
  .kinds {
    grid-template-columns: 1fr;
  }
  .fact-list div,
  .timeline li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .diff__table {
    font-size: 0.95rem;
  }
  .masthead__topic {
    display: none;
  }
}

@media (max-height: 860px) and (min-width: 761px) {
  .beat {
    padding-top: 11vh;
    padding-bottom: 7vh;
  }
  :root {
    --t-body: clamp(1.25rem, 0.8rem + 1.1vw, 2rem);
    --t-title: clamp(2.2rem, 1rem + 3.2vw, 4.6rem);
  }
  .section-title {
    margin-bottom: 1.2rem;
  }
  .punch {
    margin-top: 1.2rem;
    padding-top: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .appear,
  [data-step] {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Text och bilder ---------- */

.lead {
  margin: 0;
  max-width: 50rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lead strong {
  color: var(--ink);
}
.aside {
  margin: clamp(1rem, 3vh, 2rem) 0 0;
  max-width: 52rem;
  font-style: var(--claim-style, italic);
  color: var(--ink-2);
  text-wrap: pretty;
}
.quiz .claim {
  font-size: clamp(1.9rem, 1rem + 2.6vw, 3.8rem);
}

.figure {
  margin: 0 0 clamp(1rem, 3vh, 2rem);
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
}
/* Illustrationerna är ritade på vitt och ligger på ett ljust kort i alla teman. */
.figure--light {
  padding: clamp(0.6rem, 1.5vw, 1.2rem);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
}
.picture__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.picture__grid .figure {
  margin: 0;
}
.picture__grid .figure img {
  max-height: 60vh;
}

.kinds--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tag-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag-list li {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.tag-list .tag {
  flex: none;
  min-width: 7.5em;
  text-align: center;
}

.rules--small li {
  font-size: clamp(1.4rem, 0.9rem + 1.5vw, 2.5rem);
  padding: 0.55rem 0;
}

@media (max-width: 760px) {
  .picture__grid,
  .kinds--two {
    grid-template-columns: 1fr;
  }
  .tag-list li {
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* ---------- Bildkällor och citat ---------- */

.figure__credit {
  margin-top: 0.5rem;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  color: var(--ink-3);
}
.figure:not(.figure--light) img {
  border-radius: 6px;
  box-shadow: var(--shadow);
}
.tag-list--quotes li {
  justify-content: space-between;
}
.tag-list--quotes .quote {
  font-family: var(--f-display);
  font-style: var(--claim-style, italic);
  font-size: clamp(1.4rem, 0.9rem + 1.6vw, 2.6rem);
  line-height: 1.15;
  text-wrap: balance;
}

/* ---------- Sex steg ---------- */

.step-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
}
.step-grid li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border-top: 5px solid var(--accent);
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 0.8rem + 1.1vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}
.step-grid__n {
  flex: none;
  font-weight: 300;
  font-size: 1.6em;
  line-height: 1;
  color: var(--accent);
}
@media (max-width: 760px) {
  .step-grid {
    grid-template-columns: 1fr;
  }
}

/* Röstsiffrorna i quizet ska läsas som tal, inte som citat. */
.quiz .claim--numbers {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 1rem + 3vw, 4.4rem);
}

/* Årtalen står ovanför texten, så att fyrsiffriga tal inte trycker ihop den. */
.step-grid--years li {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

/* Fyra led, till exempel analysmodellen och granskningen av ett påstående. */
.step-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .step-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .step-grid--four {
    grid-template-columns: 1fr;
  }
}

/* Åtta rutor i fyra kolumner, till exempel mandaten efter ett val. */
.step-grid--seats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.step-grid--seats .step-grid__n {
  min-width: 2.1ch;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .step-grid--seats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Långa ord (Representanthuset, Prenumerationer) får brytas i stället för att
   sticka ut ur smala rutor, till exempel i step-grid--four. */
.step-grid li > span:last-child {
  min-width: 0;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* ---------- Rörliga diagram ----------
   Gemensamma byggstenar för diagram i SVG, i samma anda som spåren i
   Källtillit. Diagrammet ritas när takten kommer i bild (.diagram--auto) eller
   när ett steg visas (lägg delarna i ett element med data-step). Rörelsen är
   lugn och en gång, utom prickarna som vandrar längs pilarna i den takt som
   visas. Se GUIDE.md, avsnittet Rörliga diagram. */

.diagram {
  margin: clamp(0.6rem, 2vh, 1.4rem) 0 0;
}
.diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
  overflow: visible;
  font-family: var(--f-ui);
}
.diagram__svg text {
  fill: var(--ink);
  font-size: 22px;
}
.diagram__svg .d-label {
  font-weight: 700;
}
.diagram__svg .d-muted {
  fill: var(--ink-2);
  font-size: 18px;
}
.diagram__svg .d-accent-text {
  fill: var(--accent);
  font-weight: 700;
}
.d-box {
  fill: var(--card);
  stroke: var(--rule);
  stroke-width: 2;
}
.d-box--accent {
  stroke: var(--accent);
  stroke-width: 3;
}
.d-line {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-line--accent {
  stroke: var(--accent);
  stroke-width: 3;
}
.d-fill-accent {
  fill: var(--accent);
}
/* Pilspetsar: <marker> med <path class="d-arrowhead">, eller .d-fill-accent för orange. */
.d-arrowhead {
  fill: var(--ink-2);
}
.d-fill-soft {
  fill: var(--accent-soft, var(--paper-2));
}

/* Linjer som ritas fram. Ge stigen pathLength="1". */
.d-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
/* Delar som tonar och växer fram. */
.d-pop {
  opacity: 0;
  transform: scale(0.85);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.6s var(--ease),
    transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
/* Staplar som växer från vänster (--x) eller nerifrån (--y). */
.d-bar {
  transform-box: fill-box;
  transition: transform 1.1s var(--ease);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.d-bar--x {
  transform-origin: left center;
  transform: scaleX(0);
}
.d-bar--y {
  transform-origin: center bottom;
  transform: scaleY(0);
}

.beat.is-visible .diagram--auto .d-draw,
[data-step].is-shown .d-draw,
.d-draw[data-step].is-shown {
  stroke-dashoffset: 0;
}
.beat.is-visible .diagram--auto .d-pop,
[data-step].is-shown .d-pop,
.d-pop[data-step].is-shown {
  opacity: 1;
  transform: none;
}
.beat.is-visible .diagram--auto .d-bar,
[data-step].is-shown .d-bar,
.d-bar[data-step].is-shown {
  transform: none;
}
/* Steg inne i en SVG ska inte flyttas som vanliga steg, bara tona in. */
.diagram__svg [data-step] {
  transform: none;
}

/* Prickar som vandrar längs en pil: <circle class="d-dot"> med
   <animateMotion> i SVG. Kärnan pausar animationerna i takter som inte visas. */
.d-dot {
  fill: var(--accent);
}
.d-dot--hidden-until-shown {
  opacity: 0;
  transition: opacity 0.4s;
}
[data-step].is-shown .d-dot--hidden-until-shown,
.beat.is-visible .diagram--auto .d-dot--hidden-until-shown {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .d-draw,
  .d-pop,
  .d-bar {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .d-dot {
    display: none;
  }
}

/* ---------- Mermaid-diagram med Pele ----------
   <pre class="pele-diagram"> ritas av Pele (vendor/pele) via karna.js.
   Temats färger går in via --pele-variablerna, så diagrammen följer ljust
   och mörkt läge. Linjerna ritas fram med .d-draw och delarna tonar in
   (.pele-tona, bara opacitet eftersom Pele placerar noderna med transform). */

pre.pele-diagram {
  /* Syns bara om skriptet inte kan laddas: då står Mermaid-texten kvar. */
  margin: clamp(0.6rem, 2vh, 1.4rem) 0 0;
  padding: 1rem;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  color: var(--ink-2);
  font: 0.9rem/1.4 ui-monospace, monospace;
  white-space: pre-wrap;
}
.pele-figur {
  --pele-bg: var(--paper);
  --pele-fg: var(--ink);
  --pele-muted: var(--ink-2);
  --pele-line: var(--ink-2);
  --pele-surface: var(--card);
  --pele-surface-alt: var(--paper-2);
  --pele-border: var(--rule);
  --pele-accent: var(--accent);
  --pele-font: var(--f-ui);
  --pele-radius: 10px;
  --pele-series-1: var(--c1, var(--accent));
  --pele-series-2: var(--c2, var(--ink-2));
  --pele-series-3: var(--c3, var(--good));
  --pele-series-4: var(--accent);
  --pele-series-5: var(--good);
  --pele-series-6: var(--warn);
  --pele-series-7: var(--ink-2);
  --pele-series-8: var(--rule);
  margin: clamp(0.6rem, 2vh, 1.4rem) 0 0;
  font-family: var(--f-ui);
  font-size: clamp(1rem, 0.75rem + 0.7vw, 1.35rem);
}
.pele-figur svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58vh;
}
.pele-tona {
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.beat.is-visible .diagram--auto .pele-tona,
[data-step].is-shown .pele-tona,
.pele-figur:not(.diagram--auto, [data-step], .pele-steg-diagram) .pele-tona {
  opacity: 1;
}
.pele-figur:not(.diagram--auto, [data-step], .pele-steg-diagram) .d-draw {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pele-tona {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Markering steg för steg (data-steg): rutorna syns svagt tills deras steg
   visas. Den aktiva rutan får temats accentfärg, besökta rutor syns fullt och
   pilarna fram till dem ritas fram. Ramar för simbanor (kluster) syns hela
   tiden. */
.pele-stegmarkor {
  display: none;
}
/* Pele ger breda diagram zoomknappar med stilen direkt på elementen; på
   projektorn behövs de inte. */
.pele-figur .pele-zoom {
  display: none !important;
}
.pele-steg-diagram .pele-tona {
  opacity: 1;
}
.pele-steg-diagram .pele-node {
  opacity: 0.32;
  transition: opacity 0.45s var(--ease);
}
.pele-steg-diagram .pele-node.pele-besokt {
  opacity: 1;
}
/* En oritad pil göms helt; annars lämnar linjeändens rundning en prick. */
.pele-steg-diagram .pele-edge .d-draw {
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset 0.9s var(--ease),
    opacity 0s linear 0.9s;
}
.pele-steg-diagram .pele-edge.pele-dragen .d-draw {
  stroke-dashoffset: 0;
  opacity: 1;
  transition:
    stroke-dashoffset 0.9s var(--ease),
    opacity 0s;
}
.pele-steg-diagram .pele-edge .pele-marker,
.pele-steg-diagram .pele-edge .pele-edge-label,
.pele-steg-diagram .pele-edge-labels .pele-edge-label {
  opacity: 0;
  transition: opacity 0.4s var(--ease) 0.6s;
}
.pele-steg-diagram .pele-edge.pele-dragen .pele-marker,
.pele-steg-diagram .pele-edge.pele-dragen .pele-edge-label,
.pele-steg-diagram .pele-edge-labels .pele-edge-label.pele-dragen {
  opacity: 1;
}
.pele-node.pele-aktiv > :first-child {
  stroke: var(--accent);
  stroke-width: 3px;
  fill: color-mix(in srgb, var(--accent) 16%, var(--card));
}
.pele-node.pele-aktiv .pele-label,
.pele-node.pele-aktiv text {
  font-weight: 700;
}

/* classDef viktig i Mermaid-texten lyfter fram en ruta i temats accentfärg. */
.pele-node.viktig > :first-child {
  stroke: var(--accent);
  stroke-width: 2.5px;
}
.pele-node.viktig .pele-label,
.pele-node.viktig text {
  fill: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Bild med etiketter ---------- */
/* En teknisk bild (beställd utan text) med etiketter ovanpå, som tonas in
   steg för steg med data-step. Läget anges i procent av bilden:
   <span class="bildetikett" style="--x: 40%; --y: 20%" data-step>…</span>.
   Etiketten centreras på punkten med translate, som inte krockar med
   stegens transform. */
.bildetiketter {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.bildetiketter__bild {
  position: relative;
}
.bildetiketter__bild img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  border-radius: 6px;
}
.bildetikett {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  padding: 0.28em 0.75em;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--ink);
  font: 600 clamp(0.78rem, 0.6rem + 0.45vw, 1rem) / 1.2 var(--f-ui);
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.bildetiketter figcaption {
  margin-top: 0.4rem;
  font: 0.75rem var(--f-ui);
  color: var(--ink-3);
}

/* ---------- Urval: hoppa över bilder ---------- */
/* Bilder som läraren har valt bort (karna.js, Urval) visas inte alls. */

.is-skipped {
  display: none !important;
}
.pick-dialog {
  width: min(44rem, calc(100% - 2rem));
}
.pick__hint {
  margin: 0 0 1rem;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.45;
}
.pick__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(26rem, 52svh);
  overflow: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pick__item label {
  display: grid;
  grid-template-columns: auto 2.2rem 1fr;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
  font-family: var(--f-ui);
  font-size: 0.98rem;
  cursor: pointer;
}
.pick__item input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
}
.pick__item input:not(:checked) ~ span {
  color: var(--ink-3);
  text-decoration: line-through;
}
.pick__item.is-current label {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.pick__n {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pick__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.pick__btn {
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 0.95rem var(--f-ui);
  cursor: pointer;
}
.pick__btn--main {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}
.pick__status {
  min-height: 1.4em;
  margin: 0.8rem 0 0;
  color: var(--ink-2);
  font: 0.92rem var(--f-ui);
}

/* ---------- Utskrift och PDF ---------- */
/* Kärnan sätter .is-print vid utskrift och med ?pdf (scripts/bygg-pdf.mjs).
   Varje takt blir en liggande sida i projektorns format, 1600 × 1000 px,
   och läs mer-texten en egen sida direkt efter. */

@page {
  size: 1600px 1000px;
  margin: 0;
}
.is-print,
.is-print body {
  scroll-behavior: auto;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.is-print .controls,
.is-print .progress,
.is-print .masthead,
.is-print .more-btn,
.is-print .more-dialog,
.is-print .hero__cue,
.is-print .d-dot {
  display: none !important;
}
.is-print *,
.is-print *::before,
.is-print *::after {
  transition: none !important;
  animation: none !important;
}
.is-print .appear,
.is-print [data-step] {
  opacity: 1;
  transform: none;
}
.is-print .beat {
  min-height: 0;
  height: 100vh;
  overflow: hidden;
  break-after: page;
  break-inside: avoid;
}
.print-more {
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
  padding: 8vh clamp(1rem, 5vw, 4rem);
  background: var(--paper);
  color: var(--ink);
  break-after: page;
}
.print-more__inner {
  width: 100%;
  max-width: 52rem;
}
.print-more .more-dialog__title {
  margin-right: 0;
  font-size: 2.6rem;
}
.print-more .more-dialog__body {
  font-size: 1.35rem;
}