/* =========================================================================
   egetpas.css — egne pas, muskelkortet og kurverne (03-11-2026).
   Ejes af egetpas.js, muskelkort.js og de dele af oevelser.js/traening.js der bruger dem.
   ========================================================================= */

/* ---- muskelkortet: kroppen stille, de trænede muskler i kobolt */
.muskelkort { display: block; }
.mk-krop { fill: #d6e2fb; }
.mk-hvile, .mk-ogsaa, .mk-mest { stroke: #d6e2fb; stroke-width: .7; stroke-linejoin: round; }
.mk-hvile { fill: #bfd0f5; }
.mk-ogsaa { fill: #7598ff; }
.mk-mest { fill: var(--blaa); }
.mk-linje { fill: none; stroke: #d6e2fb; stroke-width: .8; }

/* Kortet i listen: én side af kroppen, så højt som feltet. */
.oev-side .oevelse-top .fig.mk { padding: 3px 0; }
.oev-side .oevelse-top .fig.mk .muskelkort { height: 100%; width: auto; }
.tr-mk { display: grid; place-items: center; width: 100%; height: 100%; }
.tr-mk .muskelkort { height: 100%; width: auto; max-width: 100%; }
.traening-side .oevelse-top .fig .tr-mk { padding: 3px 0; }
/* Stor (arket, pc-panelet, træningsmodus): samme felt som figurerne, begge sider af kroppen. */
.tr-mk.stor { aspect-ratio: 4 / 3; border-radius: var(--r-m); background: var(--himmel); padding: 14px; height: auto; }

/* Arket: kroppen ved siden af teksten om musklerne. */
.oev-muskelrad { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; background: var(--himmel); border-radius: var(--r-m); padding: 12px 14px; }
.oev-muskelrad .muskelkort { width: 132px; height: auto; }
.oev-muskelrad .oev-muskeltekst { margin: 0; }

/* ---- "+" på kortet: øvelsen i passet */
.oev-kort { display: flex; align-items: stretch; }
.oev-side .oev-kort .oevelse-top { flex: 1; min-width: 0; grid-template-columns: 72px minmax(0, 1fr); padding-right: 6px; }
.oev-tag {
    flex: none; align-self: center; width: 44px; height: 44px; margin-right: 12px; border-radius: 50%;
    display: grid; place-items: center; background: var(--dis); color: var(--blaa-dyb);
    transition: background .15s, color .15s, transform .15s;
}
.oev-tag svg { width: 22px; height: 22px; }
.oev-tag:active { transform: scale(.92); }
.oev-kort.i-pas { box-shadow: inset 0 0 0 2px var(--blaa), var(--skygge); }
.oev-kort.i-pas .oev-tag { background: var(--blaa); color: var(--hvid); }
.oev-sidst { color: var(--blaa-dyb); font-weight: 650; }
@media (hover: hover) { .oev-tag:hover { background: var(--blaa); color: var(--hvid); } }

.oev-tagknap { margin-top: 14px; }
.oev-hist { margin-top: 12px; display: grid; gap: 8px; }

/* ---- bjælken i bunden af biblioteket */
.ep-bjaelke {
    position: sticky; bottom: calc(var(--bund) + 12px); z-index: 20; margin-top: 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--marine); color: var(--hvid); border-radius: 999px; padding: 8px 8px 8px 22px;
    box-shadow: 0 12px 32px rgba(11, 31, 77, .3);
}
.ep-bjaelke[hidden] { display: none; }
.ep-bjaelke b { display: block; font-family: var(--display); font-size: 16px; line-height: 1.2; }
.ep-bjaelke small { display: block; font-size: 13px; opacity: .75; }
.ep-bjaelke span { min-width: 0; }
.ep-bjaelke b, .ep-bjaelke small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-bjaelke .knap { flex: none; background: var(--hvid); color: var(--blaa-dyb); min-height: 42px; padding: 0 18px; }
@media (min-width: 920px) { .ep-bjaelke { bottom: 24px; } }

/* ---- arket "Dit pas" */
.ep-ark { display: grid; gap: 12px; }
.ep-navn { display: grid; gap: 4px; }
.ep-navn span { font-size: 13px; font-weight: 600; color: var(--marine-2); }
.ep-navn input { height: 46px; border: 0; border-radius: var(--r-s); background: var(--himmel); padding: 0 14px; font: 600 16px var(--tekst); color: var(--marine); }
.ep-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ep-liste li {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "mk tekst flyt" "mk sk sk";
    gap: 4px 10px; align-items: center; background: var(--himmel); border-radius: var(--r-s); padding: 10px 10px 10px 8px;
}
.ep-mk { grid-area: mk; align-self: start; height: 52px; display: grid; place-items: center; }
.ep-mk .muskelkort { height: 100%; width: auto; }
.ep-tekst { grid-area: tekst; min-width: 0; }
.ep-tekst b { display: block; font-size: 15px; line-height: 1.25; }
.ep-tekst small { color: var(--marine-2); font-size: 13px; }
.ep-flyt { grid-area: flyt; display: flex; gap: 2px; }
.ep-flyt button { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-2); font-size: 16px; }
.ep-flyt button svg { width: 16px; height: 16px; }
.ep-flyt button:disabled { opacity: .3; }
.ep-sk { grid-area: sk; display: flex; flex-wrap: wrap; gap: 8px; }
.ep-trin { display: inline-flex; align-items: center; background: var(--hvid); border-radius: 999px; height: 36px; }
.ep-trin button { width: 34px; height: 36px; font-size: 18px; font-weight: 600; color: var(--blaa); }
.ep-trin em { font-style: normal; font-weight: 650; font-size: 14px; min-width: 64px; text-align: center; }
.ep-tomt { margin: 4px 0; }
.ep-slet { justify-self: center; color: var(--marine-2); }

/* ---- kurven over kiloene */
.ep-kurve { display: flex; align-items: center; gap: 12px; background: var(--himmel); border-radius: var(--r-s); padding: 8px 14px 8px 10px; }
.oev-hist .ep-kurve { background: var(--hvid); }
.ep-kurve svg { flex: none; width: 120px; height: 34px; overflow: visible; }
.ep-kurve polyline { fill: none; stroke: var(--blaa); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ep-kurve circle { fill: var(--blaa); }
.ep-kurve .ep-ring { fill: none; stroke: var(--blaa); stroke-width: 1.4; opacity: .35; }
.ep-kurve b { display: block; font-family: var(--display); font-size: 17px; line-height: 1.2; color: var(--marine); }
.ep-kurve small { display: block; font-size: 13px; color: var(--marine-2); }
.ep-kurve .ep-ned { color: var(--marine-3); }

/* ---- Træning: de egne pas mellem programmets dage */
.tr-chip-eget { box-shadow: inset 0 0 0 1.5px var(--blaa); }
.tr-chip-eget.valgt { box-shadow: none; }
.tr-chip-ny { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--blaa-dyb); background: var(--dis); box-shadow: none; white-space: nowrap; }
.tr-chip-ny svg { width: 16px; height: 16px; }
.tr-ret { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tr-ret svg { width: 18px; height: 18px; }

/* ---- dagens tilføjelser på Træning (03-11-2026) */
.tr-tilfoej { margin-top: 12px; display: grid; gap: 4px; justify-items: center; }
.tr-tilfoej .knap { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tr-tilfoej .knap svg { width: 18px; height: 18px; }
.tr-saet-mere { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.tr-saet-mere .tekstknap { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.tr-saet-mere svg { width: 16px; height: 16px; }
.tr-skiver { margin: 0; }
.tr-skiver[hidden] { display: none; }

/* ---- træningsmodus */
.tm-skiver { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--marine-2); }
.tm-skiver[hidden] { display: none; }
.tm-saet-mere { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px auto 0; }
.tm-saet-mere svg { width: 16px; height: 16px; }
.tm-tilfoej { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.tm-tilfoej svg { width: 18px; height: 18px; }

/* ---- vælgeren (vaelger.js) */
.vg { display: grid; gap: 10px; }
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vg-chips .chip { min-height: 34px; padding: 0 12px; font-size: 14px; }
.vg-sted { display: flex; flex-wrap: wrap; gap: 4px; }
.vg-sted button { min-height: 34px; padding: 0 12px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--marine-2); }
.vg-sted button.valgt { background: var(--dis); color: var(--blaa-dyb); }
.vg-liste { display: grid; gap: 6px; }
.vg-gruppe { margin: 10px 0 2px; font-size: 16px; color: var(--marine-2); }
.vg-raekke {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; gap: 12px; align-items: center; width: 100%;
    text-align: left; background: var(--himmel); border-radius: var(--r-s); padding: 6px 8px 6px 6px;
}
.vg-fig { width: 64px; height: 48px; border-radius: 9px; background: var(--hvid); overflow: hidden; display: grid; place-items: center; }
.vg-fig .figur, .vg-fig svg { width: 100%; height: 100%; }
.vg-fig .muskelkort { width: auto; }
.vg-tekst b { display: block; font-size: 15px; line-height: 1.25; }
.vg-tekst small { display: block; color: var(--marine-2); font-size: 13px; }
.vg-tekst em { font-style: normal; color: var(--blaa-dyb); font-weight: 650; }
.vg-plus { width: 34px; height: 34px; border-radius: 50%; background: var(--blaa); color: var(--hvid); display: grid; place-items: center; }
.vg-plus svg { width: 18px; height: 18px; }
.vg-tom { margin: 8px 0; }
@media (hover: hover) { .vg-raekke:hover b { color: var(--blaa); } }

/* ---- programbyggeren (programbygger.js) */
.pb-side h1 { font-size: 30px; margin-bottom: 14px; }
.pb-valg { display: grid; gap: 14px; margin-top: 14px; }
.pb-r { display: grid; gap: 6px; }
.pb-r > span:first-child { font-size: 13px; font-weight: 650; color: var(--marine-2); }
.pb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-chips .chip small { font-weight: 500; opacity: .7; }
.pb-tal { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.pb-tal .ep-trin { background: var(--himmel); }
.pb-hoved { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 10px; }
.pb-hoved h2 { font-size: 20px; }
.pb-hoved .tekstknap { display: inline-flex; align-items: center; gap: 6px; }
.pb-hoved svg { width: 16px; height: 16px; }
.pb-dag + .pb-dag { margin-top: 10px; }
.pb-dag h3 { font-size: 18px; display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.pb-dag h3 span { font: 600 13px var(--tekst); color: var(--marine-3); }
.pb-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
/* Tryk på øvelsen = "Sådan"-arket (12-11-2026); byt og fjern er hver sin runde knap ved siden af. */
.pb-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 36px 36px; gap: 2px; align-items: center; }
.pb-oev { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; text-align: left; background: var(--himmel); border-radius: var(--r-s); padding: 6px 10px 6px 6px; }
.pb-fig { width: 64px; height: 48px; border-radius: 9px; background: var(--hvid); overflow: hidden; display: grid; place-items: center; }
.pb-fig .figur, .pb-fig svg { width: 100%; height: 100%; }
.pb-fig .muskelkort { width: auto; }
.pb-tekst b { display: block; font-size: 15px; line-height: 1.25; }
.pb-tekst small { color: var(--marine-2); font-size: 13px; }
.pb-byt { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-3); }
.pb-byt svg { width: 18px; height: 18px; }
.pb-fjern { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-3); }
.pb-fjern svg { width: 16px; height: 16px; }
.pb-mere { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.pb-mere svg { width: 16px; height: 16px; }
.pb-fod { display: grid; gap: 12px; margin-top: 20px; }
.pb-slet { justify-self: center; color: var(--marine-2); }
@media (hover: hover) { .pb-oev:hover b { color: var(--blaa); } .pb-byt:hover, .pb-fjern:hover { color: var(--blaa); background: var(--himmel); } }

/* ---- × på øvelseskortet og Fortryd (04-11-2026) */
.oevelse.kan-fjernes { position: relative; }
.oevelse.kan-fjernes > .oevelse-top { padding-right: 46px; }
.tr-x {
    position: absolute; top: 12px; right: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; color: var(--marine-3); background: transparent; transition: background .15s, color .15s;
}
.tr-x svg { width: 16px; height: 16px; }
.tr-x:active { background: var(--dis); color: var(--marine); }
@media (hover: hover) { .tr-x:hover { background: var(--dis); color: var(--marine); } }
.tr-fortryd {
    position: fixed; left: 50%; bottom: calc(var(--bund) + 12px); z-index: 45; transform: translate(-50%, 160%);
    display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 20px; border-radius: 999px;
    background: var(--marine); color: var(--hvid); box-shadow: 0 12px 32px rgba(11, 31, 77, .35);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1); white-space: nowrap; max-width: calc(100vw - 32px);
}
.tr-fortryd.til { transform: translate(-50%, 0); }
.tr-fortryd span { overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.tr-fortryd button { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--hvid); color: var(--blaa-dyb); font-weight: 650; }
@media (min-width: 920px) { .tr-fortryd { bottom: 24px; } }

/* Træningsmodus' oversigt: × ved siden af rækken. */
.tm-ov-raekke { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }
.tm-ov-x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-3); }
.tm-ov-x svg { width: 16px; height: 16px; }
.tm-ov-x:active { background: var(--dis); }

/* Dit skema (06-11-2026): bjælken efter en færdig øvelse står ØVERST, så den ikke dækker "Færdig" i
   træningsmodus, og over modusen (z 45) og toasts (z 60). Teksten må gå på to linjer. */
.tr-skemabar {
    top: calc(14px + env(safe-area-inset-top)); bottom: auto; z-index: 62; transform: translate(-50%, -220%);
    white-space: normal; border-radius: 24px; width: max-content; max-width: min(460px, calc(100vw - 32px));
}
.tr-skemabar.til { transform: translate(-50%, 0); }
.tr-skemabar span { overflow: visible; line-height: 1.3; }
@media (min-width: 920px) { .tr-skemabar { bottom: auto; } }
.tr-mit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 2px 0 4px; }
.tr-mit .tekstknap { min-height: 36px; }
/* Programbyggeren, "Vælg muskler selv" (06-11-2026): 13 muskler pr. dag fylder; dagenes chips er lidt mindre. */
.pb-dagmus .chip { min-height: 34px; padding: 0 12px; font-size: 14px; }
.pb-dagmus { padding-top: 10px; border-top: 1px solid var(--dis); }

/* Programbyggeren, muskler først (08-11-2026): hurtige valg, "godt sammen", dagene, flere valg og ugen. */
.pb-hurtigt { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 4px; }
.pb-hurtigt::-webkit-scrollbar { display: none; }
.pb-hurtigt .chip { flex: none; }
.pb-forslagene { display: grid; gap: 8px; margin-top: 8px; }
.pb-forslag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px 8px 8px; border-radius: var(--r-s); background: var(--himmel); }
.pb-forslag.tip { background: #fff7e0; }
.pb-forslag .chip { background: var(--hvid); color: var(--blaa); font-weight: 650; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.pb-forslag .chip svg { width: 14px; height: 14px; }
.pb-forslag span { font-size: 13.5px; line-height: 1.35; color: var(--marine-2); }
.pb-forslag b { color: var(--marine); font-weight: 650; }
.pb-dageliste { list-style: none; counter-reset: dag; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.pb-dageliste li { counter-increment: dag; font-size: 14.5px; display: flex; gap: 10px; align-items: baseline; }
.pb-dageliste li::before { content: "Dag " counter(dag); flex: none; width: 46px; font-size: 12.5px; font-weight: 650; color: var(--marine-3); }
.pb-lille-knap { justify-self: start; min-height: 34px; font-size: 14px; }
.pb-opdeling { margin: 0; font-size: 15px; }
.pb-flere { border-top: 1px solid var(--dis); padding-top: 4px; }
.pb-flere summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 650; color: var(--blaa); }
.pb-flere summary::-webkit-details-marker { display: none; }
.pb-flere summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.pb-flere[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.pb-flere-krop { display: grid; gap: 14px; padding: 6px 0 4px; }
.pb-uge { margin: -2px 0 12px; font-size: 13.5px; color: var(--marine-2); line-height: 1.45; }
.pb-uge p { margin: 0; }
.pb-uge b { color: var(--marine); }
.pb-mangler { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 4px !important; color: var(--marine); }
.pb-mangler .tekstknap { min-height: 32px; font-size: 13.5px; }
.pb-ny { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-s); background: var(--hvid); font-size: 14px; line-height: 1.4; color: var(--marine-2); box-shadow: var(--skygge); }

/* Færdige planer (10-11-2026, programbygger.js): planerne øverst, dagene som en liste med Byt, × og Tilføj en dag. */
.pb-planer .chip small { margin-left: 4px; }
/* Telefonen ruller planerne vandret som "Hurtigt valg"; på pc er der plads til, at de brydes. */
@media (min-width: 700px) { .pb-planer { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.pb-plandage { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.pb-pd { border-radius: var(--r-s); background: var(--himmel); padding: 4px 4px 4px 12px; }
.pb-pd.aaben { padding-bottom: 12px; }
.pb-pd-raekke { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; min-height: 40px; }
.pb-pd-nr { font-size: 12.5px; font-weight: 650; color: var(--marine-3); }
.pb-pd-raekke b { font-size: 15.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-pd-byt { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; font-size: 14px; }
.pb-pd-byt svg { width: 15px; height: 15px; }
.pb-pd .pb-fjern { width: 34px; height: 34px; }
.pb-typer { margin: 6px 4px 0 0; }
.pb-typer .chip { min-height: 34px; padding: 0 12px; font-size: 14px; background: var(--hvid); }
.pb-typer .chip.valgt { background: var(--blaa); color: var(--hvid); }
.pb-pd-ny { display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-s); border: 1.5px dashed var(--dis); }
.pb-pd-ny > span { font-size: 13px; font-weight: 650; color: var(--marine-2); }
.pb-pd-ny .pb-typer .chip { background: var(--himmel); }
.pb-pd-tilfoej { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.pb-pd-tilfoej svg { width: 15px; height: 15px; }
.pb-dag h3 .pb-dag-byt { margin-left: auto; min-height: 32px; font: 600 13.5px var(--tekst); white-space: nowrap; }

/* ---- Færdige planer for nye (12-11-2026): "til dig", hvem planen passer til, og musklerne pr. dag */
.pb-tildig { font-style: normal; font-size: 11.5px; font-weight: 700; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--blaa); color: var(--hvid); vertical-align: 1px; }
.chip.valgt .pb-tildig { background: var(--hvid); color: var(--blaa); }
.pb-plan-til { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--marine-2); }
.pb-plan-til b { color: var(--marine); }
.pb-pd-navn { min-width: 0; display: grid; }
.pb-pd-navn small { font-size: 12.5px; color: var(--marine-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-dag-mus { margin: -4px 0 10px; font-size: 13.5px; color: var(--marine-2); }