/*
 * Zápis tréninku, souhrn a historie (modul 5a, schválený náhled sekce 7 a 8; nový vzhled podle náhledu A).
 *
 * Zápis nemá spodní navigaci: místo ní je dole dok s velkým tlačítkem na palec, po sérii
 * časovač pauzy. Nahoře kulatá tlačítka, název tréninku, pruh postupu po cvicích a název cviku;
 * pod ním tři dlaždice faktů (jen v zápisu, .facts--tiles) a série jako plochy: hotová na --surface,
 * rekord zeleně, rozdělaná s růžovým vnitřním rámečkem. Plochy sérií a dlaždice jsou jen v zápisu
 * (.sets--tiles, .facts--tiles), Souhrn a Detail tréninku mají dál řádky s linkou.
 * Barvy a poloměry jen z tokenů app.css (tmavě zelený štítek rekordu je --tag-ok).
 */

/* --- Hlavička zápisu: Zpět, název tréninku s pozicí, Seznam cviků; pod tím pruh postupu a název cviku --- */
/* Mezi plochami zápisu je 16 px, jako v náhledu (obecná mezera obrazovky je 28 px) */
.screen--log { gap: var(--gap-4); }
/*
 * Mřížka 44 px | název | 44 px. Obalová .stack s p.muted a h1 se do mřížky rozpustí (display: contents),
 * takže řádek s názvem tréninku sedí mezi tlačítky a h1 dostane celou šířku pod pruhem. Pořadí v DOM
 * (muted těsně před h1, těsně za .backdate) zůstává, jak ho čtou čtečky i testy.
 */
.log-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; column-gap: var(--gap-3); }
/* Vyšší specificita než .stack z app.css: nesmí záviset na pořadí načtení stylů */
.log-head > .log-head__title { display: contents; }
.log-head__back { grid-row: 1; grid-column: 1; }
.log-head__line { grid-row: 1; grid-column: 2; min-width: 0; margin: 0; line-height: 1.3; }
.log-head__over { grid-row: 1; grid-column: 3; }
.log-head .progress-ex { grid-row: 2; grid-column: 1 / -1; margin-top: var(--gap-3); }
.log-head .backdate { grid-row: 3; grid-column: 1 / -1; margin-top: var(--gap-3); }
.log-head h1 { grid-row: 4; grid-column: 1 / -1; margin-top: var(--gap-3); overflow-wrap: anywhere; }
/* Název tréninku tučně nad pozicí („cvik 1 ze 3 · 19 min“); dlouhý název se zalomí, nerozšíří stránku */
.log-head__line b { display: block; color: var(--text); font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
/* „Návod“ pod názvem cviku otevře panel přes zápis (náhled K2 · Návod v zápisu); .link dává 44 px na výšku */
.log-head__guide { grid-row: 5; grid-column: 1 / -1; justify-self: start; }
.log-head__guide .icon { width: 20px; height: 20px; }

/* Kulaté tlačítko 44 px na --surface-2 (Zpět); s textem je z něj pilulka (Seznam cviků) */
.round-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}
.round-btn:hover { background: var(--surface-3); color: var(--text); }
.round-btn--pink { color: var(--pink); }
.round-btn--pink:hover { color: var(--pink-soft); }
.round-btn--label { width: auto; gap: 6px; padding: 0 14px 0 12px; border-radius: var(--r-pill); font: inherit; font-size: 14px; font-weight: 700; }

/* Pruh postupu po cvicích: hotové zeleně, aktuální růžově, zbytek --track */
.progress-ex { display: flex; gap: var(--gap-1); }
.progress-ex i { flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--track); }
.progress-ex i.is-done { background: var(--green); }
.progress-ex i.is-current { background: var(--pink); }

/* --- Fakta nahoře jako tři dlaždice: cíl, minule, rekord (nový rekord zeleně) --- */
.facts--tiles { gap: var(--gap-2); }
.facts--tiles > div { gap: var(--gap-1); padding: var(--gap-3); border-radius: var(--r-m); background: var(--surface); }
.facts--tiles span { font-size: 12px; overflow-wrap: anywhere; }
.facts--tiles b { font-size: 16px; overflow-wrap: anywhere; }
.fact__label { display: flex; align-items: center; gap: var(--gap-1); }
.fact__label .icon { width: 14px; height: 14px; }
.facts--tiles > div.is-record { background: var(--green-tint); }
.facts--tiles > div.is-record .muted { color: var(--green); }

/* Dodatečný zápis: nad názvem tréninku den, na který se zapisuje („Zapisuješ úterý 13. října“) */
.backdate { display: flex; align-items: center; gap: 8px; color: var(--pink-soft); font-size: 14px; font-weight: 600; }
.backdate .icon { width: 18px; height: 18px; }

/* --- Série: hotové, další a rozdělaná --- */
.sets { display: flex; flex-direction: column; }
.set {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
}
.set:first-child { border-top: 0; }
button.set { cursor: pointer; }
button.set:hover .set__val { color: var(--pink-soft); }
.set__no { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--muted); }
.set__val { min-width: 0; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.15; }
.set__val .tag { margin-left: 8px; vertical-align: 3px; }
.set__val small { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--muted); }
.set__state { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.set__state .icon { width: 20px; height: 20px; }
.set--done .set__no, .set__state.ok { color: var(--green); }
.set--next .set__val { color: var(--muted); }
.set--edit { grid-template-columns: 26px minmax(0, 1fr); align-items: start; padding: 14px 0 6px; }
/* Číslo opravované série zavře opravu beze změny */
button.set__no { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }

.tag--ok { background: var(--tag-ok); color: var(--green); }
.tag--small { min-height: 24px; padding: 0 10px; font-size: 13px; font-family: var(--body); }

/*
 * Série v zápisu jako plochy (.sets--tiles): hotová 56 px na --surface, rekord zeleně s vnitřním rámečkem
 * a štítkem, další série jen obrysem. Bez linek mezi řádky, mezera 8 px.
 */
.sets--tiles { gap: var(--gap-2); }
.sets--tiles .set { padding: var(--gap-2) var(--gap-4); border-top: 0; border-radius: var(--r-m); }
.sets--tiles .set__val { font-size: 20px; }
.sets--tiles .set__state .icon { width: 22px; height: 22px; }
.sets--tiles .set--done { background: var(--surface); }
.sets--tiles .set--next { box-shadow: inset 0 0 0 1px var(--line); }
.sets--tiles .set--record { background: var(--green-tint); box-shadow: inset 0 0 0 1.5px var(--green); }
/* Na zelené ploše by tmavě zelený štítek splynul: v rekordu je plně zelený s tmavým písmem a pohárem */
.sets--tiles .set--record .tag--ok { gap: var(--gap-1); background: var(--green); color: var(--bg); font-weight: 700; }
.tag--ok .icon { width: 14px; height: 14px; }

/* Rozdělaná série: plocha s růžovým vnitřním rámečkem a velkými steppery předvyplněnými z minula nebo z cíle */
.setbox {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    padding: var(--gap-4);
    border-radius: var(--r-m);
    background: var(--surface);
    box-shadow: inset 0 0 0 1.5px var(--pink);
}
.setbox__title { font-size: 16px; }
.setbox .row--between > .muted { min-width: 0; text-align: right; }
.big-step { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: var(--gap-2); }
.big-step__value {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-family: var(--display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.big-step__value small { margin-top: 2px; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
/* Ťuknutí na číslo: přepsání z klávesnice místo tlačítek */
.big-step__input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-bottom: 1.5px solid var(--pink);
    border-radius: 0;
    background: none;
    color: var(--text);
    font-family: var(--display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -1px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.big-step__input:focus { outline: none; }
.stepper--big { width: 52px; height: 52px; font-size: 24px; }
.stepper:disabled { opacity: 0.35; cursor: default; border-color: var(--outline); }

/* Menší dvojice pro opravu série v historii */
.mini-step { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 6px; }
.mini-step .big-step__value, .mini-step .big-step__input { font-size: 32px; letter-spacing: -0.5px; }

/* --- Spodní dok: místo navigace velké tlačítko na palec, po sérii časovač pauzy; plné pozadí bez přechodu --- */
.dock {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 10;
    width: min(100%, 480px);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    background: var(--bg);
}
.dock:empty { display: none; }
.dock__note { padding: 0 8px 8px; color: var(--muted); font-size: 14px; text-align: center; }
.btn--huge { width: 100%; min-height: 64px; border-radius: var(--r-pill); font-size: 19px; box-shadow: 0 6px 0 var(--pink-shade); }
.timer { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px; border-radius: var(--r-l); background: var(--surface-2); }
.timer__time { font-family: var(--display); font-weight: 700; font-size: 76px; line-height: 0.92; letter-spacing: -2px; text-align: center; font-variant-numeric: tabular-nums; }
.timer p { text-align: center; }

/* Obsah nad dokem musí jít doscrollovat nad tlačítko i nad časovač */
.screen--dock { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
.screen--dock-timer { padding-bottom: calc(320px + env(safe-area-inset-bottom)); }

/* --- Seznam cviků tréninku a výběr cviku: řádky cviků jako tlačítka --- */
.ex-row__text .steps { margin: 4px 0 2px; }
button.ex-row { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: left; }
.ex-list > button.ex-row:first-child { border-top: 0; }
button.ex-row:hover { color: var(--pink-soft); }
/*
 * Řádek Seznamu cviků (náhled K2 · Seznam cviků): tlačítko „přejít na cvik“ leží přes celý řádek, obsah nad ním
 * ťuknutí propouští a chytá ho jen růžový název (odkaz na Návod, 44 px na výšku přes padding a záporný okraj).
 */
.ex-row--over { position: relative; grid-template-columns: 64px minmax(0, 1fr) 20px; }
.ex-row__go { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.ex-row--over > :not(.ex-row__go) { position: relative; pointer-events: none; }
.ex-row--over > .icon { width: 20px; height: 20px; color: var(--muted); }
.ex-row__guide {
    align-self: flex-start;
    padding: var(--gap-3) 0;
    margin: calc(-1 * var(--gap-3)) 0;
    border: 0;
    background: none;
    color: var(--pink);
    font-family: inherit;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
    pointer-events: auto;
}
.ex-row__guide:hover { color: var(--pink-soft); }

/* Název cviku jako odkaz na detail cviku (Detail tréninku, Cíle cviku): ťuknout jde na 44 px, řádek se nezvětší */
.name-link { display: inline-block; padding-block: var(--gap-3); margin-block: calc(-1 * var(--gap-3)); overflow-wrap: anywhere; }

/* --- Panel Návod přes zápis: list zespodu, pod ním ztmavená obrazovka (náhled K2 · Návod v zápisu) --- */
/* Nativní <dialog>: obsah ho vyplňuje celý (bez paddingu), takže ťuknutí na samotný dialog je ťuknutí na pozadí. */
.sheet {
    width: min(100%, 480px);
    max-width: 100%;
    height: 75vh;
    height: 75dvh;
    max-height: 100%;
    margin: auto auto 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-top-left-radius: var(--r-l);
    border-top-right-radius: var(--r-l);
    background: var(--surface-2);
    color: var(--text);
    box-shadow: inset 0 1px 0 var(--line), 0 -10px 30px var(--shade-strong);
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet::backdrop { background: var(--backdrop); }
.sheet__grip { flex: none; display: flex; justify-content: center; padding: var(--gap-2) 0; }
.sheet__grip i { width: 36px; height: 4px; border-radius: var(--r-pill); background: var(--outline); }
.sheet__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gap-4);
    padding: var(--gap-1) var(--edge) var(--gap-5);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sheet__body h2 { overflow-wrap: anywhere; }
.guide { display: flex; flex-direction: column; gap: var(--gap-5); }
/* Obrázky v panelu nižší než v detailu (dva vedle sebe 112 px), ať je postup vidět bez posouvání */
.guide .ex-img { aspect-ratio: auto; height: 112px; }
.guide .ex-img--wide { height: auto; aspect-ratio: 2 / 1; }
.sheet__foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    padding: var(--gap-3) var(--edge) calc(var(--gap-4) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
}
.sheet__foot .btn { flex: none; margin-left: auto; }
/* Pauza v patičce: „Pauza 1:12 z 1:30“ a pruh, který ubývá s odpočtem v doku */
.sheet__timer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-2); }
.sheet__clock { display: flex; align-items: baseline; gap: var(--gap-2); }
.sheet__time { line-height: 1; font-variant-numeric: tabular-nums; }
.sheet__bar { display: block; height: 4px; overflow: hidden; border-radius: 3px; background: var(--track); }
.sheet__bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); transform-origin: 0 50%; }

/* Ukazatel časovače ubývá plynule a štítek nového rekordu vyskočí jen tomu, kdo nemá v telefonu vypnuté animace. */
@media (prefers-reduced-motion: no-preference) {
    .timer .usage__bar i { transition: width 0.9s linear; }
    .sheet__bar i { transition: transform 0.9s linear; }
    /* Panel Návod vyjede zespodu a pozadí se ztmaví; jen transform a opacity */
    .sheet[open] { animation: sheet-in 0.2s ease-out both; }
    .sheet[open]::backdrop { animation: sheet-fade 0.18s ease-out both; }
    @keyframes sheet-in {
        from { opacity: 0; transform: translateY(40px); }
        to { opacity: 1; transform: none; }
    }
    @keyframes sheet-fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .tag--pop { animation: tag-pop 0.5s ease-out both; }
    @keyframes tag-pop {
        0% { transform: scale(0.6); }
        60% { transform: scale(1.15); }
        100% { transform: scale(1); }
    }
}