/* Det, der kun hører til WS4's fem øvelser. Sidetoppen, arket, farvevælgeren,
 * rækkerne og ordforklaringen står i assets/ovelse.css, som siderne henter
 * først.
 *
 * Farverne sættes ikke herfra. En energis farve kommer ind som --farve og
 * --blaek, sat gennem CSSOM fra assets/energier.js - et style-attribut ville
 * blive blokeret tavst af CSP'en.
 *
 * ── Ingen tilstand hviler på en farve alene ───────────────────────────────
 *
 * Det gælder hele sitet, og her er der tre steder, hvor det var nemt at bryde:
 * de tre bogstaver fra A til C, de fire farveenergier og de to spalter i
 * gruppens opsamling. A, B og C er bogstaver og ikke grøn, gul og rød - netop
 * det par, en rød/grøn-svaghed taber. Energierne har hver sin form ud over sin
 * farve. Og + og − står som tegn, ikke som to nuancer af det samme. */

/* ── Små ting, flere afsnit bruger ────────────────────────────────────── */

.smaat {
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: var(--measure);
}

.ark > .smaat { margin-top: 10px; }

/* Mærket for en farveenergi. Formen bærer lige så meget som farven: en
 * trekant, en cirkel, et kvadrat og en rude kan skelnes i gråtone og under
 * enhver af de tre farveblindheder. Samme regel som Teamhjuls gotcha 34. */
.energimaerke {
  width: 13px;
  height: 13px;
  flex: none;
  display: inline-block;
  background: var(--farve, var(--edge));
}

.energimaerke[data-energi="rod"]  { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.energimaerke[data-energi="gul"]  { border-radius: var(--r-round); }
.energimaerke[data-energi="gron"] { border-radius: 2px; }
.energimaerke[data-energi="bla"]  { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ── Find din gruppe ──────────────────────────────────────────────────────
 *
 * Tre felter på én linje, når der er plads: koden, nummeret og navnet. De tre
 * er ét spørgsmål - "hvem er du, og hvor sidder du" - og skal se ud som ét. */

.tilmeld {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  margin-top: clamp(14px, 2vw, 18px);
}

@media (min-width: 620px) {
  .tilmeld { grid-template-columns: 7.5rem 8.5rem minmax(0, 1fr); }
}

.kodefelt {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.nrfelt { font-variant-numeric: tabular-nums; }

/* ── Båndet, der siger hvilken runde der er åben ──────────────────────────
 *
 * Det står øverst og bliver stående. Otte mennesker om et bord skal kunne se
 * på hinandens skærme, at de er samme sted - og den, der kommer tilbage fra
 * toilettet, skal kunne se det uden at spørge. */

.fase {
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: clamp(16px, 2.6vw, 24px) clamp(18px, 3vw, 30px);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.fase-nr {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

.fase > h2 {
  margin-top: 4px;
  font-size: var(--step-2);
}

.fase-hjaelp {
  margin-top: 6px;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.fase-tal {
  margin-top: 10px;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* Gruppen som brikker. Den, der er færdig, er fyldt - ikke farvet. En fyldt
 * brik ved siden af en tom kan ses, hvor en grøn ved siden af en grå ikke kan. */
.holdet {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
}

.medlem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: var(--step--1);
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-round);
}

.medlem::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: var(--r-round);
  border: 1.5px solid currentColor;
}

.medlem[data-faerdig="ja"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.medlem[data-faerdig="ja"]::before { background: currentColor; }

/* Mig selv står med navns nævnelse. Uden det leder man efter sig selv i en
 * liste, hvor to hedder Emma. */
.medlem[data-mig="ja"] { font-weight: 700; }
.medlem[data-mig="ja"]::after { content: " (dig)"; font-weight: 400; }

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

.venter { text-align: left; }
.venter > p { max-width: var(--measure); color: var(--ink-soft); }

.udmeld {
  margin-top: clamp(24px, 3.4vw, 36px);
  padding-top: clamp(16px, 2.4vw, 22px);
  border-top: 1px solid var(--line);
}

/* En fejl fra serveren. Den står over det hele og ikke nede i en knap: den
 * gælder hele siden, og det, der står nedenunder, er så måske et kvarter gammelt. */
.netfejl {
  margin: clamp(14px, 2vw, 18px) 0 0;
  padding: 12px 16px;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--edge);
  border-radius: var(--r-control);
  font-size: var(--step--1);
}

/* ── Betydning for teamet ─────────────────────────────────────────────────
 *
 * Et kort pr. gruppemedlem med deres tre bidrag under navnet. Det er arkets
 * egen form: et navn og tre linjer med plads til en post-it ved siden af. */

.kort {
  padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.6vw, 24px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.kort + .kort { margin-top: 14px; }

.kort-navn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--step-1);
  font-weight: 700;
}

.kort-navn span {
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.kort-udsagn {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 14px 0 0;
  padding: 0;
}

.udsagn {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.udsagn:first-child { padding-top: 0; border-top: 0; }

.udsagn-tekst {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.udsagn-nr {
  color: var(--ink-faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.udsagn-tom { color: var(--ink-faint); font-style: italic; }

/* De tre bogstaver. Bogstavet ER knappen - det er dét, der stod på post-it'en,
 * og det er dét, der gør de tre til noget andet end en skala fra godt til
 * dårligt. Den valgte er malet massivt, som farvevælgeren i WS1. */
.abc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.abc-knap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  font: inherit;
  font-size: 14px;
  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);
}

.abc-knap b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: var(--r-round);
}

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

.abc-knap[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

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

/* Fordelingen: tre linjer med et bogstav, en søjle og et tal. Søjlen er en
 * tegning af tallet ved siden af den, så den ikke bærer noget alene. */
.fordeling {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

.fordeling-raekke {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) 2.2rem;
  gap: 10px;
  align-items: center;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.fordeling-raekke b { font-weight: 700; }

.fordeling-spor {
  height: 12px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-round);
  overflow: hidden;
}

.fordeling-fyld {
  height: 100%;
  width: calc(var(--andel, 0) * 100%);
  background: var(--accent);
  border-radius: var(--r-round);
}

.fordeling-tal { color: var(--ink-soft); text-align: right; }

/* ── Din værdi for teamet ─────────────────────────────────────────────────
 *
 * Fem kasser, tre ord i hver. Kasserne er profilens fem felter, og de står i
 * profilens rækkefølge. */

.vaerdifelter {
  display: grid;
  gap: clamp(14px, 2.2vw, 20px);
}

@media (min-width: 820px) {
  .vaerdifelter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Det femte felt fylder begge spalter, så der ikke står en tom kasse ved
   * siden af det. En tom kasse ser ud som noget, der mangler. */
  .vaerdifelt:last-child { grid-column: 1 / -1; }
}

.vaerdifelt {
  padding: clamp(14px, 2.2vw, 20px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.vaerdifelt h3 { font-size: var(--step-0); }

.vaerdifelt > p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.ordraekker {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 14px 0 0;
  padding: 0;
}

.ordraekke { display: grid; gap: 8px; }

.ordraekke input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}

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

/* Farven på et ord er lille og frivillig, så knapperne er små og uden navn -
 * navnet står i ordforklaringen nederst på siden. De er stadig knapper med en
 * form, ikke fire prikker. */
.ordfarver { display: flex; flex-wrap: wrap; gap: 6px; }

/* 34 px, som pilene i rangeringen og krydset i en række. Fire farveknapper i
 * træk på en telefon er fire mål ved siden af hinanden, og en tommelfinger
 * rammer ikke tredive pixels uden at ramme naboen lige så tit. */
.ordfarve {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font: inherit;
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  cursor: pointer;
}

.ordfarve[aria-pressed="true"] { border-color: var(--farve); background: var(--farve); }
.ordfarve[aria-pressed="true"] .energimaerke { background: var(--blaek); }
.ordfarve:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Teameffektivitet ─────────────────────────────────────────────────────
 *
 * De fire områder som fire kasser med skabelonen synlig. Punkterne er dét, der
 * skal vurderes op imod, så de står ved siden af feltet og ikke over det - man
 * skal kunne læse dem, mens man skriver. */

.omraade {
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  border-top: 4px solid var(--farve, var(--line));
}

.omraade + .omraade { margin-top: clamp(14px, 2.2vw, 20px); }

.omraade h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--step-1);
}

.omraade-baand {
  margin-top: 6px;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.omraade-krop { display: grid; gap: clamp(14px, 2.2vw, 20px); margin-top: 16px; }

@media (min-width: 820px) {
  .omraade-krop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.skabelon {
  padding: 14px 16px;
  background: var(--paper-sunk);
  border-radius: var(--r-control);
}

.skabelon p { font-size: var(--step--1); font-weight: 600; }

.skabelon ul {
  margin: 8px 0 0;
  padding-left: 1.1em;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.skabelon li + li { margin-top: 4px; }

.vurdering label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--step--1);
  font-weight: 600;
}

.vurdering textarea {
  width: 100%;
  min-height: 7.5em;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  resize: vertical;
}

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

/* Rangeringen. Fire rækker, der flyttes op og ned - ikke træk og slip alene:
 * der er fire af dem, de skal sættes i en bestemt orden, og en pil er hurtigere
 * end et træk, når man skifter mening om nummer to og tre. */
.rang {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  counter-reset: plads;
}

.rangraekke {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

.rangraekke::before {
  counter-increment: plads;
  content: counter(plads) ".";
  color: var(--ink-faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rangnavn { display: flex; align-items: center; gap: 9px; font-weight: 600; }

.rangpile { display: flex; gap: 4px; }

.rangpil {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 15px;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  cursor: pointer;
}

.rangpil:hover:not([disabled]) { color: var(--ink); border-color: var(--ink-faint); }
.rangpil[disabled] { opacity: .35; cursor: default; }
.rangpil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Gruppens rangeringer: én række pr. område, én brik pr. gruppemedlem på den
 * plads, de satte det. Ligger brikkerne samlet, er gruppen enig - den samme
 * aflæsning som forventningsafstemningens overblik. */
.enighed {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.enighed-raekke {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.enighed-navn { display: flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 600; }

.enighed-pladser {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.enighed-plads {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 4px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.enighed-plads[data-antal="0"] { color: var(--ink-faint); }
.enighed-plads b { font-size: 15px; color: var(--ink); }

.enighed-hoved {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: 12px;
}

.enighed-hoved > div:last-child {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  font-size: 11px;
  text-align: center;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Arkets nederste halvdel: fire områder, to spalter. */
.gitter { display: grid; gap: clamp(14px, 2.2vw, 20px); }

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

.gitterfelt {
  padding: clamp(14px, 2.2vw, 18px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

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

/* + og − står som tegn i en kasse, ikke som to farver. */
.fortegn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  font-weight: 700;
  border: 1.5px solid var(--edge);
  border-radius: var(--r-control);
}

.gitterfelt[data-side="plus"] .fortegn { border-style: solid; }
.gitterfelt[data-side="minus"] .fortegn { border-style: dashed; }

/* ── Tavlen: gruppens fælles lister ───────────────────────────────────────
 *
 * En linje har en ejer, og kun ejeren kan tage den væk igen. Otte mennesker i
 * ét tekstfelt taber hinandens sætninger; otte mennesker med hver sine linjer
 * gør ikke. */

.tavle {
  list-style: none;
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
}

.tavle-linje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 9px 11px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font-size: var(--step--1);
}

.tavle-linje[data-min="ja"] { border-color: var(--line-strong); }

.tavle-af {
  display: block;
  margin-top: 3px;
  color: var(--ink-faint);
  font-size: 12px;
}

.tavle-vaek {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 15px;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-control);
  cursor: pointer;
}

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

.tavle-tom { color: var(--ink-faint); font-size: var(--step--1); margin-top: 12px; }

.tavle-skriv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.tavle-skriv input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}

.tavle-skriv input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── G-Wave ───────────────────────────────────────────────────────────────
 *
 * Fem trin med hvert sit bogstav. Bogstaverne staver værktøjets navn, og det
 * er dét, der gør det til noget, gruppen kan bruge igen uden den her side. */

.gwave { display: grid; gap: clamp(14px, 2.2vw, 20px); }

.trin {
  padding: clamp(14px, 2.2vw, 20px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.trin-hoved {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.trin-bogstav {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: var(--r-control);
}

.trin h3 { font-size: var(--step-1); }

.trin-engelsk {
  color: var(--ink-faint);
  font-size: var(--step--1);
  font-weight: 400;
}

.trin-hjaelp {
  margin-top: 10px;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* Målet er trin ét og står derfor fremhævet, når gruppen har valgt det. Resten
 * af G-Waven hænger på det. */
.maalet {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  font-size: var(--step-0);
}

.maalet:empty { display: none; }

/* ── Din rejse fortsætter ─────────────────────────────────────────────── */

.spoergsmaal { display: grid; gap: clamp(16px, 2.4vw, 22px); }

.spoergsmaal label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--step-0);
  font-weight: 700;
}

.spoergsmaal .hjaelp {
  margin-bottom: 9px;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.spoergsmaal textarea {
  width: 100%;
  min-height: 6em;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  resize: vertical;
}

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

/* Den enkeltes egne svar forlader aldrig gruppen. Det skal stå på siden, ikke
 * kun i en GDPR-note: det ændrer, hvad folk tør skrive. */
.privat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.privat::before {
  content: "◆";
  color: var(--accent);
  font-size: 11px;
}

/* ── Underviserens styreside ─────────────────────────────────────────────
 *
 * Én tabel pr. øvelse, én række pr. gruppe. Underviseren står op foran et
 * lokale og skal kunne se på en armslængdes afstand, hvem der mangler. */

.styring { display: grid; gap: clamp(20px, 3vw, 30px); }

.oevelsesblok {
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.oevelsesblok > h3 { font-size: var(--step-1); }

.oevelsesblok > p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.alle-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

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

.grupperaekke {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

@media (min-width: 760px) {
  .grupperaekke { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; }
}

.gruppenavn { font-weight: 700; font-variant-numeric: tabular-nums; }

.gruppefase {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
}

.ingen-grupper { color: var(--ink-faint); font-size: var(--step--1); margin-top: 14px; }

/* Nøglen og koden er det, underviseren skal skrive af og gemme. De står stort
 * og med mellemrum, fordi de bliver læst højt og skrevet på en tavle. */
.kodekasse {
  display: grid;
  gap: 14px;
  margin-top: clamp(16px, 2.4vw, 22px);
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.kodekasse dt {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
}

.kodekasse dd {
  margin: 4px 0 0;
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.kodekasse dd.noegle {
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: .04em;
}

.farlig {
  margin-top: clamp(24px, 3.4vw, 36px);
  padding-top: clamp(16px, 2.4vw, 22px);
  border-top: 1px solid var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .abc-knap, .ordfarve, .medlem { transition: none; }
}

/* ── Noten om data ────────────────────────────────────────────────────────
 *
 * ws4/README.md tegnet som HTML. Den er også repoets readme for WS4, så den
 * er skrevet som markdown og ikke som en side - og så skal markdown'ens egne
 * elementer have et udtryk her, fordi de ikke har klasser at hænge på. */

.note > h2 { margin-top: clamp(22px, 3vw, 30px); font-size: var(--step-1); }
.note > h2:first-child { margin-top: 0; }
.note > h3 { margin-top: clamp(16px, 2.4vw, 22px); font-size: var(--step-0); }
.note > p { margin-top: 10px; max-width: var(--measure); }
.note > ul, .note > ol { margin: 10px 0 0 1.2em; max-width: var(--measure); }
.note li + li { margin-top: 5px; }
.note strong { font-weight: 700; }

.note table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.note th, .note td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--line);
}

.note th { background: var(--paper-sunk); font-weight: 700; }
.note code {
  padding: 1px 5px;
  background: var(--paper-sunk);
  border-radius: 4px;
  font-size: .92em;
}