/* Kognitiv gennemgang. Tidslinjen, panelet, facitkassen og oversigten er
 * skrevet af fra »Hvad blev overset?«, så de to usability-øvelser ligner
 * hinanden. Det nye er apparatet, der står til venstre for arbejdet, og
 * mærkerne på det.
 *
 * Apparatets blå og hvide er indholdets farver, skrevet af fra forlægget, og
 * ikke grænsefladens. De skifter ikke i mørk tilstand: skærmen ser ud, som
 * den gør. Mærkerne skilles på form og tekst - rund og et tal for det,
 * holdet har udpeget, firkantet og et bogstav for facit.
 */

:root {
  --ok: #2c7a33;
  --ok-soft: #e5f2e4;
  --maybe: #8f6300;
  --maybe-soft: #fbf0d4;
  --bad: #b3261e;
  --bad-soft: #fbe8e6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ok: #7cc47f;
    --ok-soft: #16301a;
    --maybe: #e2b64c;
    --maybe-soft: #33290e;
    --bad: #f08a80;
    --bad-soft: #3a1a17;
  }
}

/* ── Fremgangsmåden ──────────────────────────────────────────────────────── */

.how {
  list-style: none;
  display: grid;
  gap: clamp(16px, 2.2vw, 26px);
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  counter-reset: how;
}

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

.how li {
  counter-increment: how;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.how li::before {
  content: "Trin " counter(how);
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.how h2 {
  margin: 4px 0 0;
  font-size: var(--step-1);
}

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

.how-body {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}


/* ── Tidslinjen ──────────────────────────────────────────────────────────
 *
 * Som i klassifikationen: kortene ville fylde en skærm, før øvelsen var
 * begyndt, og prikkerne siger det samme på én linje.
 *
 * En prik bærer sit nummer, til hændelsen er færdig; så bærer den et
 * flueben. Det er tegnet og ikke farven, der siger det. Den hændelse, panelet
 * står på, har en ring om sig, så "færdig" og "her er du" kan ses på én gang.
 *
 * Navnet står under linjen og skifter, når der peges på en prik. Det står der
 * også, når der ikke bliver peget - så er linjen aldrig tom, og navnet er lige
 * så tilgængeligt med en finger og med tastatur som med en mus. */

.timeline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(22px, 3vw, 30px) 0 0;
}

/* Prikkerne må klemmes sammen og bryde indbyrdes, men rækken må ikke bryde:
 * brød den, faldt pilene ned på hver sin linje, og så stod de ikke længere i
 * hver sin ende af det, de hører til. På en telefon bliver det to rækker
 * prikker med en pil på hver side. */
.dots {
  display: flex;
  flex-wrap: wrap;
  flex: 0 1 auto;
  min-width: 0;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dots li { display: flex; }

.dot,
.tl-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}

.dot { font-size: 13px; font-weight: 650; }
.tl-arrow { font-size: 18px; line-height: 1; }

.dot:hover,
.tl-arrow:hover:not(:disabled) { border-color: var(--edge); color: var(--ink); }

.dot:focus-visible,
.tl-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tl-arrow:disabled { opacity: .35; cursor: default; }

/* Begyndt, men ikke tjekket: kanten træder frem, tallet står skarpt. */
.dot[data-state="gang"] {
  border-width: 2px;
  border-color: var(--ink-faint);
  color: var(--ink);
}

/* Færdig: fyldt med flueben ovenpå. */
.dot[data-state="faerdig"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
}

.dot[data-state="faerdig"]:hover { color: var(--on-accent); }

/* Her er du. Ringen ligger uden om fyldet, så de to kan ses samtidig. */
.dot[aria-current="step"] {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}

.tl-say {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: var(--step--1);
  color: var(--ink-soft);
  /* Linjen skifter, når der peges. Uden en fast højde hopper panelet under
   * den, hver gang navnet bliver en linje længere. */
  min-height: 2.6em;
}

.tl-count {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ── Panelet ─────────────────────────────────────────────────────────────── */

.panel {
  margin-top: 14px;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
  /* Facit kan springe hertil. Uden det ender toppen under den faste menu. */
  scroll-margin-top: 90px;
}

.panel-no {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

/* ── Trinene ─────────────────────────────────────────────────────────────── */

.step-no {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

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

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Når begge knapper er væk, skal rækken ikke stå tilbage som et hul. */
.step-actions:not(:has(> :not([hidden]))) { display: none; }

/* Svaret på et tjek. Rigtigt har en fyldt kant og et flueben, forkert en
 * stiplet og et kryds - samme regel som på diagrammet. */
.feedback {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}

.feedback[data-state="rigtig"] { background: var(--ok-soft); border: 2px solid var(--ok); padding: 13px 15px; }
.feedback[data-state="forkert"] { border-style: dashed; border-color: var(--ink-faint); }

.feedback-verdict { font-weight: 650; }

.feedback-mark {
  margin-right: 8px;
  font-weight: 700;
}

.feedback[data-state="rigtig"] .feedback-mark { color: var(--ok); }
.feedback[data-state="forkert"] .feedback-mark { color: var(--bad); }

.feedback-note,
.feedback-why {
  max-width: var(--measure);
  margin-top: 8px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.feedback-list {
  margin: 8px 0 0;
  padding-left: 1.2em;
  font-size: var(--step--1);
}

.feedback-src {
  max-width: var(--measure);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}

.panel-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}


/* ── Betjening og facit ──────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: clamp(20px, 3vw, 28px);
}

.summary {
  margin-top: clamp(20px, 3vw, 28px);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
  scroll-margin-top: 90px;
}

.summary h2 { font-size: var(--step-2); }

.summary-score {
  margin-top: 8px;
  color: var(--ink-soft);
}

.review {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.review li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

/* Tiltaget er en knap: det fører tilbage til begrundelsen. */
.review-title {
  padding: 0;
  font: inherit;
  font-weight: 650;
  text-align: left;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

.review-title:hover { color: var(--accent-hover); }

.note {
  max-width: var(--measure);
  margin: 18px 0 0;
  color: var(--ink-faint);
  font-size: var(--step--1);
}

.note cite { font-style: normal; }

/* ── Oversigten: trinene mod spørgsmålene ────────────────────────────────
 *
 * En tabel, der kan rulles vandret på en telefon, frem for en tabel, der
 * brydes op: det er mønsteret på tværs af rækkerne, der er pointen. */

.summary-head {
  margin-top: 22px;
  font-size: var(--step-1);
}

.matrix-wrap {
  margin-top: 10px;
  overflow-x: auto;
}

.matrix {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--step--1);
}

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

.matrix thead th {
  border-top: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  vertical-align: bottom;
}

.matrix th[scope="row"] { text-align: left; font-weight: 600; }


.matrix-legend {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-faint);
}

.summary-lesson,
.summary-next {
  max-width: var(--measure);
  margin-top: 14px;
  color: var(--ink-soft);
}



/* ── Casen ───────────────────────────────────────────────────────────────── */

.case {
  display: grid;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
  margin-top: clamp(22px, 3vw, 30px);
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}

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

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

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

.case-p strong { color: var(--ink); font-weight: 650; }
.case-small { font-size: var(--step--1); }

.case-sub {
  margin-top: 18px;
  font-size: var(--step-1);
}

.case-order .case-sub { margin-top: 0; }

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

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

.order th { font-weight: 600; }
.order td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ── Apparatet og arbejdet ───────────────────────────────────────────────
 *
 * På en bred skærm står apparatet til venstre og bliver stående, mens der
 * rulles gennem spørgsmålene; det er det, de handler om. På en smal står det
 * øverst og klæber ikke - det ville dække halvdelen af skærmen. */

.panel {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* På en bred skærm står apparatet og opgaven side om side øverst, og svaret
 * på tjekket og rapporten får hele bredden under dem. Arbejdets egne dele
 * lægges direkte i panelets gitter. */
@media (min-width: 1000px) {
  .panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .work { display: contents; }
  .stage { grid-column: 1; grid-row: 1; }
  .work-top { grid-column: 2; grid-row: 1; min-width: 0; }
  .work > :not(.work-top) { grid-column: 1 / -1; min-width: 0; }
  .stage-sticky { position: sticky; top: 84px; }
}

/* Søjlen skal være lige så høj som det, der står ved siden af, ellers har
 * apparatet ingen plads at klæbe i. */
.stage { min-width: 0; align-self: stretch; }
.work { min-width: 0; }

.stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 10px;
}

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

.stage-legend {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ── Skærmen ─────────────────────────────────────────────────────────────
 *
 * Skærmen er 1024 × 768 som forlægget, og alt i den er målt i
 * container-enheder: 1 px i forlægget er 100/1024 cqw. Så skalerer den som ét
 * billede. Kabinettet om den er en mørk ramme, så skærmen ikke flyder ud i
 * siden. */

.vac {
  padding: 2.2%;
  background: #24292e;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.vac-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  container-type: inline-size;
  background: #4472c4;
  color: #fff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vac-page { position: absolute; inset: 0; }
.vac-page[hidden] { display: none; }

.vac-el {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  line-height: 1.15;
  background: none;
  border: 0;
  border-radius: 0;
  touch-action: manipulation;
}

button.vac-el { cursor: pointer; }

/* Ingen tryk-tilstand. Forlægget har ingen, og det er et af fundene. */
button.vac-el:active { transform: none; }

.vac-el:focus-visible {
  outline: 3px solid #ffd54a;
  outline-offset: 2px;
}

.vac-el svg { display: block; width: 100%; height: 100%; overflow: visible; }

.vac-stroke { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linejoin: miter; }
.vac-fill { fill: #fff; }
.vac-shackle { stroke-width: 9; }

.vac-logo-big { font: italic 900 196px "Arial Black", Arial, sans-serif; fill: #fff; }
.vac-logo-small { font: 400 84px Arial, sans-serif; fill: #fff; }

.vac-oval,
.vac-exit,
.vac-circle {
  border: .22cqw solid #fff;
  border-radius: 50%;
}

.vac-oval {
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  font-size: 3.6cqw;
}

.vac-exit {
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  font-size: 3.4cqw;
}

.vac-circle { font-size: 5.8cqw; }

.vac-title {
  justify-content: flex-start;
  font-size: 5.9cqw;
  white-space: nowrap;
}

.vac-box {
  border: .22cqw solid #fff;
  font-size: 2.6cqw;
}

.vac-ibox {
  justify-content: flex-start;
  padding-left: 2%;
  border: .22cqw solid #fff;
  font-size: 3.3cqw;
  font-weight: 700;
}

.vac-ibox-value { margin-left: auto; padding-right: 22%; }

.vac-label { font-size: 2.9cqw; }

.vac-el[data-el="i-more"],
.vac-el[data-el="i-less"] { justify-content: flex-start; font-size: 2.7cqw; }

.vac-text-block,
.vac-el[data-el="help-text"] { font-size: 2.5cqw; line-height: 1.35; }

/* Statuslinjen står over alle skærme. Stregen og skillelinjen er tegnet med
 * pseudo-elementer, så de ikke kan udpeges. */
.vac-bar { position: absolute; inset: 0; pointer-events: none; }
.vac-bar > .vac-el { pointer-events: auto; }

.vac-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 81.5%;
  border-top: .25cqw solid #fff;
}

.vac-sep {
  position: absolute;
  left: 14.6%;
  top: 81.5%;
  bottom: 0;
  border-left: .25cqw solid #fff;
}

.vac-power {
  justify-content: flex-start;
  font-size: 3.5cqw;
}

.vac-status {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: 3.5cqw;
  line-height: 1.25;
}

/* Udpegning: alt, der kan vælges, får en stiplet ramme, og markøren bliver
 * et sigte. Det er rammen og ikke farven, der siger, at der udpeges. */
.vac.is-pinning .vac-el {
  cursor: crosshair;
  outline: .3cqw dashed rgba(255, 255, 255, .8);
  outline-offset: .3cqw;
}

.vac.is-pinning .vac-el:focus-visible { outline: 3px solid #ffd54a; }

.vac-badges {
  position: absolute;
  top: -1.4cqw;
  right: -1.4cqw;
  z-index: 2;
  display: flex;
  gap: .4cqw;
  pointer-events: none;
}

.vac-badge {
  display: grid;
  place-items: center;
  min-width: max(19px, 3.6cqw);
  height: max(19px, 3.6cqw);
  padding: 0 .6cqw;
  box-sizing: border-box;
  font: 700 max(11px, 2.1cqw) / 1 var(--font);
}

.vac-badge[data-kind="pin"] {
  color: #14425c;
  background: #fff;
  border: max(2px, .3cqw) solid #14425c;
  border-radius: 999px;
}

.vac-badge[data-kind="mark"] {
  color: #fff;
  background: #1b1f23;
  border: max(2px, .3cqw) solid #fff;
  border-radius: 2px;
}

/* Kliksporet ligger over skærmen og kan ikke trykkes på. Formen skiller
 * klikkene: fyldt prik for en knap, åben ring for et klik ved siden af,
 * firkant med pil for et skærmskift. Nummeret står i et gult mærke, så det
 * ikke forveksles med udpegningens runde og facits firkantede mærker, som
 * sidder på stedets hjørne og ikke på en streg. */
.vac-trail {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.vac-trail[hidden] { display: none; }

.vac-trail-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.vac-trail-halo { fill: none; stroke: #fff; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.vac-trail-line { fill: none; stroke: #1b1f23; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

.vac-trail-mark { position: absolute; width: 0; height: 0; }

.vac-trail-dot {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: max(10px, 1.6cqw);
  height: max(10px, 1.6cqw);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  background: #1b1f23;
  border: 2px solid #fff;
  border-radius: 50%;
}

.vac-trail-mark[data-kind="forbi"] .vac-trail-dot {
  background: transparent;
  border: 3px solid #1b1f23;
  box-shadow: 0 0 0 2px #fff, inset 0 0 0 1.5px #fff;
}

.vac-trail-mark[data-kind="skift"] .vac-trail-dot {
  width: max(18px, 2.8cqw);
  height: max(18px, 2.8cqw);
  color: #fff;
  font: 700 max(12px, 2cqw) / 1 var(--font);
  border-radius: 2px;
}

.vac-trail-no {
  position: absolute;
  left: max(6px, 1cqw);
  bottom: max(4px, .7cqw);
  padding: 1px 4px;
  white-space: nowrap;
  font: 700 max(10px, 1.8cqw) / 1.2 var(--font);
  color: #1b1f23;
  background: #ffd54a;
  border: 1px solid #1b1f23;
  border-radius: 3px;
}

.vac-trail-mark[data-kind="skift"] .vac-trail-no { left: max(11px, 1.7cqw); }
.vac-trail-mark.is-left .vac-trail-no { left: auto; right: max(6px, 1cqw); }
.vac-trail-mark.is-left[data-kind="skift"] .vac-trail-no { right: max(11px, 1.7cqw); }
.vac-trail-mark.is-below .vac-trail-no { bottom: auto; top: max(4px, .7cqw); }

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

.vac-pinning {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 12px;
  padding: 12px 14px;
  font-size: var(--step--1);
  background: var(--accent-soft);
  border: 2px dashed var(--accent);
  border-radius: var(--r-control);
}

.vac-pinning[hidden] { display: none; }
.vac-pinning-text { flex: 1 1 22ch; }

.vac-screens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
}

.vac-screens-label { font-size: 13px; color: var(--ink-soft); margin-right: 4px; }

/* ── Arbejdet ────────────────────────────────────────────────────────────── */

.work-head {
  margin-top: 4px;
  font-size: var(--step-2);
}

.work-sub {
  display: block;
  margin-top: 2px;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-faint);
}

/* Opgaven står først og i en ramme for sig: det er den, der skal gøres,
 * før der er noget at rapportere. Rapporten under den er dæmpet, til
 * opgaven er tjekket. */
.task {
  margin-top: 14px;
  padding: 14px 16px 16px;
  background: var(--tone-soft, var(--accent-soft));
  border: 2px solid var(--tone, var(--accent));
  border-radius: var(--r-control);
}

.task-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.task-goal {
  margin-top: 2px;
  font-size: var(--step-1);
  font-weight: 700;
}

.task .notes-field { margin-top: 12px; }
.task .step-actions { margin-top: 12px; }
#task-feedback { margin-top: 0; }

.report {
  padding-top: clamp(16px, 2.2vw, 22px);
  border-top: 1px solid var(--line);
}

@media (max-width: 999px) {
  #task-feedback { margin-top: 16px; }
  .report { margin-top: clamp(22px, 3vw, 30px); }
}

.report-head { font-size: var(--step-1); }
.report[data-locked] .report-head { color: var(--ink-faint); }

.feedback-sub {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.path-steps {
  margin: 6px 0 0;
  padding-left: 1.3em;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.path-steps li + li { margin-top: 3px; }

.path-log {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.notes-field { margin-top: 16px; }

.scales {
  margin-top: 14px;
  font-size: var(--step--1);
}

.scales summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--accent);
}

.scales-grid {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.scale-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.scale {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  gap: 3px 8px;
  margin: 6px 0 0;
}

.scale dt { font-weight: 700; }
.scale dd { margin: 0; color: var(--ink-soft); }

.heur-list {
  margin: 8px 0 0;
  padding-left: 1.6em;
  color: var(--ink-soft);
}

/* ── Spørgsmålene ────────────────────────────────────────────────────────── */

.questions {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.questions { display: grid; gap: 12px; }

/* Et kort pr. spørgsmål. På en bred skærm er vurderingen til venstre og
 * detaljer og aktioner til højre; vores vurdering står under dem begge. */
.question {
  display: grid;
  gap: 4px 28px;
  padding: 16px 18px 18px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  scroll-margin-top: 100px;
}

@media (min-width: 860px) {
  .question { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .question > .ours { grid-column: 1 / -1; }
  .q-notes .q-field:first-child { margin-top: 0; }
}

.q-main, .q-notes { min-width: 0; }

@media (min-width: 860px) {
  .scales-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; }
}

.question:focus { outline: none; }

.question.is-pinning {
  outline: 2px dashed var(--accent);
  outline-offset: 6px;
  border-radius: 4px;
}

.q-text {
  display: flex;
  gap: 10px;
  font-weight: 650;
}

.q-no {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  font-size: 13px;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--r-round);
}

.q-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 10px;
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.seg-label {
  margin-right: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-faint);
}

.seg-pick {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  font: inherit;
  font-weight: 650;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: 8px;
  cursor: pointer;
}

.seg-pick:hover:not(:disabled) { border-color: var(--ink-faint); background: var(--paper-sunk); }
.seg-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Valgt er fyldt. Fyldet siger det, ikke farven. */
.seg-pick[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.seg-pick:disabled { cursor: default; }
.seg-pick:disabled:not([aria-pressed="true"]) { opacity: .45; }

.q-pins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

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

/* Det, holdet skriver, står i samme størrelse som instruktionerne over det.
 * Sitets felter er et trin større, og så råbte noterne ad opgaven. */
.field textarea { font-size: var(--step--1); line-height: 1.5; }

/* Undtagen på en berøringsskærm: under 16 px zoomer iOS ind på feltet, så
 * snart der trykkes i det, og siden står skævt, til man zoomer ud igen. */
@media (pointer: coarse) {
  .field textarea { font-size: 16px; }
}

.q-field { margin-top: 10px; }
.q-field textarea { min-height: 3.4em; }

.work.is-pinning .q-pins .btn { opacity: .45; pointer-events: none; }

.step-hint {
  max-width: var(--measure);
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* ── Vores gennemgang ────────────────────────────────────────────────────── */

.ours {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--ink-faint);
  border-radius: var(--r-control);
}

.ours-head { font-weight: 650; }

.ours-kicker {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ours-note,
.ours-text {
  max-width: var(--measure);
  margin-top: 8px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.ours-note { font-style: italic; }

.fund {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

/* Fundet: fuld venstrekant og et flueben. Ikke udpeget: stiplet kant og en
 * tom ring. */
.fund-item {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
}

.fund-item[data-found="true"] { border-left: 5px solid var(--ok); }
.fund-item[data-found="false"] { border: 2px dashed var(--ink-faint); }

.fund-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  font-weight: 700;
}

.fund-label {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  color: #fff;
  background: #1b1f23;
  border-radius: 2px;
}

.fund-type { color: var(--ink-soft); }
.fund-found { margin-left: auto; }
.fund-item[data-found="true"] .fund-found { color: var(--ok); }
.fund-item[data-found="false"] .fund-found { color: var(--ink-faint); }

.fund-text,
.fund-action {
  max-width: var(--measure);
  margin-top: 6px;
  font-size: var(--step--1);
}

.fund-action { color: var(--ink-soft); }

.fund-show {
  margin-top: 6px;
  padding: 0;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.fund-show:hover { color: var(--accent-hover); }

.check-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: var(--step--1);
}

.check-list li { display: flex; gap: 8px; padding: 3px 0; }
.check-mark { font-weight: 700; min-width: 1em; }
.check-list li[data-ok="true"] .check-mark { color: var(--ok); }
.check-list li[data-ok="false"] .check-mark { color: var(--bad); }
.check-list li[data-ok="false"] { font-weight: 600; }

/* ── Heuristikken ────────────────────────────────────────────────────────── */

.hpins {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.hpin {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.hpin-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
}

.hpin-no {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 13px;
  color: #14425c;
  background: #fff;
  border: 2px solid #14425c;
  border-radius: var(--r-round);
}

.hpin-rm {
  margin-left: auto;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.hpin-row {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 560px) {
  .hpin-row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

.hpin-field select {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
}

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

/* ── Oversigten ──────────────────────────────────────────────────────────── */

.matrix td { font-variant-numeric: tabular-nums; }

.cell-mine { display: block; font-weight: 700; }
.cell-ours { display: block; font-size: 12px; color: var(--ink-faint); }
.cell-count { font-weight: 700; }

.matrix td[data-gap="true"] {
  outline: 2px dashed var(--ink-faint);
  outline-offset: -4px;
}

.summary .step-actions { margin-top: 16px; }

/* I fuld bredde står fundene side om side, i stedet for en lang søjle. */
@media (min-width: 860px) {
  .fund {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
  }
  .fund-item { margin-top: 0; }
}