/* =========================================================================
   traening.css — runde 5 (07-10-2026): Buddys næste vægt, lyd-coachen og
   låsene uden Plus på Træning. Ejes af traening.js. Indlæses efter app.css.

   Kun de faste farver: kobolt er handling (og "gå op"), isblå/dis er ro, solgul
   bruges IKKE her — den er forbeholdt rekord-fejringen (fremgangplus.css).
   ========================================================================= */

/* ------------------------------------------------- toppen: program + lyd-coach */
.traening-side .side-top { min-width: 0; }
.traening-side .side-top h1 { flex: none; }
.tr-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tr-prog { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-lyd {
    flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 11px;
    border-radius: 999px; background: var(--hvid); color: var(--marine-2); box-shadow: var(--skygge);
    font-weight: 650; font-size: 14px; position: relative; transition: background .15s, color .15s;
}
.tr-lyd svg { width: 20px; height: 20px; flex: none; }
/* "Øvelser" (16-10-2026): vejen til øvelsesbiblioteket. Låner lyd-coachens pille, men er et link. */
.tr-find { text-decoration: none; }
.tr-lyd.til { background: var(--blaa); color: var(--hvid); box-shadow: none; }
.tr-lyd:hover:not(.til) { color: var(--blaa); }
.tr-laas-lille { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--dis); color: var(--blaa-dyb); font-style: normal; }
.tr-laas-lille svg { width: 11px; height: 11px; }
/* Telefonen: kun højttaleren, så "Træning" og programnavnet kan stå på samme linje. */
@media (max-width: 459px) {
    .tr-lyd { width: 40px; padding: 0; justify-content: center; }
    .tr-lyd span { display: none; }
    .tr-lyd .tr-laas-lille { position: absolute; right: -4px; top: -4px; box-shadow: 0 0 0 2px var(--himmel); }
}

/* ---------------------------------------------------- Buddys næste vægt */
.sidst.tr-forslag { display: grid; gap: 3px; }
.sidst.tr-forslag span { font-size: 13.5px; color: var(--marine-2); }
.sidst.tr-forslag b { font-weight: 650; line-height: 1.35; }
.sidst.op span { color: rgba(255, 255, 255, .8); }
/* Lettere i dag (deload, længe væk): en rolig tone, ingen advarselsfarve — det er en plan, ikke en fejl. */
.sidst.ned { background: var(--dis); color: var(--marine); }
.tr-kort { color: var(--blaa); font-weight: 650; }
.tr-liste .oevelse.valgt .tr-kort { color: var(--hvid); }

/* -------------------------------------------------------- låst uden Plus */
.tr-plusmaerke {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px; border-radius: 999px;
    background: var(--dis); color: var(--blaa-dyb); font: 700 12.5px/1 var(--tekst); white-space: nowrap;
}
.tr-plusmaerke svg { width: 13px; height: 13px; }
.pas-status .tr-plusmaerke { color: var(--blaa-dyb); font-weight: 700; font-size: 12.5px; }
.tr-liste .oevelse.valgt .tr-plusmaerke { background: rgba(255, 255, 255, .2); color: var(--hvid); }
.oevelse.plus-laast h3 { color: var(--marine-2); }
.chip.tr-chip-laast svg { width: 14px; height: 14px; opacity: .8; }

.tr-plusboks {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    background: var(--himmel); border-radius: var(--r-s); padding: 12px 12px 12px 14px;
}
.tr-plusboks > svg { width: 22px; height: 22px; color: var(--blaa); }
.tr-plusboks span { font-size: 13.5px; color: var(--marine-2); }
.tr-plusboks b { display: block; font: 700 15.5px/1.25 var(--display); color: var(--marine); letter-spacing: -.01em; }

.tr-plus-linje {
    display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%;
    padding: 9px 12px; border-radius: var(--r-s); text-align: left; font-size: 14px; color: var(--marine-2);
    box-shadow: inset 0 0 0 1.5px var(--dis); transition: background .15s;
}
.tr-plus-linje svg { width: 16px; height: 16px; color: var(--blaa); }
.tr-plus-linje b { color: var(--blaa); font-size: 13px; }
.tr-plus-linje:hover { background: var(--himmel-2, #f6f9ff); }

/* "Lås alle 35 øvelser op": den ene kobolt flade på siden, med figurer af det man får. */
.tr-laasop {
    margin-top: 14px; padding: 20px 18px 18px; border-radius: var(--r-l); background: var(--blaa); color: var(--hvid);
    display: grid; justify-items: center; text-align: center;
}
.tr-laasop-figurer { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.tr-laasop-figurer span { width: 54px; height: 42px; border-radius: 10px; background: var(--hvid); overflow: hidden; display: block; }
.tr-laasop-figurer .figur { height: 100%; }
.tr-laasop h3 { font-size: 21px; color: var(--hvid); }
.tr-laasop p { margin: 6px 0 14px; font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .86); max-width: 34ch; }
.tr-laasop .knap { min-width: 200px; }
.tr-hilsen { margin-bottom: 4px; }
.tr-hilsen .boble .tekstknap { display: inline-block; margin-top: 8px; padding: 4px 0; }

@media (min-width: 1200px) {
    .tr-venstre { display: grid; gap: 0; }
    .tr-laasop { padding: 18px 16px 16px; }
    .tr-laasop-figurer span { width: 50px; height: 38px; }
    .tr-plusboks { padding: 14px 14px 14px 16px; }
}
@media (max-width: 359px) {
    .tr-laasop-figurer span:nth-child(5) { display: none; }
}

/* ---------------------------------------------- de tre veje videre (08-11-2026)
   "Alle øvelser", "Sæt sammen" og "Spørg Buddy" med tekst på, lige under overskriften. Før var biblioteket kun en
   lup øverst på telefonen, og ejeren fandt det forvirrende. Hvide flader uden kanter, kobolt på ikonet. */
.tr-genveje { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
/* Fire veje (10-11-2026, "Færdige planer"): to og to, så ingen står alene på en ny linje. */
.tr-genveje.fire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-genvej {
    display: grid; justify-items: center; align-content: start; gap: 4px; padding: 12px 6px 11px; min-height: 104px;
    border-radius: var(--r-m); background: var(--hvid); box-shadow: var(--skygge); color: var(--marine);
    text-decoration: none; text-align: center; transition: transform .12s, color .15s;
}
.tr-genvej-ikon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--himmel); color: var(--blaa); margin-bottom: 2px; }
.tr-genvej-ikon svg { width: 22px; height: 22px; }
.tr-genvej:first-child .tr-genvej-ikon { background: var(--blaa); color: var(--hvid); }
.tr-genvej b { font: 650 15px/1.2 var(--tekst); }
.tr-genvej small { font-size: 12.5px; line-height: 1.25; color: var(--marine-3); }
.tr-genvej:active { transform: scale(.97); }
@media (hover: hover) { .tr-genvej:hover b { color: var(--blaa); } }
@media (min-width: 700px) {
    .tr-genvej { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; text-align: left; min-height: 0; padding: 12px 14px; column-gap: 12px; }
    .tr-genvej-ikon { grid-row: span 2; margin: 0; }
}

/* ---- "Ny i træning?" over genvejene (12-11-2026, kom_i_gang.js) */
.tr-nyher { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 16px 12px 12px; border-radius: var(--r-m); background: var(--hvid); color: var(--marine); text-decoration: none; box-shadow: var(--skygge), inset 0 0 0 2px var(--blaa); }
.tr-nyher .buddy-fig { width: 52px; height: 52px; }
.tr-nyher b { display: block; font-family: var(--display); font-size: 18px; line-height: 1.2; color: var(--blaa); }
.tr-nyher small { display: block; margin-top: 2px; font-size: 14px; color: var(--marine-2); }
.tr-nyher > svg { width: 20px; height: 20px; color: var(--blaa); }
.tr-nyher-lille { display: block; margin: 10px auto 0; text-align: center; }

/* ---- Dit program + Skift (12-11-2026): dagrækken viser kun det valgte programs dage */
.tr-program-kort { margin-top: 16px; padding: 14px 14px 12px 16px; border-radius: var(--r-m); background: var(--hvid); box-shadow: var(--skygge); }
.tr-program { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tr-program-kort .chip:not(.valgt) { background: var(--himmel); box-shadow: none; }
.tr-program > div { min-width: 0; display: grid; }
.tr-program small { font-size: 12.5px; font-weight: 650; color: var(--marine-3); }
.tr-program b { font-family: var(--display); font-size: 18px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-program span { font-size: 13.5px; color: var(--marine-2); }
.tr-program .knap { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tr-program .knap svg { width: 16px; height: 16px; }
.tr-dage { margin-top: 12px; }
.chip.tr-chip-ekstra { border-style: dashed; }
.tr-pv-ark h3 { font-size: 15px; margin: 18px 0 8px; color: var(--marine-2); }
.tr-pv-intro { margin: 0; line-height: 1.45; color: var(--marine-2); }
.tr-pv-under { margin: -4px 0 8px; }
.tr-pv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; border-radius: var(--r-m); background: var(--himmel); text-align: left; }
.tr-pv + .tr-pv { margin-top: 8px; }
.tr-pv b { display: block; font-size: 16px; }
.tr-pv small { display: block; font-size: 13px; color: var(--marine-2); line-height: 1.35; margin-top: 2px; }
.tr-pv.valgt { box-shadow: inset 0 0 0 2px var(--blaa); background: var(--hvid); }
.tr-pv-flue { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--blaa); color: var(--hvid); }
.tr-pv-flue svg { width: 16px; height: 16px; }
.tr-pv-par { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.tr-pv-par + .tr-pv-par { margin-top: 8px; }
.tr-pv-ret { padding: 0 6px; }
.tr-pv-nyt { display: grid; gap: 10px; margin-top: 20px; }
.tr-pv-nyt .knap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tr-pv-nyt .knap svg { width: 18px; height: 18px; }
@media (hover: hover) { .tr-pv:hover b { color: var(--blaa); } }