/* Fælles udtryk for de otte øvelser under WS1. Ét stylesheet og ikke otte:
 * øvelserne er den samme dag, og de skal ligne hinanden. Det, der kun hører
 * til én af dem, står i sit eget afsnit hernede.
 *
 * Farverne sættes ikke herfra. En energis farve kommer ind som --farve og
 * --blaek, sat gennem CSSOM fra energier.js - et style-attribut ville blive
 * blokeret tavst af CSP'en. */

/* ── Sidetoppen ───────────────────────────────────────────────────────── */

.page-head { padding: clamp(26px, 3.4vw, 44px) 0 0; }
.page-head h1 { font-size: clamp(30px, 4vw + 10px, 48px); }

.page-head .lede {
  margin-top: clamp(12px, 1.4vw, 16px);
  max-width: 58ch;
  font-size: var(--step-1);
}

/* ── Ark ──────────────────────────────────────────────────────────────────
 *
 * Det, der arbejdes i, ligger på et ark. Resten af siden er vejledning. */

.ark {
  margin: clamp(20px, 3vw, 30px) 0 clamp(14px, 2vw, 20px);
  padding: clamp(18px, 3vw, 30px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.ark + .ark { margin-top: clamp(16px, 2.4vw, 24px); }

.ark > h2 {
  font-size: var(--step-2);
  margin-bottom: 6px;
}

.ark > h2 + p {
  max-width: var(--measure);
  margin-bottom: clamp(16px, 2.4vw, 22px);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* En besked, der hører til arbejdet og ikke til vejledningen: hvor langt man
 * er, hvad der mangler, hvad der lige skete. */
.melding {
  margin: clamp(14px, 2vw, 18px) 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.melding:empty { margin: 0; }

/* ── Farvevælgeren ────────────────────────────────────────────────────────
 *
 * Fire knapper, én pr. energi. Den valgte er malet massivt med hvid tekst -
 * ikke en farvet kant ved siden af tre tomme. En farvet streg ved siden af en
 * tom streg er ikke til at skelne for alle, og farven her bærer i forvejen
 * ikke andet end det, der også står som navn. */

.farvevalg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.farve {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 9px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease);
}

.farve::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: var(--r-round);
  border: 2px solid var(--farve, var(--edge));
  background: transparent;
}

.farve:hover { border-color: var(--ink-faint); color: var(--ink); }

.farve[aria-pressed="true"] {
  background: var(--farve);
  border-color: var(--farve);
  color: var(--blaek);
}

/* Den valgte har prikken fyldt helt ud. Fyld og ikke kulør er forskellen. */
.farve[aria-pressed="true"]::before {
  background: var(--blaek);
  border-color: var(--blaek);
}

.farve:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Hvem er jeg? ─────────────────────────────────────────────────────── */

.saetninger {
  list-style: none;
  display: grid;
  gap: clamp(12px, 1.6vw, 16px);
  margin: 0;
  padding: 0;
}

/* Nummeret, begyndelsen og feltet på én linje; det, der hører under sætningen,
 * på den næste - lige under feltet og ikke under nummeret. */
.saetning {
  display: grid;
  grid-template-columns: 1.8rem auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: start;
}

.saetning-nr,
.saetning-jeg {
  padding-top: 11px;
  color: var(--ink-faint);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* "Jeg er" er sætningens egen begyndelse og ikke en etiket ved siden af. Den
 * står i tekstens farve og størrelse, så linjen kan læses i ét stykke. */
.saetning-jeg {
  padding-top: 10px;
  color: var(--ink-soft);
  font-size: var(--step-0);
  font-weight: 400;
  white-space: nowrap;
  cursor: text;
}

/* Et felt, der skrives i. Uden font: inherit tegner browseren sin egen
 * skrivemaskineskrift, og sætningerne kommer til at se ud som kode. */
.saetning textarea,
.raekke textarea {
  width: 100%;
  min-height: 46px;
  resize: vertical;
  font: inherit;
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  padding: 10px 13px;
  transition: border-color .2s var(--ease);
}

.saetning textarea { grid-column: 3; }

.saetning textarea:hover,
.raekke textarea:hover { border-color: var(--ink-faint); }

.saetning textarea:focus-visible,
.raekke textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.saetning-under {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/* Skyggesiden vises som et fyldt mærke og ikke som en farve. */
.skygge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--r-round);
  cursor: pointer;
}

.skygge::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.skygge[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper-sunk);
}

.skygge[aria-pressed="true"]::before {
  background: currentColor;
  box-shadow: inset 0 0 0 2px var(--paper-sunk);
}

.skygge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.saetning .farvevalg { gap: 6px; }
.saetning .farve { padding: 5px 11px 5px 8px; font-size: 13px; }

/* ── Ordene ───────────────────────────────────────────────────────────────
 *
 * Seksogfemti ord i slidets egen rækkefølge. Et valgt ord er malet massivt,
 * ikke sat i kursiv eller givet en kant: forskellen skal kunne ses på afstand
 * og uden at kunne se farver. */

.ordsky {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ordknap {
  padding: 8px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease);
}

.ordknap:hover { border-color: var(--edge); color: var(--ink); }

.ordknap[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

/* Er ordet farvelagt, overtager energiens farve fyldet. */
.ordknap[data-energi] {
  background: var(--farve);
  border-color: var(--farve);
  color: var(--blaek);
}

.ordknap[disabled] { opacity: .4; cursor: default; }
.ordknap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* `display` fra en klasse slår browserens egen regel for `hidden` - uden de to
 * her ville listen og fordelingen blive stående, når JavaScript skjuler dem. */
.valgte[hidden], .fordeling[hidden] { display: none; }

.valgte {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.valgt {
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  background: var(--ink);
  border-radius: var(--r-round);
}

/* ── Fordelingen ──────────────────────────────────────────────────────────
 *
 * Fire kasser på Insights-cirklens pladser - blå og rød øverst, grøn og gul
 * nederst - og søjlediagrammet ved siden af. Kassen med ord i er malet
 * massivt; den tomme er den samme kasse tegnet som en kant. Det er fyldet og
 * ikke kuløren, der skiller dem, og antallet står skrevet begge steder. */

.fordeling {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: clamp(14px, 2.4vw, 24px);
  margin-top: clamp(18px, 2.6vw, 24px);
  padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid var(--line);
}

.kvadranter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.kvadrant {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 12px 14px;
  border-radius: var(--r-control);
  background: var(--farve);
  color: var(--blaek);
}

.kvadrant[data-tom] {
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 2px var(--farve);
}

.kvadrant-navn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
}

.kvadrant-tal { font-variant-numeric: tabular-nums; opacity: .8; }

.kvadrant-ord {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin: 0;
  padding: 0;
  font-size: var(--step--1);
}

.kvadrant-ord li::after { content: ","; }
.kvadrant-ord li:last-child::after { content: none; }

.kvadrant-tom { margin: 0; font-size: var(--step--1); }

/* Søjlerne står i deres egen orden - blå, grøn, gul, rød - og måles mod den
 * højeste. Uden et loft på ordene kan der være tyve, og fire søjler på en
 * femtedel hver ville ikke vise noget. Tallet står over hver søjle. */
.soejler {
  display: grid;
  grid-template-columns: repeat(4, 2.25rem);
  grid-template-rows: auto minmax(110px, 1fr) auto;
  gap: 6px 10px;
  font-size: var(--step--1);
}

.soejle {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  gap: 6px;
  text-align: center;
}

.soejle-tal { font-weight: 600; font-variant-numeric: tabular-nums; }

.soejle-spor {
  display: flex;
  align-items: flex-end;
  border-radius: var(--r-control);
  background: var(--paper-sunk);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  overflow: hidden;
}

.soejle-stang {
  width: 100%;
  height: var(--del, 0%);
  border-radius: var(--r-control);
  background: var(--farve);
}

.soejle-navn { color: var(--ink-soft); }
.soejle[data-tom] .soejle-tal { color: var(--ink-soft); }

/* Er der ikke plads ved siden af, lægger søjlerne sig under kasserne. */
@media (max-width: 720px) {
  .fordeling { grid-template-columns: minmax(0, 1fr); }
  .soejler { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Byggeklodserne ───────────────────────────────────────────────────────
 *
 * Fire klodser i en stak med en skillelinje i. Klodsen trækkes på plads, og
 * `touch-action: none` gør, at en finger på en klods trækker den i stedet for
 * at rulle siden — stakken fylder under en tredjedel af en telefonskærm, så
 * der er rigeligt at rulle i udenom.
 *
 * Det, der ligger over midten, ses på pladsen i stakken og ikke på farven: de
 * klodser, der ligger over linjen, er de klodser, der ligger over linjen. */

.stak {
  list-style: none;
  display: grid;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.klods {
  width: min(280px, 72vw);
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--farve);
  color: var(--blaek);
  font-size: var(--step-0);
  font-weight: 700;
  cursor: grab;
  touch-action: none;
  user-select: none;
  /* Knopperne. En stribe foroven, så klodsen ligner en klods og ikke en
   * farvet bjælke. */
  box-shadow:
    0 -7px 0 -3px var(--farve),
    inset 0 -3px 0 rgba(0, 0, 0, .18),
    inset 0 2px 0 rgba(255, 255, 255, .16);
  transition: box-shadow .2s var(--ease);
}

.klods-navn { padding: 0 10px; text-align: center; }

.klods:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Den, der bliver trukket, løftes op over de andre og følger markøren.
 * Flytningen sker med element.style.transform — CSSOM, som CSP'en tillader;
 * et style-attribut ville blive blokeret tavst. */
.klods.traekker {
  cursor: grabbing;
  z-index: 2;
  box-shadow:
    0 -7px 0 -3px var(--farve),
    inset 0 -3px 0 rgba(0, 0, 0, .18),
    inset 0 2px 0 rgba(255, 255, 255, .16),
    var(--shadow-lift);
}

/* Mens der trækkes, skal de andre glide på plads. Den, der bliver trukket,
 * må ikke — den ligger allerede under fingeren. */
.stak[data-traekker] .klods:not(.traekker) { transition: transform .18s var(--ease); }

/* ── Skillelinjen ─────────────────────────────────────────────────────────
 *
 * Mellemrummet er markeringen: det, der ligger over linjen, ligger over
 * midten. Linjen trækkes som en klods og bærer sit eget navn, så den kan ses
 * som en linje og ikke som et hul, der er blevet til ved et uheld. */

.skillelinje {
  width: min(280px, 72vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.skillelinje-streg {
  height: 0;
  border-top: 2px dashed var(--edge);
}

.skillelinje-greb {
  padding: 3px 11px;
  border-radius: var(--r-round);
  border: 1px dashed var(--edge);
  background: var(--paper);
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.skillelinje:hover .skillelinje-streg,
.skillelinje:hover .skillelinje-greb { border-color: var(--ink-faint); color: var(--ink-soft); }

.skillelinje.traekker { cursor: grabbing; }

.skillelinje.traekker .skillelinje-streg,
.skillelinje.traekker .skillelinje-greb {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.skillelinje:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Skyderne ─────────────────────────────────────────────────────────────
 *
 * Ni par ord med en skyder imellem. Polerne står over skyderen på en smal
 * skærm og i hver sin ende på en bred. */

.skydere {
  list-style: none;
  display: grid;
  gap: clamp(18px, 2.6vw, 26px);
  margin: 0;
  padding: 0;
}

.skyder {
  display: grid;
  gap: 6px;
}

.skyder-ord {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.skyder-ord b { font-weight: 600; color: var(--ink); }

.skyder input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

/* Så længe skyderen ikke er rørt, står den midt og dæmpet: den siger ikke
 * "midt imellem", den siger "ikke svaret endnu". */
.skyder[data-roert="nej"] input[type="range"] { opacity: .5; }

.skyder-svar {
  font-size: 13px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  min-height: 1.3em;
}

/* Den samlede vægt. En bjælke med en markør, hvor snittet faldt. */
.vaegt { display: grid; gap: 10px; }

.vaegt-poler {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--step--1);
  font-weight: 600;
}

.vaegt-bar {
  position: relative;
  height: 14px;
  border-radius: var(--r-round);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
}

.vaegt-midt {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
}

.vaegt-maerke {
  position: absolute;
  top: -5px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: var(--r-round);
  background: var(--ink);
  border: 3px solid var(--paper);
  transition: left .3s var(--ease);
}

.vaegt-dom {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step-0);
}

.vaegt-dom b { color: var(--ink); }

/* ── Rækker af tekst ──────────────────────────────────────────────────────
 *
 * Facevaliditeten og betydningen for teamet skriver begge en liste. Samme
 * række: et felt og en knap, der tager rækken væk igen. */

.raekker {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.raekke {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.raekke-nr {
  padding-top: 11px;
  color: var(--ink-faint);
  font-size: var(--step--1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.raekke-vaek {
  margin-top: 4px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 17px;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  cursor: pointer;
}

.raekke-vaek:hover { color: var(--ink); border-color: var(--line); }
.raekke-vaek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Regnestykket i facevaliditeten ───────────────────────────────────── */

.regnestykke {
  display: grid;
  gap: 6px;
  margin-top: clamp(18px, 2.6vw, 24px);
  padding-top: clamp(18px, 2.6vw, 24px);
  border-top: 1px solid var(--line);
}

.regnestykke p { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.procent {
  font-size: clamp(38px, 7vw, 56px);
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.procent-dom { font-size: var(--step-1); font-weight: 600; }
.procent-sagt { max-width: var(--measure); color: var(--ink-soft); }

/* Dommen siges med ord og ikke med en farve. Kanten skifter kun form. */
.dom {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-control);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
}

.dom[data-styrke="lav"] { border-style: dashed; }

/* ── Festen ───────────────────────────────────────────────────────────────
 *
 * Et mindmap, der skrives direkte i: midten er festen, og grenene gror udad i
 * fire retninger. En liste ville sige det samme, men ikke se ud som det, der
 * blev tegnet på flipoveren.
 *
 * Boblerne er HTML og ligger absolut placeret oven på et SVG, der kun tegner
 * stregerne. Målene sættes fra JavaScript gennem CSSOM og ikke som et
 * style-attribut — CSP'en blokerer det sidste tavst. */

.mindmap-plads {
  overflow-x: auto;
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  padding-bottom: 6px;
}

/* Bredden og højden kommer fra kortets eget indhold og sættes af mindmap.js.
 * Kortet må gerne være bredere end en telefon og rulle i sin egen kasse:
 * presses det ned i 340, bliver boblerne for små til at kunne læses op fra,
 * og det er dét, kortet skal bruges til. */
.mindmap { position: relative; }

.mindmap-streger,
.mindmap-lag {
  position: absolute;
  inset: 0;
}

.mindmap-streger { width: 100%; height: 100%; }

/* Midten. En oval og ikke en firkant, fordi den er festen og ikke et punkt. */
.mindmap-midte {
  position: absolute;
  display: grid;
  place-items: center;
  width: 156px;
  height: 88px;
  padding: 0 14px;
  border-radius: 50%;
  background: var(--farve);
  color: var(--blaek);
  font-size: var(--step--1);
  font-weight: 700;
  text-align: center;
}

/* Plusset. Det samme tegn på ringen om midten og på boblens to kanter — det
 * gør det samme sted: der kommer noget nyt dér, hvor det står. */
.mindmap-plus {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--farve);
  background: var(--paper);
  border: 1.5px solid var(--farve);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.mindmap-plus:hover:not([disabled]) { background: var(--farve); color: var(--blaek); }
.mindmap-plus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mindmap-plus[disabled] { opacity: .25; cursor: default; }

.mindmap-plus-tom { position: absolute; }

/* Boblen bærer selv ét plus: det inderste, der skyder en boble ind foran den.
 * Gror grenen op eller ned, sidder det forneden eller foroven i stedet — det
 * inderste vender altid ind mod festen, og det er grenens retning og ikke
 * skærmens, der afgør hvilken kant det er.
 *
 * Det andet plus — læg en boble mere på — ligger for sig, fordi det skal stå
 * for enden af de børn, boblen allerede har, og ikke i springet mellem de to
 * niveauer, hvor barnets eget plus står. */
.boble {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 160px;
}

.boble[data-retning="op"],
.boble[data-retning="ned"] {
  flex-direction: column;
  width: 132px;
}

.mindmap-plus-barn { position: absolute; }

.boble-krop {
  position: relative;
  flex: none;
  width: 132px;
  padding: 7px 19px 7px 10px;
  border-radius: 10px;
  background: var(--farve);
  color: var(--blaek);
}

.boble-krop textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 0;
  resize: none;
  overflow: hidden;
}

.boble-krop textarea:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* Krydset ligger i hjørnet af kroppen og tager ikke plads fra teksten —
 * boblen er smal, og en knap i rækken ville koste to tegn på hver linje. */
.boble-vaek {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--r-round);
  opacity: .55;
  cursor: pointer;
}

.boble-vaek:hover { opacity: 1; background: rgb(255 255 255 / .25); }
.boble-vaek:focus-visible { outline: 2px solid var(--paper); outline-offset: 1px; opacity: 1; }

.hold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: var(--r-round);
  background: var(--farve);
  color: var(--blaek);
  font-weight: 700;
}

.hold::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--r-round);
  background: var(--blaek);
}

/* ── Boardet ──────────────────────────────────────────────────────────── */

.board {
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
  margin: clamp(20px, 3vw, 30px) 0;
}

@media (min-width: 760px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.board-hold {
  display: grid;
  align-content: start;
  padding: clamp(16px, 2.4vw, 22px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--farve);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.board-hold h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--step-1);
}

.board-hold h3 span { color: var(--ink-faint); font-size: var(--step--1); font-weight: 400; }

.board-hold ul { margin: 12px 0 0; padding-left: 1.2em; }
.board-hold li { margin-bottom: 6px; color: var(--ink-soft); }
.board-hold li ul { margin: 6px 0 0; }
.board-hold li li { color: var(--ink-faint); font-size: var(--step--1); }

.board-hold[data-tom] { border-top-color: var(--line-strong); box-shadow: none; }
.board-hold[data-tom] p { margin-top: 10px; color: var(--ink-faint); font-size: var(--step--1); }

/* ── Ordforklaringen ──────────────────────────────────────────────────────
 *
 * De fire energier, som de hedder hele dagen. Står nederst på de sider, hvor
 * en farve skal vælges. */

.forklaring {
  display: grid;
  gap: 12px;
  margin: clamp(24px, 3.4vw, 36px) 0 0;
  padding-top: clamp(20px, 2.8vw, 28px);
  border-top: 1px solid var(--line);
}

@media (min-width: 720px) { .forklaring { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.forklaring-en { display: grid; gap: 5px; align-content: start; }

.forklaring-en b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--step-0);
}

.forklaring-en b::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 3px;
  background: var(--farve);
}

.forklaring-en span { color: var(--ink-soft); font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
  .klods, .stak[data-traekker] .klods, .vaegt-maerke { transition: none; }
}