/* =========================================================================
   kamera_coach.css — kamera-coachen (Hevy-runden del 5, Task 5.3, 13-11-2026). Ejes af
   assets/js/kamera_coach/coach.js. Indlæses automatisk efter app.css (index.php).

   Laget dækker hele skærmen (z 52): over fanerne (30), træningsmodus (45) og arkene (50), men under
   rekord-fejringen (58) og beskederne (60). Kameraet er mørkt (billedet skal kunne ses), men knapper og
   kort følger appen: hvide flader uden kanter, kobolt som handling, marine tekst. Solgul bruges ikke her.
   Faserne står i data-fase: start, opstilling, nedtaelling, taeller, pause, fejl.
   color-scheme sættes aldrig (heller ikke på :root).
   ========================================================================= */

/* Siden bag laget: skjult, så figurer og videoer går i stå, mens kameraet kører (coach.js gemmer og genskaber rulningen). */
#side.kc-bag > * { display: none !important; }
body.kc-aaben { overflow: hidden; }

.kc {
    --kc-bund: #07132e;
    --kc-groen: #8fdcaa;
    position: fixed; inset: 0; z-index: 52;
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100dvh; background: var(--kc-bund); color: var(--hvid);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    overscroll-behavior: contain; touch-action: manipulation; font-family: var(--tekst);
}

/* ------------------------------------------------------------------ toppen */
.kc-top { display: grid; grid-template-columns: minmax(0, 1fr) 46px; align-items: center; gap: 12px; padding: 12px 16px 8px; }
.kc-navn { font: 700 20px/1.2 var(--display); color: var(--hvid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-luk { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: var(--hvid); transition: background .15s; }
.kc-luk svg { width: 20px; height: 20px; }
.kc-luk:active { background: rgba(255, 255, 255, .24); }
@media (hover: hover) { .kc-luk:hover { background: rgba(255, 255, 255, .24); } }

/* ------------------------------------------------------------------ billedet */
.kc-scene { position: relative; min-height: 0; overflow: hidden; }
/* contain: man ser præcis det, modellen ser. Lærredet med skelettet har billedets egne mål, så det ligger lige over. */
.kc-video, .kc-skelet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.kc-skelet { pointer-events: none; }
.kc.kc-spejl .kc-video, .kc.kc-spejl .kc-skelet { transform: scaleX(-1); }

/* Omridset: en prikket figur der viser, hvordan man skal stå. Bliver grøn, når hele kroppen er med. */
.kc-omrids { position: absolute; inset: 6% 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .25s; }
.kc[data-fase="start"] .kc-omrids, .kc[data-fase="opstilling"] .kc-omrids { opacity: 1; }
.kc-omrids svg {
    height: 100%; max-width: 70%; fill: none; stroke: rgba(255, 255, 255, .72); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 4.6; transition: stroke .25s;
}
.kc-omrids-ligge svg { width: 88%; height: auto; max-width: 560px; max-height: 100%; }
.kc.kc-med .kc-omrids svg { stroke: var(--kc-groen); }

/* Tallet: stort og øverst, så det kan læses 3 meter væk. */
.kc-tal { position: absolute; top: 6px; left: 0; right: 0; display: none; justify-items: center; text-shadow: 0 2px 22px rgba(0, 0, 0, .45); pointer-events: none; }
.kc[data-fase="taeller"] .kc-tal { display: grid; }
.kc-tal b { font: 800 116px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kc-tal small { margin-top: -2px; font: 650 18px/1.2 var(--tekst); opacity: .88; }
.kc-tal b.slag { animation: kc-slag .32s ease-out; }
@keyframes kc-slag { from { transform: scale(1.16); } to { transform: none; } }

.kc-nedtael {
    position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
    font: 800 168px/1 var(--display); text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.kc-nedtael:empty { display: none; }
.kc-nedtael.slag { animation: kc-ned .9s ease-out; }
@keyframes kc-ned { 0% { transform: scale(.6); opacity: 0; } 25% { transform: none; opacity: 1; } 100% { opacity: .92; } }

/* Rådet: stor linje nederst i billedet. Står i 3,5 sek (coach.js). Hvid flade med marine tekst, så den ikke ligner en
   knap ved siden af den kobolt Stop. */
.kc-raad {
    position: absolute; left: 16px; right: 16px; bottom: 16px; max-width: 520px; margin: 0 auto; padding: 14px 20px;
    border-radius: 22px; background: var(--hvid); color: var(--marine); text-align: center; box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
    font: 750 28px/1.15 var(--display); opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.kc-raad.vis { opacity: 1; transform: none; }
.kc-hint {
    position: absolute; left: 50%; top: 158px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
    background: rgba(7, 19, 46, .8); font-weight: 650; font-size: 15px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.kc[data-fase="taeller"] .kc-hint.vis { opacity: 1; }

/* ------------------------------------------------------------------ bunden */
.kc-fod { display: grid; gap: 10px; width: 100%; max-width: 560px; margin: 0 auto; padding: 10px 16px 14px; }
.kc-kort { display: grid; gap: 8px; padding: 16px 18px; border-radius: var(--r-l); background: var(--hvid); color: var(--marine); }
.kc-kort:empty { display: none; }
.kc-instruks { font: 650 17px/1.4 var(--tekst); }
.kc-status { display: flex; align-items: center; gap: 10px; font-weight: 650; line-height: 1.35; color: var(--blaa-dyb); }
.kc.kc-med .kc-status { color: #1f7a45; }
.kc-prik { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--blaa); animation: kc-puls 1.4s ease-in-out infinite; }
.kc.kc-med .kc-status .kc-prik { background: #2f9a56; animation: none; }
@keyframes kc-puls { 50% { opacity: .35; } }
.kc-lille { font-size: 14px; line-height: 1.4; color: var(--marine-2); }
.kc-vent { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.kc-fejl { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; }
.kc-fejl p { line-height: 1.4; }
.kc-knap {
    min-height: 50px; padding: 0 20px; border-radius: 999px; background: var(--blaa); color: var(--hvid);
    font-weight: 700; font-size: 16px; transition: background .15s;
}
.kc-knap:active { background: var(--blaa-dyb); }
.kc-stop {
    min-height: 58px; border-radius: 999px; background: var(--hvid); color: var(--marine);
    font: 750 19px/1 var(--display); transition: background .15s, transform .12s;
}
.kc-stop:active { transform: scale(.98); }
/* Under tællingen er Stop handlingen (kobolt); i opstillingen og ved fejl er den bare vejen ud. */
.kc[data-fase="taeller"] .kc-stop { background: var(--blaa); color: var(--hvid); }
@media (hover: hover) {
    .kc-knap:hover, .kc[data-fase="taeller"] .kc-stop:hover { background: var(--blaa-dyb); }
    .kc-stop:hover { background: var(--dis); }
}

/* Vandret telefon og pc: kortet og Stop til højre for billedet. */
@media (orientation: landscape) and (min-width: 700px) {
    .kc { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: auto minmax(0, 1fr); }
    .kc-top { grid-column: 1 / -1; }
    .kc-fod { align-content: end; padding: 10px 18px 18px 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .kc-tal b.slag, .kc-nedtael.slag, .kc-prik { animation: none; }
    .kc-raad, .kc-omrids, .kc-hint { transition: none; }
}

/* ------------------------------------------------------------------ kamera-knappen i sæt-rækken (traening.js) */
/* Den første række uden flueben på en øvelse, coachen kan tælle. Knappen ligger i GANGE/TID-feltets celle (næstsidste
   kolonne, også i kun-tid-tabellen), absolut placeret i grid-området, så tabellens kolonner ikke flytter sig. */
.kc-start {
    position: absolute; grid-row: 1; grid-column: -3 / -2; top: 0; bottom: 0; right: 1px; margin: auto 0;
    width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--blaa);
}
.kc-start svg { width: 18px; height: 18px; }
.kc-start:active { background: var(--dis); }
@media (hover: hover) { .kc-start:hover { background: var(--dis); } }
.hl-raekke.kc-har .hl-felt[data-f="reps"] { padding-right: 26px; }

/* ------------------------------------------------------------------ afslut-arkets lille kropskort (Task 3.2b) */
/* afslut.js tegner musklerne med varme (flest sæt = fuld kobolt) som et lille kort. Reglen står her, fordi afslut-arkets
   CSS (hevylog.css) ikke er denne opgaves fil; filen indlæses på alle sider. Et kort over hele kroppen fra én side ville
   ellers blive 224 px højt. */
.af-muskler.af-varme .muskelkort { width: auto; max-width: 112px; height: 120px; justify-self: center; }