/* =========================================================================
   styrke.css — styrke og muskler på Fremgang (styrke.js, Hevy-runden del 3, 13-11-2026).

   Roligt, som ejeren vil have det: hvide flader uden kanter på isblå bund, marine tekst,
   ét stort tal og ét kropskort med to chips. Farve kun til status: musklerne på kortet og
   prikkerne i restitutionens forklaring. Restitutionens tre farver er dæmpede (ikke et
   lyskryds): blød grøn som "taget sæt" i træningsloggen, sand der ikke er solgul (den er til
   fejring), og en støvet koral der ikke er den røde fejlfarve. Lille, dæmpet tekst er
   --marine-2 (kontrast over 6:1 på hvidt), aldrig --marine-3 (ca. 3:1).
   Mobil: alt under hinanden. Fra 640 px egen bredde (.fremgang er container, app.css) står
   tallet ved grupperne og kroppen ved sin liste.
   ========================================================================= */
:root {
    --st-frisk: #b4e0c2;
    --st-let: #f0c896;
    --st-traet: #e59a96;
}

.fg-styrke > h2 { margin-bottom: 12px; }
.st { display: grid; gap: 12px; }
.st .flade + .flade { margin-top: 0; }
.st-vent { min-height: 120px; }
.st-fejl p { color: var(--marine-2); margin-bottom: 6px; }
.st-note { color: var(--marine-2); font-size: 14px; line-height: 1.4; }
.st-linje { color: var(--marine-2); text-align: center; padding: 6px 0; }

/* ------------------------------------------------ samlet tal og grupperne */
.st-score { display: grid; gap: 10px; }
.st-samlet { display: flex; align-items: baseline; gap: 12px; }
.st-tal { font-size: 56px; line-height: .9; }
.st-niveau { font-family: var(--display); font-weight: 650; font-size: 22px; letter-spacing: -.01em; }

.st-grupper { display: grid; }
.st-grupper .st-note { margin-top: 6px; }
.st-gruppe { display: grid; grid-template-columns: minmax(0, 1fr) 64px 32px 86px; gap: 12px; align-items: center; padding: 3px 0; }
.st-gruppe b { font-weight: 650; }
.st-gruppe .tal { font-size: 19px; text-align: right; }
.st-gruppe small { font-size: 13.5px; color: var(--marine-2); white-space: nowrap; }
.st-spark { display: block; width: 64px; height: 22px; overflow: visible; }
.st-spark polyline { fill: none; stroke: var(--blaa); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.st-spark path { fill: none; stroke: var(--blaa); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Buddys linje: isblå boble med marine tekst, så den ikke råber som en knap. */
.st-buddy, .st-tom { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: end; }
.st-buddy p, .st-tom p { background: var(--himmel); border-radius: 18px 18px 18px 6px; padding: 11px 15px; font-size: 15px; line-height: 1.42; }
.st-tom { align-items: center; }

/* ------------------------------------------------ kropskortet: to chips, én krop ad gangen */
.st-kort-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.st-kort-top .chip { min-height: 36px; }
.st-maal { color: var(--marine-2); font-size: 13.5px; white-space: nowrap; }
.st-kort[data-vis="uge"] [data-st-panel="rest"],
.st-kort[data-vis="rest"] [data-st-panel="uge"],
.st-kort[data-vis="rest"] .st-maal { display: none; }
.st-krop { display: grid; gap: 12px; }
.st-figur .muskelkort { height: 160px; width: auto; max-width: 100%; margin: 0 auto; }
/* Musklerne med varme (muskelkort.js): fill står på stien, stregen som de andre musklers. */
.mk-varme { stroke: #d6e2fb; stroke-width: .7; stroke-linejoin: round; }

.st-info { display: grid; gap: 6px; align-content: start; }
/* Kun de ramte muskler, flest først; to spalter læst fra venstre mod højre. */
.st-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.st-liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 15px; line-height: 1.35; }
.st-liste b { font-weight: 600; min-width: 0; }
.st-liste span { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

.st-forklaring { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.st-forklaring li { display: grid; grid-template-columns: 12px auto minmax(0, 1fr); column-gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.4; }
.st-prik { width: 12px; height: 12px; border-radius: 50%; align-self: center; }
.st-forklaring b { font-weight: 650; white-space: nowrap; }
.st-forklaring span { color: var(--marine-2); }

/* Meget smal telefon: listen i én spalte, så navn og tal ikke klemmes. */
@container (max-width: 339px) {
    .st-liste { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ når der er plads */
@container (min-width: 640px) {
    .st { gap: 16px; }
    .st-score { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "samlet grupper" "buddy grupper"; column-gap: 36px; row-gap: 18px; align-items: start; padding: 22px 24px; }
    .st-samlet { grid-area: samlet; flex-direction: column; gap: 8px; }
    .st-tal { font-size: 76px; }
    .st-grupper { grid-area: grupper; }
    /* Kurven får hele den ledige bredde mellem navnet og tallet. */
    .st-gruppe { grid-template-columns: 84px minmax(0, 1fr) 32px 92px; gap: 14px; padding: 6px 0; }
    .st-gruppe .st-spark { width: 100%; }
    .st-buddy { grid-area: buddy; align-self: end; }
    .st-kort { padding: 22px 24px; }
    .st-krop { grid-template-columns: auto minmax(0, 1fr); column-gap: 36px; align-items: start; }
    .st-figur .muskelkort { margin: 0; height: 190px; }
    .st-liste { column-gap: 28px; }
}