/* "Tre ting, det ændrer": svar-kortet (ejervalg retning A, 2026-09-28).
   Bruges af kontrakter-og-dokumenter, oekonomi-og-bogfoering og
   loen-og-medarbejdere. Alle farver fra tokens i style.css og kaedemodul.css.

   Grundtilstanden er den faerdige tilstand. js/tre-ting.js saetter .tt-klar
   (udgangspunkt) og loeser raekkerne en ad gangen, saa kortet er komplet
   uden JS og ved reduceret bevaegelse. */

body.page-modul {
  --tt-streg: .5px solid var(--border);
  --tt-flade: linear-gradient(165deg, #e3f5ec 0%, var(--mint) 100%);
}

/* ── Fladen og kortet ─────────────────────────────────────────────────── */
.tt-scene {
  max-width: 1150px;
  margin: 0 auto;
  padding: clamp(40px, 6.4vw, 96px) clamp(18px, 4vw, 48px);
  border-radius: 12px;
  background: var(--tt-flade);
  display: grid;
  place-items: center;
}
.tt-kort {
  width: 100%;
  max-width: 660px;
  background: #fff;
  border-radius: 12px;
  padding: 6px 8px 4px;
}

.tt-top {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 6px 16px; flex-wrap: wrap;
  padding: 14px 14px 12px;
  border-bottom: var(--tt-streg);
}
.tt-top-tx { display: flex; flex-direction: column; min-width: 0; }
.tt-titel { font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; color: var(--t1); }
.tt-meta { font-size: .8rem; color: var(--t3); }
.tt-tal { font-size: .82rem; color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-tal b { color: var(--t1); font-weight: 600; }

.tt-liste { list-style: none; margin: 0; padding: 0; }
.tt-rk {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 16px 14px;
}
.tt-rk + .tt-rk { border-top: var(--tt-streg); }
.tt-tx h3 { font-family: 'DM Sans', sans-serif; font-size: 1.02rem; font-weight: 600; letter-spacing: -.012em; color: var(--t1); margin: 0 0 3px; }
.tt-tx p { font-size: .88rem; line-height: 1.5; color: var(--t2); margin: 0; }

/* Ikon: groen flueben (ok) eller rav udraabstegn (obs) */
.tt-ik {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--mint); background: var(--mint); color: var(--mint-ink);
  transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out;
}
.tt-ik svg { width: 13px; height: 13px; transition: opacity .25s ease-out, transform .4s var(--km-ud); }
.tt-rk-obs .tt-ik { border-color: var(--amber-bg); background: var(--amber-bg); color: var(--amber-txt); }

/* Status-pille. Slut- og ventetekst deler celle, saa pillen ikke skifter
   bredde undervejs og teksten ved siden af ikke brydes om. */
.tt-pill {
  display: inline-grid; align-items: center; justify-items: center; white-space: nowrap;
  font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 600; letter-spacing: -.005em;
  padding: 4px 10px; border-radius: 6px; line-height: 1.2;
  background: var(--mint); color: var(--mint-ink);
  transition: background-color .35s ease-out, color .35s ease-out;
}
.tt-pill > span { grid-area: 1 / 1; }
.tt-rk-obs .tt-pill { background: var(--amber-bg); color: var(--amber-txt); }
.tt-pill-vent { visibility: hidden; display: inline-flex; align-items: center; }
.tt-pill-vent::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--t3); margin-right: 6px;
  animation: tt-puls 1.1s ease-out infinite;
}
@keyframes tt-puls { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } }

/* Fodlinje: konsekvensen af de tre svar */
.tt-fod {
  display: flex; align-items: baseline; gap: 9px;
  margin: 0 6px; padding: 12px 8px 12px;
  border-top: var(--tt-streg);
  font-size: .82rem; color: var(--t2);
}
.tt-fod-prik { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-ink); transform: translateY(-1px); }
.tt-fod-obs .tt-fod-prik { background: var(--amber); }

/* ── Udgangspunkt (kun naar JS har gjort klar) ───────────────────────── */
.tt-klar .tt-rk { opacity: 0; transform: translateY(10px); }
.tt-klar .tt-rk .tt-ik { background: #fff; border-color: var(--border-md); }
.tt-klar .tt-rk .tt-ik svg { opacity: 0; transform: scale(.6); }
.tt-klar .tt-rk .tt-pill { background: #f2f0ec; color: var(--t3); }
.tt-klar .tt-rk .tt-pill-slut { visibility: hidden; }
.tt-klar .tt-rk .tt-pill-vent { visibility: visible; }
.tt-klar .tt-fod { opacity: 0; transform: translateY(6px); }

.tt-klar .tt-rk.tt-ind { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .7s var(--km-ud); }
.tt-klar .tt-rk.tt-loest .tt-ik { background: var(--mint); border-color: var(--mint); }
.tt-klar .tt-rk-obs.tt-loest .tt-ik { background: var(--amber-bg); border-color: var(--amber-bg); }
.tt-klar .tt-rk.tt-loest .tt-ik svg { opacity: 1; transform: none; }
.tt-klar .tt-rk.tt-loest .tt-pill { background: var(--mint); color: var(--mint-ink); }
.tt-klar .tt-rk-obs.tt-loest .tt-pill { background: var(--amber-bg); color: var(--amber-txt); }
.tt-klar .tt-rk.tt-loest .tt-pill-slut { visibility: visible; }
.tt-klar .tt-rk.tt-loest .tt-pill-vent { visibility: hidden; }
.tt-klar .tt-fod.tt-ind { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .7s var(--km-ud); }

/* Ude af syne: pulsen holder pause */
.tt-pause .tt-pill-vent::before { animation-play-state: paused; }

@media (max-width: 560px) {
  .tt-kort { padding: 4px 4px 2px; }
  .tt-top { padding: 12px 12px 10px; }
  .tt-rk { grid-template-columns: 22px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 14px 12px; }
  .tt-rk .tt-ik { margin-top: 2px; }
  .tt-rk .tt-pill { grid-column: 2; justify-self: start; }
  .tt-fod { margin: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-pill-vent::before { animation: none; }
}