/* Ækvivalens. Alt hentes fra site.css' tokens, og fremgangsmåden, casen,
 * rækkerne og facitkassen er skrevet af fra use specification, så
 * DMD-øvelserne ser ud som hinanden.
 *
 * Det nye er tabellen, der stiller kandidaten og et device side om side, og
 * kendelsen under den: tre felter, hvor det, vurderingen lander på, er fyldt
 * og bærer »● Jeres« - ikke kun en farve.
 *
 * Tre ting må ikke ligne hinanden. Valget, før tjekket, er fyldt med accent.
 * Vurderingen 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. Kravet »samme« er et
 * fyldt mærke og »lignende« et tomt med kant, og ordet står i begge.
 */

: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-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, .8fr) minmax(0, 1.2fr); }
}

/* Baggrunden er billedernes egen, så der ikke blinker en anden farve, mens
 * billedet hentes. */
.case-photo,
.dev-photo {
  margin: 0;
  overflow: hidden;
  background: #e9edf0;
  border-radius: var(--r-control);
}

.case-photo img,
.dev-photo img { display: block; width: 100%; height: auto; }

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

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

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 16px;
  margin: 16px 0 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,
.part > div > .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 ───────────────────────────────────────────────────── */

.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 .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-nr { font-size: 13px; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.row-en { font-weight: 650; }
.row-text { margin-top: 2px; max-width: 68ch; color: var(--ink-soft); }

.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);
}

[data-mark="rigtig"] { background: var(--ok-soft); }
[data-mark="ogsaa"] { background: var(--maybe-soft); }
[data-mark="forkert"] { background: var(--bad-soft); }

.row[data-mark="rigtig"] { border: 2px solid var(--ok); padding: 11px 13px; }
.row[data-mark="ogsaa"] { border-left: 6px solid var(--maybe); padding-left: 9px; }
.row[data-mark="forkert"] { border: 2px dashed var(--bad); padding: 11px 13px; }

[data-mark="rigtig"] .row-tag { color: var(--ok); }
[data-mark="ogsaa"] .row-tag { color: var(--maybe); }
[data-mark="forkert"] .row-tag { color: var(--bad); }

/* Valgene 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); }
/* Valgt bliver ved med at se valgt ud, også under markøren. */
.pick[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }
.pick:disabled { cursor: default; }
.pick:disabled:not([aria-pressed="true"]) { opacity: .55; }
.pick-mark { font-size: 15px; line-height: 1; }

@media (max-width: 859px) {
  .rows .picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
  .rows .pick { justify-content: center; padding: 8px 6px; text-align: center; font-size: 13px; }
}

/* ── Trin 2: forklaringen ────────────────────────────────────────────────── */

.legend {
  display: grid;
  gap: 8px 22px;
  margin: 16px 0 0;
  padding: 14px 16px;
  background: var(--paper-sunk);
  border-radius: var(--r-control);
  font-size: var(--step--1);
}

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

.legend div { display: grid; gap: 4px; align-content: start; }
.legend dt { font-weight: 700; }
.legend dd { margin: 0; color: var(--ink-soft); }

/* Kravet: »samme« er fyldt, »lignende« er tomt med kant. Ordet står i
 * begge, så de kan skilles uden at se på fyldet. */
.tag {
  display: inline-block;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: var(--r-round);
  white-space: nowrap;
}

.tag[data-krav="samme"] { background: var(--ink-soft); color: var(--paper); border: 1px solid var(--ink-soft); }
.tag[data-krav="lignende"] { background: transparent; color: var(--ink-soft); border: 1px dashed var(--ink-soft); }

/* ── Trin 2: de fire devices ─────────────────────────────────────────────── */

.picker {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  scroll-margin-top: 90px;
}

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

@media (min-width: 1000px) {
  .picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pick-dev {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  cursor: pointer;
  transition: border-color .15s var(--ease);
}

.pick-dev:hover { border-color: var(--edge); }
.pick-dev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pick-dev-no {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-round);
}

.pick-dev-name { font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.pick-dev-state { font-size: 12.5px; color: var(--ink-faint); }
.pick-dev-mark { margin-right: 5px; }

/* Tjekket: nummeret er fyldt. Her er du: tyk kant om hele kortet. */
.pick-dev[data-state="tjekket"] .pick-dev-no { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pick-dev[data-state="gang"] .pick-dev-no { border: 2px solid var(--ink-faint); }

.pick-dev[aria-current="step"] {
  border: 2px solid var(--accent);
  padding: 9px 11px;
  background: var(--accent-soft);
}

.dev { margin-top: 18px; }

.dev-head {
  display: grid;
  gap: 16px 24px;
  align-items: start;
}

@media (min-width: 760px) {
  .dev-head { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); }
}

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

.dev-name { margin-top: 4px; font-size: var(--step-1); }
.dev-intro { max-width: var(--measure); margin-top: 8px; color: var(--ink-soft); }
.dev-access { max-width: var(--measure); margin-top: 8px; font-size: var(--step--1); color: var(--ink-soft); }
.dev-access strong { color: var(--ink); }

/* ── Tabellen ────────────────────────────────────────────────────────────
 *
 * Fire spalter på en bred skærm: karakteristikum, kandidaten, devicet og
 * vurderingen. På en smal står cellerne under hinanden, og hver celle bærer
 * sit eget navn. Rækker, der står som kandidaten, er dæmpede: der er intet at
 * vurdere. */

.cmp {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}

.cmp-head { display: none; }

.cmp-set {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 14px;
  margin-top: 10px;
  padding: 6px 2px;
  border-bottom: 2px solid var(--line-strong);
}

.cmp-set-name { display: flex; gap: 10px; align-items: baseline; font-size: var(--step-1); font-weight: 700; }
.cmp-set-en { font-size: 13px; font-weight: 500; color: var(--ink-faint); }

.cmp-set-status { font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.cmp-set-mark { margin-right: 6px; }
.cmp-set[data-status="holder"] .cmp-set-status { color: var(--ok); }
.cmp-set[data-status="falder"] .cmp-set-status { color: var(--bad); }

.cmp-row {
  display: grid;
  gap: 8px 16px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: var(--paper);
}

.cmp-row[data-preset="true"] { background: var(--paper-sunk); border-color: var(--line); }
.cmp-row[data-preset="true"] .cmp-val { color: var(--ink-faint); }

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

.cmp-name { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; align-content: start; }
.cmp-name-text { font-weight: 650; line-height: 1.35; }
.cmp-name .row-tag { flex-basis: 100%; }

.cmp-cell { display: grid; gap: 2px; align-content: start; font-size: var(--step--1); }
.cmp-label { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.cmp-cand .cmp-val { color: var(--ink-soft); }
.cmp-same { font-style: italic; }

.cmp-judge { display: grid; gap: 6px; align-content: start; justify-items: start; }

.cmp-preset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-faint);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-control);
}

/* En række, der ikke holder kravet, siger det selv - med kryds og ord. */
.cmp-fails { font-size: 12.5px; font-weight: 700; color: var(--bad); }
.cmp-fails-mark { margin-right: 5px; }

.cmp-why { grid-column: 1 / -1; }

@media (min-width: 1000px) {
  .cmp-head {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 290px;
    gap: 16px;
    padding: 0 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .cmp-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.1fr) 290px; }
  .cmp-label { display: none; }
}

@media (max-width: 999px) {
  .cmp-judge .picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-self: stretch; width: 100%; }
  .cmp-judge .pick { justify-content: center; padding: 8px 6px; font-size: 13px; }
}

/* ── Kendelsen ───────────────────────────────────────────────────────────── */

.verdict {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}

.verdict-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.verdict-title { font-weight: 700; }
.verdict-live { font-size: var(--step--1); color: var(--ink-soft); }

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

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

.tile {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 11px 13px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}

.tile-name { font-weight: 700; }
.tile-short { font-size: 13px; color: var(--ink-soft); }
.tile-marks { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.tile-mark { font-size: 12.5px; font-weight: 700; }

/* Der, hvor vurderingen lander: fyldt med accent. */
.tile[data-on="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tile[data-on="true"] .tile-short { color: var(--on-accent); }

/* Facit efter tjekket: fyldt grøn kant med flueben. Lander vurderingen et
 * andet sted, får det felt en stiplet rød kant. */
.tile[data-facit="true"] { box-shadow: 0 0 0 3px var(--ok); }
.tile[data-facit="false"] { outline: 3px dashed var(--bad); outline-offset: 2px; }
.tile-facit { color: var(--ok); }
.tile[data-on="true"] .tile-facit { color: var(--on-accent); }

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

/* ── 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-note strong { color: var(--ink); }
.feedback-next { margin-top: 12px; }

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

/* ── Trin 3: kravene ─────────────────────────────────────────────────────── */

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

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

.krav-row[data-mark="rigtig"] { border: 2px solid var(--ok); padding: 9px 13px; }
.krav-row[data-mark="forkert"] { border: 2px dashed var(--bad); padding: 9px 13px; }

.krav-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.krav-label input {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.krav-label input:disabled { cursor: default; }
.krav-text { max-width: 72ch; }

.krav-row .row-tag,
.krav-row .row-why { margin-left: 31px; }

/* ── Skruen ──────────────────────────────────────────────────────────────── */

.skru {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

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

.skru-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: 14px;
}

.skru-pick { display: grid; gap: 6px; }
.skru-label { font-size: 13px; font-weight: 700; color: var(--ink-faint); }

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

.skru-title { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }

.skru-case {
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--r-round);
}

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

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

.skru-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 7px 10px;
  font-size: var(--step--1);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.skru-mark { font-weight: 700; grid-row: 1 / span 2; }
.skru-mark span { margin-right: 6px; }
.skru-src { grid-column: 2; font-size: 12.5px; color: var(--ink-faint); }

/* Et krav, der gælder, er fyldt og har fuld kant; et, der ikke gælder, er
 * dæmpet og stiplet. */
.skru-item[data-on="true"] { border: 2px solid var(--accent); padding: 6px 9px; }
.skru-item[data-on="true"] .skru-mark { color: var(--accent); }
.skru-item[data-on="false"] { border-style: dashed; color: var(--ink-faint); }
.skru-item[data-on="false"] .skru-text { color: var(--ink-faint); }

/* ── 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-list {
  max-width: var(--measure);
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--ink-soft);
}

.summary-list strong { color: var(--ink); }
.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, .pick-dev, .tile { transition: none; }
}