/* Det fælles udtryk for sitets øvelser: sidetoppen, arket der arbejdes på,
 * farvevælgeren, rækkerne man skriver i, og ordforklaringen nederst.
 *
 * Det stod under ws1/ indtil WS4 kom til. Det er de samme fire ting begge
 * steder, og to kopier ville før eller siden komme til at se forskellige ud —
 * en øvelse i WS4 skal ligne en øvelse i WS1, for det er det samme forløb.
 * Det, der kun hører til én workshop, står stadig i workshoppens egen fil.
 *
 * 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. */

/* ── 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; }

/* ── 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; }

/* ── 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); }