/* ==========================================================================
   hvemkiggermed.dk - sitets egne stilarter
   Bygger oven på det delte fundament.css. Alt her hører kun til dette site.
   ========================================================================== */

/* --- Sidehoved ----------------------------------------------------------- */

.hkm-top {
  border-bottom: 1px solid var(--ds-linje);
  background: var(--ds-papir);
  position: sticky;
  top: 0;
  z-index: 20;
}

.hkm-top__indhold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-r3);
  padding-top: var(--ds-r3);
  padding-bottom: var(--ds-r3);
}

.hkm-maerke {
  font-family: var(--ds-skrift-brand);
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.5rem);
  color: var(--ds-blaek);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.hkm-maerke__oeje {
  width: 1.35em;
  height: 1.35em;
  flex: none;
  color: var(--ds-accent);
}

.hkm-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-r3);
  font-size: var(--ds-t-lille);
}
.hkm-menu a { color: var(--ds-blaek-daempet); }
.hkm-menu a[aria-current="page"] { color: var(--ds-accent); font-weight: 600; }

/* --- Forsidens hero ------------------------------------------------------ */

.hkm-hero {
  padding: var(--ds-r6) 0 var(--ds-r5);
  background:
    linear-gradient(180deg, var(--ds-papir-2) 0%, var(--ds-papir) 100%);
  border-bottom: 1px solid var(--ds-linje);
}

.hkm-hero h1 { font-size: var(--ds-t-h1); margin-bottom: var(--ds-r3); }

.hkm-hero__spm {
  display: block;
  font-size: var(--ds-t-lille);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--ds-skrift-tekst);
  font-weight: 700;
  color: var(--ds-accent);
  margin-bottom: var(--ds-r3);
}

.hkm-hero__knapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-r3);
  align-items: center;
  margin-top: var(--ds-r4);
}

/* Fakta-stribe: hvem, hvor lang tid, hvad der kræves */
.hkm-fakta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--ds-r3);
  margin-top: var(--ds-r5);
  padding: 0;
  list-style: none;
}
.hkm-fakta li {
  max-width: none;
  border-left: 3px solid var(--ds-accent);
  padding-left: var(--ds-r3);
}
.hkm-fakta b {
  display: block;
  font-family: var(--ds-skrift-brand);
  font-size: var(--ds-t-h3);
  line-height: 1.2;
}
.hkm-fakta span {
  font-size: var(--ds-t-lille);
  color: var(--ds-blaek-daempet);
}

/* --- Trin-liste ---------------------------------------------------------- */

.hkm-trin {
  list-style: none;
  counter-reset: trin;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--ds-r4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.hkm-trin li {
  max-width: none;
  counter-increment: trin;
  padding-top: var(--ds-r3);
  border-top: 2px solid var(--ds-linje-staerk);
}
.hkm-trin li::before {
  content: counter(trin);
  display: block;
  font-family: var(--ds-skrift-brand);
  font-size: var(--ds-t-h2);
  line-height: 1;
  color: var(--ds-accent);
  margin-bottom: var(--ds-r2);
}
.hkm-trin h3 { margin-bottom: var(--ds-r2); }
.hkm-trin p { margin: 0; font-size: var(--ds-t-lille); color: var(--ds-blaek-daempet); }

/* --- Løfte-boks: hvad siden selv gør ------------------------------------- */

.hkm-loefte {
  background: var(--ds-accent-flade);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-runding);
  padding: var(--ds-r4);
}
.hkm-loefte h2 { font-size: var(--ds-t-h3); margin-bottom: var(--ds-r2); }
.hkm-loefte ul { margin: 0 0 var(--ds-r3); padding-left: 1.2em; }
.hkm-loefte li { margin-bottom: var(--ds-r1); }
.hkm-loefte p:last-child { margin-bottom: 0; }

/* --- Værktøjets dele ----------------------------------------------------- */

.hkm-del {
  border-top: 1px solid var(--ds-linje);
  padding: var(--ds-r6) 0;
  scroll-margin-top: 5rem;
}
.hkm-del:first-of-type { border-top: 0; }

.hkm-del__nr {
  display: inline-block;
  font-family: var(--ds-skrift-tekst);
  font-size: var(--ds-t-lille);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-accent);
  background: var(--ds-accent-flade);
  border-radius: 999px;
  padding: 0.3em 0.95em;
  margin-bottom: var(--ds-r3);
}

/* Indholdsfortegnelse i værktøjet */
.hkm-dele-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-r2);
  padding: 0;
  margin: var(--ds-r4) 0 0;
  list-style: none;
}
.hkm-dele-nav li { max-width: none; }
.hkm-dele-nav a {
  display: block;
  border: 1px solid var(--ds-linje-staerk);
  border-radius: 999px;
  padding: 0.4em 1em;
  font-size: var(--ds-t-lille);
  text-decoration: none;
  color: var(--ds-blaek);
  background: var(--ds-papir);
}
.hkm-dele-nav a:hover { background: var(--ds-accent-flade); border-color: var(--ds-accent); }

/* --- Signaltabel (del 1) ------------------------------------------------- */

.hkm-signaler {
  display: grid;
  gap: var(--ds-r2);
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  margin-top: var(--ds-r4);
}

.hkm-signal {
  background: var(--ds-papir-2);
  border: 1px solid var(--ds-linje);
  border-left: 4px solid var(--ds-linje-staerk);
  border-radius: var(--ds-runding-lille);
  padding: var(--ds-r3);
}
.hkm-signal--fundet { border-left-color: var(--ds-accent); }
.hkm-signal--mangler { border-left-color: var(--ds-linje-staerk); opacity: 0.85; }

.hkm-signal__navn {
  font-size: var(--ds-t-lille);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ds-blaek-daempet);
  margin: 0 0 var(--ds-r1);
  max-width: none;
}
.hkm-signal__vaerdi {
  font-family: var(--ds-skrift-kode);
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.32rem);
  line-height: 1.35;
  color: var(--ds-blaek);
  margin: 0 0 var(--ds-r1);
  max-width: none;
  overflow-wrap: anywhere;
}
.hkm-signal__note {
  font-size: var(--ds-t-lille);
  color: var(--ds-blaek-daempet);
  margin: 0;
  max-width: none;
}

/* --- Fingeraftryk (del 2) ------------------------------------------------ */

.hkm-aftryk {
  display: grid;
  gap: var(--ds-r4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  margin-top: var(--ds-r4);
}
@media (min-width: 60rem) {
  .hkm-aftryk { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

.hkm-hash {
  background: var(--ds-blaek);
  color: var(--ds-papir);
  border-radius: var(--ds-runding);
  padding: var(--ds-r4);
  text-align: center;
}
.hkm-hash__label {
  font-size: var(--ds-t-lille);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 var(--ds-r2);
  max-width: none;
}
.hkm-hash__tal {
  font-family: var(--ds-skrift-kode);
  font-size: var(--ds-t-kaempe);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  margin: 0;
  max-width: none;
  overflow-wrap: anywhere;
}
.hkm-hash__hele {
  font-family: var(--ds-skrift-kode);
  font-size: var(--ds-t-lille);
  opacity: 0.7;
  margin: var(--ds-r3) 0 0;
  max-width: none;
  overflow-wrap: anywhere;
}

.hkm-entropi__tal {
  font-family: var(--ds-skrift-brand);
  font-size: var(--ds-t-h1);
  line-height: 1;
  color: var(--ds-fremhaev);
  display: block;
  margin-bottom: var(--ds-r2);
}

/* Søjler over hvilke signaler der bidrager mest */
.hkm-bidrag { list-style: none; padding: 0; margin: var(--ds-r3) 0 0; }
.hkm-bidrag li {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr auto;
  align-items: center;
  gap: var(--ds-r2);
  font-size: var(--ds-t-lille);
  margin-bottom: var(--ds-r1);
}
.hkm-bidrag__bar {
  height: 0.85em;
  background: var(--ds-accent);
  border-radius: 999px;
  min-width: 2px;
}
.hkm-bidrag__spor { background: var(--ds-papir-3); border-radius: 999px; }

/* Klasseøvelsen */
.hkm-oevelse {
  background: var(--ds-fremhaev-flade);
  border: 1px solid var(--ds-fremhaev);
  border-radius: var(--ds-runding);
  padding: var(--ds-r4);
  margin-top: var(--ds-r4);
}
.hkm-oevelse h3 { color: var(--ds-fremhaev); margin-bottom: var(--ds-r2); }
.hkm-oevelse p:last-child { margin-bottom: 0; }

/* --- Profil (del 3) ------------------------------------------------------ */

.hkm-profil {
  display: grid;
  gap: var(--ds-r3);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: var(--ds-r4);
}
.hkm-profilkort {
  background: var(--ds-papir-2);
  border: 1px solid var(--ds-linje);
  border-radius: var(--ds-runding);
  padding: var(--ds-r3);
}
.hkm-profilkort h3 {
  font-size: var(--ds-t-lille);
  font-family: var(--ds-skrift-tekst);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-blaek-daempet);
  margin-bottom: var(--ds-r2);
}
.hkm-profilkort__slut {
  font-family: var(--ds-skrift-brand);
  font-size: var(--ds-t-h3);
  line-height: 1.2;
  margin: 0 0 var(--ds-r2);
  max-width: none;
}
.hkm-profilkort__fra {
  font-size: var(--ds-t-lille);
  color: var(--ds-blaek-daempet);
  margin: 0;
  max-width: none;
}
.hkm-profilkort__fra code {
  background: var(--ds-papir-3);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.hkm-maerkater {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-r2);
  padding: 0;
  margin: var(--ds-r3) 0 0;
  list-style: none;
}
.hkm-maerkater li {
  max-width: none;
  background: var(--ds-blaek);
  color: var(--ds-papir);
  border-radius: 999px;
  padding: 0.35em 1em;
  font-size: var(--ds-t-lille);
  font-weight: 600;
}

/* --- Hvad forsvinder (del 4) --------------------------------------------- */

.hkm-kontakter {
  display: grid;
  gap: var(--ds-r2);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin: var(--ds-r4) 0;
  padding: 0;
  border: 0;
}
.hkm-kontakter legend {
  font-family: var(--ds-skrift-brand);
  font-size: var(--ds-t-h3);
  font-weight: 700;
  padding: 0;
  margin-bottom: var(--ds-r2);
}

.hkm-kontakt {
  display: flex;
  gap: var(--ds-r2);
  align-items: flex-start;
  background: var(--ds-papir-2);
  border: 2px solid var(--ds-linje);
  border-radius: var(--ds-runding);
  padding: var(--ds-r3);
  cursor: pointer;
}
.hkm-kontakt:hover { border-color: var(--ds-linje-staerk); }
/* :has() findes ikke i ældre browsere, så JavaScript sætter samtidig
   data-valgt="ja" på etiketten. Begge veje giver det samme resultat. */
.hkm-kontakt[data-valgt="ja"],
.hkm-kontakt:has(input:checked) {
  border-color: var(--ds-accent);
  background: var(--ds-accent-flade);
}
.hkm-kontakt input {
  width: 1.35em;
  height: 1.35em;
  margin: 0.18em 0 0;
  flex: none;
  accent-color: var(--ds-accent);
}
.hkm-kontakt b { display: block; }
.hkm-kontakt span {
  font-size: var(--ds-t-lille);
  color: var(--ds-blaek-daempet);
}

.hkm-resultat {
  background: var(--ds-papir-2);
  border: 1px solid var(--ds-linje);
  border-radius: var(--ds-runding);
  padding: var(--ds-r4);
  margin-bottom: var(--ds-r4);
}
.hkm-resultat__tal {
  font-family: var(--ds-skrift-brand);
  font-size: var(--ds-t-h1);
  line-height: 1.05;
  display: block;
  margin-bottom: var(--ds-r2);
}
.hkm-resultat p:last-child { margin-bottom: 0; }

.hkm-liste { list-style: none; padding: 0; margin: 0; }
.hkm-liste li {
  max-width: none;
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
  gap: var(--ds-r2);
  align-items: baseline;
  padding: var(--ds-r2) 0;
  border-bottom: 1px solid var(--ds-linje);
}
.hkm-liste__ikon { font-weight: 700; text-align: center; }
.hkm-liste__navn { font-weight: 600; }
.hkm-liste__note {
  display: block;
  font-size: var(--ds-t-lille);
  font-weight: 400;
  color: var(--ds-blaek-daempet);
}
.hkm-liste li[data-status="vaek"] .hkm-liste__ikon { color: var(--ds-ok); }
.hkm-liste li[data-status="vaek"] .hkm-liste__navn {
  text-decoration: line-through;
  color: var(--ds-blaek-daempet);
}
.hkm-liste li[data-status="delvist"] .hkm-liste__ikon { color: var(--ds-fremhaev); }
.hkm-liste li[data-status="bliver"] .hkm-liste__ikon { color: var(--ds-fremhaev); }

/* --- Fællesting ---------------------------------------------------------- */

.hkm-tovejs {
  display: grid;
  gap: var(--ds-r4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 58rem) {
  .hkm-tovejs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hkm-status {
  font-size: var(--ds-t-lille);
  color: var(--ds-blaek-daempet);
  font-style: italic;
}

.hkm-nobreak { white-space: nowrap; }

/* Uden JavaScript giver værktøjet ingen mening. Sig det i stedet for at
   vise en tom side. */
.hkm-ingen-js {
  background: var(--ds-fremhaev-flade);
  border: 1px solid var(--ds-fremhaev);
  border-radius: var(--ds-runding);
  padding: var(--ds-r4);
  margin: var(--ds-r4) 0;
}