/* Den farligste antagelse. Lægger sig oven på assets/site.css og sporets
 * innovation.css, som har rammen, reglens boks, dommen, optællingen og rummet.
 *
 * Koncepterne står som et lille datablad: titel og fem nummererede linjer.
 * Buddene er en liste af knapper, fordi de er sætninger og ikke ord. Dit svar
 * og facit står som ord ved buddet; den farligste antagelse på boardet har en
 * tyk ramme og ordet. Intet aflæses af farve alene. */

/* ── Koncepterne ────────────────────────────────────────────────────── */

.koncepter {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  max-width: 520px;
  margin: 18px 0 0;
  padding: 0;
}

.k-btn {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  padding: 7px 4px;
  font-size: 12px;
  color: var(--ink-faint);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  cursor: pointer;
}

.k-btn:hover { color: var(--ink); border-color: var(--ink-faint); }
.k-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.k-felt.is-her .k-btn { color: var(--ink); border: 2px solid var(--ink); padding: 6px 3px; font-weight: 600; }
.k-maerke { letter-spacing: .2em; }

.koncept { margin-top: 20px; scroll-margin-top: 90px; }

.k-titel { margin-top: 4px; font-size: var(--step-2); letter-spacing: -.02em; }

/* Databladet: fem linjer med nummer i fastbredde. */
.k-linjer {
  max-width: 60ch;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: linje;
  border-top: 1px solid var(--ink);
}

.k-linjer li {
  counter-increment: linje;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-strong);
}

.k-linjer li::before {
  content: counter(linje, decimal-leading-zero);
  font-size: 12px;
  color: var(--ink-faint);
  padding-top: 2px;
}

.spm { max-width: 760px; margin-top: 22px; }
.spm[hidden] { display: none; }
.spm-navn { font-size: var(--step-1); font-weight: 700; }

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

.bud-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-size: var(--step--1);
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  cursor: pointer;
}

.bud-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--paper-sunk); }
.bud-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bud-btn:disabled { cursor: default; color: var(--ink-soft); }
.bud-btn.is-valgt { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.bud-btn.is-facit { box-shadow: inset 0 0 0 3px var(--ink); color: var(--ink); }
.bud-btn.is-valgt.is-facit { color: var(--on-accent); }
.bud-tekst { flex: 1 1 30ch; }

.bud-tag {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dom-april { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); color: var(--ink); }
.dom-april:empty { display: none; }

/* ── Del 2 ──────────────────────────────────────────────────────────── */

.del-2 { margin-top: clamp(44px, 6vw, 72px); scroll-margin-top: 80px; }
.del2-head { margin-top: 4px; font-size: var(--step-3); font-weight: 760; letter-spacing: -.03em; }

.hent[hidden] { display: none; }

.hent {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

.hent-valg { display: flex; gap: 10px; align-items: baseline; font-weight: 600; cursor: pointer; }
.hent-valg input { width: 18px; height: 18px; accent-color: var(--accent); }
.hent-tekst { margin-top: 6px; font-size: 13px; color: var(--ink-soft); }

.koncept-felt { max-width: 760px; margin-top: 16px; }

.koncept-felt textarea,
.p-tekst,
.viste-felt textarea {
  padding: 10px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  resize: vertical;
}

.felt-status { font-size: 11px; color: var(--ink-faint); }
.felt-status:empty, .felt-status[hidden] { display: none; }
.felt-hjaelp { font-size: 13px; color: var(--ink-soft); }

.a-ny {
  display: grid;
  gap: 10px 14px;
  max-width: 820px;
  margin-top: 14px;
}

@media (min-width: 720px) {
  .a-ny { grid-template-columns: minmax(0, 1fr) 12rem auto; align-items: end; }
}

.a-ny select {
  height: 46px;
  padding: 0 10px;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
}

.a-ny .btn { height: 46px; }

.add-hint { margin-top: 8px; font-size: 13px; color: var(--ink); }
.add-hint[hidden] { display: none; }

.antagelser {
  display: grid;
  gap: 8px;
  max-width: 820px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.antagelse {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

.antagelse .btn { min-width: 10em; }
.antagelse.is-farligst { outline: 4px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }

.a-tekst-ud { display: grid; gap: 2px; }
.a-meta { font-size: 11px; color: var(--ink-faint); }

.mark {
  padding: 2px 7px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px dotted var(--edge);
  border-radius: 2px;
  cursor: pointer;
}

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

.tom-linje {
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--ink-faint);
  border: 1px dashed var(--line-strong);
}

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

@media (max-width: 560px) {
  .antagelse { grid-template-columns: minmax(0, 1fr) auto; }
  .antagelse .btn { grid-column: 1 / -1; justify-self: start; }
}

/* ── Prøven ─────────────────────────────────────────────────────────── */

.valgt-antagelse { max-width: 60ch; margin-top: 12px; font-size: var(--step-1); font-weight: 650; }
.valgt-antagelse.is-tom { font-size: var(--step-0); font-weight: 400; color: var(--ink-faint); }

.p-felter { display: grid; gap: 16px; max-width: 760px; margin-top: 16px; }

/* Et nej er det, der oftest springes over. Feltet har en tyk kant i venstre
 * side og ordet nødvendigt, ikke en farve. */
.p-felt.is-noedvendig { padding-left: 12px; border-left: 4px solid var(--ink); }
.p-felt.is-noedvendig > label::after {
  content: " — nødvendigt";
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
}

.datoer { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 16px; }

.datoer input {
  height: 44px;
  padding: 0 10px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
}

.advarsel {
  max-width: var(--measure);
  margin-top: 12px;
  padding: 10px 14px;
  font-size: var(--step--1);
  border: 1px dashed var(--ink);
}

.advarsel[hidden] { display: none; }

/* ── Tag den med ────────────────────────────────────────────────────── */

.med { display: grid; gap: 8px; justify-items: start; margin-top: 14px; }

.med-antagelse {
  max-width: 46ch;
  margin: 0 0 4px;
  padding: 16px 20px 22px;
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.35;
  color: var(--sticky-ink);
  background: var(--sticky);
  box-shadow: var(--sticky-shadow);
}

.med-linje { max-width: var(--measure); color: var(--ink-soft); }

.med-mangler {
  max-width: var(--measure);
  padding: 10px 14px;
  font-size: var(--step--1);
  border: 1px dashed var(--ink);
}

.viste-felt { max-width: 760px; margin-top: 20px; }

.hjemme {
  max-width: var(--measure);
  margin: 18px 0 0;
  padding: 12px 0 0 1.2em;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}