/* Obvody, obsahy, povrchy a objemy těles.
   ------------------------------------------------------------------
   Psáno mobile first: základ je jeden sloupec a další se přidávají až
   min-width dotazy, takže na telefonu se nic nepřepisuje zpátky.

   Barvy jsou webové: tmavě modrá rgb(11, 27, 61) jako lišta, výsledek
   černě. Oranžová se tu nepoužívá schválně – ta je na webu vyhrazená
   odznaku EXTRA a jinde plete. Žádná světle modrá ani světle zelená
   – stránka dřív vypadala jako z jiného webu.

   Prefix tv- (tělesa a tvary). Selektory jsou zásadně přes .tv-* nebo
   .body-container: holé „input, button, label, h3“, které tu byly dřív,
   platily i pro plovoucí lištu s odměnou mimo .body-container. */

.telesa-uvod {
    margin: 0 0 26px;
    color: #444444;
}

.body-container .tv-sekce {
    margin: 0 0 34px;
    padding: 0;
    border: 0;
    background: none;
}

.tv-nadpis {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 1.35rem;
    color: rgb(11, 27, 61);
}

.tv-nadpis::after {          /* linka dotažená do konce řádku */
    content: "";
    flex: 1;
    height: 3px;
    background: rgb(11, 27, 61);
    opacity: 0.15;
}

.tv-popis {
    margin: 0 0 16px;
    color: #666666;
    font-size: 0.95rem;
}

.tv-mrizka {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.tv-karta {
    /* styly.css má globální „article { margin: auto 0 }“ a svislé auto
       margin grid položku vycentruje v řádku místo aby ji roztáhl –
       karty pak v řadě začínaly každá jinde. Nulou se to vrací zpátky. */
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #dfe4ee;
    border-radius: 12px;
}

.tv-hlavicka {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #eef1f6;
}

.tv-ikona {
    flex: none;
    width: 30px;
    height: 30px;
    color: rgb(11, 27, 61);
}

.body-container .tv-karta h3 {
    margin: 0;
    font-size: 1.12rem;
    color: rgb(11, 27, 61);
    text-decoration: none;   /* dřív podtržený – vypadal jako odkaz */
}

.tv-vstupy {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.body-container .tv-pole {
    display: block;
    margin: 0;
    font-weight: 400;
}

.tv-nazev-pole {
    display: block;
    margin-bottom: 4px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #55607a;
}

.tv-nazev-pole em {
    font-style: italic;
    color: rgb(11, 27, 61);
}

.body-container .tv-karta input {
    /* Bez border-box je width: 100 % šířka OBSAHU a padding s rámečkem se
       přičtou navrch – políčko pak vyčnívalo 28 px za okraj karty.
       Tenhle web nemá border-box globálně (mat.css to obchází přes
       calc(100% - 20px)), takže se musí napsat tady. */
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    font-size: 16px;         /* pod 16 px iOS při zaostření zvětší stránku */
    color: rgb(11, 27, 61);
    background: #ffffff;
    border: 2px solid #dfe4ee;
    border-radius: 8px;
}

.body-container .tv-karta input:focus {
    outline: none;
    border-color: rgb(11, 27, 61);
}

.body-container .tv-tlacitko {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    background: rgb(11, 27, 61);
    border: 2px solid rgb(11, 27, 61);
    border-radius: 8px;
    cursor: pointer;
}

.body-container .tv-tlacitko:hover {
    background: rgb(20, 42, 86);
}

/* Výsledek se objeví až po výpočtu – prázdný rámeček pod každou kartou
   jen zabíral místo a vypadal jako nedodělek. */
.tv-vysledek {
    margin-top: 14px;
}

.tv-vysledek:empty {
    display: none;
}

.tv-radek {
    padding: 9px 12px;
    background: #f4f6f8;
    border-left: 4px solid rgb(11, 27, 61);
    border-radius: 0 8px 8px 0;
}

.tv-radek + .tv-radek {
    margin-top: 8px;
}

.tv-velicina {
    display: block;
    font-weight: 700;
    color: rgb(11, 27, 61);
}

/* Celý výpočet na jednom řádku i s výsledkem na konci: „o = 4a = 4 · 5 = 20“.
   Výsledek stranou v samostatném sloupci se hůř hledal – oko ho muselo
   spárovat s řádkem, místo aby došlo na konec rovnice. */
.tv-vzorec {
    display: block;
    margin-top: 3px;
    color: #6b7488;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}

.tv-hodnota {
    font-weight: 700;
    font-size: 1.05rem;
    color: #000000;
}

.tv-chyba {
    padding: 9px 12px;
    color: rgb(154, 8, 47);
    font-weight: 700;
    background: #fdf2f4;
    border-left: 4px solid rgb(154, 8, 47);
    border-radius: 0 8px 8px 0;
}

@media (min-width: 620px) {
    .tv-mrizka { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .tv-karta { padding: 18px; }
    .tv-nadpis { font-size: 1.5rem; }
}

@media (min-width: 1000px) {
    .tv-mrizka { grid-template-columns: repeat(3, 1fr); }
}