/* Use specification som case. Alt hentes fra site.css' tokens, og
 * fremgangsmåden, casen og facitkassen er skrevet af fra »Hvad blev overset?«
 * og task-analysen, så usability-øvelserne ser ud som hinanden.
 *
 * Det nye er rækkerne med tre valg under hver og noterne, der lægges i
 * fabrikantens tabel.
 *
 * Tre ting må ikke ligne hinanden. Valget, før tjekket, er fyldt med accent.
 * Vurderingen i trin 1 er ●, ◐ og ○. Facit er grøn, gul og rød med flueben og
 * fyldt kant, spørgsmålstegn og tyk venstrekant, kryds og stiplet kant - og
 * ordet står ved siden af. Farven bærer det aldrig alene.
 */

: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;
  }
}

.page-head .lede.lede-moved { margin-top: 10px; font-size: var(--step--1); color: var(--ink-faint); }

/* ── 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-body {
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

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

.case {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  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, 1fr) 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);
}

/* Løfterens data som en lille tabel: det er dem, begrundelserne peger
 * tilbage på. */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
  padding: 14px 16px;
  background: var(--paper-sunk);
  border-radius: var(--r-control);
  font-size: var(--step--1);
}

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

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

.part {
  margin-top: clamp(24px, 3.4vw, 36px);
  padding: clamp(20px, 2.8vw, 32px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  box-shadow: var(--shadow);
  scroll-margin-top: 90px;
}

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

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

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

.sub-head {
  font-size: var(--step-1);
}

/* ── Rækkerne i trin 1 og 2 ──────────────────────────────────────────────
 *
 * Teksten til venstre og de tre valg til højre på en bred skærm, under
 * hinanden på en smal. Efter tjekket får rækken facits kant, og
 * begrundelsen står under den i hele bredden. */

.rows {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}

.row {
  display: grid;
  gap: 10px 20px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}

@media (min-width: 860px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .row-why { grid-column: 1 / -1; }
}

.row-top { display: grid; gap: 6px; }

.row-name { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.row-en { font-weight: 650; }
.row-da { font-size: 13px; color: var(--ink-faint); }
.row-text { margin-top: 2px; max-width: 68ch; color: var(--ink-soft); }
.row-text.person { margin-top: 0; color: var(--ink); }
.row-text strong { font-weight: 650; }

.row-tag { font-size: 13px; font-weight: 700; }
.row-tag-mark { margin-right: 6px; }

.row-why {
  max-width: var(--measure);
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.row[data-mark="rigtig"] { background: var(--ok-soft); border: 2px solid var(--ok); padding: 11px 13px; }
.row[data-mark="rigtig"] .row-tag { color: var(--ok); }

.row[data-mark="ogsaa"] { background: var(--maybe-soft); border-left: 6px solid var(--maybe); padding-left: 9px; }
.row[data-mark="ogsaa"] .row-tag { color: var(--maybe); }

.row[data-mark="forkert"] { background: var(--bad-soft); border: 2px dashed var(--bad); padding: 11px 13px; }
.row[data-mark="forkert"] .row-tag { color: var(--bad); }

/* De tre valg som en samlet knaprække. Valgt er fyldt. */
.picks {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  overflow: hidden;
  background: var(--paper);
}

.pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}

.pick + .pick { border-left: 1px solid var(--edge); }
.pick:hover:not(:disabled) { color: var(--ink); background: var(--paper-sunk); }
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pick[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.pick:disabled { cursor: default; }
.pick:disabled:not([aria-pressed="true"]) { opacity: .55; }
.pick-mark { font-size: 15px; line-height: 1; }

/* På en smal skærm står de tre valg i lige store felter i hele bredden, så
 * de ikke brydes ned på hver sin linje. */
@media (max-width: 859px) {
  .picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; }
  .pick { justify-content: center; padding: 8px 6px; text-align: center; font-size: 13px; }
}

/* ── Trin 3: noterne og tabellen ─────────────────────────────────────────── */

.sort {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
  margin-top: 18px;
}

@media (min-width: 900px) {
  .sort { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  /* Bunken følger med ned, mens tabellen rulles. */
  .pile-wrap { position: sticky; top: 84px; }
}

/* Efter tjekket er bunken tom og låst, så tabellen får hele bredden. */
.sort[data-done="true"] { grid-template-columns: minmax(0, 1fr); }
.sort[data-done="true"] .pile-wrap { display: none; }

.pile-wrap,
.bins-wrap {
  display: grid;
  gap: 10px;
  align-content: start;
}

.pile-wrap {
  padding: 12px;
  background: var(--paper-sunk);
  border-radius: var(--r-control);
}

.pile,
.bin-notes {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.pile-empty { font-size: var(--step--1); color: var(--ink-faint); }
.pile-back { justify-self: start; }

.note-card {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: var(--step--1);
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  cursor: grab;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}

.note-card:hover:not(:disabled) { border-color: var(--ink-faint); }
.note-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-card:disabled { cursor: default; }

.note-card[aria-pressed="true"] {
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  padding: 8px 11px;
}

.note-tag { font-size: 12px; font-weight: 700; color: var(--accent); }
.note-tag-mark { margin-right: 5px; }

.note-card[data-mark="rigtig"] { background: var(--ok-soft); border: 2px solid var(--ok); padding: 8px 11px; }
.note-card[data-mark="rigtig"] .note-tag { color: var(--ok); }
.note-card[data-mark="ogsaa"] { background: var(--maybe-soft); border-left: 6px solid var(--maybe); padding-left: 7px; }
.note-card[data-mark="ogsaa"] .note-tag { color: var(--maybe); }
.note-card[data-mark="forkert"] { background: var(--bad-soft); border: 2px dashed var(--bad); padding: 8px 11px; }
.note-card[data-mark="forkert"] .note-tag { color: var(--bad); }

.note-why {
  margin: 4px 0 6px 12px;
  font-size: 13px;
  color: var(--ink-soft);
}

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

/* En række i tabellen: navnet og fabrikantens udkast øverst - det er også
 * knappen, der lægges på - og noterne under. De to rækker uden udkast står
 * stiplet nederst: de er ikke en del af tabellen. */
.bin {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}

.bin[data-uden="true"] { border-style: dashed; }
.bin[data-bin="andet"] { margin-top: 10px; }

.bin-target {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.bin-target:disabled { cursor: default; color: var(--ink); }
.bin-target:not(:disabled):hover { background: var(--paper-sunk); }
.bin-target:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.bin-name { font-weight: 650; }
.bin-draft { grid-column: 1; font-size: 13px; color: var(--ink-faint); }
.bin-draft-label { font-weight: 600; }

.bin-here {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  border: 1.5px dashed var(--accent);
  border-radius: var(--r-round);
}

/* Trækket: originalen falmer, skyggen følger markøren, og rækken under den
 * får en tyk stiplet kant. Skyggen flyttes fra drag.js med
 * element.style.transform, som CSP'en tillader. */
[data-dragging] { opacity: .35; }

.shadow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  pointer-events: none;
  box-shadow: var(--shadow-lift);
  transform: translate(-1000px, -1000px);
}

body[data-traek] { cursor: grabbing; -webkit-user-select: none; user-select: none; }

[data-bin][data-over] {
  outline: 3px dashed var(--accent);
  outline-offset: 2px;
}

/* ── Tjek og facit ───────────────────────────────────────────────────────── */

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

.step-actions:not(:has(> :not([hidden]))) { display: none; }

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

.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="rigtig"] .feedback-mark { color: var(--ok); }

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

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

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

.table-wrap {
  margin-top: 8px;
  overflow-x: auto;
}

.facit-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--step--1);
  background: var(--paper);
}

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

.facit-table thead th { background: var(--paper-sunk); font-weight: 700; }
.facit-table th[scope="row"] { font-weight: 650; white-space: nowrap; }

/* Fabrikantens ord står gennemstreget: det er dem, noterne erstatter. */
.facit-draft { color: var(--ink-faint); text-decoration: line-through; }

/* ── Til sidst ───────────────────────────────────────────────────────────── */

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

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

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

.summary-next { color: var(--ink); }

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

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

@media (prefers-reduced-motion: reduce) {
  .pick, .note-card { transition: none; }
}