/* Fælles udtryk for hele sitet. Øvelsessiderne lægger deres eget ovenpå.
 *
 * Udtrykket er arvet fra ex.samle.dk og skal blive ved med at ligne det: samme
 * rytme, samme klassenavne, samme løfte om at intet hentes udefra. Accenten er
 * en anden, fordi sitet er et andet.
 *
 * Alt hentes herfra: ingen skrifttyper, biblioteker eller ikoner udefra, fordi
 * CSP'en i .htaccess kun tillader 'self'. Derfor er skriften systemets egen, og
 * derfor er der ingen inline style-attributter noget sted: de ville blive
 * blokeret. Rytme og forsinkelser sættes i stedet med :nth-child() her.
 */

/* ── Tokens ───────────────────────────────────────────────────────────────
 *
 * Farver: én accentfarve i hele grænsefladen, #14425c, den samme som i
 * favicon'et. Insights-hjulets syv farver er indholdets farver, ikke
 * grænsefladens: de optræder udelukkende som temaets identitet på skinnen ved
 * Insights og inde i selve arket. En knap bliver aldrig orange.
 *
 * Hjørner: tre trin med en regel. Flader 16px, betjening 10px, og helt runde
 * på piller og skinner, alt under 8px i bredden.
 */

:root {
  color-scheme: light dark;

  --ink: #131a21;
  --ink-soft: #55636e;
  --ink-faint: #5e6b74;
  --paper: #ffffff;
  --paper-sunk: #f4f7f9;
  --bg: #eceff2;
  --line: #d8dfe5;
  --line-strong: #c3ccd4;
  /* Kanten om noget, man kan betjene. Skal have 3:1 mod både --bg og --paper,
   * ellers kan man ikke se, hvor et felt eller en spøgelsesknap holder op. */
  --edge: #7d8a96;
  --accent: #3c3a7d;
  --accent-hover: #514fa3;
  --accent-soft: #ecebf6;
  --on-accent: #ffffff;

  /* Temaernes skinner. Ren identitet — farven siger aldrig noget, der ikke
   * også står skrevet. Ingen af dem skelnes ved rød mod grøn. */
  --rail-hjernen: #a5433b;
  --rail-kognition: #3f5bbf;
  --rail-socialpsykologi: #b0741a;
  --rail-metode: #1a6a6a;
  --rail-udvikling: #7c3f70;

  --shadow: 0 1px 2px rgba(19, 26, 33, .05), 0 10px 28px rgba(19, 26, 33, .07);
  --shadow-lift: 0 2px 6px rgba(19, 26, 33, .07), 0 18px 44px rgba(19, 26, 33, .12);

  --r-surface: 16px;
  --r-control: 10px;
  --r-round: 999px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --step--1: 14px;
  --step-0: 16.5px;
  --step-1: clamp(17px, .4vw + 15.7px, 19px);
  --step-2: clamp(23px, 1.7vw + 17px, 30px);
  --step-3: clamp(30px, 5.4vw + 12px, 62px);

  --measure: 62ch;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --z-masthead: 10;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8edf1;
    --ink-soft: #a2b0bb;
    --ink-faint: #85939d;
    --paper: #191f25;
    --paper-sunk: #141a1f;
    --bg: #11161a;
    --line: #29323a;
    --line-strong: #3c4750;
    --edge: #657179;
    --accent: #a6a2ee;
    --accent-hover: #bfbcf5;
    --accent-soft: #22204a;
    --on-accent: #0d0c1a;

    --rail-hjernen: #e08a7f;
    --rail-kognition: #7f93e0;
    --rail-socialpsykologi: #d9a44f;
    --rail-metode: #4f9e9e;
    --rail-udvikling: #b57aa8;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .45);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 44px rgba(0, 0, 0, .55);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--step-0)/1.6 var(--font);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.018em;
  /* Danske sammensatte ord er lange. Uden det her løber
   * "Forventningsafstemning" ud over kanten på en telefon. */
  overflow-wrap: break-word;
  hyphens: auto;
}
p { margin: 0; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; }

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

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.wrap.wide { max-width: 1180px; }

/* ── Sidehoved ────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-masthead);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.brand {
  font-weight: 650;
  letter-spacing: -.018em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover { color: var(--ink); }
.brand span { color: var(--ink-faint); font-weight: 400; }

.crumbs {
  margin-left: auto;
  font-size: var(--step--1);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--ink-faint); padding: 0 7px; }

/* På en telefon er der ikke plads til både mærke og brødkrumme på én linje.
 * Krummerne får deres egen linje i stedet for at blive klippet af. */
@media (max-width: 640px) {
  .masthead .wrap {
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 0;
  }

  .brand span { display: none; }
  .crumbs { margin-left: 0; width: 100%; }
}

/* ── Sidetop ──────────────────────────────────────────────────────────────
 *
 * Teksten står til venstre, billedet til højre og en anelse lavere. Under
 * 900px falder de i én kolonne med teksten først.
 */

.hero {
  display: grid;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
  padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 52px);
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.15fr .85fr; }
  .hero .art { max-width: 400px; justify-self: end; transform: translateY(6px); }
}

.page-head { padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px); }
.hero .page-head { padding: 0; }

.page-head h1 { font-size: var(--step-3); }

.page-head .lede {
  margin-top: clamp(14px, 1.6vw, 20px);
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

.page-head .lede + .lede { margin-top: 14px; }

/* Billedet ligger på et ark, fordi hjulet selv har hvid bund. Så er det en
 * gengivelse af et ark papir i begge temaer i stedet for en hvid firkant. */
.art {
  margin: 0;
  padding: clamp(12px, 1.4vw, 16px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.art img { display: block; }

.art figcaption {
  margin-top: 11px;
  padding: 0 4px;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

/* ── Indeks over temaer og øvelser ────────────────────────────────────────
 *
 * Ikke kort. En række pr. ting, adskilt af én streg foroven, med temaets
 * farveskinne yderst til venstre. Insights har hjulets spektrum, et tomt tema
 * har den grå streg. Forskellen på rækkerne følger af, hvad der ligger i dem.
 */

.index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  padding: clamp(24px, 3.6vw, 38px) 0;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

@media (min-width: 720px) {
  .entry { grid-template-columns: 4px minmax(0, 1fr) auto; align-items: start; }
}

.rail {
  align-self: stretch;
  border-radius: var(--r-round);
  background: var(--line-strong);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}

.entry[data-rail="hjernen"] .rail { background: var(--rail-hjernen); }
.entry[data-rail="kognition"] .rail { background: var(--rail-kognition); }
.entry[data-rail="socialpsykologi"] .rail { background: var(--rail-socialpsykologi); }
.entry[data-rail="metode"] .rail { background: var(--rail-metode); }
.entry[data-rail="udvikling"] .rail { background: var(--rail-udvikling); }

.entry-main { min-width: 0; }

.entry-title {
  display: block;
  font-size: clamp(21px, 1.1vw + 17.5px, 26px);
  transition: transform .3s var(--ease), color .2s var(--ease);
}

.entry-body {
  display: block;
  margin-top: 10px;
  max-width: 58ch;
  color: var(--ink-soft);
}

.entry-meta {
  display: block;
  margin-top: 12px;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

@media (min-width: 720px) {
  .entry-meta {
    margin-top: 8px;
    max-width: 20ch;
    text-align: right;
    text-wrap: balance;
  }
}

a.entry:hover .entry-title { transform: translateX(7px); color: var(--accent); }
a.entry:hover .rail { transform: scaleX(2.2); }
a.entry:focus-visible { outline-offset: 6px; }

.entry.is-quiet .entry-title { color: var(--ink-soft); }

/* ── Tom tilstand ─────────────────────────────────────────────────────────
 *
 * Et tema uden øvelser skal sige hvad der mangler og pege videre, ikke stille
 * et stiplet kort frem og lade det være.
 */

.empty {
  padding: clamp(28px, 4vw, 44px);
  background: var(--paper-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-surface);
}

.empty h2 { font-size: var(--step-2); }
.empty p { margin-top: 10px; max-width: 52ch; color: var(--ink-soft); }
.empty .empty-link { margin-top: 18px; display: block; font-weight: 600; }

/* ── Afsnit med brødtekst ─────────────────────────────────────────────── */

.claim {
  padding: clamp(48px, 7vw, 84px) 0;
  border-top: 1px solid var(--line);
}

.claim h2 { font-size: var(--step-2); max-width: 20ch; }

.claim > p {
  margin-top: 14px;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

.facts {
  display: grid;
  gap: clamp(24px, 3.5vw, 40px);
  margin-top: clamp(30px, 4.5vw, 52px);
}

@media (min-width: 820px) {
  .facts { grid-template-columns: 1.45fr 1fr 1fr; }
}

.fact h3 { font-size: 17px; }
.fact p { margin-top: 7px; color: var(--ink-soft); font-size: 15px; }
.fact:first-child h3 { font-size: var(--step-1); }

/* ── Bund ─────────────────────────────────────────────────────────────── */

/* ── Knapper ──────────────────────────────────────────────────────────────
 *
 * Én definition for hele sitet. Den stod før i exercise.css, men kursussiderne
 * har også en knap, og to steder ville blive to udseender. */

.btn {
  padding: 11px 20px;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--r-control);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .12s var(--ease);
}

.btn:active { transform: scale(.98); }

.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }

.btn.ghost { background: transparent; border-color: var(--edge); color: var(--ink-soft); }
.btn.ghost:hover { border-color: var(--ink-faint); color: var(--ink); }

.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.btn[disabled]:hover { background: var(--accent); border-color: var(--edge); }
.btn.ghost[disabled]:hover { background: transparent; color: var(--ink-soft); }
.btn.small { padding: 6px 13px; font-size: 13px; }

.foot {
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--line);
  padding: 26px 0 44px;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

/* ── Bevægelse ────────────────────────────────────────────────────────────
 *
 * Én ting, og den skal sige noget: siden falder på plads i den rækkefølge, den
 * skal læses i. Sidetop, billede, og så rækkerne, når modulet har tegnet dem.
 * Resten af bevægelsen er svar på noget, brugeren gør. Skinnen der vokser og
 * titlen der skubber sig, når man peger på en række, og knappen der giver efter
 * under et klik. Ingen løkker, ingen parallax, intet der kører af sig selv.
 */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s var(--ease) both; }
  .rise:nth-child(2) { animation-delay: 90ms; }
  .rise:nth-child(3) { animation-delay: 180ms; }
  .rise:nth-child(4) { animation-delay: 270ms; }
  .hero .art.rise { animation-delay: 140ms; }
  /* Indekset tegnes af et modul, så rækkerne kommer efter sidetoppen. */
  .index .rise { animation-delay: 220ms; }
  .index .rise:nth-child(2) { animation-delay: 310ms; }
  .index .rise:nth-child(3) { animation-delay: 400ms; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Filtrering ───────────────────────────────────────────────────────────
 *
 * Er der mange øvelser i et tema, skal listen kunne skæres.
 * Knapperne er rigtige <button>, ikke felter der ser ud som knapper: valget
 * skal kunne tages med tastaturet og siges højt af en skærmlæser.
 *
 * Et fravalgt filter vises ved kant og tekstvægt, ikke ved farve alene.
 */

.filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 3vw, 26px) 0;
  border-top: 1px solid var(--line);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
}

.filter-set {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.filter-label {
  margin-right: 2px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.chip {
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--edge);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}

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

/* Et valgt filter er fyldt, ikke bare farvet: forskellen skal kunne ses uden
 * at kunne skelne farverne. */
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 650;
}

/* Mekanikkerne er koder og ikke ord, så de må være smalle. */
.is-codes .chip {
  min-width: 44px;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.filter-count {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .filter-count { margin-left: 0; }
}

/* ── Mærkater på en øvelse ────────────────────────────────────────────────
 *
 * Niveauet står som bogstav, fordi det er sådan, det hedder i læreplanen.
 * Øvelserne har ikke numre: de tages i den rækkefølge, der passer timen.
 */

.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .entry-meta .badges { justify-content: flex-end; }
}

.badge {
  padding: 2px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-round);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.badge.is-niveau {
  border-color: var(--edge);
  color: var(--ink);
  letter-spacing: .02em;
}

/* En skabelon er en tilstand og ikke en egenskab. Stiplet kant, så den ikke
 * læses som endnu et mærke om, hvad øvelsen er. */
.badge.is-draft {
  border-style: dashed;
  font-weight: 500;
  color: var(--ink-faint);
}

/* Mekanikken er en oplysning om, hvordan øvelsen virker — ikke et valg, man
 * træffer. Derfor tekst frem for pille. */
.mek {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--ink-faint);
  white-space: nowrap;
  cursor: help;
}

/* ── Brødtekst ────────────────────────────────────────────────────────────
 *
 * Til »Hvorfor skærm« (laerer/hvorfor/), der er et stykke argumentation og ikke en liste. Egen
 * spaltebredde, fordi den skal læses fra ende til anden.
 */

.prose { padding-bottom: clamp(40px, 6vw, 72px); }

.prose section {
  padding: clamp(34px, 5vw, 56px) 0 0;
}

.prose h2 {
  font-size: var(--step-2);
  max-width: 24ch;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.prose h3 { font-size: 17px; }

.prose p {
  margin-top: 14px;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.prose p.lead { color: var(--ink); font-size: var(--step-1); }

.prose .statement {
  margin: 24px 0 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--accent);
  max-width: 46ch;
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 500;
}

/* De fem mekanikker. Én tabel-agtig liste, ikke fem kort — de hører sammen
 * og skal læses mod hinanden. */

.mechanics {
  display: grid;
  gap: 1px;
  margin-top: 26px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.mech {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  padding: 18px clamp(16px, 2.4vw, 24px);
  background: var(--paper);
}

.mech .code {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.mech p { grid-column: 2; margin-top: 2px; font-size: 15px; }

@media (max-width: 560px) {
  .mech { grid-template-columns: minmax(0, 1fr); }
  .mech p { grid-column: 1; }
}

/* To spalter, der skal læses mod hinanden: hvor noget hjælper, og hvor det
 * ikke skal være. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  margin-top: 22px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  overflow: hidden;
}

.split > div { padding: 20px clamp(16px, 2.4vw, 24px); background: var(--paper); }

.split h3 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.split ul { margin: 10px 0 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
.split li { color: var(--ink-soft); font-size: 15px; }
.split li strong { color: var(--ink); font-weight: 600; }

/* ── Afsenderen ───────────────────────────────────────────────────────────
 *
 * Sitet er lavet til psykologiundervisningen på Rosborg Gymnasium, og det skal
 * stå, hvor man kan se det — ikke kun i foden.
 */

.origin {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: clamp(18px, 2.4vw, 26px);
  padding: 14px 18px;
  background: var(--accent-soft);
  border-radius: var(--r-control);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.origin strong { color: var(--ink); font-weight: 650; }

/* ── Billeder ─────────────────────────────────────────────────────────────
 *
 * Alle motiver er trykt i tre farver på samme papirtone. De ligger derfor på
 * et ark, ligesom på ex.samle.dk: så er de en gengivelse af noget trykt i
 * begge temaer i stedet for en lys firkant midt i en mørk side.
 *
 * Ingen af dem bærer information, der ikke også står i teksten. Alt-teksten
 * beskriver, hvad man ser, ikke hvad det betyder — betydningen står i brødet.
 */

.art-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.2vw, 12px);
  margin: 0;
  padding: clamp(10px, 1.4vw, 14px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.art-grid img {
  display: block;
  width: 100%;
  border-radius: 4px;
}

/* Øvelsessidens motiv. Fuld bredde under sidetoppen, fordi den er det første,
 * eleven ser — og fordi et 3:2-motiv ikke kan noget i en smal spalte. */

.band {
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: clamp(10px, 1.4vw, 14px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.band img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-width: 100%;
  object-fit: cover;
  border-radius: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .band.rise { animation-delay: 160ms; }
}

/* ── Lærersiderne ─────────────────────────────────────────────────────────
 *
 * Sitet er statisk og kan ikke låse noget. Advarslen er derfor ikke pynt —
 * den er det eneste, der står mellem en elev og en ødelagt øvelse, og den
 * skal kunne ses, før man har læst noget andet på siden.
 */

.advarsel {
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 14px 18px;
  border: 1px solid var(--flag-kant, var(--edge));
  border-left: 4px solid var(--flag-kant, var(--edge));
  border-radius: var(--r-control);
  background: var(--paper-sunk);
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: 62ch;
}

.advarsel strong { color: var(--ink); }

.laerernote {
  padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.laerernote h2 {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.laerernote p {
  margin-top: 14px;
  max-width: 60ch;
  color: var(--ink-soft);
}

/* SPOILER-mærket skal springe i øjnene, når læreren skimmer siden. */
.laerernote p:first-of-type { color: var(--ink); }

.til-laereren {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--step--1);
  max-width: 60ch;
}

.laererindeks { padding-top: clamp(30px, 4vw, 42px); }

.laererindeks h2 {
  margin-top: clamp(28px, 3.5vw, 38px);
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--step-1);
}

.laererliste {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.laererliste li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
}

.laererliste a {
  text-decoration: none;
  font-weight: 500;
}

.laererliste a:hover { text-decoration: underline; }

/* ── Selve øvelsen ────────────────────────────────────────────────────────
 *
 * Ét trin ad gangen i en rolig spalte. Måleren foroven siger hvor langt man
 * er, og det er den eneste navigation der er: der er ingen vej tilbage, fordi
 * halvdelen af øvelserne holder op med at virke, hvis man kan gå tilbage og
 * kigge.
 */

.oevelse { padding-bottom: clamp(40px, 6vw, 72px); }

.maaler {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.maaler-tal {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.maaler-navn { color: var(--ink-soft); font-size: var(--step--1); }

.maaler-bar {
  flex: 1 0 100%;
  height: 3px;
  border-radius: var(--r-round);
  background: var(--line);
  overflow: hidden;
}

.maaler-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-round);
  transition: width .45s var(--ease);
}

.trin {
  display: flex;
  flex-direction: column;
  /* Lille grundafstand mellem afsnit; overskrifter tager selv mere luft
   * ovenfor. Én fælles gap gav alt den samme afstand, og så klistrede en
   * overskrift til afsnittet over den. */
  gap: 11px;
  max-width: var(--measure);
}

.trin > h2 { margin-top: clamp(30px, 3.4vw, 44px); }
.trin > h3 { margin-top: clamp(22px, 2.6vw, 32px); font-size: var(--step-1); }
.trin > :first-child { margin-top: 0; }
.trin > .handling { margin-top: clamp(10px, 1.4vw, 16px); }

/* Brødtekst vil have en smal spalte; en tabel eller en skala vil have det
 * modsatte. Et bredt trin får hele sidens bredde — den samme, måleren
 * foroven bruger. */
.trin.er-bred { max-width: none; }
.trin.er-bred > h2,
.trin.er-bred > h3,
.trin.er-bred > p { max-width: var(--measure); }

.trin:focus { outline: none; }
.trin h2 { font-size: var(--step-2); }

/* Afslutningen er en tekst, der skal læses fra ende til anden, og ikke en
 * skærm, der skal betjenes. Den må have lidt mere luft end et trin. */
.trin.er-afslutning { gap: 12px; }

/* Den første overskrift står lige under sidetoppen og skal ikke skubbes
 * yderligere ned; de følgende skal. */
.trin.er-afslutning > h2 { margin-top: clamp(34px, 4vw, 52px); }
.trin.er-afslutning > h2:first-child { margin-top: clamp(8px, 1.2vw, 14px); }
.trin p { color: var(--ink-soft); }
.trin .valg { display: flex; flex-wrap: wrap; gap: 10px; }
.trin .handling { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.genstart { margin-top: clamp(26px, 3vw, 36px); }

/* ── Lærerens opsamling ───────────────────────────────────────────────────
 *
 * Holdkoden og linket står øverst, fordi de skal skrives på tavlen.
 * Fordelingen fylder resten, fordi den er dét, klassen ser på.
 */

.opsamling-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 30rem;
}

.kodehjaelp { color: var(--ink-faint); font-size: var(--step--1); margin: 0; }

.fordeling { margin-top: clamp(30px, 4vw, 44px); }

.fordeling-tom {
  padding: clamp(24px, 4vw, 40px);
  background: var(--paper-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-surface);
  color: var(--ink-faint);
}

.soejler { display: flex; flex-direction: column; gap: 10px; }

.soejle {
  display: grid;
  grid-template-columns: minmax(5.5rem, 12rem) minmax(0, 1fr) 3rem;
  gap: 4px 14px;
  align-items: center;
}

.soejle-navn { color: var(--ink-soft); font-size: var(--step--1); }

.soejle-spor {
  height: 26px;
  background: var(--paper-sunk);
  border-radius: 4px;
  overflow: hidden;
}

.soejle-fyld {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width .5s var(--ease);
}

.soejle-tal {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: clamp(17px, 1.4vw, 20px);
}

.soejle-under {
  grid-column: 2 / -1;
  color: var(--ink-faint);
  font-size: 12px;
}

.soejle.er-tom .soejle-navn, .soejle.er-tom .soejle-tal { color: var(--ink-faint); }

/* ── Femtrinsskalaen ──────────────────────────────────────────────────────
 *
 * Yderpunkterne står som ord, trinnene imellem er prikker på en linje. Fem
 * knapper med hver sit ord blev for brede og brød om på to linjer på en
 * bærbar — og en skala, der brækker midtover, er ikke længere en skala.
 *
 * Målet er en bærbar skærm. Derfor står hele rækken på én linje helt ned til
 * omkring 620px, og først derunder falder ordene op og ned om skalaen.
 */

.likert {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
}

.likert-ende {
  flex: 0 1 auto;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.25;
  max-width: 9.5rem;
}

.likert-ende.er-lav { text-align: right; }

.likert-skala {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.2vw, 14px);
  padding: 0 2px;
}

/* Selve radioknappen ligger under prikken, så tastatur og skærmlæser stadig
 * ser en almindelig gruppe. */
.likert-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.likert-prik {
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid var(--edge);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}

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

/* Valgt vises ved fyld OG ring — ikke ved kulør alene. */
.likert-input:checked + .likert-prik {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.likert-input:focus-visible + .likert-prik {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.kun-oplaest {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 620px) {
  .likert { flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
  .likert-ende { flex: 1 1 40%; max-width: none; font-size: 12px; }
  .likert-ende.er-lav { text-align: left; }
  .likert-ende.er-hoej { text-align: right; }
  .likert-skala { order: -1; flex: 1 0 100%; justify-content: center; gap: 16px; }
}

/* En liste af udsagn, der deler skala.
 *
 * Yderpunkterne står én gang øverst — ikke under hver række. Rækkerne er en
 * tabel: udsagnet til venstre, prikkerne i deres egen spalte til højre, og
 * etiketterne ovenover i præcis den spalte, så »Passer slet ikke« står over
 * den første prik og ikke over udsagnsteksten.
 *
 * Prikkerne trækkes ud til hver sin ende af spalten frem for at klumpe sig
 * sammen. Det er dét, der gør, at etiketterne kan lande, hvor de skal.
 */

.udsagn-liste {
  --skala-bredde: clamp(15rem, 26vw, 21rem);

  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--skala-bredde);
  gap: 0 clamp(20px, 3.5vw, 44px);
  align-items: center;
}

.likert-hoved {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 8px;
}

.likert-hoved .likert-ende {
  max-width: 9.5rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.likert-pil { flex: none; color: var(--ink-faint); }
.likert-hoved .er-hoej { justify-content: flex-end; }
.likert-hoved .likert-ende.er-lav { text-align: left; }
.likert-hoved .likert-ende.er-hoej { text-align: right; }

.udsagn { display: contents; }

.udsagn-tekst {
  color: var(--ink);
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.udsagn .likert {
  border-top: 1px solid var(--line);
  padding: 13px 0;
}

/* I listen fylder skalaen hele sin spalte, og prikkerne fordeles jævnt. */
.udsagn .likert-skala {
  width: 100%;
  justify-content: space-between;
  gap: 0;
  padding: 0;
}

/* Under 900px er der ikke plads til to spalter. Så falder rækkerne sammen til
 * én, overskriften forsvinder, og hver skala får sine egne ender igen —
 * ellers stod prikkerne uden noget at betyde. */
@media (max-width: 899px) {
  .udsagn-liste { grid-template-columns: minmax(0, 1fr); }
  .likert-hoved { display: none; }
  .udsagn-tekst { padding: 14px 0 6px; }
  .udsagn .likert { border-top: 0; padding: 0 0 14px; }
  .udsagn .likert-skala { width: auto; justify-content: center; gap: 16px; }
}

/* ── Lærerens session ─────────────────────────────────────────────────────
 *
 * Holdkoden skal kunne læses fra bagerste række, for den står på tavlen og
 * skal tastes af otteogtyve mennesker på én gang. Alt andet på siden må vige
 * for den.
 */

.session {
  padding: clamp(20px, 3vw, 30px) clamp(18px, 2.6vw, 28px);
  background: var(--accent-soft);
  border-radius: var(--r-surface);
  max-width: 34rem;
}

.session-navn {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.session-kode {
  margin-top: 4px;
  font-size: clamp(48px, 10vw, 82px);
  font-weight: 650;
  letter-spacing: .14em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.session-link {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: var(--step--1);
  word-break: break-all;
}

.session-tal {
  margin-top: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.session-laage-hjaelp { margin-top: 8px; max-width: 34rem; }

#opsamling .handling {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

.session-laage.er-aaben {
  padding: 9px 14px;
  border: 1px solid var(--edge);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-control);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.opsamling-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 40rem;
}

.opsamling-raad {
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: 12px 16px;
  border-left: 4px solid var(--accent);
  background: var(--paper);
  border-radius: var(--r-control);
  max-width: 62ch;
  color: var(--ink);
}

/* ── Elevens aflevering ──────────────────────────────────────────────────── */

.aflever {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin: clamp(18px, 2.4vw, 24px) 0;
}

.aflever-besked { color: var(--ink-faint); font-size: var(--step--1); }
.aflever.er-sendt .aflever-besked { color: var(--ink-soft); font-weight: 500; }

.aflever.er-gaaet-galt .aflever-besked {
  color: var(--ink);
  border-left: 3px solid var(--edge);
  padding-left: 10px;
}

.venter {
  padding: 12px 16px;
  background: var(--paper-sunk);
  border-radius: var(--r-control);
  color: var(--ink-soft);
  font-size: var(--step--1);
  max-width: var(--measure);
}

/* ── Lærerens konto ───────────────────────────────────────────────────────
 *
 * Log ind, invitation og administration. Formularerne er smalle, fordi de
 * kun har et par felter; listen over konti får hele bredden, så en adresse
 * og dens knapper kan stå på én linje på en bærbar.
 */

.konto { margin-top: clamp(20px, 3vw, 30px); }

.konto-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 26rem;
}

.felt { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.felt-navn { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); }

.felt-input {
  width: 100%;
  padding: 10px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
}

.felt-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.felt-hjaelp { margin: -6px 0 0; color: var(--ink-faint); font-size: var(--step--1); }

.felt-valg {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.felt-valg input { accent-color: var(--accent); }

.konto-besked { margin: 0; min-height: 1.5em; color: var(--ink-soft); font-size: var(--step--1); }

/* Fejl vises ved kant og vægt, ikke ved kulør alene. */
.konto-besked.er-galt {
  color: var(--ink);
  font-weight: 600;
  border-left: 3px solid var(--edge);
  padding-left: 10px;
}

.konto-links { margin: 14px 0; color: var(--ink-soft); }

.konto-glemt { margin-top: clamp(26px, 3vw, 34px); max-width: 26rem; }
.konto-glemt summary { cursor: pointer; color: var(--ink-soft); font-size: var(--step--1); }
.konto-glemt .konto-form { margin-top: 14px; }

.konto-sektion { margin-top: clamp(30px, 4vw, 44px); }

.konto-sektion h2 {
  margin-bottom: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--step-1);
}

.konto-resultat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  max-width: 44rem;
}

.konto-resultat .konto-link { flex: 1 1 22rem; font-size: var(--step--1); }

.konto-liste { list-style: none; margin: 0; padding: 0; }

.konto-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.konto-email { font-weight: 500; overflow-wrap: anywhere; }
.konto-maerker { display: flex; gap: 6px; color: var(--ink-faint); font-size: var(--step--1); }
.konto-handlinger { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* Linjen foroven på lærersiderne: hvem er logget ind. */
.konto-linje {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-faint);
  white-space: nowrap;
}

.konto-hvem { overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }

.konto-ud {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

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

@media (max-width: 640px) {
  .konto-linje { width: 100%; }
  .konto-handlinger { margin-left: 0; }
}

.konto > .lede { margin: 0 0 20px; }

/* ── Lærerstoffet ─────────────────────────────────────────────────────────
 *
 * Øvelsen, teorien og hvorfor den ligger på en skærm. Tre afsnit ved siden af
 * hinanden på en bærbar, så en lærer kan læse, hvad øvelsen er, uden at rulle
 * forbi det hele. Teksten er skrevet til en fagperson og står derfor som
 * brødtekst, ikke som kort.
 */

.laererstof {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 56px);
  margin: clamp(26px, 3.5vw, 40px) 0;
}

/* Øvelsen står i hele bredden; teorien og skærmen under den, side om side. */
.laererstof section:first-child { grid-column: 1 / -1; }
.laererstof section:first-child p { max-width: 75ch; font-size: var(--step-0, 16px); }

.laererstof section { border-top: 2px solid var(--ink); padding-top: 12px; }
.laererstof h2 { font-size: var(--step-1); }
.laererstof p { margin-top: 10px; max-width: 68ch; color: var(--ink-soft); font-size: 15px; }
.laererstof section:first-child p:first-of-type { color: var(--ink); }

.mekanik-linje { font-size: var(--step--1); color: var(--ink-faint); }

@media (max-width: 860px) {
  .laererstof { grid-template-columns: minmax(0, 1fr); }
}

.laererliste li { flex-wrap: wrap; }

.laererliste-hvorfor {
  flex-basis: 100%;
  margin-top: -2px;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

/* ── Eksemplet på en lærerside ────────────────────────────────────────────
 *
 * Tavlen er en ramme om den samme figur, opsamlingen tegner, så det står
 * klart, at det er projektoren, der vises — og at tallene er opdigtede.
 */

.eksempel { margin: clamp(30px, 4vw, 48px) 0; }
.eksempel h2 { font-size: var(--step-1); border-top: 2px solid var(--ink); padding-top: 12px; }

.eksempel-gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin-top: 16px;
  align-items: start;
}

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

.eksempel-tavle {
  margin: 0;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.eksempel-tavle .fordeling { margin-top: 14px; }

.eksempel-tavle-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-faint);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.eksempel-maerke {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eksempel-tavle-titel { margin-top: 8px; font-size: var(--step-1); font-weight: 650; color: var(--ink); }

.eksempel-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.eksempel-side { display: flex; flex-direction: column; gap: 22px; }

.forloeb { list-style: none; margin: 0; padding: 0; counter-reset: trin; }

.forloeb li {
  display: grid;
  grid-template-columns: 1.8rem 5.2rem minmax(0, 1fr);
  gap: 2px 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: trin;
  font-size: var(--step--1);
}

.forloeb li::before {
  content: counter(trin);
  font-weight: 650;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.forloeb-hvem { font-weight: 600; color: var(--ink); }
.forloeb-tekst { color: var(--ink-soft); }

@media (max-width: 560px) {
  .forloeb li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .forloeb-tekst { grid-column: 2; }
}

.eksempel-elev {
  padding: 16px 18px;
  background: var(--accent-soft);
  border-radius: var(--r-control);
}

.eksempel-elev-titel { margin-top: 4px; font-weight: 650; color: var(--ink); }
.eksempel-elev p:not(.eksempel-elev-titel) { margin-top: 6px; color: var(--ink-soft); font-size: var(--step--1); }

/* ── Forsiden ─────────────────────────────────────────────────────────────
 *
 * Teksten til venstre og genvejene til højre, når der er nogen: holdets side,
 * hvis eleven har været der, og lærerens sider, hvis en lærer har været
 * logget ind i browseren. Uden genveje står teksten alene.
 */

.forside-top {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
}

.forside-top .page-head { padding: 0; }

@media (min-width: 900px) {
  .forside-top { grid-template-columns: 1.4fr .8fr; }
}

.genveje {
  display: grid;
  gap: 12px;
  align-content: end;
}

.genveje[hidden] { display: none; }

.genvej {
  display: block;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-control);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform .25s var(--ease), border-color .2s var(--ease);
}

.genvej:hover { transform: translateX(4px); color: inherit; }
.genvej-titel { display: block; font-weight: 650; color: var(--accent); }
.genvej-tekst { display: block; margin-top: 3px; color: var(--ink-soft); font-size: var(--step--1); }

/* Lærerens forside har tre genveje ved siden af hinanden. */
nav.genveje:not(#genveje) {
  margin: 0 0 clamp(8px, 1.4vw, 14px);
}

@media (min-width: 820px) {
  nav.genveje:not(#genveje) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Temaer ───────────────────────────────────────────────────────────────
 *
 * På forsiden og på holdets side står øvelserne i grupper under hvert sit
 * tema. Overskriften er temaets navn og intet andet; skinnen på rækkerne
 * siger det samme med farve, men overskriften siger det med ord.
 */

.tema-afsnit + .tema-afsnit { margin-top: clamp(36px, 5vw, 56px); }

.tema-hoved {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.tema-overskrift { font-size: var(--step-2); }

.tema-motiv {
  width: clamp(88px, 13vw, 148px);
  height: auto;
  border-radius: var(--r-control);
  box-shadow: var(--shadow);
}

.tema-overskrift a { color: inherit; text-decoration: none; }
.tema-overskrift a:hover { color: var(--accent); text-decoration: underline; }

.tema-blurb {
  margin: 10px 0 clamp(6px, 1vw, 10px);
  max-width: 60ch;
  color: var(--ink-soft);
}

.tema-afsnit .index { margin-top: clamp(10px, 1.6vw, 16px); }

/* Samlingens oversigt: lærersiden står ved siden af rækken, ikke inde i den —
 * et link i et link er ikke til at klikke rigtigt på. */
.tema-afsnit .index li { position: relative; }

.entry-laerer {
  display: inline-block;
  margin: -14px 0 18px calc(4px + clamp(18px, 3vw, 30px));
  font-size: var(--step--1);
}

/* ── Adgangen på en lærerside ─────────────────────────────────────────────
 *
 * Om eleverne kan se øvelsen, og hvor man ændrer det. Står lige under titlen,
 * fordi det er det første, en lærer skal vide, før hun bruger den.
 */

.adgang {
  margin-top: clamp(4px, 1vw, 10px);
  padding: 12px 16px;
  max-width: 62ch;
  background: var(--accent-soft);
  border-radius: var(--r-control);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.adgang strong { color: var(--ink); }

.laererindeks h3 {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: var(--step-0);
  color: var(--ink-soft);
}

.laererindeks-note { margin-top: 6px; color: var(--ink-faint); font-size: var(--step--1); }

/* ── Holdets side ─────────────────────────────────────────────────────────── */

.holdside-maerke {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Lærerens hold ────────────────────────────────────────────────────────
 *
 * Ét kort pr. hold. Linket øverst, fordi det er det, læreren kom efter, og
 * øvelserne under som flueben i to grupper: dem, der er lagt ud for alle, og
 * samlingen, hvor et flueben er det, der åbner. Valgt vises ved flueben OG
 * fed skrift, ikke ved farve alene.
 */

.hold-liste { display: flex; flex-direction: column; gap: 14px; }

.hold-tom {
  padding: 18px 20px;
  background: var(--paper-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-surface);
  color: var(--ink-faint);
}

.hold-kort {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
}

.hold-resume {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px clamp(16px, 2.4vw, 24px);
  cursor: pointer;
  list-style: none;
}

.hold-resume::-webkit-details-marker { display: none; }

.hold-resume::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: translateY(-2px) rotate(-45deg);
  transition: transform .2s var(--ease);
}

.hold-kort[open] > .hold-resume::before { transform: translateY(-4px) rotate(45deg); }

.hold-navn { font-size: var(--step-1); font-weight: 650; }
.hold-antal { margin-left: auto; color: var(--ink-faint); font-size: var(--step--1); white-space: nowrap; }

.hold-indhold {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px clamp(16px, 2.4vw, 24px) clamp(18px, 2.4vw, 24px);
}

.hold-link {
  padding: 14px 16px;
  background: var(--accent-soft);
  border-radius: var(--r-control);
}

.hold-link-navn {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hold-link-raekke { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.hold-link-felt {
  flex: 1 1 20rem;
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hold-link-se { font-size: var(--step--1); }

.hold-gruppe {
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  min-width: 0;
}

.hold-gruppe legend {
  padding: 0;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  float: left;
  width: 100%;
}

.hold-gruppe-note { clear: both; padding-top: 4px; color: var(--ink-soft); font-size: var(--step--1); }

.hold-tema { margin-top: 14px; font-size: var(--step-0); }

.hold-valg-liste {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 2px 28px;
}

@media (min-width: 820px) {
  .er-samling .hold-valg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hold-valg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 10px;
  align-items: baseline;
  padding: 6px 0;
  cursor: pointer;
}

.hold-valg input { accent-color: var(--accent); width: 17px; height: 17px; transform: translateY(2px); }
.hold-valg-titel { color: var(--ink-soft); }
.hold-valg:has(input:checked) .hold-valg-titel { color: var(--ink); font-weight: 650; }
.hold-valg-tag { grid-column: 2; color: var(--ink-faint); font-size: 13px; }

.hold-handlinger {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ── Opsamlingen og holdene ───────────────────────────────────────────────── */

.session-links { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.session-links .session-link { margin-top: 0; }
.session-link strong { color: var(--ink); font-weight: 650; }

.opsamling-advarsel {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--edge);
  border-left: 4px solid var(--ink);
  border-radius: var(--r-control);
  max-width: 40rem;
  color: var(--ink);
  font-size: var(--step--1);
}

/* ── En side med små øvelser ──────────────────────────────────────────────
 *
 * opgaver.js. Overblikket foroven er en række kort uden numre — øvelserne
 * tages i den rækkefølge, eleven vil — og et kort, der er færdigt, har både
 * en kant, et flueben og ordet »Færdig«, ikke bare en anden farve.
 */

.opgave-oversigt { margin-bottom: clamp(12px, 2vw, 20px); }

.opgave-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 10px;
}


.opgave-link {
  display: block;
  height: 100%;
  padding: 12px 16px 13px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  border-radius: var(--r-control);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

.opgave-link:hover { color: inherit; border-color: var(--edge); transform: translateY(-1px); }
.opgave-link-titel { display: block; font-weight: 650; color: var(--ink); line-height: 1.3; }
.opgave-link-kort { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.35; }

.opgave-status {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}

.opgave-status:empty { display: none; }

.er-faerdig .opgave-link { border-left-color: var(--accent); background: var(--accent-soft); }
.er-faerdig .opgave-status::before { content: "✓ "; }

.opgave {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 84px;
}

.opgave-titel { font-size: var(--step-2); }
.opgave-ingress { margin-top: 10px; max-width: var(--measure); color: var(--ink-soft); }
.opgave-indhold { margin-top: clamp(16px, 2.2vw, 24px); }
.opgave-fejl { color: var(--ink); border-left: 3px solid var(--edge); padding-left: 10px; }

.spoergsmaal {
  margin: 0;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--measure);
}

.spoergsmaal li::marker { color: var(--ink-faint); font-weight: 650; }

/* ── Sæt på plads ─────────────────────────────────────────────────────────
 *
 * placering.js. Felterne ligger oven på tegningen på en bærbar, med en streg
 * ind til det, de peger på. Er der ikke plads — under ca. 680 pixels til
 * øvelsen — står felterne i stedet som en liste under tegningen, og et
 * bogstav på tegningen siger, hvilket felt der hører til hvor.
 *
 * Tilstandene vises ved kant og tegn, ikke ved farve alene: et tomt felt er
 * stiplet, et fyldt er helt, og et tjekket har ✓ eller ✗ og — når det er
 * forkert — en streg gennem navnet.
 */

.placering {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.figur-ramme { position: relative; }
.figur-tegning svg { display: block; width: 100%; height: auto; }

.figur-pladser .plads {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 8.4rem;
  justify-content: center;
}

.plads {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.25;
  color: var(--ink-faint);
  background: var(--paper);
  border: 2px dashed var(--edge);
  border-radius: var(--r-control);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}

.plads:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plads.er-fyldt { border-style: solid; border-color: var(--ink-soft); color: var(--ink); font-weight: 600; }
.plads.er-klar { border-color: var(--accent); background: var(--accent-soft); }
.plads.er-over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.plads.er-rigtig { border-color: var(--ink); }
.plads.er-forkert { border-style: dashed; border-color: var(--ink); background: var(--paper-sunk); }
.plads.er-forkert .plads-tekst { text-decoration: line-through; text-decoration-thickness: 2px; }
.plads:disabled { cursor: default; }
.plads.er-aktiv { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.plads-maerke { font-weight: 700; }
.plads-maerke:empty { display: none; }

.plads-bogstav {
  display: none;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1.5px solid var(--ink-soft);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
}

.ledere .leder { stroke: var(--ink-soft); stroke-width: 1.6; }
.ledere .leder-prik { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.ledere .leder-bogstav { display: none; }
.ledere .leder-bogstav circle { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 2; }
.ledere .leder-bogstav text { fill: var(--ink); font: 650 27px var(--font); }

@container (max-width: 680px) {
  .figur-pladser {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .figur-pladser .plads { position: static; transform: none; justify-content: flex-start; }
  .plads-bogstav { display: inline-grid; }
  .ledere .leder-bogstav { display: inline; }
}

/* Kæden: felterne i rækkefølge med en pil imellem. */
.kaede {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0 26px;
}

.kaede-led { position: relative; display: flex; flex-direction: column; gap: 6px; }

.kaede-led + .kaede-led::before {
  content: "→";
  position: absolute;
  left: -20px;
  bottom: .7rem;
  color: var(--ink-faint);
  font-weight: 650;
}

.kaede-etiket {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
}

.kaede .plads {
  width: 100%;
  min-height: 3.1rem;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

@container (max-width: 680px) {
  .kaede { grid-auto-flow: row; grid-auto-columns: auto; gap: 22px; }
  .kaede-led + .kaede-led::before { content: "↓"; left: 50%; top: -20px; bottom: auto; }
  .kaede-etiket { min-height: 0; }
}

/* Bakken med de brikker, der ikke er lagt endnu. */
.bakke {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 3.4rem;
  padding: 12px;
  background: var(--paper-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-surface);
}

.bakke:empty::before {
  content: "Alle er lagt. Træk en brik hertil, hvis du vil tage den ud igen.";
  align-self: center;
  color: var(--ink-faint);
  font-size: 13px;
}

.bakke[hidden] { display: none; }

.brik {
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  box-shadow: 0 1px 2px rgba(19, 26, 33, .08);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}

.brik:hover { border-color: var(--ink-faint); }
.brik:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brik[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.brik-tekst, .brik-under { display: block; }
.brik-under { margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); max-width: 15rem; }
.brik[aria-pressed="true"] .brik-under { color: var(--on-accent); }

.brik.er-spoegelse {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-2deg);
  box-shadow: var(--shadow-lift);
  cursor: grabbing;
}

.placering.traekker, .placering.traekker * { cursor: grabbing; }

.placering-handling { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.placering-handling [hidden] { display: none; }
.placering-status { min-height: 1.5em; color: var(--ink-soft); font-size: var(--step--1); }
.er-loest .placering-status { color: var(--ink); font-weight: 600; }

.forklaring-liste {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 10px 22px;
  max-width: 52rem;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

.forklaring-liste dt { font-weight: 650; }
.forklaring-liste dd { margin: 0; color: var(--ink-soft); }

@media (max-width: 560px) {
  .forklaring-liste { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .forklaring-liste dd { margin-bottom: 10px; }
}