/* =========================================================================
   hevylog.css — Træningsloggen som Hevy, i Buddys farver (Hevy-runden, 12-11-2026). Ejes af traening.js
   og hevylog.js; afslut-arket (afslut.js) står nederst. Indlæses efter app.css (alle filer i assets/css linkes).

   Buddys regler gælder også her: hvide flader uden kanter på isblå bund, kobolt er handling, marine er tekst.
   Rækkerne i tabellen skilles af luft og tone, aldrig af streger. Farve kun til status: taget sæt = blød grøn,
   opvarmning = solgul plet (solgul ellers kun til fejring), rekord = lille solgul prik. color-scheme sættes
   aldrig på :root (NUI-reglen fra serveren gælder også i appen).
   ========================================================================= */

.hl-side {
    --hl-groen: #e1f5e6;          /* taget sæt: rækkens tone */
    --hl-groen-2: #2f9a56;        /* taget sæt: fluebenet */
    --hl-groen-3: #eaf8ee;        /* taget sæt: felt i fokus */
}

/* -------------------------------------------------------------- bjælken øverst */
.hl-top {
    position: sticky; top: 0; z-index: 30;
    margin: calc(-18px - env(safe-area-inset-top)) -18px 14px;
    padding: calc(12px + env(safe-area-inset-top)) 18px 12px;
    background: var(--hvid);
    box-shadow: 0 8px 22px rgba(21, 70, 214, .07);
}
.hl-top-linje { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Navnet må gå på to linjer på en smal telefon ("Dag 1 · Overkrop skub"), aldrig tre. */
.hl-navn {
    flex: 1; min-width: 0; font-size: 20px; line-height: 1.15; overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.hl-top-knapper { display: flex; align-items: center; gap: 6px; flex: none; }
.hl-ikon {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--himmel); color: var(--marine);
}
.hl-ikon svg { width: 21px; height: 21px; }
/* Lyd-coachen er en rund knap i bjælken (teksten står i aria-label/title). */
.hl-top .tr-lyd { width: 40px; height: 40px; padding: 0; justify-content: center; background: var(--himmel); box-shadow: none; }
.hl-top .tr-lyd span { display: none; }
.hl-top .tr-lyd.til { background: var(--blaa); color: var(--hvid); }
.hl-top .tr-lyd .tr-laas-lille { position: absolute; right: -4px; top: -4px; box-shadow: 0 0 0 2px var(--hvid); }
.hl-faerdig {
    height: 40px; padding: 0 18px; border-radius: 999px; background: var(--blaa); color: var(--hvid);
    font-weight: 700; font-size: 15.5px; transition: background .15s, transform .12s;
}
.hl-faerdig:active { transform: scale(.97); }
.hl-faerdig.daemp { background: var(--dis); color: var(--blaa-dyb); }
@media (hover: hover) { .hl-faerdig:not(.daemp):hover { background: var(--blaa-dyb); } }
.hl-tal { display: flex; gap: clamp(18px, 7vw, 34px); margin: 8px 0 0; }
.hl-tal div { display: grid; gap: 1px; }
.hl-tal dt { font-size: 12.5px; font-weight: 600; color: var(--marine-2); }
.hl-tal dd { margin: 0; font: 700 18px/1.15 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hl-tal .hl-tid { color: var(--blaa); }

/* Buddy over listen, som før, men mindre. */
.hl-side .buddy-hilsen { grid-template-columns: 58px 1fr; }
.hl-side .buddy-hilsen .buddy-fig { width: 58px; height: 58px; }
.hl-side .buddy-hilsen .boble { font-size: 15.5px; padding: 12px 16px; }
.pas-status .hl-i-hus { color: var(--blaa); font-weight: 650; }

/* Fokus-visning ved siden af Varm op / Stræk ud. */
.hl-pasknapper { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hl-pasknapper .opv-knapper-tr { display: contents; }
.hl-fokus svg { width: 18px; height: 18px; flex: none; color: var(--blaa); }

/* ---------------------------------------------------------------- øvelseskortet */
.hl-liste { display: grid; gap: 12px; }
.hl-liste .oevelse + .oevelse { margin-top: 0; }
.hl-kort { padding: 14px 14px 12px; overflow: visible; }
.hl-kort-top { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hl-kort-knapper { display: flex; align-items: center; gap: 2px; margin-right: -6px; }
.hl-kort-top .fig {
    width: 50px; height: 50px; border-radius: 50%; background: var(--himmel); overflow: hidden; display: block; padding: 0;
}
.hl-kort-top .fig .figur, .hl-kort-top .fig .tr-mk { height: 100%; display: block; }
.hl-kort-top .fig .figur svg { height: 100%; width: auto; margin: 0 auto; }
.hl-kort-navn { min-width: 0; }
.hl-navn-link {
    display: block; font: 700 18px/1.2 var(--display); letter-spacing: -.01em; color: var(--blaa); text-decoration: none;
    overflow-wrap: anywhere;
}
@media (hover: hover) { .hl-navn-link:hover { text-decoration: underline; text-underline-offset: 3px; } }
.hl-kort-navn small { display: block; margin-top: 2px; font-size: 13px; color: var(--marine-2); }
.hl-menu-aabn, .hl-x { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-2); }
.hl-x { color: var(--marine-3); }
.hl-x svg { width: 18px; height: 18px; }
.hl-x:active { background: var(--himmel); color: var(--marine); }
@media (hover: hover) { .hl-x:hover { background: var(--himmel); color: var(--marine); } }
.hl-menu-aabn svg { width: 22px; height: 22px; }
.hl-menu-aabn:active { background: var(--himmel); }
@media (hover: hover) { .hl-menu-aabn:hover { background: var(--himmel); color: var(--marine); } }
.hl-kort.faerdig .hl-navn-link { color: var(--blaa-dyb); }
.oevelse-krop.hl-krop { padding: 10px 0 0; gap: 8px; }

.hl-note {
    width: 100%; border: 0; resize: none; overflow: hidden; background: transparent; color: var(--marine);
    font: 400 16px/1.4 var(--tekst); padding: 2px 0; outline: none; min-height: 26px;
}
.hl-note::placeholder { color: var(--marine-3); }
.hl-note:focus { background: var(--himmel); border-radius: 10px; padding: 6px 10px; }
.hl-pauselinje {
    justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0;
    color: var(--blaa); font-weight: 650; font-size: 14.5px;
}
.hl-pauselinje svg { width: 17px; height: 17px; }
.hl-pauselinje:disabled { color: var(--marine-2); cursor: default; }
.hl-forslag { font-size: 14px; line-height: 1.4; color: var(--marine-2); }
.hl-forslag.op { color: var(--blaa-dyb); font-weight: 600; }
.hl-foerste { font-size: 14px; line-height: 1.4; color: var(--marine-2); }
/* Kurven over kiloene på telefonen (indtil øvelsessiden findes): kompakt under tabellen. */
.hl-kurve .ep-kurve { padding: 6px 12px 6px 8px; }
.hl-kurve .ep-kurve svg { width: 104px; height: 30px; }
.hl-begynder { font-size: 14px; line-height: 1.4; color: var(--marine-2); background: var(--himmel); border-radius: 12px; padding: 8px 12px; }

/* ------------------------------------------------------------- sæt-tabellen */
.hl-tabel { display: grid; gap: 4px; margin: 2px -6px 0; }
.hl-hoved, .hl-raekke {
    display: grid; align-items: center; column-gap: 4px;
    grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 46px;
}
/* Kondition uden distance (Task 4.4 fix 1): kun Tid, KG-feltet er skjult, så tiden får pladsen. */
.hl-tabel.kun-tid .hl-hoved, .hl-tabel.kun-tid .hl-raekke { grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 2fr) 46px; }
.hl-felt[hidden] { display: none; }
.hl-hoved {
    height: 24px; padding: 0 6px; color: var(--marine-3);
    font: 700 11.5px/1 var(--tekst); letter-spacing: .07em; text-transform: uppercase;
}
.hl-hoved span { text-align: center; }
.hl-hoved-ok { display: grid; place-items: center; }
.hl-hoved-ok svg { width: 15px; height: 15px; }
.hl-raekke {
    position: relative; overflow: hidden; min-height: 46px; padding: 0 6px; border-radius: 12px;
    background: var(--hvid); transition: background .2s; touch-action: pan-y;
}
.hl-raekke > :not(.hl-slet) { transition: transform .18s; }
.hl-raekke.gjort { background: var(--hl-groen); }
.hl-nr {
    justify-self: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 9px;
    font: 700 16px/30px var(--display); color: var(--marine); text-align: center; font-variant-numeric: tabular-nums;
}
.hl-raekke.t-v .hl-nr { background: var(--sol); color: var(--marine); }
.hl-raekke.t-d .hl-nr, .hl-raekke.t-f .hl-nr { color: var(--marine-3); }
@media (hover: hover) { .hl-raekke:not(.t-v) .hl-nr:hover { background: var(--himmel); } }
/* Rekord: en lille solgul prik på nummeret. */
.hl-raekke.rekord .hl-nr { position: relative; }
.hl-raekke.rekord .hl-nr::after {
    content: ""; position: absolute; top: 1px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--sol); box-shadow: 0 0 0 2px var(--hl-groen);
}
.hl-sidst {
    min-width: 0; height: 36px; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 14.5px/36px var(--tekst); color: var(--marine-3); text-align: center; font-variant-numeric: tabular-nums;
}
.hl-sidst:disabled { cursor: default; }
@media (hover: hover) { .hl-sidst:not(:disabled):hover { color: var(--blaa); } }
.hl-felt {
    width: 100%; min-width: 0; height: 38px; padding: 0 2px; border: 0; border-radius: 10px; background: transparent;
    text-align: center; color: var(--marine); outline: none; -webkit-appearance: none; appearance: none;
    font: 700 17px/1 var(--display); font-variant-numeric: tabular-nums;
}
/* Et felt, der ikke er taget, har en svag isblå bund, så man kan se, at man kan skrive i det (også uden forslag). */
.hl-raekke:not(.gjort) .hl-felt { background: var(--himmel); }
.hl-felt::placeholder { color: var(--marine-3); opacity: .8; font-weight: 600; }
.hl-felt:focus, .hl-raekke:not(.gjort) .hl-felt:focus { background: var(--dis); }
.hl-raekke.gjort .hl-felt:focus { background: var(--hl-groen-3); }
.hl-ok {
    justify-self: end; width: 38px; height: 32px; border-radius: 10px; display: grid; place-items: center;
    background: var(--himmel); color: var(--marine-3); transition: background .15s, color .15s, transform .12s;
}
.hl-ok svg { width: 18px; height: 18px; }
.hl-ok:active { transform: scale(.94); }
.hl-ok[aria-busy="true"] { opacity: .55; }
.hl-raekke.gjort .hl-ok { background: var(--hl-groen-2); color: var(--hvid); }
@media (hover: hover) { .hl-raekke:not(.gjort) .hl-ok:hover { background: var(--dis); color: var(--blaa-dyb); } }
/* Slet: kommer frem fra højre ved swipe eller langt tryk. */
.hl-slet {
    position: absolute; top: 0; right: 0; bottom: 0; width: 92px; border-radius: 0 12px 12px 0;
    background: var(--roed); color: var(--hvid); font-weight: 700; font-size: 15px;
    transform: translateX(100%); transition: transform .18s;
}
.hl-raekke.vis-slet .hl-slet { transform: none; }
.hl-raekke.vis-slet > :not(.hl-slet) { transform: translateX(-92px); }
.hl-raekke.traekkes > :not(.hl-slet) { transform: translateX(var(--hl-dx, 0px)); transition: none; }
.hl-raekke.traekkes .hl-slet { transform: translateX(calc(100% + var(--hl-dx, 0px))); transition: none; }
.hl-flere {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px;
    background: var(--himmel); color: var(--marine); font-weight: 650; font-size: 15px; transition: background .15s;
}
.hl-flere svg { width: 17px; height: 17px; }
.hl-flere:active { background: var(--dis); }
@media (hover: hover) { .hl-flere:hover { background: var(--dis); } }

/* -------------------------------------------------------- pausebjælken over fanerne */
.pauseur.hl-pause {
    left: 12px; right: 12px; bottom: calc(var(--bund) + 8px); max-width: 560px; margin: 0 auto;
    transform: translateY(calc(100% + 28px)); overflow: hidden; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 18px; border-radius: 20px; background: var(--marine);
}
.pauseur.hl-pause.til { transform: none; }
.pauseur.hl-pause.ovre { background: var(--blaa); }
.hl-pause-fyld {
    position: absolute; left: 0; top: 0; height: 3px; width: calc(var(--hl-andel, 0) * 100%);
    background: var(--blaa); transition: width 1s linear;
}
.pauseur.hl-pause.ovre .hl-pause-fyld { display: none; }
.hl-pause-tal { display: grid; line-height: 1.1; }
.hl-pause-tal small { font-size: 12px; font-weight: 650; color: rgba(255, 255, 255, .78); }
.hl-pause-tid { font: 700 25px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.hl-pause-knapper { display: flex; gap: 6px; }
.pauseur.hl-pause .hl-pause-knapper button {
    height: 40px; min-width: 50px; padding: 0 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .14); color: var(--hvid); font-weight: 650; font-size: 14.5px;
}
.pauseur.hl-pause .hl-pause-knapper .hl-spring { background: var(--hvid); color: var(--marine); }
.hl-side.hl-pause-plads { padding-bottom: calc(var(--bund) + 100px); }
@media (min-width: 920px) { .pauseur.hl-pause { bottom: 24px; } }
@media (max-width: 359px) { .pauseur.hl-pause .hl-pause-knapper button { min-width: 0; padding: 0 9px; } }

/* --------------------------------------------------------------- ⋮ og pausevalg (ark) */
.hl-menu { display: grid; gap: 6px; }
.hl-menu-knap {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%;
    padding: 8px 14px 8px 8px; border-radius: var(--r-m); background: var(--himmel); text-align: left;
}
.hl-menu-knap b { font-weight: 650; font-size: 16px; }
.hl-menu-knap small { font-size: 14px; font-weight: 600; color: var(--marine-2); }
.hl-menu-ikon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--hvid); color: var(--blaa); }
.hl-menu-ikon svg { width: 20px; height: 20px; }
.hl-menu-knap.fare b, .hl-menu-knap.fare .hl-menu-ikon { color: var(--roed); }
@media (hover: hover) { .hl-menu-knap:hover b { color: var(--blaa); } .hl-menu-knap.fare:hover b { color: var(--roed); } }
.hl-pu { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-pu-std { margin-top: 14px; }

/* ------------------------------------------------------------------- pc */
@media (min-width: 920px) {
    /* Pc: bjælken er et hvidt kort på et bånd i sidens farve, så det man ruller forbi, ikke ses over kortet. */
    .hl-top { margin: calc(-18px - env(safe-area-inset-top)) 0 16px; padding: 18px 0 0; background: var(--himmel); box-shadow: none; }
    .hl-top-kort { background: var(--hvid); border-radius: var(--r-l); padding: 14px 20px; box-shadow: var(--skygge); }
}
@media (min-width: 1200px) {
    .hl-titel { align-items: center; }
    .hl-titel .hl-navn-link { font-size: 26px; display: inline; }
    .tr-detalje .hl-tabel { margin: 4px -6px 0; }
    .tr-detalje .hl-hoved, .tr-detalje .hl-raekke { grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 54px; }
    .tr-detalje .hl-tabel.kun-tid .hl-hoved, .tr-detalje .hl-tabel.kun-tid .hl-raekke { grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 2fr) 54px; }
    .tr-detalje .hl-raekke { min-height: 50px; }
    .tr-detalje .hl-ok { width: 42px; height: 36px; }
}

/* ======================================================= afslut-arket (afslut.js) */
.af { display: grid; gap: 16px; }
.af-tal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.af-tal-kort { display: grid; gap: 2px; padding: 12px 12px 10px; border-radius: var(--r-m); background: var(--himmel); }
.af-tal-kort .tal { font-size: 20px; line-height: 1.15; }
.af-tal-kort small { font-size: 12.5px; font-weight: 600; color: var(--marine-2); }
.af-muskler { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
.af-muskler .muskelkort { width: 112px; height: auto; display: block; }
.af-muskler p { font-size: 14.5px; line-height: 1.45; color: var(--marine-2); }
.af-muskler b { color: var(--marine); font-weight: 650; }
.af-note { display: grid; gap: 6px; }
.af-note span { font-weight: 650; font-size: 14px; }
.af-note textarea {
    width: 100%; border: 0; border-radius: var(--r-s); background: var(--himmel); padding: 10px 12px; resize: vertical;
    font: 400 16px/1.4 var(--tekst); color: var(--marine); outline: none;
}
.af-note textarea:focus { background: var(--hvid); box-shadow: inset 0 0 0 2px var(--blaa); }
/* "Noten kan ses i feedet." under noten, mens Del i feedet står til (afslut.js). */
.af-note-del { font-size: 13px; line-height: 1.35; color: var(--marine-2); }
.af-note-del[hidden] { display: none; }
.af-buddy { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.af-buddy .buddy-fig { width: 44px; height: 44px; }
.af-buddy p { font-size: 14.5px; line-height: 1.4; color: var(--marine-2); }
.af-del { padding: 4px 0; }
.af-del b { font-size: 16px; }
.af-spoerg { display: grid; gap: 10px; }
.af-spoerg p { margin-bottom: 6px; line-height: 1.45; color: var(--marine-2); }
.af-jubel { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.af-jubel .buddy-fig { width: 72px; height: 72px; }
.af-jubel h3 { font-size: 21px; }
.af-jubel p { margin-top: 2px; color: var(--marine-2); }
.af-rekorder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-rekorder li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: baseline; font-weight: 600; line-height: 1.35; }
.af-rekorder i { width: 10px; height: 10px; border-radius: 50%; background: var(--sol); transform: translateY(-1px); }
.af-gemt .knap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.af-gemt .knap svg { width: 18px; height: 18px; }