/*
 * Tlustý prase – styly.
 *
 * Zásady vzhledu (schválený návrh A „Klidný kokpit“, docs/vzhled-a.md):
 *   - plochy podle role: zaoblenou plochu (--surface) dostane hlavní blok obrazovky, skupina
 *     proklikových řádků a dlaždice; nadpisy a běžný text zůstávají bez rámečků
 *   - jedna levá hrana (24 px), jedna velká věc na obrazovku
 *   - kulaté tvary: tlačítka jsou pilulky nebo kruhy
 *   - růžová = hlavní akce, zelená = pokrok/hotovo, žlutá = nevratné věci a zdraví
 *
 * Barvy, poloměry a mezery se píšou jen jako tokeny z :root níž; natvrdo zapsaná barva nebo
 * poloměr mimo :root neprojde testem tests/js/tokens.test.mjs. Pohyb (animation, transition)
 * patří do @media (prefers-reduced-motion: no-preference).
 *
 * Kvůli přísnému CSP nejsou nikde inline styly; všechno jde přes třídy.
 */

/* --- Písma (hostovaná u nás, licence OFL, viz /fonts/OFL.txt) --- */
@font-face {
    font-family: 'Bricolage Grotesque';
    font-weight: 500 700;
    font-display: swap;
    src: url('/fonts/bricolage-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-weight: 500 700;
    font-display: swap;
    src: url('/fonts/bricolage-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
    font-family: 'Figtree';
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB;
}
@font-face {
    font-family: 'Figtree';
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/figtree-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --- Barvy a míry --- */
:root {
    --bg: #111013;
    /* Plochy podle role: --surface je hlavní blok obrazovky, skupina řádků a spodní lišta, --surface-2
       dráha segmentu, kulatá tlačítka, dialogy a časovač, --surface-3 dlaždice, štítky a avatary. */
    --surface: #1b1a20;
    --surface-2: #201e25;
    --surface-3: #26242b;
    --tile-ink: #d6d1da; /* ikona v neutrální dlaždici řádku */
    /* Tónované plochy: růžová pro vybrané a hlavní, zelená pro hotové a rekordy */
    --pink-tint: #3a1f2a;
    --green-tint: #1c3128;
    --tag-ok: var(--green-tint); /* štítek rekordu v zápisu tréninku */
    --line: #2a2730;
    --outline: #4a4652;
    --text: #f4f1f5;
    --muted: #a7a2ad;
    --pink: #ff8fab;
    --pink-hover: #ffa5bc;
    --pink-soft: #ffb3c6;
    --pink-shade: #c4627e; /* spodní hrana velkého tlačítka v doku zápisu (stín 0 6px 0) */
    --on-pink: #1a0d12;
    --green: #8ee6b8;
    --amber: #ffc65c;
    --edge: 24px;
    /* Místo, které si obrazovka nechá dole pro spodní lištu: lišta 64 px, 14 px od spodku, 16 px vzduchu
       pod posledním řádkem a safe-area (výřez telefonu). Zápis tréninku má místo lišty dok (zapis.css). */
    --nav-space: calc(64px + 14px + 16px + env(safe-area-inset-bottom));
    /* Výška přilepené hlavičky podstránky i se safe-area; pod ní se lepí nadpis měsíce. */
    --sticky-head: calc(52px + env(safe-area-inset-top));
    /* Výška pruhu „Trénink běží“ nad lištou; dokud je vidět, roste o ni --nav-space (body.has-live-bar). */
    --live-bar: 52px;
    /* Poloměry: pilulka je jen to, co je opravdu kulaté (tlačítka, štítky, položky lišty);
       čárky ukazatelů (3 px) a kruhy (50 %) zůstávají mimo tokeny. */
    --r-s: 12px;
    --r-m: 18px;
    --r-l: 24px;
    --r-pill: 999px;
    /* Mezery */
    --gap-1: 4px;
    --gap-2: 8px;
    --gap-3: 12px;
    --gap-4: 16px;
    --gap-5: 24px;
    --gap-6: 32px;
    /* Horní okraj podstránek; horní řádek editoru plánu (.topbar) se k němu váže, aby zůstal 16 px od okraje */
    --sub-top: var(--gap-4);
    /* Vnitřní odsazení plochy (.surface); pás fotek v ploše podle něj sahá až k jejím okrajům */
    --surface-pad: 18px;
    --display: 'Bricolage Grotesque', system-ui, sans-serif;
    --body: 'Figtree', system-ui, sans-serif;
    /* Fotky (modul 3): podklad dlaždice, než se fotka načte, siluety a popisek na fotce */
    --photo-a: #2a2730;
    --photo-b: #1b1a1f;
    --photo-c: #2e2a35;
    --sil: #423d4a;
    --sil-2: #4b4554;
    --scrim: rgba(17, 16, 19, 0.78);
    /* Cviky (modul 4): světlá dlaždice obrázku, štítek hlavního svalu, dráha ukazatele,
       tmavý štítek a nápověda v poli (poslední tři mají stejné odstíny jako dřívější pravidla) */
    --img-bg: #ebe7ee;
    --tag-main: #3b2029;
    --track: #2e2b34;
    --chip-bg: var(--surface-3);
    --placeholder: #6e6976;
    /* Slabší než --muted, ale čitelný (4,81 : 1 na --surface): dny mimo měsíc v Kalendáři */
    --dim: #8a8592;
    /* Dřív natvrdo v pravidlech: najetí na tlačítko, vybraná možnost nebo den, kostra obsahu,
       nejslabší čáry (zástupná čára grafu, číslo bez hodnoty) */
    --hover: #1e1c22;
    --selected: #24161b;
    --skeleton: #211f26;
    --faint: #3a3741;
    /* Průhlednosti: podklad dialogu, ztlumení fotky pod značkou a pod zámkem šifrování */
    --backdrop: rgba(0, 0, 0, 0.6);
    --shade: rgba(17, 16, 19, 0.4);
    --shade-strong: rgba(17, 16, 19, 0.55);
    color-scheme: dark;
}

* { box-sizing: border-box; }

/* Atribut hidden musí vyhrát i nad třídami, které nastavují display. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.4;
    -webkit-text-size-adjust: 100%;
}

/* Posouvání prstem ano, zoom roztažením dvěma prsty ani dvojitým ťuknutím ne: na přání vlastníka,
   přístupnost je obětovaná vědomě. Vnitřní pravidla (.compare pan-y, vodorovné pásy) to dál jen zužují.
   Safari na iPhonu tohle ani viewport nerespektuje, proto main.js ještě ruší události gesture*. */
html { touch-action: pan-x pan-y; }
/* Fixní přilepená lišta nesmí zakrýt pole, ke kterému prohlížeč posune fokus (WCAG 2.4.11) */
html { scroll-padding-top: var(--sticky-head); }

/* Posuvník není vidět nikde v appce (stránka i vodorovné pásy), posouvat jde dál prstem, kolečkem i klávesnicí. */
html, * { scrollbar-width: none; }
html::-webkit-scrollbar, *::-webkit-scrollbar { display: none; }

/* Na širší obrazovce zůstává aplikace sloupcem o šířce telefonu. */
#app {
    position: relative;
    max-width: 480px;
    min-height: 100%;
    margin: 0 auto;
    /* clip, ne hidden: hidden by z #app udělal scrollport (overflow-y se přepočte na auto) a position: sticky
       by lepilo k němu, ne k oknu, které se posouvá (horní řádek editoru plánu by nikdy nezůstal nahoře).
       Starší Safari (< 16) clip nezná a první řádek se v něm ujme: tam aspoň nevznikne vodorovný posun. */
    overflow-x: hidden;
    overflow-x: clip;
}

a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-soft); }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* --- Obrazovka --- */
.screen {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-height: 100dvh;
    padding: 28px var(--edge);
    padding-bottom: var(--nav-space);
}
.screen--bare { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
/* Záložka s plochami pod nadpisem (Trénink): plochy jsou od sebe o 16 px jako v náhledu A */
.screen--tab { gap: var(--gap-4); }
/* Podstránky ze schválených náhledů (Historie, Plány, editor, Fotky, Souhrn): bloky 16 px od sebe,
   Kalendář 12, Profil 8. Podstránky mají nahoře 16 px (hlavní záložky 28). */
.screen--sub { gap: var(--gap-4); padding-top: var(--sub-top); }
.screen--calendar { gap: var(--gap-3); padding-top: var(--sub-top); }
.screen--profile { gap: var(--gap-2); }
/* Odkaz zpět, nadpis a věta pod ním jsou jeden blok (náhled: 4 px); úvodní věta je o 8 px níž */
.page-head { display: flex; flex-direction: column; gap: var(--gap-1); }
/* Na obrazovkách z náhledů dělá mezery mezi bloky jen gap: odstavce mezi bloky nemají výchozí
   okraje prohlížeče (ve flexu se k gap přičítají). Odstavce uvnitř karet (karta dne) se nemění. */
.page-head p,
:is(.screen--sub, .screen--calendar, .screen--profile) > p,
:is(.screen--sub, .screen--calendar, .screen--profile) > .stack > p,
.record-block > p { margin: 0; }
.page-head > .page-head__lead { margin-top: var(--gap-2); }

/*
 * Přilepená hlavička podstránky (náhled K2 · Přilepená hlavička): odkaz zpět vlevo, název uprostřed, linka dole.
 * Je fixní, ne sticky: posouvá se okno a lištu ukáže components/stickyHead.js, až nadpis stránky odjede nahoru.
 * Skrytá (inert) je průhledná a o kousek výš; uvnitř no-preference se tam a zpět jen přejede.
 */
.sticky-head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    /* Tři sloupce: odkaz zpět | název | prázdno. Boční sloupce jsou stejně široké, takže název
       zůstane uprostřed obrazovky; dlouhý popisek zpět (třeba vlastní název tréninku) se ve svém
       sloupci ořízne trojtečkou a název nepřejede (rada kroku 2). */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%) minmax(0, 1fr);
    align-items: center;
    box-sizing: border-box;
    max-width: 480px;
    height: var(--sticky-head);
    margin-inline: auto;
    padding: env(safe-area-inset-top) var(--edge) 0;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    opacity: 0;
    transform: translateY(calc(-1 * var(--gap-2)));
    /* inert drží ťuknutí stranou i bez toho, ale starší prohlížeče inert neznají */
    pointer-events: none;
}
.sticky-head:not([inert]) { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
    .sticky-head { transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
}
/* Odkaz zpět v liště: ikona zůstane celá, popisek se ořízne trojtečkou */
.sticky-head .link { justify-self: start; max-width: 100%; min-width: 0; }
.sticky-head .link .icon { flex: none; }
.sticky-head .link__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Název v prostředním sloupci, vystředěný na obrazovku; dlouhý se ořízne trojtečkou */
.sticky-head__title {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    line-height: 52px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
/* Nadpis záložky vlevo, vpravo přepínač (segment); na velmi úzkém telefonu se zalomí pod nadpis */
.screen-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--gap-3); }
/* Hlavní akce vpravo od nadpisu (Progress: Zapsat): pilulka 44 px s malým plusem */
.screen-head .btn { min-height: 44px; padding: 0 var(--gap-4); gap: 6px; }
.screen-head .btn .icon { width: 18px; height: 18px; }
.screen--bottom { justify-content: flex-end; }
.spacer { flex: 1; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--loose { gap: 20px; }
.stack--tight { gap: 8px; }
.stack--section { gap: 28px; }
.stack--section:empty, .stack--tight:empty { display: none; }
/* Plochy pod sebou (pás dnů, karta, řádky): 16 px mezi nimi */
.stack--cards { gap: var(--gap-4); }
.row { display: flex; align-items: center; gap: 12px; }
.row--between { justify-content: space-between; }
.row--end { align-items: flex-end; }
.row--top { align-items: flex-start; }
.row--wide { gap: 20px; }
.grow { flex: 1; min-width: 0; }
.grow--more { flex: 1.4; }

/* --- Písmo --- */
.display {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.5px;
    text-wrap: balance;
}
/* Pevná škála: velké číslo 44, nadpis záložky 40, nadpis podstránky a karty 30, mezinadpis 20;
   76 má jen přihlášení. Třídy se jmenují podle dřívějších velikostí (aby se v pohledech
   nemusely přejmenovat), stejná úroveň má ale všude stejnou velikost. */
.display--hero { font-size: 76px; line-height: 0.92; }
.display--huge { font-size: 44px; letter-spacing: -1px; }
.display--xxl { font-size: 44px; }
.display--xl { font-size: 40px; }
.display--l { font-size: 30px; }
.display--ml { font-size: 30px; }
.display--m { font-size: 30px; }
.display--s { font-size: 20px; }

.muted { color: var(--muted); font-size: 14px; }
.warn { color: var(--amber); }
.ok { color: var(--green); }
.strong { font-weight: 700; }
.big { font-size: 18px; }
/* Jednotka za velkým číslem (kg) */
.unit { font-size: 22px; color: var(--muted); letter-spacing: 0; }

/* --- Tlačítka --- */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--pink);
    color: var(--on-pink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.btn:hover { background: var(--pink-hover); color: var(--on-pink); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn--ghost { background: none; border: 1.5px solid var(--outline); color: var(--text); }
.btn--ghost:hover { background: var(--hover); color: var(--text); }
.btn--small { min-height: 44px; padding: 0 20px; }
.btn--grow { flex: 1; }

/* Textové tlačítko, vypadá jako odkaz, ale má plnou dotykovou výšku. */
.link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.link:hover { color: var(--pink-soft); }
.link--plain { font-weight: 400; }
.link--warn { color: var(--amber); }
.link--start { align-self: flex-start; }
.link--small { font-size: 14px; }

/* --- Pole formuláře: jen linka --- */
.field { display: flex; flex-direction: column; }
.field__label { color: var(--muted); font-size: 14px; }
.field__input {
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-bottom: 1.5px solid var(--outline);
    border-radius: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 20px;
}
.field__input:focus { outline: none; border-color: var(--pink); }
.field__input::placeholder { color: var(--placeholder); }
.field__input--mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px; letter-spacing: 1px; }
.field__error { min-height: 20px; padding-top: 4px; color: var(--amber); font-size: 14px; }
.field--invalid .field__input { border-color: var(--amber); }

.check { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.check input { width: 24px; height: 24px; flex: none; accent-color: var(--pink); }

.form-error { color: var(--amber); }
.form-error:empty { display: none; }

/* --- Ukazatel kroku --- */
.steps { display: flex; gap: 6px; }
.steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--track); }
.steps i.is-done { background: var(--green); }
.steps i.is-current { background: var(--pink); }

/* --- Seznam řádků s tenkou linkou --- */
.list { display: flex; flex-direction: column; }
.list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    width: 100%;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.list__row:first-child { border-top: 0; }
a.list__row:hover, button.list__row:hover { color: var(--pink-soft); }
.list__row--static { cursor: default; }
.list__row--warn { color: var(--amber); }

/* --- Plocha podle role: hlavní blok obrazovky a skupina proklikových řádků --- */
/* Tenký okraj jako vnitřní stín: plochu oddělí od pozadí i na levném displeji a nezabírá místo. */
.surface {
    padding: var(--surface-pad);
    border-radius: var(--r-l);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}
/* Skupina řádků na ploše; linky mezi řádky dělá border-top z .list__row (první ho nemá). */
.list--surface {
    padding: 0 var(--gap-4);
    border-radius: var(--r-l);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}

/*
 * Proklikový řádek (components/navRow.js): dlaždice s ikonou, název, stav a šipka.
 * Dlouhý název (cvik, plán) se zalomí a nikdy nerozšíří stránku do strany: druhý potomek je název
 * a bez min-width: 0 by se ve flexu nesměl zúžit. Dlaždice a šipka drží velikost, stav vpravo
 * zabere nejvýš půlku řádku a případně se zalomí.
 */
.list__row--nav { justify-content: flex-start; gap: var(--gap-3); min-height: 60px; padding: var(--gap-2) 0; }
.list__row--nav > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
/* Název s vysvětlivkou pod ním (navRow note): „Změnit heslo“ / „fotky zůstanou“ */
.row-text { display: flex; flex-direction: column; line-height: 1.25; }
.row-text__note { color: var(--muted); font-size: 14px; font-weight: 400; }
/* Profil: jméno a vpravo role, kalorie na ploše ve dvou sloupcích */
.profile-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-3); }
.profile-head .muted { padding-bottom: 5px; font-size: 14px; }
.energy { display: flex; flex-direction: column; gap: 10px; padding: 14px var(--surface-pad) var(--gap-4); }
.energy__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-4); }
.energy__nums .display--huge { line-height: 1.05; white-space: nowrap; }
.energy .muted { font-size: 14px; line-height: 1.35; }
/* Odhlásit se na Profilu: řádek s dlaždicí bez šipky, žlutý text i ikona */
.list__row--nav.list__row--warn > span:nth-child(2) { color: var(--amber); }
/* Hustší skupina řádků (Profil): 48 px místo 60 */
.list--dense .list__row--nav { min-height: 48px; padding: 5px 0; }
.list__row--nav > .row { flex: none; max-width: 50%; gap: var(--gap-2); justify-content: flex-end; text-align: right; overflow-wrap: anywhere; }
.list__row--nav > .row .icon { width: 18px; height: 18px; }

.row-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--r-s);
}
.row-tile .icon { width: 20px; height: 20px; }
.row-tile--pink { background: var(--pink-tint); color: var(--pink); }
.row-tile--green { background: var(--green-tint); color: var(--green); }
.row-tile--neutral { background: var(--surface-3); color: var(--tile-ink); }
.row-tile--amber { background: var(--surface-3); color: var(--amber); }

/* --- Prázdný stav (components/emptyState.js): plocha, vlevo klidné prase, vedle věta a akce --- */
.empty {
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    padding: 14px var(--gap-4);
    border-radius: var(--r-l);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
}
.empty__main { display: flex; align-items: flex-start; gap: var(--gap-4); }
.empty__pig { width: 64px; height: 64px; flex: none; }
.empty__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-2); }
.empty__text { margin: 0; font-size: 16px; line-height: 1.4; }
.empty__body .btn { align-self: flex-start; min-height: 44px; padding: 0 20px; }
.empty__note { margin: 0; display: flex; align-items: flex-start; gap: var(--gap-2); color: var(--muted); font-size: 14px; line-height: 1.4; }
.empty__note .icon { width: 18px; height: 18px; flex: none; }

/* --- Záchranný klíč --- */
.recovery-key {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 1px;
    color: var(--green);
    user-select: all;
    overflow-wrap: anywhere;
}

/*
 * --- Přihlášení: prase v rohu (logo A1, schválený návrh) ---
 * Natočené a oříznuté pravým horním rohem. Na vysokém telefonu má 447 px jako v návrhu, na
 * nižším se zmenší, aby spodek hlavy (je 0,637 jeho šířky pod horním okrajem obrazovky) skončil
 * nad nadpisem: pod prasetem je asi 550 px přihlášení + 26 px mezera, 1,57 = 1 / 0,637.
 * Při nejmenších 240 px už stojí vpravo vedle nadpisu, takže ho nezakryje ani na nízkém displeji.
 */
.pig {
    --pig: clamp(240px, calc((100dvh - 576px - env(safe-area-inset-bottom)) * 1.57), 447px);
    position: absolute;
    top: calc(var(--pig) * -0.213);
    right: calc(var(--pig) * -0.258);
    width: var(--pig);
    height: var(--pig);
    transform: rotate(-10deg);
    transform-origin: 53% 53%;
    pointer-events: none;
}

/* --- Parta (správa uživatelů) --- */
.person { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; padding: 14px 0 6px; border-top: 1px solid var(--line); }
.person:first-child { border-top: 0; }
.person--off .person__name, .person--off .avatar { color: var(--muted); }
.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-3);
    font-family: var(--display);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
}
.dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--outline); }
.dot--ok { background: var(--green); }
.dot--warn { background: var(--amber); }
.actions { display: flex; flex-wrap: wrap; column-gap: 24px; }

/* --- Spodní plovoucí lišta „Klidná linka“ (components/NavBar.js) --- */
/* Spodní lišta a lišta výběru fotek mají stejný tvar a místo */
.nav, .selectbar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 448px);
    height: 64px;
    border-radius: var(--r-l);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px var(--shade-strong);
    z-index: 10;
}
.nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Položka je celý sloupec: ikona, pod ní vždy viditelný název. Dotykový cíl 64 px na výšku. */
.nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-1);
    height: 64px;
    color: var(--muted);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.nav__item:hover { color: var(--text); }
.nav__item.is-active { color: var(--pink); }
.nav__label { font-size: 12px; font-weight: 600; line-height: 1; }
.nav__item.is-active .nav__label { font-weight: 700; }
/* Linka nad aktivní položkou. Je široká jako sloupec, aby ji NavBar postavil jen přes
   transform (translateX v procentech); vykreslená čárka 26 × 3 px je uprostřed a natahuje se
   (animace v NavBar.js přes element.animate, nic se nehýbe přes left/right). */
.nav__line {
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 3px;
    pointer-events: none;
}
.nav__line-bar {
    display: block;
    width: 26px;
    height: 3px;
    margin: 0 auto;
    border-radius: 3px;
    background: var(--pink);
    transform-origin: 0 50%;
}

/*
 * Pruh „Trénink běží“ (components/LiveBar.js, náhled K2 · Trénink běží): vyrůstá ze spodní lišty.
 * Sedí těsně nad ní, stejně široký, s jejími horními rohy; lišta pod ním má horní rohy hranaté
 * a bez horní linky, takže pruh a lišta jsou jedna plovoucí plocha. Je pod lištou (z-index),
 * jeho stín tak zůstává pod ní. Dokud je vidět, má obsah dole místo i pro něj (--nav-space).
 */
body.has-live-bar { --nav-space: calc(64px + var(--live-bar) + 14px + 16px + env(safe-area-inset-bottom)); }
body.has-live-bar .nav {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line), 0 10px 30px var(--shade-strong);
}
.live-bar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + 64px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: min(calc(100% - 32px), 448px);
    height: var(--live-bar);
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    padding: 0 var(--gap-3) 0 var(--gap-4);
    border-top-left-radius: var(--r-l);
    border-top-right-radius: var(--r-l);
    background: var(--pink-tint);
    box-shadow: inset 0 1px 0 var(--line), inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), 0 10px 30px var(--shade-strong);
    color: var(--text);
    z-index: 9;
    -webkit-tap-highlight-color: transparent;
}
/* Obecné a:hover by přebarvilo text pruhu (a po ťuknutí na telefonu by v tom stavu zůstal) */
.live-bar:hover { color: var(--text); }
/* Tečka „běží“; kroužek kolem ní pulzuje jen s povoleným pohybem, jinak není vidět */
.live-bar__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.live-bar__dot::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--pink); opacity: 0; }
.live-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
/* Dlouhý název tréninku se ořízne trojtečkou; „běží“ a minuty zůstanou vidět */
.live-bar__line { display: flex; min-width: 0; white-space: nowrap; }
.live-bar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.live-bar__state { flex: none; font-weight: 700; }
.live-bar__time { flex: none; color: var(--muted); }
.live-bar__action { color: var(--pink); font-weight: 700; }
.live-bar > .icon { width: 20px; height: 20px; color: var(--pink); }

.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Ikona kreslená výplní (play): icon('play', { className: 'icon--fill' }) */
.icon--fill { fill: currentColor; stroke: none; }

/* --- Potvrzovací dialog --- */
.dialog {
    width: min(calc(100% - 32px), 420px);
    padding: 24px;
    border: 0;
    border-radius: var(--r-l);
    background: var(--surface-2);
    color: var(--text);
}
.dialog::backdrop { background: var(--backdrop); }

/* Čtečkám viditelné, oku ne. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Přepínač jako text s podtržením (období grafu) --- */
.tabs { display: flex; gap: 20px; }
.tabs__item {
    min-height: 44px;
    padding: 0;
    border: 0;
    border-bottom: 3px solid transparent;
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.tabs__item.is-active { border-color: var(--pink); color: var(--text); }

/*
 * Přepínač jako segment (Plán | Cviky): podklad --surface-2, aktivní volba je růžová pilulka.
 * Vidět je pilulka 36 px, dotknout se jde 44 px: ::after přesahuje nahoru i dolů o padding segmentu.
 */
.tabs--segment { flex: none; gap: 0; padding: var(--gap-1); border-radius: var(--r-pill); background: var(--surface-2); }
.tabs--segment .tabs__item { position: relative; min-height: 36px; padding: 0 var(--gap-4); border-bottom: 0; border-radius: var(--r-pill); }
.tabs--segment .tabs__item::after { content: ''; position: absolute; inset: calc(-1 * var(--gap-1)) 0; }
.tabs--segment .tabs__item.is-active { background: var(--pink); color: var(--on-pink); }
/* Segment přes celou šířku (filtr pózy ve Fotkách): položky se dělí rovným dílem */
.tabs--fill { align-self: stretch; }
.tabs--fill .tabs__item { flex: 1; padding: 0; }

/*
 * --- Karta váhy na Progressu: popisek, velké číslo, čip se změnou, přepínač období a graf ---
 * Čip se zalomí pod číslo, když se vedle něj nevejde (dlouhá věta, 104,6 kg); číslo se nezalamuje.
 */
.weight-card__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--gap-3); }
.weight-card__value { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.weight-card__label, .measures__title { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.weight-card .display--huge { line-height: 1; white-space: nowrap; }
.weight-card .unit { font-size: 18px; }
/* Období v kartě podle náhledu: tmavá dráha, vybrané období je plocha --surface-3 (růžová je pro akci) */
.weight-card .tabs--segment { align-self: stretch; background: var(--bg); }
.weight-card .tabs--segment .tabs__item { flex: 1; padding: 0; font-size: 14px; }
.weight-card .tabs--segment .tabs__item.is-active { background: var(--surface-3); color: var(--text); }

/* --- Graf uvnitř karty: tři linky, růžová čára, bod s okrajem v barvě plochy, štítek vybraného bodu --- */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; }
.chart__plot { position: relative; }
/* Tažení vodorovně patří grafu (výběr bodu), svisle dál stránce */
.chart__plot svg { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.chart__grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Graf má viewBox 390 a v kartě je široký asi 306 px (×0,785): čára 4,5 je na telefonu 3,5 px, okraj bodu 4 je 3 px.
   Žádné vector-effect: non-scaling-stroke na čáře, rozbilo by animaci kreslení (pathLength=1). */
.chart__line { fill: none; stroke: var(--pink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.chart__area { fill: var(--pink); fill-opacity: 0.08; }
.chart__dot, .chart__first { fill: var(--pink); stroke: var(--surface); stroke-width: 4; }
.chart__placeholder { fill: none; stroke: var(--faint); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; }
.chart__axis { display: flex; justify-content: space-between; padding: 6px 0 0; font-size: 12px; }
/* Štítek je na volné straně bodu: top a left nastavuje LineChart.js, transform ho posune o půl šířky a nad/pod bod */
.chart__label { position: absolute; padding: 4px 10px; border-radius: var(--r-s); background: var(--surface-3); color: var(--text); font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; pointer-events: none; }
.chart__label--above { transform: translate(-50%, calc(-100% - 12px)); }
.chart__label--below { transform: translate(-50%, 12px); }

/*
 * --- Míry na Progressu: skupina řádků na ploše (.list--surface) ---
 * Popisek je v DOM malými písmeny, velké první písmeno dělá ::first-letter. Dlouhý popisek se zalomí,
 * hodnota drží velikost a změna vpravo se v nejhorším zalomí na dva řádky.
 */
.measures__title { margin: 0; padding: var(--gap-3) 0 var(--gap-1); }
.measures__title + .list__row { border-top: 0; }
.measure { gap: var(--gap-3); min-height: 56px; padding: var(--gap-2) 0; }
.measure .row-tile { color: var(--pink); }
.measure__label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.measure__label::first-letter { text-transform: uppercase; }
.measure__value { flex: none; white-space: nowrap; }
.measure__delta { flex: none; max-width: 40%; font-size: 13px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.measures__missing { margin: 0; padding: var(--gap-3) 0; border-top: 1px solid var(--line); font-size: 14px; }
.measures__note { margin: 0; padding: var(--gap-3) 0; border-top: 1px solid var(--line); font-size: 13px; }
/* Číslo míry v dlaždicích faktů (zápis tréninku, rekordy) */
.measures__value { display: block; font-family: var(--display); font-size: 30px; line-height: 1.1; }

/* --- Zápis váhy: velké číslo mezi tlačítky minus a plus --- */
.weight { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.weight__row { display: flex; align-items: center; gap: 8px; }
.weight__input {
    width: 190px;
    padding: 0;
    border: 0;
    border-bottom: 1.5px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--text);
    font-family: var(--display);
    font-weight: 700;
    font-size: 76px;
    line-height: 1;
    letter-spacing: -2px;
    text-align: center;
}
.weight__input:focus { outline: none; border-color: var(--pink); }
.weight__input::placeholder { color: var(--faint); }
.stepper {
    width: 52px;
    height: 52px;
    flex: none;
    border: 1.5px solid var(--outline);
    border-radius: 50%;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.stepper:hover { border-color: var(--pink); }
.measure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }

/* --- Seznam zápisů po dnech --- */
.entries__month { padding-bottom: 6px; }
.entry { border-top: 1px solid var(--line); }
.entries__month + .entry { border-top: 0; }
/* Historie: měsíc je nadpis a pod ním plocha s řádky (sloupec data 64 px), rozdělaný trénink růžově */
.entries__block { display: flex; flex-direction: column; gap: var(--gap-2); }
.entries__block .entries__month { padding-bottom: 0; }
.entries__group > .entry:first-child { border-top: 0; }
.entries__group .entry__head { grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 60px; padding: var(--gap-2) 0; }
.entries__group .entry__head > .icon { width: 18px; height: 18px; color: var(--muted); }
/*
 * Nadpis měsíce v Historii a Zápisech se při posouvání lepí nahoru (náhled K2 · Přilepená hlavička):
 * pod přilepenou lištu, a na obrazovce bez lišty pod výřez telefonu. Je to pruh přes celou šířku
 * s pozadím stránky; vzduch nad textem bere záporný okraj, takže staticky se nic neposune.
 * Přechod pod ním je vysoký jako mezera k ploše měsíce: staticky leží jen na pozadí, přilepený
 * nechá řádky pod nadpisem plynule zmizet. Lepí se jen v rámci svého měsíce (rodič je blok měsíce).
 */
.entries__month--sticky {
    position: sticky;
    top: env(safe-area-inset-top);
    z-index: 2;
    margin-top: calc(-1 * var(--gap-3));
    margin-inline: calc(-1 * var(--edge));
    padding-top: var(--gap-3);
    padding-inline: var(--edge);
    background: var(--bg);
}
.screen:has(> .sticky-head) .entries__month--sticky { top: var(--sticky-head); }
.entries__month--sticky::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--gap-2);
    background: linear-gradient(var(--bg), transparent);
    pointer-events: none;
}
.entry__live { color: var(--pink); }
.entry__head {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 64px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.entry__head:hover { color: var(--pink-soft); }
.entry__kg { font-family: var(--display); font-weight: 700; font-size: 22px; }
.entry__actions { display: flex; gap: 24px; padding: 0 0 10px 84px; }

/* --- Výběr z možností (pohlaví, běžný den) --- */
.options { display: flex; flex-direction: column; gap: 8px; }
.options--inline { flex-direction: row; }
.options--inline .option { flex: 1; }
.option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 8px 22px;
    border: 1.5px solid var(--outline);
    border-radius: var(--r-pill);
    background: none;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.option:hover { border-color: var(--pink); }
.option.is-selected { border-color: var(--pink); background: var(--selected); }
.option strong { font-size: 18px; }
.option__mark { width: 22px; height: 22px; flex: none; border: 2px solid var(--outline); border-radius: 50%; }
.option.is-selected .option__mark { border-color: var(--pink); background: var(--pink); }

/* --- Profil: co ještě chybí k výpočtu kalorií --- */
.todo {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 60px;
    border-top: 1px solid var(--line);
    color: var(--text);
}
.todo:first-child { border-top: 0; }
a.todo:hover { color: var(--pink-soft); }
.todo__mark { width: 30px; height: 30px; border: 2px solid var(--outline); border-radius: 50%; }
.todo__mark.is-done { border-color: var(--green); background: var(--green); }
.todo__go { color: var(--pink); font-weight: 700; }

/* --- Kostry obsahu při načítání --- */
.skeleton { border-radius: var(--r-s); background: var(--skeleton); }
.skeleton--title { width: 62%; height: 32px; border-radius: var(--r-m); }
.skeleton--line { width: 100%; height: 16px; }
.skeleton--line-short { width: 45%; height: 16px; }
.skeleton--row { width: 100%; height: 52px; border-radius: var(--r-s); }
.skeleton--circle { width: 48px; height: 48px; flex: none; border-radius: 50%; }
.skeleton--number { width: 70%; height: 44px; border-radius: var(--r-m); }
.skeleton--chart { width: 100%; height: 150px; border-radius: var(--r-m); }

/* Kreslení čáry s pathLength=1 (graf na Progressu i ikona grafu v liště) */
@keyframes draw-line {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}
@keyframes chart-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Ikony spodní lišty (spouští je až @media no-preference níž) */
@keyframes nav-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25) translateY(-2px); }
    100% { transform: scale(1); }
}
@keyframes nav-lift {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-4px); }
    60% { transform: translateY(0); }
    80% { transform: translateY(-2px); }
}
@keyframes nav-tilt {
    0%, 100% { transform: rotate(0); }
    30% { transform: rotate(-14deg); }
    65% { transform: rotate(8deg); }
}
@keyframes nav-nod {
    0%, 100% { transform: rotate(0); }
    35% { transform: rotate(10deg); }
    70% { transform: rotate(-6deg); }
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Kroužek kolem tečky v pruhu „Trénink běží“: roste a mizí */
@keyframes live-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .btn { transition: background-color 0.15s, color 0.15s; }
    /* Aktivovaná ikona v liště zahraje krátkou animaci (schválený náhled lišty): domek poskočí,
       činka se zvedne, příbor se zhoupne, graf se nakreslí (cesta má pathLength=1), panáček kývne. */
    .nav__item.is-active[data-nav="prehled"] .icon { animation: nav-pop 0.45s ease-out; }
    .nav__item.is-active[data-nav="trenink"] .icon { animation: nav-lift 0.6s ease-out; }
    .nav__item.is-active[data-nav="jidlo"] .icon { transform-origin: 50% 80%; animation: nav-tilt 0.5s ease-out; }
    .nav__item.is-active[data-nav="progress"] .icon path { stroke-dasharray: 1; animation: draw-line 0.6s ease-out; }
    .nav__item.is-active[data-nav="profil"] .icon { transform-origin: 50% 90%; animation: nav-nod 0.5s ease-out; }
    .skeleton { animation: skeleton-pulse 1.4s ease-in-out infinite; }
    .live-bar__dot::before { animation: live-pulse 1.6s ease-out infinite; }
    /* Čára grafu se vykreslí zleva doprava (cesta má pathLength=1), plocha a bod ji doprovodí. */
    .chart__line { stroke-dasharray: 1; animation: draw-line 0.7s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
    .chart__area { animation: chart-fade 0.7s ease-out both; }
    .chart__dot { animation: chart-fade 0.3s ease-out 0.5s both; }
}

/* ===== Fotky (modul 3, schválený návrh) ===== */

/* Dlaždice fotky: tmavý přechod (než se fotka rozšifruje) a silueta. Poměr 3:4 jako foto z telefonu na výšku. */
.ph { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-m); overflow: hidden; background: linear-gradient(180deg, var(--photo-a), var(--photo-b)); color: var(--sil); }
.ph--alt { background: linear-gradient(180deg, var(--photo-c), var(--photo-b)); color: var(--sil-2); }
.ph svg.sil { position: absolute; left: 50%; bottom: 0; width: 78%; height: 88%; transform: translateX(-50%); fill: currentColor; }
/* Skutečná fotka vyplní dlaždici (v návrhu byly jen siluety). */
.ph img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ph--flat { border-radius: 0; }
.ph--edge { margin: 0 calc(-1 * var(--edge)); border-radius: 0; }

/*
 * Čip: malý štítek s ikonou na --surface-3 (souhrn tréninku v kartě dne), .chip--ok zeleně (hotovo).
 * Čipy v .chips se na úzkém telefonu zalomí do dalšího řádku.
 */
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border-radius: var(--r-s); background: var(--surface-3); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.25; }
.chip .icon { width: 15px; height: 15px; color: var(--pink); }
.chip--ok { background: var(--green-tint); color: var(--green); }
.chip--ok .icon { color: var(--green); }

/* Popisek na fotce (datum, váha): čip přilepený k rohu fotky, dva řádky pod sebou */
.chip--photo { position: absolute; flex-direction: column; align-items: stretch; gap: 0; background: var(--scrim); font-weight: 400; }
.chip--photo b { font-size: 14px; }
.chip--bl { left: 12px; bottom: 12px; }
.chip--br { right: 12px; bottom: 12px; text-align: right; }

/* Vodorovný pás náhledů od kraje ke kraji; v ploše (Progress) sahá k jejím okrajům */
.strip { display: flex; gap: 10px; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge); overflow-x: auto; scrollbar-width: none; }
.surface .strip { margin: 0 calc(-1 * var(--surface-pad)); padding: 0 var(--surface-pad); }
.strip::-webkit-scrollbar { display: none; }
.strip__item { flex: none; width: 104px; display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.strip__item .muted { font-size: 13px; }

/* Mřížka galerie */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid__item { position: relative; display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.grid__item .muted { font-size: 13px; }
.grid__item.is-selected .ph { outline: 3px solid var(--pink); outline-offset: -3px; }
.pick { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid var(--text); border-radius: 50%; background: var(--shade); font-size: 14px; font-weight: 700; }
.grid__item.is-selected .pick { border-color: var(--pink); background: var(--pink); color: var(--on-pink); }

/* Využití místa: stejná linka jako ukazatel kroku */
.usage { display: flex; flex-direction: column; gap: 8px; }
.usage__bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.usage__bar i { display: block; height: 100%; border-radius: 3px; background: var(--green); }

/* Prázdné a zamčené dlaždice */
.ph--empty { background: none; border: 1.5px dashed var(--outline); color: var(--track); }
.ph--locked { color: var(--line); }
.ph__lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ph__lock .icon { width: 26px; height: 26px; }

/* Výběr pózy: kompaktní varianta .options bez kolečka (tři vedle sebe se nevejdou s kolečkem) */
.segment .option { justify-content: center; padding: 8px 10px; min-height: 48px; border-radius: var(--r-pill); font-weight: 700; }

/* Spodní lišta výběru: stejné rozměry, poloměr a plocha jako navigace, místo ní */
.selectbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px 0 22px;
    font-weight: 700;
}
.selectbar .btn { min-height: 48px; border-radius: var(--r-pill); }

/* Šifrování: náhled ztlumený, přes něj zámek */
.busy-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--shade-strong); color: var(--text); font-weight: 700; }
.busy-overlay .icon { width: 30px; height: 30px; }
.field__input:disabled, .is-busy .field__input { color: var(--muted); }
.progress { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.progress i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--pink); }
@media (prefers-reduced-motion: no-preference) {
    .progress i { animation: progress-run 1.6s ease-in-out infinite; }
}
@keyframes progress-run { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* Porovnání posuvníkem: horní fotka se ořízne podle --pos, které nastavuje posuvník */
.compare { position: relative; margin: 0 calc(-1 * var(--edge)); aspect-ratio: 3 / 4; overflow: hidden; touch-action: pan-y; --pos: 50%; }
.compare .ph { position: absolute; inset: 0; border-radius: 0; }
.compare__top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--text); pointer-events: none; }
.compare__handle { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--pink); color: var(--on-pink); }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare__range:focus-visible + .compare__line .compare__handle { outline: 2px solid var(--text); outline-offset: 3px; }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 calc(-1 * var(--edge)); }
.side .ph { border-radius: 0; }
.side__label { display: flex; flex-direction: column; padding: 8px 0 0 var(--edge); }
.side__label + .side__label, .side > div:last-child .side__label { padding-left: 12px; }

/* ===== Cviky (modul 4, schválený návrh) ===== */

/* Vyhledávání: stejná linka jako pole formuláře, vlevo lupa, vpravo křížek */
.ex-tools { display: flex; flex-direction: column; gap: 14px; }
.search { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1.5px solid var(--outline); color: var(--muted); }
.search:focus-within { border-color: var(--pink); }
.search__input { flex: 1; min-width: 0; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; font-size: 20px; -webkit-appearance: none; appearance: none; }
.search__input:focus { outline: none; }
.search__input::placeholder { color: var(--placeholder); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__clear { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -11px; border: 0; background: none; color: var(--muted); cursor: pointer; }

/* Pás, který jde posunout prstem: partie (přepínač jako období grafu) a vybavení (pilulky jako výběr pózy) */
.scroller { position: relative; display: flex; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge); overflow-x: auto; scrollbar-width: none; }
.scroller::-webkit-scrollbar { display: none; }
.tabs.scroller .tabs__item { flex: none; white-space: nowrap; }
.pills { gap: 8px; }
.pills .option { flex: none; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); font-weight: 700; white-space: nowrap; }

/* Řádek cviku: náhled, název, pod ním svaly a vybavení; čára jako seznam zápisů */
.ex-list { display: flex; flex-direction: column; }
.ex-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 84px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); cursor: pointer; }
.ex-row:first-child { border-top: 0; }
a.ex-row:hover { color: var(--pink-soft); }
.ex-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ex-row__name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.ex-row .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ex-row--skeleton { cursor: default; }
.ex-empty { padding-top: 8px; }

/*
 * Dlaždice obrázku cviku. Fotky a kresby jsou na bílém pozadí; dostanou tlumenou světlou
 * dlaždici a <img> s mix-blend-mode: multiply, takže bílá splyne s dlaždicí a různé zdroje
 * vypadají stejně.
 */
.ex-img { position: relative; display: block; max-width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-m); background: var(--img-bg); }
.ex-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ex-img--wide { aspect-ratio: 4 / 3; }
.ex-thumb { width: 64px; height: 64px; border-radius: var(--r-s); }
/* Bez obrázku: tmavá dlaždice s ikonou, jako zamčená fotka */
.ex-img--none { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--photo-a), var(--photo-b)); color: var(--muted); }
.ex-img--none .icon { width: 26px; height: 26px; }
.ex-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ex-media--one { grid-template-columns: minmax(0, 1fr); }

/* Tři fakta pod názvem: tři stejné sloupce, hodnota písmem nadpisů (.measures__value) */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facts b { line-height: 1.25; }
/* Souhrn tréninku: fakta na ploše s velkými čísly, hlavička s dlaždicí, rekord na zelené ploše */
.facts--surface { padding: var(--gap-4) var(--surface-pad); }
.facts--surface .measures__value { font-size: 44px; line-height: 1.05; }
.facts--surface .measures__value small { font-family: var(--body); font-size: 14px; font-weight: 400; }
.summary-head { display: flex; align-items: center; gap: var(--gap-3); }
.summary-head .row-tile { width: 40px; height: 40px; }
.record-block { display: flex; flex-direction: column; gap: 6px; padding: var(--surface-pad); border-radius: var(--r-l); background: var(--green-tint); }
.record-block .display--huge { line-height: 1.1; overflow-wrap: anywhere; }
.record-block .unit { font-family: var(--body); font-size: 16px; font-weight: 600; }
/* Obtížnost: tři čárky jako ukazatel kroku */
.level { display: flex; gap: 4px; padding-top: 6px; }
.level i { width: 18px; height: 6px; border-radius: 3px; background: var(--track); }
.level i.is-on { background: var(--pink-soft); }

/* Štítky svalů: plné tmavé pilulky (tlačítka jsou obrysová nebo růžová, štítky ne) */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--chip-bg); font-size: 14px; font-weight: 600; }
.tag--main { background: var(--tag-main); color: var(--pink-soft); }

/* Postup: číslo písmem nadpisů, text vedle */
.howto { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: krok; }
.howto li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; counter-increment: krok; }
.howto li::before { content: counter(krok); font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.05; color: var(--pink-soft); }
.tips { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tips li { position: relative; padding-left: 20px; }
.tips li::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--outline); }

/* Atribuce: malé šedé písmo s odkazy, oddělené čárou */
.credit { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }
.credit b { color: var(--text); font-size: 14px; }

/* Dvouřádkový řádek seznamu (Zdroje a licence) */
.list__row--tall { min-height: 64px; padding: 12px 0; }
.list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.list__row--tall .icon { color: var(--muted); }

/* Kostra řádku cviku a pilulky */
.skeleton--thumb { width: 64px; height: 64px; border-radius: var(--r-s); }
.skeleton--pill { width: 96px; height: 44px; flex: none; border-radius: var(--r-pill); }
.skeleton--count { width: 80px; height: 16px; }
.ex-row--skeleton .stack { min-width: 0; }
.ex-row--skeleton .skeleton--line { width: 78%; }