/* AEONIK - woff2 PRVNI, woff jako zaskok, font-display: swap (C19, 21. 9. 2026)
   woff2 vyrobeno rekompresi TEHOZ sfnt ze stavajicich .woff (fonttools+brotli),
   bez subsetu: 656 glyfu, unitsPerEm 1000, cmap 473 znaku a vsechny advance
   width jsou pred i po BAJTOVE SHODNE. Usetri 34 912 B ze 163 360 (-21,4 %).
   Jen 21 %, ne obvyklych 30 - obrysy jsou CFF, takze glyf transformace woff2
   se neuplatni. Kdo bude cekat -50 kB z auditu, necekal spatne, jen neznal tohle.

   Poradi src je ZAVAZNE: prohlizec bere PRVNI format, ktery umi. woff2 pred
   woff, jinak se stahuje stary a vetsi soubor. `local('☺')` je zamerny nesmysl,
   ktery brani zamene za mistni pismo tehoz jmena - nemazat.

   `font-display: swap` misto vychoziho `block`: text je videt hned nahradnim
   pismem a pak preskoci na Aeonik. Preskok je ZMEREN a je maly - Aeonik Regular
   je proti Arialu o 1,39 % uzsi, Bold o 1,96 %, AeonikMedium proti Helvetice
   o 1,12 % sirsi; vyska radku ani vyska body se nemeni. Proto swap, ne optional.
   FontAwesome ma vlastni @font-face v fontawesome.css a na ten se NESAHA. */
@font-face {
	font-family: 'Aeonik';
	src: url('/design/base/font/Aeonik-Regular.eot');
	src: local('☺'), url('/design/base/font/Aeonik-Regular.woff2') format('woff2'), url('/design/base/font/Aeonik-Regular.woff') format('woff'), url('/design/base/font/Aeonik-Regular.ttf') format('truetype'), url('/design/base/font/Aeonik-Regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Aeonik';
	src: url('/design/base/font/Aeonik-Bold.eot');
	src: local('☺'), url('/design/base/font/Aeonik-Bold.woff2') format('woff2'), url('/design/base/font/Aeonik-Bold.woff') format('woff'), url('/design/base/font/Aeonik-Bold.ttf') format('truetype'), url('/design/base/font/Aeonik-Bold.svg') format('svg');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'AeonikMedium';
	src: url('/design/base/font/Aeonik-Medium.eot');
	src: local('☺'), url('/design/base/font/Aeonik-Medium.woff2') format('woff2'), url('/design/base/font/Aeonik-Medium.woff') format('woff'), url('/design/base/font/Aeonik-Medium.ttf') format('truetype'), url('/design/base/font/Aeonik-Medium.svg') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}


* {font-family: 'Aeonik', Arial,Helvetica,sans-serif;}
body {font-family: 'Aeonik',Helvetica,sans-serif; font-size: 14px; color:#000000; margin:0; padding:0; background: #ffffff; -webkit-font-smoothing: antialiased;}
a {color: #000000;}
a:hover {color: #000000;}

button:focus {outline: none;}

/* Menu */
.top-menu-holder {background: white; height: 60px;}
.top-menu-holder .top-menu-items {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; color:#000000; font-size: 16px;}
.top-menu-holder .top-menu-items .nav-link {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; color:#000000; padding-right: .7rem; padding-left: .7rem;}
.top-menu-holder .top-menu-items .nav-item:last-child .nav-link {padding-right: 0;}
/* Od 1200 px se menu rozbaluje do řádku a musí se vejít vedle loga a přepínače
   jazyků do 1140px kontejneru. Nejtěsnější je němčina (Beschwerden,
   Unterstützung, Mein Konto), proto tam jde písmo na 15 px. Ve sbaleném menu
   pod 1200 px je pořád 16 px — tam se svisle nic netlačí. */
@media (min-width: 1200px) {
.top-menu-holder .top-menu-items {font-size: 15px;}
}
.top-menu-holder .navbar-brand {font-weight: bold;; color:#000000; font-size: 23px;}
.navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.navbar-collapse {background: white; position: relative;}
.logoMain {height: 35px; width: auto;}
.logoFooter {height: 21px; width: auto;}
/* Ikona „odkaz ven" u Podcastu odstraněna 14. 8. 2026 — sekce je na webu. */

/* Content page */
.mainContent {background: #F3F3F5;}
.mainContent.padding115 {padding-top: 115px !important;}
.mainContent a {color: black;}
.mainContent .submitButton {box-shadow: none; margin-top: 40px; margin-bottom: 60px; color: black; background: #53F8FF;font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 10px 35px 10px 35px; letter-spacing: 2px; font-weight: normal;} 
.mainContent .submitButton:hover {text-decoration: none;} 
.mainContent .cara {border-bottom: 1px solid #707070; margin: 60px 0 60px 0;} 

/* Langpanel */
.langPanel {color: #000000; font-size: 16px; border-left: 1px solid #808080; height: 27px;line-height: 27px; padding: 0 0 0 15px; margin: 0px 0 0 15px; cursor: pointer;}
.langPanel a {color: #000000;}
.langPanel a.lang-all {display: none;}
.langPanel a:hover {text-decoration: none;}
.langPanel i {vertical-align: top; padding: 3px 0 0 0;}

/* PŘEPÍNAČ JAZYKA SE ZAROVNÁVÁ K TEXTU MENU, NE KE STŘEDU ŘÁDKU (C19, 16. 9. 2026).

   Jan 16. 9. 2026: „oprav lang panel v main menu - je to uskočené dolů, má to
   být v jedné linii s ostatním textem."

   ANONYMNĚ TO BYLO ZAROVNANÉ, VADA JE JEN PŘIHLÁŠENĚ — proto si toho nikdo
   dřív nevšiml. `.langPanel` je flex položka `#navbarNav`, které má
   `align-items: center`, takže se středí na VÝŠKU ŘÁDKU. Text položek menu
   se ale nestředí: `a.nav-link` je blok 8 + 22,5 + 8 = 38,5 px u horního
   okraje řádku. Dokud je řádek přesně 38,5 px vysoký, vyjde obojí nastejno.
   Přihlášenému ale přibude `.navUcet`, jehož `.nav-link` má `min-height: 44px`
   (klikací plocha, rozhodnuto měřením 12. 9. 2026), řádek naroste na 44 px
   a text jazyka zůstane dole.

   Změřeno v DOMu (headless Chrome přes CDP, produkční CSS,
   `document.fonts.ready`, svislý střed TEXTOVÉHO UZLU přes `Range` —
   `getBoundingClientRect()` prvku by tu lhal, rámečky se liší schválně):

                              anonymně      přihlášeně
     výška řádku #navbarNav   38,5 px       44 px
     střed textu položek      29,75         27,00
     střed textu `cz`         30,00         30,00
     ROZDÍL                   0,22 px       3,00 px   <- Janův příznak
     po téhle opravě          0,25 px       0,25 px

   5,75px NENÍ MAGICKÉ ČÍSLO: je to `(38,5 − 27) / 2`, tedy přesně to
   odsazení, které `.langPanel` (vysoký 27 px) dnes dostane středěním
   v 38,5px řádku. Anonymní stav se proto nezmění ANI O PIXEL (rámeček
   16,5…43,5 px před i po) a mění se jen ten přihlášený. Kdyby se někdy
   změnil `padding` nebo `line-height` položek menu, musí se to přepočítat.

   `align-self: baseline` bylo zkoušené a PŘESTŘELÍ o 5,5 px, protože
   `.langPanel` má `line-height: 27px` proti 22,5 px u položek.

   Řádek menu se ZÁMĚRNĚ nevrací na 38,5 px — na 44 px visí dotyková
   plocha i poloha rozbalovacího panelu účtu. Opravuje se to, co je
   špatně: středění panelu, ne výška řádku.

   Pod 1200 px je `.langPanel` `display: none` (ř. ~1533 a ~1545) a menu
   není flex, takže tam obě vlastnosti nedělají nic. */
.langPanel {align-self: flex-start; margin-top: 5.75px;}

.langMenu {background: white; position: absolute; top: 50px; color: #000000; font-size: 16px; padding: 0 0 5px 0; display: none;}
.langMenu a {color: #808080; display: block; padding: 5px 14px 5px 14px;}
.langMenu span {color: #808080; display: block; padding: 5px 14px 5px 14px;}
.langMenu a:hover {text-decoration: none; color: #000000;}
.langMenu .lang-selected {display: none; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; color: #000000;}

.mobileLang {display: none; padding: 0 0 20px 17px; font-size: 16px; color: #808080;}
.mobileLang a {color: #808080;}
.mobileLang a:hover {text-decoration: none;}
.mobileLang .lang-selected {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; color: #000000;}
.mobileLang a:after {content: " | ";}
.mobileLang a:last-child:after {content: "";}

.inp {position: relative; margin: auto; width: 100%; overflow: hidden; margin-bottom: 15px;}
.inp .label {position: absolute; top: 19px; left: 25px; font-size: 20px; color: rgba(0, 0, 0, 0.5); font-weight: 500; -webkit-transform-origin: 0 0; transform-origin: 0 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: all 0.2s ease;transition: all 0.2s ease;pointer-events: none;}
.inp input {width: 100%; border: 1px solid #C6C6C6; border-radius: 10px; font-family: 'Aeonik',Helvetica,sans-serif; padding: 18px 25px 0 25px; height: 70px; font-size: 20px; background: rgba(255, 255, 255, 1); color: #000;-webkit-transition: all 0.15s ease;transition: all 0.15s ease; -webkit-appearance: none;-moz-appearance: none;appearance: none;}
.inp input:not(:placeholder-shown) + .label {color: rgba(0, 0, 0, 0.5);-webkit-transform: translate3d(0, -12px, 0) scale(0.75);transform: translate3d(0, -12px, 0) scale(0.75);}
.inp input:focus {outline: none;}
.inp input:focus + .label {color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0, -12px, 0) scale(0.75);transform: translate3d(0, -12px, 0) scale(0.75);}
.inp input:focus + .label + .focus-bg {-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition: all 0.1s ease;transition: all 0.1s ease;}
.inp textarea {width: 100%; border: 1px solid #C6C6C6; border-radius: 10px; font-family: 'Aeonik',Helvetica,sans-serif; padding: 32px 25px 15px 25px; height: 170px; font-size: 20px; background: rgba(255, 255, 255, 1); color: #000;-webkit-transition: all 0.15s ease;transition: all 0.15s ease; -webkit-appearance: none;-moz-appearance: none;appearance: none;}
.inp textarea:not(:placeholder-shown) + .label {color: rgba(0, 0, 0, 0.5);-webkit-transform: translate3d(0, -12px, 0) scale(0.75);transform: translate3d(0, -12px, 0) scale(0.75);}
.inp textarea:focus {outline: none;}
.inp textarea:focus + .label {color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0, -12px, 0) scale(0.75);transform: translate3d(0, -12px, 0) scale(0.75);}
.inp textarea:focus + .label + .focus-bg {-webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition: all 0.1s ease;transition: all 0.1s ease;}
.is-invalid {border: 1px solid #CC0000 !important;}
.g-recaptcha > div {margin: 0 auto;}

.OS, .verzeOS, .verzeAPP, .zarizeni {display: none;}

.selectContainer select {cursor: pointer; font: inherit; margin-bottom: 20px; width: 100%; border: 1px solid #C6C6C6; border-radius: 10px; font-family: 'Aeonik',Helvetica,sans-serif; padding: 19px 25px 0 25px; height: 70px; font-size: 20px; background: rgba(255, 255, 255, 1); color: #000; -webkit-appearance: none;-moz-appearance: none;appearance: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;  outline: none;} 
.selectContainer select::-ms-expand {display: none;}
.selectContainer {position: relative; width: 100%;} 
/* Šipka vybíracího pole (21. 9. 2026, bod 4 rychlostního auditu).
   Byl to glyf `\f078` z 'Font Awesome 5 Free' — tedy jediné pravidlo, kvůli
   kterému každá stránka se stylovaným <select> stahovala fa-solid-900.woff2
   (80 448 B), i když na ní nebyla ani jedna třída `fa-`. Teď je to týž tvar
   jako inline SVG v `data:` URI, takže nestojí nic navíc.
   Cesta je vytažená z `fa-solid-900.svg` NA PRODUKCI (FA Free 5.14.0,
   units-per-em 512, ascent 448) a překlopená na viewBox (y → 448 − y),
   ne opsaná z dokumentace. `width: 0.875em` je `horiz-adv-x / 512`,
   `height: 1em` je em box — proto `background-size: 100% 100%` kreslí glyf
   na pixel tam, kde ho kreslilo písmo, a mobilní override `font-size: 15px`
   (ř. ~1643) dál funguje beze změny. Barva #000 je `color`, kterou pseudoprvek
   dědil; v `data:` URI ji nejde vzít z `currentColor`, tak je natvrdo. */
.selectContainer:after {font-size: 25px; position: absolute; top: 24px; right: 20px; pointer-events: none;content: ""; display: block; width: 0.875em; height: 1em; line-height: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M207.029 381.476 l-194.344-194.344 c-9.372-9.373-9.372-24.568 0-33.94 l22.667-22.667 c9.357-9.357 24.523-9.375 33.901-0.04 l154.746 154.021 l154.745-154.021 c9.379-9.335 24.544-9.317 33.901 0.04 l22.667 22.667 c9.372 9.373 9.372 24.568 0 33.94 l-194.343 194.344 c-9.373 9.372-24.568 9.372-33.941 0 z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%;}
.selectContainer .label2 {color: rgba(0, 0, 0, 0.5); font-size: 20px; scale(0.75); position: absolute; top: 19px; left: -4px; -webkit-transform: translate3d(0, -16px, 0) scale(0.75);transform: translate3d(0, -16px, 0) scale(0.75);}
.selectContainer .label2_en {left: 8px;}
.OS .label2 {left: 7px;}
.OS .label2_en {left: 13px;}


/* Kompaktnější nadpisy (15. 8. 2026, globálně).
   Výchozí `line-height` byl 1,2 — u velkého displejového písma jsou pak
   řádky zbytečně daleko od sebe. Na dvouřádkovém nadpisu detailu FAQ to
   dělá 11 px. Platí pro všechna `h1` a obě velikosti `.h2title`. */
h1, .h2title, .h2title-2 {line-height: 1.08;}
.h2title {font-size: 56px; font-weight: bold;} 
.h2title-2 {font-size: 40px; font-weight: bold;} 
.h3title {font-size: 32px; font-weight: bold;} 
.pText {font-size: 18px;} 
.pText2 {font-size: 21px;} 

/* Info bar top */
.InfoBar {background: #53F8FF; text-align: center; font-size: 16px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; padding-top: 18px; padding-bottom: 18px;}

/* Lišta s nabídkou aplikace na detailu cviku (12. 8. 2026). Vzhled dědí
   z .InfoBar výš — je to tentýž útvar, jen u spodní hrany: nahoře drží fixní
   menu a oznámení, dole je volno (cookie lišta je modál uprostřed).
   Rozdělení je záměrné: oznámení má být vidět hned, výzva k akci nemá
   přerušit čtení a má být po ruce, až se člověk rozhodne. */
.appLista {position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #53F8FF; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 16px; padding: 14px 0; box-shadow: 0 -2px 12px rgba(0,0,0,0.12);}
.appLista[hidden] {display: none;}
/* Text vlevo, tlačítka vpravo — `space-between` s `flex: 1` na textu, aby se
   sázel na levou hranu contentu, ne doprostřed zbylého místa. */
.appListaIn {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;}
.appListaText {color: #000000; flex: 1 1 auto; text-align: left;}
.appListaBtny {display: flex; align-items: center; gap: 10px; flex: 0 0 auto;}
/* Tlačítko na tyrkysovém pozadí: tmavé, ne modré — blueButton by se v téhle
   ploše ztratil. */
.appListaBtn {display: inline-flex; align-items: center; gap: 8px; background: #000000; color: #FFFFFF; border-radius: 5px; padding: 9px 16px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;}
.appListaBtn:hover {background: #333333; color: #FFFFFF; text-decoration: none;}
/* Ikona obchodu. Bílá jako text tlačítka a o dva stupně větší než písmo,
   aby vedle kapitálek nezmizela. */
.appListaBtn i {color: #FFFFFF; font-size: 18px; line-height: 1;}
.appListaZavrit {position: absolute; right: 12px; top: 6px; background: none; border: 0; font-size: 26px; line-height: 1; color: #000000; opacity: 0.55; cursor: pointer;}
.appListaZavrit:hover {opacity: 1;}
/* Aby lišta nepřekryla poslední řádek patičky. Patička je taky bílá, takže
   odsazení splyne. */
body.maAppListu {padding-bottom: 90px;}

/* Text a tlačítka se do jednoho řádku vejdou jen na širokém monitoru — pod
   tím se láme dřív, než se stihne rozsypat: text nahoru, tlačítka pod něj
   do vlastního řádku. Hranice je bootstrapovské `xl`, stejně jako u menu. */
@media (max-width: 1199.98px) {
  .appListaIn {flex-direction: column; justify-content: center; gap: 10px; padding-right: 26px;}
  .appListaText {flex: 0 0 auto; text-align: center;}
}

/* Na mobilu zůstane po detekci platformy jediné tlačítko, takže se vejde. */
@media (max-width: 575.98px) {
  .appLista {font-size: 14px; padding: 12px 0;}
  .appListaBtn {font-size: 13px; padding: 9px 14px;}
  body.maAppListu {padding-bottom: 120px;}
}

/* Sekce 1 home */
.home1 {} 

.home1:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/home1-bg.jpg?2) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.home1.notShow:after{display: none;}


.intro-text1 {padding-top: 170px; font-weight: bold; font-size: 95px;}
.intro-text1 span {display: block; font-weight: bold; font-size: 56px; padding-top: 25px;}
.intro-text2 {padding-top: 25px;}
.blueButton {color: #313131; background: #6FF9FF; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 10px 35px 10px 35px; letter-spacing: 2px;}
.blueButton:hover {text-decoration: none; color: #313131;}
.whiteFade {background: rgb(255,255,255); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);}
.intro-textLeft span {display: inline-block; font-size: 16px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.intro-textLeft h3 {line-height: 1.1em;}
.intro-listItem {font-weight: bold; font-size: 24px; padding-top: 10px;}
.lightBlue {color: #6FF9FF;}
.intro-textRight {position: relative; min-height: 500px;}
.intro-textRight .home1-phone1 {position: absolute; top:90px; left: 70px; height: 480px;}
.intro-textRight .home1-phone2 {position: absolute; top:-30px; left: 150px; height: 480px;}
.AppDown img {width: 160px; height: auto;}

/* Sekce 2 home */
.home2 {overflow: hidden; background: url(/design/base/img/home2-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center;} 
.home2 h2 {padding-bottom: 10px;} 
.home2 h3 {font-weight: bold; font-size: 40px; padding-bottom: 10px; padding-top: 30px;}
.home2-listItem {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 25px; padding-top: 10px;}
.home2-listItem .ic1 {color: #6FF9FF;}
.home2-listItem .ic2 {color: black;}
.home2-listItem span {vertical-align: middle; margin-left: -5px; font-size: 14px; margin-right: 10px;}
.home2-listItem a {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}

/* Sekce 3 home */
.home3 {overflow: hidden; background: url(/design/base/img/home3-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top center;} 
.home3 h2 {padding-bottom: 10px;} 
.home3 p {padding: 40px 0 65px 0;} 
.home3 .home3Item {margin-bottom: 60px;} 
.home3 .home3Item .ico {} 
.home3 .home3Item .ico img {width: 50px;} 
.home3 .home3Item .text {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 16px; line-height: 20px; padding: 0 15px 0 25px;} 

/* Sekce 4 home */
.home4 {overflow: hidden; background: white;} 
.home4 p {margin-top: 35px;} 
.home4 h3 {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 24px;} 
.home4 .spacing {min-height: 1300px;} 
.home4 .home4content {position: relative;} 
.home4 .home4content .phoneScreen {width: auto; height: 520px;}
.home4 .home4content .phoneScreen1 {position: absolute; top: 115px; left: 640px; width: 850px; height: auto;}
.home4 .home4content .phoneScreen2 {position: absolute; top: 550px; left: -270px;}
.home4 .home4content .phoneScreen3 {position: absolute; top: 290px; left: 15px;}
.home4 .home4content .phoneScreen4 {position: absolute; top: 370px; left: 300px;}
.home4 .home4content .phoneScreen5 {position: absolute; top: 640px; left: 585px;}
.home4 .home4content .phoneScreen6 {position: absolute; top: 570px; left: 870px;}
.home4 .home4content .phoneScreen7 {position: absolute; top: 750px; left: 1155px;}
.home4 .home4content .phoneScreen8 {position: absolute; top: 830px; left: 15px;}
.home4 .home4content .phoneScreen9 {position: absolute; top: 910px; left: 300px;}
.home4 .home4content .phoneScreen10 {position: absolute; top: 1180px; left: 585px;}
.home4 .home4content .phoneScreen11 {position: absolute; top: 1110px; left: 870px;}

/* Sekce 5 home */
.home5 {position: relative;} 
.home5 .video-overlay {background: url(/design/base/img/home5-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top;} 
.home5 .video-overlay h3 {font-weight: bold; font-size: 32px; margin-top: 50px;} 
.home5 .video-overlay .shopButton {color: black; text-decoration: none; margin-top: 20px;background: #53f8ff; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 10px 35px 10px 35px; letter-spacing: 2px;} 
.home5 .video-overlay #play-video {width: 130px; margin: 50px 0 250px 0; cursor: pointer;} 
.home5 .ytvideo {width: 100%; height: auto; margin-bottom: -10px;}
#videoClose {transition: all 0.5s; position: absolute; z-index: 1000; right: 35px; top: 35px; width: 32px; height: auto; display: none; cursor: pointer; -webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg);}
#videoClose:hover {scale: 1.2;}

/* Sekce 6 home */
.home6 {overflow: hidden; background: url(/design/base/img/home6-bg.jpg?1); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top;} 
.home6 .home6content {padding-top: 43vw;} 
.home6 .phoneMockup {margin: 40px 0 50px 0; width: 100%; height: auto; position: relative;} 
.home6 .phoneMockup .frame {position: absolute;width: 100%; max-width: 873px; height: auto; top: 32px; left: 118px;} 
.home6 .videoButtonsItem {border-top: 1px solid black; padding: 0; cursor: pointer;}
.home6 .videoButtonsItem h3 {font-weight: bold; font-size: 24px; padding: 15px 0 15px 0; margin: 0;} 
.home6 .videoButtonsItem p {font-size: 18px;} 
.home6 .videoButtonsItem1 {transition: all 0.5s;} 
.home6 .videoButtonsItem2 {transition: all 0.5s; opacity: 0.4;} 

/* Sekce 7 home */
.home7 {background: url(/design/base/img/home7-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center;} 
.home7 h2 {} 
.home7 a {color: #637B7C; font-size: 18px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.home7 a i {transition: all 0.5s;}
.home7 a:hover {text-decoration: none;}
.home7 a:hover i {-webkit-transform: rotate(360deg);	-moz-transform: rotate(360deg);	transform: rotate(360deg);}
.home7 .homeShopItem {}
.home7 .homeShopItem h3 {font-weight: bold; font-size: 24px; margin-top: 25px;}
.home7 .homeShopItem h3 a {font-size: 24px; color:black;}
.home7 .homeShopItem .pText a {font-size: 18px; color:black; font-family: 'Aeonik', Arial,Helvetica,sans-serif;}
.home7 .homeShopItem a.shopLink {color: #637B7C; font-size: 16px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.home7 .homeShopItem .homeShopItemImage img {transition: transform 0.8s ease; z-index:1; position: relative;} 
.home7 .homeShopItem .homeShopItemImage {position: relative; overflow: hidden; z-index:100; border-radius: 20px;}
.home7 .homeShopItem .homeShopItemImage .priceBox {position: absolute; right: 15px; bottom: 20px; color: white; background: black; padding: 4px 10px; border-radius: 10px; font-size: 15px;}
.home7 .homeShopItem .homeShopItemImage:hover .priceBox {background: #0065f2;}
.home7 .homeShopItem .homeShopItemImage:hover img {border-radius: 20px; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} 
.home7 .shopButton, .exerciseDetail .shopButton {margin-top: 20px; color: #E0EEEE; background: #637B7C;font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 10px 35px 10px 35px; letter-spacing: 2px;}
.home7 .shopButton:hover, .exerciseDetail .shopButton:hover {text-decoration: none; color: #E0EEEE; background: #415152;}

/* Sekce 8 home */
.home8 {background: #F3F3F5;}
.home8white {background: white;}
.home8 .faq {margin-top: 35px;}
.home8 .faq .icoPlus {float: right; transition: all 0.5s; height: 32px; width: auto; margin: 10px 0 0 0; padding: 0;}
.home8 .faqItem {border-bottom: 1px solid black; padding: 30px 0 30px 0;}
.home8 .faqItem:last-child {border-bottom: none;}
.home8 .faqItem a[aria-expanded=true] .icoPlus {-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg);}
.home8 .faqItem a {color: black; text-decoration: none; cursor: pointer;}
.home8 .faqItem a:hover {text-decoration: none;}
/* Otázka 24 px, ne 32 (Jan 16. 8.). Ve 32 px byla otázka větší než h2
   sekcí jinde na webu a na Podpoře jich je pod sebou přes čtyřicet —
   stránka pak vypadá jako soupis nadpisů, ne jako nápověda. */
.home8 .faqItem h3 {font-weight: bold; font-size: 24px; display: inline; margin: 0; padding: 0;}
/* Velikost odpovědi patří na OBAL, ne jen na `p`.

   Starší odpovědi jsou v databázi jako holý text bez `<p>`, novější (od
   migrace 089) mají odstavce. Dokud pravidlo sedělo jen na `p`, holé
   odpovědi propadly na `body` — 14 px proti 18 px u nových, tedy dvě
   velikosti písma na jedné stránce. Jan 16. 8.: *„velikost odpovědi ať je
   stejně velká jako v těchto nových odpovědích."*

   Odsazení odshora se stěhuje ze `p` na obal ze stejného důvodu: holá
   odpověď ho neměla vůbec a lepila se na otázku. Pro odpovědi s `<p>` se
   nic nemění — `p` má margin 0 nahoře. */
.home8 .faqItem .collapseText {font-size: 18px; padding-top: 35px;}
.home8 .faqItem .collapseText p {font-size: 18px; padding-top: 0;}
.home8 .faqItem .collapseText p:last-child {margin-bottom: 0;}
.home8 .faqItem .collapseText ul {font-size: 18px;}
 
/* Footer */
.footer {background: white;}
.footerInfo1 {color: black; font-size: 14px; color: #9F9F9F; margin: 0; padding: 0 0 0 15px; line-height: 23px;}
.footerInfo1 li {padding-left: 10px;}
.footer .order-1 {font-weight: bold; color:#000000; font-size: 23px;}
.footer .order-2 {font-size: 20px;}
.footer .order-2 a {color:#000000;}
.footer .order-2 i {padding: 7px 3px 0 3px;}
.footer .order-3 a {color:#000000; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 16px; padding: 4px 14px 0 14px; display: inline-block;}
.footer .order-3 a:hover {text-decoration: none;}
.footer .copyright {font-size: 14px; color: #9F9F9F;}
.footer .copyright a {text-decoration: none; color: #9F9F9F;}
.footer .copyright a:hover {text-decoration: underline;}

/* About us */
.aboutUs:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/aboutUs.jpg?4) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.aboutUs.notShow:after{display: none;}
.aboutUs {}
/* Hlavičky rozcestníků (Články, Cviky, Podcast, O nás, Podpora) mají jednu
   výšku — dřív se lišily podle sekce i podle breakpointu a na mobilu končil
   nadpis až v půlce obrazovky (110 px margin + 270 px padding).
   Sjednoceno 13. 8. 2026; `.podcastStrana` má vlastní pravidlo o kus níž
   jen kvůli pozadí, odsazení bere odsud. */
.aboutUs .whiteFade, .support .whiteFade {margin: 0; padding: 140px 0 0 0;}
.aboutUs .whiteFade h1, .support .whiteFade h1 {margin: 0; padding: 0 0 40px 0; font-size: 48px;}

/* Předplatné: JEDEN plynulý přechod přes hlavičku i pod ni.
   Fotka je na `.support:after` (fixed, z-index -1), takže stačí, aby vrstvy
   nad ní zůstaly průsvitné — přechod pak může pokračovat i do obsahu.

   Tři věci, na kterých to dřív padalo:

   1. Přechod dojížděl do plné bílé už na konci hlavičky, takže fotka končila
      nad panelem ceníku. Teď dojede až v POLOVINĚ panelu — druhá polovina
      přechodu proto sedí na `.mainContentPage` níž, ne tady.
   2. Mezi hlavičkou a obsahem zůstával 4px proužek, kterým prosvítala fotka.
      Vypadalo to jako dva přechody přes sebe. Řeší `margin-top: -4px` níž.
   3. Selektor musí být `.subscriptionStrana.support`, ne `.subscriptionStrana`:
      Předplatné si bere třídu `.support` kvůli fotce a `.support .whiteFade`
      v mobilním bloku (ř. ~880) má STEJNOU specificitu 0,2,0, ale je později
      v souboru, takže by na mobilu vyhrálo. Tři třídy to řeší bez duplikátu
      v každém media bloku.

   Obě části přechodu jedou do `#f3f3f5` (barva stránky), ne do bílé — kdyby
   se barvy lišily, je na styku vidět hrana. */
.subscriptionStrana .whiteFade h1 {padding-bottom: 90px;}
.subscriptionStrana.support .whiteFade {
  background: -moz-linear-gradient(180deg, rgba(243,243,245,0) 0%, rgba(243,243,245,0.45) 100%);
  background: -webkit-linear-gradient(180deg, rgba(243,243,245,0) 0%, rgba(243,243,245,0.45) 100%);
  background: linear-gradient(180deg, rgba(243,243,245,0) 0%, rgba(243,243,245,0.45) 100%);}
/* Fotka na pozadí Předplatného. Vlastní pravidlo schválně: stránka si bere
   třídu `.support` kvůli tomu, aby vůbec nějakou fotku měla, a bez tohohle
   override by sdílela fotku s Podporou — změna jedné stránky by tichem
   změnila i druhou. Stejný vzor jako `.podcastStrana:after` níž.
   Přepnutí na jinou fotku = změna jednoho `url()`. */
.subscriptionStrana:after {background: url(/design/base/img/subscription-0U6A1765.jpg) center center !important;
  background-size: cover !important; background-position: center !important;}
.subscriptionStrana + .mainContentPage {
  margin-top: -4px;
  background: -moz-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px);
  background: -webkit-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px);
  background: linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px);}

/* --- Potíže (rozcestník) ------------------------------------------------
   Hlavička je stejná stavba jako Podpora a 404: `.support` nese fixní fotku
   (`:after`, `z-index: -1`), `.whiteFade` je průsvitný přechod přes ni.

   Fotka má vlastní `url()` — schválně, ne sdílená s Podporou. Stejný důvod
   jako u `.subscriptionStrana`: sdílení by znamenalo, že výměna fotky na
   jedné stránce tiše změní i druhou. Výměna = jeden řádek.

   Přechod je DLOUHÝ, jako na Předplatném (zadal Jan 16. 8.): hlavička dojede
   jen na 45 % a druhá polovina přechodu sedí na `.mainContentPage` níž.
   Obojí do `#f3f3f5`, tedy do barvy stránky — kdyby se odstíny lišily, je
   na styku vidět hrana.

   BEZ `margin-top: -4px`, na rozdíl od Předplatného. Tam ten posun zakrývá
   4px proužek, kterým prosvítala fotka; tady mezera není a posun by překryl
   dvě průsvitné vrstvy přes sebe → tmavý pruh v místě styku. Přesně to se
   stalo na 404 (Z16) a bylo to vráceno.

   Selektor musí být `.potizeStrana.support` (0,3,0), ne samotná
   `.potizeStrana` (0,2,0): `.support .whiteFade` v mobilním bloku má
   stejnou specificitu a je později v souboru, takže by na mobilu vyhrálo. */
/* `?2` je cache-busting, ne dekorace: fotka se vyměnila za `sets_PATR.jpg`
   (Jan 16. 8.) pod stejným jménem, takže bez změny adresy by vracející se
   návštěvník dál viděl tu starou z cache. Web to tak dělá i jinde
   (`support.jpg?6`, `aboutUs_4.jpg?8`). Při další výměně zvýšit číslo.

   `center top`, ne `center center`. Fotky ze `sets_full` jsou NA VÝŠKU
   (1125×1407) a `cover` na širokém okně z nich ukáže jen vodorovný pruh:
   při 1440×900 je to 25–75 % výšky, tedy trup a trenky — hlava i barevný
   terč v místě potíže padnou mimo. Se zarovnáním nahoru je vidět hlava,
   rameno i terč a vlevo zůstane čistá zeď, na které je nadpis čitelný.
   Platí i pro detaily potíží — ty přebíjejí jen `background-image`. */
.potizeStrana:after {background: url(/design/base/img/potize-bg.jpg?2) center top !important;
  background-size: cover !important; background-position: center top !important;}
/* Přechod začíná na 0,20, ne na nule. Souvisí s tím, že perex nebyl čitelný
   (Jan 16. 8.): fotka potíže je proti dřívější světlé zdi kontrastní a text
   na ní ležel skoro bez podkladu. Dvacet procent krytí nahoře fotku pořád
   nechá vidět (hlavu i terč), ale dá textu na čem stát. */
.potizeStrana.support .whiteFade {
  background: -moz-linear-gradient(180deg, rgba(243,243,245,0.20) 0%, rgba(243,243,245,0.45) 100%);
  background: -webkit-linear-gradient(180deg, rgba(243,243,245,0.20) 0%, rgba(243,243,245,0.45) 100%);
  background: linear-gradient(180deg, rgba(243,243,245,var(--bgCover, 0.20)) 0%,
    rgba(243,243,245,calc(var(--bgCover, 0.20) + 0.25)) 100%);}

/* PODBÍLENÍ FOTKY NA POZADÍ — žebřík `bgWhiteCover0` … `bgWhiteCover95`.

   Zadal Jan 16. 8. 2026: *„jde ještě překrýt celou tu bg fotku bílou semi
   transparent coverem třeba s nějakým odstupňovaným classe (…) Nebo jestli
   css bere nějakou dynamickou class jako bgWhiteCover32?"*

   **Dynamickou ne.** CSS neumí z názvu třídy vyčíst číslo — `bgWhiteCover32`
   by muselo být napsané jako pravidlo, jinak je to pro prohlížeč jen řetězec.
   Buď se tedy vypíše řada (tohle), nebo se číslo pošle z dat jako hodnota
   proměnné v atributu `style` — a `style` v HTML je přesně to, co jsme právě
   vyhodili. Proto řada po pěti: 20 tříd, dost jemné na ladění a všechno
   v jednom systému.

   Číslo = kolik procent bílé je NAHOŘE, u nadpisu. Dole je vždycky o 25 bodů
   víc, aby text ke konci hlavičky měl na čem stát; o ten přírůstek se stará
   `calc()` výš, takže se tady nastavuje jediné číslo.

   Kde se to bere: rozcestník má třídu natvrdo v `main/potize.html`, detail
   ji dostává z dat (sloupec `potize.bg_cover`, pole „Podbílení fotky"
   v administraci) — každá potíž má jinak tmavou fotku a ladí se po jedné. */
.bgWhiteCover0 {--bgCover: 0;}
.bgWhiteCover5 {--bgCover: 0.05;}
.bgWhiteCover10 {--bgCover: 0.10;}
.bgWhiteCover15 {--bgCover: 0.15;}
.bgWhiteCover20 {--bgCover: 0.20;}
.bgWhiteCover25 {--bgCover: 0.25;}
.bgWhiteCover30 {--bgCover: 0.30;}
.bgWhiteCover35 {--bgCover: 0.35;}
.bgWhiteCover40 {--bgCover: 0.40;}
.bgWhiteCover45 {--bgCover: 0.45;}
.bgWhiteCover50 {--bgCover: 0.50;}
.bgWhiteCover55 {--bgCover: 0.55;}
.bgWhiteCover60 {--bgCover: 0.60;}
.bgWhiteCover65 {--bgCover: 0.65;}
.bgWhiteCover70 {--bgCover: 0.70;}
.bgWhiteCover75 {--bgCover: 0.75;}
.bgWhiteCover80 {--bgCover: 0.80;}
.bgWhiteCover85 {--bgCover: 0.85;}
.bgWhiteCover90 {--bgCover: 0.90;}
.bgWhiteCover95 {--bgCover: 0.95;}
.potizeStrana + .mainContentPage {
  background: -moz-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px);
  background: -webkit-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px);
  background: linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px);}

/* DETAIL potíže. Liší se od rozcestníku dvěma věcmi.

   1. Fotka je pro každou potíž jiná. Vypisuje se tady jako třída na kód
      potíže (`potizeBgPACR`), kterou šablona detailu poskládá z dat.
      Jan 16. 8.: *„Máš css a to stačí. Jeden systém."* — takže žádný
      `<style>` v šabloně ani `style=""` v HTML.
      Kódů je čtrnáct, protože jen tolik jich má fotku ve `sets_full`;
      zbytek (kulatá záda, předsunuté držení hlavy, skoliotické držení,
      prohnutá bedra, ploché nohy) zůstane u společné fotky z
      `.potizeStrana:after`. Přibude-li fotka, přibude sem řádek.
   2. Výběh gradienty je 160 px, ne 440. Dlouhý výběh je správně na
      ROZCESTNÍKU, kde pod hlavičkou začínají bílé karty a fotka má kam
      prosvítat. Na detailu je pod hlavičkou holý text a hlavička je nižší,
      takže první odstavce padaly do místa s 55–60 % průhlednosti a text
      šel přes obličej na fotce. */
.potizeBgPAAN:after {background-image: url(/files/Potize/bg/PAAN.jpg) !important;}
.potizeBgPACHE:after {background-image: url(/files/Potize/bg/PACHE.jpg) !important;}
.potizeBgPACR:after {background-image: url(/files/Potize/bg/PACR.jpg) !important;}
.potizeBgPAGR:after {background-image: url(/files/Potize/bg/PAGR.jpg) !important;}
.potizeBgPAHE:after {background-image: url(/files/Potize/bg/PAHE.jpg) !important;}
.potizeBgPAHI:after {background-image: url(/files/Potize/bg/PAHI.jpg) !important;}
.potizeBgPAIN:after {background-image: url(/files/Potize/bg/PAIN.jpg) !important;}
.potizeBgPAKN:after {background-image: url(/files/Potize/bg/PAKN.jpg) !important;}
.potizeBgPALO:after {background-image: url(/files/Potize/bg/PALO.jpg) !important;}
.potizeBgPANE:after {background-image: url(/files/Potize/bg/PANE.jpg) !important;}
.potizeBgPAPE:after {background-image: url(/files/Potize/bg/PAPE.jpg) !important;}
.potizeBgPARI:after {background-image: url(/files/Potize/bg/PARI.jpg) !important;}
.potizeBgPASH:after {background-image: url(/files/Potize/bg/PASH.jpg) !important;}
.potizeBgPATR:after {background-image: url(/files/Potize/bg/PATR.jpg) !important;}
.potizeDetail + .mainContentPage {
  background: -moz-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 160px);
  background: -webkit-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 160px);
  background: linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 160px);}

/* Úvod pod nadpisem zůstává v hlavičce nad fotkou, takže potřebuje stejnou
   šířku jako perex jinde na webu — jinak se rozteče přes celý container.

   Typografie je převzatá z Podcastu (zadal Jan 16. 8.: „Ten odstavec pod h1
   nastyluj jako na Podcastu."): `.pText2` 21 px, řádkování 1,5. Nepíše se
   přes ty třídy, protože ty sedí v těle stránky a tenhle perex je v hlavičce
   nad fotkou.

   BARVA JE ALE JINÁ NEŽ NA PODCASTU, a schválně. Jan 16. 8.: *„Odstavec pod
   h1 není čitelný."* Podcast má tlumené `#637B7C`, jenže tam leží na světlé
   fotce; sem přišla `sets_PATR.jpg`, kde je pod textem postava i stín, a
   přechod má v místě perexu teprve ~25 % krytí. Šedozelená na tom mizí.
   Perex proto bere `#313131` — tutéž barvu, jakou přes fotku používají
   drobečky (`.whiteFade .podcastDrobky`), o kterých je doloženo, že čitelné
   jsou. Tlumenost proti nadpisu drží velikost a řez, ne světlost. */
.potizeStrana .potizeUvod {max-width: 720px; margin-bottom: 0;
  font-size: 21px; line-height: 1.5; color: #313131;}
.potizeStrana .potizeUvod p:last-child {margin-bottom: 0;}

/* Nadpis v hlavičce.

   VELIKOST ANI ŘEZ SE TU NENASTAVUJE. Nadpis nese v HTML třídu
   `h2title h2titleMobile40`, úplně stejně jako Podpora, O nás, Podcast
   i Předplatné — ty ji mají všechny (ověřeno v jejich HTML). `.h2title` dává
   `font-weight: bold`, `.support .whiteFade h1` srazí velikost na 48 px
   a `.h2titleMobile40` na mobilu na 40 px. Odsud se to nedubluje.

   Tohle je ta chyba, kterou Jan reklamoval dvakrát: nadpis byl **bez třídy**,
   takže měl `font-weight: 500`, kdežto h2 „Bolest" pod ním mělo **700**.
   Nadpis byl větší, ale vypadal slabší než podnadpis a hierarchie se
   opticky obrátila. Velikost přitom seděla — problém byl řez.

   Zůstává jen odsazení, a to kvůli perexu: na Podpoře nadpis hlavičku
   *končí*, takže jeho `padding-bottom: 40px` je odsazení konce sekce. Tady
   je pod nadpisem ještě perex, takže se mezera zmenšuje u nadpisu
   a přesouvá pod perex (jinak text sedí přesně na hraně hlavičky).

   Selektor je `.potizeStrana.maDrobecky` (0,3,1) schválně: `.maDrobecky
   .whiteFade h1` (ř. ~662) i `.support .whiteFade h1` v mobilním bloku mají
   (0,2,1) a jsou v souboru později, takže by obojí vyhrálo nad dvěma třídami. */
.potizeStrana.maDrobecky .whiteFade h1 {padding-bottom: 18px;}
.potizeStrana .potizeUvod {padding-bottom: 44px;}

/* Z73 — krátký odkaz na předplatné hned pod perexem.

   Zadal Jan 17. 8. 2026. Důvod je změřený, ne dojmový: na
   `/cz/potize/bolest-v-krizi/` při 375x812 leží tlačítko závěrečného panelu
   na 3 186 px, tedy skoro čtyři obrazovky pod ohybem (812). Panel dole
   zůstává; tohle je jen řádek, aby cesta k předplatnému existovala i pro
   toho, kdo detail nedočte.

   Textový odkaz, ne tlačítko — modré tlačítko nahoře i dole by byla tatáž
   nabídka dvakrát a nad ohybem by přebilo perex, kvůli kterému sem člověk
   přišel.

   Barvu i šířku bere po perexu (`#313131`, 720px, doloženo u něj výš),
   jen menší písmo, aby v hierarchii stál pod ním. Spodní mezeru hlavičky
   (44px) přebírá on, protože je nově poslední — perexu proto zůstane jen
   odsazení k němu. `:not(:last-child)` schválně: když je perex prázdný,
   `.potizeUvod` se vůbec nevykreslí a mezeru drží tenhle řádek sám. */
.potizeStrana .potizeUvod:not(:last-child) {padding-bottom: 14px;}
.potizeStrana .potizeUvodCta {max-width: 720px; margin-bottom: 0;
  font-size: 17px; line-height: 1.5; color: #313131;}

/* Z73b — z odkazu je tlačítko. Jan 21. 8.: *„to cta by mohl být button zase
   jako na shopu."*

   Obrysové, ne modré: dole v panelu „Co s tím udělat?" stojí plné
   `.blueButton` a dvě stejná tlačítka nad sebou by byla tatáž nabídka
   dvakrát. Rozdíl v tvaru to řeší — nahoře nabídka, dole rozhodnutí.

   Rozměry jsou TŘETÍ kopie téhož předpisu (`.chybaTlacitka .outlineBtn`
   u 404 a `.subscriptionUcetTlacitka .outlineBtn` u Předplatného mají
   znak po znaku totéž). Nesjednocuju to teď do jedné třídy: sáhlo by to
   na dvě stránky, které nikdo neobjednal, a `.outlineBtn` samo o sobě je
   malé tlačítko karty (14 px), takže bez dotažení by tady vypadalo jako
   překlep. Patří to do vlastního úklidu.

   Spodní mezeru hlavičky (44 px) drží tenhle řádek, protože je poslední. */
.potizeStrana .potizeUvodCtaBtn {margin: 16px 0 0; padding-bottom: 44px;}
/* Druhý selektor je Z81 (odkaz z článku na potíž, 21. 8.). Přidává se sem,
   místo aby si tam vznikla ČTVRTÁ kopie týchž deklarací — tři už v souboru
   jsou (404, Předplatné, tenhle CTA) a čtvrtá by rozdíly jen prohloubila.
   Pravidlo se nepřesouvá; mezi ním a článkovým blokem níž není nic, co by
   `.articlePotizeOdkazBtn .outlineBtn` přebíjelo (nová třída). */
.potizeStrana .potizeUvodCtaBtn .outlineBtn,
.articlePotizeOdkazBtn .outlineBtn {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 9px 34px 9px 34px; letter-spacing: 2px; display: inline-block;}
.potizeStrana .potizeUvodCtaBtn .outlineBtn:hover,
.articlePotizeOdkazBtn .outlineBtn:hover {color: #ffffff; background: #000000;}

/* Skupiny (Bolest / Držení těla) a nadpis závěrečného CTA.

   Zadal Jan 16. 8.: *„ty h2 na podstránkách udělej velikostně a stylově jako
   h3 třeba zde"* + odkaz na `/cz/clanky/skoliometr-zdarma-v-aplikaci-spiralista/`.
   Změřeno tam: h3 je **28 px, řádkování 33,6 px (1,2)** a na mobilu se
   nezmenšuje. Přesně to je tady, ne `.h2title-2` (40 px), které se nadpisu
   48 px pletlo do cesty.

   **Řez je 700, ne 500** — Jan 16. 8.: *„h2 bude bold na Potíže i v detailu."*
   Velikost tedy z článkového h3, tučnost z ostatních nadpisů webu. Rozdíl
   proti h1 pak dělá velikost (48 vs. 28), ne slabší písmo.

   Mezery zůstávají sekční (50/24 px) — Jan mluvil o velikosti a stylu,
   ne o rytmu stránky; h3 v článku má mb 8 px, protože pod ním hned pokračuje
   odstavec, kdežto tady začíná nový blok karet. */
.potizeSkupina {font-size: 28px; font-weight: 700; line-height: 1.2;
  margin: 50px 0 24px 0;}
.potizeSkupina:first-child {margin-top: 0;}

/* Seznam potíží. Mřížka, ne `<ul>` s odrážkami: položka má nadpis, popis
   a tlačítko, takže se chová jako karta a odrážka by jí překážela.
   `align-items: stretch` (výchozí u gridu) drží karty ve stejné výšce,
   tlačítko sedí dole díky `margin-top: auto`. */
.potizeSeznam {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  list-style: none; margin: 0; padding: 0;}
/* Z83b (Jan 21. 8.: „Z83 - A"): stylovaná je KARTA, ne položka seznamu.
   `<li>` je od té chvíle jen buňka mřížky a vzhled i rozvržení nese odkaz
   uvnitř — jinak by se nedalo obarvit celé okolí při hoveru a šipka by neměla
   ke komu být zarovnaná. `align-items: center` u šipky řeší `.potizeSipka` níž.

   `color: inherit` a `text-decoration: none` jsou nutné: obsah karty je teď
   uvnitř `<a>`, takže by nadpis i popis zmodraly a podtrhly se. */
.potizePolozka {display: flex;}
.potizeKarta {display: flex; align-items: stretch; gap: 16px; background: #ffffff;
  border-radius: 10px; padding: 20px; flex: 1 1 auto; color: inherit;
  text-decoration: none; transition: background .15s ease, box-shadow .15s ease;}
/* Že je karta klikací, musí být poznat bez tlačítka. Dělá to čtveřice:
   ztmavení podkladu, stín, podtržení nadpisu a ztmavení fotky.

   Z83c (Jan 21. 8.): **karta se při hoveru neposouvá.** Do té chvíle měla
   `transform: translateY(-1px)`; na mřížce dvaceti karet je i jednopixelový
   skok vidět jako cuknutí, protože se hýbe jen ta jedna a sousedky stojí.
   Jan: „hover tu kartu nějak posune nahoru… možná bych ten hover panel
   lehce ztmavil." Posun tedy nahradil podklad **#F7F8F9** — hodnota, kterou
   web už má (podklad panelů `.subscriptionUcet` před zesvětlením v Z80),
   takže se nezavádí nový odstín. Proti bílé karty je to zřetelné a proti
   šedému pozadí stránky (#F3F3F5) karta pořád vystupuje.

   Přechod je jen na barvě a stínu, takže `prefers-reduced-motion` už nemá
   co rušit u karty — zůstává u šipky, která se hýbe dál. */
.potizeKarta:hover {background: #F7F8F9;
  box-shadow: 0 4px 14px rgba(0,0,0,0.07); text-decoration: none;}
.potizeKarta:hover .potizeNazev {text-decoration: underline;}
.potizeKarta:hover .potizeObr {filter: brightness(0.93);}
.potizeKarta:hover .potizeSipka {color: #313131; transform: translateX(2px);}
.potizeKarta:focus-visible {outline: 2px solid #313131; outline-offset: 2px;}
@media (prefers-reduced-motion: reduce) {
  .potizeKarta, .potizeSipka {transition: none;}
  .potizeKarta:hover .potizeSipka {transform: none;}
}
/* Šipka nahrazuje tlačítko „Více". Je to dekorace (`aria-hidden` v HTML),
   informaci nese nadpis — proto smí být takhle tlumená. Svisle na střed
   karty, ne u textu: karty jsou různě vysoké a šipka u nadpisu by v mřížce
   skákala. */
.potizeSipka {flex: 0 0 auto; align-self: center; color: #93A5A6; font-size: 13px;
  padding-left: 4px; transition: color .15s ease, transform .15s ease;}
/* Karta bez detailu nemá být klikací ani se hýbat — jen drží stejný vzhled,
   aby mřížka nevypadala rozbitá. */
.potizeKarta.jeBezOdkazu {cursor: default;}
/* Čtvercový náhled vlevo (zadal Jan 16. 8.). `flex: 0 0 auto` je nutné —
   ve flexu se obrázek jinak smrskne, když je název dlouhý. `align-self`
   ho drží nahoře u nadpisu; kdyby se roztáhl na výšku karty, deformuje se. */
.potizeObr {flex: 0 0 auto; align-self: flex-start; width: 120px; height: 120px;
  border-radius: 8px; object-fit: cover;}
/* `min-width: 0` ruší výchozí `min-width: auto` flex položky — bez toho
   dlouhý název kartu roztáhne a mřížka se rozjede. */
.potizeText {display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;}
.potizeNazev {font-size: 22px; font-weight: bold; line-height: 1.2; margin: 0 0 8px 0;}
/* Fotka i nadpis vedou na detail (Jan 16. 8.). Nadpis nesmí zmodrat ani
   se podtrhnout — je to pořád nadpis karty, jen klikací; že se dá kliknout,
   ukáže podtržení až pod myší. Fotka se pod myší nepatrně ztmaví, ať je
   vidět, že terč je celý obrázek. */
/* Z83b: pravidla pro `.potizeNazev a` a pro `.potizeObrOdkaz` odsud zmizela
   21. 8. — nadpis ani fotka už nejsou samostatné odkazy, odkazem je celá
   karta. Hover fotky řeší `.potizeKarta:hover .potizeObr` výš. */
.potizeObr {display: block;}
.potizePopis {font-size: 16px; margin: 0 0 18px 0;}

/* Upozornění „nejdřív k lékaři" nad seznamem. Tlumené, ale ne schované —
   je to zdravotní varování, ne poznámka pod čarou. */
.potizeVarovani {color: #637B7C; margin-bottom: 0;}

/* DETAIL: fotka s vyznačenou oblastí napravo od textu, jako na detailu cviku
   (zadal Jan 16. 8.). Tam to je sloupec mřížky, tady `float` — tělo detailu
   chodí z dat jako jeden kus HTML a do dvou sloupců by se dalo rozdělit jen
   tím, že by se text v datech sekal na části.

   Velikost je stejná jako u cviku (zadal Jan 16. 8.): tam je fotka sloupec
   `col-lg-6`, tedy polovina řady minus vnitřní odsazení — na containeru
   1110 px vyjde ~525 px. `calc(50% - 30px)` dá totéž, jen s obtékáním.

   Zdroj je vlastní sada `/files/Potize/detail/<KÓD>.jpg` v 600×600, ne
   zmenšenina karty: karta má 240 px a v půlce šířky by se natahovala.
   Vyrábí ji `nastroje/potize-obrazky.py` z předloh 1125×1407 v Dropboxu.

   `clear: both` na bloku cviků a na panelu: bez něj by se do fotky zprava
   zaklínily dlaždice cviků a panel by kolem ní obtékal s useknutým rámečkem. */
.potizeFoto {float: right; width: calc(50% - 30px); aspect-ratio: 1/1;
  height: auto; object-fit: cover; border-radius: 10px; margin: 4px 0 28px 34px;}
/* `.potizeDetailCviky` je blok navázaných cviků ze šablony detailu potíže
   (C16, 29. 8. 2026, `listings/potize/design/detail/detail.html`). Musí být
   v selektoru zvlášť: dosavadní `.potizeTelo .articleExercises` mířilo na
   blok uvnitř těla z databáze, kdežto tenhle je SOUROZENEC `.potizeTelo`,
   takže by se bez `clear` zaklínil do fotky plovoucí vpravo. */
.potizeTelo .articleExercises, .potizeDetailCviky, .potizeCtaPanel, .potizeZpet {clear: both;}

/* Závěrečné CTA. Jan 16. 8. nejdřív „h2, krátký text, modré tlačítko",
   pak *„Co s tím udělat? -> panel jako to přihlášení na konci Předplatné."*
   Proto se sem nekopíruje vzhled, ale **rovnou se bere třída
   `.subscriptionUcet`** (světlý podklad #F7F8F9, rámeček #E4E9E9, radius 10,
   padding 36/34/30). Kdyby se to opsalo, rozejde se to při první úpravě
   Předplatného. `.potizeCtaPanel` je vedle ní jen jako háček pro odlišnosti
   — dnes drží nadpis uvnitř panelu a mezeru nad ním. */
/* Zesvětlení panelu — zadal Jan 21. 8. 2026: „ten panel »Co s tím udělat«
   bych lehce zesvětlil." Přepisuje se jen podklad a rámeček, `.subscriptionUcet`
   dál dodává geometrii (radius, padding) — kdyby se sem opsala celá, rozejde
   se to při první úpravě Předplatného.

   #F7F8F9 → **#FCFCFD**, rámeček #E4E9E9 → **#ECF0F0**. Je to o dva kroky
   blíž bílé, ne bílá: panel stojí na `#F3F3F5` obsahu, takže úplně bílý by
   se od okolí odrazil jako karta navíc. Na Předplatném zůstává původní
   odstín — tam je panel na bílém pozadí a světlejší by zmizel. */
.potizeCtaPanel {margin-top: 50px;}
/* Dvě třídy jsou nutné, ne kosmetika: `.subscriptionUcet` stojí v souboru
   o ~450 řádků NÍŽ, takže při rovnosti specificity (0,1,0) vyhrálo pořadím
   a panel zůstal v původním odstínu. Změřeno na živé stránce po prvním
   nasazení — `background` se nepřevzalo. */
.subscriptionUcet.potizeCtaPanel {background: #FCFCFD; border-color: #ECF0F0;}
.potizeCtaPanel .potizeSkupina {margin-top: 0; margin-bottom: 14px;}
.potizeCtaPanel p {font-size: 16px;}
.potizeCta {margin-top: 22px; margin-bottom: 0;}
/* Tlačítko zpět bere hotovou třídu `.articleDetailBtn` (detail cviku,
   epizody a článku), takže vzhled je její — tady zůstává jen mezera nad ním. */
.potizeZpet {margin-top: 40px; margin-bottom: 0;}
.potizeZpet .articleDetailBtn i {font-size: 10px; margin-right: 4px;}

/* Tři body v panelu. Jan 16. 8.: *„Panel Co s tím je dobrý, ale je to teď
   fádní text. Jak by to šlo rozbít?"*

   Rozbité je to na tři námitky, které čtenáři přijdou na mysl dřív než
   cena: kam se musí chodit (nikam), kolik to zabere (pár minut) a co se
   po něm vlastně chce (dělat, co ukáže průvodce). Věta zůstává nahoře jako
   perex, pod ní je mřížka — na širokém okně tři sloupce vedle sebe, takže
   se panel čte jedním pohledem místo odshora dolů.

   Ikona, tučné slovo, věta. Ikona je dekorace a nenese informaci, kterou
   by text neřekl — proto se odečítači neohlašuje (`aria-hidden` by šel do
   HTML, tady stačí, že `<i>` je prázdný element bez textu). */
/* Spodní mezera je kvůli ROZCESTNÍKU (Jan 16. 8.: „odstavec »Cvičí se doma…«
   musí být odsazený od těch 3 ul li"). Tam za body pokračuje text a bez
   mezery na ně nasedal — na detailu za nimi rovnou následuje tlačítko, takže
   tam to vidět nebylo. */
.potizeCtaKroky {display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; list-style: none; margin: 22px 0 26px 0; padding: 0;}
.potizeCtaKroky li {font-size: 16px; line-height: 1.5; color: #637B7C;}
/* Ikony výrazně větší (Jan 16. 8.). Ve 20 px se v panelu ztrácely —
   nesly stejnou váhu jako text vedle nich, takže tři body pořád vypadaly
   jako odstavec. Ve 34 px jsou to tři značky, kterých si oko všimne dřív
   než textu, a právě o to při rozbíjení bloku textu jde. */
.potizeCtaKroky i {display: block; font-size: 34px; line-height: 1;
  color: #313131; margin-bottom: 14px;}
.potizeCtaKroky strong {display: block; color: #313131; font-weight: 700;
  margin-bottom: 2px;}
.potizeCtaPanel .potizeCtaLead {margin-bottom: 0;}
.potizeCtaPanel .potizeCta {margin-top: 26px;}

/* Tlačítko `.potizeBtn` („Více ›") tu bylo od 16. 8. do 21. 8. 2026, kdy ho
   zrušila Z83b — celá karta je odkaz a slovo „Více" stálo dvacetkrát na
   stránce, aniž by o cíli něco řeklo. Pravidla jsou odstraněná, ne
   zakomentovaná: mrtvé CSS se za měsíc nedá odlišit od živého.

   Popis je teď poslední prvek v kartě vždy (tlačítko pod ním už není),
   takže spodní mezeru nechce nikdy. */
.potizeKarta .potizePopis {margin-bottom: 0;}

.aboutUs2 {background: white;}

.aboutUs3 {background: url(/design/base/img/home7-bg.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center;} 
.aboutUs3 .pText {width: 70%; margin: 0 auto;}
.aboutUs3 .profileImage {border-radius: 50% !important; width: 200px; height: auto; margin-bottom: 60px;}
.aboutUs3 .profileImage2 {width: 120px; height: auto; margin-bottom: 60px;}
.outlineBtn {background-color: transparent; color: black; cursor: pointer; border-radius: 6px; text-align: center; border: black 1px solid; font-size: 14px; letter-spacing: 0.7px; padding: 6px;}
.outlineBtn:hover {text-decoration: none;}

/* Chybová stránka je krátká — a tím se odhalí past, kterou mají všechny
   podstránky s fotkou, jen ji na nich není vidět: `:after` je
   `position: fixed; height: 100vh`, takže vyplní CELÉ okno. Co nepřekryje
   neprůhledný obsah, to fotku ukáže. Na vysokém okně (1440×1150) tak pod
   patičkou svítilo 311 px fotky.

   Řeší to přilepená patička, ne fixní patička ani `min-height` s napevno
   spočítanou hodnotou:
     - `position: fixed` na patičce by ji na delších stránkách nalepilo přes
       obsah,
     - `min-height: calc(100vh - X)` se rozejde, jakmile patička změní výšku
       — a ta se mezi jazyky liší (česká patička je vyšší než německá).

   Flex roste sám a nepotřebuje žádné číslo. `.fixed-top` menu je
   `position: fixed`, takže je mimo tok a flex se ho nedotkne (ověřeno:
   pozice i šířka beze změny). Scope je schválně jen `.chybaStrana`, ne
   `body` obecně — na ostatní šablony sahat kvůli tomuhle nechceme. */
body.chybaStrana {display: flex; flex-direction: column; min-height: 100vh;}
body.chybaStrana .mainContentPage {flex: 1 0 auto;}
body.chybaStrana .footer {flex-shrink: 0;}

/* Odkaz z rozbalené odpovědi na detail. Minimalistické tlačítko, ne řádkový
   odkaz — v rozbalené odpovědi by se ztratil v textu. Vychází z `.outlineBtn`,
   jen menší, aby uvnitř odpovědi nepřebilo obsah. */
.faqViceOdkaz {display: inline-block; margin-top: 6px;}
.faqViceOdkaz a {display: inline-block; background: transparent; color: #313131;
  border: 1px solid #778C8D; border-radius: 5px; padding: 8px 18px;
  font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 14px;
  letter-spacing: 1px; text-decoration: none;}
.faqViceOdkaz a:hover {background: #313131; border-color: #313131; color: #ffffff; text-decoration: none;}

/* Detail jedné otázky FAQ. */
.faqDetailText h3 {font-size: 22px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; margin: 34px 0 10px 0;}
.faqDetailZpet {margin-top: 40px;}

/* Nápověda na Podpoře: vyhledávání + štítky témat. Vzor je Nápověda na
   spiralstabilization.com; třídy `.excercisesSearch` a `.excercisesButton`
   už web má z výpisu cviků, takže se tu jen skládají dohromady.
   Témata jsou `napoveda.type`, který v datech už byl. */
.napovedaFiltr {margin: 0 0 34px 0;}
.napovedaFiltr .excercisesSearch {max-width: 420px; margin-bottom: 18px;}
.napovedaFiltr .excercisesFiltr {display: flex; flex-wrap: wrap; gap: 10px;}
.napovedaPrazdno {margin: 26px 0 0 0; color: #637B7C;}

/* Na mobilu se štítky nezalamují do dvou řádků, ale rolují do strany — čtyři
   témata se na šířku telefonu vedle sebe nevejdou a druhý řádek odsouval
   obsah dolů. Záporné okraje jsou proto, aby se rolovalo od hrany displeje
   k hraně; padding vrací text zpátky na mřížku `.container` (15 px). */
@media (max-width: 767.98px) {
  .napovedaFiltr .excercisesFiltr {flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -15px; margin-right: -15px; padding: 0 15px;}
  .napovedaFiltr .excercisesFiltr::-webkit-scrollbar {display: none;}
  .napovedaFiltr .excercisesButton {flex: 0 0 auto; margin-bottom: 0;}

  /* Potíže: dvě karty vedle sebe se na mobilu nevejdou — nadpis „Bolest mezi
     lopatkami" by se lámal do čtyř řádků a popis pod ním by byl užší než
     tlačítko. Jeden sloupec, menší odsazení. */
  .potizeSeznam {grid-template-columns: 1fr; gap: 12px;}
  .potizeKarta {padding: 16px; gap: 14px;}
  .potizeObr {width: 96px; height: 96px;}
  .potizeSkupina {margin: 36px 0 18px 0;}
  .potizeNazev {font-size: 20px;}
  /* Velikost nadpisu řeší `.h2titleMobile40` v HTML (40 px, jako všude
     jinde na webu). Tady jen odsazení — viz komentář u nadpisu výš. */
  .potizeStrana.maDrobecky .whiteFade h1 {padding-bottom: 14px;}
  .potizeStrana .potizeUvod {padding-bottom: 32px;}
  /* Tři sloupce v panelu se na mobilu nevejdou — „Den po dni" by se lámalo
     a pod ním by zbyl proužek na dvě slova. Pod sebe, s menší mezerou. */
  .potizeCtaKroky {grid-template-columns: 1fr; gap: 18px;}
  /* Ikona zůstává nad textem i na mobilu — ve 26 px vedle věty by se řádek
     rozvalil a body by zase splynuly v odstavec, což je právě to, co se
     rozbíjelo. */
  .potizeCtaKroky i {font-size: 26px; margin-bottom: 8px;}
  /* Fotka detailu na úzkém okně neplave — vedle ní by na text zbylo míň než
     100 px. Stojí nad textem, a to na CELOU ŠÍŘKU textu (zadal Jan 21. 8.
     2026: „na mobilu by měl být hlavní obrázek na celou šířku textu").

     Do 21. 8. tu bylo `width: 200px`, aby fotka nesebrala celý první obraz
     — jenže v 200 px na 375px displeji stála jako odstrčený náhled: terč,
     který má ukázat, KDE to bolí, byl menší než sousední odstavec a vedle
     něj zbýval prázdný pruh. `width: 100%` sedne na šířku `.potizeTelo`,
     protože fotka je jeho sourozenec ve stejném `.container`; `height: auto`
     s `aspect-ratio: 1/1` z pravidla výš drží čtverec. */
  .potizeFoto {float: none; display: block; width: 100%; margin: 0 0 24px 0;}
}

/* Chybová stránka má hlavičku s fotkou jako Podpora, O nás a Podcast:
   `.chyba404:after` je fixní vrstva s fotkou pod obsahem (`z-index: -1`),
   `.whiteFade` je přechod přes ni.

   Jediný rozdíl proti ostatním podstránkám: přechod nedojíždí do bílé, ale
   do **#F3F3F5** — tedy do barvy `.mainContent` (ř. 44), která je hned pod
   ním. Kdyby dojel do bílé, byla by na styku vidět hrana. Stejný důvod, proč
   přechody u Předplatného jedou taky do #f3f3f5, ne do bílé. */
.chyba404:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/404-bg.jpg) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
/* Přechod je delší než u Podpory a O nás — pokračuje pod hlavičku do obsahu,
   stejně jako na Předplatném. Proto hlavička nedojíždí do plné barvy, ale jen
   na 45 %, a druhá polovina přechodu sedí na `.mainContentPage` níž.
   Obě části jedou do #F3F3F5, aby na styku nebyla hrana. */
.chyba404 .whiteFade {margin: 0; padding: 140px 0 0 0; background: -moz-linear-gradient(180deg, rgba(243,243,245,0) 0%, rgba(243,243,245,0.45) 100%); background: -webkit-linear-gradient(180deg, rgba(243,243,245,0) 0%, rgba(243,243,245,0.45) 100%); background: linear-gradient(180deg, rgba(243,243,245,0) 0%, rgba(243,243,245,0.45) 100%);}
.chyba404 .whiteFade h1 {margin: 0; padding: 0 0 40px 0; font-size: 48px;}
/* POZOR: tady se `margin-top: -4px` NEDĚLÁ, na rozdíl od
   `.subscriptionStrana + .mainContentPage`. Tam řešil proužek, kterým mezi
   bloky prosvítala fotka. Tady žádná mezera není (změřeno: 0 px), takže by
   posun jen o 4 px překryl dvě průsvitné vrstvy přes sebe — jejich alfy by
   se sečetly a vznikl by tmavší vodorovný pruh přesně v místě styku.
   Vyzkoušeno a vidět to bylo. */
.chyba404 + .mainContentPage {background: -moz-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px); background: -webkit-linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px); background: linear-gradient(180deg, rgba(243,243,245,0.45) 0, rgba(243,243,245,1) 440px);}

/* Chybová stránka: vedle „Úvodní stránka" je druhé, obrysové tlačítko do
   sekce, ze které adresa pocházela (`/cz/clanky/tohle-neni/` → „Články").
   Vykreslí ho `{isset zpetNaSekciUrl}` v obsahu stránky jen tehdy, když
   nadřazená sekce existuje — u 404 na kořeni tam nic nebude.

   `.outlineBtn` se jen dotáhne na rozměry `.blueButton`, jinak by dvojice
   vedle sebe neseděla. Stejný vzor jako `.subscriptionUcetTlacitka` níž. */
.chybaTlacitka {display: flex; flex-wrap: wrap; gap: 12px; align-items: center;}
.chybaTlacitka .outlineBtn {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 9px 34px 9px 34px; letter-spacing: 2px; display: inline-block;}
.chybaTlacitka .outlineBtn:hover {color: #ffffff; background: #000000;}

/* Support */
.support:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/support.jpg?6) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.support.notShow:after{display: none;}


/* Articles */
.articles:after{background: url(/design/base/img/articles.jpg?7) center center !important; -webkit-background-size: cover !important;-moz-background-size: cover !important;-o-background-size: cover !important;background-size: cover !important;background-position: center !important;}
.articles.notShow:after{display: none;}
.articleItem {margin-bottom: 70px;}
.articleItem:last-child {margin-bottom: 0px;}
.articleItem .articleItemImage img {width: 242px; height: auto; border-radius: 20px;}
.articleItem .articleItemText {margin-left: 30px;}
.articleItem .articleItemText h2 {padding-bottom: 15px;}
.articleItem .articleItemText h2 a:hover {text-decoration: none;}
.articleItem .articleItemText p {font-size: 16px; line-height: 20px;}
.articleDetailBtn {background: #637b7c; display: inline-block; color: white !important; border-radius: 10px; font-size: 12px; padding: 7px 28px 7px 28px; margin-top: 15px;}
.articleDetailBtn:hover {text-decoration: none; background: #415152;}
.articlesDetailHeader {margin: 270px 0 0 0; padding: 270px 0 0 0;}
.articlesDetailHeader h1 {margin: 0; padding: 0 0 40px 0;}
.roundImgBorder {border-radius: 10px;}
.cPointer {cursor: pointer;}

/* Cookie */
.cookie {background-color: rgba(255, 255, 255, 0.9);}
.cookie a {color: black; text-decoration: underline;}
.cookie .cookieButton {text-decoration: none; color: white; background: black; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 13px; border-radius: 5px; padding: 10px 35px 10px 35px; letter-spacing: 2px;}
.cookie .cookieButton:hover {text-decoration: none; color: white;}
.cookie .cookieClose {position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 17px; transition: all 0.5s;}
.cookie .cookieClose:hover {-webkit-transform: rotate(90deg);	-moz-transform: rotate(90deg);	transform: rotate(90deg);}
.cookie .cookieAdvanced {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; text-decoration: none;}
#Cookiemodal .modal-footer {border-top: 1px solid #dee2e6; justify-content: end;}
#Cookiemodal .modal-body {text-align: left; font-size: 14px;}
#Cookiemodal h4 {font-size: 18px;}
#Cookiemodal h5 {font-size: 22px;}
#Cookiemodal .modal-body a {color: black; text-decoration: underline;}
.form-switch {display: inline-block; cursor: pointer; -webkit-tap-highlight-color: transparent;}
.form-switch i {position: relative;display: inline-block;margin-right: .5rem;width: 46px;height: 26px;background-color: #e6e6e6;border-radius: 23px;vertical-align: text-bottom;transition: all 0.3s linear;}
.form-switch i::before {content: "";position: absolute;left: 0;width: 42px;height: 22px;background-color: #fff;border-radius: 11px;transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);transition: all 0.25s linear;}
.form-switch i::after {content: "";position: absolute;left: 0;width: 22px;height: 22px;background-color: #fff;border-radius: 11px;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);transform: translate3d(2px, 2px, 0);transition: all 0.2s ease-in-out;}
.form-switch:active i::after {width: 28px;transform: translate3d(2px, 2px, 0);}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #4BD763; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }

/* Cviky */
.excercisesBgImg:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/excercises.jpg?4) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.excercises {background: white; padding: 20px 0 0 0;}
.excercises img {width: 80px; height: auto; border-radius: 10px;}

/* Detail cviku */
/* Menu je fixed-top (60 px) a nadpis pod ním jinak začíná schovaný. Dřív tu
   nahoře stál obrázek, kterému oříznutí nevadilo — h1 ho potřebuje celý. */
/* Stejný svislý rytmus jako detail podcastu (tam změřeno 80/123/151):
   wrapper 80 px a nadpis 48 px, ne 56 px ze `.h2title`. */
.exerciseDetail {padding-top: 80px;}
.exerciseDetail .exerciseDetailImg {width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px;}
.exerciseDetail h1 {margin-bottom: 5px; font-size: 48px;}
/* NADPIS A IKONY NA JEDNOM ŘÁDKU (C19 bod 4, Jan 18. 9. 2026: „budou na
   úrovni nadpisu h1 zarovnané doprava"). Doprava je tady `margin-left:auto`
   na ikonách, ne `justify-content: space-between` — nadpis se tím smí
   zalomit přes celou šířku a ikony zůstanou u pravé hrany i pod ním.

   `align-items: flex-start` a odsazení shora: nadpis má 48 px a
   `line-height 1.08`, takže ikony vysoké 44 px sedí na první řádek
   nadpisu, ne na jeho střed — u dvouřádkového názvu by jinak sjely
   doprostřed a od nadpisu se opticky odpojily. */
.exerciseDetail .exerciseDetailHlavicka {display: flex; align-items: flex-start; gap: 8px;}
.exerciseDetail .exerciseDetailHlavicka h1 {flex: 1 1 auto; min-width: 0;}
.exerciseDetail .exerciseDetailIkony {flex: 0 0 auto; display: flex; align-items: center;
   margin-left: auto;}
.exerciseDetail .exerciseParams {list-style: none; margin: 0; padding: 0;}
.exerciseDetail .exerciseParams li {border-bottom: 1px solid #E4E9E9; padding: 12px 0; font-size: 16px;}
.exerciseDetail .exerciseParams li:last-child {border-bottom: none;}
.exerciseDetail .exerciseParams li span {display: inline-block; min-width: 130px; color: #778C8D; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
/* Odkaz na pomůcku uvnitř řádku parametrů nemá tahat pozornost od hodnoty —
   proto stejná barva jako text a podtržení až pod kurzorem. */
.exerciseDetail .exerciseParams li a {color: inherit; text-decoration: none;}
.exerciseDetail .exerciseParams li a:hover {color: inherit; text-decoration: underline;}
.exerciseDetail .exerciseDetailActions {display: flex; flex-wrap: wrap; gap: 12px; margin-top: 25px;}
/* .exerciseDetailActions nese vlastní odsazení, aby se buttony na dvou řádcích
   nelepily; margin-top ze .shopButton by mezi ně mezeru nepřidal. */
.exerciseDetail .exerciseDetailActions .shopButton, .exerciseDetail .exerciseDetailActions .blueButton {margin-top: 0;}
.exerciseDetail .exerciseDetailNote {font-size: 14px; color: #778C8D; margin-top: 15px;}
.exerciseDetail .exerciseQr {align-items: center; gap: 15px; margin-top: 30px; padding-top: 25px; border-top: 1px solid #E4E9E9;}
/* Přebíjí .excercises img {width: 80px} z výpisu — QR musí být čitelný. */
.exerciseDetail .exerciseQr img {width: 120px; height: 120px; border-radius: 0;}
.exerciseDetail .exerciseQr span {font-size: 14px; color: #778C8D;}

/* Odkazy „kam dál" na detailu cviku */
.exerciseDetail .exerciseLinks {display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 25px; padding-top: 20px; border-top: 1px solid #E4E9E9;}
.exerciseDetail .exerciseLinks a {font-size: 14px; color: #637B7C; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.exerciseDetail .exerciseLinks a:after {content: " ›"; color: #778C8D;}

/* Podcast (migrace 026). Video je od S02E01 hlavní médium, proto nahoře
   a přes celou šířku; přehrávač Buzzsproutu je pod ním jako „jen poslech". */
.podcastVideo {position: relative; padding-bottom: 56.25%; height: 0; margin: 30px 0; border-radius: 10px; overflow: hidden;}
.podcastVideo iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
.podcastAudio {margin: 30px 0;}
.podcastAudioNadpis {font-size: 16px; color: #637B7C; margin-bottom: 8px;}
.podcastPerex {margin-top: 10px;}
/* Upozornění pro cizojazyčné verze: zvuk je český, přeložený je text. */
.podcastCesky {font-size: 14px; color: #637B7C; background: #F3F3F5; border-radius: 5px; padding: 10px 14px; display: inline-block; margin-top: 8px;}
.podcastSouhrn {margin-top: 30px;}

/* Přepis je sbalený schválně — je to surový záznam rozhovoru, jako hlavní
   obsah stránky by ji zaplavil. Google `<details>` čte i zavřené. */
.podcastPrepis {margin-top: 45px; padding-top: 25px; border-top: 1px solid #E4E9E9;}
.podcastPrepis summary {cursor: pointer; list-style: none;}
.podcastPrepis summary::-webkit-details-marker {display: none;}
/* Šipka až za nadpisem — před ním vypadala jako odrážka seznamu. */
.podcastPrepisNadpis:after {content: " ▸"; color: #778C8D;}
.podcastPrepis[open] .podcastPrepisNadpis:after {content: " ▾";}
.podcastPrepisNadpis {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 20px;}
.podcastPrepisPod {font-size: 14px; color: #778C8D; display: block;}
.podcastPrepisTelo {margin-top: 20px; max-height: 60vh; overflow-y: auto; padding-right: 10px;}
.podcastPrepisTelo p {font-size: 15px; line-height: 1.6; margin-bottom: 16px;}
.prepisMluvci {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; color: #000000;}
.prepisCas {font-size: 13px; color: #778C8D;}
/* Z71c: klik na čas skáče v přehrávači na stránce (podcast.js), odkaz na
   YouTube zůstává jako fallback. Kurzor a podtržení pod myší jsou jediná
   nápověda, že je to terč — čas je malý, takže se přidává i větší plocha
   na kliknutí přes `padding`. */
.prepisCas a {color: #778C8D; text-decoration: none; cursor: pointer;
  padding: 2px 3px; margin: -2px -3px; border-radius: 3px;}
.prepisCas a:hover {text-decoration: underline; color: #313131; background: #EDF1F1;}

/* Z71a — CTA panel na detailu epizody (Jan 21. 8.: „Z71 - CTA").
   Bere hotové `.subscriptionUcet`, tady jen mezera nad ním a týž zesvětlený
   odstín, jaký dostal panel Potíží v Z80 — dvě stejné nabídky na webu nemají
   vypadat jinak. Dvě třídy kvůli pořadí v souboru, viz komentář u Z80. */
.podcastCtaPanel {margin: 46px 0 0 0;}
.subscriptionUcet.podcastCtaPanel {background: #FCFCFD; border-color: #ECF0F0;}
.podcastCtaPanel .potizeSkupina {margin-top: 0; margin-bottom: 14px;}
.podcastCtaPanel p {font-size: 16px;}
.podcastCtaPanel .potizeCtaLead {margin-bottom: 0;}
.podcastCtaPanel .potizeCta {margin-top: 26px; margin-bottom: 0;}

/* Pozadí přehledu: stejná stavba jako u článků — `.support` nese fixní fotku,
   `.whiteFade` je průhledný přechod do bílé, přes který jde nadpis. Fotka je
   ta z homepage.
   Proti článkům bez horního odsazení: `.whiteFade` tam začíná až 270 px pod
   menu, tady má sedět hned pod ním. */
.podcastStrana:after {background: url(/design/base/img/home1-bg.jpg?2) center center !important; background-size: cover !important; background-position: center !important;}


/* Drobečky a štítek sekce — na detailu je potřeba hned poznat, že je člověk
   v podcastu, ne v článcích. */
.podcastDrobky {font-size: 14px; color: #778C8D; margin-bottom: 22px;}
.podcastDrobky a {color: #778C8D;}
.podcastDrobky span {padding: 0 4px;}
.podcastDrobkyTady {color: #637B7C;}
/* POSLEDNÍ DROBEČEK JE OD 11. 9. 2026 `<a>`, NE `<span>` (zadal Jan:
   „I poslední úroveň by měla být odkaz"), a bez tohohle řádku by se
   změnil vzhled, aniž by na barvu kdokoli sáhl. Dvě věci se vracejí:

     barva  `.podcastDrobky a` (0,1,1) přebíjí `.podcastDrobkyTady`
            (0,1,0), takže by aktuální stránka zesvětlala na #778C8D.
            Selektor níž má (0,2,1) a vyhraje.
     mezera `.podcastDrobky span` dávalo poslednímu článku `padding: 0 4px`
            jen proto, že to byl `span`. Bez něj by se odsazení za
            posledním oddělovačem zmenšilo o 4 px.

   NA FOTCE SE BARVA NEMĚNÍ, A ROZHODUJE O TOM POŘADÍ, NE SPECIFICITA.
   Selektor níž má (0,2,1) — přesně tolik jako `.whiteFade .podcastDrobky a`
   v bloku o pár řádků dál. Při shodě vyhrává ten pozdější, takže uvnitř
   `.whiteFade` zůstává #313131 (11,74:1). Kdo tenhle řádek přesune POD
   blok `.whiteFade`, shodí drobečkům nad fotkou kontrast na 3,20:1,
   aniž by sáhl na barvu — táž past, jakou popisuje karta webu u
   vypuštěného `whiteFade` z obalu.

   `.whiteFade .podcastDrobky a:hover` (0,3,1) platí nově i na poslední
   článek, takže podtržení na najetí má celý řetěz stejně. */
.podcastDrobky a.podcastDrobkyTady {color: #637B7C; padding: 0 4px;}

/* Drobečky nad fotkou: TMAVĚ ŠEDÁ, bez stínu (rozhodl Jan 15. 8. 2026).

   Zkoušela se bílá se stínem a byla nečitelná: fotky jsou světlé studiové
   snímky a jedou `cover`, takže se výřez s šířkou okna posouvá a text často
   skončí na světlé zdi. Tmavá proti nim drží kontrast spolehlivě —
   #313131 je táž barva, jakou má text tlačítek a nadpisů. */
.whiteFade .podcastDrobky,
.whiteFade .podcastDrobky a,
.whiteFade .podcastDrobkyTady {color: #313131; text-shadow: none;}
.whiteFade .podcastDrobky a:hover {color: #000000; text-decoration: underline;}
.whiteFade .podcastStitek {color: #313131;}

/* Hlavička s drobečky má stejný svislý rytmus jako detail podcastu
   (změřeno tam: wrapper 80 px, drobečky na 80, eyebrow na 123, h1 na 151).
   Bez `.maDrobecky` by se to muselo psát na `.support`/`.aboutUs`, jenže ty
   sdílí i Předplatné, které vlastní odsazení má a nemá se hýbat. */
.maDrobecky .whiteFade {padding-top: 80px !important;}
.maDrobecky .whiteFade .podcastDrobky {margin-bottom: 22px;}
.maDrobecky .whiteFade .podcastStitek {margin-bottom: 8px;}
.maDrobecky .whiteFade h1 {padding-bottom: 40px;}
.podcastStitek {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #637B7C; margin-bottom: 8px;}
.podcastMeta {font-size: 14px; color: #778C8D; letter-spacing: 1px; margin: 10px 0 0 0;}
.podcastMeta span + span:before {content: "· "; color: #C9D2D2;}
.podcastMetaKod {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; color: #637B7C;}

/* Účinkující: menší varianta bloku z přehledu. */
.podcastOsoba img, .podcastOsobaIniciala {width: 80px; height: 80px; flex: 0 0 80px; border-radius: 10px; object-fit: cover;}
.podcastOsobaIniciala {display: flex; align-items: center; justify-content: center; background: #E4FBFC; color: #637B7C; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 18px; letter-spacing: 1px;}
.podcastOsobaMala {margin-bottom: 16px;}
.podcastOsobaMala .podcastOsobaJmeno {font-size: 15px; margin-bottom: 2px;}
.podcastOsobaMala .podcastOsobaRole {font-size: 13px;}

/* Hlavička detailu epizody. Vzor je detail článku (`.articlesDetailHeader`),
   jen s mnohem menším odsazením shora — u článku je to celoobrazovková plocha
   s fotkou, tady stačí nadechnutí pod fixním menu. */
.podcastDetail {padding-top: 80px;}
/* Nadpis detailu je stejně velký jako na přehledu podcastu (48 px), ne 56 px
   ze `.h2title`. Spodní mezera zůstává těsná — na rozdíl od přehledu tu hned
   pod nadpisem sedí řádek s kódem dílu a datem, takže `padding-bottom: 40px`
   ze `.support .whiteFade h1` by se sem nehodil. */
.podcastDetail h1 {margin-bottom: 6px; font-size: 48px;}
.podcastPerex {color: #637B7C; margin-top: 14px;}

/* Vzdušnější mezinadpisy, jako má text článku. */
.podcastSouhrn h3 {font-size: 24px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; margin: 42px 0 14px 0;}
.podcastSouhrn h3:first-child {margin-top: 0;}
.podcastSouhrn p {margin-bottom: 20px;}
/* Odskok tlačítka „zpět" od obsahu na detailu epizody. */
.podcastDetail .articleDetailBtn {margin-top: 50px;}

/* Témata epizody nad textem — přehled toho, o čem díl je. Navigace s časy
   je vpravo; tohle je obsah, ne ovládání. */
.podcastTemataBlok {margin-bottom: 40px; padding-bottom: 8px; border-bottom: 1px solid #E4E9E9;}
.podcastTemataBlok[hidden] {display: none;}
.podcastTemataNadpis {font-size: 20px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; margin-bottom: 14px;}
.podcastTemata {list-style: none; margin: 0 0 24px 0; padding: 0;}
.podcastTemata li {padding: 7px 0 7px 22px; position: relative; font-size: 16px; border-bottom: 1px solid #F1F4F4;}
.podcastTemata li:before {content: "›"; position: absolute; left: 0; color: #29D9E0;}
.podcastProKoho {color: #637B7C; font-size: 16px; border-top: 1px solid #E4E9E9; padding-top: 18px; margin-top: 32px;}

/* Kapitoly a odkazy v pravém sloupci detailu. Vykresluje je podcast.js
   z JSONu — kapitola je čas, na který jde skočit, ne řádek textu. */
/* Sloupce od sebe: bootstrap dává 30 px na dvojici, což je pro dva
   samostatné bloky textu málo. */
.podcastTelo {margin-top: 45px;}
@media (min-width: 992px) {
  .podcastHlavni {padding-right: 45px;}
  .podcastBocni {padding-left: 45px; border-left: 1px solid #E4E9E9;}
}
.podcastBocniNadpis {font-size: 18px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; margin-bottom: 12px;}
.podcastBocni > div {margin-bottom: 35px;}
.podcastKapitolySeznam {list-style: none; margin: 0; padding: 0; counter-reset: kap;}
.podcastKapitolySeznam li {margin-bottom: 2px;}
.podcastKapitola {display: flex; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 5px; font-size: 15px; color: #000000; cursor: pointer; font-family: inherit;}
.podcastKapitola:hover {background: #F3F3F5;}
.podcastKapitola.jeAktivni {background: #E4FBFC;}
.podcastKapitolaCas {color: #637B7C; font-size: 13px; flex: 0 0 44px; padding-top: 2px;}
/* Bez kurzoru a bez pozadí tam, kde video není — u pěti nejstarších epizod
   není kam skákat, takže je to jen obsah, ne ovládání. */
span.podcastKapitola {cursor: default;}
span.podcastKapitola:hover {background: none;}
.podcastOdkazySeznam {list-style: none; margin: 0; padding: 0;}
.podcastOdkazySeznam li {margin-bottom: 8px;}
.podcastOdkazySeznam a {font-size: 15px; color: #637B7C; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.podcastOdkazySeznam a:after {content: " ›"; color: #778C8D;}
.podcastKapitoly[hidden], .podcastOdkazy[hidden] {display: none;}

/* Výpis epizod — jeden sloupec s postranním panelem, jako má Buzzsprout.
   Dvousloupcová mřížka dlaždic tady nedávala smysl: u podcastu se čte
   popisek, ne prohlíží obrázky. */
/* Mezera pod h1 je stejná jako na Cvicích, Článcích a Podpoře: 16 px od 768 px
   výš, na mobilu nula (Bootstrap `pt-0 pt-md-3`, tady napsané v CSS, protože
   kontejner má vlastní třídu). Nemíchat s odsazením detailu epizody. */
.podcastVypis {padding-top: 16px; padding-bottom: 40px;}
.podcastVypisUvod {color: #637B7C; margin-bottom: 35px;}
.podcastRadek {display: flex; gap: 22px; padding: 26px 0; border-top: 1px solid #E4E9E9;}
.podcastRadek:first-of-type {border-top: 0; padding-top: 0;}
.podcastRadekObr {flex: 0 0 240px;}
.podcastRadekObr img {width: 100%; height: auto; border-radius: 10px;}
.podcastRadekMeta {font-size: 13px; color: #778C8D; margin-bottom: 6px; letter-spacing: 1px;}
.podcastRadekKod {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; color: #637B7C;}
.podcastRadekDatum:before, .podcastRadekDelka:before {content: "· "; color: #C9D2D2;}
.podcastRadekNazev {font-size: 22px; margin-bottom: 8px; line-height: 1.25;}
.podcastRadekNazev a {color: #000000;}
.podcastRadekPerex {font-size: 15px; color: #637B7C; margin-bottom: 14px;}

/* Postranní panel: obsah je v CMS (kategorie 493), tady je jen vzhled. */
.podcastVypisBocni {padding-top: 8px;}
@media (min-width: 992px) {
  .podcastVypisHlavni {padding-right: 45px;}
  .podcastVypisBocni {padding-left: 45px; border-left: 1px solid #E4E9E9;}
}
.podcastPanelCover {width: 100%; max-width: 300px; height: auto; border-radius: 10px; margin-bottom: 30px;}
.podcastPanelBlok {margin-bottom: 32px;}
.podcastPanelNadpis {font-size: 18px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; margin-bottom: 14px;}
.podcastPanelPlatformy {list-style: none; margin: 0; padding: 0;}
.podcastPanelPlatformy li {margin-bottom: 10px;}
.podcastPanelPlatformy a {display: inline-flex; align-items: center; gap: 10px; font-size: 16px; color: #000000;}
.podcastPanelPlatformy i {font-size: 20px; color: #637B7C; width: 22px; text-align: center;}
.podcastOsoba {display: flex; gap: 14px; margin-bottom: 22px;}
/* Čtvercová fotka schválně — táž podoba jako na Spotify a Apple. */
.podcastOsoba img {width: 80px; height: 80px; object-fit: cover; border-radius: 10px; flex: 0 0 80px;}
.podcastOsobaJmeno {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 16px; margin-bottom: 4px;}
.podcastOsobaRole {font-size: 14px; color: #637B7C; line-height: 1.45; margin: 0;}

@media (max-width: 767.98px) {
  .podcastRadek {flex-direction: column; gap: 14px;}
  /* Náhled na celou šířku sloupce — na telefonu je obrázek hlavní vodítko
     ve výpisu a strop 320 px ho nechával užší než nadpis a perex vedle. */
  .podcastRadekObr {flex: 0 0 auto; max-width: none;}
  .podcastRadekNazev {font-size: 19px;}
  .podcastVypis {padding-top: 0;}
  .podcastDetail {padding-top: 120px;}
}

/* Doplňkové sekce pod ceníkem předplatného (migrace 045). Ceník odpovídá
   na „kolik", tohle na „proč" a „co když už účet mám". */
.subscriptionProc {margin-top: 60px; padding-top: 45px; border-top: 1px solid #E4E9E9;}
.subscriptionProc .h3title {font-size: 28px; margin: 0 0 26px 0;}
.subscriptionProc .h3title + .row {margin-bottom: 20px;}
.subscriptionDuvod {margin-bottom: 30px;}
.subscriptionDuvod h3 {font-size: 19px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; margin-bottom: 8px;}
.subscriptionDuvod p {font-size: 16px; color: #637B7C; line-height: 1.55; margin: 0;}
/* Odrážka je tatáž jako na úvodu (`.home2-listItem`): tyrkysový kroužek
   s černým terčem. Tam ji kreslí dvě ikony FontAwesome přes sebe, tady stačí
   radiální přechod — položky jsou víceřádkové a `fa-stack` by se u nich
   nezarovnal na první řádek. */
.subscriptionSeznam {list-style: none; margin: 0 0 50px 0; padding: 0;}
.subscriptionSeznam li {position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid #F1F4F4; font-size: 16px;}
.subscriptionSeznam li:before {content: ""; position: absolute; left: 0; top: 17px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at center, #000000 0 3.5px, #6FF9FF 3.5px 9px);}
/* Blok pro vracejícího se návštěvníka — dosud vedlo ze stránky jediné
   tlačítko, a to rovnou na platbu. */
.subscriptionUcet {background: #F7F8F9; border: 1px solid #E4E9E9; border-radius: 10px; padding: 36px 34px 30px 34px;}
.subscriptionUcet .h3title {margin-bottom: 12px;}
.subscriptionUcet p {font-size: 16px; color: #637B7C;}
.subscriptionUcetTlacitka {display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 18px 0;}
.subscriptionPoznamka {font-size: 14px; margin: 0;}

/* Druhé tlačítko je obrysové (`.outlineBtn` už web má, viz „O nás“), jen se
   dotáhne na rozměry `.blueButton` — jinak by dvojice vedle sebe neseděla. */
.subscriptionUcetTlacitka .outlineBtn {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 9px 34px 9px 34px; letter-spacing: 2px; display: inline-block;}
.subscriptionUcetTlacitka .outlineBtn:hover {color: #ffffff; background: #000000;}

/* Výčet funkcí přímo v ceníku: cena bez toho, co za ni je, se nedá posoudit.
   `th` je popis, `td` hodnota — tedy počet, nebo „ano". */
.subscriptionFunkce {width: 100%; margin: 26px 0 40px 0; border-top: 1px solid #E4E9E9;}
.subscriptionFunkce th {font-family: 'AeonikRegular', Arial,Helvetica,sans-serif; font-weight: normal; font-size: 15px; color: #313131; padding: 9px 10px 9px 0; border-bottom: 1px solid #F1F4F4;}
.subscriptionFunkce td {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 15px; text-align: right; white-space: nowrap; padding: 9px 0; border-bottom: 1px solid #F1F4F4;}
.subscriptionFunkce td.ano {color: #29D9E0;}
/* Fajfka je černá a kroužek tyrkysový — stejně jako na homepage
   (`fa-stack` + `far fa-circle lightBlue` + `fas fa-check`). Bez tohohle
   by fajfka podědila tyrkysovou z `td.ano` a splynula by s kroužkem. */
.subscriptionFunkce td.ano .fa-check {color: #000;}
/* Fajfka byla proti textu moc velká. `fa-stack` se škáluje `font-size`em,
   takže 11px dá kroužek 22px místo původních 30 — poměr kroužku a fajfky
   zůstává, jen je to menší. */
.subscriptionFunkce td.ano .fa-stack {font-size: 11px; vertical-align: middle;}
/* Čísla naopak nesou informaci (164 cviků, 3 vlastní plány), tak ať jsou
   vidět dřív než popisek vedle nich. Fajfky se to netýká — ta má `td.ano`. */
.subscriptionFunkce td:not(.ano) {font-size: 19px; font-weight: 700;}

/* Ikony u důvodů „Proč předplatné" — stejný vzor jako na homepage
   (kroužek `lightBlue` + černý symbol). Nadpis je h3, takže se ikona
   zarovnává na jeho účaří, ne na střed řádku. */
.subscriptionDuvod h3 {display: flex; align-items: center;}
.subscriptionDuvodIkona {font-size: 22px; width: 44px; margin-right: 12px; flex: 0 0 auto;}
.subscriptionDuvodIkona .fa-stack-1x {color: #000;}
/* Odstavec se odsazuje na účaří nadpisu, ne pod ikonu. Bez toho začíná
   nadpis o šířku ikony vpravo a text pod ním zase vlevo — zavěšené
   odsazení, které se nedrží. 42px = 30px ikona + 12px mezera. */
.subscriptionDuvod p {padding-left: 56px;}

/* Video vložené do textu článku (migrace 041). Poměr nese `style` u konkrétního
   videa — u skoliometru 16/9, u Adamsova testu 1/1 — tady je jen rám. */
.clanekVideo {position: relative; width: 100%; margin: 30px 0; border-radius: 10px; overflow: hidden; background: #F3F3F5;}
.clanekVideo iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}

/* Cviky pod článkem (migrace 024). Blok stojí uvnitř textového sloupce
   článku, proto bez vlastního pozadí — jen oddělovací linka jako u ostatních
   „kam dál" bloků. Selektory nesou obě třídy schválně: `.excercises h2` a
   `.excercises.exerciseRelated p` níž mají stejnou nebo vyšší specificitu
   a stojí v souboru za tímhle blokem, takže by jinak vyhrály. */
/* Odkaz z článku na potíž — Z74, migrace 091.

   Články nesou 76 % viditelnosti webu, Potíže nemají historii žádnou; tohle
   je ten most. Stojí nad blokem cviků, proto si bere jeho horní odsazení
   a linku, a blok cviků pod ním je pak dostat nesmí dvakrát — o to se stará
   pravidlo `.articlePotizeOdkaz + .articleExercises` níž.

   Je to jeden odstavec, ne panel: bez nového `style.css` (`{cssVersion}` se
   nasazením souboru nezvedne, takže část lidí drží starou verzi v cache)
   se vykreslí prostě jako odstavec s odkazem — nic rozbitého. */
.articlePotizeOdkaz {margin-top: 45px; padding-top: 30px; margin-bottom: 0;
  border-top: 1px solid #E4E9E9; font-size: 17px; line-height: 1.5;}
/* Z81 (Jan 21. 8.): z odkazu je obrysové tlačítko a blok se přestěhoval POD
   cviky. Odkaz proto už není v textu odstavce — lead zůstal odstavcem,
   tlačítko stojí samostatně pod ním. Stejná stavba jako `.potizeUvodCta`
   + `.potizeUvodCtaBtn` na detailu potíže, aby ta dvě místa vypadala jako
   jedna věc.

   Pravidlo `.articlePotizeOdkaz + .articleExercises.exerciseRelated`, které
   tu do 21. 8. rušilo dvojitou linku, je zrušené: v novém pořadí ty dva bloky
   nesousedí v tomhle směru. Blok cviků má svou linku, tenhle svou — dvě
   „kam dál" sekce oddělené stejně, jako je web oddělený jinde. */
.articlePotizeOdkazBtn {margin: 16px 0 0;}

.articleExercises {margin-top: 45px; padding-top: 30px; border-top: 1px solid #E4E9E9;}
.articleExercises.exerciseRelated h2 {margin-bottom: 12px;}
.articleExercises.exerciseRelated .articleExercisesLead {font-size: 15px; color: #637B7C; margin-bottom: 25px; line-height: 1.5;}
/* Svislá mezera mezi řadami dlaždic. Sekce pod detailem cviku ji má přes
   `.exerciseRelated .filtr-item`, tenhle blok dlaždice Filterizru nemá — bez
   toho se dvouřádkové podnázvy dotýkají další řady. Vlastní třída, ne
   `.row > div`: uvnitř každé dlaždice je další `.row` se dvěma sloupci a ty
   by mezeru dostaly taky. */
.articleExercises .articleExerciseTile {margin-bottom: 22px;}
/* Přebíjí .exerciseRelated {background: white}, kterou blok dědí kvůli
   dlaždicím — pozadí si drží sekce článku. */
.articleExercises.exerciseRelated {background: transparent; border-top: 1px solid #E4E9E9;}

/* Provázání cviků pod detailem */
.exerciseRelated {background: white; border-top: 1px solid #E4E9E9;}
/* Nadpis sekce, ne dlaždice — `.excercises h2 {font-size: 18px}` níž platí pro
   položky výpisu a strhlo by na svou velikost i tenhle nadpis. */
.excercises.exerciseRelated h2 {font-size: 28px;}
.exerciseRelatedAlt {background: #F3F3F5;}
.exerciseRelated .filtr-item {margin-bottom: 20px;}
.exerciseRelated img {width: 80px; height: auto; border-radius: 10px;}
/* Obě třídy v selektoru schválně: `.excercises h3` stojí v souboru níž
   a při stejné specificitě by vyhrálo ono. */
.excercises.exerciseRelated h3 {font-size: 16px; margin-bottom: 2px; line-height: 1.2;}
.excercises.exerciseRelated h3 a {color: #000000;}
/* Bezrozměrná hodnota, ne „1em": line-height se dědí jako poměr k velikosti
   písma potomka, kdežto em se spočítá jednou zde a potomci zdědí pevné pixely.
   Výsledek je pro tenhle prvek stejný, chování při zanoření ne. */
.excercises.exerciseRelated p {font-size: 13px; color: #778C8D; margin-bottom: 0; line-height: 1;}
.excercises h2 {font-size: 18px; margin-bottom: 0;}
.excercises h3 {font-size: 13px; color: #778C8D;}
/* Filterizr dřív dlaždice pozicoval absolutně a mezery si počítal sám.
   Rozmístění teď drží bootstrap grid, takže svislou mezeru je potřeba
   dát dlaždicím a `overflow` na kontejneru už nic neřeší. */
.excercises .filtr-item {margin-bottom: 20px;}
.excercises .excercisesSearch,
.napovedaFiltr .excercisesSearch {width: 100%; border: 1px solid #778C8D; shadow: none; padding: 10px 33px 10px 15px; border-radius: 5px; font-size: 16px; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.excercises .excercisesFiltr {margin: 15px 0 15px 0;}
.excercises .excercisesFiltr .excercisesButton,
.napovedaFiltr .excercisesButton {margin-bottom: 5px; min-width: 50px; text-align: center; cursor: pointer; border: 1px solid transparent; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 16px; border-radius: 5px; letter-spacing: 2px; padding: 10px 15px 10px 15px;}
.excercises .excercisesFiltr .excercisesButton:hover,
.napovedaFiltr .excercisesButton:hover {border: 1px solid #778C8D;}
.excercises .excercisesFiltr .excercisesButton.filtr-active,
.napovedaFiltr .excercisesButton.filtr-active {border: 1px solid #778C8D;}
span.deleteicon {position: relative;}
span.deleteicon img {color: #778C8D; position: absolute;  display: none;top: -4px;right: 7px; width: 24px; height: auto; cursor: pointer; -webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg);}
span.deleteicon input {padding-right: 16px;box-sizing: border-box;}

/* Profile */

.breadcrums {font-size: 14px;}
.login-info #name {font-size: 22px; font-weight: bold;}
.firebaseui-idp-button {border-radius: 10px !important;}
.profile-detail h2, .emailing-detail h2 {font-weight: bold;font-size: 33px;padding-bottom: 10px;padding-top: 30px;}
/* #5C7273, ne #707070, a je to spočítané podle WCAG, ne odhadnuté ze snímku:
   OBA tyhle obaly jsou `.row` přímo v `.container-fluid mainContent`, tedy
   na #F3F3F5 (ř. 51) — žádná bílá karta pod nimi není. Změřeno na živých
   stránkách 12. 9. 2026 (`/cz/user/account/` a `/cz/user/emailing/`; oba
   obaly nese `cat_text`, ne šablona). Na #F3F3F5 dávalo #707070 jen
   4,47:1, tedy AA pro běžný text (4,5) TĚSNĚ PROPADALO; #5C7273 dává
   4,61:1. Text je 16 px, takže platí práh 4,5, ne 3,0.
   PROČ ZROVNA #5C7273: je to NEJSVĚTLEJŠÍ barva, kterou paleta webu už má
   a která práh splní — #637B7C má na #F3F3F5 jen 4,07 a #778C8D 3,20.
   Ztmavení je tím nejmenší možné (relativní luminance 0,1620 → 0,1555,
   tedy o 4 %) a nová barva nepřibyla ani jedna; táž šeď drží pás hlavičky
   `/user/` a `.userPredplatneRocniPopis`.
   `.dashboard-detail .gray-text` (ř. ~2215) se schválně NEMĚNÍ: ta leží
   v bílých dlaždicích, kde #637B7C dává 4,51, a ztmavení by rozešlo
   dashboard se zbytkem sekce bez důvodu.                                 */
.profile-detail .gray-text, .emailing-detail .gray-text {font-size: 16px; color: #5C7273;}
.profile-detail .predplatne {font-size: 22px;}
.profile-detail #photo-container {width: 140px; height: 140px; margin: 0 auto; border-radius: 50%;}
.profile-detail #photo-container img {width: 140px; height: 140px; border-radius: 50%; object-fit: contain;}
.h2title2 {font-size: 22px;  font-weight: bold; line-height: inherit; margin-bottom: 0;}
#profilePhoto {width: 45px; height: 45px; border-radius: 50%; margin: auto 0 auto 8px;}
#profilePhoto img {width: 45px; height: 45px; border-radius: 50%; object-fit: cover;}
.modal-backdrop {background-color: #fff;}
.modal-backdrop.show {opacity: .8;}
.loading {width: 100%; height: 500px; position: relative;}
.loadingContainer {position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);}
/* HTML: <div class="loader"></div> */
.loader {
  --d:22px;
  
  width: 4px;
  height: 4px;
  border-radius: 50%;
  color: #000000;
  box-shadow: 
    calc(1*var(--d))      calc(0*var(--d))     0 0,
    calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
    calc(0*var(--d))      calc(1*var(--d))     0 2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
    calc(-1*var(--d))     calc(0*var(--d))     0 4px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
    calc(0*var(--d))      calc(-1*var(--d))    0 6px;
  animation: l27 1s infinite steps(8);
}
@keyframes l27 {
  100% {transform: rotate(1turn)}
}
.top {color: white !important; background: black; font-size: 12px; padding: 4px 7px 4px 7px; border-radius: 8px; position: absolute; margin: 0 0 0 5px; font-weight: bold !important;}
.userMenu {height: 18px;}
/* Ikona stojí vedle textu „Přihlásit", takže musí sednout na účaří —
   `vertical-align: middle` ji jinak posadí příliš vysoko. */
.nav-login .nav-link {display: flex; align-items: center; gap: 6px; white-space: nowrap;}
.nav-login .userMenu {height: 20px;}
.imgBgSubscription{background: none;}
.imgBgSubscription {display: block; content:""; z-index:-1; background: url(/design/base/img/subscription-bg.jpg?2) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center top;}
 
 
 
/* Webpage for APP */
.appPage h1 {font-weight: bold; font-size: 30px; margin-top: 25px;}
.appPage h2 {font-weight: bold; font-size: 20px; margin-top: 35px;}
.appPage a {color: black; text-decoration: underline;}

/* CouponPage for APP */
.couponFormPage {background: white;}
.couponFormPage .appLogo {width: 75%; max-width: 250px;}
.couponFormPage  .inp2 .label {position: absolute; top: 17px; left: 15px; font-size: 14px; color: rgba(0, 0, 0, 0.5); font-weight: 500; -webkit-transform-origin: 0 0; transform-origin: 0 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: all 0.2s ease;transition: all 0.2s ease;pointer-events: none;}
.couponFormPage  .inp2 input {padding: 13px 15px 0 15px; height: 55px; font-size: 16px;}
.couponFormPage  .inp2 input:not(:placeholder-shown) + .label {-webkit-transform: translate3d(0, -9px, 0) scale(0.75);transform: translate3d(0, -9px, 0) scale(0.75);}
.couponFormPage  .inp2 input:focus + .label {color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0, -9px, 0) scale(0.75);transform: translate3d(0, -9px, 0) scale(0.75);}
.couponFormPage  .submitButton_c {margin-top: 20px; margin-bottom: 35px; font-size: 12px; padding: 10px 35px 10px 35px;}
.couponFormPage .appBottomText {color: #9F9F9F;}
.couponFormPage #couponSubmit.disabled {background: #A8FBFF;}

/* Subscription page */
.subscription {padding: 30px; margin:0 auto; background: #ffffff; border-radius: 10px}
.subscriptionPrice {font-size: 35px; font-weight: 600;}
.subscriptionPrice2 {font-size: 13px; color: #bebec9; font-weight: 300; line-height: 1.2em;}
.subscription .submitButton {padding: 10px 55px 10px 55px; min-width: 260px;}
.subscriptionPriceWeek {font-size: 1.25rem; font-weight: 600;}
.subscriptionPriceWeek span {color: #bebec9; font-weight: 300;}

 .tabss button {
    cursor: pointer;
    background: none;
    border: none;
  }
  
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  .tabss {
    margin: 0 auto 30px auto;
    display: grid;
    max-width: calc(var(--count) * 150px);
    width: 100%;
    grid-template-columns: repeat(var(--count), minmax(0, 1fr));
    background-color: #f3f3f3;
    border-radius: 8px;
    border: 1px solid #d7d7d7;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .tabss:has(.tabb:nth-child(1)) {
    --count: 1;
  }
  .tabss:has(.tabb:nth-child(2)) {
    --count: 2;
  }
  .tabss:has(.tabb:nth-child(3)) {
    --count: 3;
  }
  .tabss:has(.tabb:nth-child(4)) {
    --count: 4;
  }

  .tabss::after {
    content: "";
    position: absolute;
    inset: 0px;
    transform: scale(0.96, 0.9);
    --width: calc((100% / var(--count)));
    width: var(--width);
    margin-left: calc(var(--active) * var(--width));
    transition: margin-left 300ms;
    background-color: black;
    z-index: -1;
    border-radius: inherit;
  }


  .tabss:has(.tabb:nth-child(1).active) {
    --active: 0; 
  }

  .tabss:has(.tabb:nth-child(2).active) {
    --active: 1;
  }

  .tabss:has(.tabb:nth-child(3).active) {
    --active: 2;
  }

  .tabb {
    flex-basis: 200px;
    padding: 15px 0;
    font-size: 15px;
    color: black;
  }
  
  .tabb.active {
    color: white;
  }



/* Modal vyskakovací okno */
.modal-footer {border-top: none;}
.modal-header {border-bottom: none; padding-bottom: 0;}
.modal-footer .btn {color: #313131; background: #6FF9FF; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; display: inline-block; text-transform: uppercase; font-size: 16px; border-radius: 5px; padding: 7px 30px 7px 30px; letter-spacing: 2px;}
.modal-footer .btn:hover {text-decoration: none; color: #313131;}
.modal-footer {justify-content: center;}
.modal-body {text-align: center; font-size: 18px;}


.grayscale {url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: grayscale(100%); -webkit-filter: grayscale(100%); -webkit-backface-visibility: hidden; pointer-events: none;}
.dark90:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.9);}
.dark80:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.8);}
.dark70:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.7);}
.dark60:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.6);}
.dark50:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.5);}
.dark40:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.4);}
.dark30:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.3);}
.dark20:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.2);}
.dark10:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.1);}
.dark5:after {z-index: 10; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0;background:rgba(0,0,0,0.05);}

.blur1 {filter: blur(1px); -webkit-filter: blur(1px);}
.blur2 {filter: blur(2px); -webkit-filter: blur(2px);}
.blur3 {filter: blur(3px); -webkit-filter: blur(3px);}
.blur4 {filter: blur(4px); -webkit-filter: blur(4px);}
.blur5 {filter: blur(5px); -webkit-filter: blur(5px);}
.blur6 {filter: blur(6px); -webkit-filter: blur(6px);}
.blur7 {filter: blur(7px); -webkit-filter: blur(7px);}


/* ---------- RESPONZIVNI BREAKPOINTY ----------------- */



/* Menu se sbaluje do hamburgeru až do 1199 px (navbar-expand-xl). Osm položek
   plus jazyk a „Přihlásit" se na střední šířky nevejde a lámalo se to na dva
   řádky. Pevná výška 60 px by rozbalené menu uřízla, proto tady auto —
   níž (do 767 px) to platilo odjakživa, tohle je jen rozšíření rozsahu. */
@media (max-width: 1199.98px) {
.top-menu-holder {height: auto;}
.navbar-collapse .nav-link {padding-left: 0px !important;}
.navbar-collapse .nav-item:last-child .nav-link {padding-bottom: 34px !important;}
.nav-item {margin: 5px 0 5px 0;}
.nav-login .nav-link {justify-content: flex-start;}
/* Rozbalovací přepínač jazyka patří k vodorovnému menu. Jakmile je menu
   v hamburgeru, nastupuje výpis „cz | en | de" pod položkami — jinak by
   uvnitř rozbaleného menu viselo druhé rozbalovací menu. */
.langPanel {display: none;}
.langMenu {display: none;}
.mobileLang {display: block; padding-bottom: 25px; padding-left: 0;}
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px)  {

.top-menu-holder {height: auto;}
.navbar-collapse .nav-link {padding-left: 0px !important;}
.navbar-collapse .nav-item:last-child .nav-link {padding-bottom: 34px !important;}
.nav-item {margin: 5px 0 5px 0;}  
.langPanel {display: none;}
.langMenu {display: none;}
.mobileLang {display: block; padding-bottom: 25px; padding-left: 0;}

.h2titleMobile40 {font-size: 40px !important;}
.h2titleMobile36 {font-size: 36px !important;}
.h2titleMobile28 {font-size: 28px !important;}
.h2title {font-size: 32px;}
.h2title-2 {font-size: 32px;}
.h3title {font-size: 18px;}
.pText {font-size: 14px;} 

.mainContent .submitButton {margin-top: 20px; margin-bottom: 35px; font-size: 12px; padding: 10px 35px 10px 35px;}  
.mainContent .cara {border-bottom: 1px solid #707070; margin: 40px 0 40px 0;} 
.inp .label {position: absolute; top: 17px; left: 15px; font-size: 14px; color: rgba(0, 0, 0, 0.5); font-weight: 500; -webkit-transform-origin: 0 0; transform-origin: 0 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);-webkit-transition: all 0.2s ease;transition: all 0.2s ease;pointer-events: none;}
.inp input {padding: 13px 15px 0 15px; height: 55px; font-size: 14px;}
.inp input:not(:placeholder-shown) + .label {-webkit-transform: translate3d(0, -9px, 0) scale(0.75);transform: translate3d(0, -9px, 0) scale(0.75);}
.inp input:focus + .label {color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0, -9px, 0) scale(0.75);transform: translate3d(0, -9px, 0) scale(0.75);}

.inp textarea {padding: 25px 15px 15px 15px; height: 170px; font-size: 14px;}
.inp textarea:not(:placeholder-shown) + .label {color: rgba(0, 0, 0, 0.5);-webkit-transform: translate3d(0, -9px, 0) scale(0.75);transform: translate3d(0, -9px, 0) scale(0.75);}
.inp textarea:focus + .label {color: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(0, -9px, 0) scale(0.75);transform: translate3d(0, -9px, 0) scale(0.75);}

.selectContainer select {cursor: pointer; font: inherit; margin-bottom: 20px; width: 100%; border: 1px solid #C6C6C6; border-radius: 10px; font-family: 'Aeonik',Helvetica,sans-serif; padding: 13px 15px 0 15px; height: 55px; font-size: 14px; background: rgba(255, 255, 255, 1); color: #000; -webkit-appearance: none;-moz-appearance: none;appearance: none; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;  outline: none;} 
.selectContainer:after {font-size: 15px; top: 21px; right: 20px;} 
.selectContainer .label2 {font-size: 14px; scale(0.75); position: absolute; top: 14px; left: -5px; -webkit-transform: translate3d(0, -9px, 0) scale(0.75);transform: translate3d(0, -9px, 0) scale(0.75);}
.OS .label2 {left: 4px;}

.home1:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/home1-bg_3.jpg?4) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.aboutUs:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/aboutUs_4.jpg?8) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.articles:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/articles_2.jpg?8) center center !important; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.excercisesBgImg:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/excercises_4.jpg?8) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}


.aboutUs .whiteFade, .support .whiteFade {background: rgb(255,255,255); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);}
.whiteFade {background: rgb(255,255,255); background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);}

/* Duplikát přechodu Předplatného tady být nemusí: nahradil ho selektor
   `.subscriptionStrana.support .whiteFade` (0,3,0), který vyhrává nad
   `.support .whiteFade` (0,2,0) ve všech šířkách. */

.intro-text1 {padding-top: 100px; font-size: 52px;}
.intro-text1-morePadding {padding-top: 160px !important;}
.intro-text1 span {font-size: 32px; padding-top: 10px;}
.intro-text2 {padding-top: 10px; width: 70%; margin: 0 auto; font-size: 16px !important;}
.blueButton {font-size: 14px; padding: 10px 35px 10px 35px;}
.intro-textLeft span {font-size: 14px;}
.intro-textLeft {margin: 0 auto;}
.intro-textRight .home1-phone1 {top: 91px; left: 20%; height: 420px;}
.intro-textRight .home1-phone2 {top: 0px; left: 38%; height: 420px;}
.AppDown img {width: 115px; height: auto;}
.intro-listItem {font-size: 20px; padding-top: 10px;}
.intro-listItem span {font-size: 11px;}
.footer .order-2 {font-size: 30px;}
.footer .order-2 i {padding: 18px 7px 15px 7px;}
.footer .copyright span {display: block; padding: 7px 0 7px 0;}
.footer .footerMenu a {display: block; padding: 8px 0 8px 0;}

.home2 {background-color: white; background-image: url(/design/base/img/home2-bg-small.jpg); background-position: center bottom; padding-bottom: 640px; background-size: auto; background-repeat: no-repeat;}
.home2 h2 {padding-bottom: 10px;} 
.home2 h3 {font-size: 24px; padding-bottom: 0px; padding-top: 10px;}
.home2-listItem {font-size: 18px;}
.home2-listItem span {font-size: 9px;}

.home3 {background-position: left;} 
.home3 h2 {padding-bottom: 0px;}
.home3 p {padding: 10px 0 25px 0;}
.home3 .home3Item .text {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; font-size: 14px; line-height: 20px; padding: 0 0 0 15px;} 
.home3 .home3Item {margin-bottom: 30px;}

.home4 .spacing {min-height: 890px;}
.home4 h3 {font-size: 14px; width: 270px;}
.home4 .home4content .phoneScreen {width: auto; height: 230px;}
.home4 .home4content .phoneScreen1 {position: absolute; top: 215px; left: 5px; width: 460px; height: auto;}
.home4 .home4content .phoneScreen2 {position: absolute; top: 560px; left: -120px;}
.home4 .home4content .phoneScreen3 {position: absolute; top: 440px; left: 15px;}
.home4 .home4content .phoneScreen4 {position: absolute; top: 480px; left: 148px;}
.home4 .home4content .phoneScreen5 {position: absolute; top: 650px; left: 281px;}
.home4 .home4content .phoneScreen6 {position: absolute; top: 620px; left: 414px;}
.home4 .home4content .phoneScreen7 {position: absolute; top: 715px; left: 550px;}
.home4 .home4content .phoneScreen8 {position: absolute; top: 680px; left: 15px;}
.home4 .home4content .phoneScreen9 {position: absolute; top: 725px; left: 148px;}
.home4 .home4content .phoneScreen10 {position: absolute; top: 898px; left: 281px;}
.home4 .home4content .phoneScreen11 {position: absolute; top: 869px; left: 414px;}

.home5 .video-overlay {background-position: -150px 0px;} 
.home5 .video-overlay h3 {font-size: 18px; margin-top: 15px;}
.home5 .video-overlay #play-video {width: 70px; margin: 30px 0 180px 0;} 
.home5 .video-overlay .shopButton {font-size: 14px; padding: 10px 35px 10px 35px;}
#videoClose {right: 12px; top: 12px; width: 20px;height: auto;}

.home6 .home6content {padding-top: 390px;} 
.home6 .phoneMockup .frame {max-width: 404px; top: 14px; left: 53px;}
.home6 .phoneMockup {margin: 20px 0 30px 0; width: 100%;} 
.home6 .videoButtonsItem h3 {font-size: 20px; padding: 7px 0 7px 0;} 
.home6 .videoButtonsItem p {font-size: 16px;} 
.home6 .videoButtonsItem {margin-bottom: 15px;} 

.home7 a {font-size: 12px;}
.home7 .homeShopItem h3 a {font-size: 24px;}
.home7 .homeShopItem a.shopLink {font-size: 12px;}
.home7 .homeShopItem .pText a {font-size: 14px;}
.home7 .shopButton, .exerciseDetail .shopButton {font-size: 14px; padding: 10px 35px 10px 35px; margin-top: 0;}

.home8 .faqItem h3 {font-size: 18px;}
.home8 .faqItem {padding: 20px 0 20px 0;}
/* 15 px, ne 14: Jan 16. 8. *„na mobilu pouze malinko zvětši velikost textu
   odpovědi, jinak je to ok."* Nadpis zůstává na 18 px. */
.home8 .faqItem .collapseText {font-size: 15px; padding-top: 15px;}
.home8 .faqItem .collapseText p {font-size: 15px;}
.home8 .faqItem .collapseText ul {font-size: 15px;}
.home8 .faq .icoPlus {height: 23px; margin: 4px 0 0 0;}

.aboutUs .whiteFade, .support .whiteFade {margin: 0; padding: 110px 0 0 0;}
  .chyba404 .whiteFade {padding: 110px 0 0 0;}
  /* DROBEČKY NA MOBILU O 36 px VÝŠ (Jan 9. 9. 2026: „drobky na mobilu -
     dáme je trochu výš, ať se to posune celé nahoru. Na desktopu je to
     dobré.").

     84 px NENÍ ODHAD, JE TO DESKTOPOVÁ MEZERA PŘENESENÁ NA MOBIL.
     Změřeno na `/cz/potize/` headless Chromem 9. 9. 2026:
       desktop 1440 px — `nav.navbar` y=0 h=60, drobečky y=80   → mezera 20
       mobil 500/600/767 px — `nav.navbar` y=0 h=64, drobečky y=120 → mezera 56
     Menu je `fixed-top`, tedy mimo tok, takže odsazení drobečků je jediné,
     co je drží pod ním. Na mobilu je to menu o 4 px vyšší (`height: auto`
     místo 60 px, ověřeno na třech šířkách), a 64 + 20 = 84. Desktopu se
     to nedotýká, ten sedí dál na 80 px (ř. ~1038).

     Proč ne prostě 80 jako na desktopu: menu je na mobilu vyšší, takže
     jedno číslo pro obojí by dalo mezeru 16 px místo schválených 20 —
     vypadalo by to jako úklid a byl by to jiný návrh.

     Specificita se nemění: obě pravidla jsou `.maDrobecky .whiteFade`
     s `!important`, tohle je v souboru níž. Media query specificitu
     NEZVYŠUJE, takže kdo tady selektor zpřesní, musí ho zpřesnit
     i na ř. ~1038. */
  .maDrobecky .whiteFade {padding-top: 84px !important;}
  .aboutUs .whiteFade h1, .support .whiteFade h1 {padding-bottom: 24px;}
  .chyba404 .whiteFade h1 {padding-bottom: 24px;}
  .subscriptionStrana .whiteFade h1 {padding-bottom: 50px;}
  .subscriptionUcet {padding: 26px 22px 22px 22px;}
  .subscriptionUcetTlacitka .outlineBtn {font-size: 14px; padding: 9px 28px 9px 28px;}
  .chybaTlacitka .outlineBtn {font-size: 14px; padding: 9px 28px 9px 28px;}
  .articlesDetailHeader {margin: 110px 0 0 0; padding: 270px 0 0 0;}
.aboutUs3 .profileImage {width: 115px; height: auto; margin-bottom: 30px;}

.articleItem .articleItemImage img {width: 100%; height: auto;}
.articleItem .articleItemText {margin-left: 0px; margin-top: 30px;}

.footerInfo1 {font-size: 12px;}
.footer .copyright {font-size: 12px;}
.footer .order-3 a {font-size: 14px;}
.footerMenu {display: none;}

.profile-detail .predplatne {font-size: 17px;}
.aboutUs3 .profileImage2 {margin-bottom: 5px;}

}


/* Medium devices (tablets, less than 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {

.h2title {font-size: 40px;}
.h2title-2 {font-size: 32px;}
.h3title {font-size: 24px;}
.pText {font-size: 16px;} 

.home1:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/home1-bg_2.jpg) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}

.intro-text1 {font-size: 70px;}
.intro-text1 span {font-size: 40px;}
.AppDown img {width: 125px; height: auto;}
.intro-textRight .home1-phone1 {left: 35px; height: 450px;}
.intro-textRight .home1-phone2 {left: 90px; height: 450px;}

.home2 h3 {font-size: 32px;}
.home2-listItem {font-size: 18px; padding-top: 10px;}
.home2-listItem span {font-size: 11px;}

.home3 p {padding: 10px 0 25px 0;} 
.home3 .home3Item {margin-bottom: 45px;} 

.home4 .spacing {min-height: 780px;}
.home4 h3 {font-size: 14px;}
.home4 .home4content .phoneScreen {width: auto; height: 305px;}
.home4 .home4content .phoneScreen1 {position: absolute; top: 130px; left: 365px; width: 550px; height: auto;}
.home4 .home4content .phoneScreen2 {position: absolute; top: 505px; left: -164px;}
.home4 .home4content .phoneScreen3 {position: absolute; top: 340px; left: 15px;}
.home4 .home4content .phoneScreen4 {position: absolute; top: 380px; left: 195px;}
.home4 .home4content .phoneScreen5 {position: absolute; top: 550px; left: 375px;}
.home4 .home4content .phoneScreen6 {position: absolute; top: 520px; left: 555px;}
.home4 .home4content .phoneScreen7 {position: absolute; top: 640px; left: 735px;}
.home4 .home4content .phoneScreen8 {position: absolute; top: 667px; left: 15px;}
.home4 .home4content .phoneScreen9 {position: absolute; top: 710px; left: 195px;}
.home4 .home4content .phoneScreen10 {position: absolute; top: 883px; left: 375px;}
.home4 .home4content .phoneScreen11 {position: absolute; top: 854px; left: 555px;}

.home5 .video-overlay h3 {font-size: 24px; margin-top: 25px;}
.home5 .video-overlay #play-video {width: 100px; margin: 40px 0 220px 0;} 
#videoClose {right: 25px; top: 25px; width: 25px;height: auto;}


.home6 .home6content {padding-top: 60vw;} 
.home6 .phoneMockup .frame {max-width: 543px; top: 20px; left: 74px;}
.home6 .phoneMockup {margin: 20px 0 30px 0; width: 100%;} 
.home6 .videoButtonsItem h3 {font-size: 20px; padding: 10px 0 10px 0; margin: 0;} 
.home6 .videoButtonsItem p {font-size: 16px;} 

.home7 a {font-size: 14px;}
.home7 .homeShopItem h3 a {font-size: 20px;}
.home7 .homeShopItem a.shopLink {font-size: 12px;}
.home7 .homeShopItem .pText a {font-size: 16px;} 

/* Nadpis se tu nepřepisuje — od 16. 8. má 24 px i desktop, takže by to
   bylo pravidlo, které nic nemění. */
.home8 .faqItem .collapseText {font-size: 16px;}
.home8 .faqItem .collapseText p {font-size: 16px;}
.home8 .faqItem .collapseText ul {font-size: 16px;}
.home8 .faq .icoPlus {height: 27px; margin: 8px 0 0 0;}

.footerInfo1 {font-size: 12px;}
.footer .copyright {font-size: 12px;}
.footer .order-3 a {font-size: 14px;}
.footerMenu {padding: 0;}
.footer .order-3 a {padding: 6px 9px 0 9px;}

.aboutUs .whiteFade, .support .whiteFade {margin: 0; padding: 130px 0 0 0;}
  .chyba404 .whiteFade {padding: 130px 0 0 0;}
  .aboutUs .whiteFade h1, .support .whiteFade h1 {font-size: 40px;}
  .chyba404 .whiteFade h1 {font-size: 40px;}
  .articlesDetailHeader {margin: 200px 0 0 0; padding: 270px 0 0 0;}
.aboutUs3 .profileImage {width: 150px; height: auto; margin-bottom: 50px;}

.top-menu-holder .top-menu-items .nav-link {padding-right: .5rem; padding-left: .5rem;}
}

@media (min-width: 991.98px) and (max-width: 1400px) {
.home1:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/home1-bg_4.jpg?2) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: top;}
.aboutUs:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/aboutUs_2.jpg?7) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}
.excercisesBgImg:after{display: block; content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1; background: url(/design/base/img/excercises_2.jpg?7) center center; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;background-position: center;}

}
/* Large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

.home4 .spacing {min-height: 1350px;} 
.home4 .home4content .phoneScreen1 {top: 195px;}
.home4 .home4content .phoneScreen2 {top: 630px;}
.home4 .home4content .phoneScreen3 {top: 370px;}
.home4 .home4content .phoneScreen4 {top: 450px;}
.home4 .home4content .phoneScreen5 {top: 700px;}
.home4 .home4content .phoneScreen6 {top: 650px;}
.home4 .home4content .phoneScreen7 {top: 830px;}
.home4 .home4content .phoneScreen8 {top: 910px;}
.home4 .home4content .phoneScreen9 {top: 990px;}
.home4 .home4content .phoneScreen10 {top: 1240px;}
.home4 .home4content .phoneScreen11 {top: 1190px;}

.home6 .home6content {padding-top: 50vw;} 
.home6 .phoneMockup .frame {max-width: 735px; top: 26px; left: 99px;} 

.aboutUs .whiteFade, .support .whiteFade {margin: 0; padding: 140px 0 0 0;}
  .articlesDetailHeader {margin: 290px 0 0 0; padding: 180px 0 0 0;}
}


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {

.navbar-collapse .nav-link {padding-left: 16px !important;}
.mobileLang {padding-left: 17px;}

.intro-textRight .home1-phone1 {top: 91px; left: 19%;}
.intro-textRight .home1-phone2 {top: 0px; left: 34%;}

.home6 .phoneMockup {height: 52vw;}
.home6 .phoneMockup .frame {position: absolute; width: 100%; max-width: 100%; height: auto; top: 0px; left: 0px; z-index: 10;} 
.home6 .videoPhoneMockup {width: 112vw; position: absolute; left: -57px; top: -16px; z-index: 1; max-width: 112vw;}

}

@media (max-width: 390px) {

.intro-textRight .home1-phone1 {top: 91px; left: 18%;}
.intro-textRight .home1-phone2 {top: 0px; left: 23%;}

}

/* ============ AUTH FORM ============ */
#firebaseui-auth-container {max-width: 500px; margin: 0 auto; position: relative;}

/* Schování kroků */
#firebaseui-auth-container .auth-step {display: none;}
#firebaseui-auth-container .auth-step.is-active {display: block;}

/* Provider tlačítka (Facebook/Google/Apple/e-mail) */
#firebaseui-auth-container .auth-provider-btn {display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; background: #fff; color: #000; border: 1px solid #C6C6C6; border-radius: 10px; padding: 18px 25px; font-family: 'AeonikMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: 2px; cursor: pointer; margin-bottom: 15px; box-shadow: none; transition: background .15s;}
#firebaseui-auth-container .auth-provider-btn:hover {background: #f6f8fa; text-decoration: none; color: #000;}
#firebaseui-auth-container .auth-provider-btn:disabled {opacity: .55; cursor: not-allowed;}
#firebaseui-auth-container .auth-icon {display: inline-flex; align-items: center; flex-shrink: 0;}

/* Hlavní CTA (Pokračovat / Přihlásit se / Zaregistrovat) */
#firebaseui-auth-container .auth-cta {display: block; width: 100%; text-align: center; cursor: pointer; border: none; background: #6FF9FF; color: #313131; font-family: 'AeonikMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: 2px; border-radius: 5px; padding: 14px 35px; box-sizing: border-box; margin: 5px 0 15px 0; box-shadow: none;}
#firebaseui-auth-container .auth-cta:hover {background: #53F8FF; color: #313131; text-decoration: none;}
#firebaseui-auth-container .auth-cta:disabled {opacity: .55; cursor: not-allowed;}

/* Sekundární textové odkazy (Zpět, Zapomenuté heslo, Změnit e-mail) */
#firebaseui-auth-container .auth-link-row {display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 8px;}
#firebaseui-auth-container .auth-link-btn {background: transparent; border: none; color: #637B7C; font-family: 'AeonikMedium', Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 13px; letter-spacing: 1px; cursor: pointer; padding: 8px 4px; text-decoration: underline; width: auto; border-radius: 0; box-shadow: none;}
#firebaseui-auth-container .auth-link-btn:hover {color: #000; background: transparent; text-decoration: underline;}

/* Jméno + Příjmení vedle sebe */
#firebaseui-auth-container .auth-row {display: flex; gap: 15px;}
#firebaseui-auth-container .auth-row > .inp {flex: 1; margin-bottom: 15px;}

/* Label nad inputem (E-mail uvedený nahoře v sign-in/sign-up) */
#firebaseui-auth-container .auth-email-label {font-family: 'AeonikMedium', Arial, Helvetica, sans-serif; font-size: 16px; padding: 10px 0 15px 0; color: #637B7C; text-align: center;}

/* Hlášky */
#firebaseui-auth-container .auth-alert {padding: 12px 16px; border-radius: 10px; text-align: center; margin-bottom: 15px; font-size: 14px;}
#firebaseui-auth-container .auth-alert.error {color: #a02020; background: #fce8e6; border: 1px solid #f5c6cb;}
#firebaseui-auth-container .auth-alert.info {color: #1a4d8f; background: #e8f0fe; border: 1px solid #c5d8f5;}
#firebaseui-auth-container .auth-alert.success {color: #0f5132; background: #e6f4ea; border: 1px solid #b8e0c4;}

/* Loader overlay */
#firebaseui-auth-container .auth-loader-overlay {position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); z-index: 10; border-radius: 10px; display: flex; align-items: center; justify-content: center;}

/* Mobile responzivita */
@media (max-width: 575px) {
.auth-row {flex-direction: column; gap: 0;}
.auth-provider-btn, .auth-cta {font-size: 14px; letter-spacing: 1.5px; padding: 14px 20px;}
}

@media (max-width: 575px) {
#firebaseui-auth-container .auth-provider-btn {font-size: 14px; letter-spacing: 1px; padding: 14px 12px; gap: 10px;}
#firebaseui-auth-container .auth-cta {font-size: 14px; letter-spacing: 1px; padding: 14px 12px;}
}
@media (max-width: 360px) {
#firebaseui-auth-container .auth-provider-btn {padding: 14px 8px; letter-spacing: 0.5px;}
}


/* Lepivá cena + CTA — stránka Předplatné (Z10b, varianta E).
   Nevisí na šířce obrazovky, ale na tom, jestli je vidět původní tlačítko:
   třídu .jeVidet dává jquery.scripts.js ve chvíli, kdy cena a CTA vyjely
   z obrazovky. Chová se proto stejně na mobilu, na tabletu i v malém okně
   na desktopu — a na velkém displeji, kde je CTA vidět rovnou, se
   nevykreslí vůbec.
   V HTML má lišta inline display:none a odkrývá ji až tenhle soubor (proto
   !important). Komu se drží starý style.css v cache, ten lištu neuvidí
   vůbec — bez toho by ji dostal nestylovanou přímo v toku stránky.
   Lišta je uvnitř .tab-content, takže se cena přepíná s taby sama. */
.ctaLista {display: none;}
.ctaLista.jeVidet {display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: #FFFFFF; border-top: 1px solid #E4E9E9; border-radius: 10px 10px 0 0; padding: 10px 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 16px rgba(0,0,0,0.14);}
/* Šířku plochy (.ctaLista) i obsahu (.ctaListaIn) dopočítává jquery.scripts.js:
   plocha na šířku karty .subscription, obsah na její vnitřek. Hodnoty tady
   jsou fallback pro mobil, kde je karta na obsah moc úzká a lišta zůstává
   přes celou šířku okna. */
.ctaListaIn {display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1140px; margin: 0 auto; padding: 0 15px; overflow: hidden;}
.ctaListaCena {font-size: 22px; font-weight: 600; white-space: nowrap; line-height: 1.1; min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.ctaListaCena span {font-size: 13px; color: #bebec9; font-weight: 300;}
.ctaListaBtn {display: inline-block; flex: 0 0 auto; background: #53F8FF; color: #000000; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif; text-transform: uppercase; font-size: 13px; letter-spacing: 1.5px; border-radius: 5px; padding: 11px 20px; white-space: nowrap;}
.ctaListaBtn:hover, .ctaListaBtn:focus {background: #53F8FF; color: #000000; text-decoration: none;}

@media (min-width: 768px) {
  .ctaLista.jeVidet {padding: 14px 0; padding-bottom: calc(14px + env(safe-area-inset-bottom));}
  .ctaListaCena {font-size: 26px;}
  .ctaListaCena span {font-size: 15px;}
  .ctaListaBtn {font-size: 15px; padding: 12px 40px; letter-spacing: 2px;}
}

/* Na úzkých displejích se nevejde nejdelší kombinace („CZK 699 za 3 měsíce"
   + „VYZKOUŠET ZDARMA" = 387 px při šířce okna 375). Tlačítko se nezmenšuje
   ani nezalamuje, v krajním případě se ořízne cena — proto ellipsis výš. */
@media (max-width: 420px) {
  .ctaListaCena {font-size: 19px;}
  .ctaListaCena span {font-size: 12px;}
  .ctaListaBtn {font-size: 12px; padding: 11px 14px; letter-spacing: 1px;}
}

/* ===== LIDÉ (C16) =====================================================
   Rozcestník `/cz/lide/` a stránka jednoho člověka. Vlastní jen to, co
   dlaždice opravdu potřebuje — kroužek s iniciálami a velikost avataru
   sdílí s podcastem (`.podcastOsobaIniciala`, ř. 1043), aby se dvě podoby
   téhož prvku nemohly rozejít. */

/* Hlavička sekce BEZ fotky na pozadí. `.support:after` (ř. 877) dává
   fotku Podpory a `.lideStrana` je tu jen proto, aby ji vypnula; odsazení
   a bílý přechod se dědí dál z `.support .whiteFade`. Až fotka pro Lidi
   vznikne, nahradí se `display: none` řádkem s `background-image`, jak to
   má `.potizeStrana:after`. */
.lideStrana:after {display: none !important;}

.lideVypis {margin-top: 10px;}
.lideDlazdice {text-align: center; margin-bottom: 34px;}
.lideDlazdice img, .lideDlazdiceIniciala {width: 150px; height: 150px; flex: none;
   border-radius: 14px; object-fit: cover; font-size: 34px; letter-spacing: 2px;}
.lideDlazdiceIniciala {display: inline-flex;}
.lideDlazdiceJmeno {margin: 14px 0 2px 0; font-size: 19px;}
.lideDlazdiceJmeno a {color: #1F3D3E;}
.lideDlazdiceRole {margin: 0; color: #637B7C; font-size: 15px;}
.lideDlazdicePerex {margin: 8px 0 0 0; font-size: 15px;}

/* Kotva kolem avataru v dlaždici u epizody. `.podcastOsoba` je flexbox
   a rozměr měl doteď přímo `img` (ř. 1043); s kotvou by se z obrázku stal
   vnořený prvek a flexovou položkou by byl odkaz, tedy bez šířky. */
.podcastOsobaObr {flex: 0 0 80px; width: 80px; height: 80px; display: block;}

.lideProfilObr {text-align: center;}
.lideProfilObr img, .lideProfilIniciala {width: 300px; height: 300px; max-width: 100%;
   border-radius: 18px; object-fit: cover; font-size: 64px; letter-spacing: 4px;}
.lideProfilIniciala {display: inline-flex; flex: none;}
.lideProfilRole {margin: 0 0 14px 0; color: #637B7C;}
.lideProfilWeb {margin-top: 20px;}

/* ===== SEKCE /user/ (C19 D3) ==========================================
   Rámec přihlášené sekce: h1 jako custom select, vodorovné taby, mřížka
   dlaždic a odkaz na odhlášení. Vykresluje to
   addons/userAccount/sekce/layout.inc.php.
   Návrh: docs/navrh-user-sekce.md §5.1, §5.2, §5.3.

   Barvy jsou VÝHRADNĚ z palety, kterou web už má: #1F3D3E (text, viz
   .lideDlazdiceJmeno), #637B7C (šedý doprovod, .lideProfilRole),
   #E4E9E9 (linky, .ctaLista), #53F8FF a #6FF9FF (akcent, .blueButton).
   Kontrast proti bílé je 11,70:1 u #1F3D3E a 4,51:1 u #637B7C (spočítáno
   podle WCAG z hodnot barev, ne odhadnuto z obrázku). Práh AA pro běžný
   text je 4,5 — #637B7C ho splňuje S REZERVOU 0,01, takže se ta barva
   nesmí použít na menší písmo než 16 px a nesmí se položit na podklad
   .userNavPolozka a:hover (#F2F6F6), kde vychází 4,14 a propadla by.
   Proto tam hover přebarvuje text na #1F3D3E.

   DVĚ MECHANIKY OTEVÍRÁNÍ, KTERÉ SE NESMÍ POTKAT
   Bez JavaScriptu otevírá seznam :focus-within — kliknutí dá tlačítku
   fokus a seznam se rozbalí. Jakmile se načte user-sekce.js, přidá na
   obal třídu userNavJS a od té chvíle rozhoduje třída userNavOtevreno;
   focus-within se musí VYPNOUT, jinak by kliknutí seznam otevřelo
   fokusem a toggle by ho hned zavřel. Prvek by nešlo otevřít vůbec.  */

.userNav {margin-bottom: 26px;}

.userNavSelect {position: relative; display: inline-block; max-width: 100%;}
/* VELIKOSTI TADY ZŮSTÁVAJÍ, I KDYŽ `<h1>` má od C19 L1 v HTML navíc třídy
   `h2title h2titleMobile40`. Není to duplicita k zahození: obal OSTRÉ sekce
   (`user.html`, `subscription.html`) hlavičku `.userStrana` nemá, takže bez
   těchhle řádků by tam nadpis spadl na `.h2title` (56 px) — tedy regrese na
   produkci vyvolaná změnou ladicí větve. V hlavičce `usertest/` je přebíjí
   `.userStrana .whiteFade h1` (0,2,1), viz blok C19 L1 na konci souboru. */
.userNavTitle {margin: 0; padding: 0; font-size: 40px; font-weight: bold; line-height: 1.08;}
.userNavToggle {display: inline-block; max-width: 100%; margin: 0; padding: 0; border: 0;
   background: none; color: #1F3D3E; font: inherit; text-align: left; cursor: pointer;}
.userNavToggle:focus {outline: 2px solid #53F8FF; outline-offset: 3px;}
.userNavSipka {display: inline-block; margin-left: 10px; font-size: 0.6em; vertical-align: middle; color: #637B7C;}

.userNavList {display: none; position: absolute; z-index: 1020; left: 0; top: 100%; min-width: 240px;
   margin: 6px 0 0 0; padding: 6px 0; list-style: none; background: #FFFFFF;
   border: 1px solid #E4E9E9; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.12);}
.userNavSelect:focus-within .userNavList {display: block;}
.userNavSelect.userNavJS:focus-within .userNavList {display: none;}
.userNavSelect.userNavJS.userNavOtevreno .userNavList {display: block;}

.userNavPolozka a {display: block; padding: 9px 20px; color: #1F3D3E; font-size: 17px;}
.userNavPolozka a:hover, .userNavPolozka a:focus {background: #F2F6F6; color: #1F3D3E; text-decoration: none;}
.userNavPolozkaAktivni a {font-weight: bold;}

/* Taby jsou na mobilu schované — tam je navigací select v nadpisu.
   Od 768 px se zapínají (blok `@media (min-width: 768px)` níž) a od
   9. 9. 2026 stojí VEDLE rozbalovacího nadpisu, ne místo něj. */
.userNavTaby {display: none;}
.userNavTabyList {display: flex; flex-wrap: wrap; margin: 18px 0 0 0; padding: 0; list-style: none;
   border-bottom: 1px solid #E4E9E9;}
.userNavTabPolozka {margin: 0 26px 0 0;}
.userNavTab {display: inline-block; padding: 8px 0 12px 0; color: #637B7C; font-size: 17px;
   border-bottom: 3px solid transparent;}
.userNavTab:hover, .userNavTab:focus {color: #1F3D3E; text-decoration: none;}
.userNavTabAktivni {color: #1F3D3E; font-weight: bold; border-bottom-color: #53F8FF;}

/* Mřížka dlaždic na Bootstrap 4 gridu, který web používá — šířku sloupce
   (col-md-6, col-md-4) předává PHP, tady je jen vzhled karty. */
.userMrizka {margin-top: 6px;}
.userDlazdiceSloupec {margin-bottom: 24px;}
.userDlazdice {height: 100%; padding: 22px 24px; background: #FFFFFF;
   border: 1px solid #E4E9E9; border-radius: 14px;}
.userDlazdiceNadpis {margin: 0 0 12px 0; padding: 0;}
.userDlazdiceTelo {color: #1F3D3E;}
.userDlazdiceOdkaz {margin: 18px 0 0 0;}

.userSekcePrazdno {margin: 10px 0 0 0;}

.userSekcePata {margin: 44px 0 0 0; padding-top: 22px; border-top: 1px solid #E4E9E9;}
.userSekceOdhlasit {color: #637B7C; font-size: 16px;}
.userSekceOdhlasit:hover, .userSekceOdhlasit:focus {color: #1F3D3E;}

@media (min-width: 768px) {
  /* NAD 768 px NAVIGUJÍ TABY **A ZÁROVEŇ** NADPIS (Jan 9. 9. 2026:
     „h1 v mobilním rozlišení je vlastně menu - to je perfektní, chtěl bych
     to i na desktopu i včetně těch desktopových odkazů pod h1, na mobilu
     to nechat, jak je").

     Do 9. 9. 2026 tu stály tři deklarace, které nadpisu na desktopu
     chování selectu VYPÍNALY (`pointer-events: none` na tlačítku, skrytá
     šipka a `display: none` na seznamu v obou mechanikách otevírání).
     Jsou pryč — ne přepsané, smazané: nadpis se tím na desktopu vrací
     k základním pravidlům nad tímhle blokem, tedy k TÉMUŽ mechanismu,
     jakým se otevírá na mobilu (`:focus-within` bez JS, třída
     `userNavOtevreno` s `user-sekce.js`). Žádný druhý mechanismus pro
     desktop nevznikl.

     `.userNavTaby {display: block}` ZŮSTÁVÁ, a je to celá druhá polovina
     zadání: odkazy pod nadpisem se neruší, jen k nim rozbalení přibývá.
     Seznam a taby jsou táž data dvakrát vykreslená (`navigace()` v
     `sekce/layout.inc.php`), takže se obsahově nemohou rozejít.

     NA MOBILU SE TÍMHLE BLOKEM NEMĚNÍ NIC — platí od 768 px nahoru. */
  .userNavTitle {font-size: 48px;}
  .userNavTaby {display: block;}
}

@media (max-width: 767.98px) {
  .userNavTitle {font-size: 30px;}
  .userNavList {min-width: 220px;}
  .userDlazdice {padding: 18px 18px;}
}

/* C19 D5 profil predplatne historie ======================================

   Blok je na KONCI souboru schválně a nic nad ním se neupravuje: souběžně
   běžela dávka D4 (dashboard) ve vlastním worktree a přepis kdekoli výš by
   z merge udělal ruční práci.

   Barvy jsou převzaté z bloku D3 nad tímto (#1F3D3E text, #637B7C sekundární,
   #E4E9E9 linka, #53F8FF akcent). Přibyla jediná, #5C7273, a je pro to důvod
   níž.

   KONTRAST SPOČÍTÁN Z HODNOT, ne odhadnut z obrázku (WCAG 2.1, relativní
   jas; práh 4,5:1 pro běžný text):

     #1F3D3E na #FFFFFF = 11,70:1   AAA
     #1F3D3E na #F7FAFA = 11,15:1   AAA
     #637B7C na #FFFFFF =  4,51:1   AA, ale s rezervou 0,01 — proto se
                                    #637B7C používá VÝHRADNĚ na bílé
     #637B7C na #F7FAFA =  4,30:1   PROPADÁ. Tady vzniká #5C7273:
     #5C7273 na #F7FAFA =  4,87:1   AA

   Poslední dvojice je celý důvod, proč tenhle odstavec existuje. Sekundární
   šeď z D3 sedí na bílé jen tak tak, a jakmile se pod ni dá i světle tónované
   pozadí dlaždice s roční sazbou, spadne pod práh. Poznat se to dá jedině
   výpočtem — na snímku obrazovky vypadají obě dvojice stejně.               */

/* --- řádek „popis — hodnota" (profil i předplatné) --------------------- */
.userRadek {margin: 0 0 10px 0;}
.userRadek:last-child {margin-bottom: 0;}
.userRadekPopis {color: #637B7C; font-size: 16px;}
.userRadekHodnota {color: #1F3D3E; font-size: 16px; font-weight: bold;}

/* --- profil ------------------------------------------------------------ */
/* Pole jsou readonly, ne disabled (viz profil-pole.html). Prohlížeč
   readonly pole nešedne sám, takže se to říká tady — a záměrně slaběji
   než u disabled: údaj má zůstat čitelný, jen nemá vypadat jako k psaní. */
.userProfilRada {margin: 0 -8px;}
.userProfilPole {padding: 0 8px;}
.userProfilPole .inp input[readonly] {background: #F7FAFA; color: #1F3D3E; cursor: default;}
.userProfilPole .inp input[readonly]:focus {outline: 2px solid #53F8FF; outline-offset: 2px;}
.userProfilPoznamka {margin: 18px 0 0 0; font-size: 16px;}
.userProfilSmazani {margin: 18px 0 0 0; padding-top: 16px; border-top: 1px solid #E4E9E9;}
.userProfilSmazani p {margin: 0 0 8px 0; font-size: 16px;}
.userProfilSmazaniOdkaz {margin: 0;}
/* Nevratná akce se nezvýrazňuje tlačítkem. Podtržený odkaz v sekundární
   barvě je záměr: má se dát najít, ne pozvat k prokliku.

   DVĚ TŘÍDY, NE JEDNA, A JE TO PODMÍNKA. `.mainContent a {color: black}`
   má specificitu (0,1,1) a jednotřídní `.userProfilSmazaniLink` (0,1,0)
   prohrává — změřeno 20. 9. 2026 v DOMu nad nasazenou stránkou: odkaz
   vycházel #000000, tedy stejně výrazný jako každý odkaz v obsahu, a
   celý ten záměr byl pryč. Z CSS se to nepozná; poznalo to až měření.
   Táž rodina jako `.userCekaniOdkaz`, jen s opačným závěrem: tam se
   černá nechala schválně, tady je tlumenost to, o co jde. */
.userProfilSmazaniLink {font-size: 16px; text-decoration: underline;}
.userProfilSmazani .userProfilSmazaniLink {color: #637B7C;}
.userProfilSmazani .userProfilSmazaniLink:hover,
.userProfilSmazani .userProfilSmazaniLink:focus {color: #1F3D3E;}
/* Věta o aktivním předplatném v potvrzovacím dialogu. Barvu ani rám
   nepřidává — je to bootstrapí `alert alert-warning`, tedy týž blok, jaký
   už web používá v konverzním bloku předplatného. Tady se jen srovná
   odsazení a zruší zarovnání na střed, které `.modal-body` dědí z dialogu
   odhlášení: varování je dvě řádky k přečtení, ne nadpis. */
.userProfilSmazaniVarovani {margin: 0 0 18px 0; font-size: 16px; text-align: left;}

/* --- historie cvičení -------------------------------------------------- */
.userHistorieSeznam {margin: 0; padding: 0; list-style: none;}
/* Klikací je CELÝ panel (Jan 11. 9. 2026), a je to táž stavba jako karta
   Potíží o ~1 500 řádků výš: stylovaná je KARTA, `li` drží jen odstup.
   Kdyby vzhled zůstal na `li`, nedalo by se obarvit celé okolí při hoveru
   a šipka by neměla ke komu být zarovnaná.

   `color: inherit` a `text-decoration: none` jsou nutné, ne kosmetika:
   obsah je teď uvnitř `a`, takže by název i řádky zmodraly a podtrhly se. */
.userHistoriePolozka {margin: 0 0 14px 0;}
.userHistorieKarta {display: flex; align-items: stretch; gap: 16px;
   padding: 16px 20px; background: #FFFFFF; border: 1px solid #E4E9E9;
   border-radius: 14px; color: inherit; text-decoration: none;
   transition: background .15s ease, box-shadow .15s ease;}
/* `min-width: 0` ruší výchozí `min-width: auto` flex položky — bez toho
   dlouhý název kartu roztáhne. Obsah je blok, protože `user-radek.html`
   posílá dovnitř bootstrapový `div.row`. */
.userHistorieObsah {flex: 1 1 auto; min-width: 0;}
/* Hover a focus jsou přesně ty, jaké má `.potizeKarta` — podklad #F7F8F9
   (barva, kterou web už má), stín, podtržení názvu. Karta se neposouvá:
   Z83c, Jan 21. 8. 2026 („hover tu kartu nějak posune nahoru"). */
.userHistorieKarta:hover {background: #F7F8F9;
   box-shadow: 0 4px 14px rgba(0,0,0,0.07); text-decoration: none;}
.userHistorieKarta:hover .userHistorieNazev {text-decoration: underline;}
.userHistorieKarta:hover .userHistorieSipka {color: #313131; transform: translateX(2px);}
.userHistorieKarta:focus-visible {outline: 2px solid #313131; outline-offset: 2px;}
@media (prefers-reduced-motion: reduce) {
  .userHistorieKarta, .userHistorieSipka {transition: none;}
  .userHistorieKarta:hover .userHistorieSipka {transform: none;}
}
/* Šipka je dekorace (`aria-hidden` v HTML) — informaci nese název, proto
   smí být takhle tlumená. Svisle na střed, panely jsou různě vysoké.
   Panel bez detailu ji nemá vůbec a není klikací. */
.userHistorieSipka {flex: 0 0 auto; align-self: center; color: #93A5A6;
   font-size: 13px; padding-left: 4px;
   transition: color .15s ease, transform .15s ease;}
.userHistorieKarta.jeBezOdkazu {cursor: default;}
.userHistorieHlava {display: flex; flex-wrap: wrap; align-items: baseline;
   justify-content: space-between; margin-bottom: 10px;}
.userHistorieNazev {color: #1F3D3E; font-size: 18px; font-weight: bold;}
.userHistorieDatum {color: #637B7C; font-size: 16px;}
.userHistorieVic {margin: 18px 0 0 0;}
/* DETAIL TRÉNINKU (Jan 12. 9. 2026, bod 12). Obě deklarace jsou jen
   dorovnání do tříd, které web už má — žádná nová velikost ani barva.

   Nadpis je `h2.h2title2.sestavyNadpis` (22 px/700, jako v každém panelu
   sekce); `.sestavyNadpis` mu ale dává `margin-bottom: 12px` a v pružné
   hlavičce, kde vedle něj stojí datum, by to hlavičku o těch 12 px
   protáhlo. Velikost ani řez se tím nemění.

   „odcvičené cviky jako název sestavy v panelu Moje sestavy": tučnost má
   `.sestavaCvikNazev` už dnes, chybí velikost. 17 px je OPSANÝCH
   z `.sestavySeznamToggle` (ř. ~3069), tedy z prvku, ve kterém název
   sestavy v panelu „Moje sestavy" opravdu bydlí. Selektor je zúžený na
   `.userHistorieCviky`, takže detail SESTAVY (`sestava-cvik.html`)
   zůstává, jak byl. */
.userHistorieDetailNazev {margin-bottom: 0;}
.userHistorieCviky .sestavaCvikNazev {font-size: 17px;}

/* --- předplatné -------------------------------------------------------- */
.userPredplatneZprava {margin: 0 0 16px 0;}
/* Velikost a tučnost dává `.h2title2` z HTML (C19 L1) — týž styl, jaký
   web používá na nadpisy v účtu od migrace 137. */
.userPredplatneZpravaNadpis {margin: 0 0 8px 0; color: #1F3D3E;}
.userPredplatneZprava p {margin: 0; color: #1F3D3E; font-size: 16px;}
.userPredplatneRocni {margin: 0 0 16px 0; padding: 16px 20px; background: #F7FAFA;
   border: 1px solid #E4E9E9; border-radius: 14px;}
.userPredplatneRocni p {margin: 0 0 6px 0;}
/* #5C7273, ne #637B7C: na pozadí #F7FAFA má sekundární šeď z D3 kontrast
   4,30:1 a propadá. Viz výpočet v hlavičce bloku. */
.userPredplatneRocniPopis {color: #5C7273; font-size: 16px;}
.userPredplatneRocniCena {color: #1F3D3E; font-size: 28px; font-weight: bold; line-height: 1.1;}
.userPredplatneUspora {color: #1F3D3E; font-size: 16px;}
.userPredplatneRocniAkce {margin: 14px 0 0 0;}
.userPredplatneSprava {margin: 14px 0 0 0;}

@media (max-width: 767.98px) {
  /* Padding se od 11. 9. 2026 drží na kartě, ne na `li` — panel je odkaz. */
  .userHistorieKarta {padding: 14px 16px; gap: 12px;}
  .userHistorieHlava {display: block;}
  .userHistorieDatum {display: block; margin-top: 2px;}
  .userPredplatneRocniCena {font-size: 24px;}
}

/* C19 D4 dashboard ======================================================
   Obsah stránky /user/: reaktivační blok, sloupcový graf týdne, odznaky
   série a těla dlaždic. Skládá to addons/userAccount/sekce/dashboard.inc.php,
   návrh docs/navrh-user-sekce.md par. 4, 4.1 a 5a.

   BARVY JSOU TYTÉŽ, KTERÉ ZAVEDLA D3, a nepřibyla ani jedna nová:
   #1F3D3E (text), #637B7C (šedý doprovod), #E4E9E9 (linky a prázdný pruh),
   #53F8FF a #6FF9FF (akcent). Kontrast proti bílé je 11,70:1 u #1F3D3E
   a 4,51:1 u #637B7C — spočítáno podle WCAG z hodnot barev, ne odhadnuto
   ze snímku.

   PROČ JE VŠECHNO NA BÍLÉ A ŽÁDNÝ BLOK NEMÁ TÓNOVANÉ POZADÍ: #637B7C
   projde prahem AA (4,5) s rezervou 0,01, takže jakékoli ztmavení podkladu
   ho shodí. Změřeno: na #F2F6F6 vychází 4,14 a i na skoro bílé #FBFDFD
   jen 4,42. Reaktivační blok se proto odlišuje SVISLÝM PRUHEM a rámečkem,
   ne výplní. Ze stejného důvodu je drobné písmo v grafu (13–14 px)
   v #1F3D3E, ne v šedé — D3 si u #637B7C nastavila spodní hranici 16 px
   a ta platí dál.

   BARVA NIKDE NENESE INFORMACI SAMA. Stav „dnes odcvičeno" versus „dnes
   ještě nic" říká věta v bloku; akcentní pruh je jen ozdoba. Dnešní den
   v grafu je poznat TUČNÝM POPISKEM, ne odstínem pruhu.

   .gray-text SE TU MUSÍ NADEFINOVAT ZNOVU, a je to nález, ne opomenutí:
   ve zbytku souboru je ta třída obarvená jen uvnitř .profile-detail
   a .emailing-detail (ř. 1303). Na dashboardu, jehož obal je
   .user-sekce.dashboard-detail, by tedy zůstala bez účinku — což se týká
   i user-prazdno.html z D3.                                             */

.dashboard-detail .gray-text {font-size: 16px; color: #637B7C;}

/* --- reaktivační blok nad mřížkou ------------------------------------- */
.userReaktivace {margin: 0 0 26px 0; padding: 20px 24px; background: #FFFFFF;
   border: 1px solid #E4E9E9; border-left: 4px solid #53F8FF; border-radius: 14px;}
.userReaktivaceHotovo {border-left-color: #E4E9E9;}
.userReaktivaceHlavni {margin: 0; font-size: 24px; font-weight: bold; color: #1F3D3E; line-height: 1.2;}
.userReaktivaceDoplnek {margin: 8px 0 0 0;}
.userReaktivaceTlacitka {margin: 16px 0 0 0;}
.userReaktivaceTlacitko {margin: 0 10px 8px 0;}

/* --- sloupcový graf posledních sedmi dnů ------------------------------ */
.userGrafRada {display: flex; align-items: flex-end; justify-content: space-between;
   margin: 0; padding: 0; list-style: none;}
.userGrafSloupec {flex: 1 1 0; min-width: 0; text-align: center;}
.userGrafHodnota {display: block; min-height: 18px; font-size: 13px; color: #1F3D3E;}
/* Pevná výška místa pro pruh — jinak by se sloupce srovnaly podle textu
   a graf by přestal být graf. Pruh roste zdola. */
.userGrafPruhMisto {display: flex; align-items: flex-end; justify-content: center;
   height: 110px; margin: 6px 0 8px 0;}
.userGrafPruh {display: block; width: 62%; min-height: 3px; background: #E4E9E9; border-radius: 6px 6px 0 0;}
.userGrafSloupecPlny .userGrafPruh {background: #53F8FF;}
.userGrafDen {display: block; font-size: 14px; color: #1F3D3E;}
.userGrafSloupecDnes .userGrafDen {font-weight: bold; text-decoration: underline;}
.userGrafPopis {margin: 14px 0 0 0;}

/* --- odznaky série ---------------------------------------------------- */
.userOdznaky {margin: 14px 0 0 0; padding: 0; list-style: none;}
.userOdznak {display: flex; justify-content: space-between; padding: 8px 0;
   border-top: 1px solid #E4E9E9; font-size: 16px;}
.userOdznak:first-child {border-top: 0;}
.userOdznakNazev {color: #1F3D3E;}
/* margin místo flex gap: gap ve flexboxu neumí Safari starší než 14.1
   a rozpad by se projevil až na telefonu, kde se to nezkouší. */
.userOdznakStav {margin-left: 14px; color: #637B7C; white-space: nowrap;}
.userOdznakSplneno .userOdznakNazev {font-weight: bold;}
.userOdznakSplneno .userOdznakStav {color: #1F3D3E; font-weight: bold;}

/* --- těla dlaždic ----------------------------------------------------- */
.userDlazdiceHlavni {margin: 0; font-size: 30px; font-weight: bold; color: #1F3D3E; line-height: 1.15;}
.userDlazdiceDoplnek {margin: 6px 0 0 0;}
.userDlazdiceTrend {margin: 12px 0 0 0; font-size: 16px; color: #1F3D3E;}

/* --- odkaz „zobrazit celou historii" pod mřížkou ---------------------- */
.userSekceVic {margin: 2px 0 0 0; font-size: 17px;}
.userSekceVic a {color: #1F3D3E; text-decoration: underline;}

@media (max-width: 767.98px) {
  .userReaktivace {padding: 16px 18px;}
  .userReaktivaceHlavni {font-size: 20px;}
  .userGrafPruhMisto {height: 84px;}
  .userGrafHodnota {font-size: 12px;}
  .userGrafDen {font-size: 13px;}
  .userDlazdiceHlavni {font-size: 26px;}
}

/* ==========================================================================
   C19 D6 cviky sestavy   (9. 9. 2026)
   ==========================================================================

   Sestavy cviků: tlačítko na veřejných cvicích, /user/cviky/ a veřejná
   sdílená sestava. Blok stojí NA KONCI SOUBORU schválně — souběžně běžela
   dávka D5 v jiném worktree a konec souboru je jediné místo, kde se dvě
   dávky nemůžou přepsat.

   Žádná nová barva. Všechny čtyři jsou z palety, kterou sekce /user/ už
   používá (#1F3D3E, #637B7C, #E4E9E9, #F4F7F7); jediná dopsaná je #8A1F1F
   na rizikové akce, protože pro „smazat" tu dosud nic nebylo.

   Kontrastní poměry (WCAG 2.1, spočítané z hodnot níž, ne odhadnuté):

     #1F3D3E na #FFFFFF   11,70    text, názvy, aktivní tlačítko
     #1F3D3E na #F4F7F7   10,86    tlačítko v klidu
     #FFFFFF na #1F3D3E   11,70    aktivní tlačítko a lišta dole
     #637B7C na #FFFFFF    4,51    doplňkový text (podnázev, stav)
     #8A1F1F na #FFFFFF    9,14    smazat / odebrat

   AA pro běžný text je 4,5 — projde všech pět. Pro srovnání metody:
   `.blueButton` (ř. 169) vychází 10,33 a `.exerciseDetail .shopButton`
   (ř. 257) 3,79, tedy pod AA. To je stav webu, ne tahle dávka; opravovat
   cizí tlačítko v dávce o sestavách by byla změna, kterou nikdo nečeká.
   ========================================================================== */

/* --- tlačítko na veřejných cvicích ------------------------------------- */
/* Ve zdroji je `hidden` a odkrývá ho až sestavy.js — stojí na localStorage,
   takže bez JavaScriptu by nefungovalo. Popisek dodává skript z
   holder.html{,.en,.de}, protože item.html jazykové varianty nemá. */
.sestavyPridatBtn {display: inline-block; margin-top: 6px; padding: 5px 12px;
   border: 1px solid #E4E9E9; border-radius: 5px; background: #F4F7F7;
   color: #1F3D3E; font-size: 14px; line-height: 1.2; cursor: pointer;}
.sestavyPridatBtn:hover {border-color: #1F3D3E;}
.sestavyPridatBtnAktivni {background: #1F3D3E; border-color: #1F3D3E; color: #FFFFFF;}
/* NA DETAILU CVIKU JE TO JEN IKONA (C19 bod 4, Jan 18. 9. 2026: „Budou to
   jen ikony jako v Můj účet > Cviky, kde je symbol plus a ikona bookmarku.
   Obojí se rozbalí název"). Tenhle předpis tedy PŘEPISUJE textovou podobu
   z `.sestavyPridatBtn` výš — rámeček, výplň i vnitřní odsazení jdou pryč.
   Rozměry i barvy jsou schválně TÉŽE míry jako `.sestavyKatalogBtn`
   v katalogu účtu (44 px dotykový cíl, #637B7C / #1F3D3E), aby obě místa
   mluvila jedním jazykem; nová barva nepřibyla.

   `position: relative` je nosné: vysouvaný název `.sestavyKatalogBtnText`
   se polohuje `right: 100%` vůči tlačítku.

   Ikonová podoba se v `sestavy.js` pozná podle vnitřního
   [data-sestava-pridat-text], ne podle téhle třídy — textová větev skriptu
   přepisuje `className` celý a třídu by si smazala. */
.sestavyPridatBtnDetail {position: relative; display: inline-flex; align-items: center;
   justify-content: center; width: 44px; min-height: 44px; margin: 0; padding: 0;
   border: 0; border-radius: 5px; background: none; color: #637B7C; font-size: 18px;
   line-height: 1;}
.sestavyPridatBtnDetail:hover {background: #F2F6F6; color: #1F3D3E;}
.sestavyPridatBtnDetail:focus {outline: 2px solid #53F8FF; outline-offset: -2px;}
/* Zvolený stav: `.sestavyPridatBtnAktivni` výš je plocha tmavě zelené pro
   tlačítko s textem — na ikoně by z ní byl černý čtverec vedle nadpisu.
   Dvě třídy tedy přebíjejí jednu a zůstává jen ztmavení. */
.sestavyPridatBtnDetail.sestavyPridatBtnAktivni {background: #F2F6F6; border: 0; color: #1F3D3E;}

/* Lišta „Ve výběru: N". Vyrábí ji skript a přilepuje ke spodní hraně —
   nahoře je fixní menu a `.appLista` už spodek zabírá jen při `?app=1`,
   takže se nepotkají. */
.sestavaLista {position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
   display: flex; justify-content: center; align-items: center; gap: 0;
   padding: 10px 16px; background: #1F3D3E; color: #FFFFFF; font-size: 15px;}
.sestavaListaText {margin-right: 14px;}
.sestavaListaOdkaz {color: #FFFFFF; text-decoration: underline;}
.sestavaListaOdkaz:hover {color: #FFFFFF;}

/* --- /user/cviky/ ------------------------------------------------------- */
/* Velikost a tučnost dává `.h2title2` z HTML (C19 L1, Jan 9. 9. 2026:
   „nadpisy Moje sestavy atd. — používej styly, které mám na webu"). */
.sestavyNadpis {margin: 0 0 12px 0; color: #1F3D3E;}
.sestavyHlaska {margin: 0 0 14px 0; padding: 10px 14px; border-radius: 5px;
   background: #F4F7F7; color: #1F3D3E; font-size: 16px;}

/* HLAVIČKA PANELU „MOJE SESTAVY“ — nadpis vlevo, popis vpravo (Jan
   12. 9. 2026: „přidat popis o sestavách nahoru doprava").

   Flex se `space-between` a `flex-wrap` dodává `.userSekceHlava` z řádku
   drobečků (ř. ~2516), takže tu žádný nový mechanismus nepřibývá. Odsazení
   pod nadpisem se stěhuje z nadpisu na celou hlavičku: `.sestavyNadpis` má
   `margin-bottom: 12px` a jako pružná položka by o těch 12 px protáhl celý
   řádek, na kterém vedle něj stojí popis.

   Šířka `flex: 0 1 620px` je strop, ne pevná míra — kratší text zabere
   míň a `space-between` ho drží u pravého okraje panelu. `gap` se tu
   použít NESMÍ (Safari pod 14.1 ho ve flexboxu neumí, viz `.sestavySeznamPocet`
   o kus níž), rozestup drží právě `space-between`.

   Barvu a velikost nese `.sestavyKatalogPopis`, tedy TÁŽ třída, jakou má
   popis pod nadpisem katalogu cviků — #637B7C na bílé `.userPanel` je
   4,51:1, tedy AA. Mimo bílou kartu se ta dvojice použít nesmí. */
.sestavySeznamPanelHlava {margin-bottom: 12px;}
.sestavySeznamPanelHlava .sestavyNadpis {margin-bottom: 0;}
.sestavySeznamPopis {flex: 0 1 620px; margin: 0; text-align: right;}
/* Pod 768 px se řádek zalomí a popis stojí SÁM na svém řádku pod nadpisem —
   zarovnání vpravo by tam dělalo z odstavce o třech větách roztřepený blok. */
@media (max-width: 767.98px) {
  .sestavySeznamPopis {flex-basis: 100%; margin-top: 8px; text-align: left;}
}

.sestavySeznamList {margin: 0 0 22px 0; padding: 0; list-style: none;}
.sestavySeznamPolozka {display: flex; justify-content: space-between; align-items: baseline;
   padding: 10px 0; border-top: 1px solid #E4E9E9;}
.sestavySeznamPolozka:first-child {border-top: 0;}
.sestavySeznamOdkaz {color: #1F3D3E;}
.sestavySeznamNazev {font-weight: bold;}
/* margin místo flex gap: gap ve flexboxu neumí Safari starší než 14.1
   a rozpad by se projevil až na telefonu, kde se to nezkouší. */
.sestavySeznamPocet {margin-left: 10px; color: #637B7C; font-size: 15px;}
.sestavaStav {margin-left: 14px; color: #637B7C; font-size: 14px; white-space: nowrap;}
.sestavaStavSdilena {color: #1F3D3E; font-weight: bold;}

.sestavyNova {margin: 0 0 30px 0;}
.sestavyNovaPopis {display: block; margin-bottom: 6px; color: #637B7C; font-size: 15px;}
.sestavyNovaRadek {display: flex; flex-wrap: wrap;}
.sestavyNovaInput {flex: 1 1 220px; margin-right: 10px; padding: 9px 12px;
   border: 1px solid #E4E9E9; border-radius: 5px; color: #1F3D3E; font-size: 16px;}
.sestavyNovaBtn {border: 0; cursor: pointer;}
/* NA TELEFONU SE TA ŘÁDKA ZALOMÍ A BEZ TOHOHLE BLOKU TLAČÍTKO SEDÍ NA VSTUPU.
   Změřeno 11. 9. 2026 v DOMu na skutečných 375 px (iframe, ne `--window-size`):
   v panelu „Moje sestavy" má řádka 285 px, tlačítko 216 px („Založit sestavu")
   resp. 146 px v němčině — zalomí se tedy vždycky a mezera vyšla 0 px.
   **Na 1440 px se NEzalomí** (vstup 817 px a tlačítko 233 px vedle sebe,
   vodorovná mezera 10 px), takže se to nesmí spravit svislým marginem bez
   media query — na desktopu by tlačítko spadlo o 12 px pod vstup, se kterým
   dnes lícuje. Proto jen sem, pod hranici.
   `gap` se nepoužívá schválně (Safari < 14.1 ho ve flexboxu neumí a rozpad
   by se projevil právě na telefonu), `min-height` je týž dotykový práh, jaký
   už mají položky seznamu — `.blueButton` je na mobilu jen 41 px vysoké. */
@media (max-width: 767.98px) {
  .sestavyNovaInput {margin-right: 0;}
  .sestavyNovaBtn {display: flex; width: 100%; min-height: 44px; margin-top: 12px;
     align-items: center; justify-content: center;}
}

/* --- otevřená sestava --------------------------------------------------- */
.sestavaZpet {margin: 0 0 10px 0; font-size: 16px;}
.sestavaZpet a {color: #1F3D3E;}
.sestavaAkce {margin: 0 0 16px 0;}
.sestavaAkceBtn {margin: 0 10px 0 0; padding: 6px 14px; border: 1px solid #E4E9E9;
   border-radius: 5px; background: #FFFFFF; color: #1F3D3E; font-size: 15px; cursor: pointer;}
.sestavaAkceBtn:hover {border-color: #1F3D3E;}
.sestavaAkceBtnRizik {color: #8A1F1F;}
.sestavaAkceBtnRizik:hover {border-color: #8A1F1F;}

.sestavaCviky {margin: 0 0 18px 0; padding: 0; list-style: none;}
.sestavaCvik {display: flex; align-items: center; padding: 10px 0;
   border-top: 1px solid #E4E9E9;}
.sestavaCvik:first-child {border-top: 0;}
/* Úchyt na tažení (C19 bod 13). MUSÍ BÝT VIDĚT A BÝT DOST VELKÝ: tahat se
   dá jen za něj, protože zbytek řádku je odkaz na cvik a „táhni kdekoli"
   by se pletlo s klikem. 24×34 px je nad 24px doporučeným minimem cíle
   a `cursor: grab` říká, že se s tím hýbe, ještě než se to zkusí. */
.sestavaCvikUchyt {flex: 0 0 auto; display: inline-flex; align-items: center;
   justify-content: center; width: 24px; height: 34px; margin-right: 2px;
   color: #96A9AA; font-size: 18px; line-height: 1; cursor: grab;
   -webkit-user-select: none; user-select: none;}
.sestavaCvikUchyt:hover {color: #1F3D3E;}
.sestavaCvikUchyt:active {cursor: grabbing;}
/* Řádek, který se právě táhne. Průhlednost, ne rámeček — řádek se při
   přejezdu přesouvá v DOMu, takže musí být poznat, který z nich je „ten
   v ruce", a přitom se nesmí posunout výška a rozhoupat celý seznam. */
.sestavaCvikTazeny {opacity: 0.45;}
.sestavaCvikPoradi {width: 30px; color: #637B7C; font-size: 15px;}
.sestavaCvikObrazek {flex: 0 0 auto; margin-right: 12px;}
.sestavaCvikObrazek img {border-radius: 5px;}
.sestavaCvikText {flex: 1 1 auto; min-width: 0;}
.sestavaCvikNazev {display: block; color: #1F3D3E; font-weight: bold;}
.sestavaCvikPodnazev {display: block; color: #637B7C; font-size: 15px;}
.sestavaCvikVice {display: inline-block; margin-top: 4px; color: #1F3D3E;
   font-size: 15px; text-decoration: underline;}
.sestavaCvikBtny {flex: 0 0 auto; margin-left: 12px; white-space: nowrap;}
.sestavaCvikApp {margin-right: 10px; color: #1F3D3E; font-size: 14px; text-decoration: underline;}
.sestavaCvikBtn {margin-left: 4px; width: 32px; height: 32px; padding: 0;
   border: 1px solid #E4E9E9; border-radius: 5px; background: #FFFFFF;
   color: #1F3D3E; font-size: 16px; line-height: 1; cursor: pointer;}
.sestavaCvikBtn:hover {border-color: #1F3D3E;}
.sestavaCvikBtnRizik {color: #8A1F1F;}
.sestavaCvikBtnRizik:hover {border-color: #8A1F1F;}

/* Věta o tom, že se sestava do aplikace NEPŘENÁŠÍ. Není to poznámka pod
   čarou, je to jediné místo, kde se to návštěvník dozví — proto stejná
   velikost jako běžný text, ne drobným písmem. */
.sestavaAppPoznamka {margin: 0 0 24px 0; padding: 12px 14px; border-radius: 5px;
   background: #F4F7F7; color: #1F3D3E; font-size: 16px;}

.sestavaSdileni {margin: 0 0 30px 0; padding-top: 16px; border-top: 1px solid #E4E9E9;}
.sestavaSdileniPopis {margin: 0 0 10px 0; color: #637B7C; font-size: 15px;}
.sestavaSdileniAkce {margin: 0 0 10px 0;}
.sestavaSdiletBtn {border: 0; cursor: pointer;}
.sestavaSdileniOdkaz {margin: 0;}
.sestavaSdileniOdkazPopis {display: block; margin-bottom: 4px; color: #637B7C; font-size: 15px;}
.sestavaSdileniInput {width: 100%; padding: 9px 12px; border: 1px solid #E4E9E9;
   border-radius: 5px; background: #F4F7F7; color: #1F3D3E; font-size: 15px;}

/* --- katalog ------------------------------------------------------------ */
.sestavyKatalog {margin-top: 30px; padding-top: 20px; border-top: 1px solid #E4E9E9;}
.sestavyKatalogPopis {margin: 0 0 14px 0; color: #637B7C; font-size: 16px;}
.sestavyKatalogHledat {margin: 0 0 14px 0;}
.sestavyFiltrSkupina {margin: 0 0 10px 0;}
.sestavyFiltrNazev {display: block; margin-bottom: 4px; color: #637B7C; font-size: 14px;}
.sestavyKatalogItem {margin-bottom: 14px;}
.sestavyKatalogKarta {display: flex; align-items: center; height: 100%;
   padding: 10px; border: 1px solid #E4E9E9; border-radius: 5px;}
.sestavyKatalogObrazek {flex: 0 0 auto; margin-right: 10px;}
.sestavyKatalogObrazek img {border-radius: 5px;}
.sestavyKatalogText {flex: 1 1 auto; min-width: 0;}
.sestavyKatalogNazev {display: block; color: #1F3D3E; font-size: 15px; font-weight: bold;}
.sestavyKatalogPodnazev {display: block; color: #637B7C; font-size: 14px;}
/* PRAVÝ SLOUPEC AKCÍ V KARTĚ KATALOGU (Jan 12. 9. 2026: „tlačítko přidej do
   sestavy předělej na ikonu pluska zarovnanou doprava pod ikonu záložky.
   Po najetí se odroluje text Přidat do sestavy. Je tam teď kvůli tomu
   tlačítku hrozně málo místa.").

   ÚČEL JE MÍSTO PRO TEXT CVIKU, ne vzhled tlačítka: tlačítko se slovy bralo
   v kartě ~120 px a podnázev se kvůli tomu lámal do čtyř řádků. Ikona bere
   44 px a stojí ve sloupci pod záložkou, takže se ta šířka vrací textu.

   VYSOUVACÍ POPISEK JE MIMO TOK (`position: absolute`) a je to podmínka,
   ne ozdoba: kdyby rozšiřoval tlačítko, sebral by při najetí zase šířku
   textu a karta by pod myší poskakovala. Vysouvá se doleva přes kartu
   jako bublina.

   NA DOTYKU NENÍ POPISEK JEDINÝ ZDROJ JMÉNA AKCE — to nese `aria-label`
   i `title` na tlačítku, takže čtečka i dlouhý stisk ho mají bez hoveru.
   Vysunutí je proto navíc na `:focus-visible`, aby šlo i z klávesnice.
   Samotný popisek je `aria-hidden`: pro čtečku by to bylo jméno dvakrát.

   44 px je cíl, ne kosmetika — je to ovládání, které se mačká prstem,
   a je to táž míra jako u záložky nad ním. Barvy jsou obě z palety karty
   (#637B7C 4,51:1 na bílé, #1F3D3E 11,70:1), nová nepřibyla. */
.sestavyKatalogAkce {flex: 0 0 auto; display: flex; flex-direction: column;
   align-items: flex-end; margin-left: 8px;}
.sestavyKatalogAkce .sestavyUlozitBtn {margin: 0;}
.sestavyKatalogBtn {position: relative; flex: 0 0 auto; display: flex;
   align-items: center; justify-content: center; width: 44px; min-height: 44px;
   margin: 0; padding: 0; border: 0; border-radius: 5px; background: none;
   color: #637B7C; font-size: 18px; line-height: 1; cursor: pointer;}
.sestavyKatalogBtn:hover {background: #F2F6F6; color: #1F3D3E;}
.sestavyKatalogBtn:focus {outline: 2px solid #53F8FF; outline-offset: -2px;}
.sestavyKatalogBtnText {position: absolute; z-index: 2; right: 100%; top: 50%;
   max-width: 0; overflow: hidden; padding: 0; border-radius: 5px;
   background: #FFFFFF; color: #1F3D3E; font-size: 14px; line-height: 28px;
   white-space: nowrap; opacity: 0; transform: translateY(-50%);
   transition: max-width 0.18s ease, opacity 0.18s ease; pointer-events: none;}
/* Týž popisek nese od 18. 9. 2026 i detail cviku (C19 bod 4) — obě ikony
   u nadpisu h1. Je to ROZŠÍŘENÍ TOHOTO předpisu, ne jeho kopie o dva tisíce
   řádků níž: kdyby vznikl druhý, rozejdou se za první úpravou. */
.sestavyKatalogBtn:hover .sestavyKatalogBtnText,
.sestavyKatalogBtn:focus-visible .sestavyKatalogBtnText,
.sestavyPridatBtnDetail:hover .sestavyKatalogBtnText,
.sestavyPridatBtnDetail:focus-visible .sestavyKatalogBtnText,
.sestavyUlozitBtnDetail:hover .sestavyKatalogBtnText,
.sestavyUlozitBtnDetail:focus-visible .sestavyKatalogBtnText {max-width: 240px;
   padding: 0 10px; opacity: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.12);}

/* --- veřejná sdílená sestava -------------------------------------------- */
/* CELÁ SESTAVA V PANELU (Jan 13. 9. 2026: „tu celou sestavu do panelu").
   Panel je `.userPanel` ze sekce — TÁŽ třída, ne nová: bílá, rámeček
   #E4E9E9, radius 14 px, padding 22/24. Veřejná stránka tím mluví týmž
   jazykem jako sekce, do které z ní vede tlačítko.

   PROČ SE KVŮLI TOMU PŘEPOČÍTALY KONTRASTY. Obsah stránky leží na
   `.mainContent`, tedy na #F3F3F5 (ř. 51), ne na bílé. Do 13. 9. 2026
   na tom šedém podkladu stál i text sestavy:

     #637B7C na #F3F3F5 =  4,07:1   PROPADÁ (AA pro běžný text je 4,5)
     #637B7C na #FFFFFF =  4,51:1   AA

   Přesunem do bílého panelu se tedy sekundární šeď dostala NAD PRÁH,
   aniž se sáhlo na paletu. Bez panelu by se tu muselo použít #5C7273
   (4,61 na #F3F3F5), jako to dělá hlavička sekce — viz ř. 1325.

   CTA JE DRUHÝ BÍLÝ PANEL, ne odstín navíc. Do 13. 9. měl vlastní
   podklad #F4F7F7; ten zmizel proto, že by na stránce byly tři plochy
   (šedá · bílá · zelenkavá) a každá s vlastní tabulkou kontrastů.
   Dva panely pod sebou jsou přesně to, co dělá sekce `/user/`, a
   vystupuje z nich tlačítko — #313131 na #6FF9FF = 10,33:1. */
   MEZERU MEZI PANELY DĚLÁ `.userPanel` SÁM (`margin: 0 0 24px 0`) a
   nepřepisuje se tu. Jakýkoli `margin` napsaný sem by se totiž NEUPLATNIL:
   `.userPanel` stojí v souboru o ~440 řádků NÍŽ a při rovnosti specificity
   (0,1,0) rozhoduje pořadí. Kdo to bude potřebovat změnit, musí psát
   `.userPanel.sestavaVerejnaCta` (0,2,0), jako to dělá `.userPanel.sestavyKatalog`. */
.sestavaVerejna {max-width: 760px; margin: 0 auto; padding: 20px 0 40px 0;}
.sestavaVerejnaNazev {margin-bottom: 4px;}
.sestavaVerejnaPocet {margin: 0 0 14px 0; color: #637B7C; font-size: 16px;}
/* Kdo sdílí. Tmavý text, ne sekundární šeď — je to sdělení, ne popisek,
   a jméno v něm je jediná věc, kterou čtenář o autorovi má.
   #1F3D3E na #FFFFFF = 11,70:1. */
.sestavaVerejnaKdo {margin: 0 0 14px 0; color: #1F3D3E; font-size: 17px;}
.sestavaVerejnaKdoJmeno {font-weight: bold;}
.sestavaVerejnaUvod {margin: 0 0 20px 0; color: #1F3D3E; font-size: 17px;}
.sestavaVerejnaCtaNadpis {margin: 0 0 8px 0; color: #1F3D3E;}
.sestavaVerejnaCtaText {margin: 0 0 16px 0; color: #1F3D3E; font-size: 16px;}
.sestavaVerejnaCtaBtny {margin: 0;}

/* --- potvrzení převzetí sestavy (`…/plany/?prevzit=<token>`) ------------- */
/* Stojí v sekci, takže dědí `.userPanel` beze změny; vlastní jsou jen
   odsazení uvnitř. Tlačítko je `.blueButton`, tedy táž výzva jako na
   veřejné stránce — člověk, který sem přišel kliknutím, musí poznat,
   že dokončuje totéž. */
.sestavaPrevzitNadpis {margin: 0 0 10px 0;}
.sestavaPrevzitPopis {margin: 0 0 18px 0; color: #1F3D3E; font-size: 16px;}
.sestavaPrevzitForm {margin: 0;}
.sestavaPrevzitBtn {border: 0; cursor: pointer;}

@media (max-width: 767.98px) {
  .sestavaCvikBtny {margin-left: 6px;}
  .sestavaCvikApp {display: none;}   /* na telefonu odkaz do appky nahrazuje deeplink z detailu */
  .sestavaLista {font-size: 14px; padding: 8px 12px;}
}

/* HTML5 drag & drop NA DOTYKU NEEXISTUJE — `dragstart` na prstu nevznikne.
   Úchyt se proto na dotykovém zařízení skrývá, aby v řádku nestál ovládací
   prvek, který nic nedělá. Řadit jde dál šipkami, ty zůstávají všude.
   Test je `hover: none` a `pointer: coarse`, NE šířka okna: úzké okno na
   Macu je pořád myš a tažení tam funguje. */
@media (hover: none) and (pointer: coarse) {
  .sestavaCvikUchyt {display: none;}
}

/* ==========================================================================
   C19 L1 — hlavička sekce /user/ v téže stavbě jako zbytek webu (9. 9. 2026)
   ==========================================================================

   Zadal Jan 9. 9. 2026: „drobky jsou moc dole. Udělej to jako na zbytku
   webu", „odhlásit — velmi špatné místo. To bych dal doprava nahoru, někde
   na úrovni drobečků. A s dialogem."

   Blok je NA KONCI SOUBORU schválně, stejně jako D4, D5 i D6 — v jiných
   worktree běží souběžné dávky a konec souboru je jediné místo, kde si
   dvě linky nepřepíšou práci.

   `.userStrana` MÍSTO `.support`. Hlavička sekce má touž stavbu obalů jako
   Podpora, Potíže, O nás a Lidé (`container-fluid p-0 … maDrobecky` >
   `container-fluid whiteFade` > `container`), ale NENESE fotku: `.support`
   má fixní fotku v `:after` a sdílet ji by znamenalo, že výměna fotky na
   Podpoře tiše změní i sekci účtu — týž důvod, pro který má vlastní `url()`
   Předplatné i Potíže.

   PLOCHA HLAVIČKY JE #F3F3F5, TEDY BARVA OBSAHU (`.mainContent`, ř. 51).
   Je to jediná varianta bez viditelné hrany: bílý pás nad šedým obsahem by
   na styku dal ostrý předěl, a `whiteFade` (přechod do bílé) tu nemá přes co
   přecházet, protože pod ním není fotka — proto se vypíná.

   KONTRAST SPOČÍTÁN Z HODNOT (WCAG 2.1, relativní jas), ne odhadnut ze
   snímku. Práh AA pro běžný text je 4,5:1:

     #1F3D3E na #F3F3F5 = 10,56:1   AAA   nadpis, aktivní tab
     #313131 na #F3F3F5 = 11,74:1   AAA   drobečky (`.whiteFade .podcastDrobky`)
     #637B7C na #F3F3F5 =  4,07:1   PROPADÁ
     #5C7273 na #F3F3F5 =  4,61:1   AA

   Pozor na past v posledním řádku: `.podcastDrobky` má vlastní barvu
   #778C8D, která by na #F3F3F5 dala 3,20 a propadla by. Nedopadne to tak
   jedině proto, že `.whiteFade .podcastDrobky` (ř. ~1028) ji přebíjí na
   #313131 — a `whiteFade` v téhle hlavičce je. Kdo ten mezikrok z obalu
   vypustí, shodí drobečkům kontrast pod práh, aniž by sáhl na barvu.

   Předposlední řádek je celý důvod, proč tenhle blok přebarvuje taby, šipku
   a odhlášení. Sekundární šeď z D3 (#637B7C) sedí na BÍLÉ na 4,51, tedy
   s rezervou 0,01 — jakmile se pod ni dá tónovaná plocha hlavičky, spadne
   pod práh. #5C7273 už v paletě je (zavedla ho D5 pro pozadí #F7FAFA),
   takže nová barva nepřibyla ani jedna. Na snímku obrazovky vypadají obě
   dvojice stejně; poznat se to dá jedině výpočtem.
   ========================================================================== */

.userStrana {background: #F3F3F5;}
/* `padding-top` přebíjí `.maDrobecky .whiteFade` na 80 px (ř. ~1038) —
   tedy přesně tam, kde drobečky sedí na zbytku webu. Změřeno v DOMu:
   /cz/potize/ má drobečky na y=80, sekce účtu měla do 9. 9. y=96. */
.userStrana .whiteFade {margin: 0; padding: 140px 0 0 0; background: none;}
/* Velikost zrcadlí `.support .whiteFade h1` (ř. ~314), tedy 48 px jako
   všude jinde; na mobilu ji sráží `.h2titleMobile40` z HTML na 40 px.
   `padding-bottom: 0` přebíjí `.maDrobecky .whiteFade h1` (40 px) —
   pod nadpisem tu nejsou odstavce, ale taby. */
.userStrana .whiteFade h1 {margin: 0; padding: 0; font-size: 48px;}
/* Spodní hranou hlavičky je linka pod taby, ne mezera pod nimi. */
.userStrana .userNav {margin-bottom: 0;}
.userStrana .userNavTab, .userStrana .userNavSipka, .userStrana .userSekceOdhlasit,
.userStrana .userSekceIdentita {color: #5C7273;}
.userStrana .userNavTab:hover, .userStrana .userNavTab:focus,
.userStrana .userSekceOdhlasit:hover, .userStrana .userSekceOdhlasit:focus {color: #1F3D3E;}

/* --- řádek drobečků: vlevo cesta, vpravo odhlášení --------------------- */
/* `flex-wrap` je nutný, ne kosmetika: na úzkém okně se drobečky sekce
   („Spiralista › Můj účet › Předplatné") k odhlášení na jeden řádek
   nevejdou a bez zalomení by jedno z toho přeteklo z containeru. */
.userSekceHlava {display: flex; flex-wrap: wrap; align-items: baseline;
   justify-content: space-between;}
/* Patička sekce už není patička — v hlavičce nesmí mít ani odsazení
   shora, ani linku nad sebou. Selektor má o třídu víc než `.userSekcePata`
   (ř. ~1968), takže se ten původní zápis nemusí měnit a zůstane platný
   pro obal, který by odhlášení chtěl vykreslit dole. */
.userSekceHlava .userSekcePata {margin: 0; padding: 0; border-top: 0; text-align: right;}
/* „Přihlášeni jako <e-mail>" NAD odhlášením, ne vedle: e-mail je dlouhý
   a v jednom řádku s drobečky by na úzkém okně přetekl z containeru —
   táž věc, kvůli které má `.userSekceHlava` `flex-wrap`. Odstavec musí mít
   `margin: 0`, jinak bootstrapí `p {margin-bottom: 1rem}` odsune odhlášení
   o 16 px dolů a rozhodí zarovnání na `baseline` s drobečky.
   14 px je jediná velikost pod 16 px v celé sekci a je to záměr: je to
   údaj, který se čte jednou (kterým účtem jsem), ne obsah stránky.
   Kontrast `#5C7273` na `#F3F3F5` je 4,61:1, tedy AA i na nejtmavším
   pozadí, které pod hlavičkou může být. */
.userSekceIdentita {margin: 0; font-size: 14px; line-height: 20px; word-break: break-all;}
/* Na telefonu jde blok pod drobečky doleva (viz `@media` níž), takže
   zarovnání vpravo tam nemá co dělat. */

/* --- potvrzovací dialog odhlášení -------------------------------------- */
/* Vizuál je bootstrapí modal, který web už má: `.modal-backdrop` se tu bílí
   na 80 % (ř. ~1453) a `.modal-body` má text na střed a 18 px (ř. ~1455).
   Odtud jen rámeček v barvě linek a rozestupy tlačítek — žádný nový
   mechanismus a žádná nová barva. */
.userOdhlaseniModal .modal-content {border: 1px solid #E4E9E9; border-radius: 14px;}
.userOdhlaseniOtazka {margin: 0 0 18px 0; color: #1F3D3E;}
.userOdhlaseniAkce {margin: 0;}
.userOdhlaseniPotvrdit {margin: 0 10px 8px 0;}
/* Zrušení je zdrženlivější než potvrzení schválně: dialog se ptá na akci,
   kterou návštěvník sám vyvolal, takže zvýrazňovat „zůstat" nemá co. */
.userOdhlaseniZrusit {margin: 0 0 8px 0; padding: 10px 24px; border: 1px solid #E4E9E9;
   border-radius: 5px; background: #FFFFFF; color: #1F3D3E; font-size: 16px; cursor: pointer;}
.userOdhlaseniZrusit:hover, .userOdhlaseniZrusit:focus {border-color: #1F3D3E;}

@media (max-width: 767.98px) {
  /* Na telefonu se drobečky a odhlášení nevejdou vedle sebe; zalomí se
     a odhlášení jde pod ně doleva, aby nezůstalo viset u pravé hrany. */
  .userSekceHlava {display: block;}
  .userSekceHlava .userSekcePata {margin: 0 0 14px 0; text-align: left;}
  /* `display: flex` místo `block` a `min-height` kvůli dotykovému prahu:
     `.blueButton` má pod 768 px písmo 14 px a padding 10 px, takže
     „Odhlásit se" vycházelo 325 × 41 px — změřeno 11. 9. 2026 v DOMu na
     skutečných 375 px. Na 1440 px je to tlačítko 44 px vysoké už dnes,
     proto se to řeší jen tady a `.blueButton` samotné se NEMĚNÍ: tu třídu
     nese 105 výskytů v 52 souborech a tři další tlačítka se na její
     rozměry dotahují (`.outlineBtn`, `.shopButton`), takže zvednutí výšky
     v ř. 169 by rozladilo dvojice tlačítek napříč celým webem.
     „Zůstat přihlášeni" má 46 px a hodnotou se nemění, jen se zarovná
     stejně. */
  .userOdhlaseniPotvrdit, .userOdhlaseniZrusit {display: flex; width: 100%;
     min-height: 44px; margin: 0 0 10px 0; align-items: center; justify-content: center;}
}

/* ==========================================================================
   C19 L2 dashboard   (9. 9. 2026)
   ==========================================================================

   Zpětná vazba Jana 9. 9. 2026 k `/user/`: prázdné sloupce grafu musí být
   vidět, statistiky ze screenshotu appky, koláčové grafy, stav „nemá
   předplatné" a odkaz na sdílení. Blok stojí NA KONCI SOUBORU schválně —
   běží víc dávek naráz a konec je jediné místo, kde si dvě linky nepřepíšou
   práci.

   ANI JEDNA NOVÁ BARVA PRO TEXT. Všechno, co se čte, je #1F3D3E (11,70:1
   na bílé, 11,15:1 na #F7FAFA) nebo #5C7273 (5,11:1 na bílé) — obojí už
   v sekci je a obojí je spočítané podle WCAG z hodnot barev, ne odhadnuté
   ze snímku. POZOR, aby se nepřenášelo špatné číslo: 4,61:1 je kontrast
   #5C7273 na TÓNOVANÉM pásu hlavičky z L1, ne na bílé kartě. #637B7C
   se tu záměrně NEPOUŽÍVÁ nikde jinde než přes `.gray-text` na 16 px:
   má na bílé 4,51:1, tedy rezervu 0,01, a menší písmo nebo tónovaný
   podklad ho shodí pod práh.

   NOVÉ JSOU JEN VÝPLNĚ, KTERÉ NENESOU TEXT: #F7FAFA a #F0F4F4 (koleje
   pod pruhy) a #A6E9EC / #8AA5A6 / #C3D3D4 (díly koláče a pruh minulého
   období). U výplně bez textu nerozhoduje kontrast textu, ale to, že
   informaci nese vždycky ještě slovo vedle ní — viz níž.

   BARVA NIKDE NENESE INFORMACI SAMA, a je to u koláče podstatnější než
   u čehokoli předtím: ke každému dílu patří řádek legendy s názvem,
   počtem i procenty, a pro odečítač je celý graf jediný obrázek s popisem.
   Kdo barvy nerozliší nebo komu nedojde CSS, přečte úplně totéž.

   ========================================================================== */

/* --- sloupcový graf: PRÁZDNÝ SLOUPEC JE SLOUPEC ------------------------ */
/* Zadal Jan: „I pokud je nula, musí tam být vidět s prázdnými sloupci."
   Do L2 měl den bez cvičení výšku 0 a v řadě po něm nezbylo nic. Teď má
   každý den světlou KOLEJ přes celou výšku — pruh do ní roste zdola,
   takže nulový den je prázdná kolej, ne díra. Kolej drží i šířku, takže
   se řada nerozjede.
   `.userGrafPruhMisto` je od L2 ta kolej (D4 to byla jen neviditelná
   plocha), proto se tu přebíjí šířka jak jí, tak pruhu v ní. */
.userGrafPruhMisto {width: 62%; margin: 6px auto 8px auto;
   background: #F7FAFA; border: 1px solid #E4E9E9; border-radius: 6px;}
.userGrafPruh {width: 100%;}
/* Nulový den: kolej zůstane, výplň ne. `min-height` z D4 se musí vypnout,
   jinak by tři pixely tvrdily, že se ten den cvičilo. */
.userGrafSloupecPrazdny .userGrafPruh {min-height: 0; background: none;}

/* --- tři okna grafu v jedné dlaždici (dávka B, 9. 9. 2026) ------------- */
/* Zadal Jan: „Graf - přepínání 7/14/měsíc by mělo být jen přes .js, ať
   nenačítáme celou stránku." Do stránky proto jdou všechna tři okna
   naráz a skryje je ATRIBUT `hidden`, ne třída — platí tedy i bez CSS.

   PRAVIDLO NÍŽ TU PŘESTO MUSÍ BÝT. `.userGrafOkno` je `div`, tedy
   `display: block` z prohlížeče, a kdyby na něj kdokoli (bootstrap,
   pozdější dávka) postavil vlastní `display`, přebilo by to výchozí
   `[hidden] {display: none}` prohlížeče a ukázala by se všechna tři
   okna pod sebou. Selektor má proto třídu i atribut (0,2,0). */
.userGrafOkno[hidden] {display: none;}

/* --- bublina s hodnotou sloupce (Jan 11. 9. 2026) ---------------------- */
/* „Přehled > Bar graf : sloupce musí uvádět hodnoty po najetí myši."

   Text bubliny je TENTÝŽ řetězec jako skrytý popis pro odečítač (skládá
   ho `dashGrafOkno()`), takže se ty dva nemůžou rozejít. V šabloně má
   `aria-hidden`, aby ho odečítač nečetl dvakrát.

   TŘI SPOUŠTĚČE, PROTOŽE `:hover` SÁM NA DOTYKU NENASTANE:
     `:hover`                       myš,
     `:focus` / `:focus-within`     klávesnice (`li` má `tabindex="0"`),
     `.userGrafSloupecBublina`      klik i tap, přepíná `user-graf.js`.

   `position: relative` na sloupci je KOTVA bubliny a stojí schválně
   tady, ne v původním pravidle `.userGrafSloupec` o ~430 řádků výš:
   obě pravidla mají specificitu (0,1,0), takže se slučují a žádná
   deklarace původního se nepřebíjí. Kdo ten řádek smaže, poskládá
   bubliny k levému okraji dlaždice, ne nad sloupce.

   `z-index` proti sousedním sloupcům: bez něj překryje bublinu pruh
   následujícího sloupce, který je v pořadí dokumentu později. */
.userGrafSloupec {position: relative;}
.userGrafBublina {position: absolute; bottom: 100%; left: 50%; margin-bottom: 6px;
   transform: translateX(-50%); z-index: 6; display: none;
   min-width: 108px; max-width: 210px; padding: 7px 10px;
   font-size: 12px; line-height: 1.35; text-align: center; white-space: normal;
   color: #FFFFFF; background: #1F3D3E; border-radius: 8px;
   box-shadow: 0 2px 10px rgba(31, 61, 62, 0.25); pointer-events: none;}
.userGrafSloupec:hover > .userGrafBublina,
.userGrafSloupec:focus > .userGrafBublina,
.userGrafSloupec:focus-within > .userGrafBublina,
.userGrafSloupecBublina > .userGrafBublina {display: block;}

/* KAŽDÝ ÚDAJ NA VLASTNÍ ŘÁDEK (Jan 12. 9. 2026: „bubble je ok, ale
   informace datum, délka tréninku a počet odděl novým řádkem").
   `display: block` na `span`, ne `<br>` v PHP: zalomení je úprava, ne
   obsah, a `sr-only` popis téhož sloupce musí zůstat jednou větou.
   Řádky skládá `dashGrafOkno()`; kdo tuhle deklaraci smaže, slije je
   zpátky do jednoho řádku, aniž by sáhl na PHP. */
.userGrafBublinaRadek {display: block;}

/* KRAJNÍ SLOUPCE: zarovnat k hraně, ne na střed. Které sloupce to jsou,
   rozhoduje PHP (`userGrafSloupecKrajVlevo`/`…Vpravo`, šestina řady na
   každou stranu) — v okně o 30 sloupcích je sloupec 37 px a bublina
   210 px, takže `:first-child` v CSS by pokryl jen jeden z pěti. */
.userGrafSloupecKrajVlevo > .userGrafBublina {left: 0; transform: none;}
.userGrafSloupecKrajVpravo > .userGrafBublina {left: auto; right: 0; transform: none;}

/* Sloupec je od 11. 9. 2026 v tab orderu (`tabindex="0"`), takže MUSÍ
   být vidět, kde stojí fokus — jinak se klávesnicí prochází graf
   naslepo. `outline` s odstupem, ne `border`: border by sloupec o 2 px
   rozšířil a řada by se při procházení posouvala.

   JEN PRO KLÁVESNICI, NE PRO MYŠ (Jan 12. 9. 2026: „při kliku na bar se
   udělá černý rámeček, to je asi omyl ne?"). Byl to tenhle outline:
   `tabindex="0"` znamená, že klik myší prvku dá fokus, a `:focus` platí
   bez ohledu na to, čím fokus vznikl. Rámeček tedy nebyl omyl, ale
   projevil se tam, kde ho nikdo nepotřebuje.

   TŘI PRAVIDLA, NE JEDNO, A JE TO ZÁMĚR. Prohlížeč, který `:focus-visible`
   nezná, zahodí OBĚ pravidla s ním (neplatný selektor ruší celé pravidlo)
   a zůstane mu první — tedy dnešní chování, ne graf bez fokusu. Kdo to
   slije do jediného `:focus-visible`, vezme starým prohlížečům klávesovou
   dostupnost, kterou sem přidal `a788c945`.

   BUBLINU TO NEOVLIVNÍ — ta visí dál na `:focus` / `:focus-within`
   (o pár řádků výš), takže klik myší ji ukáže jako dosud. */
.userGrafSloupec:focus {outline: 2px solid #1F3D3E; outline-offset: 2px;}
.userGrafSloupec:focus:not(:focus-visible) {outline: none;}
.userGrafSloupec:focus-visible {outline: 2px solid #1F3D3E; outline-offset: 2px;}

/* HUSTÉ OKNO = MĚSÍC (30 sloupců). Hodnota nad pruhem se schová, protože
   na 37 px šířky (1110 / 30) se „12 min" nevejde a sloupce by se
   rozjely. Neztrácí se tím nic: úplný popis včetně délky a data má každý
   sloupec dál v `sr-only`, tedy pro odečítač i pro hledání textu ve
   stránce. Skrývá se `display: none`, ne `visibility` — `min-height:18px`
   z D4 by jinak nechal nad grafem 18 px prázdna. */
.userGrafOknoHuste .userGrafHodnota {display: none;}
/* Pruh je v hustém okně širší podíl sloupce, aby třicet čárek po 62 %
   nevypadalo jako rastr; mezera mezi nimi zůstává jediné, co je od sebe
   odlišuje. Popisek je menší, protože jich je vidět pět a od 11. 9. 2026
   nesou datum („11. 9."), ne zkratku dne ani holé číslo — pevné pásmo
   a `nowrap` k tomu dodává blok „C19 — přehled" na konci souboru. */
.userGrafOknoHuste .userGrafPruhMisto {width: 74%;}
.userGrafOknoHuste .userGrafDen {font-size: 12px;}

/* --- přepínač okna grafu (7 / 14 / měsíc) ------------------------------ */
/* Odkazy, ne skript — viz `dashGrafPrepinac()`. Klik odchytí
   `design/base/js/user-graf.js` a stránku nenačte; bez JavaScriptu
   zůstane odkaz odkazem. Aktivní volbu odlišuje tučnost a rámeček,
   ne barva samotná. */
/* SELEKTOR MÁ O TŘÍDU VÍC, NEŽ BY POTŘEBOVAL, A JE TO NUTNÉ:
   `.mainContent a {color: black}` na ř. 53 má váhu 0,1,1, takže by
   `.userGrafVolba` (0,1,0) přebilo. Změřeno v DOMu 9. 9. 2026 — první
   verze tohohle bloku vykreslila volby ČERNĚ, i když v souboru stálo
   #5C7273. Táž past, na jakou v D4 narazila `.gray-text`. */
.userGrafPrepinac {margin: 0 0 12px 0; text-align: right;}
.userGraf .userGrafVolba {display: inline-block; margin: 0 0 6px 8px; padding: 3px 14px;
   border: 1px solid #E4E9E9; border-radius: 999px;
   color: #5C7273; font-size: 16px; line-height: 1.5;}
.userGraf .userGrafVolba:hover, .userGraf .userGrafVolba:focus {color: #1F3D3E; border-color: #1F3D3E; text-decoration: none;}
.userGraf .userGrafVolbaAktivni {color: #1F3D3E; font-weight: bold; border-color: #1F3D3E; background: #F7FAFA;}

/* --- koláčové grafy ---------------------------------------------------- */
/* Čistě SVG, žádná knihovna. Poloměr 15.91549431 dává obvod přesně 100,
   takže `stroke-dasharray` je rovnou v procentech a v prohlížeči se nic
   nepočítá. Bez CSS zůstane čitelná legenda — to je schválně, stejně jako
   u sloupcového grafu. */
.userKolac {display: flex; flex-wrap: wrap; align-items: center; margin: 4px 0 0 0;}
/* Start dílů na dvanácté hodině dělá `stroke-dashoffset` (25 minus už
   vykreslené procento), NE `transform` — otáčení v CSS by se rozešlo
   s výpočtem v PHP a graf by se bez stylů rozsypal do jiného pořadí. */
.userKolacPlatno {flex: 0 0 128px; width: 128px; height: 128px; margin: 0 22px 12px 0;}
.userKolacKolej {fill: none; stroke: #F0F4F4; stroke-width: 5;}
.userKolacDil {fill: none; stroke-width: 5;}
/* Otvor uprostřed je světlý kruh, ne díra — díra by na jiném podkladu
   prosvítala jinou barvou než na bílé kartě. */
.userKolacStred {fill: #FFFFFF;}
.userKolacLegenda {flex: 1 1 200px; min-width: 0; margin: 0; padding: 0; list-style: none;}
.userKolacPolozka {display: flex; align-items: baseline; padding: 6px 0;
   font-size: 16px; border-top: 1px solid #E4E9E9;}
.userKolacPolozka:first-child {border-top: 0;}
/* Čtvereček má vlastní obrys, aby světlý díl (#E4E9E9) nezmizel na bílé.
   Nic tím nesděluje — je to jen ukazatel k řádku, který informaci nese. */
.userKolacBarva {flex: 0 0 12px; width: 12px; height: 12px; margin: 0 10px 0 0;
   border: 1px solid #C3D3D4; border-radius: 3px;}
/* Název sestavy je cizí text z aplikace a může být libovolně dlouhý —
   ořízne se, ať legenda nerozhodí kartu. Ořez je jen vizuální: v DOMu
   zůstává celý, takže odečítač i vyhledávání textu na stránce ho mají. */
.userKolacPopis {flex: 1 1 auto; min-width: 0; color: #1F3D3E;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.userKolacHodnota {flex: 0 0 auto; margin: 0 0 0 12px; color: #5C7273; white-space: nowrap;}
.userKolacPoznamka {margin: 14px 0 0 0;}

/* --- dva pruhy „tohle a minule" na dlaždicích s čísly ------------------ */
/* Jan: „Je to takové nudné." Pruhy jsou obrázek k číslům, která na
   dlaždici stojí textem nad nimi i pod nimi — samy nic nesdělují, a proto
   jsou pro odečítač schované. Šířka je poměr k většímu z obou, ne měřítko. */
.userDlazdiceObdobi {margin: 2px 0 0 0;}
.userPorovnani {margin: 12px 0 0 0;}
.userPorovnaniKolej {display: block; height: 8px; margin: 0 0 5px 0;
   background: #F0F4F4; border-radius: 4px; overflow: hidden;}
.userPorovnaniPruh {display: block; height: 100%; border-radius: 4px;}
.userPorovnaniTed {background: #1F3D3E;}
.userPorovnaniMinule {background: #C3D3D4;}

/* --- předplatné: stav „nemá" musí být vidět ---------------------------- */
/* Zadal Jan: „Tam by mělo být určitě vidět, že uživatel nemá předplatné."
   Akcentní pruh je týž jazyk, jakým se odlišuje reaktivační blok nahoře —
   a stejně jako tam nenese informaci: co je zač, říká věta uvnitř. */
.userPredplatneVyzva {padding: 0 0 0 14px; border-left: 4px solid #53F8FF;}

@media (max-width: 767.98px) {
  /* Na telefonu se koláč a legenda vedle sebe nevejdou — koláč jde nad
     legendu a zmenší se, aby karta nebyla vyšší než obrazovka. */
  .userKolac {display: block;}
  .userKolacPlatno {width: 108px; height: 108px; margin: 0 auto 12px auto; display: block;}
  .userGrafPrepinac {text-align: left;}
  /* SELEKTOR MUSÍ MÍT TU TŘÍDU NAVÍC I TADY. Media query specificitu
     NEZVYŠUJE, takže `.userGrafVolba` (0,1,0) by proti `.userGraf
     .userGrafVolba` (0,2,0) o 70 řádků výš prohrálo a margin by se
     na telefonu neotočil. WIP `e63bea11` zvýšil specificitu jen
     u základních pravidel a tenhle přebíječ nechal krátký. */
  .userGraf .userGrafVolba {margin: 0 8px 6px 0;}
  /* Husté okno (měsíc) má na telefonu ~11 px na sloupec. Popisek nese
     jen číslo dne a je jen u každého pátého (viz `dashGrafOkno()`),
     takže se dvě číslice do té šířky vejdou — ale jen při 11 px.
     SPECIFICITA JE STEJNÁ (0,2,0) JAKO U PRAVIDLA VÝŠ, ne nižší:
     media query specificitu nezvyšuje, takže o výsledku rozhoduje
     pořadí v souboru a tenhle blok je až za ním. */
  .userGrafOknoHuste .userGrafDen {font-size: 11px;}
}

/* ==========================================================================
   C19 L3 profil cviky emailing (9. 9. 2026)
   ==========================================================================

   Blok je NA KONCI SOUBORU schválně, stejně jako D4, D5, D6, L1 a L2 —
   v jiných worktree běží souběžné dávky a konec souboru je jediné místo,
   kde si dvě linky nepřepíšou práci. Že to samo o sobě NESTAČÍ, se ukázalo
   právě tady: L2 i L3 psaly „na konec" a git z toho udělal konflikt, který
   se musel rozhodnout ručně. Pořadí je L2, pak L3, protože pravidlo
   `.row > .user-sekce` níž platí i pro dashboard a má vyhrát.

   --------------------------------------------------------------------------
   1) ŠÍŘKA OBSAHU SEKCE — proč byl profil i cviky „širší než content"
   --------------------------------------------------------------------------

   Reklamoval Jan 9. 9. 2026 dvakrát: „zase rozjebaný layout. Širší než
   content" (profil) a „cviky - tam je to taky rozjebané, je to širší než
   content".

   ZMĚŘENO V DOMu na produkci (`/cz/usertest/account/` a `/cz/usertest/cviky/`,
   viewport 1440), ne odhadnuto z CSS:

     hlavička sekce (h1, drobečky, taby)   left=165  right=1275   w=1110
     `/cz/potize/` a zbytek webu           left=165  right=1275   w=1110
     .row.userMrizka (profil)              left=135  right=1305   w=1170   <-
     .row.sestavyKatalogMrizka (cviky)     left=135  right=1305   w=1170   <-
     .sestavySeznam, .sestavyKatalog       left=150  right=1290   w=1140   <-

   PŘÍČINA NENÍ V CSS SEKCE, ALE V OBSAHU KATEGORIE. `migrace/147` vkládá
   výstup metody jako `<div class="row justify-content-center">{profil}</div>`.
   `.row` má v Bootstrapu 4 `margin: 0 -15px`, takže obsah sekce začíná
   o 15 px VEDLE obsahové plochy `.container` — a `.row` uvnitř sekce
   (mřížka dlaždic, mřížka katalogu) k tomu přidá dalších 15 px.
   Kořen je tedy jeden a týká se všech podstránek naráz: výstup sekce visí
   v `.row` a NENÍ přitom `col-*`, takže mu chybí těch 15 px odsazení,
   které do gridu patří.

   OPRAVA JE PROTO JEDNA A OBECNÁ, ne dvě per stránka: `.user-sekce` uvnitř
   `.row` se chová jako `col-12`. Tím jeho obsahová plocha sedne přesně na
   `.container` (165…1275) a vnitřní `.row` se chová jako kdekoli jinde na
   webu — vysune se o 15 px a sloupec si je vrátí paddingem, takže bílá
   karta zase sedne na 165…1275.

   ZAVRŽENO: přepsat `cat_text` migrací na `<div class="row"><div class="col-12">`.
   Je to týž výsledek, ale je to 21 řádků `cat_data` v ladicím stromě
   a dalších 12 v ostré sekci (migrace 143–145, cizí dávky) — tedy oprava,
   která se musí udělat na každé nové stránce znovu a na jedné se zapomene.
   Selektor `.row > .user-sekce` platí i pro stránky, které teprve vzniknou.

   ZAVRŽENO taky: `margin: 0` na vnitřních `.row`. Srovnalo by to okraje,
   ale rozbilo by to rozestupy mezi sloupci uvnitř mřížky — a chyba by
   nebyla vidět na dvou sloupcích, jen na čtyřech. */

.row > .user-sekce {flex: 0 0 100%; max-width: 100%; padding-left: 15px; padding-right: 15px;}

/* --------------------------------------------------------------------------
   2) BÍLÝ PANEL JAKO SAMOSTATNÝ BLOK
   --------------------------------------------------------------------------

   Zadal Jan 9. 9. 2026: „katalog cviků by taky mohl být v bílém panelu."

   Je to ZÁMĚRNĚ táž karta jako `.userDlazdice` (ř. ~1966) — stejná barva,
   rámeček i rádius — jen bez `height: 100%`, protože nestojí ve sloupci
   mřížky, ale sama v proudu stránky. Druhý vzhled bílé plochy by znamenal,
   že se sekce začne rozcházet sama se sebou. */

.userPanel {margin: 0 0 24px 0; padding: 22px 24px; background: #FFFFFF;
   border: 1px solid #E4E9E9; border-radius: 14px;}
/* Katalog měl do 9. 9. 2026 nad sebou linku a odsazení, kterými se odděloval
   od seznamu sestav. Ve vlastním panelu je oddělovačem mezera mezi panely
   a linka uvnitř karty by vypadala jako začátek další sekce. */
.userPanel.sestavyKatalog {margin-top: 0; padding-top: 22px; border-top: 1px solid #E4E9E9;}

/* PANEL, KTERÝ JE SÁM `.user-sekce` — a je to celý rozdíl proti katalogu.

   Zadal Jan 9. 9. 2026: „Emailing taky do panelu" a „ty panely jsou širší
   než content. Vše by to mělo lícovat s logem."

   Katalog i seznam sestav jsou VNITŘNÍ div uvnitř `.user-sekce`, takže jejich
   karta dědí obsahovou plochu 165…1275 a s logem lícuje sama. Emailing má
   jeden jediný obal (`#emailingBox`), který je zároveň `.user-sekce` — a tomu
   pravidlo výš dává padding 15 px, takže by VIDITELNÁ hrana karty (border-box)
   ležela na 150…1290, tedy o 15 px vedle loga. Přesně to „širší než content".

   ZMĚŘENO V DOMu na produkci při šířce 1440, ne odhadnuto:

     logo (.navbar-brand img)              left=165
     .userSekceHlava (nadpis, drobečky)    left=165  right=1275
     #emailingBox PŘED opravou             left=340  right=1100   w=760  <-
     .mainContent .container (border-box)  left=150  right=1290

   Emailing tedy nebyl širší, ale UŽŠÍ a mimo osu: `col-md-10 col-lg-8`
   v `.row justify-content-center` z něj dělal centrovaný sloupec na 760 px.
   Odsazení proto nese MARGIN, ne padding — padding by kartu roztáhl na 150.

   SPECIFICITA JE ZÁMĚRNĚ O TŘÍDU VYŠŠÍ: `.row > .user-sekce` má váhu 0,2,0,
   takže samotné `.userPanel` (0,1,0) by padding nepřebilo a spoléhat na
   pořadí v souboru je past (viz `.userGrafVolba` v bloku L2 výš).

   A `flex-basis` SE MUSÍ ZMENŠIT O TY MARGINY, jinak je celé pravidlo
   k ničemu. Změřeno na produkci 9. 9. 2026, když první verze měla jen
   marginy: `.row > .user-sekce` dává `flex: 0 0 100%`, tedy border-box
   1140 px, a k tomu 2×15 px marginu = 1170 px v 1140 px širokém `.row`.
   Rodič má z `migrace/150` `justify-content-center`, takže se přetečení
   rozdělí na obě strany po 15 px — a karta skončila zpátky na 150…1290,
   jako by tam margin vůbec nebyl. `calc(100% - 30px)` dá 1110 + 30 = 1140,
   volné místo je nulové, centrování nemá co posouvat a hrana sedne na
   165…1275, tedy na logo. */

.row > .user-sekce.userPanel {flex: 0 0 calc(100% - 30px);
   margin-left: 15px; margin-right: 15px; padding: 22px 24px;}

/* --------------------------------------------------------------------------
   2b) RÁM PANELU, KTERÝ ČEKÁ NA IDENTITU (14. 9. 2026)
   --------------------------------------------------------------------------

   Jan 14. 9. 2026: „Nejdřív načti panel se sestavou, až potom načti identitu
   (pokud je available) a v panelu bude náš loading až do načtení."

   ŽÁDNÁ NOVÁ KARTA. Obal je `.user-sekce` > `.userPanel`, tedy táž dvojice
   jako u katalogu cviků a seznamu sestav — bílá, #E4E9E9, radius 14 a
   margin 24 px pod sebou. Tady se dopisuje jedině to, co hotová karta
   nepotřebuje: výška, vystředění a přepínání tří stavů.

   PŘEPÍNÁ SE TŘÍDOU NA <html>, A JE TO CELÁ OBRANA PROTI VISÍCÍMU LOADINGU.
   `auth.js` ji přidává z hlavičky dokumentu, tedy dřív, než panel vůbec
   vznikne — proto nic neproblikne. A protože ji přidává SKRIPT, je výchozím
   stavem (mrtvý nebo zakešovaný JS) „nepřihlášeno" s odkazem na přihlášení,
   ne točící se kolečko. Táž mechanika jako `.userAppkaQrJS` u QR popupu
   a `.userVolbyKaruselJS` u karuselu: skript přidá třídu a teprve ta zapne
   novou mechaniku.

   MINIMÁLNÍ VÝŠKA JE CELÝ SMYSL RÁMU. Bez ní má plocha nula pixelů, patička
   vyskočí pod hlavičku a po doplnění obsahu spadne zpátky — přesně to, co
   Jan popsal jako „prázdnou stránku". Přesnou výšku hotového panelu předem
   nikdo nezná (detail sestavy má dnes 15 kB a pokaždé jinak), takže se
   nesjednocuje výška, ale odstraňuje se nula.                              */

.userCekaniPanel {min-height: 360px; display: flex; flex-direction: column;
   align-items: center; justify-content: center; text-align: center;}
.userCekaniStav {display: none; max-width: 440px;}
.userCekaniNeprihlasen {display: block;}
html.userIdentitaCeka .userCekaniNeprihlasen {display: none;}
html.userIdentitaCeka .userCekaniNacita {display: block;}
html.userIdentitaChyba .userCekaniNeprihlasen {display: none;}
html.userIdentitaChyba .userCekaniNacita {display: none;}
html.userIdentitaChyba .userCekaniChyba {display: block;}

/* `.loader` je 4 px tečka, jejíž kruh kreslí sedm `box-shadow` do vzdálenosti
   22 px + 6 px rozostření — potřebuje tedy kolem sebe ~28 px na každou
   stranu. Obal je proto 64 px vysoký a středí flexem; `.loadingContainer`
   z původního profilu se nebere, ta je `position: absolute` uvnitř plochy
   s pevnou výškou 500 px a panel by povyrostl o půl obrazovky.              */
.userCekaniIkona {height: 64px; display: flex; align-items: center;
   justify-content: center; margin: 0 auto 14px auto;}

/* #1F3D3E na #FFFFFF = 11,697 : 1. U textu loadingu #637B7C = 4,512 : 1 —
   to je jen o setiny nad prahem, takže pozadí karty musí zůstat bílé.
   Specificita 0,2,0 schválně: přebíjí `.gray-text` ze šablony, aby barva
   nezávisela na tom, která obecná třída stojí v souboru níž.                */
.userCekaniText {margin: 0; font-size: 16px; color: #1F3D3E;}
.userCekaniNacita .userCekaniText {color: #637B7C;}
.userCekaniAkce {margin: 16px 0 0 0;}
/* ODKAZ NEMÁ VLASTNÍ BARVU, A JE TO ZMĚŘENÉ ROZHODNUTÍ, NE OPOMENUTÍ.
   První verze mu dávala #1F3D3E a v DOMu vyšlo #000000: `.mainContent a
   {color: black}` má specificitu 0,1,1 a samotné `.userCekaniOdkaz`
   (0,1,0) prohraje. Přebít by to šlo (`.mainContent .userCekaniOdkaz`),
   ale nemá se — černá je na tomhle webu barva odkazu v obsahu, kontrast
   na bílé kartě je 21 : 1 a druhá barva odkazu by ze sekce udělala dvě.
   Zůstává jedině podtržení: `a {text-decoration: none}` z bootstrapu je
   0,0,1, takže tahle třída ho přebije bez dalšího zvyšování váhy.       */
.userCekaniOdkaz {text-decoration: underline;}

/* --------------------------------------------------------------------------
   3) VODOROVNÁ LIŠTA FILTRŮ
   --------------------------------------------------------------------------

   Zadal Jan 9. 9. 2026: „filtr v horizontální liště vedle vyhledávání -
   tam budou jen nadpisy s rozbalovacíma selectama."

   PŘESTAVĚNO 10. 9. 2026 (C19 bod 5): „Filtr opravdu jen pruh - parametry
   jen jako text k rozkliknutí (něco jako h1) v jednom řádku s vyhledáváním."
   Selecty jsou pryč. Skupina je nadpisový TEXT a pod ním rozbalovací seznam
   tlačítek — táž stavba i táž mechanika jako `h1` sekce v bloku „SEKCE
   /user/" výš, protože Jan sám říká „něco jako h1". Kdo tady bude něco
   měnit, ať se podívá i tam; jsou to schválně dvě podoby jedné věci a
   rozejít by se neměly.

   `flex-wrap` je nutný, ne kosmetika: skupin je pět a s hledáním je to šest
   polí, která se na jeden řádek nevejdou ani na širokém okně. Bez zalomení
   by poslední prvek přetekl z panelu.

   `gap` se nepoužívá schválně — neumí ho Safari starší než 14.1 a rozpad
   by se projevil až na telefonu, kde se to nezkouší. Táž volba jako
   u `.sestavySeznamPocet` (ř. ~2227).

   ZAROVNÁNÍ JE `center`, NE `flex-end`. Do 10. 9. 2026 tu bylo `flex-end`,
   protože nad každým selectem stál popisek a pole měla různou výšku. Text
   k rozkliknutí popisek nemá, takže by `flex-end` posadil názvy na spodní
   hranu vedle 40px vysokého hledání a pruh by se rozpadl. */

.sestavyLista {display: flex; flex-wrap: wrap; align-items: center;
   margin: 0 -6px 18px -6px;}
.sestavyListaPole {flex: 1 1 170px; min-width: 0; margin: 0 6px 10px 6px;}
.sestavyListaHledani {flex: 1 1 240px;}
.sestavyHledatInput {display: block; width: 100%;
   padding: 9px 12px; border: 1px solid #E4E9E9; border-radius: 5px;
   background: #FFFFFF; color: #1F3D3E; font-size: 16px;}
/* SKUPINA SE NEROZTAHUJE. `.sestavyListaPole` má `flex: 1 1 170px`, což
   u selectu bylo správně (pole stejně široká), ale text k rozkliknutí musí
   být široký jako to slovo — jinak by mezi názvy zůstaly mezery, které
   nikdo nevysvětlí, a pruh by přestal vypadat jako řádek nadpisů. */
.sestavyFiltrSkupina {position: relative; flex: 0 0 auto; margin-bottom: 0;}
/* Popisek nad hledáním je pro čtečku; vedle placeholderu by byl dvakrát
   totéž. Vizuálně se tedy skryje, ale NE přes display:none — to by ho
   čtečka nepřečetla a `<label for>` by ztratil smysl. */
.sestavyListaHledani .sestavyFiltrNazev {position: absolute; width: 1px; height: 1px;
   margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;}

/* --------------------------------------------------------------------------
   3b) SKUPINA FILTRU JAKO ROZKLIKÁVACÍ TEXT  (C19 bod 5, 10. 9. 2026)
   --------------------------------------------------------------------------

   BARVY JSOU JEN Z PALETY, kterou web má: #1F3D3E (text, `.lideDlazdiceJmeno`),
   #637B7C (šedý doprovod, `.lideProfilRole`), #E4E9E9 (linky, `.ctaLista`),
   #F2F6F6 (hover v seznamu, `.userNavPolozka a:hover`) a #53F8FF (akcent,
   `.blueButton`). Spočítané kontrasty proti #FFFFFF: #1F3D3E 11,70:1,
   #637B7C 4,51:1. #637B7C se proto NESMÍ položit na #F2F6F6 (vyjde 4,14
   a propadne AA) — v otevřeném seznamu je hover text vždy #1F3D3E,
   stejně jako v navigaci sekce.

   VELIKOST CÍLE JE 44 px, ne kosmetika: prvek NENÍ `<select>`, takže na
   telefonu nedostane nativní kolo a prstem se do něj musí dát klepnout.
   `min-height: 44px` je proto na tlačítku názvu i na každé hodnotě.

   DVĚ MECHANIKY OTEVÍRÁNÍ, KTERÉ SE NESMÍ POTKAT — táž věc jako
   u `.userNavSelect` výš. Bez skriptu otevírá seznam `:focus-within`;
   se skriptem přidá `sestavy.js` třídu `sestavyFiltrJS` a rozhoduje
   `sestavyFiltrOtevreno`. Kdyby platily obě, kliknutí by seznam otevřelo
   fokusem a toggle by ho hned zavřel — nešel by otevřít vůbec.        */

.sestavyFiltrToggle {display: inline-block; max-width: 100%; min-height: 44px;
   margin: 0; padding: 8px 2px; border: 0; background: none; color: #1F3D3E;
   font-family: inherit; font-size: 18px; font-weight: bold; line-height: 1.5;
   text-align: left; cursor: pointer;}
.sestavyFiltrToggle:focus {outline: 2px solid #53F8FF; outline-offset: 2px;}
/* Vybraná hodnota za názvem. Dvojtečku dodává CSS, aby v `sestavy.js`
   nebyla interpunkce, kterou by chtěl někdo překládat; `:not(:empty)`
   je nutné, jinak by dvojtečka svítila i u skupiny bez výběru. */
.sestavyFiltrVybrano {font-weight: normal;}
.sestavyFiltrVybrano:not(:empty)::before {content: ": ";}
.sestavyFiltrToggleAktivni {box-shadow: inset 0 -3px 0 #53F8FF;}
.sestavyFiltrSipka {display: inline-block; margin-left: 8px; font-size: 0.7em;
   font-weight: normal; vertical-align: middle; color: #637B7C;}

.sestavyFiltrHodnoty {display: none; position: absolute; z-index: 1020;
   left: 0; top: 100%; min-width: 220px; max-width: 320px; max-height: 60vh;
   overflow-y: auto; margin: 4px 0 0 0; padding: 6px 0; background: #FFFFFF;
   border: 1px solid #E4E9E9; border-radius: 10px;
   box-shadow: 0 6px 20px rgba(0,0,0,0.12);}
/* Překlopení k pravé hraně, když by seznam vyjel z okna. Rozhoduje o tom
   `sestavy.js` (srovnejSeznam) MĚŘENÍM, protože „skupina je vpravo" se
   selektorem popsat nedá a skupin je dynamicky kolik. */
.sestavyFiltrHodnotyVpravo {left: auto; right: 0;}
.sestavyFiltrSkupina:focus-within .sestavyFiltrHodnoty {display: block;}
.sestavyFiltrSkupina.sestavyFiltrJS:focus-within .sestavyFiltrHodnoty {display: none;}
.sestavyFiltrSkupina.sestavyFiltrJS.sestavyFiltrOtevreno .sestavyFiltrHodnoty {display: block;}

.sestavyFiltrHodnota {display: block; width: 100%; min-height: 44px; margin: 0;
   padding: 11px 20px; border: 0; background: none; color: #1F3D3E;
   font-family: inherit; font-size: 16px; font-weight: normal; line-height: 1.375;
   text-align: left; cursor: pointer;}
.sestavyFiltrHodnota:hover, .sestavyFiltrHodnota:focus {background: #F2F6F6;
   color: #1F3D3E; text-decoration: none;}
.sestavyFiltrHodnota:focus {outline: 2px solid #53F8FF; outline-offset: -2px;}
.sestavyFiltrHodnota[aria-pressed="true"] {font-weight: bold;}

/* --------------------------------------------------------------------------
   3c) ZÁLOŽKA U CVIKU A FILTR „ULOŽENÉ"  (C19 bod 10, 12. 9. 2026)
   --------------------------------------------------------------------------

   Zadal Jan 12. 9. 2026: „přidej ikonu záložky do přehledu i detailu cviku.
   Filtr Oblíbené by mohl být v řádku, ale právě navíc s ikonou záložky."

   ŽÁDNÁ NOVÁ BARVA. Neuložená záložka je #637B7C (týž šedý doprovod jako
   `.sestavyKatalogPodnazev`, spočítaný kontrast na bílé 4,51:1), uložená
   #1F3D3E (11,70:1) — tedy tytéž dvě hodnoty, které tenhle blok používá
   o dvacet řádků výš. Rozdíl stavů nese hlavně ŘEZ IKONY (`far` obrys /
   `fas` plná), ne barva: barvou samotnou by se to nesmělo rozlišovat,
   protože pro barvoslepého by to byl týž prvek. Pro čtečku je stav
   v `aria-pressed`.

   VELIKOST CÍLE 44 px, ne kosmetika — je to jediné ovládání u položky
   katalogu, které se mačká prstem, a ikona sama má 16 px.

   FILTR JE TÝŽ PRVEK JAKO SKUPINA, jen bez seznamu: dědí
   `.sestavyFiltrToggle` (18 px, bold, 44 px cíl), takže v pruhu sedí
   na stejné účaří jako „Zaměření" a spol. Zapnutý stav ukazuje TOUŽ
   linkou `inset 0 -3px 0 #53F8FF`, jakou má aktivní skupina — kdyby měl
   vlastní, byly by v jednom řádku dvě řeči o jedné věci.        */

.sestavyUlozitBtn {flex: 0 0 auto; display: inline-flex; align-items: center;
   justify-content: center; width: 44px; min-height: 44px; margin: 0 -8px 0 0;
   padding: 0; border: 0; background: none; color: #637B7C; font-size: 16px;
   line-height: 1; cursor: pointer;}
.sestavyUlozitBtn:hover {color: #1F3D3E;}
.sestavyUlozitBtn:focus {outline: 2px solid #53F8FF; outline-offset: -2px;}
.sestavyUlozitBtn[aria-pressed="true"] {color: #1F3D3E;}
/* Na veřejném detailu cviku stojí záložka od 18. 9. 2026 u nadpisu h1
   (C19 bod 4), ne v řadě s tlačítky akcí — proto 44 px jako v katalogu
   účtu a bez záporného odsazení, kterým se v kartě dorovnává padding.
   `position: relative` kvůli vysouvanému názvu (`.sestavyKatalogBtnText`),
   který Jan chtěl u OBOU ikon, ne jen u „+". */
.sestavyUlozitBtnDetail {position: relative; width: 44px; min-height: 44px;
   margin: 0; border-radius: 5px; font-size: 18px; vertical-align: middle;}
.sestavyUlozitBtnDetail:hover {background: #F2F6F6; color: #1F3D3E;}

.sestavyListaUlozene {flex: 0 0 auto;}
.sestavyFiltrUlozene {display: inline-flex; align-items: center;}
.sestavyFiltrUlozene i {margin-right: 8px; font-size: 0.9em; color: #637B7C;}
.sestavyFiltrUlozene[aria-pressed="true"] {box-shadow: inset 0 -3px 0 #53F8FF;}
.sestavyFiltrUlozene[aria-pressed="true"] i {color: #1F3D3E;}
/* Počet uložených za názvem. Šedý a lehčí, aby se nečetl jako součást
   názvu filtru; `:not(:empty)` kvůli závorkám, které dodává CSS ze
   stejného důvodu jako dvojtečku u `.sestavyFiltrVybrano` — interpunkce
   v JavaScriptu by byla věc k překládání. */
.sestavyFiltrUlozenePocet {margin-left: 6px; color: #637B7C; font-weight: normal;}
.sestavyFiltrUlozenePocet:not(:empty)::before {content: "(";}
.sestavyFiltrUlozenePocet:not(:empty)::after {content: ")";}

/* PŘEPÍNAČ „VŠE | ULOŽENÉ" V ŘÁDKU NADPISU (Jan 12. 9. 2026: „filtr těch
   uložených dej odděleně úplně nahoru na úroveň nadpisu. Při zapnutí bude
   ikona plná a vedle bude přepínač Vše.").

   Řádek skládá `.userSekceHlava` (flex, space-between, flex-wrap) — TÁŽ
   třída jako u řádku drobečků a u hlavičky panelu Moje sestavy, takže
   žádný nový mechanismus. Přibývá jen přenos odsazení z nadpisu na celý
   řádek: `.sestavyNadpis` má `margin-bottom: 12px` a jako pružná položka
   by o těch 12 px protáhl řádek, na kterém vedle něj stojí přepínač.
   `gap` se použít NESMÍ (Safari pod 14.1 ho ve flexboxu neumí), rozestup
   dvojice drží `margin-left` druhého tlačítka.

   ŽÁDNÁ NOVÁ BARVA A ŽÁDNÝ NOVÝ ZNAK AKTIVITY: obě tlačítka dědí
   `.sestavyFiltrToggle` (18 px, bold, cíl 44 px) a zapnuté nese TOUŽ linku
   `inset 0 -3px 0 #53F8FF`, jakou má aktivní skupina filtrů o kus výš.
   Stav se nerozlišuje barvou — vedle té linky ho nese ŘEZ IKONY
   (`far` obrys / `fas` plná) a pro čtečku `aria-pressed`.

   Pod 768 px se `.userSekceHlava` mění na `display: block`, takže dvojice
   stojí sama na řádku pod nadpisem. Je to záměr: dvě tlačítka se 44px cílem
   se vedle nadpisu na telefon nevejdou a zalomila by se uprostřed. */
.sestavyKatalogHlava {margin-bottom: 12px;}
.sestavyKatalogHlava .sestavyNadpis {margin-bottom: 0;}
.sestavyKatalogPrepinac {display: inline-flex; align-items: center;}
.sestavyKatalogPrepinac .sestavyKatalogPrepinacBtn + .sestavyKatalogPrepinacBtn {margin-left: 18px;}
.sestavyKatalogPrepinac .sestavyKatalogPrepinacBtn[aria-pressed="true"] {box-shadow: inset 0 -3px 0 #53F8FF;}

/* Vymazání celého filtru. Obal nese `hidden`, dokud není co mazat — tedy
   i bez JavaScriptu, kde se filtrovat nedá vůbec. 16 px je dolní hranice,
   pod kterou #637B7C s kontrastem 4,51:1 nesmí jít. */
.sestavyListaReset {flex: 0 0 auto;}
.sestavyFiltrReset {min-height: 44px; margin: 0; padding: 8px 4px; border: 0;
   background: none; color: #637B7C; font-family: inherit; font-size: 16px;
   text-align: left; text-decoration: underline; cursor: pointer;}
.sestavyFiltrReset:hover, .sestavyFiltrReset:focus {color: #1F3D3E;}
.sestavyFiltrReset:focus {outline: 2px solid #53F8FF; outline-offset: 2px;}

@media (max-width: 767.98px) {
  /* Na telefonu se pruh láme a seznam nesmí přetéct z okna. `max-width`
     počítá s 15px paddingem panelu na každé straně a 6px okrajem pole. */
  .sestavyFiltrHodnoty {min-width: 200px; max-width: calc(100vw - 60px);}
  .sestavyFiltrToggle {font-size: 17px;}
}

/* --------------------------------------------------------------------------
   3c) PRÁZDNÝ STAV KATALOGU  (11. 9. 2026)
   --------------------------------------------------------------------------
   Od chvíle, kdy je katalog na tabu Cviky jediný obsah, je nula nalezených
   cviků celá prázdná stránka. Prvek je ve zdroji `hidden` a odkrývá ho
   `sestavy.js`; vlastní barvu nemá, text nese `.userSekcePrazdno`. */
.sestavyKatalogPrazdno {margin: 10px 0 0 0;}
.sestavyKatalogPrazdno .userSekcePrazdno {margin: 0;}

/* --------------------------------------------------------------------------
   3d) SESTAVA V PANELU „MOJE SESTAVY" — ROZKLIKÁVACÍ  (Janův bod 7)
   --------------------------------------------------------------------------

   Mechanika je TÁŽ jako u skupin filtrů o kus výš a jako u `h1` sekce:
   `<button aria-expanded>` a seznam, který se bez skriptu otevře přes
   `:focus-within`. DVĚ MECHANIKY SE NESMÍ POTKAT — `sestavy.js` přidá
   obalu `sestavySeznamJS` a od té chvíle rozhoduje `sestavySeznamOtevreno`;
   kdyby platily obě, kliknutí by seznam otevřelo fokusem a toggle by ho
   hned zavřel, tedy by nešel otevřít vůbec.

   ROZDÍL PROTI FILTRŮM: seznam NENÍ absolutně pozicovaný a otevřených smí
   být víc naráz. Teče v proudu panelu pod svým řádkem, takže se nic
   nepřekrývá — a porovnat dvě sestavy vedle sebe je přesně to, kvůli čemu
   se rozklikávají.

   Barvy jsou z téže palety: #1F3D3E (11,70:1 na bílé), #637B7C (4,51:1 na
   bílé — a jedině na bílé), #E4E9E9 linky, #53F8FF fokus. Panel je
   `.userPanel`, tedy #FFFFFF, takže #637B7C tu platí.

   Cíl 44 px na tlačítku i na odkazu „Otevřít": prvek nedostane nativní
   chování, takže prstem se do něj musí dát klepnout. */

/* `.sestavySeznamPolozka` je jinak `display: flex` s `space-between`;
   u rozklikávací položky by to postavilo rozbalený seznam VEDLE hlavičky. */
.sestavySeznamRozbalovaci {display: block;}
.sestavySeznamHlava {display: flex; flex-wrap: wrap; align-items: baseline;}
.sestavySeznamToggle {flex: 1 1 auto; min-width: 0; min-height: 44px; margin: 0;
   padding: 6px 0; border: 0; background: none; color: #1F3D3E;
   font-family: inherit; font-size: 17px; line-height: 1.5;
   text-align: left; cursor: pointer;}
.sestavySeznamToggle:focus {outline: 2px solid #53F8FF; outline-offset: 2px;}
.sestavySeznamToggle .sestavySeznamNazev {font-weight: bold;}
.sestavySeznamSipka {display: inline-block; margin-left: 8px; font-size: 0.7em;
   vertical-align: middle; color: #637B7C;}
/* Odkaz na detail je záměrně druhá, nenápadnější akce: rozkliknutí je
   náhled a udělá se častěji než úprava. */
.sestavySeznamOdkaz {flex: 0 0 auto; min-height: 44px; margin-left: 14px;
   padding: 11px 0; color: #1F3D3E; font-size: 15px; text-decoration: underline;}
.sestavySeznamOdkaz:hover, .sestavySeznamOdkaz:focus {color: #1F3D3E;}

.sestavySeznamCviky {display: none; margin: 0 0 10px 0; padding: 8px 0 4px 0;
   border-top: 1px solid #E4E9E9;}
.sestavySeznamRozbalovaci:focus-within .sestavySeznamCviky {display: block;}
.sestavySeznamRozbalovaci.sestavySeznamJS:focus-within .sestavySeznamCviky {display: none;}
.sestavySeznamRozbalovaci.sestavySeznamJS.sestavySeznamOtevreno .sestavySeznamCviky {display: block;}

.sestavySeznamCvik {padding: 5px 0;}
.sestavySeznamCvikPoradi {display: inline-block; min-width: 26px; color: #637B7C;
   font-size: 15px;}
.sestavySeznamCvikNazev {color: #1F3D3E; font-size: 15px;}
.sestavySeznamCviky .userSekcePrazdno {margin: 0;}

/* --------------------------------------------------------------------------
   3e) PANEL VOLBY „PŘIDAT DO SESTAVY"  (Jan 11. 9. 2026)
   --------------------------------------------------------------------------

   Vizuál je bootstrapí `.modal`, který web už má — týž jako potvrzovací
   dialog odhlášení (`.userOdhlaseniModal`, ř. ~2503): `.modal-backdrop`
   se na tomhle webu bílí na 80 %, `.modal-body` má text na střed.
   Odsud jen rámeček v barvě linek, zarovnání seznamu doleva a rozestupy.
   Žádná nová barva a žádný nový mechanismus.

   Seznam sestav je zarovnaný VLEVO, i když `.modal-body` centruje: jsou to
   volby k přečtení, ne jedna věta. Tlačítko `.userOdhlaseniZrusit` se
   půjčuje z dialogu odhlášení, aby nevznikl druhý vzhled téhož. */
/* ZAVŘENÝ STAV SE NESMÍ OPÍRAT O CIZÍ SOUBOR. `display: none` na `.modal`
   dodává bootstrap.min.css, jenže ten se na stránku dostává přes obal
   (`usertest.html`) a otevírání panelu má vlastní ústup pro případ, že
   bootstrap chybí. Kdyby chyběl i jeho styl, ležel by panel volby na
   stránce rozbalený pořád. Zopakováno tedy tady, se stejnou specificitou;
   otevření (bootstrapí i ústupové) nastavuje `display` přímo na prvku,
   takže tohle pravidlo nepřebije.
   `overflow-y` je tu ze stejného důvodu: rolování otevřeného modalu dodává
   bootstrap pravidlem `.modal-open .modal`, a třídu `modal-open` sází na
   `body` až bootstrapí JS. V ústupové větvi (bez bootstrapu) tedy zůstane
   `.modal {overflow: hidden}` a dialog vyšší než okno se nedá dorolovat —
   „Zrušit" i pole na název skončí pod hranou bez cesty k nim. Změřeno
   11. 9. 2026: při 375 px má dialog se čtyřmi sestavami 884 px. */
.sestavaVolbaModal {display: none; overflow-y: auto;}
.sestavaVolbaModal .modal-content {border: 1px solid #E4E9E9; border-radius: 14px;}
.sestavaVolbaNadpis {margin: 0 0 8px 0; color: #1F3D3E;}
.sestavaVolbaPopis {margin: 0 0 14px 0; color: #637B7C; font-size: 15px;}
/* Kód přidávaného cviku. Tučně, aby bylo poznat, o čem se rozhoduje. */
.sestavaVolbaCvik {color: #1F3D3E; font-weight: bold;}
.sestavaVolbaSeznam {margin: 0 0 18px 0; padding: 0; list-style: none; text-align: left;}
/* SPODNÍ MEZERA PRÁZDNÉHO SEZNAMU NENÍ ZBYTEČNÁ — NESAHAT.
   Bez sestav je `ul` vysoký 0 px a zbude po něm jen těch 18 px marginu.
   Vypadá to jako mezera po ničem, jenže odděluje hlášku „zatím žádná
   sestava" od linky nad polem na název přesně tak, jako v neprázdném
   stavu odděluje poslední položku. Změřeno 11. 9. 2026: s `:empty
   {margin: 0}` klesne ta mezera na 0 px a hláška se dotkne linky.
   Vyzkoušeno a zavrženo. */
.sestavaVolbaPolozka {border-top: 1px solid #E4E9E9;}
.sestavaVolbaPolozka:first-child {border-top: 0;}
.sestavaVolbaBtn {display: block; width: 100%; min-height: 44px; margin: 0;
   padding: 11px 12px; border: 0; border-radius: 5px; background: none;
   color: #1F3D3E; font-family: inherit; font-size: 16px; line-height: 1.375;
   text-align: left; cursor: pointer;}
.sestavaVolbaBtn:hover, .sestavaVolbaBtn:focus {background: #F2F6F6; color: #1F3D3E;}
/* Počet cviků je sekundární šeď #637B7C, a ta má na bílé 4,51:1, ale na
   hoveru #F2F6F6 jen 4,14:1 — tedy pod prahem. Pravidlo „#637B7C se nesmí
   položit na #F2F6F6" stojí v hlavičce bloku C19 L1 a tenhle panel ho
   porušoval. Na hoveru proto tmavší #5C7273 (4,65:1), tedy táž barva,
   jakou už na tonovaném pozadí používá pás hlavičky sekce. */
.sestavaVolbaBtn:hover .sestavySeznamPocet,
.sestavaVolbaBtn:focus .sestavySeznamPocet {color: #5C7273;}
.sestavaVolbaBtn:focus {outline: 2px solid #53F8FF; outline-offset: -2px;}
.sestavaVolbaNazev {font-weight: bold;}
.sestavaVolbaNova {margin: 0 0 18px 0; padding-top: 14px;
   border-top: 1px solid #E4E9E9; text-align: left;}
/* VSTUP A TLAČÍTKO SE V DIALOGU DO JEDNÉ ŘÁDKY NEVEJDOU NIKDY, takže
   `.sestavyNovaRadek` je tu vždycky zalomený — a zalomený flex bez svislé
   mezery znamená tlačítko nalepené na vstup. Změřeno 11. 9. 2026 v DOMu:
   375 px → vstup 315 px a tlačítko 219 px pod ním na mezeru 0; 1440 px →
   vstup 456 px a tlačítko 236 px pod ním, taky na 0. Platí to i pro
   němčinu (tlačítko 297 px). Nejde tedy o mobilní výjimku, ale o tvar
   panelu, a mezera se proto řeší tady, ne v media query.
   `gap` se nepoužívá schválně — Safari starší než 14.1 ho ve flexboxu
   neumí a rozpad by se projevil právě na telefonu; drží to margin.
   Tlačítko přes celou šířku sedí se vstupem, s popiskem i se „Zrušit"
   (všechno 325 px na mobilu) a `min-height` je táž hodnota, jakou už mají
   položky seznamu a potvrzení plánu — na mobilu je `.blueButton` jen
   41 px vysoké, tedy pod dotykovým prahem. */
.sestavaVolbaNova .sestavyNovaInput {margin-right: 0;}
.sestavaVolbaNova .sestavyNovaBtn {display: flex; width: 100%; min-height: 44px;
   margin-top: 12px; align-items: center; justify-content: center;}
.sestavaVolbaAkce {margin: 0;}

/* --------------------------------------------------------------------------
   3f) VNADIDLO NA VEŘEJNÉM KATALOGU CVIKŮ  (Jan 11. 9. 2026)
   --------------------------------------------------------------------------

   Dialog, který nepřihlášenému řekne, co s vybraným cvikem bude, a nabídne
   přihlášení. Vzhled si CELÝ půjčuje od panelu volby výš (`.sestavaVolbaModal`,
   `…Nadpis`, `…Popis`, `…Cvik`, `…Akce`) a tlačítka od dialogu odhlášení —
   nová je jedině tahle dvojice pravidel, a obě řeší jen rozestup a dotykový
   práh. Žádná nová barva: `.blueButton` je #313131 na #6FF9FF (10,33:1),
   „pokračovat" #1F3D3E na bílé (11,70:1), nadpis 11,70:1 a popis
   #637B7C na bílé 4,51:1 — tedy tytéž hodnoty, jaké má panel volby.

   MOBILNÍ PRAVIDLO NENÍ VÝJIMKA, JE TO TÝŽ DŮVOD JAKO U ODHLÁŠENÍ (ř. ~2536):
   `.blueButton` má pod 768 px písmo 14 px a padding 10 px, takže vychází
   41 px vysoké — pod dotykovým prahem. Zvedá se proto tady na 44, a ne
   v ř. 169: tu třídu nese přes sto výskytů a změna výšky by rozladila
   dvojice tlačítek napříč webem. */
.sestavaVnadidloAkce .blueButton {margin: 0 10px 8px 0;}
@media (max-width: 767.98px) {
  .sestavaVnadidloAkce .blueButton {display: flex; width: 100%; min-height: 44px;
     margin: 0 0 10px 0; align-items: center; justify-content: center;}
}

/* --------------------------------------------------------------------------
   4) PROFIL — editovatelná pole, tlačítko a štítek „čeká na přenos"
   --------------------------------------------------------------------------

   Štítek je tam proto, že uložení NENÍ okamžité: web plní frontu
   `fb_profil_zmeny` a kolega ji přenáší do Firebase. Barva je proto
   upozorňovací, ne úspěšná — „zelené uloženo" by tvrdilo něco, co ještě
   neplatí. #8A5A00 má na #FFFFFF 5,26:1, tedy AA i pro 14 px. */

/* POHLAVÍ. Od 11. 9. 2026 je to `.selectContainer` z registračního
   formuláře (ř. 95–102), tedy nativní select ostylovaný do podoby `.inp`.
   Vlastní třídy `.userProfilSelectPopis` a `.userProfilSelect` tím
   zanikly — rozměry, rámeček i šipku dodává ten sdílený blok a opisovat
   je sem by znamenalo druhý vzhled téhož pole.

   DOLAĎUJE SE JEN POPISEK, a je to nutné, ne kosmetika: globální
   `.selectContainer .label2` nemá `transform-origin`, takže se `scale(.75)`
   počítá kolem STŘEDU a vodorovná poloha popisku závisí na délce jeho
   textu (proto je tam `left: -4px` a proto má `.OS` vlastní hodnotu).
   U krátkého „Pohlaví" by popisek sedl o zhruba 11 px vlevo proti
   sousedním polím. Předpis níž je přesně ten, jaký má `.inp .label` ve
   vysunutém stavu (ř. 79 a 81): origin 0 0, `left: 25px`, posun −12 px.

   Odstup pod polem je 15 px jako u `.inp` (ř. 78), ne 20 px jako
   u samostatně stojícího selectu — v mřížce profilu by jinak řádek
   s pohlavím odskakoval od řádku s věkem. */
.userProfilPole .selectContainer select {margin-bottom: 15px;}
.userProfilPole .selectContainer .label2 {left: 25px;
   -webkit-transform-origin: 0 0; transform-origin: 0 0;
   -webkit-transform: translate3d(0, -12px, 0) scale(0.75);
   transform: translate3d(0, -12px, 0) scale(0.75);}

@media (max-width: 767.98px) {
  /* Mobilní protějšek. `.inp .label` má pod 768 px `top: 17px; left: 15px`
     a posun −9 px (ř. 1522 a 1524), kdežto `.selectContainer .label2` má
     `top: 14px; left: -5px` (ř. 1533). Bez tohohle bloku by popisek
     selectu seděl o 3 px výš než u sousedních polí. */
  .userProfilPole .selectContainer .label2 {top: 17px; left: 15px;
     -webkit-transform: translate3d(0, -9px, 0) scale(0.75);
     transform: translate3d(0, -9px, 0) scale(0.75);}
}

.userProfilCeka {display: block; margin: 4px 0 0 0; color: #8A5A00; font-size: 13px;}
.userProfilAkce {margin: 18px 0 0 0;}
.userProfilUlozit {border: 0; cursor: pointer;}
.userProfilPoznamka {margin: 14px 0 0 0; font-size: 15px;}

/* ==========================================================================
   C19 D treninky sestavy
   ==========================================================================

   Tři věci Janova zadání z 9. 9. 2026: převod sestavy na ruční plán,
   záložka Tréninky a QR pro desktop.

   ŽÁDNÁ NOVÁ KARTA. Dlaždice tréninku je `.userDlazdice` z D3 a detail
   sedí v `.userPanel` — druhý vizuální jazyk by ze sekce udělal dvě sekce.
   Tenhle blok proto řeší jen obsah karet: obrázek 16:9, přehrávač a QR.

   BARVY JSOU POČÍTANÉ PROTI TOMU, NA ČEM LEŽÍ, ne proti bílé „nějak".
   Dlaždice i panel mají `background: #FFFFFF` (ř. 1966 a 2641), takže:
     #637B7C na #FFFFFF = 4,51:1  → AA pro běžný text (rezerva 0,01)
     #8A5A00 na #FFFFFF = 5,93:1  → AA i pro 14 px (týž odstín jako
                                    `.userProfilCeka`, a ze stejného
                                    důvodu: „čeká na přenos" NENÍ úspěch)

   Poznámka k té druhé hodnotě: komentář u `.userProfilCeka` (ř. ~2735)
   u téhož odstínu tvrdí 5,26:1. Přepočítáno 9. 9. 2026 podle WCAG 2.1
   (relativní luminance, ne rozdíl jasu) vychází 5,93:1 na #FFFFFF
   a 5,35:1 na #F3F3F5. Nižší číslo tam nikomu neškodí (práh je 4,5),
   ale opisovat se nemá — proto je tady spočítané.

   Na `#F3F3F5` (`.mainContent`) by #637B7C spadlo na 4,07:1, tedy pod
   práh — proto se tyhle třídy nesmí použít mimo bílou kartu. */

/* --- ze sestavy ruční plán ------------------------------------------------
   Blok stojí mezi poznámkou o aplikaci a sdílením, tedy uvnitř bílého
   `.userPanel` detailu sestavy. Oddělovací linka je táž jako u sdílení
   (#E4E9E9), aby detail nezískal třetí druh oddělovače. */
.sestavaPlan {margin: 0 0 30px 0; padding-top: 16px; border-top: 1px solid #E4E9E9;}
.sestavaPlanPopis {margin: 0 0 10px 0; color: #1F3D3E; font-size: 16px;}
.sestavaPlanAkce {margin: 0 0 10px 0;}
.sestavaPlanBtn {border: 0; cursor: pointer;}
/* `disabled` nastavuje skript po úspěchu — druhá kopie je legitimní, ale
   dvojklik nemá vyrobit dva stejné plány. Bez `cursor` a se sníženou
   sytostí, ať je to vidět i bez čtení. */
.sestavaPlanBtn[disabled] {opacity: 0.55; cursor: default;}
/* Věta „uloží se tady a čeká na přenesení do aplikace". Upozorňovací,
   ne úspěšná — táž barva i důvod jako `.userProfilCeka`. */
.sestavaPlanFronta {margin: 0 0 6px 0; color: #8A5A00; font-size: 15px;}
.sestavaPlanJiz {margin: 0; color: #637B7C; font-size: 15px;}
.sestavaPlan .userSekceVic {margin: 10px 0 0 0;}

/* --- záložka Tréninky ----------------------------------------------------- */
.treninkySekcePopis {margin: 0 0 18px 0; color: #1F3D3E; font-size: 16px;}

/* Náhled 16:9. `aspect-ratio` se NEPOUŽÍVÁ: Safari ho umí od 15 a rozpad
   by se projevil na telefonu, kde se to nezkouší — táž volba jako u `gap`
   výš. Rozměr drží `height: auto` nad atributy width/height v HTML
   (240×135), takže se poměr nemění ani před dotažením obrázku. */
.treninkNahled {display: block; width: 100%; height: auto; margin: 0 0 12px 0;
   border-radius: 10px; background: #F3F3F5;}
.treninkPopis {display: block; color: #1F3D3E; font-size: 16px;}
.treninkDelka {display: block; margin-top: 4px; color: #637B7C; font-size: 14px;}

/* Detail: nadpis, přehrávač, text. Přehrávač je TÝŽ vzor jako
   `.podcastVideo` (ř. 965) — poměr 56,25 % a absolutně umístěný rámec,
   protože `<iframe>` sám poměr nedrží. */
.treninkDetail .userSekceVic {margin: 0 0 14px 0;}
.treninkNadpis {margin: 0 0 16px 0;}
.treninkNadpis .treninkDelka {display: inline; margin: 0 0 0 8px; font-size: 15px;}
.treninkPrehravac {position: relative; padding-bottom: 56.25%; height: 0;
   margin: 0 0 18px 0; border-radius: 10px; overflow: hidden; background: #1F3D3E;}
.treninkPrehravac iframe, .treninkPrehravac video {position: absolute; top: 0; left: 0;
   width: 100%; height: 100%; border: 0;}
.treninkDetailPopis {margin: 0 0 14px 0; color: #1F3D3E; font-size: 16px;}
.treninkDetailText {color: #1F3D3E;}

/* --- QR pro desktop ------------------------------------------------------
   Sedí pod odkazy ke stažení v panelu „zatím žádné odcvičené tréninky".
   120 px je rozměr, na který je QR generovaný (`nastroje/qr-appka.py`,
   scale=4 → 148 px se rámem), takže se nezvětšuje nad svoje rozlišení.
   `flex` a ne `float`: popis má sedět vedle kódu i při zalomení. */
.userAppkaQr {display: flex; align-items: center; flex-wrap: wrap;
   margin: 14px 0 0 0;}
.userAppkaQrObr {display: block; width: 120px; height: 120px; background: #FFFFFF;}
.userAppkaQrPopis {flex: 1 1 180px; min-width: 0; margin-left: 14px;
   color: #637B7C; font-size: 15px;}

/* Na úzkém okně QR nemá cenu: kdo je na telefonu, má rovnou tlačítko do
   obchodu. Panel ho ale nevykresluje podle šířky (server ji nezná), takže
   se skrývá tady — a jen na mobilních šířkách, kde je desktopová větev
   výsledkem hádání z User-Agenta, ne jistotou.
   POZOR: media query NEZVYŠUJE specificitu, takže `display: none` musí
   stát POD `display: flex`, ne nad ním. */
@media (max-width: 575px) {
  .userAppkaQr {display: none;}
}

/* ==========================================================================
   C19 predplatne profil
   ==========================================================================

   Zadal Jan 9. 9. 2026, dvakrát: „předplatné — aby to vypadalo adekvátně
   profilu uživatele a ne jako public page" a „přepracovat na profilový
   design."

   TŘI PRAVIDLA, A ANI JEDNA NOVÁ BARVA. Skoro celý vzhled té stránky se
   dělá ODEBÍRÁNÍM v PHP a v šablonách, ne přidáváním CSS: ceník už se do
   sekce nevkládá, nadpis situace se přestěhoval do titulku dlaždice a
   roční cena je řádek „popis — hodnota". Zbývají dvě věci, které v CSS
   nikdy nebyly, a jedna přebíjená.

   ŽÁDNÝ `.userPanel` TADY NENÍ, a je to změřené rozhodnutí, ne opomenutí:
   profil (`profile()` v `sekce/profil.inc.php`) staví na `mrizka()`
   a `dlazdice()`, tedy na `.userDlazdice` — `.userPanel` používají
   emailing a katalog cviků, protože mají jeden jediný obal. `.userPanel`
   je přitom ZÁMĚRNĚ táž karta jako `.userDlazdice` (viz komentář u
   ř. ~2694: stejná barva, rámeček i rádius), takže obal navíc by nedal
   nový vzhled — dal by kartu v kartě, tedy 22 px padding okolo 22 px
   paddingu. Předplatné je proto v `.userDlazdice`, přesně jako profil.

   ODSAZENÍ A ŠÍŘKU NEŘEŠÍ TENHLE BLOK. Panel `predplatne.html` je
   `.user-sekce` bez `col-*`, takže mu obsahovou plochu 165…1275 dává
   obecné pravidlo `.row > .user-sekce` (ř. ~2679) a hrany karet srovná
   Bootstrapí grid uvnitř. Druhé pravidlo na totéž by se s ním rozešlo. */

/* Roční sazba jako PODBLOK V KARTĚ, ne karta v kartě.
   Do 9. 9. 2026 měl `.userPredplatneRocni` vlastní pozadí #F7FAFA,
   rámeček a rádius 14px — tedy druhou kartu uvnitř dlaždice, a v ní
   28px cenu. Oddělovačem je teď linka, přesně jako u `.sestavaPlan`
   uvnitř `.userPanel` detailu sestavy (ř. ~2841); barva linky je táž
   #E4E9E9, aby sekce nezískala třetí druh oddělovače.
   Stará pravidla `.userPredplatneRocni*` v bloku C19 D5 výš zůstávají,
   jak jsou — jejich třídy se přestaly vykreslovat, přebíjet je není
   potřeba a přeřazovat cizí pravidla je horší než mrtvý selektor. */
.userPredplatneRocniBlok {margin: 16px 0 0 0; padding-top: 14px;
   border-top: 1px solid #E4E9E9;}
.userPredplatneRocniBlok p {margin: 0 0 6px 0;}
/* Úspora leží na BÍLÉ kartě, ne na #F7FAFA jako dřív, takže tady by
   #5C7273 z původního bloku byl zbytečně tmavý; #637B7C má na #FFFFFF
   4,51:1, tedy AA. Mimo bílou kartu se tahle třída nesmí použít — na
   #F3F3F5 spadne na 4,07:1 a propadne. */
.userPredplatneRocniBlok .userPredplatneUspora {color: #637B7C; font-size: 15px;}

/* Odkaz na veřejnou nabídku. Týž odstup jako `.userPredplatneSprava`
   (ř. ~2105) — obojí je poslední řádek karty a stojí pod odstavcem. */
.userPredplatneNabidka {margin: 14px 0 0 0;}

/* ==========================================================================
   C19 predplatne panel
   ==========================================================================

   Zadal Jan 9. 9. 2026, po prohlídce téže stránky, kterou týž den
   předělala dávka výš: „rozhodně jsem neříkal, že tady nebude samostatný
   panel předplatného. Teď to jen odkazuje na public subscription.
   Profilový vzhled neznamená odkaz, ale integrace předplatného do
   vzhledu user sekce."

   DVĚ PRAVIDLA A ANI JEDNA NOVÁ BARVA — stejně jako u bloku nad tímhle.
   Celý panel je totiž složený z prvků, které v sekci UŽ JSOU: karta je
   `.userDlazdice`, titulek `h2title2 userDlazdiceNadpis`, sazby jsou
   `.userRadek` (týž řádek „popis — hodnota", jakým se vypisuje platnost
   a frekvence) a blok se sazbami je `.userPredplatneRocniBlok` z bloku
   výš. Přibývá jen výčet „co získáte" a odbarvení druhotného odkazu.

   ODSAZENÍ A ŠÍŘKU TENHLE BLOK NEŘEŠÍ, stejně jako ten nad ním: panel
   `predplatne.html` je `.user-sekce` bez `col-*`, plochu 165…1275 mu
   dává obecné pravidlo `.row > .user-sekce` (ř. ~2679) a hrany karet
   srovná Bootstrapí grid uvnitř. */

/* Výčet „co získáte". Není to srovnávací tabulka tarifů z veřejné
   nabídky — ta je ceníkový prvek a do karty profilu nepatří. Velikost
   i barva textu jsou tytéž jako `.userRadekPopis` (ř. ~2060), aby karta
   „co získáte" a karta „co mám" měly týž text; jsou to dvě poloviny
   jednoho řádku mřížky.

   ODRÁŽKY JSOU OD 13. 9. 2026 TYTÉŽ JAKO NA VEŘEJNÉ NABÍDCE
   `/cz/predplatne/` (Jan: „odrážky udělej jako na cz/predplatne/"),
   tedy `.subscriptionSeznam` (ř. ~1191): tyrkysový kroužek s černým
   terčem místo `disc`, linka pod položkou a týž vnitřní odstup.
   PŘENÁŠÍ SE VZHLED ODRÁŽKY, NE CELÉ PRAVIDLO — tři věci zůstávají
   sekční a je to schválně:
   * `margin: 0` (veřejná má `0 0 50px 0`) — odstup odspodu má
     `.userDlazdiceTelo` a druhý by se s ním sečetl;
   * barva textu `#1F3D3E`, ne černá jako na veřejné stránce — je to
     táž barva jako `.userRadekPopis`, aby karta „co získáte" a karta
     „co mám" měly týž text (11,70:1 na bílé kartě);
   * `font-size: 16px` je v obou stejné, takže se nemění.
   KONTRAST PŘEPOČÍTÁN, NE PŘEVZATÝ. Obě plochy jsou přitom bílé:
   změřeno headless Chromem nad živou `/cz/predplatne/`, efektivní
   pozadí položky je `rgb(255, 255, 255)` — tedy táž bílá jako
   `.userDlazdice`, takže se barvy odrážky přenosem nemění. Kroužek
   `#6FF9FF` má proti bílé 1,26:1 a linka `#F1F4F4` 1,11:1; obojí je
   ale `content: ""`, tedy dekorace vedle textu, který nese 11,70:1,
   a černý terč uvnitř kroužku má proti němu 16,67:1. */
.userPredplatneVyhody {margin: 0; padding: 0; list-style: none;}
.userPredplatneVyhody li {position: relative; color: #1F3D3E; font-size: 16px;
   margin: 0; padding: 11px 0 11px 34px; border-bottom: 1px solid #F1F4F4;}
.userPredplatneVyhody li:before {content: ""; position: absolute; left: 0; top: 17px;
   width: 18px; height: 18px; border-radius: 50%;
   background: radial-gradient(circle at center, #000000 0 3.5px, #6FF9FF 3.5px 9px);}
.userPredplatneVyhody li:last-child {margin-bottom: 0; border-bottom: 0;}

/* DRUHOTNÝ ODKAZ, ne druhé tlačítko. Do 9. 9. 2026 byl odkaz na veřejnou
   nabídku jedinou akcí toho stavu, a proto `blueButton`; teď nad ním
   stojí tlačítko do Stripe Checkoutu, takže dvě stejně silná tlačítka
   v jedné kartě by nutila vybírat mezi věcmi, které rovnocenné nejsou.
   Barva je #1F3D3E, tedy TÁŽ jako text karty a jako `.userNavPolozka a`
   (ř. ~1969) — sekce nezískává třetí barvu odkazu. Podtržení je vidět
   pořád, protože bez něj by odkaz uprostřed textu nebyl poznat. */
.userPredplatneNabidka a {color: #1F3D3E; font-size: 16px; text-decoration: underline;}
.userPredplatneNabidka a:hover, .userPredplatneNabidka a:focus {color: #1F3D3E; text-decoration: none;}

/* ==========================================================================
   C19/9 — ODKAZY DO OBCHODŮ JAKO IKONA + NÁZEV, SEKUNDÁRNĚ (10. 9. 2026)
   ==========================================================================

   Zadal Jan 10. 9. 2026: „Tlačítka „Otevřít v..." jsou obrovské. Stačí zase
   ikony platforem a tohle asi ne jako barva primárního CTA, ale jako
   sekundární."

   BLOK JE NA KONCI SOUBORU SCHVÁLNĚ, stejně jako C19 L1, D4, D5 a D6 —
   v jiných worktree běží souběžné dávky a konec souboru je jediné místo,
   kde si dvě linky nepřepíšou práci. Nic výš v souboru se nepřepisuje;
   `.userReaktivaceTlacitko` (ř. ~2152) zůstává, jak je, protože dává jen
   odstup, a `.blueButton` z třídy odkazu zmizel v šabloně, ne tady.

   PROČ NE `.outlineBtn`, kterou web už má (ř. 757). Ta je černá na
   průsvitném a na TŘECH místech se dotahuje na rozměry `.blueButton`
   (404, Předplatné, Potíže) — tedy je to obrysová varianta PRIMÁRNÍHO
   tlačítka, pořád v jeho velikosti. Tady je potřeba pravý opak: prvek
   MENŠÍ než primární CTA. Přebít u ní čtyři vlastnosti a doufat, že se
   žádný ze tří kontextů nepřidá, je horší než vlastní třída v barvách,
   které sekce už používá (#1F3D3E text, #F4F7F7 výplň — týž tón jako
   `.sestavyPridatBtn` ř. ~2226).

   KONTRAST SPOČÍTANÝ Z HODNOT BAREV, NE ODHADNUTÝ (WCAG 2.1):

     #1F3D3E na #F4F7F7   10,86   text v klidu           (AA 4,5  AAA 7)
     #FFFFFF na #1F3D3E   11,70   text při hoveru        (AA 4,5  AAA 7)
     #637B7C na #FFFFFF    4,51   RÁMEČEK proti panelu   (1.4.11, práh 3)

   Ten třetí řádek je důvod, proč rámeček NENÍ #E4E9E9 jako u dlaždic.
   #E4E9E9 na bílé vychází 1,23 — pod prahem 3:1 pro netextové prvky
   (WCAG 1.4.11), tedy tlačítko, u kterého není poznat, kde končí.
   U dlaždice to nevadí, ta je plocha; tady je to hranice ovládacího
   prvku. #637B7C je z palety sekce (`.lideProfilRole`) a projde.
   Pro srovnání: původní `.blueButton` má 10,33, takže se čitelnost
   zmenšením NEZHORŠILA.

   44 PX NA PRST. `min-height: 44px` + `box-sizing: border-box`, takže
   rámeček ani padding tu výšku nesnižují (WCAG 2.5.5 / iOS HIG).
   Šířka vychází z obsahu a je vždy větší: 32 px padding + 18 px ikona
   + 8 px odstup + text.

   `margin-right` NA IKONĚ, NE `gap`. Flexbox `gap` umí Safari až od 14.1
   a na starším iPhonu by ikona textu držela na kůži. `margin` umí
   všechno a dělá totéž.

   BEZ TÉHOTO BLOKU JE ODKAZ POŘÁD ČITELNÝ — ikona a název obchodu jako
   obyčejný textový odkaz. Není to ale tlačítko a nemá 44 px, takže
   `style.css` musí na produkci jít SPOLU s addonem, ne za ním.          */

.userReaktivaceStore {display: inline-flex; align-items: center; box-sizing: border-box;
   max-width: 100%; min-height: 44px; padding: 10px 16px;
   border: 1px solid #637B7C; border-radius: 5px; background: #F4F7F7;
   color: #1F3D3E; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 15px; line-height: 20px; letter-spacing: 0.2px; text-align: left;}
.userReaktivaceStore:hover, .userReaktivaceStore:focus {text-decoration: none;
   color: #FFFFFF; background: #1F3D3E; border-color: #1F3D3E;}
/* Fokus musí být vidět i tam, kde hover mění jen barvy — prstenec je
   mimo rámeček, aby ho tmavé pozadí hoveru nespolklo. */
.userReaktivaceStore:focus-visible {outline: 2px solid #1F3D3E; outline-offset: 2px;}
.userReaktivaceStoreIkona {display: block; flex: 0 0 auto; width: 18px; height: 18px;
   margin-right: 8px;}

@media (max-width: 767.98px) {
  /* Na telefonu je tlačítko jedno a text celý („Otevřít aplikaci
     Spiralista"), takže se šetří jen vodorovný padding. Výška 44 px
     zůstává — právě tam se na tlačítko ťuká prstem. */
  .userReaktivaceStore {padding: 10px 14px; font-size: 14px;}
}

/* ==========================================================================
   C19 usertest — přepínač grafu k nadpisu, předplatné k reaktivaci
   (11. 9. 2026)
   ==========================================================================

   Dva body Jana z 11. 9. 2026, doslova:
     „Přehled > Posledních 7 dní : Přepínač 7/14/30 by měl být na úrovni h2,
      tedy víc nahoře"
     „Přehled > Předplatné : není ta pozice utopená? Nemělo by to být hned
      vedle Naposledy jste cvičili?"

   BLOK JE NA KONCI SOUBORU SCHVÁLNĚ, stejně jako C19 L1, L2, L3, D4, D5
   a D6 — v jiných worktree běží souběžné dávky a konec souboru je jediné
   místo, kde si dvě linky nepřepíšou práci. Nic výš v souboru se
   nepřepisuje ani nemaže.                                                */

/* --- hlavička dlaždice grafu: nadpis vlevo, přepínač vpravo ------------ */
/* Nadpis vykresluje od 11. 9. sama dlaždice grafu (`user-graf-hlavicka.html`),
   ne `dlazdice()` z `layout.inc.php` — ten sdílený soubor umí dát nadpis
   jen NAD tělo a jeho podpis se měnit nesmí.

   PŘEPÍNAČ ZŮSTAL UVNITŘ `.userGraf`, A NENÍ TO NEDODĚLEK. Drží se tím
   dvě věci naráz: `user-graf.js` hledá volby i okna uvnitř elementu
   s `data-user-graf` (tedy uvnitř `.userGraf`), a vzhled voleb stojí na
   selektoru `.userGraf .userGrafVolba` (ř. ~2604), který tu třídu navíc
   má proto, aby přebil `.mainContent a` z ř. 53. Kdo hlavičku vytáhne
   ven z `.userGraf`, vypne přepínání bez jediné chyby v konzoli a volby
   navíc zčernají.

   `align-items: baseline` sází nadpis a volby na jednu účaří, ne na
   společný střed — nadpis je 22 px, volby 16 px a střed by je proti sobě
   posunul. `flex-wrap` je tu kvůli dlouhým nadpisům (německé „Die letzten
   30 Tage"): volby se zalomí pod nadpis, nepřetečou z karty.

   SPODNÍ MEZERA JE 6 px, NE 12 — druhých 6 px přidá `margin-bottom`
   samotných voleb (ř. ~2604), které tam je kvůli zalomení do dvou řádků.
   Dohromady je to týchž 12 px, jaké měl nadpis dlaždice sám. */
.userGrafHlavicka {display: flex; flex-wrap: wrap; align-items: baseline;
   justify-content: space-between; margin: 0 0 6px 0;}
/* Nadpis i přepínač si nesou vlastní spodní margin z bloků výš; v hlavičce
   ho drží hlavička sama, jinak by se sečetly a graf by odskočil. */
.userGrafHlavicka .userDlazdiceNadpis {margin: 0 16px 0 0;}
.userGrafHlavicka .userGrafPrepinac {margin: 0;}

/* --- reaktivace jako půlka prvního řádku mřížky ------------------------ */
/* Do 11. 9. 2026 stál reaktivační panel SÁM NAD MŘÍŽKOU v plné šířce a byl
   to samostatná karta (ř. ~2180: bílé pozadí, rámeček, zaoblení, vlastní
   spodní margin). Teď je tělem dlaždice, takže by se karta kreslila
   dvakrát — jednou `.userDlazdice`, jednou panel v ní.

   Zbude proto jen akcentní pruh vlevo. Je to TÝŽ jazyk, jakým se odlišuje
   `.userPredplatneVyzva` (ř. ~2657) v sousední dlaždici, a stejně jako tam
   nenese informaci sám: co je zač, říká věta uvnitř.

   ŠABLONA PANELU SE KVŮLI TOMU NEMĚNÍ. `user-reaktivace.html` zůstala, jak
   je, takže kdyby panel někdy stál zase samostatně, vypadá dál jako karta
   — rozhoduje o tom kontext (`.userDlazdiceTelo >`), ne nová třída
   v markupu. */
.userDlazdiceTelo > .userReaktivace {margin: 0; padding: 0 0 0 14px;
   background: none; border: 0; border-left: 4px solid #53F8FF;
   border-radius: 0;}
/* SPECIFICITA MUSÍ BÝT STEJNÁ JAKO U PRAVIDLA NAD TÍM, JINAK SE HOTOVÝ
   STAV NEODLIŠÍ. `.userReaktivaceHotovo` (0,1,0) na ř. ~2182 nastavuje jen
   `border-left-color`, kdežto pravidlo výš je `border-left` ZKRATKOU
   (0,2,0) — ta barvu přepíše zpátky na azurovou. Odcvičený den by tím
   dostal tutéž výzvovou barvu jako neodcvičený. */
.userDlazdiceTelo > .userReaktivaceHotovo {border-left-color: #E4E9E9;}

@media (max-width: 767.98px) {
  /* Na telefonu jdou nadpis a přepínač pod sebe, ne vedle sebe — na 320 px
     se „Posledních 30 dní" a tři volby na jednu řádku nevejdou a
     `space-between` by je roztrhl na dva kraje. `display: block` je
     spolehlivější než `flex-wrap` samotný: ten by nadpis nechal
     v prvním řádku a volby odsunul doprava až na konec.
     `.userGrafPrepinac {text-align: left}` z bloku o ~140 řádků výš
     platí dál, takže se volby zarovnají pod nadpis, ne k pravému kraji. */
  .userGrafHlavicka {display: block;}
  .userGrafHlavicka .userDlazdiceNadpis {margin: 0 0 10px 0;}
  /* Karta má na telefonu menší vodorovný padding (ř. ~2029), takže se
     zmenší i odsazení za akcentním pruhem uvnitř ní. */
  .userDlazdiceTelo > .userReaktivace {padding: 0 0 0 12px;}
}

/* ===== SEKCE /user/ — STAVY PŘEDPLATNÉHO (11. 9. 2026) ==================
   Podklad: `handoff/predplatne-stavy-11-9.md`. Vlevo stav, vpravo nabídka
   nebo options; mřížku, karty i akcentní pruh nese slovník sekce, který
   tu je od D3 — `.userDlazdice`, `.userDlazdiceHlavni`, `.userRadek`,
   `.userPredplatneVyzva`. Nová pravidla jsou jen tři druhy: odstup nových
   bloků, menší nadpis uvnitř karty a odemknutí nákupu zaškrtnutím.

   ŽÁDNÁ NOVÁ BARVA. Text `#1F3D3E` (11,70:1 na bílé kartě) a sekundární
   `#5C7273` (4,61:1) jsou tytéž hodnoty, jaké sekce používá jinde.
   `#637B7C` se tu schválně nepoužívá: na bílé má 4,51:1, tedy AA
   s rezervou 0,01, a stačí, aby karta jednou dostala tónované pozadí.
   Varování je `alert alert-warning` z Bootstrapu 4, který stránka
   načítá — vlastní barevný blok by byl čtvrtá barva navíc. ================ */

/* Velký stavový řádek. Vlastní odstup nemá `.userDlazdiceHlavni` (používá
   ji i dlaždice na Přehledu), takže ho nese obal. */
.userPredplatneHlavni {margin: 0 0 16px 0;}
.userPredplatneHlavni:last-child {margin-bottom: 0;}

/* Menší nadpis uvnitř karty. Titulek karty je `h2title2` 22 px/700, takže
   tenhle musí být PROKAZATELNĚ MENŠÍ — dva stejně velké nadpisy nad sebou
   jsou přesně ta vada, kvůli které se 9. 9. 2026 nadpis situace stěhoval
   do titulku dlaždice. */
.userPredplatnePodnadpis {margin: 16px 0 8px 0; color: #1F3D3E;
   font-size: 18px; font-weight: bold; line-height: 1.3;}

/* Druhotný textový odkaz. Týž tvar jako `.userPredplatneNabidka` o pár set
   řádků výš; nesjednocuje se do jednoho selektoru schválně, aby se dal
   odkaz na veřejnou nabídku odlišit, kdyby bylo potřeba. */
.userPredplatneOdkaz {margin: 14px 0 0 0;}
.userPredplatneOdkaz a {color: #1F3D3E; font-size: 16px; text-decoration: underline;}
.userPredplatneOdkaz a:hover, .userPredplatneOdkaz a:focus {color: #1F3D3E; text-decoration: none;}

/* Poznámka pod obsahem karty (věta o čtvrtletním tarifu, ladicí hláška). */
.userPredplatnePoznamka {margin: 12px 0 0 0; color: #5C7273; font-size: 14px;
   line-height: 1.45;}

/* --- konverzní blok Apple/Google -> web -------------------------------- */
.userPredplatneKonverze {margin: 18px 0 0 0; padding-top: 16px;
   border-top: 1px solid #E4E9E9;}
.userPredplatneKonverzeNadpis {margin: 0 0 8px 0; color: #1F3D3E;
   font-size: 18px; font-weight: bold; line-height: 1.3;}
.userPredplatneKonverzeText {margin: 0 0 12px 0; color: #1F3D3E; font-size: 16px;}
/* Varování musí být vidět dřív než postup, takže žádné zmenšování písma. */
.userPredplatneKonverzeVarovani {margin: 0 0 14px 0; font-size: 16px;}
.userPredplatneKonverzeKroky {margin: 0; padding: 0 0 0 20px;}
.userPredplatneKonverzeKroky li {color: #1F3D3E; font-size: 16px; margin: 0 0 8px 0;}
.userPredplatneKonverzeKroky li:last-child {margin-bottom: 0;}

/* AKCE KONVERZNÍHO BLOKU — TLAČÍTKO JE AKTIVNÍ HNED (Jan 11. 9. 2026 večer).
   Do 11. 9. 2026 tu stály čtyři deklarace, kterými zaškrtávátko tlačítko
   odemykalo (`.userPredplatneKonverzeOdemknuti`, `…Stitek`, `display: none`
   na akci a `…Zaskrtnuti:checked ~ …Akce`). Zámek zrušil Jan; zaškrtávátko
   zmizelo celé i z `predplatne-konverze-akce.html`, takže ty selektory
   neměly co stylovat. **Ochrana proti dvojí platbě tím nezmizela** — leží
   v `predplatneNakupPovolen()` a ve varování nad postupem, ne v CSS. */
.userPredplatneKonverzeAkce p {margin: 14px 0 0 0;}

/* Sbalená varianta pro toho, komu do konce zbývá hodně. `details` je
   nativní, takže rozbalení nepotřebuje ani řádek skriptu; stylujeme jen
   shrnutí, aby vypadalo jako druhotný odkaz sekce a ne jako tlačítko. */
.userPredplatneKonverzeSbaleny {margin: 14px 0 0 0;}
.userPredplatneKonverzeShrnuti {color: #1F3D3E; font-size: 16px;
   text-decoration: underline; cursor: pointer;}
.userPredplatneKonverzeShrnuti:hover, .userPredplatneKonverzeShrnuti:focus {text-decoration: none;}
/* Otočené vnoření (13. 9. 2026): `details` je uvnitř konverzního
   bloku, takže se čára nad blokem NERUŠÍ — blok ji potřebuje pořád.
   Shrnutí je tlačítko, ne odkaz: Jan 13. 9. („určitě by tam měl být
   button na přechod na webové"). Bez `list-style: none` a bez
   `::-webkit-details-marker` zůstane před tlačítkem trojúhelník. */
.userPredplatneKonverzeShrnutiTlacitko {display: inline-block;
   margin: 4px 0 0 0; padding: 10px 18px; border: 1px solid #1F3D3E;
   border-radius: 24px; color: #1F3D3E; font-size: 16px;
   text-decoration: none; list-style: none;}
.userPredplatneKonverzeShrnutiTlacitko::-webkit-details-marker {display: none;}
.userPredplatneKonverzeShrnutiTlacitko:hover,
.userPredplatneKonverzeShrnutiTlacitko:focus {text-decoration: none;}
.userPredplatneKonverzeSbaleny[open] .userPredplatneKonverzeShrnutiTlacitko {margin-bottom: 12px;}
/* Výčet výhod webu je týž seznam jako `.userPredplatneVyhody`
   (ř. ~3581), jen s odstupem od věty nad ním. */
.userPredplatneKonverze .userPredplatneVyhody {margin: 0 0 12px 0;}

/* AKTIVAČNÍ KÓD V SEKCI (Jan 11. 9. 2026 večer).

   Textový odkaz dole v pravém sloupci, který se rozbalí do pole PŘÍMO NA
   MÍSTĚ — ne záložka a ne trvale otevřený panel. `details` je nativní,
   takže na to nepadne ani řádek JavaScriptu; výstup addonu stejně ještě
   jednou prochází `Template::compile()` a inline skript by z něj nevyšel
   celý. Shrnutí je schválně TÝŽ tvar jako `.userPredplatneKonverzeShrnuti`
   (druhotný textový odkaz, ne tlačítko) — dva různě vypadající rozbalovací
   odkazy v jedné kartě by byly dvě různé věci, a nejsou.

   Samotné pole je Bootstrap `form-control` a hláška Bootstrap `alert`,
   takže se sem nekopíruje rámeček ani barvy stavů: `bootstrap.min.css`
   obal sekce načítá a vlastní kopie by se s ním rozešla. */
.userPredplatneKod {margin: 14px 0 0 0;}
.userPredplatneKodShrnuti {color: #1F3D3E; font-size: 16px;
   text-decoration: underline; cursor: pointer;}
.userPredplatneKodShrnuti:hover, .userPredplatneKodShrnuti:focus {text-decoration: none;}
.userPredplatneKodTelo {margin: 12px 0 0 0;}
.userPredplatneKodPopis {margin: 0 0 10px 0; color: #1F3D3E; font-size: 16px;}
.userPredplatneKodStitek {display: block; margin: 0 0 6px 0; color: #1F3D3E;
   font-size: 16px; font-weight: bold;}
.userPredplatneKodPole {max-width: 320px;}
.userPredplatneKodTlacitko {margin: 12px 0 0 0;}
.userPredplatneKodZprava {margin: 0 0 12px 0; font-size: 16px;}

/* ===== VARIANTY PŘEDPLATNÉHO — PŘEPÍNAČ (13. 9. 2026) ==============
   Zadal Jan: „Ceny ukázat za měsíc a k tomu bude přepínač platby
   měsíčně / čtvrtletně / ročně. Defaultně bude roční."

   PŘEPÍNÁ SE TADY, NE SKRIPTEM. Výstup addonu prochází ještě jednou
   `Template::compile()` a ten `<script>` rozebere, takže `:checked`
   je jediná cesta. Obecný sourozenecký kombinátor `~` proto vyžaduje,
   aby přepínače stály ve zdroji PŘED panely — `predplatne-varianty.html`
   to tak má a přehodit se to nesmí.

   BEZ TOHOHLE BLOKU SE NIC NEROZBIJE: panely jsou vidět všechny pod
   sebou, každý se svou cenou a svým tlačítkem. Je to horší zobrazení,
   ne vada.

   Žádná nová barva: #1F3D3E (11,70:1 na bílé kartě), #5C7273 (5,11:1)
   a linka #E4E9E9 jsou z palety sekce. Spočítáno podle WCAG, ne
   odhadnuto. Na tónovaném pozadí se tenhle blok použít NESMÍ —
   #5C7273 tam spadne na 4,61 a odznak 13px by byl na hraně. */
.userPredplatneVarianty {margin: 16px 0 0 0; padding-top: 14px;
   border-top: 1px solid #E4E9E9;}
/* Přepínač se schovává posunem mimo obraz, ne `display: none` —
   musí zůstat dosažitelný z klávesnice a pro screenreader. */
.userPredplatneVariantaVolba {position: absolute; width: 1px; height: 1px;
   margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
   white-space: nowrap; border: 0;}
.userPredplatneVariantaTaby {display: flex; flex-wrap: wrap; gap: 8px;
   margin: 0 0 14px 0;}
.userPredplatneVariantaTab {display: flex; flex-direction: column;
   flex: 1 1 0; min-width: 120px; margin: 0; padding: 10px 12px;
   border: 1px solid #E4E9E9; border-radius: 12px; cursor: pointer;}
.userPredplatneVariantaNazev {color: #5C7273; font-size: 15px;}
.userPredplatneVariantaCena {color: #1F3D3E; font-size: 17px; font-weight: bold;}
.userPredplatneVariantaOdznak {color: #5C7273; font-size: 13px;}
/* Label úspory (Jan 13. 9. 2026). Je pod odznakem a je SILNĚJŠÍ než on:
   „doporučujeme" je názor, „o 16 % levnější" je údaj, podle kterého se
   mezi délkami rozhoduje. Od 13. 9. 2026 večer je to BAREVNÝ ŠTÍTEK
   (Jan: „Ten roční do primární Spiralista blue a čtvrtletní do
   sekundární blue.").

   PROČ SE TÍM RUŠÍ ODŮVODNĚNÍ, KTERÉ TU STÁLO RÁNO. Do dneška tu bylo,
   že cyan #6FF9FF „má proti bílé kartě jen 1,26:1", a z toho vyšel zákaz
   výplně. To číslo platí, ale MĚŘÍ NĚCO JINÉHO, než na co se použilo:
   1,26:1 je kontrast VÝPLNĚ proti kartě, kdežto o čitelnost se stará
   kontrast TEXTU na té výplni, a ten je 9,29:1 (AAA, práh 7). Požadavek
   3:1 na plochu proti okolí (WCAG 1.4.11) se týká hranic OVLÁDACÍCH
   prvků a smysluplné grafiky; štítek s údajem není ani jedno — je to
   text, na který platí 1.4.3. Ranní závěr byl tedy správně spočítaný
   a špatně použitý.

   ZBYTEK TÉ OBAVY ALE PLATÍ, jen se jmenuje jinak: #6FF9FF je barva
   `.blueButton` a hned pod tabem JEDNO SKUTEČNÉ `.blueButton` stojí,
   takže výplňový štítek může vypadat jako druhé tlačítko. Proti tomu
   stojí tři rozdíly, a jsou tu schválně: pilulkový rádius (tlačítko má
   5px), žádné VERZÁLKY ani prostrkání (tlačítko má obojí) a 12px místo
   16px. Nic z toho není kosmetika — je to jediné, čím se štítek od
   tlačítka liší, takže se to nesmí „sjednotit".

   „KARTA V KARTĚ" HLÍDÁ `align-self: flex-start`. Tab je
   `flex-direction: column`, takže by se štítek jako flex položka roztáhl
   na CELOU šířku tabu a z barvy by byl pruh přes kartu — tedy přesně ten
   zavržený tvar. Štítek proto drží šířku obsahu a je z něj chip.

   Spočítané kontrasty (WCAG 2.1, z hodnot barev):
     text #1F3D3E na #6FF9FF   9,29:1   roční      (AA 4,5  AAA 7)
     text #1F3D3E na #E4FBFC  10,86:1   čtvrtletní (AA 4,5  AAA 7)

   PROČ SEKUNDÁRNÍ JE #E4FBFC A NE #53F8FF. Paleta má cyany dva a jako
   dvojice odstínů jsou k nerozeznání: #6FF9FF proti #53F8FF je
   **dE76 4,3** (práh postřehnutelnosti ~2,3) a jejich vzájemný kontrast
   1,03:1, takže dva štítky vedle sebe by čtenář viděl jako jednu barvu
   a hierarchie roční/čtvrtletní by NEVZNIKLA. #E4FBFC je proti #6FF9FF
   dE76 31,2, a přitom proti bílé kartě pořád dE76 8,4, takže je vidět
   jako štítek. Není to nová barva: bledou cyan už web používá jako
   VÝPLŇ v `.podcastOsobaIniciala`, `.podcastKapitola.jeAktivni`
   a `.sestavaThumbPrazdno`. #53F8FF zůstává tím, čím v sekci je —
   fokusový prstenec a 4px linka, tedy akcent, ne plocha. */
.userPredplatneVariantaLevnejsi {align-self: flex-start; margin-top: 4px;
   padding: 2px 8px; border-radius: 999px;
   color: #1F3D3E; font-size: 12px; font-weight: bold; line-height: 16px;
   text-transform: none; letter-spacing: normal;}
.userPredplatneVariantaLevnejsiHlavni {background: #6FF9FF;}
.userPredplatneVariantaLevnejsiVedlejsi {background: #E4FBFC;}
/* Vybraná varianta: tmavší rámeček, ne výplň. Výplň by z karty
   udělala kartu v kartě a to je v profilu zavržený tvar. */
.userPredplatneVariantaTab {border-color: #E4E9E9;}
#userPredplatneVariantaMonthly:checked ~ .userPredplatneVariantaTaby label[for="userPredplatneVariantaMonthly"],
#userPredplatneVariantaQuarterly:checked ~ .userPredplatneVariantaTaby label[for="userPredplatneVariantaQuarterly"],
#userPredplatneVariantaYearly:checked ~ .userPredplatneVariantaTaby label[for="userPredplatneVariantaYearly"] {
   border-color: #1F3D3E; box-shadow: inset 0 0 0 1px #1F3D3E;}
/* Focus musí být vidět, i když je vlastní `input` mimo obraz. */
.userPredplatneVariantaVolba:focus ~ .userPredplatneVariantaTaby .userPredplatneVariantaTab {outline: none;}
#userPredplatneVariantaMonthly:focus-visible ~ .userPredplatneVariantaTaby label[for="userPredplatneVariantaMonthly"],
#userPredplatneVariantaQuarterly:focus-visible ~ .userPredplatneVariantaTaby label[for="userPredplatneVariantaQuarterly"],
#userPredplatneVariantaYearly:focus-visible ~ .userPredplatneVariantaTaby label[for="userPredplatneVariantaYearly"] {
   outline: 2px solid #1F3D3E; outline-offset: 2px;}
/* Panely: vidět je jen ten vybraný. Skrývání je `display: none`,
   takže tlačítko schované varianty není v tab orderu a nedá se
   omylem spustit z klávesnice. */
.userPredplatneVariantaPanel {display: none;}
#userPredplatneVariantaMonthly:checked ~ .userPredplatneVariantaPanely > .userPredplatneVariantaPanelMonthly,
#userPredplatneVariantaQuarterly:checked ~ .userPredplatneVariantaPanely > .userPredplatneVariantaPanelQuarterly,
#userPredplatneVariantaYearly:checked ~ .userPredplatneVariantaPanely > .userPredplatneVariantaPanelYearly {display: block;}
/* CENA ZA MĚSÍC — 24px od 13. 9. 2026 (Jan: „cenu za měsíc trochu větší").
   Je to JEDEN KROK PO ŠKÁLE SEKCE, ne nová hodnota: velké řádky profilu
   jdou 22 - 24 - 26 - 28 - 30 a 24px v ní už dvakrát stojí
   (`.userReaktivaceHlavni` a mobilní `.userPredplatneRocniCena`).
   Vedlejší 28px z `.userPredplatneRocniCena` by byl skok o tři kroky,
   a hlavně by cena za měsíc přebila `.userDlazdiceHlavni` (30px) na téže
   stránce — tedy „výrazně", ne „trochu".
   MOBILNÍ VÝJIMKA SE NEPŘIDÁVÁ SCHVÁLNĚ: sousedé ji mají jako KROK DOLŮ
   (28 na 24, 30 na 26), takže obdoba by z 24 udělala 20 a cena by na
   telefonu byla menší než dnešních 22 - tedy opak zadání.
   Zarovnání to nemění: účtovaná částka i úspora pod ní jsou samostatné
   odstavce zarovnané vlevo a všechny tři panely sdílejí tuhle jednu
   třídu, takže si zůstávají opticky srovnané. */
.userPredplatneVariantaHlavni {margin: 0 0 4px 0; color: #1F3D3E;
   font-size: 24px; font-weight: bold; line-height: 1.25;}
.userPredplatneVariantaUctuje {margin: 0 0 6px 0; color: #5C7273; font-size: 15px;}
.userPredplatneVariantaPanel .userPredplatneUspora {color: #637B7C; font-size: 15px;}
.userPredplatneVariantaAkce {margin: 12px 0 0 0;}
.userPredplatneVarianty .userPredplatnePoznamka {margin-top: 12px;}

/* ==========================================================================
   C19 — VZHLED SESTAV A DETAILU SESTAVY (Jan 11. 9. 2026 večer)
   ==========================================================================

   BLOK JE NA KONCI SOUBORU SCHVÁLNĚ, stejně jako C19 L1, D4, D5, D6 a C19/9 —
   v jiných worktree běží souběžné dávky a konec souboru je jediné místo, kde
   si dvě linky nepřepíšou práci. Nic výš v souboru se nepřepisuje.

   Vykresluje se to JEN na ladicí ploše `usertest/` (rozhoduje
   `cvikyNovyVzhled()` v PHP, ne tenhle soubor) — ostrá `/user/` dostane
   dnešní tvar, protože Jan 11. 9. večer rozhodl, že se tam zatím nenasazuje.

   KONTRASTY SPOČÍTANÉ Z HODNOT BAREV, NE ODHADNUTÉ (WCAG 2.1):

     #1F3D3E na #F4F7F7   10,86   text sekundárního tlačítka   (AA 4,5  AAA 7)
     #FFFFFF na #1F3D3E   11,70   text tlačítka při hoveru     (AA 4,5  AAA 7)
     #637B7C na #FFFFFF    4,51   RÁMEČEK tlačítka a eyebrow   (1.4.11, práh 3)
     #1F3D3E na #FFFFFF   11,70   věta o nevratnosti
     #1F3D3E na #E4FBFC   10,86   číslo v záskoku náhledu

   POZOR NA TEN POSLEDNÍ ŘÁDEK — je to jediné místo, kde se tenhle blok
   VĚDOMĚ rozchází se vzorem, ze kterého jinak vychází. `.podcastOsobaIniciala`
   (ř. ~1049) kreslí totéž, ale barvou #637B7C, a ta má na #E4FBFC jen
   **4,19** — tedy pod AA. Opsat ji celou by znamenalo přenést i tu vadu,
   takže se přebírá geometrie a podklad, ale ne barva textu.
   ========================================================================== */

/* --- 1. SESTAVA V SEZNAMU JAKO KLIKACÍ KARTA S NÁHLEDEM -------------------
   Jan 11. 9. 2026 ráno: „sestavy by mohly mít nějaký thumb nebo něco, ať to
   není jen textový řádek." Týž den v noci: „Moje sestavy - sestavy klikatelné
   jako panely v Potíže."

   ROZKLIKÁVÁNÍ ZE SEZNAMU TÍM ZANIKLO. `.sestavySeznamToggle` a obě mechaniky
   otevírání (`:focus-within` bez JS, třída s JS) jsou výš v souboru a ZŮSTÁVAJÍ
   — používá je STARÁ větev sekce, která má pořád `sestava-seznam-polozka.html`.
   Ladicí větev dostává `sestava-seznam-karta.html`, kde žádný toggle není:
   klikací panel a rozbalovač se perou o totéž kliknutí a uvnitř `a` nesmí být
   tlačítko.

   Karta je OPSANÁ Z POTÍŽÍ přes Historii (`.potizeKarta` ř. ~598,
   `.userHistorieKarta` ř. ~2090) — týž podklad, rámeček, radius, hover
   i focus. Nic nového se nekreslí; jediné, co je tady navíc, je 88px náhled
   vlevo a to, že hlava karty je jeden řádek.

   `color: inherit` a `text-decoration: none` nejsou kosmetika: celý obsah je
   uvnitř `a`, takže by název i počet cviků zmodraly a podtrhly se. */
.sestavaKartaPolozka {display: flex; margin: 0 0 14px 0;}
.sestavaKarta {display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
   padding: 12px 16px; background: #FFFFFF; border: 1px solid #E4E9E9;
   border-radius: 14px; color: inherit; text-decoration: none;
   transition: background .15s ease, box-shadow .15s ease;}
/* `min-width: 0` ruší výchozí `min-width: auto` flex položky — bez toho
   dlouhý název kartu roztáhne přes šířku panelu. */
.sestavaKartaText {flex: 1 1 auto; min-width: 0;}
.sestavaKartaHlava {display: block;}
/* Hover a focus jsou přesně ty, jaké má `.potizeKarta`. Karta se NEPOSOUVÁ:
   Z83c, Jan 21. 8. 2026 („hover tu kartu nějak posune nahoru"). */
.sestavaKarta:hover {background: #F7F8F9;
   box-shadow: 0 4px 14px rgba(0,0,0,0.07); text-decoration: none;}
.sestavaKarta:hover .sestavySeznamNazev {text-decoration: underline;}
.sestavaKarta:hover .sestavaKartaSipka {color: #313131; transform: translateX(2px);}
.sestavaKarta:focus-visible {outline: 2px solid #313131; outline-offset: 2px;}
@media (prefers-reduced-motion: reduce) {
  .sestavaKarta, .sestavaKartaSipka {transition: none;}
  .sestavaKarta:hover .sestavaKartaSipka {transform: none;}
}
/* Šipka je dekorace (`aria-hidden` v šabloně) — informaci nese název sestavy,
   proto smí být takhle tlumená. Svisle na střed karty. */
.sestavaKartaSipka {flex: 0 0 auto; align-self: center; color: #93A5A6;
   font-size: 13px; padding-left: 10px;
   transition: color .15s ease, transform .15s ease;}
/* Název a počet na jeden řádek, štítek sdílení pod ně — na kartě je pod sebou
   místo, kdežto vedle sebe by se na mobilu zalomily doprostřed slova. */
.sestavaKarta .sestavySeznamNazev {color: #1F3D3E; font-size: 18px;}
/* `margin-left: 14px` z `.sestavaStav` je odstup od textu VEDLE; na kartě
   je štítek na vlastním řádku, takže by z něj bylo odsazení do prázdna. */
.sestavaKarta .sestavaStav {display: block; margin: 2px 0 0 0;}

/* Náhled je pro čtečku neviditelný (`aria-hidden` v šabloně) a vedle něj
   stojí název sestavy — proto tu není `min-height: 44px` jako jediná
   pojistka, ale rovnou 88 px na výšku i na šířku. Dvojnásobek prahu 2.5.5. */
.sestavySeznamThumb {flex: 0 0 auto; display: block; margin-right: 14px;}
.sestavySeznamThumb:hover, .sestavySeznamThumb:focus {text-decoration: none;}

/* MOZAIKA, NE PŘEKRYV. `grid` s pevnými dvěma sloupci; kolik dlaždic v ní
   je, říká třída z PHP, takže sestava o jednom cviku má obrázek přes celou
   plochu a ne obrázek a tři díry. `overflow: hidden` s `radius` ořízne
   dlaždice do rohů karty. */
.sestavaThumb {display: grid; width: 88px; height: 88px; gap: 2px;
   grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
   overflow: hidden; border-radius: 10px; background: #E4E9E9;}
.sestavaThumbDlazdice {width: 100%; height: 100%; object-fit: cover; display: block;}

/* Jeden cvik — obrázek přes celou dlaždici. */
.sestavaThumb1 .sestavaThumbDlazdice {grid-column: 1 / span 2; grid-row: 1 / span 2;}
/* Dva — dva sloupce na plnou výšku. */
.sestavaThumb2 .sestavaThumbDlazdice {grid-row: 1 / span 2;}
/* Tři — první na plnou výšku vlevo, zbylé dva pod sebou vpravo. Bez tohohle
   by třetí dlaždice zůstala v levém dolním rohu a mozaika by měla díru. */
.sestavaThumb3 .sestavaThumbDlazdice:first-child {grid-row: 1 / span 2;}
/* Čtyři jdou do mřížky samy, žádné pravidlo nepotřebují. */

/* ZÁSKOK, KDYŽ NENÍ Z ČEHO MOZAIKU SLOŽIT — prázdná sestava nebo samé cviky
   bez obrázku. Rozbitý `img` nevznikne, protože se cvik bez obrázku v PHP
   přeskočí. Barva textu je #1F3D3E, ne #637B7C — rozbor v hlavičce bloku. */
.sestavaThumbPrazdno {display: flex; align-items: center; justify-content: center;
   background: #E4FBFC;}
.sestavaThumbCislo {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 30px; line-height: 1; color: #1F3D3E;}

/* --- 2. EYEBROW A NADPIS DETAILU -----------------------------------------
   Velikost a prostrkání dává `.podcastStitek` z HTML, tedy TÝŽ eyebrow, jaký
   má podcast a drobečky sekcí — do typografie tím nepřibyl žádný nový stupeň.
   Tady zbývá jen odstup, protože v panelu stojí pod tlačítkem „Zpět".

   NADPIS JE `.h2title2` (22 px na všech šířkách, ř. 1307) — Jan 11. 9. 2026
   v noci: „stačí jako velikost třeba nadpisu panelu Dlouhodobý plán." Ten
   nadpis skládá `dlazdice()` a má `h2title2 userDlazdiceNadpis`, takže je to
   táž velikost, ne nový stupeň. Ranní `.h2title-2` (40/32 px) tím padá a
   s ním i `line-height: 1.15`, který byl jen dotažení pro 40 px. */
.sestavaStitek {margin: 0 0 4px 0;}
.sestavaDetailNadpis {margin-bottom: 16px;}
.sestavaDetailNadpis .sestavySeznamPocet {font-size: 15px; vertical-align: middle;}

/* Podnadpisy částí karty (Cviky / Aplikace / Sdílení). Velikost a barvu nese
   `.userPredplatnePodnadpis` z HTML — 18 px/700 #1F3D3E, tedy stupeň, který
   sekce už používá uvnitř karet předplatného a který je PROKAZATELNĚ MENŠÍ
   než nadpis sestavy (22 px). Tady zbývá jen odstup: nad podnadpisem větší
   než pod ním, aby se části daly oddělit očima bez linky. */
.sestavaPodnadpis {margin: 26px 0 8px 0;}
/* První podnadpis („Cviky") stojí hned pod řádkem tlačítek, který si svůj
   odstup nese sám — dvojitá mezera by kartu rozlámala. */
.sestavaAkce + .sestavaPodnadpis {margin-top: 4px;}

/* --- 2b. „ZPĚT NA MOJE SESTAVY" DOLE A VLEVO -----------------------------
   Jan 11. 9. 2026 v noci: „‚Zpět na moje sestavy' je úplně na nevhodném
   místě. Standardně dolů doleva."

   VZHLED SE NEVYMÝŠLÍ — je to hotová `.articleDetailBtn` s šipkou doleva,
   tedy přesně to, co má detail potíže (`.potizeZpet`, ř. ~709), detail cviku
   i detail epizody. Zdědí se i chování ikony; tady zůstává mezera nad
   tlačítkem a jediná věc navíc:

   44 PX NA PRST. `.articleDetailBtn` má `padding: 7px 28px` a `font-size:
   12px`, tedy ~31 px — pod prahem WCAG 2.5.5. Na detailech listingů je to
   dnešní stav a tahle dávka ho neopravuje plošně (to by byla změna vzhledu
   pěti veřejných stránek), ale v sekci účtu se na tu výšku dotahuje. */
.sestavaZpetDolu {margin: 30px 0 0 0;}
.sestavaZpetDolu .articleDetailBtn {display: inline-flex; align-items: center;
   box-sizing: border-box; min-height: 44px; margin-top: 0;}
.sestavaZpetDolu .articleDetailBtn i {font-size: 10px; margin-right: 6px;}

/* --- 3. SEKUNDÁRNÍ TLAČÍTKO (sdílení, převod na plán) --------------------
   Jan 11. 9. 2026: „button sdílení není primární CTA, ale důležité, takže
   sekundární barva a ikona sdílení."

   BARVA SE NEVYMÝŠLÍ — je to týž pár, jaký si sekce vzala u odkazů do
   obchodů (`.userReaktivaceStore`, C19/9, ř. ~3300) po Janově „tohle asi ne
   jako barva primárního CTA, ale jako sekundární". Vlastní třída, a ne
   `.outlineBtn`, ze stejného důvodu, jaký je popsaný tam: `.outlineBtn` je
   obrysová varianta PRIMÁRNÍHO tlačítka a na TŘECH místech se dotahuje na
   rozměry `.blueButton`, takže by se u ní musely přebít čtyři vlastnosti.

   44 PX NA PRST: `min-height: 44px` + `box-sizing: border-box`, takže
   rámeček ani padding tu výšku nesnižují (WCAG 2.5.5 / iOS HIG).

   `margin-right` NA IKONĚ, NE `gap` — flexbox `gap` umí Safari až od 14.1
   a na starším iPhonu by ikona textu držela na kůži. */
.sestavaBtnSekundarni {display: inline-flex; align-items: center; justify-content: center;
   box-sizing: border-box; max-width: 100%; min-height: 44px; padding: 10px 22px;
   border: 1px solid #637B7C; border-radius: 5px; background: #F4F7F7;
   color: #1F3D3E; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 15px; letter-spacing: 1px; cursor: pointer;}
.sestavaBtnSekundarni:hover, .sestavaBtnSekundarni:focus {background: #1F3D3E;
   border-color: #1F3D3E; color: #FFFFFF; text-decoration: none;}
.sestavaBtnSekundarni[disabled] {cursor: default; opacity: 0.55;}
/* Ikona je DEKORACE (`aria-hidden` v šabloně) — význam nese text tlačítka. */
.sestavaSdiletIkona {margin-right: 8px; font-size: 16px;}

/* --- 3b. ODKAZ KE ZKOPÍROVÁNÍ A ODESLÁNÍ NA E-MAIL -----------------------
   Jan 11. 9. 2026 v noci: „sdílení sestavy — nevidím odkaz, to není
   dotažené" + „posílání emailu se sestavou".

   ŽÁDNÁ NOVÁ BARVA ANI NOVÝ STUPEŇ PÍSMA. Tlačítka jsou `sestavaBtnSekundarni`
   (ř. 3726), pole `sestavaSdileniInput` (ř. 2380), popisky `#637B7C` 15 px —
   tedy přesně to, co má sekce sdílení už dnes.

   KONTRASTY (spočítané, na bílé kartě `.userPanel`): popisky a popis
   **4,51:1**, text v poli `#1F3D3E` na `#F4F7F7` **10,86:1**, tlačítko
   po najetí `#FFFFFF` na `#1F3D3E` **11,70:1**. Šeď `#637B7C` se tu smí
   použít JEN na bílé — na `#F4F7F7` padá na 4,19 a propadá (táž past,
   která je popsaná v kartě webu u barev sekce).

   `flex-wrap: wrap` + `min-width` na poli, ne media query: v panelu sekce
   se šířka mění i podle mřížky, ne jen podle okna, takže zlom podle
   obsahu drží i tam, kde by breakpoint minul. Pod ~360 px se tlačítko
   přesune pod pole samo. */
.sestavaSdileniOdkazRadek {display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;}
.sestavaSdileniOdkazRadek .sestavaSdileniInput {flex: 1 1 220px; min-width: 0;}
.sestavaSdileniKopirovat {flex: 0 0 auto;}

/* Věta místo prázdného pole, když se adresa nedá složit (veřejná stránka
   sestav zatím není v databázi). Na bílé kartě, tedy 4,51:1. */
.sestavaSdileniChybi {margin: 8px 0 0 0; color: #637B7C; font-size: 15px;}

.sestavaMailPopis {margin: 16px 0 10px 0; color: #637B7C; font-size: 15px;}
.sestavaMailPole {display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;}
.sestavaMailPopisek {flex: 0 0 100%; margin-bottom: 0; color: #637B7C; font-size: 15px;}
.sestavaMailInput {flex: 1 1 220px; min-width: 0; padding: 9px 12px;
   border: 1px solid #E4E9E9; border-radius: 5px; background: #F4F7F7;
   color: #1F3D3E; font-size: 15px;}
.sestavaMailBtn {flex: 0 0 auto;}

/* --- 4. PŘEVOD NA RUČNÍ PLÁN: POTVRZENÍ NA MÍSTĚ A PASIVNÍ STAV ----------
   Jan 11. 9. 2026: „Switch být nemůže, protože to není vratné. Tak nevím,
   navrhni."

   Potvrzení je odsazené a orámované zleva, aby bylo vidět, že patří
   k tlačítku nad ním a není to další samostatná nabídka. Bez JavaScriptu
   zůstává skryté atributem `hidden` — tedy dnešní stav, nic se nezhoršuje. */
.sestavaPlanPotvrzeni {margin: 0 0 10px 0; padding: 12px 0 2px 14px;
   border-left: 3px solid #637B7C;}
.sestavaPlanNevratne {margin: 0 0 12px 0; color: #1F3D3E; font-size: 16px;}
.sestavaPlanPotvrzeniAkce {display: flex; flex-wrap: wrap; gap: 10px;
   align-items: center; margin: 0;}
/* Potvrzovací tlačítko NENÍ červené. Vytvořit plán není destruktivní akce —
   jen nevratná; červená by ji postavila vedle mazání sestavy, což je něco
   jiného. Riziko nese VĚTA nad ním, ne barva. */
.sestavaPlanPotvrzeniAkce .sestavaAkceBtn {margin: 0; min-height: 44px;}

/* „NAPOSLEDY ZKOPÍROVÁNO" POD TLAČÍTKEM, ne místo něj (11. 9. 2026 v noci). */
.sestavaPlanStav {margin: 0 0 10px 0;}
.sestavaPlanStavText {margin: 0 0 4px 0; color: #1F3D3E; font-size: 16px;}
.sestavaPlanStav .userSekceVic {margin: 0;}

/* Počítadlo „2 ze 3" a věta o vyčerpaném limitu. Obojí je `gray-text`, tedy
   týž tón jako ostatní doplňkové věty sekce. */
.sestavaPlanLimit {margin: 0 0 10px 0; color: #637B7C; font-size: 15px;}
.sestavaPlanPlno {margin: 0 0 10px 0; color: #1F3D3E; font-size: 16px;}
.sestavaPlanJiz {margin: 0 0 10px 0; color: #637B7C; font-size: 15px;}

@media (max-width: 767.98px) {
  /* Na mobilu se náhled zmenší, ať na úzké obrazovce nesebere text celou
     šířku. 64 px je pořád nad prahem 44. */
  .sestavaThumb {width: 64px; height: 64px;}
  .sestavaThumbCislo {font-size: 22px;}
  .sestavySeznamThumb {margin-right: 10px;}
  /* Karta zůstává klikací celá — mění se jen vycpávka, aby se 64px náhled
     a název vešly vedle sebe. */
  .sestavaKarta {padding: 10px 12px;}
  .sestavaKartaSipka {padding-left: 6px;}
  /* Tlačítko „Zpět" přes celou šířku: na úzké obrazovce je to jediná akce
     na konci karty a zarovnání doleva zůstává (text uvnitř na střed by
     kolidoval s `articleDetailBtn`, proto `justify-content: flex-start`). */
  .sestavaZpetDolu .articleDetailBtn {justify-content: flex-start;}
}

/* ==========================================================================
   C19 — přehled: rovná řada sloupců a větší koláče   (11. 9. 2026)
   ==========================================================================

   Reklamoval Jan 11. 9. 2026, dvěma větami:
     „přehled > poslední měsíc : sloupce s čísly jsou vertikálně rozhozené.
      Je to nepřehledné, chybí vztah k měsíci"
     „koláčové grafy udělej trochu tlustší a větší"

   Blok stojí NA KONCI SOUBORU ze stejného důvodu jako D4…L3 výš: v jiných
   worktree běží souběžné dávky a konec souboru je jediné místo, kde si dvě
   linky nepřepíšou práci. Přebíjí se tím pravidla o ~1 500 řádků výš, a to
   je tady navíc nutné: `.userGrafDen` i `.userKolacPlatno` mají specificitu
   (0,1,0) na obou místech, takže rozhoduje jedině pořadí v souboru.

   --------------------------------------------------------------------------
   1) PROČ BYLA ŘADA ROZHOZENÁ — naměřeno, ne odhadnuto
   --------------------------------------------------------------------------

   Změřeno headless Chromem nad markupem složeným ze skutečných šablon
   addonu a nad tímhle souborem, `getBoundingClientRect()` všech sloupců:

     okno „měsíc", viewport 1440   `.userGrafPruhMisto` top = 229 NEBO 247
     okno „měsíc", viewport 390    `.userGrafPruhMisto` top = 269 NEBO 285,5

   Tedy dvě různé úrovně, ne jedna. Příčina je JEDNA a je to prázdný
   popisek: v hustém okně vypisuje `dashGrafOkno()` popisek jen u každého
   n-tého sloupce a ostatním posílá prázdný řetězec, takže jejich
   `.userGrafDen` je blok BEZ ŘÁDKU — naměřená výška **0 px** proti 18 px
   (1440) a 16,5 px (390) u popsaných. `.userGrafRada` má přitom
   `align-items: flex-end`, takže se sloupce srovnávají SPODKEM: kdo nemá
   popisek, spadne o celou jeho výšku níž. Šest popsaných sloupců tím
   viselo nad zbylými čtyřiadvaceti.

   Nespravuje se to zarovnáním řady (to by rozbilo růst pruhu zdola), ale
   tím, že popisek dostane PEVNÉ PÁSMO i když je prázdný. `min-height` je
   v `em`, ne v px, schválně: `.userGrafDen` má čtyři různé velikosti
   písma (14 / 13 / 12 / 11 px podle okna a šířky) a `1.5em` z nich udělá
   přesně tytéž výšky, jaké měl popsaný sloupec předtím (21 / 19,5 / 18 /
   16,5 px). Jedno číslo v px by muselo být čtyřikrát a rozešlo by se při
   první změně velikosti písma.

   Totéž pásmo dostane hodnota nad pruhem. Ta měla `min-height: 18px`, ale
   skutečný řádek textu má při 13 px písma 19,5 px — sloupce se proto
   lišily o 1,5 px i v okně 7 a 14. Nebylo to vidět (pruhy zůstaly
   zarovnané, protože rozdíl padl NAD hodnotu), ale je to táž vada.

   --------------------------------------------------------------------------
   2) `nowrap` U POPISKU JE PODMÍNKA, NE OZDOBA
   --------------------------------------------------------------------------

   Popisek v hustém okně nese od 11. 9. 2026 datum („11. 9."), ne holé
   číslo dne — to je odpověď na „chybí vztah k měsíci". Na sloupec je
   přitom 26,1 px (1440) a 7,9 px (390), takže text je ŠIRŠÍ než sloupec
   a bez `nowrap` by se zalomil na dva řádky — a tím by se vrátila přesně
   ta vada, kterou tenhle blok opravuje. Přetéct může: popisky jsou jen
   u každého sedmého sloupce, mezi nimi je šest prázdných (na 390 px je to
   55 px volného místa na 28 px textu), takže není do čeho narazit.

   --------------------------------------------------------------------------
   3) HODNOTA NAD PRUHEM SE NA TELEFONU SCHOVÁ VE VŠECH TŘECH OKNECH
      (od 11. 9. 2026; do té doby od 14 dnů výš — rozbor zůstává platný,
      jen prah `$dashOknoUzkyPrah` v PHP šel ze 7 na 6)
   --------------------------------------------------------------------------

   Změřeno na viewportu 390: okno 14 dnů má 14,3 px na sloupec a „1 h 2 min"
   se do té šířky láme na TŘI řádky — ale jen u dnů, kdy se cvičilo, takže
   řada čísel stojí na třech úrovních a dlaždice povyroste ze 173,5 na
   209,5 px. Je to táž vada jako u měsíce, jen ji nezpůsobil prázdný
   popisek, nýbrž zalomení.

   Třídu `userGrafOknoUzke` dává PHP každému oknu nad `$dashOknoUzkyPrah`
   (7 dnů); co se s ní stane, rozhoduje CSS. Do stránky tedy jde pořád
   JEDEN markup pro obě šířky — druhé vykreslení pro mobil by znamenalo
   dvojí data v odpovědi a přepínač 7/14/30 by si musel vybírat ze šesti
   bloků místo ze tří. Nic se neztrácí: úplný popis („pondělí 8. 9.,
   1 h 2 min, 2 tréninky") má každý sloupec dál v `sr-only`.

   --------------------------------------------------------------------------
   4) KOLÁČE — „TROCHU TLUSTŠÍ A VĚTŠÍ", ČÍSLY
   --------------------------------------------------------------------------

   Mění se DVĚ hodnoty a obě jen tady v CSS; `stroke-dasharray` v procentech
   ani výpočet v PHP se nedotkly, protože obvod kruhu o poloměru
   15.91549431 je pořád přesně 100 bez ohledu na to, jak je tlustý.

     plocha SVG   128 → 152 px (desktop),  108 → 128 px (telefon)
     stroke-width 5 → 6.5 jednotek viewBoxu

   Po přepočtu na pixely (měřítko je `plocha / 42`, protože viewBox je
   `0 0 42 42`):

     desktop   prstenec Ø 112,2 → 138,7 px   tloušťka 15,2 → 23,5 px
     telefon   prstenec Ø  94,7 → 116,8 px   tloušťka 12,9 → 19,8 px

   Tloušťka roste víc než průměr (+54 % proti +24 %) schválně — Jan chtěl
   „tlustší a větší", v tomhle pořadí. Podíl tloušťky k průměru jde
   ze 13,6 % na 17,0 %, tedy pořád prstenec, ne plný koláč.

   PRÁZDNÝ PRSTENEC SE ZVĚTŠÍ ÚPLNĚ STEJNĚ, a je to celý důvod, proč se
   nesahá na nic jiného než na `.userKolacPlatno` a `stroke-width`:
   `user-kolac-prazdno.html` používá TYTÉŽ třídy, takže „vidět, že je něco
   prázdné" (Jan 10. 9. 2026) platí dál a po prvním tréninku se prstenec
   jen probarví, aniž by se mřížka přeskládala.

   Vnitřní bílý kruh (`r="10.5"`) se nemění: tloušťkou 6,5 sahá prstenec
   dovnitř na poloměr 12,665 jednotky, takže 10,5 je pořád menší a otvor
   zůstane krytý. Kdo by stroke zvětšil nad 10.8 jednotky, začne prstencem
   kreslit přes střed.
   ========================================================================== */

/* --- pevné pásmo popisku i hodnoty: řada drží jednu linku -------------- */
.userGrafHodnota, .userGrafDen {min-height: 1.5em; line-height: 1.5;}
.userGrafDen {white-space: nowrap;}

/* --- koláče o něco větší a znatelně tlustší ---------------------------- */
.userKolacPlatno {flex: 0 0 152px; width: 152px; height: 152px;}
.userKolacKolej, .userKolacDil {stroke-width: 6.5;}

@media (max-width: 767.98px) {
  /* Číslo nad pruhem se na telefonu nevejde v ŽÁDNÉM ze tří oken. Do
     11. 9. 2026 si ho sedmidenní nechávalo (28,5 px na sloupec, „5 min"
     se vejde) — jenže „1 h 2 min" se do té šířky láme na dva řádky
     a řada čísel přestane stát na jedné lince. Rozhoduje o tom PHP
     přes `$dashOknoUzkyPrah`, který šel ze 7 na 6; tohle pravidlo se
     nezměnilo ani o znak a platí dál jen pod 767,98 px, takže desktop
     má hodnoty ve všech třech oknech. */
  .userGrafOknoUzke .userGrafHodnota {display: none;}
  /* Koláč nad legendou (`display: block` o ~1 100 řádků výš) — zvětšuje se
     méně než na desktopu, aby karta nebyla vyšší než obrazovka. */
  .userKolacPlatno {width: 128px; height: 128px;}
}


/* C19 — ÚČET V HLAVNÍM MENU (11. 9. 2026) ==============================

   Zadal Jan: „Na mobilu to dáme do hlavního menu vedle Můj účet oddělené
   pipou. Na desktopu by to byl panel on click jako na h1 s položkama:
   email a odhlásit."

   Blok je na KONCI souboru schválně a nic nad ním se neupravuje: souběžně
   běží druhá dávka (graf a koláče Přehledu) a přepis kdekoli výš by se
   s ní srazil. Jediné, co tahle dávka mění jinde, je markup položky
   `.nav-login` — pravidla pro ni na ř. ~1342 a ~1492 platí dál, protože
   mobilní varianta si třídu `nav-login` i `nav-link` nechává.

   HRANICE JE 1200 px, NE 768. Menu je `navbar-expand-xl`, takže do
   1199,98 px je sbalené v hamburgeru — a rozbalovací panel uvnitř
   rozbaleného menu je dvojí rozbalování na jeden klik. „Mobil" v Janově
   zadání je tedy všechno, co má menu v hamburgeru, a měří se pod 767,98 px
   (viz karta webu: Chrome na macOS okno pod ~500 px nezúží, na rozlišení
   pod hranicí to stačí).

   KONTRASTY jsou SPOČÍTANÉ podle WCAG z hodnot barev, ne odhadnuté
   z obrázku, a všechny stojí na BÍLÉ (`.top-menu-holder {background: white}`
   a `.userNavList {background: #FFFFFF}`):
     #000000 na #FFFFFF  21,00:1  (text menu, dědí se)
     #1F3D3E na #FFFFFF  11,70:1  (položky panelu)
     #1F3D3E na #F2F6F6  10,74:1  (položka panelu pod kurzorem)
     #637B7C na #FFFFFF   4,51:1  (e-mail a svislítko — AA s rezervou 0,01)
   Sedá `#637B7C` se proto NESMÍ položit na hover `#F2F6F6` (4,14:1 a
   propadá) ani zmenšit pod 16 px. E-mail je proto 16 px a hover nemá.

   KLIKACÍ PLOCHA MIN. 44 px: mobilní odkazy i položky panelu mají
   `min-height: 44px` a `display: flex; align-items: center`, takže se
   výška nepočítá z písma a nezmenší se změnou `line-height`.           */

/* --- společné ---------------------------------------------------------- */
.navUcet {white-space: nowrap;}
/* Mobilní tvar je výchozí, panel se zapíná až od 1200 px níž v souboru —
   tedy bez JS a bez media query se vykreslí ten jednodušší z obou. */
.navUcetPanel {display: none;}
.navUcetMobil {display: flex; align-items: center; gap: 8px;}
.navUcet .nav-link {min-height: 44px; display: flex; align-items: center; gap: 6px;}
.navUcetPipa {color: #637B7C; font-size: 16px; line-height: 1;}

/* --- desktopový panel od 1200 px --------------------------------------- */
@media (min-width: 1200px) {
  .navUcetMobil {display: none;}

  /* PANEL SI NESE `position: relative` SÁM. Do 11. 9. 2026 ho bral
     z `.userNavSelect`, jenže tu třídu si vybírá `user-sekce.js`
     (`initNav()` → `querySelectorAll('.userNavSelect')`) a na nalezený
     `.userNavToggle` pověsí `click` s `preventDefault()`. Na obalech,
     kde se ten skript načítá, by tedy odkaz na účet nikam nevedl —
     druhá cesta k témuž, co reklamoval Jan. Menu proto s navigací sekce
     NESDÍLÍ ani jednu z těch dvou tříd a otevírá se čistě kaskádou. */
  .navUcetPanel {display: inline-block; position: relative;}

  /* Tlačítko vypadá jako každá jiná položka menu, protože nese
     `.nav-link` uvnitř `.top-menu-items` a dědí 15 px i AeonikMedium
     z ř. 34 a 41 tohohle souboru. VELIKOST SE TU PROTO NENASTAVUJE —
     do 11. 9. 2026 tu stálo `font-size: 16px` a přesně to Jan reklamoval
     („Můj účet je větším písmem, chci to jednotné"). Kdo sem velikost
     vrátí, vrátí i tu vadu. `font: inherit` je nutné, protože `<button>`
     si jinak vezme systémové písmo prohlížeče, ne písmo menu. */
  .navUcetToggle {min-height: 44px; padding-right: 0; padding-left: .7rem;
     display: flex; align-items: center; gap: 6px;
     margin: 0; border: 0; background: none; color: #000000;
     font: inherit; text-align: left; cursor: pointer;}
  .navUcetToggle:focus {outline: 2px solid #53F8FF; outline-offset: 3px;}

  /* TEXT TLAČÍTKA SEDĚL O 2,75 px NÍŽ NEŽ OSTATNÍ POLOŽKY MENU, A NEBYLO
     TO PÍSMEM. Zadal Jan 12. 9. 2026: „Můj účet je pořád trochu odskočené.
     Ujisti se, že je to stejná velikost fontu." Velikost sedí a seděla —
     změřeno v DOMu (headless Chrome, CSS z produkce, 1440 i 1280 px):
     font-size 15px, line-height 22.5px, AeonikMedium, weight 400,
     letter-spacing normal, padding 8/0/8/11.2 — u tlačítka i u `<a>`
     položek TOTÉŽ. Rozešly se **rámečky**, ne písmo:

       položka menu (`<a>`)   výška 38,5 px   text 18,00 … 35,00
       toggle (`<button>`)    výška 44,0 px   text 20,75 … 37,75

     `<a>` je blok: 8 + line-height 22,5 + 8. Tlačítko má `min-height: 44px`
     (z `.navUcet .nav-link` výš) a `align-items: center`, takže se řádek
     vystředil do 28px vysokého obsahu — o 2,75 px níž. Jan tedy viděl
     odskok správně, jen příčina nebyla ta, kterou čekal.

     VÝŠKA 44 px ZŮSTÁVÁ, MĚNÍ SE JEN ROZDĚLENÍ. Místo `min-height` ji
     drží spodní odsazení (8 + 22,5 + 13,5 = 44), takže obsahový rámeček
     začíná na 16 px jako u `<a>` a řádek padne na 18,00 … 35,00. Klikací
     plocha ani geometrie panelu se nehnou — `.navUcetPanel` měří 44 px
     před i po, tedy rozbalovací seznam zůstává, kde byl.

     `min-height: 0` je tu PODMÍNKA, ne úklid: `.navUcet .nav-link` má
     specificitu (0,2,0), takže selektor musí mít taky dvě třídy a stát
     níž v souboru. Samotné `.navUcetToggle` (0,1,0) by prohrálo — proto
     je `min-height: 44px` o pár řádků výš beze změny chování redundantní.

     NEJVYŠŠÍ PRVEK V ŘÁDKU JE TEXT, ne ikona: změřeno img 20 px, šipka
     9 px, řádek 22,5 px. Kdyby ikona povyrostla nad 22,5 px, rámeček by
     se roztáhl a odskok se vrátí — proto se velikost ikony nemění
     bez přeměření. */
  .navUcet .navUcetToggle {min-height: 0; padding-top: 8px; padding-bottom: 13.5px;}
  /* Šipka patří k textu, ne k pravému okraji: `gap` položky je 6 px,
     takže vlastní `margin-left` už jen dorovnává optickou mezeru za
     posledním písmenem. `.userNavSipka` ze sekce má 10 px a na 15px
     textu to vypadalo, že šipka visí zvlášť. */
  .navUcetSipka {margin-left: 2px; font-size: .6em; line-height: 1;
     color: #637B7C;}

  /* PANEL OTEVÍRÁ KLIK, NE NAJETÍ. Zadal Jan 11. 9. 2026: „Můj účet -
     kliknutí otevře panel s položkami včetně odhlášení."

     `:hover` tu byl chvíli a je ZÁMĚRNĚ PRYČ: na dotyku neexistuje
     a na desktopu otevírá panel při každém projetí myší přes menu.

     DVĚ MECHANIKY, KTERÉ SE NESMÍ POTKAT — táž stavba jako u `h1` sekce,
     ale s VLASTNÍMI jmény tříd. Bez skriptu otevírá `:focus-within`
     (klik dá tlačítku fokus); jakmile `jquery.scripts.js` přidá
     `navUcetJS`, rozhoduje `navUcetOtevreno` a `focus-within` se vypíná.
     Kdyby platily obě, klik by panel otevřel fokusem a toggle ho hned
     zavřel — prvek, který nejde otevřít.

     PROČ VLASTNÍ JMÉNA A NE `.userNavSelect` / `.userNavToggle`:
     `user-sekce.js::initNav()` si ty třídy vyhledává a věší na ně
     `click` s `preventDefault()`. Na obalech, kde se načítá, by si menu
     a navigace sekce sebraly posluchače navzájem. Obsluhu menu proto
     dělá `jquery.scripts.js`, který je na KAŽDÉ stránce — `user-sekce.js`
     je jen ve třech obalech z 24. */
  .navUcetPanel:focus-within .navUcetList {display: block;}
  .navUcetPanel.navUcetJS:focus-within .navUcetList {display: none;}
  .navUcetPanel.navUcetJS.navUcetOtevreno .navUcetList {display: block;}

  /* Seznam se zarovnává DOPRAVA, protože položka účtu je poslední v menu
     a zleva zarovnaný panel by u pravého okraje okna přetekl ven. */
  .navUcetList {left: auto; right: 0; min-width: 260px;}
  .navUcetList .userNavPolozka a {min-height: 44px; display: flex; align-items: center;}
  /* E-mail není odkaz, jen údaj — proto vlastní pravidlo a ne `a`.
     16 px je spodní hranice, pod kterou #637B7C se svými 4,51:1
     na běžný text nestačí. */
  .navUcetEmail {padding: 9px 20px 11px 20px; color: #637B7C; font-size: 16px;
     line-height: 1.4; word-break: break-all; border-bottom: 1px solid #E4E9E9;
     margin-bottom: 4px;}
}

/* --- mobilní řádek: zarovnání svislítka a šedá (11. 9. 2026) ------------
   Zadal Jan: „Na mobilu to vypadá s tou pipou rozházeně a klidně šedé
   jak neaktivní jazyky (jen na mobilu). Jinak desktop panel je ok."

   PROČ SVISLÍTKO VISELO POD ŘÁDKEM — je to měření, ne dohad. Položka
   účtu je v rozbaleném menu POSLEDNÍ, takže na OBA její odkazy sedá
   `.navbar-collapse .nav-item:last-child .nav-link {padding-bottom: 34px
   !important}` (ř. ~1489). Odkaz je `display: flex; align-items: center`,
   takže si text vycentruje do svého OBSAHOVÉHO boxu, tedy nad těch
   34 px. Svislítko je holý `span` bez padding a `.navUcetMobil` ho
   centruje na celou výšku řádku. Změřeno na skutečných 375 px:
   odkaz 457,5 + 66 px s `padding-bottom: 34px` → střed textu 477,5;
   svislítko y 482,5 h 16 → střed 490,5. Rozdíl **13 px**.

   SPRAVUJE SE TO PŘESUNEM TÉ MEZERY, NE JEJÍM ZRUŠENÍM. Oněch 34 px
   je odstup na konci rozbaleného menu a má tam zůstat; jen nepatří na
   odkaz uvnitř řádku, ale na celý řádek. Součet je schválně týž
   (44 + 22 = 66 px), takže se nic pod menu neposune.

   SPECIFICITA SE TU MUSÍ SPOČÍTAT, NE ODHADNOUT, a při psaní tohohle
   bloku se na to šláplo: přebíjený selektor
   `.navbar-collapse .nav-item:last-child .nav-link` má ve sloupci tříd
   ČTYŘI položky (dvě třídy + `:last-child` + `.nav-link`), tedy (0,4,0),
   ne (0,3,0). První pokus `.navUcet .navUcetMobil .nav-link` byl (0,3,0)
   a `!important` mu nepomohlo — v měření se to poznalo podle toho, že
   `padding-top` se přepsal (tam soupeř `!important` nemá) a
   `padding-bottom` ne. Proto je tady (0,5,0).

   ŠEDÁ JE #637B7C, A SCHVÁLNĚ NENÍ #808080 PŘEPÍNAČE JAZYKŮ.
   Jan řekl „klidně šedé jak neaktivní jazyky" a myslel tím VZHLED, ne
   konkrétní hex — nečitelné to být nemá. Obě barvy jsou spočítané podle
   WCAG proti bílému pozadí menu (`.top-menu-holder` i rozbalený
   `.navbar-collapse` mají `rgb(255, 255, 255)`, změřeno v DOMu):

     #808080  (přepínač jazyků, ř. 72)   3,95:1   POD AA
     #637B7C  (tady)                     4,51:1   AA
     #000000  (ostatní položky menu)    21,00:1

   #637B7C je barva, kterou web už má (e-mail v panelu, svislítko před
   touhle dávkou), pořád čte jako neaktivní šeď a práh 4,5:1 splňuje.
   KDO TO SROVNÁ NA #808080 „aby to bylo stejné jako jazyky", shodí
   kontrast pod AA — proto je rozdíl vysvětlený tady a ne v commitu.

   Přepínač jazyků sám tahle dávka NEMĚNÍ: má tutéž vadu, ale je to jiná
   plocha a jiné rozhodnutí.                                          */
@media (max-width: 1199.98px) {
  .navbar-collapse .navUcet.nav-item .navUcetMobil .nav-link {
     padding-top: 0 !important; padding-bottom: 0 !important;}
  .navUcetMobil {padding-bottom: 22px;}
  .navUcet .navUcetMobil a.navUcetOdhlasit,
  .navUcet .navUcetMobil .navUcetPipa {color: #637B7C;}
}


/* C19 — odhlašovací stránka `odhlasit.php` ==============================
   Samostatný skript v kořeni webu, ne stránka CMS — proto nemá obal
   a potřebuje jediné pravidlo navíc: odsazení textu pod nadpisem.     */
.userOdhlaseniText {margin: 0; font-size: 17px; color: #1F3D3E;}
/* Chybová věta je schovaná atributem `hidden` a odkrývá ji `user-sekce.js`,
   když `signOut()` neprojde. Pravidlo tu je schválně, i když `[hidden]`
   umí prohlížeč sám: `.alert` je autorská třída a UA pravidlo pro `[hidden]`
   má tutéž specificitu, takže by stačilo, aby někdo `.alert` dal `display`,
   a věta by svítila na každém odhlášení. Tohle je (0,2,0) a rozhodne. */
.userOdhlaseniChyba[hidden] {display: none;}


/* C19 — DIALOG ODHLÁŠENÍ Z PANELU V MENU (11. 9. 2026) =================

   Zadal Jan: „to je ok, ale klik na odhlášení v panelu by pořád mělo
   vyvolat ten dialog, jak tam byl."

   Je to TÝŽ dialog jako v patičce sekce — táž šablona, tytéž třídy,
   tytéž texty. Přibývají jen dvě pravidla a obě řeší to, že dialog
   tentokrát stojí UVNITŘ `div.fixed-top`.

   1) VLASTNÍ PLACHTA MÍSTO BOOTSTRAPÍ. `div.fixed-top` má
      `position: fixed` a `z-index: 1030`, tedy vlastní vrstvící kontext;
      bootstrapí `.modal-backdrop` přitom visí na `body` s `z-index: 1040`,
      takže se položí NA dialog, ne pod něj. Změřeno 11. 9. 2026 headless
      Chromem nad staženou produkční stránkou: `elementFromPoint` uprostřed
      tlačítka „Odhlásit se" vrátil `DIV.modal-backdrop` a dialog byl
      neklikatelný. PHP proto u téhle jedné instance posílá
      `data-backdrop="false"` a plachtu si dialog nese sám. Po změně vrací
      týž bod `A.blueButton.userOdhlaseniPotvrdit` (na 1440 px tlačítko
      191 × 44 px na 534,393) a „Zůstat přihlášeni"
      `BUTTON.userOdhlaseniZrusit` (167 × 46 px).

      Barva je TÁŽ, jakou má `.modal-backdrop` na tomhle webu (ř. ~1310):
      bílá na 80 %. Žádná nová barva, jen jiný nosič. `data-dismiss`
      na plachtě dodává zavírání klikem vedle, které by se s vypnutou
      bootstrapí plachtou jinak ztratilo — změřeno, že po kliknutí na ni
      je `display` dialogu zpátky `none`.

      Plachta je v šabloně PŘED `.modal-dialog`, takže ji dialog v témže
      vrstvícím kontextu překrývá pořadím v dokumentu. Kdo ji přesune za
      něj, zakryje jí vlastní tlačítka.

   2) `white-space` SE MUSÍ VRÁTIT NA NORMAL. Položka účtu má
      `.navUcet {white-space: nowrap}` (ř. ~3942), aby se „Můj účet |
      Odhlásit" nezalomilo — a dialog tu vlastnost dědí, protože leží
      uvnitř té položky. Bez tohohle řádku by otázka „Opravdu se chcete
      odhlásit?" byla jeden nezalomitelný řádek přes celou šířku okna.
      V patičce sekce se to neprojevuje, tam žádný `nowrap` nad dialogem
      není.                                                              */
.userOdhlaseniPlachta {position: fixed; top: 0; right: 0; bottom: 0; left: 0;
   background: #FFFFFF; opacity: .8;}
.userOdhlaseniModal {white-space: normal;}

/* ==========================================================================
   C19 — TŘI KROKY K PRVNÍMU TRÉNINKU (13. 9. 2026)
   ==========================================================================

   Zadal Jan 13. 9. 2026: „Přehled > panel 1 »Zatím tu nemáme žádné odcvičené
   tréninky.« bych rád trochu upravil. Je to kompletně textový panel úplně
   a je první na ráně. Nemůžeme tam dát něco vizuálního a zároveň
   vypovídajícího?" Rozbor, proč schodiště a ne tlumený graf, je v
   `addons/userAccount/sekce/dashboard.inc.php`, metoda `dashStartKroky()`.

   ŽÁDNÁ NOVÁ BARVA. #1F3D3E, #637B7C a #E4E9E9 už v sekci jsou
   (`.userReaktivaceStore`, `.dashboard-detail .gray-text`, `.userReaktivace`).

   KONTRAST SE POČÍTÁ PROTI BÍLÉ KARTĚ (`.userDlazdice` je #FFFFFF), a je to
   ten důvod, proč kolečka kroků 2 a 3 mají výplň BÍLOU a ne tónovanou:
   #637B7C na bílé je 4,51 : 1, tedy jen o setiny nad prahem 4,5 — jakákoli
   šedá plocha pod tím textem by ho shodila pod něj. Jediná tmavá plocha je
   kolečko kroku 1 a na něm stojí bílý text (#FFFFFF na #1F3D3E = 11,70 : 1).

   RÁMEČEK KOLEČEK JE #637B7C, NE SVĚTLEJŠÍ ŠEDÁ. Odlišuje „příští" krok od
   „teď", takže nese informaci a musí být vidět (4,51 : 1 proti bílé). Světlá
   #E4E9E9 nese jen svislou spojnici, která je ozdoba — pořadí kroků říká
   `<ol>` a čísla v kolečkách, ne ta linka.

   BEZ TOHOHLE BLOKU ZŮSTANE SCHODIŠTĚ ČITELNÉ: očíslovaný seznam tří vět
   a pod první z nich odkazy do obchodů. Proto se `style.css` smí nasadit
   i po addonu, ne nutně s ním.

   SVISLÝ SEZNAM, NE TŘI SLOUPCE: dlaždice má půl šířky obsahu a krok 1
   v sobě nese dvě tlačítka obchodů a QR 120 × 120 px. Do třetiny poloviny
   se to nevejde v žádné šířce okna, takže vodorovná varianta by musela mít
   vlastní zalomení na mobilu — a to je druhý layout k údržbě.             */

.userStart {margin: 18px 0 0 0; padding: 0; list-style: none;}
.userStartKrok {position: relative; padding: 0 0 20px 42px;}
.userStartKrok:last-child {padding-bottom: 0;}
/* Spojnice začíná pod kolečkem a končí na dně kroku, takže navazuje na
   kolečko následující. U posledního kroku by vedla nikam. */
.userStartKrok::before {content: ""; position: absolute; left: 13px; top: 30px;
   bottom: 0; width: 2px; background: #E4E9E9;}
.userStartKrok:last-child::before {display: none;}
.userStartKrokCislo {position: absolute; left: 0; top: 0; box-sizing: border-box;
   display: flex; align-items: center; justify-content: center;
   width: 28px; height: 28px; border-radius: 50%;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 15px; line-height: 1;}
.userStartKrokTed .userStartKrokCislo {background: #1F3D3E; color: #FFFFFF;
   border: 2px solid #1F3D3E;}
.userStartKrokPristi .userStartKrokCislo {background: #FFFFFF; color: #637B7C;
   border: 2px solid #637B7C;}
.userStartKrokText {display: block; min-height: 28px; padding-top: 3px;
   font-size: 16px; line-height: 1.4;}
.userStartKrokTed .userStartKrokText {color: #1F3D3E;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.userStartKrokPristi .userStartKrokText {color: #637B7C;}
/* Obsah kroku 1 (obchody, QR) sedí pod svým popiskem, ne vedle něj —
   odsazení nese `padding-left` položky, takže se nastavuje jen odstup. */
.userStartKrok .userReaktivaceTlacitka {margin: 12px 0 0 0;}
.userStartKrok .userAppkaQr {margin: 12px 0 0 0;}

@media (max-width: 575px) {
  /* QR se na úzkém okně skrývá (`.userAppkaQr` výš), takže po něm nesmí
     zůstat odstup — jinak má krok 1 dole prázdné místo. Kolečka zůstávají
     28 px: jsou to jediná kotva, podle které se v řadě čte pořadí. */
  .userStartKrok {padding-bottom: 18px;}
}

/* ==========================================================================
   QR V ROHU KARTY (C19, 14. 9. 2026)
   ==========================================================================

   Zadal Jan 14. 9. 2026: „Přehled > panel 1 Aktuální stav - ten QR kód jako
   ikonu doprava nahoru do rohu. Po kliku se QR zvětší." Rozbor mechanismu je
   v `addons/userAccount/sekce/dashboard.inc.php`, metoda `dashQrRoh()`.

   ROZBALUJE TO `<details>`, NE SKRIPT — výstup addonu prochází ještě jednou
   `Template::compile()`. Tenhle blok proto jen schovává výchozí trojúhelníček
   a dělá z otevřeného obsahu plovoucí panel; kdyby CSS vypadlo, zůstane
   funkční rozbalovací blok s obrázkem, jen v toku stránky.

   POZIČNÍ KOTVA JE `.userReaktivace`, NE `.userDlazdice`. Karta je sdílená
   třída všech dlaždic sekce a `position: relative` na ní by změnila
   souřadnicový systém i grafu, odznakům a koláčům. Panel reaktivace má navíc
   pravý okraj totožný s obsahovou plochou karty, takže roh vyjde stejně.

   BÍLÉ POZADÍ PANELU JE PODMÍNKA, NE VKUS: popisek je šedý #637B7C, tedy
   4,512 : 1 proti bílé — jakákoli tónovaná výplň ho shodí pod práh 4,5.

   PROČ SE NESKRÝVÁ POD 576 px, KDEŽTO `.userAppkaQr` ANO: tam šlo o blok
   120 × 120 px, po kterém by v kroku 1 zůstala díra. Ikona 44 × 44 px v rohu
   díru nenechá. Na telefonu se stejně nevykreslí vůbec — rozhoduje o tom
   `dashZarizeni()` na serveru, ne šířka okna.                              */

.userReaktivace {position: relative;}
.userAppkaQrRoh {position: absolute; top: 0; right: 0; z-index: 3;}
/* 44 px je minimální dotyková plocha; obrázek uvnitř má 36 px. */
.userAppkaQrRohIkona {box-sizing: border-box; display: flex;
   align-items: center; justify-content: center; width: 44px; height: 44px;
   padding: 3px; background: #FFFFFF; border: 1px solid #E4E9E9;
   border-radius: 10px; cursor: pointer; list-style: none;}
/* Výchozí trojúhelníček `<summary>` pryč — obě cesty, protože WebKit má
   vlastní pseudoprvek a ostatní prohlížeče `::marker`. */
.userAppkaQrRohIkona::-webkit-details-marker {display: none;}
.userAppkaQrRohIkona::marker {content: "";}
.userAppkaQrRohIkona:hover, .userAppkaQrRoh[open] .userAppkaQrRohIkona {
   border-color: #1F3D3E;}
.userAppkaQrRohMala {display: block; width: 36px; height: 36px;}
/* OTEVŘENÝ KÓD JE MODÁLNÍ POPUP DOPROSTŘED OBRAZOVKY (14. 9. 2026 večer).
   Zadal Jan: „QR - pořád nefunguje to zavření. Nechceš to udělat klasickým
   popupem doprostřed s poloprůhledným bílým bg?" Do té doby to byla plovoucí
   kartička 252 × 307 px u ikony (`position: absolute`).

   PLACHTA JE PRŮHLEDNÁ, KARTA NIKDY. Popisek v kartě je #637B7C, tedy
   4,512 : 1 proti bílé — pod plachtou prosvítající obsah stránky by ho
   shodil pod práh 4,5. Karta má proto plné #FFFFFF a průhledná je jen
   plachta pod ní. Barva plachty je TÁŽ, jakou má na tomhle webu dialog
   odhlášení (`.userOdhlaseniPlachta`, ř. ~4669) a bootstrapí
   `.modal-backdrop` (ř. ~1347): bílá na 80 %. Žádná nová barva.

   `z-index: 1100` V OTEVŘENÉM STAVU, A NENÍ TO ROZMAR. `.userAppkaQrRoh`
   má `position: absolute` a `z-index: 3`, tedy VLASTNÍ VRSTVÍCÍ KONTEXT —
   všechno vevnitř se řadí až podle téhle jedné hodnoty. Hlavička webu je
   `div.fixed-top` se `z-index: 1030`, takže s trojkou by ležela NA plachtě
   i na kartě. Přesně tahle past už jednou padla u dialogu odhlášení
   (ř. ~4645). Doklad je `elementFromPoint`, ne CSS: uprostřed karty musí
   vracet obrázek QR, nad hlavičkou plachtu.

   IKONA ZŮSTÁVÁ NAD PLACHTOU, aby zůstala JEDNA CESTA VEN BEZ JAVASCRIPTU.
   `<summary>` je v toku, plachta je `position: fixed`, takže by ji bez
   `z-index` překryla — a klik na ikonu by se do ní netrefil. S JS by to
   nevadilo (klik na plachtu zavírá taky), bez JS by to znamenalo popup,
   který nejde zavřít vůbec. Tedy právě ten stav, který Jan reklamoval.

   ZAVŘENÝ STAV SE SCHOVÁVÁ TADY, NE UA STYLEM `<details>`, a je to oprava
   po měření: Chrome dnes obsah zavřeného `<details>` neskrývá `display:none`,
   ale `content-visibility: hidden` na `::details-content`. Absolutně
   pozicovaný panel tím sice zůstane nenamalovaný, ale POŘÁD MÁ GEOMETRII
   (změřeno 14. 9. 2026: 44 × 248 px u zavřeného panelu) — takže se nedá
   dokázat, že je schovaný, a chování závisí na verzi prohlížeče. Explicitní
   `display` je měřitelný: zavřená karta i plachta mají 0 × 0.

   ŽÁDNÉ `max-width: 100%`, PŘESTOŽE UŽ JE KARTA `fixed`. Procenta by se
   počítala z obalového `.userAppkaQrRoh`, a to je široké 44 px jako ikona —
   14. 9. 2026 se tím otevřený QR smrskl na 10 × 10 px. Strop je proto
   `100vw`/`100vh`, tedy okno, ne rodič. */
/* DVĚ MECHANIKY, PŘEPÍNAČ JE TŘÍDA `userAppkaQrJS`, a je to táž zásada
   jako u `.userNavJS` o pár stovek řádků výš. Bez JavaScriptu (nebo když
   `user-sekce.js` nedojde z cache, což je příčina vady ze 14. 9. 2026)
   platí PRVNÍ blok: plovoucí kartička u ikony, tedy stav do 14. 9. 2026,
   která se zavírá klikem na ikonu — to umí prohlížeč sám. Teprve když
   skript navěsí posluchače, přidá si `<details>` třídu a platí DRUHÝ
   blok: modální popup doprostřed.

   BEZ TOHOHLE PŘEPÍNAČE BY STARÝ SKRIPT V CACHI ZNAMENAL POPUP, KTERÝ
   NEJDE ZAVŘÍT VŮBEC. Karta modálu stojí uprostřed okna a na desktopu
   ikonu PŘEKRÝVÁ (změřeno na 1440 px: ikona dlaždice na x 636, karta
   zabírá 560–880), takže klik na ikonu je klik do karty — a ten zavírat
   nesmí. Se skriptem to nevadí, protože vedou ven ještě křížek, plachta
   a Escape; bez skriptu by nezbylo nic.                                */

/* --- bez JS: plovoucí kartička u ikony (stav do 14. 9. 2026) ---------- */
.userAppkaQrRohPlachta {display: none;}
.userAppkaQrRohPanel {display: none; box-sizing: border-box;
   position: absolute; top: 50px; right: 0; width: 252px; padding: 16px;
   background: #FFFFFF; border: 1px solid #E4E9E9; border-radius: 14px;
   box-shadow: 0 8px 28px rgba(31,61,62,0.18);}
.userAppkaQrRoh[open] .userAppkaQrRohPanel {display: block;}
/* Křížek bez JS nic nedělá, takže se nevykresluje. Mrtvý ovladač je horší
   než žádný — totéž pravidlo, podle kterého PHP vynechá celé tlačítko,
   když pro něj není text. */
.userAppkaQrRohZavrit {display: none;}

/* --- s JS: modální popup doprostřed obrazovky ------------------------- */
.userAppkaQrJS[open] {z-index: 1100;}
.userAppkaQrJS[open] .userAppkaQrRohIkona {position: relative; z-index: 2;}
.userAppkaQrJS[open] .userAppkaQrRohPlachta {display: block; position: fixed;
   top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
   background: #FFFFFF; opacity: .8;}
/* `right: auto` je podmínka, ne úklid: kdyby zůstalo `right: 0` z bloku
   výš, byla by karta překurčená (left + right + width) a prohlížeč by
   jednu z hodnot zahodil. `padding-top` 48 px drží křížku vlastní řádek —
   kdyby ležel na QR, zakryl by mu rohový zaměřovací čtverec, a
   nenaskenovaný kód je horší než o 28 px vyšší karta. */
.userAppkaQrJS .userAppkaQrRohPanel {position: fixed; top: 50%; left: 50%;
   right: auto; z-index: 3; transform: translate(-50%, -50%);
   width: 320px; max-width: calc(100vw - 32px);
   max-height: calc(100vh - 32px); overflow: auto;
   padding: 48px 20px 20px; text-align: center;}
/* 44 × 44 px je dotykový práh, `&times;` uvnitř je jen 30px glyf. Barva
   #1F3D3E na bílé je 11,697 : 1; podbarvení při hoveru a fokusu je #F3F3F5,
   na kterém týž text drží 10,86 : 1 — obojí změřeno v DOMu, ne odhadnuto. */
.userAppkaQrJS .userAppkaQrRohZavrit {position: absolute; top: 4px; right: 4px;
   display: flex; align-items: center; justify-content: center;
   width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
   background: transparent; color: #1F3D3E; cursor: pointer;}
.userAppkaQrJS .userAppkaQrRohZavrit:hover,
.userAppkaQrJS .userAppkaQrRohZavrit:focus {background: #F3F3F5;}
.userAppkaQrRohKriz {display: block; font-size: 30px; line-height: 30px;}
/* Zdroj je SVG, takže 220 px není zvětšenina — je to jiné vykreslení téhož
   vektoru. Práh čitelnosti QR z obrazovky je kolem 120 px.
   `margin: 0 auto` proto, že `text-align: center` na kartě blokový obrázek
   nevystředí. */
.userAppkaQrRohVelka {display: block; width: 220px; height: 220px;
   margin: 0 auto; background: #FFFFFF;}
/* Velikost písma tu NENÍ: `.dashboard-detail .gray-text` (0,2,0) je silnější
   a dává 16 px. Deklarace, která nikdy neplatí, je horší než žádná. */
.userAppkaQrRohPopis {display: block; margin-top: 10px; color: #637B7C;
   line-height: 1.35;}
/* Aby ikona nelezla do velké věty panelu. Třídu přidává PHP jen tehdy, když
   roh opravdu vznikl — bez QR se odsazení nedělá. */
.userReaktivaceSQr .userReaktivaceHlavni {padding-right: 56px;}

/* ==========================================================================
   DVA BOXY V PANELU „NÁPAD NA DNEŠEK" (C19, 14. 9. 2026)
   ==========================================================================

   Zadal Jan 14. 9. 2026: „nad »otevřít moje sestavy« by mohly být 2 boxy
   s obrázkem". Rozbor a měření, proč box nemíří na „quick workout", je
   v `addons/userAccount/sekce/dashboard.inc.php`, metoda `dashVolby()`.

   KARTA S ODKAZEM, NE TLAČÍTKO. Na stránce je právě jedno primární tlačítko
   (pravidlo z 13. 9. 2026) a dva nové boxy ho nesmí zdvojit. Proto rámeček
   karty a bílá výplň, žádná `.blueButton` ani `.userReaktivaceStore`.

   BÍLÉ POZADÍ JE PODMÍNKA: věta boxu je #637B7C, tedy 4,512 : 1 proti bílé.
   Tónovaná výplň by ji shodila pod 4,5. Jediná tmavá plocha je čtverec
   ikony, a na něm stojí bílá ikona (11,697 : 1).

   `flex-basis: 180px` a `flex-wrap`: v půlšířkové dlaždici se dva boxy
   vejdou vedle sebe, v úzkém okně se složí pod sebe. Žádná media query
   k tomu není potřeba a nevzniká tím druhý layout k údržbě.

   BEZ OBRÁZKU TO NEVYPADÁ ROZBITĚ — místo `<img>` se vykreslí ikona
   Font Awesome (na stránce už načtená). Až Jan obrázky dodá, vymění se
   obsah čtverce a nic dalšího se nehýbe.                                  */

.userVolby {display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 0 0;}
.userVolba {box-sizing: border-box; display: flex; align-items: center;
   flex: 1 1 180px; min-width: 0; padding: 12px 14px; background: #FFFFFF;
   border: 1px solid #E4E9E9; border-radius: 12px; color: #1F3D3E;
   text-decoration: none;}
.userVolba:hover, .userVolba:focus {border-color: #1F3D3E; color: #1F3D3E;
   text-decoration: none;}
.userVolbaObr {box-sizing: border-box; display: flex; align-items: center;
   justify-content: center; flex: 0 0 auto; width: 56px; height: 56px;
   margin-right: 12px; background: #FFFFFF; border-radius: 10px;
   overflow: hidden;}
.userVolbaObr img {display: block; width: 56px; height: 56px;
   object-fit: cover;}
.userVolbaObrIkona {background: #1F3D3E; color: #FFFFFF; font-size: 22px;}
.userVolbaText {display: block; min-width: 0;}
.userVolbaNadpis {display: block; color: #1F3D3E; font-size: 16px;
   line-height: 1.3;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
/* Bez `font-size`: `.dashboard-detail .gray-text` (0,2,0) je silnější a dává
   16 px — což je zároveň velikost, jakou má doplněk v sousedních kartách. */
.userVolbaVeta {display: block; margin-top: 3px; color: #637B7C;
   line-height: 1.35;}

/* --- BOX S NABÍDKOU Z APLIKACE (C19, 14. 9. 2026) -------------------------

   Týž box jako výš, jen NENÍ ODKAZ (`<div>`, ne `<a>`) — deep link na
   workout ani na sestavu dnes v prohlížeči nefunguje, takže se hover ani
   kurzor ukazovat nesmí. Prvek, který vypadá klikatelně a není, je horší
   než prvek, který o sobě nic netvrdí.

   `align-items: flex-start`: řádky jsou čtyři (typ, název, délka, „Najdete
   v aplikaci"), takže je text vyšší než náhled 56 px a svislé vystředění
   by obrázek posunulo doprostřed sloupce.

   SPECIFICITA JE PODMÍNKA, NE ÚKLID. `.dashboard-detail .gray-text` (0,2,0)
   dává 16 px; `.userVolbaTyp` samotné (0,1,0) by prohrálo a overline by měl
   velikost názvu. Proto `.userVolbaAppka .userVolbaTyp` — dvě třídy a níž
   v souboru. Táž past, jakou popisuje komentář o pár řádků výš.

   KONTRAST PROTI BÍLÉ KARTĚ: overline i meta řádek jsou #637B7C (4,512 : 1),
   tedy těsně nad prahem — pozadí boxu proto zůstává #FFFFFF a tónovat se
   nesmí. Řádek „Najdete v aplikaci" je #1F3D3E na #F4F7F7 (10,858 : 1);
   nese ho světlá plocha schválně, aby bylo poznat, že je to štítek, ne
   tlačítko.                                                               */

.userVolbaAppka {align-items: flex-start; cursor: default;}
.userVolbaAppka:hover, .userVolbaAppka:focus {border-color: #E4E9E9;
   color: #1F3D3E;}
.userVolbaAppka .userVolbaObr {align-self: flex-start;}
.userVolbaAppka .userVolbaTyp {display: block; margin: 0 0 2px 0;
   color: #637B7C; font-size: 13px; line-height: 1.2;
   letter-spacing: 0.04em; text-transform: uppercase;}
.userVolbaAppka .userVolbaKde {display: inline-block; margin-top: 7px;
   padding: 3px 9px; background: #F4F7F7; border-radius: 999px;
   color: #1F3D3E; font-size: 13px; line-height: 1.3;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}

/* --- KARTA S ODKAZEM DO KATALOGU (C19, 14. 9. 2026) -----------------------

   Třetí slide karuselu. Je to ODKAZ, takže hover a kurzor z `.userVolba`
   platí a nesmí se rušit — na rozdíl od app-slidů, ze kterých se kliknout
   nedá. Přebírá jen overline, aby ta trojice působila jako jedna sada.

   SPECIFICITA: `.userVolbaKatalog .userVolbaTyp` jsou dvě třídy (0,2,0),
   takže přebije `.dashboard-detail .gray-text` — táž past, jakou popisuje
   komentář výš, a stejné řešení. Deklarace se opisuje místo přidání
   selektoru k pravidlu `.userVolbaAppka`, protože ta dvě pravidla nejsou
   totéž: appka má `cursor: default` a zrušený hover, katalog obojí naopak.

   `align-items: flex-start`: řádky jsou tři (overline, nadpis, věta), tedy
   výš než náhled 56 px, a svislé vystředění by obrázek posunulo doprostřed
   sloupce. Totéž dělá `.userVolbaAppka`.                                  */

.userVolbaKatalog {align-items: flex-start;}
.userVolbaKatalog .userVolbaObr {align-self: flex-start;}
.userVolbaKatalog .userVolbaTyp {display: block; margin: 0 0 2px 0;
   color: #637B7C; font-size: 13px; line-height: 1.2;
   letter-spacing: 0.04em; text-transform: uppercase;}

/* --- KARUSEL NÁPADŮ (C19, 14. 9. 2026) ------------------------------------

   Jan 14. 9. 2026: „místo 2 panelů sestav / QW se bude zobrazovat 1
   v karuselu, celkem 3. Šipky pro posun a nav puntíky doprostřed dolů do
   panelu, funkční swipe."

   TŘÍDA `userVolbyKaruselJS` JE PŘEPÍNAČ MEZI DVĚMA MECHANIKAMI, ne ozdoba,
   a přidává ji `user-sekce.js` na konci `initVolbyKaruselJeden()`. Důvod je
   doručení: `.js` se na tomhle webu bere z prohlížečové cache a kdo měl
   stránku otevřenou před `84b8f7a2`, drží starou kopii. Kdyby karusel jel
   z CSS, znamenal by mrtvý skript JEDEN VIDITELNÝ SLIDE BEZ CESTY NA DALŠÍ
   DVA — tichá ztráta obsahu, tedy nejhorší možná vada. Bez té třídy proto
   platí dnešní stav:

     - pás si nechává `flex-wrap: wrap` z `.userVolby`, takže slidy stojí
       vedle sebe a v úzkém okně se složí pod sebe, jako dnes,
     - ovládací řádek je `display: none`, tedy 0 × 0.

   ŠIPKY STOJÍ DOLE U PUNTÍKŮ, NE PO STRANÁCH SLIDU, a rozhodlo o tom měření:
   dlaždice je úzká (280 px při okně 768) a šipky po stranách z ní ukrajovaly
   2 × 44 px i s mezerami, takže kartě zbylo 184 px a její výška vyskočila
   ze 119 na 212 px, jak se text lámal. Dole neberou slidu nic a puntíky
   zůstávají na středu panelu, protože obě šipky jsou stejně široké.

   VÝŠKA SLIDŮ SE NESMÍ MĚNIT MEZI SLIDY. App-slide má čtyři řádky textu,
   katalogový dva — a kdyby se panel mezi posuny zkracoval, poskočil by celý
   zbytek dlaždice. Řeší to `align-items: stretch` na pásu (tedy výchozí
   chování flexu): všechny slidy jsou vysoké jako ten nejvyšší, bez měření
   a bez JS.

   `touch-action: pan-y` NA PLOŠE JE CELÝ SWIPE. Prohlížeč tím dostane
   vodorovné gesto k nám a svislé si nechá pro scroll stránky, takže skript
   nemusí volat `preventDefault()` ani jednou — a nemůže tedy ukradnout
   scroll, což je u karuselů na dotyku ta nejčastější vada.

   DOTYKOVÁ PLOCHA 44 × 44 u šipek i puntíků. U puntíku je celé tlačítko
   44 × 44 a vidět je jen terč 8 px, takže se dá zasáhnout prstem, i když
   vypadá malý.

   NEAKTIVNÍ TERČ JE #7E9495, A JE TO ZMĚŘENÉ, NE VKUS. První verze měla
   #C3CFCF, což je na bílé **1,597 : 1** — pod prahem 3 : 1 pro ovládací
   prvek, takže kdo hůř vidí, nepozná, že tam další puntíky vůbec jsou,
   a tedy ani že karusel má tři slidy. #7E9495 dává **3,203 : 1** na bílé
   a přitom pořád **3,652 : 1** proti aktivnímu #1F3D3E (ten má na bílé
   11,697 : 1). Rozdíl navíc NENÍ jen barvou — aktivní terč je i větší
   (10 px proti 8), aby se stav dal poznat bez rozlišování odstínů.

   `prefers-reduced-motion`: posun je pak skokový, ne animovaný. Karusel se
   sám neotáčí (Jan ho nechtěl), takže žádná jiná animace tu není.         */

.userKaruselSlide {display: flex; flex: 1 1 180px; min-width: 0;}
.userKaruselOvladani {display: none;}

.userVolbyKaruselJS .userKaruselPas {flex-wrap: nowrap; gap: 0;
   align-items: stretch; transition: transform 0.28s ease;}
.userVolbyKaruselJS .userKaruselPlocha {overflow: hidden; touch-action: pan-y;}
.userVolbyKaruselJS .userKaruselOvladani {display: flex;
   justify-content: center; align-items: center; gap: 2px;}
.userVolbyKaruselJS .userKaruselSlide {flex: 0 0 100%; max-width: 100%;}
.userVolbyKaruselJS .userKaruselSipka {box-sizing: border-box; display: flex;
   align-items: center; justify-content: center; flex: 0 0 auto;
   width: 44px; height: 44px; padding: 0; background: #FFFFFF;
   border: 1px solid #E4E9E9; border-radius: 999px; color: #1F3D3E;
   font-size: 15px; line-height: 1; cursor: pointer;}
.userVolbyKaruselJS .userKaruselSipka:hover {border-color: #1F3D3E;}
.userVolbyKaruselJS .userKaruselSipka[disabled] {opacity: 0.4;
   cursor: default; border-color: #E4E9E9;}
.userVolbyKaruselJS .userKaruselPuntiky {display: flex; justify-content: center;
   align-items: center; gap: 2px;}
.userKaruselPuntik {box-sizing: border-box; display: flex; align-items: center;
   justify-content: center; width: 44px; height: 44px; padding: 0;
   background: none; border: 0; cursor: pointer;}
.userKaruselPuntikTerc {display: block; width: 8px; height: 8px;
   border-radius: 50%; background: #7E9495;}
.userKaruselPuntik[aria-current="true"] .userKaruselPuntikTerc {width: 10px;
   height: 10px; background: #1F3D3E;}

@media (prefers-reduced-motion: reduce) {
   .userVolbyKaruselJS .userKaruselPas {transition: none;}
}

/* --- KARUSEL NÁPADŮ, DRUHÉ KOLO (C19, 14. 9. 2026) ------------------------

   Jan 14. 9. 2026: „obrázek velký jako v Moje sestavy · oddělat šipky,
   on hover na panel zobrazit v panelu šipku bez kolečka doprava jako máme
   na Potíže. Clikem na to posun na další slide a cyklicky · tečky víc
   k sobě a v karuselu, ne pod ním. Ale aby to na mobilu šlo pořád ovládat.
   Autoplay a aktuální slide bude mít z tečky pilulku jako na Apple TV
   slideru · 4. slide bude link na Moje sestavy."

   VŠECHNO JE ZAVĚŠENÉ NA `.userKaruselAuto`, kterou dává jen nová šablona.
   Dnešní karusel (bez té třídy) se tímhle blokem nezmění ani o pixel —
   je to podmínka vypínače `userDashVolbyKaruselAuto`, ne úklid.

   88 PX NENÍ ODHAD, JE TO OPSANÁ HODNOTA. Náhled sestavy v panelu „Moje
   sestavy" je `.sestavaThumb {width: 88px; height: 88px}` a na mobilu
   64 px — obojí se tu opakuje, včetně té media query, aby se ty dvě místa
   nerozešla. Zdrojové soubory (`files/App/grid/`, 160 px) na 88 px stačí:
   je to 1,8× vykreslované velikosti, tedy nad retina dvojnásobkem u 64
   a těsně pod ním u 88.

   ŠIPKA LEŽÍ PŘES OBSAH, A JE TO ZAPLACENÉ MĚŘENÍM. V prvním kole stály
   šipky po stranách slidu, při okně 768 ukrojily z 280px karty 96 px
   a výška karty vyskočila ze 119 na 212 px. Proto `position: absolute`
   nad plochou: karta si nechá celou šířku a šipka se na ni jen položí.
   `@media (hover: hover)` je druhá polovina té úvahy — na dotyku by
   překryv jen ukrajoval plochu pro swipe, takže tam šipka není vůbec
   a ovládá se swipem a tečkami.

   BARVA ŠIPKY SE OD POTÍŽÍ LIŠÍ SCHVÁLNĚ, TVAR NE. Na Potížích je
   `.potizeSipka` #93A5A6, ale tam je to DEKORACE (`aria-hidden`) vedle
   karty, která je klikací celá. Tady je šipka JEDINÝ ovládací prvek, a to
   je na bílé 2,5 : 1, tedy pod prahem 3 : 1. Opsal se proto tvar
   (`fas fa-chevron-right`, bez kolečka, posun o 2 px při hoveru), ne
   odstín: #1F3D3E dává 11,697 : 1.

   TEČKY: 30 × 44 PX MÍSTO 44 × 44, a je to vědomý ústupek, ne opomenutí.
   Střed sousedních teček je vždycky přesně tak daleko, jak je široké
   tlačítko — „blíž k sobě" a „44 px široké" se tedy vylučují; jediná
   cesta, jak mít obojí, je nechat dotykové plochy překrývat, a to je
   horší (v překryvu vyhrává pozdější tlačítko, takže by se klik vedle
   tečky trefil do sousední). 30 × 44 sráží rozteč ze 46 na 30 px a pořád
   je nad prahem 24 × 24 z WCAG 2.5.8. Svislých 44 px zůstává celých.

   PILULKA SE PLNÍ Z JAVASCRIPTU, protože se pauzuje na hover i na fokus
   a po ručním zásahu zastavuje natrvalo — CSS animace by se nedala
   zmrazit na rozdělaném zlomku. Výchozí stav (bez skriptu, autoplay
   zastavený, `prefers-reduced-motion`) je pilulka CELÁ, tedy plný terč.
   Barvy jsou tytéž jako v prvním kole: kolejnice #7E9495 (3,203 : 1 na
   bílé), výplň #1F3D3E (11,697 : 1).                                    */

.userKaruselAuto .userVolbaObr {width: 88px; height: 88px;}
.userKaruselAuto .userVolbaObr img {width: 88px; height: 88px;}
.userKaruselAuto .userVolbaObrIkona {font-size: 34px;}

/* Overline čtvrtého slidu. Dvě třídy schválně — `.dashboard-detail
   .gray-text` (0,2,0) dává 16 px a `.userVolbaTyp` samotné by prohrálo.
   Táž past a totéž řešení jako u `.userVolbaKatalog` výš. */
.userVolbaSestavy {align-items: flex-start;}
.userVolbaSestavy .userVolbaObr {align-self: flex-start;}
.userVolbaSestavy .userVolbaTyp {display: block; margin: 0 0 2px 0;
   color: #637B7C; font-size: 13px; line-height: 1.2;
   letter-spacing: 0.04em; text-transform: uppercase;}

/* Spodní vycpávka karty je MÍSTO PRO TEČKY, ne vzduch. 46 px vychází
   z geometrie: náhled končí 100 px od horní hrany karty (12 vycpávky
   + 88 obrázku) a pás teček je vysoký 44 px u spodní hrany, takže při
   menší vycpávce by tečky ležely na fotce. Tímhle jsou vždycky na bílé. */
.userVolbyKaruselJS.userKaruselAuto .userVolba {padding-bottom: 46px;}
.userVolbyKaruselJS.userKaruselAuto .userKaruselPlocha {position: relative;}

/* Pás teček přes celou šířku plochy, ale `pointer-events` propouští —
   jinak by neviditelný obdélník nad kartou bral kliknutí odkazu ve slidu. */
.userVolbyKaruselJS.userKaruselAuto .userKaruselOvladani {position: absolute;
   left: 0; right: 0; bottom: 1px; pointer-events: none;}
.userVolbyKaruselJS.userKaruselAuto .userKaruselPuntiky {gap: 0;
   pointer-events: auto;}
.userKaruselAuto .userKaruselPuntik {width: 30px; height: 44px;}
.userKaruselAuto .userKaruselPuntikTerc {width: 7px; height: 7px;
   border-radius: 999px; background: #7E9495; overflow: hidden;}
.userKaruselAuto .userKaruselPuntik[aria-current="true"] .userKaruselPuntikTerc {
   width: 22px; height: 7px; background: #7E9495;}
.userKaruselPuntikPlni {display: block; width: 100%; height: 100%;
   background: #1F3D3E; transform: scaleX(0); transform-origin: left center;}
.userKaruselAuto .userKaruselPuntik[aria-current="true"] .userKaruselPuntikPlni {
   transform: scaleX(1);}

/* Bez hoveru (dotyk) šipka neexistuje — ovládá se swipem a tečkami. */
.userKaruselAuto .userKaruselSipka {display: none;}

@media (hover: hover) {
   .userVolbyKaruselJS.userKaruselAuto .userKaruselSipka {display: flex;
      position: absolute; top: 50%; right: 0; transform: translateY(-50%);
      align-items: center; justify-content: center;
      width: 44px; height: 44px; padding: 0;
      background: none; border: 0; border-radius: 0;
      color: #1F3D3E; font-size: 16px; line-height: 1; cursor: pointer;
      opacity: 0; transition: opacity .15s ease;}
   .userVolbyKaruselJS.userKaruselAuto:hover .userKaruselSipka,
   .userVolbyKaruselJS.userKaruselAuto .userKaruselSipka:focus-visible {
      opacity: 1;}
   .userVolbyKaruselJS.userKaruselAuto .userKaruselSipka:hover {
      background: none; border: 0;}
   .userVolbyKaruselJS.userKaruselAuto .userKaruselSipka i {display: block;
      transition: transform .15s ease;}
   .userVolbyKaruselJS.userKaruselAuto .userKaruselSipka:hover i {
      transform: translateX(2px);}
}

@media (max-width: 767.98px) {
   /* Táž hodnota a týž důvod jako u `.sestavaThumb` — na úzké obrazovce
      by 88px náhled sebral textu půl karty. 64 px je pořád nad 44. */
   .userKaruselAuto .userVolbaObr {width: 64px; height: 64px;}
   .userKaruselAuto .userVolbaObr img {width: 64px; height: 64px;}
   .userKaruselAuto .userVolbaObrIkona {font-size: 26px;}
}

@media (prefers-reduced-motion: reduce) {
   .userVolbyKaruselJS.userKaruselAuto .userKaruselSipka {transition: none;}
   .userVolbyKaruselJS.userKaruselAuto .userKaruselSipka i {transition: none;}
   .userKaruselPuntikPlni {transition: none;}
}

/* --- DVĚ CTA VEDLE SEBE V JEDNÉ DLAŽDICI (C19, 14. 9. 2026) ---------------

   Jan 14. 9. 2026: „odstranit button Otevřít moje sestavy a přemístit ho
   nalevo vedle buttonu Prohlédnout cviky. Barva jako CVIČIT V APLIKACI
   na detailu cviku."

   BARVA JE OPSANÁ, GEOMETRIE NE — a je to rozhodnutí, ne nedbalost.
   `.exerciseDetail .shopButton` (ř. 257) je výplň #637B7C, text #E0EEEE,
   hover #415152, ale k tomu VERZÁLKY, prostrkání 2 px a vycpávka 35 px;
   vedle sousedního `.userReaktivaceStore` (15 px, 16 px vycpávky, bez
   verzálek) by to nebyl řádek dvou tlačítek, ale tlačítko a transparent.
   Jan mluvil o BARVĚ, takže se přebírá výplň a hover; rozměry drží
   dlaždice.

   TEXT JE #FFFFFF, NE #E0EEEE, A JE TO MĚŘENÍ. #E0EEEE na #637B7C dává
   3,847 : 1, tedy pod prahem 4,5 pro text téhle velikosti — originální
   tlačítko na detailu cviku tu vadu má a nemá se roznášet dál. #FFFFFF
   dává 4,58 : 1. Výplň se nemění, takže tlačítko vypadá stejně.

   SELEKTOR MÁ O TŘÍDU VÍC, NEŽ BY POTŘEBOVAL, A JE TO NUTNÉ:
   `.mainContent a {color: black}` na ř. 53 má váhu 0,1,1, takže by
   samotné `.userDlazdiceOdkazAppka` (0,1,0) přebilo a tlačítko by mělo
   ČERNÝ text na #637B7C — 4,5 : 1 s bílou nahradí 5,86 : 1 s černou,
   takže by to ani nespadlo pod práh a nikdo by si toho nevšiml. Táž
   past, na jakou narazil přepínač grafu (ř. ~2851) a odkaz v rámu
   čekání.                                                               */

.userDlazdiceOdkazy {display: flex; flex-wrap: wrap; align-items: center;
   column-gap: 10px;}
.userDlazdiceOdkaz .userDlazdiceOdkazAppka {display: inline-flex;
   align-items: center;
   box-sizing: border-box; max-width: 100%; min-height: 44px;
   padding: 10px 16px; border: 1px solid #637B7C; border-radius: 5px;
   background: #637B7C; color: #FFFFFF;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 15px; line-height: 20px; letter-spacing: 0.2px;
   text-align: left;}
.userDlazdiceOdkaz .userDlazdiceOdkazAppka:hover,
.userDlazdiceOdkaz .userDlazdiceOdkazAppka:focus {
   text-decoration: none; color: #FFFFFF; background: #415152;
   border-color: #415152;}
.userDlazdiceOdkaz .userDlazdiceOdkazAppka:focus-visible {
   outline: 2px solid #1F3D3E; outline-offset: 2px;}

@media (max-width: 767.98px) {
   /* Týž ústupek jako u `.userReaktivaceStore` — šetří se jen vodorovná
      vycpávka, výška 44 px zůstává, protože tam se ťuká prstem. */
   .userDlazdiceOdkaz .userDlazdiceOdkazAppka {padding: 10px 14px;
      font-size: 14px;}
}

/* ==========================================================================
   C19/16 — VÁHA TLAČÍTEK U PŘEDPLATNÉHO Z OBCHODU + SOUHRN DNEŠKA (16. 9. 2026)
   ==========================================================================

   BLOK JE NA KONCI SOUBORU SCHVÁLNĚ, stejně jako C19 L1, D4, D5, D6 a /9 —
   v jiných worktree běží souběžné dávky a konec souboru je jediné místo,
   kde si dvě linky nepřepíšou práci. Nic výš v souboru se nepřepisuje.

   Zadal Jan 16. 9. 2026, verbatim: „Předplatné > pokud je aktuální
   předplatné na iOS / Android, bude primární CTA včetně barvy na »Chci
   předplatné spravovat na webu«. Takže to tlačítko »Spravovat...« může být
   jen obrysovým designem." a „Přehled > panel Dnes by chtělo vizuálně
   doplnit. Třeba co dnes bylo odcvičeno a jak dlouho?"

   ŽÁDNÁ NOVÁ BARVA A ŽÁDNÝ NOVÝ TVAR TLAČÍTKA. Primární je `.blueButton`,
   tedy tatáž třída, kterou má primární akce na celém webu; obrysové je
   `.outlineBtn`, kterou web už má na třech místech (404, Předplatné,
   Potíže) a která se tam dotahuje na rozměry `.blueButton` TÝMŽ předpisem.
   Čtvrtá kopie toho předpisu je tady a je to vědomé — `.outlineBtn` samo
   je 14px/6px, tedy výrazně menší než `.blueButton`, a dvojice by neseděla.

   KONTRAST SPOČÍTANÝ Z HODNOT BAREV, NE ODHADNUTÝ (WCAG 2.1):

     #1F3D3E na #FFFFFF   11,70   text obrysového tlačítka   (AA 4,5  AAA 7)
     #1F3D3E na #FFFFFF   11,70   RÁMEČEK proti bílé kartě   (1.4.11, práh 3)
     #FFFFFF na #1F3D3E   11,70   text i rámeček při hoveru
     #313131 na #6FF9FF   10,33   primární `.blueButton` (beze změny)
     #637B7C na #FFFFFF    4,51   meta řádek souhrnu dneška  (AA 4,5)

   Poslední řádek je důvod, proč je pozadí souhrnu BÍLÉ a netónuje se:
   #637B7C je 4,512, tedy jen o setiny nad prahem, a jakákoli šedá výplň
   pod ním by ho shodila pod 4,5. Týž rozbor jako u schodiště kroků.

   Rámeček obrysového tlačítka je #1F3D3E, ne #E4E9E9 jako u dlaždic:
   #E4E9E9 na bílé vychází 1,23, tedy pod prahem 3:1 pro netextové prvky
   (WCAG 1.4.11). U dlaždice to nevadí, ta je plocha; tady je to hranice
   ovládacího prvku.                                                       */

/* --- 1) Odkaz do obchodu jako DRUHOTNÁ akce ------------------------------ */

/* Rozměry jsou ČTVRTÁ kopie předpisu z `.chybaTlacitka .outlineBtn` (ř. ~878)
   a `.subscriptionUcetTlacitka .outlineBtn` (ř. ~1205) — schválně, ne
   nedopatřením: `.outlineBtn` samo o sobě je malé tlačítko a bez dotažení
   by vedle `.blueButton` vypadalo jako odkaz. Barvy jsou z palety SEKCE
   (#1F3D3E), ne černé jako na těch třech místech, aby sekce nedostala
   třetí barvu ovládacího prvku. */
.userPredplatneSpravaObrys .outlineBtn {font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   text-transform: uppercase; font-size: 16px; border-radius: 5px;
   padding: 9px 34px 9px 34px; letter-spacing: 2px; display: inline-block;
   background-color: transparent; color: #1F3D3E; border: 1px solid #1F3D3E;}
.userPredplatneSpravaObrys .outlineBtn:hover,
.userPredplatneSpravaObrys .outlineBtn:focus {text-decoration: none;
   color: #FFFFFF; background: #1F3D3E;}
.userPredplatneSpravaObrys .outlineBtn:focus-visible {outline: 2px solid #1F3D3E;
   outline-offset: 2px;}

/* --- 2) „Chci předplatné spravovat na webu" jako PRIMÁRNÍ tlačítko ------- */

/* Vzhled celý nese `.blueButton` ze šablony. Tahle třída dělá jen to, co
   `<summary>` potřebuje navíc: zruší nativní trojúhelník (bez obojího
   zůstane před tlačítkem odrážka) a dá odstupy. `.userPredplatneKonverzeShrnuti`
   se na tenhle prvek ZÁMĚRNĚ nedává — nastavuje podtržení a barvu
   druhotného odkazu a stojí v souboru níž než `.blueButton`, takže by ji
   přebila. */
.userPredplatneKonverzeShrnutiPrimarni {display: inline-block;
   margin: 4px 0 0 0; cursor: pointer; list-style: none;}
.userPredplatneKonverzeShrnutiPrimarni::-webkit-details-marker {display: none;}
.userPredplatneKonverzeShrnutiPrimarni::marker {content: "";}
.userPredplatneKonverzeShrnutiPrimarni:hover,
.userPredplatneKonverzeShrnutiPrimarni:focus {text-decoration: none;}
.userPredplatneKonverzeShrnutiPrimarni:focus-visible {outline: 2px solid #1F3D3E;
   outline-offset: 2px;}
.userPredplatneKonverzeSbaleny[open] .userPredplatneKonverzeShrnutiPrimarni {margin-bottom: 12px;}

@media (max-width: 767.98px) {
   /* `.blueButton` má pod 768 px písmo 14 px, takže obrysový soused se
      musí zmenšit s ním — jinak by dvojice přestala sedět. Výška se
      nesnižuje; tam se ťuká prstem. */
   .userPredplatneSpravaObrys .outlineBtn {font-size: 14px;
      padding: 9px 28px 9px 28px;}
}

/* --- 3) Souhrn dneška v panelu Odcvičeno --------------------------------- */

/* Seznam bez odrážek. Pořadí je chronologické, ne důležitostní, takže je
   to `<ul>`; odrážka by ale u dvou položek s vlastním nadpisem přidala
   třetí úroveň hierarchie do karty, která má dvě. Oddělovačem je proto
   VLASOVÁ LINKA, táž jako u `.userPredplatneVyhody li` (#F1F4F4), a
   u poslední položky se ruší. */
.userDnesSouhrn {margin: 10px 0 0 0;}
.userDnesSeznam {margin: 0; padding: 0; list-style: none;}
/* META MÁ VLASTNÍ ŘÁDEK POD NÁZVEM (16. 9. 2026, Janova reklamace
   „chybí ty informace o dnešním cvičení").

   Do dneška tu stálo `justify-content: space-between` a meta seděla na
   TÉŽE řádce jako název, zaražená k pravému okraji karty. Dokud pod ní
   nic nebylo, četlo se to jako dvojice; jakmile pod ni přibyly korálky
   cviků (`.userDnesCviky`), zůstal ten 14px šedý údaj sám u pravé hrany
   nad výrazným seznamem — a přestal se číst jako informace o tréninku.
   Změřeno, že ZMIZET nemohl: v HTML je s korálky i bez nich bajt za
   bajtem týž. Není to tedy návrat smazaného, ale návrat viditelného.

   `flex: 0 0 100%` na metě proto shodí údaj na vlastní řádek hned pod
   název a nad korálky; `space-between` tím ztrácí smysl (na každé řádce
   stojí jediná položka) a mění se na `flex-start`, aby se řádky
   nerozjely, kdyby někdo metě šířku zase vzal. */
.userDnesPolozka {display: flex; flex-wrap: wrap; align-items: baseline;
   justify-content: flex-start; gap: 2px 12px;
   margin: 0; padding: 7px 0; border-bottom: 1px solid #F1F4F4;}
.userDnesPolozka:last-child {border-bottom: 0;}
.userDnesNazev {color: #1F3D3E; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 16px; line-height: 1.3;}
/* `gray-text` v šabloně dává #637B7C (4,512 na bílé). Barva se tu
   NEPŘEPISUJE, aby zůstal jeden zdroj pravdy o šedé v sekci; mění se jen
   velikost.

   SPECIFICITA 0,2,0 JE PODMÍNKA, NE ÚKLID — a je to NÁLEZ MĚŘENÍ, ne
   opatrnost. `.dashboard-detail .gray-text` (ř. ~2272) je taky 0,2,0
   a stojí v souboru VÝŠ, takže samotné `.userDnesMeta` (0,1,0) prohraje:
   změřeno v DOMu, meta řádek vycházel 16 px místo 14, tedy stejně velký
   jako název nad ním, a hierarchie, kvůli které ten řádek vznikl, byla
   plochá. Z CSS se to nepozná; poznalo to až `getComputedStyle`.
   Táž rodina jako past u `.userCekaniOdkaz` a `.mainContent a`. */
.userDnesPolozka .userDnesMeta {flex: 0 0 100%; font-size: 14px;
   line-height: 1.3; white-space: nowrap;}
.userDnesCelkem {margin: 8px 0 0 0; line-height: 1.3;}
.userDnesCelkem .userDnesCelkemPopis {font-size: 14px;}
.userDnesCelkem .userDnesCelkemHodnota {font-size: 14px; color: #1F3D3E;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}

@media (max-width: 767.98px) {
   /* Na úzké kartě se název a meta nevejdou vedle sebe, takže se meta
      zalomí pod název. Řádkový `gap` 2px z pravidla výš je drží u sebe;
      `white-space: nowrap` na metě zůstává, aby se „3 min 12 s" nelámalo
      uprostřed. */
   .userDnesPolozka {justify-content: flex-start;}
   .userDnesNazev {flex: 0 0 100%; font-size: 15px;}
}

/* ==========================================================================
   KORÁLKY (C19, 16. 9. 2026) — cviky dneška a postup konverze
   ==========================================================================

   Jan 16. 9. 2026 pojmenoval prvek sám: „prvek číslovaného seznamu
   v korálkách (v kolečkách propojených čárou jako na panelu Dnes)".
   Ta kolečka na panelu Dnes jsou `.userStartKrok` (schodiště tří kroků
   k prvnímu tréninku, 13. 9. 2026), takže se geometrie NEVYMÝŠLÍ —
   přebírá se: 28px kolečko, odsazení 42 px, spojnice 2 px #E4E9E9 od
   spodku kolečka ke dnu položky a u poslední se ruší.

   PROČ TO NEJSOU TYTÉŽ TŘÍDY. `.userStartKrok` nese navíc dva stavy
   (`…Ted` / `…Pristi`, tedy „tady jste" a „tohle vás čeká"), které ani
   u cviků, ani u postupu konverze nedávají smysl — odcvičené cviky jsou
   všechny stejně hotové a kroky konverze jsou všechny stejně povinné.
   Sdílet třídu a ty stavy nepoužít by znamenalo, že první změna
   schodiště tiše přelakuje dvě jiná místa.

   KONTRAST SE POČÍTÁ PROTI BÍLÉ KARTĚ (`.userDlazdice` i `.userPanel`
   jsou #FFFFFF) a #637B7C na ní vychází 4,512 : 1, tedy jen o setiny
   nad prahem. Proto tu NENÍ ani jedna tónovaná výplň pod šedým textem
   a kolečka mají výplň bílou s rámečkem — táž úvaha jako u schodiště.  */

/* --- 1) Cviky dnešního tréninku ------------------------------------------ */

/* Seznam leží UVNITŘ `.userDnesPolozka`, což je flex s `flex-wrap`.
   `flex: 0 0 100%` ho proto shodí na vlastní řádek pod název a metu;
   bez toho by se cpal vedle nich do zbylé šířky. */
.userDnesCviky {flex: 0 0 100%; width: 100%; margin: 10px 0 2px 0; padding: 0;
   list-style: none;}
.userDnesCvik {position: relative; padding: 0 0 12px 34px;}
.userDnesCvik:last-child {padding-bottom: 0;}
.userDnesCvik::before {content: ""; position: absolute; left: 10px; top: 24px;
   bottom: 0; width: 2px; background: #E4E9E9;}
.userDnesCvik:last-child::before {display: none;}
.userDnesCvikCislo {position: absolute; left: 0; top: 0; box-sizing: border-box;
   display: flex; align-items: center; justify-content: center;
   width: 22px; height: 22px; border-radius: 50%;
   background: #FFFFFF; color: #1F3D3E; border: 2px solid #1F3D3E;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 12px; line-height: 1;}
.userDnesCvikNazev {display: block; min-height: 22px; padding-top: 1px;
   color: #1F3D3E; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 15px; line-height: 1.35;}
/* `.dashboard-detail .gray-text` (0,2,0) stojí v souboru VÝŠ, takže
   samotné `.userDnesCvikPodnazev` (0,1,0) by prohrálo a podnázev by měl
   16 px jako název nad ním — přesně ta past, na kterou se šláplo
   16. 9. 2026 u `.userDnesMeta`. Proto dvě třídy. */
.userDnesCvik .userDnesCvikPodnazev {display: block; font-size: 13px;
   line-height: 1.35;}
.userDnesCvikVic {margin: 8px 0 0 0; padding: 0 0 0 34px; font-size: 13px;
   line-height: 1.35;}
.userDnesPolozka .userDnesCvikVic {font-size: 13px;}

@media (max-width: 767.98px) {
   /* Na úzké kartě klesá název tréninku na 15 px (pravidlo výš), takže
      s ním musí i korálky — jinak by byl cvik stejně velký jako trénink,
      pod který patří. Kolečka zůstávají 22 px: jsou to jediná kotva,
      podle které se v řadě čte pořadí. */
   .userDnesCvikNazev {font-size: 14px;}
   .userDnesCvik .userDnesCvikPodnazev {font-size: 12px;}
}

/* --- 2) Postup konverze v korálcích -------------------------------------- */

/* Stejná stavba jako cviky výš, ale kolečka jsou 28px jako u schodiště:
   tohle je návod k provedení, ne výčet hotového, a krok se čte dřív než
   jeho obsah. */
.userPredplatneKroky {margin: 0; padding: 0; list-style: none;}
.userPredplatneKrok {position: relative; padding: 0 0 18px 42px;}
.userPredplatneKrok:last-child {padding-bottom: 0;}
.userPredplatneKrok::before {content: ""; position: absolute; left: 13px; top: 30px;
   bottom: 0; width: 2px; background: #E4E9E9;}
.userPredplatneKrok:last-child::before {display: none;}
.userPredplatneKrokCislo {position: absolute; left: 0; top: 0; box-sizing: border-box;
   display: flex; align-items: center; justify-content: center;
   width: 28px; height: 28px; border-radius: 50%;
   background: #1F3D3E; color: #FFFFFF; border: 2px solid #1F3D3E;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;
   font-size: 15px; line-height: 1;}
.userPredplatneKrokText {display: block; min-height: 28px; padding-top: 3px;
   color: #1F3D3E; font-size: 16px; line-height: 1.4;}
/* Obsah kroku sedí POD svým popiskem, ne vedle — odsazení nese
   `padding-left` položky, takže se nastavuje jen odstup. Tlačítka si
   vlastní odstupy nesou (`.userPredplatneSprava` 14px,
   `.userPredplatneKonverzeAkce p` 14px), a v korálku by se sečetly
   s odstupem kroku; proto se ruší a nahrazují jedním. */
.userPredplatneKrok .userPredplatneSprava,
.userPredplatneKrok .userPredplatneKonverzeAkce p {margin: 10px 0 0 0;}

/* --- 3) Upozaděné tarify pod nákupem ------------------------------------- */

/* Odkazy, ne tlačítka — to je celé „upozadění". Podtržení zůstává
   (jsou to odkazy v obsahu), barvu bere `.mainContent a`, tedy #000000
   na bílé = 21 : 1. Druhá barva odkazu by ze sekce udělala dvě. */
.userPredplatneTarifVedlejsi {margin: 10px 0 0 0; line-height: 1.5;}
/* BARVA SE MUSÍ NAPSAT, `gray-text` ze šablony tu NIC NEUDĚLÁ — a je to
   nález měření, ne opatrnost. Šedou v sekci nastavuje `.dashboard-detail
   .gray-text`, tedy pravidlo vázané na PŘEHLED; karta předplatného má
   `.user-sekce`, takže popisek vyšel v DOMu #1F3D3E, tedy stejně výrazný
   jako text kroku nad ním — a „upozaděné" z něj nebylo. #5C7273 je táž
   šedá, jakou na téhle stránce má `.userPredplatnePoznamka`; žádná nová
   barva nevzniká a na bílé dává přes 4,5 : 1. */
.userPredplatneTarifVedlejsi .userPredplatneTarifPopis {font-size: 14px;
   margin-right: 4px; color: #5C7273;}
.userPredplatneTarifOdkaz {font-size: 14px; text-decoration: underline;}
.userPredplatneTarifOdkaz:hover, .userPredplatneTarifOdkaz:focus {text-decoration: none;}
/* Oddělovač mezi tarify skládá CSS, ne PHP — u jediného tarifu by se
   jinak vykreslila osiřelá svislice.

   OD 16. 9. 2026 SE NEKRESLÍ: tarify jsou pilulky a mezi dvěma pilulkami
   je tečka navíc. Pravidlo zůstává pro případ, že by se pilulky zase
   vypnuly. */
.userPredplatneTarifOdkaz + .userPredplatneTarifOdkaz::before {content: "·";
   display: inline-block; margin: 0 8px; color: #7E9495; text-decoration: none;}
.userPredplatneTarifOdkaz.userPredplatnePill + .userPredplatneTarifOdkaz.userPredplatnePill::before
   {content: none;}

/* ==========================================================================
   PILULKY V KORÁLKOVÉM POSTUPU (C19, 16. 9. 2026)
   ==========================================================================

   Jan: „V tom postupu by měly být už jen pills / menší buttony bez
   primární barvy. Pouze to roční předplatné bych nechal jako pill
   v primární barvě."

   PRIMÁRNÍ BARVA JE V POSTUPU PRÁVĚ JEDNA — roční tarif. Všechno ostatní
   (odkaz do obchodu v kroku 1, dva vedlejší tarify v kroku 3) je tlumená
   pilulka: bílý podklad, 1px rámeček a text #1F3D3E. **Žádná nová barva**
   — je to týž pár, jaký má obrysové tlačítko karty (`.outlineBtn`),
   a #6FF9FF je výplň primární akce celého webu.

   DOTYKOVÝ CÍL NENÍ OBĚŤ ZMENŠENÍ. Pilulky jsou menší než dnešní
   tlačítka (14px písmo, padding 9/16 místo 15px a 10/16 přes celou
   šířku), ale `min-height: 40px` drží prst; menší tarify mají 36 px,
   což je pořád nad prahem 24 × 24 z WCAG 2.5.8 — měřeno v DOMu na
   390 px, ne spočítáno z hodnot výš.

   `display: inline-flex` a `width: auto` jsou podmínka, ne kosmetika:
   `.blueButton` na téhle stránce roztahuje tlačítko na celou šířku
   karty, a právě to Jan chtěl pryč („menší buttony"). */
.userPredplatnePill {box-sizing: border-box; display: inline-flex;
   align-items: center; justify-content: center; width: auto; max-width: 100%;
   min-height: 40px; padding: 9px 16px; border-radius: 999px;
   font-size: 14px; line-height: 1.2; text-align: center;
   text-decoration: none; cursor: pointer;}
.userPredplatnePill:hover, .userPredplatnePill:focus {text-decoration: none;}
/* Tlumená: obrys, ne výplň. Text i rámeček #1F3D3E dávají na bílé
   11,697 : 1, tedy vysoko nad prahem 4,5 pro text i nad 3 : 1 pro
   obrys — jsou to prvky nákupní cesty, ne dekorace. */
.userPredplatnePillTlumeny {background: #FFFFFF; border: 1px solid #1F3D3E;
   color: #1F3D3E;}
.userPredplatnePillTlumeny:hover, .userPredplatnePillTlumeny:focus
   {background: #F4F7F7; color: #1F3D3E;}
/* Primární: jediná v postupu. #313131 na #6FF9FF je 10,327 : 1 —
   táž dvojice jako u `.blueButton`, jen v pilulce. */
.userPredplatnePillPrimarni {background: #6FF9FF; border: 1px solid #6FF9FF;
   color: #313131; font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
.userPredplatnePillPrimarni:hover, .userPredplatnePillPrimarni:focus
   {background: #4FE7EE; border-color: #4FE7EE; color: #313131;}
/* Vedlejší tarify jsou menší i uvnitř skupiny pilulek — zůstávají
   „upozaděné", jak je Jan zadal 16. 9. 2026 ráno.

   MENŠÍ ZNAMENÁ UŽŠÍ A DROBNĚJŠÍM PÍSMEM, NE NIŽŠÍ. První verze měla
   `min-height: 36px` a v DOMu to tak i vyšlo — jenže jsou to odkazy na
   PLACENÍ, ne dekorace, a pod ~40 px se prstem trefují špatně. Rozdíl
   proti hlavním pilulkám proto nese písmo (13 px) a vodorovné odsazení,
   výška zůstává 40 px stejně jako u nich. */
.userPredplatnePillMaly {min-height: 40px; padding: 8px 14px; font-size: 13px;}
/* Pilulky v kroku stojí vedle sebe a zalomí se, ne pod sebou přes
   celou šířku. `gap` drží mezeru i po zalomení. */
.userPredplatneTarifVedlejsi {display: flex; flex-wrap: wrap;
   align-items: center; gap: 8px;}
.userPredplatneKrok .userPredplatneSpravaPill,
.userPredplatneKrok .userPredplatneKonverzeAkcePill p {margin: 10px 0 0 0;}

/* ==========================================================================
   DVA VODOROVNÉ BARY V PANELU DNES (C19, 16. 9. 2026)
   ==========================================================================

   Jan: „pokud člověk cvičil, dal bych tam 2 horizontální bary: délka
   cvičení dnes a pod tím průměrná délka cvičení."

   POPISEK A HODNOTA STOJÍ NAD DRAHOU, NE VEDLE NÍ. Dlaždice je při okně
   768 px poloviční (`col-md-6`), takže na vnitřní šířku ~232 px se
   trojice popisek + dráha + hodnota na jednu řádku nevejde a dráha by
   z ní zbyla jako pahýl o pár pixelů. S popiskem nahoře má dráha VŽDYCKY
   celou šířku karty — a právě to je podmínka toho, aby se oba bary daly
   porovnat okem, protože sdílejí měřítko i délku dráhy.

   ŽÁDNÁ NOVÁ BARVA. Dráha je #E4E9E9 (táž jako spojnice korálků a rámeček
   karty), výplň dneška #1F3D3E (11,697 : 1 na bílé) a výplň průměru
   #7E9495 (3,203 : 1, tedy nad prahem 3 : 1 pro grafický prvek — táž
   šedá, jakou má neaktivní puntík karuselu). Průměr je schválně tlumený:
   je to srovnávací hodnota, ne dnešek.

   Kontrast se počítá proti BÍLÉ kartě (`.userDlazdice`), takže se pod
   šedý text nesmí dát tónovaná výplň — #637B7C je 4,512 : 1, tedy jen
   o setiny nad prahem. Táž úvaha jako u korálků výš. */
.userDnesBary {margin: 12px 0 0 0;}
.userDnesBar {display: flex; flex-wrap: wrap; align-items: baseline;
   justify-content: space-between; gap: 3px 10px; margin: 0;}
.userDnesBar + .userDnesBar {margin-top: 10px;}
/* Barva se píše VLASTNÍ TŘÍDOU a dvěma selektory schválně: `gray-text`
   ze šablony tady nepoužíváme právě proto, že `.dashboard-detail
   .gray-text` (0,2,0) přebíjí jednotřídní pravidla — past změřená
   16. 9. 2026 na `.userDnesMeta`. Dvě třídy tedy nejsou úklid, ale
   podmínka. */
.userDnesBar .userDnesBarPopis {flex: 0 1 auto; font-size: 13px;
   line-height: 1.3; color: #637B7C;}
.userDnesBar .userDnesBarHodnota {flex: 0 0 auto; font-size: 13px;
   line-height: 1.3; color: #1F3D3E; white-space: nowrap;
   font-family: 'AeonikMedium', Arial,Helvetica,sans-serif;}
/* OBRYS DRÁHY JE PODMÍNKA, NE OZDOBA (16. 9. 2026, druhé kolo). Od chvíle,
   kdy se bar „Dnes" kreslí i s nulou, je prázdná dráha nositelem sdělení
   („dnes zatím nic") — a #E4E9E9 dává na bílé kartě jen 1,19 : 1, tedy
   hluboko pod prahem 3 : 1 pro grafický prvek. Bez obrysu by po nule
   nezbylo nic vidět a karta by vypadala rozbitě, ne motivačně.
   `box-shadow: inset` schválně: nemění výšku ani šířku, takže se
   geometrie obou barů nehne, a leží POD výplní, takže u plného baru
   není vidět. #7E9495 je 3,203 : 1 — táž šedá jako neaktivní puntík
   karuselu, žádná nová barva. */
.userDnesBar .userDnesBarDraha {flex: 0 0 100%; width: 100%; height: 8px;
   border-radius: 4px; background: #E4E9E9; overflow: hidden;
   box-shadow: inset 0 0 0 1px #7E9495;}
/* `min-width` je podmínka, ne kosmetika: krátký trénink proti dlouhému
   průměru vyjde na jednotky procent a nula pixelů by se četla jako
   „dnes nic", přestože se cvičilo. */
.userDnesBar .userDnesBarVypln {display: block; height: 100%; min-width: 4px;
   border-radius: 4px; background: #1F3D3E;}
.userDnesBarPrumer .userDnesBarVypln {background: #7E9495;}

/* ==========================================================================
   NADPIS „Dnes" S PUNTÍKEM A ZRUŠENÝ SVISLÝ PRUH (C19, 16. 9. 2026)
   ==========================================================================

   Jan: „oddělej tu vertikální modrou linku" a „Dnes (před text modrý
   puntík, ať to upoutá pozornost)".

   PRUH SE RUŠÍ TŘÍDOU, NE SMAZÁNÍM PRAVIDLA. `.userDlazdiceTelo >
   .userReaktivace` (ř. ~3887) kreslí `border-left: 4px solid #53F8FF`
   a platí pro OBĚ větve; na ostré `/user/` má zůstat, dokud Jan
   neřekne jinak. Třídu `userReaktivaceNadpis` přidává PHP jen tehdy,
   když je zapnutá hlavička — takže vypnutý vypínač nechá kartu bajt
   za bajtem jako dnes.

   SPECIFICITA JE PODMÍNKA: pravidlo výš je `.userDlazdiceTelo >
   .userReaktivace` (0,2,0), takže samotné `.userReaktivaceNadpis`
   (0,1,0) by prohrálo a pruh by zůstal. Selektor proto musí mít taky
   dvě třídy a stát v souboru níž — táž past jako u `.navUcetToggle`
   a `min-height: 0`. */
.userDlazdiceTelo > .userReaktivaceNadpis {padding-left: 0; border-left: 0;}

/* AZUROVÁ SE STĚHUJE Z PRUHU DO PUNTÍKU — je to TÁŽ barva (#53F8FF),
   žádná nová. Sama o sobě má na bílé kartě 1,3 : 1, tedy hluboko pod
   prahem 3 : 1 pro grafický prvek, proto obrys #7E9495 (3,203 : 1) —
   týž recept a táž šedá jako u prázdné dráhy baru výš. Puntík je
   `aria-hidden`, význam nese slovo vedle něj; obrys je tu proto, aby
   ozdoba byla vidět, ne aby nesla informaci.

   `vertical-align` se neuvádí a je to záměr: puntík se sází na
   ÚČAŘÍ jako písmeno, takže drží s textem i když se nadpis zalomí.
   Svislý střed se doladí `position: relative; top`, ne `middle` —
   `middle` míří na střed x-výšky a u 10px kolečka v 26px nadpisu
   vyšel v DOMu o 2 px výš, než je optický střed velkých písmen. */
.userDnesPuntik {display: inline-block; width: 10px; height: 10px;
   position: relative; top: -2px; margin-right: 10px; border-radius: 50%;
   background: #53F8FF; box-shadow: inset 0 0 0 1px #7E9495;}

/* Zpráva pod nadpisem je `.userDlazdiceHlavni`, tedy TÁŽ třída jako
   v sousední dlaždici — druhá varianta téhož se nezavádí. Odsazení
   zprava kvůli QR ikoně v rohu se proto musí přidat i pro ni; bez
   toho by ikona lezla do textu přesně tam, kde to `.userReaktivaceSQr
   .userReaktivaceHlavni` (ř. ~4992) řeší dnes. */
.userReaktivaceSQr .userDlazdiceHlavni {padding-right: 56px;}

/* --------------------------------------------------------------------------
   CVIKY DNEŠNÍHO TRÉNINKU SE ROZKLIKÁVAJÍ  (Jan 18. 9. 2026)
   --------------------------------------------------------------------------

   „panel Dnes > Když se zobrazí dnešní trénink, měly by být cviky skryté
   a rozbalit se až po rozkliknutí."

   ŽÁDNÁ TŘETÍ MECHANIKA. Je to táž dvojice jako u jedné sestavy v panelu
   Moje sestavy (`.sestavySeznamRozbalovaci`, ř. ~3425) a u skupin filtrů
   katalogu: bez skriptu otevírá `:focus-within`, se skriptem rozhoduje
   třída. DVĚ MECHANIKY SE NESMÍ POTKAT — proto `userDnesCvikyJS`, kterou
   přidává `user-sekce.js`, tady `:focus-within` vypíná. Bez toho by
   kliknutí seznam otevřelo fokusem a toggle by ho hned zavřel, tedy by
   nešel otevřít vůbec.

   TLAČÍTKO STOJÍ NA ŘÁDCE NÁZVU A ZAROVNÁVÁ SE DOPRAVA (Jan 18. 9. 2026:
   „Počet cviků: 4 se přesune na úroveň názvu odcvičené sestavy a zarovná
   doprava"). Dělá to `margin-left: auto` uvnitř `.userDnesPolozka`, tedy
   volné místo řádky, ne pevná šířka — dlouhý název tlačítko posune, ale
   nepřekryje. Seznam pod tím zůstává `flex: 0 0 100%`, protože
   `.userDnesPolozka` je flex s `flex-wrap`.

   Do 18. 9. 2026 měly tlačítko i seznam společný obal `.userDnesCvikyObal`
   a stály pod sebou pod celou položkou. OBAL ZANIKL, protože tlačítko má
   být na první řádce a seznam pod metou — to jsou dvě různá místa v jednom
   flexu a jedním prvkem se obalit nedají. `display: contents` na obalu by
   je sice rozpustilo do flexu, ale pak by se pořadí muselo srovnat `order`
   na `.userDnesMeta`, tedy zásahem mimo selektory `.userDnesCviky*`.
   Nosičem stavu je proto `li` s třídou `userDnesCvikyRozbalovaci` —
   viz `user-dnes-radek.html`.

   Barvy jsou z téže palety a žádná nová nevzniká: #1F3D3E (11,70 : 1 na
   bílé), #637B7C u šipky (4,51 : 1, a jedině na bílé), #53F8FF fokus.
   Karta je bílá (`.userDlazdice`), takže #637B7C tu platí.

   44 px je dotyková plocha, ne dekorace — tlačítko nedostane nativní
   chování odkazu, takže se do něj musí dát klepnout prstem. */
.userDnesCvikyToggle {display: inline-flex; align-items: center;
   flex: 0 0 auto; min-height: 44px; margin: 0 0 0 auto; padding: 4px 0;
   border: 0; background: none; color: #1F3D3E; font-family: inherit;
   font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer;}
.userDnesCvikyToggle:focus {outline: 2px solid #53F8FF; outline-offset: 2px;}
/* Šipka je TÁŽ IKONA jako na řádku sestavy v Moje sestavy
   (`.sestavaKartaSipka` ř. ~4255, `fas fa-chevron-right`), jen otočená
   dolů — proto i táž velikost 13px místo dřívějších 0.7em. Barva zůstává
   #637B7C, ne #93A5A6 z karty: tam je šipka na 18px názvu, tady vedle
   14px popisku, a #637B7C je 4,512 : 1 na bílé. */
.userDnesCvikySipka {display: inline-block; margin-left: 8px; font-size: 13px;
   color: #637B7C;}
/* Rozbalený stav pozná i ten, kdo barvu nerozliší — šipka se otočí. */
.userDnesCvikyToggle[aria-expanded="true"] .userDnesCvikySipka {
   transform: rotate(180deg);}

.userDnesCvikySeznam {display: none; flex: 0 0 100%; width: 100%;}
.userDnesCvikyRozbalovaci:focus-within .userDnesCvikySeznam {display: block;}
.userDnesCvikyRozbalovaci.userDnesCvikyJS:focus-within .userDnesCvikySeznam {display: none;}
.userDnesCvikyRozbalovaci.userDnesCvikyJS.userDnesCvikyOtevreno .userDnesCvikySeznam {display: block;}

/* NÁZEV MUSÍ MÍT `flex-basis: 0`, NE `auto` — a je to nález měření, ne
   opatrnost. Ve `flex-wrap` kontejneru se nejdřív ZALAMUJE a teprve pak
   zmenšuje, takže dlouhý název s bází podle obsahu odsune tlačítko na
   druhou řádku, i když by se po zmenšení vešlo. Změřeno na 390 px:
   s `flex: 1 1 auto` skončilo tlačítko o 41 px níž než název, s `flex: 1 1 0`
   sedí na téže řádce. `min-width: 0` ruší výchozí `min-width: auto` flex
   položky, jinak by se dlouhé slovo odmítlo zalomit a kartu roztáhlo.

   Platí to na VŠECH šířkách, ne jen v media query: pod 768 px má
   `.userDnesNazev` záměrně `flex: 0 0 100%` (ř. ~5533), aby se meta
   zalomila pod název — meta má `flex: 0 0 100%` sama, takže se pod něj
   zalomí tak jako tak, a tohle pravidlo (0,2,0) to pravidlo (0,1,0)
   přebíjí i uvnitř media query. */
.userDnesCvikyRozbalovaci .userDnesNazev {flex: 1 1 0; min-width: 0;}

/* ==== HOME 4B — sekce „Můj účet" ======================================= */
/* Sem se 20. 9. 2026 přesunul blok, který do té doby žil v `<style>` uvnitř
   návrhu `podklady/nahled-ucet/sekce-ucet.html`. Selektory jsou beze změny.
   Zdrojem pravdy pro PODOBU zůstává ten návrh, tenhle soubor je nasazená
   verze — kdo mění jedno, musí i druhé. */
/* Barvy jsou z živého style.css: #53f8ff (akcent), #637B7C a #1F3D3E
   (tmavá zeleň), #E0EEEE (světlá zeleň). Nic nového se nezavádí. */
/* `scroll-margin-top` PATŘÍ K ODKAZU Z HERA, ne k vzhledu sekce — a není
   to kosmetika. Web má fixní horní lištu (`.fixed-top`) a nativní skok na
   kotvu posadí sekci hranou přesně pod horní okraj okna, tedy POD lištu.
   Změřeno 20. 9. 2026 po skoku na `#mujUcet`: lišta je 60 px na 1440 a 1200,
   64 px na 992, 768 i 390 — a rezerva nad slovy „MŮJ ÚČET NA WEBU" z toho
   vyšla 4 / 4 / 0 / 0 / **−16** px. Na mobilu tedy lišta ukrajovala horní
   16 px nadpisku.
   84 px = nejvyšší lišta 64 + 20 px vzduchu, takže vyjde na všech šířkách.
   Layout to nemění o pixel (vlastnost se uplatní jen při rolování na kotvu)
   a žádný JS to nepotřebuje. Starší Safari (< 14.1) ji ignoruje a chová se
   jako dnes — to je zhoršení na doraz, ne rozbití. */
.homeUcet {background: #F4F9F9; overflow: hidden; scroll-margin-top: 84px;}
.homeUcet .ucetOverline {display: inline-block; font-family: 'AeonikMedium', Arial, Helvetica, sans-serif;
  text-transform: uppercase; letter-spacing: 2px; font-size: 14px; color: #4C6364; margin-bottom: 14px;}
.homeUcet .ucetPerex {margin-top: 22px; color: #2B3F40;}
.homeUcet .pText {width: 100%;}

/* --- vizuál: VELKÝ DESKTOP, DVA TELEFONY HO PŘEKRÝVAJÍ -----------------
   Kompozice z prvního návrhu, kterou Jan schválil jako vizuálně správnou:
   okno prohlížeče přes skoro celou šířku a přes jeho pravý dolní roh
   telefon. Mezikrok z 20. 9. 2026 (dva obrázky v řadě vedle sebe, překryv 0,
   telefon vyjíždějící z ořezaného okénka) Jan odmítl a je zrušený.

   20. 9. 2026 (druhé kolo) Jan: „screen mobilu lehce doprava, přidej ještě
   jeden screen mobilu po levé straně webového screenshotu, akorát v jiný
   výšce — bude výš, jeho pohyb pak bude opačný — dolů."

   Překryv dělá PADDING kontejneru, ne záporné okraje obrázků: okno končí
   o 90 px dřív než kontejner na OBOU stranách, telefony sedí na hranách
   kontejneru, takže z jejich 190 px leží 100 px na okně.

   ŠÍŘKA KONTEJNERU MUSELA VYROST z 980 na 1070 px, aby okno zůstalo
   stejných 890 px i po přidání levého paddingu. `.container` dává na
   1440 px vnitřní šířku 1110 px, takže 1070 se vejde a zbývá 20 px na
   každé straně — do nich se schová posun pravého telefonu o 24 px ven.
   POD 1200 px UŽ TA REZERVA NENÍ (vnitřní šířka 930 / 690 px), proto tam
   pravý telefon zůstává na `right: 0`; jinak by mu `.homeUcet
   {overflow: hidden}` uřízl stín u pravé hrany okna prohlížeče.

   NEZÁVISLÉ JSOU OBRÁZKY, NE JEJICH POLOHA. Jsou to tři samostatné soubory
   a hlavně tři samostatné pohyby — okno klesá s odscrollovanou stránkou,
   PRAVÝ telefon stoupá proti ní, LEVÝ zase klesá. Že jsou to tři obrázky,
   se pozná právě tím, že se při scrollu rozcházejí.

   ŽÁDNÝ `overflow: hidden` NA OBALU TELEFONŮ. Předchozí verze měla okénko
   `.ucetMobil {overflow: hidden; padding-bottom: 34px}` a ořezávala jím
   `drop-shadow` telefonu (16 px posun + 30 px rozostření = 46 px, tedy
   o 12 px víc, než kolik bylo místa) — pod telefonem z toho byl šedý pruh
   useknutý ostrou vodorovnou čarou. Ořez je pryč i s okénkem a NOVÝ LEVÝ
   TELEFON HO TAKY NESMÍ DOSTAT: jeho jediný předek s ořezem je `.homeUcet`,
   a ten ořezává až na hraně viewportu. */
.homeUcet .ucetVizual {position: relative; margin: 70px auto 0 auto; max-width: 1070px;
  padding-left: 90px; padding-right: 90px;}
.homeUcet .ucetOkno {border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 0 26px 60px rgba(31, 61, 62, 0.18);}
.homeUcet .ucetOknoLista {display: flex; align-items: center; gap: 7px; padding: 0 16px; height: 36px;
  background: #E6EDED; border-bottom: 1px solid #D4DEDE;}
.homeUcet .ucetOknoLista span {width: 10px; height: 10px; border-radius: 50%; background: #C2CFCF; flex: 0 0 auto;}
.homeUcet .ucetOknoLista em {margin-left: 16px; font-style: normal; font-size: 12px; color: #6C8384;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.homeUcet .ucetOknoObraz {display: block; width: 100%; height: auto;}
.homeUcet .ucetTelefon {position: absolute; right: -24px; bottom: -40px; width: 190px; height: auto; z-index: 2;
  filter: drop-shadow(0 18px 34px rgba(31, 61, 62, 0.26));}
/* LEVÝ telefon je kotvený `top`, ne `bottom` — jeho pohyb jde DOLŮ, takže
   klidová poloha je ta nejvyšší, jaké kdy dosáhne.

   20. 9. 2026 (třetí kolo) Jan: „levý screen mobilu o cca 200 px dolů
   a doleva o 15px a scroll to bude víc posouvat dolů." `top` je proto
   −34 → **166 px** (přesně +200) a `left` 0 → **−15 px**.

   PŘESAH NAD HORNÍ HRANU OKNA TÍM ZMIZEL, ale `margin-top: 70px` u vizuálu
   se schválně NEVRACÍ na původních 46: snížením by se posunula celá
   kompozice, o kterou Jan nežádal. Těch 24 px je teď rezerva, ne nutnost.

   ZÁPORNÉ `left` PLATÍ JEN NAD 1200 px — je to táž past jako `right: -24px`
   u pravého telefonu, jen na druhé straně. Změřeno 20. 9. 2026 na klonu:
   volné místo mezi levou hranou telefonu a hranou okna prohlížeče je
   1440 → 170 px, 1024 → **47 px**, 768 → **39 px**. `drop-shadow` sahá
   34 px doleva, takže při −15 px zbývá na 1024 jen
   47 − 15 − 34 = −2 px a na 768 −10 px — a `.homeUcet {overflow: hidden}`
   by stín uřízl. Níž proto `left: 0`. */
.homeUcet .ucetTelefonVlevo {position: absolute; left: -15px; top: 166px; width: 190px; height: auto; z-index: 2;
  filter: drop-shadow(0 18px 34px rgba(31, 61, 62, 0.26));}
/* Odstup popisku počítá s tím, že telefon při scrollu klesá až o 31 px pod
   klidovou polohu (0.08 z vlastní výšky 389 px). 58 px z prvního návrhu by
   o ty tři desítky pixelů nestačilo a telefon by textu vjel do řádku. */
.homeUcet .ucetPopisek {margin: 86px auto 0 auto; max-width: 620px; text-align: center; font-size: 16px; color: #4C6364;}

/* --- benefity --- */
/* HOVER NA PANELECH — Jan 20. 9. 2026: „panely > co tam udělat za animaci
   jako hover?"

   ŽÁDNÝ NOVÝ HOVER SE NEVYMÝŠLÍ. Web má vlastní vzorec pro karty a používá
   ho na TŘECH místech se shodným kódem: `.potizeKarta` (style.css ř. 660),
   `.userHistorieKarta` (ř. 2193) a `.sestavaKarta` (ř. 4244). Zní:
   `transition: background .15s ease, box-shadow .15s ease`, na hover podklad
   #F7F8F9 + `box-shadow: 0 4px 14px rgba(0,0,0,0.07)`, podtržený nadpis,
   posunutá šipka, `:focus-visible` obrys. A hlavně **Z83c (Jan 21. 8. 2026):
   karta se při hoveru NEPOSOUVÁ** — `transform: translateY(-1px)` odsud
   tehdy vyletěl, protože v mřížce je i jednopixelový skok vidět jako cuknutí.
   Tady se proto přebírá `box-shadow` i časování beze změny.

   PŘEBÍRÁ SE ALE JEN POLOVINA VZORCE, A JE TO ZMĚŘENÉ, NE VKUS.
   1) PODKLAD #F7F8F9 ZDE NEFUNGUJE. Ty tři karty leží na #F3F3F5, kdežto
      tahle sekce má pozadí **#F4F9F9** — a #F7F8F9 se od něj liší o (3,−1,0)
      v RGB, tedy kontrastní poměr **1,0008 : 1**. Bílá karta má proti pozadí
      1,0625 : 1, takže „ztmavení" by hranu karty ne zvýraznilo, ale
      SMAZALO. Zůstává tedy jen stín.
   2) PODTRŽENÝ NADPIS A ŠIPKA SE NEPŘEBÍRAJÍ, protože to jsou signály
      klikatelnosti a tyhle panely nikam nevedou — nejsou `<a>`. Ze stejného
      důvodu tu není `:focus-visible`: panel není fokusovatelný, bylo by to
      mrtvé CSS.
   Místo nich nese druhou půlku signálu KOLEČKO IKONY: dostane měkkou svatozář
   z akcentu, který sekce už má (#53f8ff na 28 %). Je to taky `box-shadow`,
   takže se nic nepřepočítává a nic neposkočí.

   DOTYK: obojí je schované za `@media (hover: hover) and (pointer: fine)`.
   Bez toho iOS drží `:hover` po klepnutí, dokud člověk neklepne jinam, a
   panel by zůstal viset ve zhoverovaném stavu. Týž vypínač používá web
   u šipky karuselu nápadů (style.css ř. ~5245). */
.homeUcet .ucetBenefity {margin-top: 46px;}
.homeUcet .ucetBenefit {height: 100%; background: #fff; border-radius: 14px; padding: 26px 26px 22px 26px;
  transition: box-shadow .15s ease;}
.homeUcet .ucetBenefitIkona {width: 44px; height: 44px; border-radius: 50%; background: #53f8ff;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
  transition: box-shadow .15s ease;}
@media (hover: hover) and (pointer: fine) {
  .homeUcet .ucetBenefit:hover {box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);}
  .homeUcet .ucetBenefit:hover .ucetBenefitIkona {box-shadow: 0 0 0 6px rgba(83, 248, 255, 0.28);}
}
/* Koncový stav zůstává, ruší se jen přechod — „reduced motion" znamená
   bez animace, ne bez odezvy. */
@media (prefers-reduced-motion: reduce) {
  .homeUcet .ucetBenefit, .homeUcet .ucetBenefitIkona {transition: none;}
}
.homeUcet .ucetBenefitIkona i {font-size: 18px; color: #12292A;}
.homeUcet .ucetBenefit h3 {font-family: 'AeonikMedium', Arial, Helvetica, sans-serif; font-size: 20px;
  line-height: 1.25; color: #1F3D3E; margin: 0 0 8px 0;}
.homeUcet .ucetBenefit p {font-size: 16px; line-height: 1.5; color: #3B5152; margin: 0;}

/* --- tři telefony --- */
.homeUcet .ucetScreeny {margin-top: 46px;}
.homeUcet .ucetScreen {text-align: center;}
.homeUcet .ucetScreen img {width: auto; height: 420px; max-width: 100%;
  filter: drop-shadow(0 16px 30px rgba(31, 61, 62, 0.18));}
.homeUcet .ucetScreen span {display: block; margin-top: 18px;
  font-family: 'AeonikMedium', Arial, Helvetica, sans-serif; font-size: 16px; color: #1F3D3E;}

.homeUcet .ucetCta {margin-top: 46px;}

@media (max-width: 1199.98px) {
  .homeUcet .ucetVizual {padding-left: 76px; padding-right: 76px; margin-top: 62px;}
  /* ŽÁDNÝ POSUN VEN — vnitřní šířka `.container` je tu 930 px, kontejner
     sedí na její hraně a posun ven by stín přisunul k okraji okna
     prohlížeče (na 1024 px by šel na 1031 px při viewportu 1024).

     A NAOPAK: 5 px DOVNITŘ je oprava ořezu stínu, nalezená měřením
     20. 9. 2026 (třetí kolo). Je to vada starší než tohle kolo — s `0`
     ji měly oba telefony. Nejtěsnější místo NENÍ 1024, ale **992 px**,
     tedy spodní hrana intervalu: `.container` má do 1199.98 max-width
     960 px, takže při viewportu 992 zbývá na každé straně jen (992−930)/2
     = 31 px, `drop-shadow` sahá 34 px → **−3 px, tedy ořez**. Změřeno na
     osmi šířkách; s `5px` vychází 992 → +2 px a 1024 → +18 px. */
  .homeUcet .ucetTelefon {width: 164px; bottom: -34px; right: 5px;}
  .homeUcet .ucetTelefonVlevo {width: 164px; top: 144px; left: 5px;}
}
@media (max-width: 991.98px) {
  .homeUcet .ucetVizual {padding-left: 62px; padding-right: 62px; margin-top: 56px;}
  .homeUcet .ucetTelefon {width: 140px; bottom: -28px;}
  /* Posun se škáluje ŠÍŘKOU TELEFONU, ne pevnými 200 px: telefon i okno jsou
     tu menší, takže 200 px by ho poslalo pod spodní hranu okna.
     164/190 × 200 = 174 px (výš), 140/190 × 200 = 147 px (tady). */
  .homeUcet .ucetTelefonVlevo {width: 140px; top: 121px; left: 0;}
  .homeUcet .ucetPopisek {margin-top: 72px;}
  .homeUcet .ucetScreen img {height: 340px;}
}
@media (max-width: 767.98px) {
  .homeUcet .ucetVizual {margin-top: 34px; padding-left: 0; padding-right: 46px;}
  /* Pod 768 px se levý telefon SKRÝVÁ. Vnitřní šířka `.container` je tu
     ≤ 510 px a okno prohlížeče už samo ukazuje jen ořezaný VÝŘEZ plochy
     (170 %, viz níž) — druhý telefon přes jeho levou hranu by z toho výřezu
     ukrojil další třetinu a nezbylo by nic, co by se dalo poznat. Sdělení
     „účet je i v telefonu" nese na mobilu pravý telefon a řada tří telefonů
     pod benefity, takže se skrytím nic neztrácí.

     20. 9. 2026 PŘEZKOUMÁNO po posunu o 200 px dolů (Jan se ptal, jestli to
     pořád platí) — platí, a nově z DRUHÉHO důvodu: okno je tu vysoké jen
     290 + 26 = 316 px, kdežto posunutý telefon by začínal až na `top: 121px`
     a končil o 287 px níž, tedy 92 px POD spodní hranou okna, v textu
     popisku. Skrytí je tu teď nutnost, ne jen úspora místa. */
  .homeUcet .ucetTelefonVlevo {display: none;}
  .homeUcet .ucetOknoLista {height: 26px; padding: 0 10px;}
  .homeUcet .ucetOknoLista span {width: 7px; height: 7px;}
  .homeUcet .ucetOknoLista em {margin-left: 10px; font-size: 10px;}
  /* Celá plocha 1440 px zmenšená do 314 px sloupce je nečitelná (změřeno
     20. 9. 2026: měřítko 0,22 — z grafu i z karet zbyly šmouhy). Na mobilu
     se proto ukazuje VÝŘEZ: obrázek v 170 % šířky okna, ořezaný odshora
     vlevo. Měřítko je pak ~0,37 a je vidět Přehled, taby a karta Dnes.
     `.ucetOkno` už `overflow: hidden` má (kvůli zaoblení), takže se nic
     nevyleje ven. */
  .homeUcet .ucetOknoObraz {width: 170%; max-width: none; height: 290px;
    object-fit: cover; object-position: left top;}
  /* `right: 6px` NENÍ estetika, je to oprava OŘEZU STÍNU — nalezeno při
     měření 20. 9. 2026 (třetí kolo) a je to vada STARŠÍ než tohle kolo:
     geometrie pravého telefonu se nezměnila, jen se na ni poprvé změřeně
     sáhlo. Pod 576 px je `.container` široký 100 % (ne 540 px), takže
     `.ucetVizual` sedí na hraně obsahu a `right: 0` posadí telefon 375 px
     od levého okraje při viewportu 390. `drop-shadow` sahá 34 px doprava,
     tedy na 409 px — a `.homeUcet {overflow: hidden}` z něj **4 px uřízl**.
     Změřeno: rezerva −4 px při 390, +5 px při 768. Šest pixelů srovná obojí
     (390 → +2, 768 → +11) a telefonem to hne o 6 px, což je pod prahem
     viditelnosti. */
  .homeUcet .ucetTelefon {width: 104px; bottom: -18px; right: 6px;}
  .homeUcet .ucetPopisek {margin-top: 54px; font-size: 15px;}
  .homeUcet .ucetBenefity {margin-top: 34px;}
  .homeUcet .ucetBenefit {padding: 20px;}
  .homeUcet .ucetBenefit h3 {font-size: 18px;}
  .homeUcet .ucetScreeny {margin-top: 34px;}
  .homeUcet .ucetScreen img {height: 300px;}
  .homeUcet .ucetScreen span {font-size: 14px; margin-top: 12px;}
  .homeUcet .ucetCta {margin-top: 34px;}
}

/* --- KARUSEL PLOCHY (C19, 2. 10. 2026) ---------------------------------
   Staví ho `jquery.scripts.js` (blok „KARUSEL PLOCHY V SEKCI MŮJ ÚČET"),
   všechno níž platí až s třídou `.ucetKaruselJS` / `.ucetKaruselNav`, kterou
   dává skript — bez JS zůstává sekce s jedním snímkem beze změny.

   Slidy leží na sobě: první obrázek (ten z obsahu kat. 550) zůstává
   v toku a drží výšku, ostatní jsou `absolute` přes něj. Všechny mají
   třídu `.ucetOknoObraz`, takže mobilní výřez (170 %, `object-fit`) platí
   pro každý stejně.

   TEČKY: vzhled je celý z karuselu Nápadů (`.userKaruselAuto
   .userKaruselPuntik…`, style.css ř. ~5358). Tady jen řádek, protože
   `.userKaruselPuntiky {display: flex}` je tam vázané na `.userVolbyKaruselJS`.
   Plnění aktivní pilulky po dobu autoplaye (Jan 2. 10. 2026: „ta pill se
   neplní") dělá skript inline `transform: scaleX()` na `…PuntikPlni` —
   týž mechanismus jako Nápady, žádné CSS navíc. Bez autoplaye platí
   pravidlo Nápadů: aktivní pilulka celá.

   ODSTUP POPISKU: navigace (20 + 44 px) se vkládá do mezery, kterou dřív
   držel `margin-top` popisku sám — a ten počítal s pravým telefonem, který
   při scrollu klesá pod okno (viz komentář u `.ucetPopisek`). Součet
   se proto drží na původní hodnotě (86 / 72 px); na mobilu vyjde 64 px proti
   původním 54, menší to být nemůže. Tečky stojí uprostřed, telefony na
   krajích, takže se vodorovně nepotkají na žádné šířce. */
.homeUcet .ucetSlidy {position: relative; overflow: hidden;}
.homeUcet .ucetKaruselJS {cursor: pointer;}
.homeUcet .ucetKaruselJS:focus {outline: none;}
.homeUcet .ucetKaruselJS:focus-visible {outline: 2px solid #1F3D3E; outline-offset: 4px;}
.homeUcet .ucetKaruselJS .ucetSlide {opacity: 0; transition: opacity .45s ease, transform .45s ease;}
.homeUcet .ucetKaruselJS .ucetSlide + .ucetSlide {position: absolute; top: 0; left: 0;}
.homeUcet .ucetKaruselJS .ucetSlide.jeAktivni {opacity: 1; transform: none;}
.homeUcet .ucetKaruselNav {margin-top: 20px;}
.homeUcet .ucetKaruselNav .userKaruselPuntiky {display: flex; justify-content: center; align-items: center; gap: 0;}
.homeUcet .ucetKaruselNav + .ucetPopisek {margin-top: 22px;}
@media (max-width: 991.98px) {
  .homeUcet .ucetKaruselNav + .ucetPopisek {margin-top: 8px;}
}
@media (max-width: 767.98px) {
  .homeUcet .ucetKaruselNav {margin-top: 16px;}
  .homeUcet .ucetKaruselNav + .ucetPopisek {margin-top: 4px;}
}
@media (prefers-reduced-motion: reduce) {
  .homeUcet .ucetKaruselJS .ucetSlide {transition: none; transform: none !important;}
}
/* Jan 6. 10. 2026: po načtení na /cz/#mujUcet je sekce vidět dřív, než
   paralaxa (window load) telefony a okno posune. Safari pak nechával stín
   ve výchozí poloze a teprve po chvíli ho přesunul k telefonu. Prvky jsou
   proto skryté, dokud jquery.scripts.js po SmoothParallax.init nesundá
   třídu `paralaxaCeka` z <html> (přidává ji inline skript v hlavičce
   index.html, s pojistkou 5 s). `visibility` nemění rozměry, takže knihovna
   měří totéž co dřív. */
.paralaxaCeka .homeUcet [smooth-parallax] {visibility: hidden;}

/* ==== HOME 1 — desktopový náhled v heru ================================
   Do 20. 9. 2026 tu stál třetí TELEFON s Přehledem. Jan 20. 9. 2026:
   „hero - misto toho nového mobilního náhledu bude náhled desktopový."
   Telefony 1 a 2 zůstávají přesně tam, kde jsou na produkci — nesahá se
   na ně, jen dostávají nižší z-index.

   Kotví se přes `right`, NE přes `left`, ze stejného důvodu jako předtím
   telefon: `left` neudrží prvek uvnitř sloupce na všech pěti breakpointech.
   Okno je širší než vysoké, takže sedí NÍŽ a PŘED telefony — jejich horní
   část (kde je obsah displeje) zůstává vidět.

   POHYB SE MĚŘÍ PROTI ŽIVÝM TELEFONŮM, NE ODHADEM. Knihovna posouvá prvek
   o NÁSOBEK JEHO VLASTNÍ VÝŠKY, takže tentýž vektor dá na menším prvku menší
   pohyb. Okno je 296 px vysoké, telefony 480 px — s původním
   `end-position-y="-0.16"` se okno hýbalo 0.16 × 296 = 47 px proti
   0.2 × 480 = 96 px telefonů, tedy ANI NE POLOVINOU. Změřeno 20. 9. 2026 na
   600 px scrollu: okno 7,3 px, telefon 14,9 px — a Jan napsal „neanimuje se
   nový screenshot". `0.65 × 296 = 192 px` je proti telefonům přesně 2,0×,
   takže je okno tím nejživějším prvkem hera, ne nejmrtvějším.

   SMĚR JE OD 20. 9. 2026 (druhé kolo) KLADNÝ, tedy DOLŮ — Jan: „hero > ten
   3. screenshot by se mohl posouvat dolů". Velikost pohybu se nezměnila,
   jen znaménko.

   ==== PROČ SE S OTOČENÍM ZNAMÉNKA MUSEL SNÍŽIT `top` ====================
   Kontejnerem je `body`, takže `a` není nula ani při scrollu 0: je to
   `innerHeight / scrollHeight`, změřeno 900 / 12 761 = 0,0705. Při
   `end-movement="0.3"` z toho vychází posun 0,65 × (0,0705 / 0,3) × 296 =
   45 px UŽ V KLIDU. Se záporným vektorem okno tedy sedělo o 45 px VÝŠ, než
   kam ho posadil `top`, a s kladným sedí o 45 px NÍŽ — otočení znaménka
   samo o sobě posune kompozici o 90 px dolů.

   Naměřené klidové posuny (scroll 0, viewport 900): 1440 → 45,2 px;
   1024 → 41,2 px; 768 → 45,0 px; 390 → 30,8 px. `top` je proto na každém
   breakpointu snížen o DVOJNÁSOBEK toho čísla, aby okno zůstalo opticky
   tam, kde ho Jan schválil, a jen se otočil směr jízdy.

   Vodorovně je vektor záporný schválně — okno se smí posouvat jen DOLEVA.
   Při +x by na 1440 px vyjelo za pravý okraj okna a udělalo vodorovný
   posuvník. `-0.14 × 440 = 62 px` je 1,3× vodorovného pohybu telefonů.

   ZÁPORNÉ `right` SE MUSÍ DOMĚŘIT NA KAŽDÉM BREAKPOINTU ZVLÁŠŤ, jinak udělá
   vodorovný posuvník. `.row` má záporné vnější okraje, takže pravý okraj
   sloupce nesedí na obsahu kontejneru, ale je o 15 px dál — a šířka
   kontejneru navíc skáče (1140 / 960 / 720 / 540 / 100 %). První měření
   20. 9. 2026 s jediným `right: -70px` vyrobilo `scrollWidth` 1055 při
   1024 px, 783 při 768 px a 394 při 390 px, tedy posuvník na třech šířkách
   ze čtyř. Hodnoty níž jsou doměřené tak, aby okno skončilo uvnitř i na
   spodní hraně každého intervalu. */
/* `top: 228px` = původních 318 − 2 × 45 px klidového posunu (viz výš).

   OD 20. 9. 2026 (páté kolo) NENÍ `.home1-desktop` OBRÁZEK, ALE ODKAZ
   `<a href="#mujUcet">` s obrázkem uvnitř. Jan: „screenshot Přehledu bude
   mít hover shade a link na sekci Můj účet na webu."

   PROČ TŘÍDU NESE ODKAZ A NE OBRÁZEK: posun v smooth-parallaxu je násobek
   VLASTNÍ VÝŠKY prvku, takže kdyby zůstala geometrie na `<img>` a atributy
   na `<a>` (nebo naopak), rozešla by se poloha s dráhou. Odkaz proto dědí
   celé pozicování i `smooth-parallax` atributy a obrázek uvnitř je jen
   `display: block; width: 100%` — výška odkazu je tím přesně výška
   obrázku, tedy 296 px jako dřív. Změřeno po přestavbě: prvek má pořád
   440 × 296 px na témže místě a při D = 300 px scrollu jde +15 px dolů,
   tedy stejně jako před ní.

   `display: block` u odkazu je nutnost, ne vkus — inline `<a>` by si vzal
   výšku z řádku (`line-height`), ne z obrázku, a `end-position-y="0.65"`
   by pak počítalo dráhu z jiného čísla.

   HOVER: STÍN SE KŘÍŽOVĚ PROLÍNÁ MEZI DVĚMA VRSTVAMI, NEANIMUJE SE `filter`.
   Do 20. 9. 2026 to byl jeden `filter: brightness() drop-shadow()` s přechodem
   .25s a Jan reklamoval, že „hover animace stínu není plynulá". Příčina je
   v tom, že interpolace `drop-shadow` nutí prohlížeč KAŽDÝ SNÍMEK znovu
   rozostřit alfa masku PNG 440×296. Změřeno na produkci přes CDP
   (`Performance.getMetrics`, CPU zpomalené 4×): hlavní vlákno spotřebovalo
   za 450 ms hoveru 8,39–10,97 ms proti 3,00–3,19 ms v klidu, tedy 2,8–3,4×.
   Teď nesou oba stíny `box-shadow` na DVOU pseudoprvcích a přechází se jen
   `opacity` — tu prohlížeč skládá na GPU, bez překreslování.

   `box-shadow` smí zastoupit `drop-shadow` proto, že `ucet-hero-desktop.png`
   je NEPRŮHLEDNÝ ZAOBLENÝ OBDÉLNÍK: alfa je binární (255/0) a průhledných
   pixelů je 600 z 1 214 976, všechny v rozích. Poloměr 26 px na ploše
   1344 × 904 se v procentech píše `1.935% / 2.876%`, takže se škáluje
   s prvkem sám a na KAŽDÉM breakpointu vyjde kruhový roh (při 440 px je to
   8,51 px vodorovně i svisle). Kdo vymění obrázek, musí ta procenta
   přepočítat — jinak se stín rozejde s jeho rohy.

   `brightness` zůstává `filter`, protože ztmavení je barevná matice, ne
   rozostření; filtr rodiče se propíše i na oba pseudoprvky, ale na černém
   stínu se neprojeví. `brightness(1)` v klidu je schválně — filtr se mezi
   dvěma seznamy interpoluje jen při stejném počtu funkcí.

   `z-index: -1` u obou pseudoprvků je nutnost, ne úklid: bez něj by ležely
   NAD obrázkem. Prvek má vlastní stacking context (má `transform` i
   `filter`), takže se pod fotku hera nepropadnou.

   PRVEK SE PŘI HOVERU NEHÝBE O PIXEL (Janovo pravidlo z 21. 8. 2026). Tady
   to není jen zvyk: okno JE V PARALLAXU, takže každý posun na hoveru by se
   pral s posunem od scrollu. `opacity` ani `filter` na layout nesahají a
   pseudoprvky mají `left/top/right/bottom: 0`, tedy žádnou vlastní geometrii.

   `@media (hover: hover) and (pointer: fine)` je povinné — na dotyku by
   zhoverovaný stav zůstal viset, dokud člověk neklepne jinam.

   ==== `transform` V KLIDU NENÍ POSUN, JE TO PŘEDLOHA PRO KNIHOVNU ========
   Bez něj prvek po načtení stránky SKOČÍ. `smooth-parallax.min.js` se
   inicializuje až na `window load` a v prvním snímku zapíše
   `style.transform` podle `a = (innerHeight − container.top) / container.scrollHeight`.
   U `container="body"` je `a` při scrollu 0 rovno `innerHeight / výška stránky`,
   tedy ~0,07 — nikdy ne nula. Do té chvíle prvek sedí tam, kam ho posadilo
   CSS, a v jediném snímku se přemístí. Změřeno 20. 9. 2026 na produkci
   (rect se settlou transformací mínus rect s `transform: none`, kanárka na
   statickém prvku 0,00): okno **+44,4 px**, telefony **±22,2 px**.

   Sníženým `top` se to spravit NEDÁ a 20. 9. 2026 se o to marně pokoušelo —
   posune to obě polohy naráz, takže skok zůstane stejně velký, jen jinde.

   Odstraňuje to až to, že se TÁŽ hodnota napíše do CSS: prvek pak před
   inicializací stojí přesně tam, kam ho knihovna vzápětí zapíše, a rozdíl
   je nula. Proč to jde napsat staticky: skok = rychlost × `innerHeight`,
   a rychlost na výšce okna nezávisí (výška stránky je dána šířkou layoutu).
   Skok je tedy PŘESNĚ ÚMĚRNÝ `innerHeight`, což je jednotka `vh` — proto
   ty hodnoty platí na každém okně, ne jen na tom, na kterém se měřily.

   ZBYLÁ ZÁVISLOST JE VÝŠKA STRÁNKY a liší se po jazycích (cz/en/de mají
   12 878–13 580 px na téže šířce). Hodnoty níž jsou proto PRŮMĚREM ze tří
   jazyků × všech měřených šířek v daném pásmu; největší zbytkový skok
   z toho vychází 1,27 px, tedy pod přejímacím prahem 2 px. Kdo na úvodku
   přidá nebo ubere sekci, MUSÍ je přeměřit — o 10 % delší stránka znamená
   o ~10 % menší skok a rozdíl se projeví jako pár pixelů cuknutí.

   Hodnoty se nepřepisují z hlavy: změří se `transform`, který knihovna
   nastaví při scrollu 0, a vydělí se výškou okna (naměřeno při 900 px). */
.intro-textRight .home1-desktop {position: absolute; left: auto; right: -20px; top: 228px;
  width: 440px; height: auto; z-index: 2; display: block; cursor: pointer;
  border-radius: 1.935% / 2.876%;
  transform: translate3d(-1.57vh, 4.90vh, 0);
  filter: brightness(1);}
.intro-textRight .home1-desktop::before,
.intro-textRight .home1-desktop::after {content: ""; position: absolute;
  left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit;
  z-index: -1; pointer-events: none;}
.intro-textRight .home1-desktop::before {opacity: 1;
  box-shadow: 0 22px 42px rgba(18, 41, 42, 0.32);}
.intro-textRight .home1-desktop::after {opacity: 0;
  box-shadow: 0 30px 56px rgba(18, 41, 42, 0.46);}
.intro-textRight .home1-desktop img {display: block; width: 100%; height: auto;}
@media (hover: hover) and (pointer: fine) {
  .intro-textRight .home1-desktop {transition: filter .25s ease;}
  .intro-textRight .home1-desktop::before,
  .intro-textRight .home1-desktop::after {transition: opacity .25s ease;}
  .intro-textRight .home1-desktop:hover {filter: brightness(0.94);}
  .intro-textRight .home1-desktop:hover::before {opacity: 0;}
  .intro-textRight .home1-desktop:hover::after {opacity: 1;}
}
/* Klávesnice má vidět totéž co myš; obrys prohlížeče se nepotlačuje. */
.intro-textRight .home1-desktop:focus-visible {filter: brightness(0.94);}
.intro-textRight .home1-desktop:focus-visible::before {opacity: 0;}
.intro-textRight .home1-desktop:focus-visible::after {opacity: 1;}
@media (prefers-reduced-motion: reduce) {
  .intro-textRight .home1-desktop,
  .intro-textRight .home1-desktop::before,
  .intro-textRight .home1-desktop::after {transition: none;}
}
/* Telefony hera mají týž skok, jen menší a opačný — Jan psal „screenshoty"
   množně. Jejich `top`/`left`/`height` zůstávají tam, kde byly (ř. 219–220
   a media query výš); tady přibývá JEN předloha transformace. */
.intro-textRight .home1-phone1, .intro-textRight .home1-phone2 {z-index: 1;}
.intro-textRight .home1-phone1 {transform: translate3d(-1.19vh, -2.43vh, 0);}
.intro-textRight .home1-phone2 {transform: translate3d(1.25vh, 2.43vh, 0);}
@media (min-width: 1200px) {
  .intro-textRight {min-height: 640px;}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .intro-textRight {min-height: 600px;}
  .intro-textRight .home1-desktop {right: -10px; top: 218px; width: 400px;  /* 300 − 2 × 41 */
    transform: translate3d(-1.41vh, 4.41vh, 0);}
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .intro-textRight {min-height: 540px;}
  .intro-textRight .home1-desktop {right: -6px; top: 172px; width: 380px;  /* 262 − 2 × 45 */
    transform: translate3d(-1.55vh, 4.85vh, 0);}
  /* telefony jsou v tomhle pásmu 450 px vysoké (ř. 1773–1774) */
  .intro-textRight .home1-phone1 {transform: translate3d(-1.28vh, -2.62vh, 0);}
  .intro-textRight .home1-phone2 {transform: translate3d(1.35vh, 2.62vh, 0);}
}
/* Na mobilu se okno rozšiřuje DOLEVA (`right` zůstává), aby zůstalo měřítko
   co největší a přitom nevznikl posuvník. Pod 390 px je i tak jen 0,22 —
   v heru je to prvek, který má říct „účet je i na počítači", ne dokument
   ke čtení; čitelný výřez plochy má sekce „Můj účet" níž na stránce. */
@media (max-width: 767.98px) {
  .intro-textRight {min-height: 630px;}
  .intro-textRight .home1-desktop {right: -10px; top: 310px; width: 340px;  /* 384 − 2 × 37 */
    transform: translate3d(-1.26vh, 3.95vh, 0);}
  /* telefony jsou pod 768 px 420 px vysoké (ř. 1648–1649) */
  .intro-textRight .home1-phone1 {transform: translate3d(-1.08vh, -2.21vh, 0);}
  .intro-textRight .home1-phone2 {transform: translate3d(1.13vh, 2.21vh, 0);}
}
@media (max-width: 575px) {
  .intro-textRight {min-height: 600px;}
  .intro-textRight .home1-desktop {right: 4px; top: 298px; width: 320px;  /* 366 − 2 × 34 */
    transform: translate3d(-1.18vh, 3.68vh, 0);}
}
@media (max-width: 390px) {
  .intro-textRight {min-height: 570px;}
  .intro-textRight .home1-desktop {right: 4px; top: 290px; width: 290px;  /* 352 − 2 × 31 */
    transform: translate3d(-1.05vh, 3.29vh, 0);}
}

/* ==========================================================================
   PŘEPÍNAČ „ROČNÍ S POMŮCKAMI" NAD ROČNÍM TLAČÍTKEM (C19, 24. 9. 2026)
   ==========================================================================

   Jan: přepínač nad hlavním ročním tlačítkem, výchozí vypnutý; zapnutý
   přepne totéž tlačítko na Payment Link s pomůckami a odkryje poznámku.

   ŽÁDNÁ NOVÁ BARVA. Vypnutý: bílá kolej s obrysem a jezdcem #637B7C
   (táž šedá jako kroky 2 a 3 panelu Dnes, 4,512 : 1 na bílé — nad
   prahem 3 : 1 pro ovládací prvek). Zapnutý: kolej #1F3D3E s bílým
   jezdcem, tedy týž pár jako aktivní korálek. Primární #6FF9FF se
   schválně nepoužívá: na bílé má 1,2 : 1 a v postupu je to barva
   jediného hlavního tlačítka.

   [hidden] se píše výslovně — třída s display by atribut přebila
   a přepínač by se ukázal i bez skriptu.

   DRUHÉ KOLO (24. 9. 2026): přepínač je celý podbarvený rámeček
   (#F4F7F7 s linkou #E4E9E9, tedy dvojice, kterou už nese CTA karta
   Přehledu) se štítkem, řádkem úspory a náhledy pomůcek. Klik kamkoli
   do rámečku přepíná, protože rámeček JE to tlačítko. Na #F4F7F7 se
   píše jen #1F3D3E (10,86 : 1): šedá #637B7C by tam spadla pod 4,5.
   Náhledy mají pevných 48 × 48 px v atributech i v CSS, takže nic
   neposkočí, až se obrázek dotáhne. */
.userPredplatneLanoVolba {margin: 12px 0 0 0;}
.userPredplatneLanoVolba[hidden], .userPredplatneLanoPoznamka[hidden] {display: none;}
.userPredplatneLanoSwitch {display: flex; flex-direction: column; align-items: stretch;
   gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 14px 16px;
   border: 1px solid #E4E9E9; border-radius: 14px; background: #F4F7F7;
   color: #1F3D3E; font-family: inherit; font-size: 15px; line-height: 1.3;
   text-align: left; text-transform: none; letter-spacing: normal; cursor: pointer;
   transition: background-color .15s ease, border-color .15s ease;}
.userPredplatneLanoSwitch:hover {background: #E4E9E9;}
.userPredplatneLanoSwitch[aria-checked="true"] {border-color: #1F3D3E;}
.userPredplatneLanoRadek {display: flex; align-items: flex-start; gap: 12px;}
.userPredplatneLanoKolej {position: relative; flex: 0 0 auto; width: 40px; height: 24px;
   margin-top: 1px; border-radius: 999px; background: #FFFFFF;
   box-shadow: inset 0 0 0 1px #637B7C;
   transition: background-color .15s ease, box-shadow .15s ease;}
.userPredplatneLanoJezdec {position: absolute; top: 4px; left: 4px; width: 16px; height: 16px;
   border-radius: 50%; background: #637B7C;
   transition: transform .15s ease, background-color .15s ease;}
.userPredplatneLanoSwitch[aria-checked="true"] .userPredplatneLanoKolej {background: #1F3D3E;
   box-shadow: inset 0 0 0 1px #1F3D3E;}
.userPredplatneLanoSwitch[aria-checked="true"] .userPredplatneLanoJezdec {transform: translateX(16px);
   background: #FFFFFF;}
.userPredplatneLanoTexty {display: flex; flex-direction: column; gap: 4px; min-width: 0;}
/* Štítek stojí PŘED popisem a text teče vedle něj (inline). Za popisem
   by na každé šířce spadl na samostatný řádek, protože popis vyplní
   celou první řádku — změřeno 24. 9. 2026 ve všech třech jazycích. */
.userPredplatneLanoHlavicka {display: block;}
.userPredplatneLanoPopis {display: inline; font-size: 15px; line-height: 1.3; color: #1F3D3E;}
.userPredplatneLanoStitek {display: inline-block; margin-right: 6px; padding: 0 8px;
   border: 1px solid #1F3D3E; border-radius: 999px; font-size: 12px; line-height: 18px;
   color: #1F3D3E; white-space: nowrap; vertical-align: 1px;}
.userPredplatneLanoUspora {font-size: 14px; line-height: 1.35; color: #1F3D3E;}
.userPredplatneLanoFotky {display: flex; flex-wrap: wrap; gap: 8px; padding-left: 52px;}
.userPredplatneLanoFotky:empty {display: none;}
.userPredplatneLanoFoto {display: block; flex: 0 0 48px; width: 48px; height: 48px;
   border-radius: 8px; object-fit: cover; background: #FFFFFF;}
.userPredplatneLanoSwitch:focus {outline: none;}
.userPredplatneLanoSwitch:focus-visible {outline: 2px solid #1F3D3E; outline-offset: 3px;}
.userPredplatneLanoPoznamka {margin: 10px 0 0 0;}
@media (prefers-reduced-motion: reduce) {
  .userPredplatneLanoSwitch, .userPredplatneLanoKolej,
  .userPredplatneLanoJezdec {transition: none;}
}

/* ===== VEREJNY CENIK: CENA JEDNIM RETEZCEM (C19, 25. 9. 2026) ==========
   Jan 25. 9. 2026: cena ve formatu jako karta v uctu, "CZK 208 / mesic".
   Text sklada predplatneTextZaMesic() (klic userPredplatneCenaZaMesic),
   sablona subscription.html ho dava do jednoho prvku .subscriptionCena
   misto velke ceny a sedeho popisku .subscriptionPrice2 (#bebec9,
   kontrast 1,84 na bile). Barva #1F3D3E je tataz jako cena v uctu
   (.userPredplatneVariantaCena), na bile 11,697 : 1. Cena se nezalamuje
   (nowrap); pod 420 px se zmensi, aby "EUR 10,25 / Monat" nepretekla
   karte. Lepiva lista: tataz barva, sedy span v ni uz neni. */
.subscriptionCena {font-size: 35px; font-weight: 600; color: #1F3D3E; line-height: 1.2; white-space: nowrap;}
.ctaListaCena {color: #1F3D3E;}
@media (max-width: 420px) {
  .subscriptionCena {font-size: 28px;}
}