/*
 * Vzhled CarSen — mobilní tarify.
 *
 * Firemní barva #A8262B je změřená přímo z loga, aby aplikace, ceník
 * i faktura měly stejný odstín značky. Rozvržení
 * drží vzhled CRM AT: nabídka rozdělená do skupin, bílé karty bez rámečků
 * na teplém šedém podkladu, čísla neproporcionálním písmem, aby se sloupce
 * daly srovnat pohledem. Červená patří značce a akcím; stavy mají vlastní
 * barvy, aby se s ní nepletly.
 */
:root {
  --frame:#E9E6E1; --paper:#F6F5F3; --surface:#fff; --surface-2:#FAF9F7;
  --ink:#141414; --ink-2:#4A4A4A; --ink-3:#7A7673;
  --line:#E6E2DC; --line-2:#EFECE7;
  --brand:#A8262B; --brand-fill:#A8262B; --brand-soft:#F8EBEC;
  --good:#0F7B4F; --good-bg:#E3F3EB; --good-fill:#2F6B4F; --good-fill-h:#275A42;
  --warn:#8A5300; --warn-bg:#FBF0DD;
  --bad:#A3001C;  --bad-bg:#F9E4E7; --bad-fill:#A3001C;
  --info:#2563EB; --info-fill:#2563EB;
  --ui: 'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono: 'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif: Georgia,'Times New Roman',serif;
  --r:14px; --r-s:10px;
}
@media (prefers-color-scheme: dark){:root{
  --frame:#0F0E0E; --paper:#191818; --surface:#232122; --surface-2:#2A2728;
  --ink:#ECECEC; --ink-2:#C2BDBE; --ink-3:#9D9899;
  --line:#363233; --line-2:#2F2C2D;
  --brand:#E8737A; --brand-fill:#A8262B; --brand-soft:#2E1618;
  --good:#3FA876; --good-bg:#13291F; --good-fill:#2F7D5B; --good-fill-h:#36916A;
  --warn:#D99B4D; --warn-bg:#2A2113;
  --bad:#FF8090;  --bad-bg:#3A161D; --bad-fill:#A3001C;
  --info:#7FB2E0; --info-fill:#2563EB;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--frame);color:var(--ink);font-family:var(--ui);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* ─────────────────────────────── rám a nabídka */
.obal{display:grid;grid-template-columns:232px 1fr;min-height:100vh;gap:0}
@media(max-width:860px){.obal{grid-template-columns:1fr}}



.rail{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:.9rem;padding:1.3rem .7rem 1rem 1.1rem}
.znacka{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:0 .4rem;min-height:34px}
.znacka img.logo{height:30px;width:auto;display:block}
.lista .znacka img.logo{height:26px}
.znacka .slovo{font-weight:800;font-size:1.22rem;letter-spacing:-.025em;color:var(--brand)}

.uziv{display:flex;align-items:center;gap:.65rem;background:var(--surface);
  border-radius:var(--r);padding:.6rem .7rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.uziv .ini{flex:0 0 34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:var(--brand-fill);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.02em}
.uziv .jm{min-width:0}
.uziv .jm b{display:block;font-size:.88rem;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uziv .jm span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.menu{display:flex;flex-direction:column;gap:.8rem;flex:1}
/* ── Přepínač agend
   Dlaždice přes celou šířku nabídky. Vybraná je zvýrazněná stejně jako
   aktivní položka nabídky, aby bylo z jednoho pohledu vidět, v čem se
   pracuje — nabídka pod tím se podle toho mění. */
.agendy{background:var(--surface);border-radius:var(--r);
  padding:.5rem .55rem .55rem;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.agendy .n{display:block;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:0 .25rem .3rem}
/* Vybraná agenda: pásek ve značkové barvě přes celou šířku nabídky.
   Dřív to byla jedna z pěti stejných pilulek a nešlo na první pohled
   poznat, v čem se pracuje — stránka se po přepnutí tváří skoro stejně. */
.agendy .ted{display:block;background:var(--brand-fill);color:#fff;
  border-radius:8px;padding:.4rem .6rem;font-size:.92rem;font-weight:700;
  letter-spacing:-.01em}
/* Ostatní agendy jsou východy, ne stav — drobnější a ve dvou sloupcích. */
.agendy .volby{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:3px}
.agendy .volby a{text-align:center;padding:.38rem .35rem;border-radius:8px;
  background:var(--surface-2);color:var(--ink-2);font-size:.78rem;font-weight:600}
.agendy .volby a:hover{text-decoration:none;background:var(--line-2);color:var(--ink)}

.menu .grp{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;padding:0 .75rem .15rem}
/* Vysvětlení u agendy, která se zatím staví — bez něj vypadá přepnutá
   agenda jako nabídka, ze které něco zmizelo. */
.menu .grp-poznamka{margin:.1rem .75rem 0;font-size:.72rem;line-height:1.35;
  color:var(--ink-3)}
.menu .sek{display:flex;flex-direction:column;gap:1px}
.menu a{display:flex;align-items:center;gap:.7rem;
  padding:.45rem .75rem;border-radius:999px;color:var(--ink-2);
  font-size:.9rem;font-weight:600;transition:background .12s,color .12s}
.menu a span{flex:1}
.menu a .c{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--ink-3);flex:0}
/* Piktogram dědí barvu po odkazu, takže u aktivní položky zčervená s textem. */
.menu a .ik{flex:0 0 20px;opacity:.75}
.menu a.on .ik,.menu a:hover .ik{opacity:1}

/* Odhlášení dole, odděleně od nabídky — ať se netrefí omylem. */
.odhlasit{display:flex;align-items:center;gap:.7rem;padding:.45rem .75rem;
  margin-top:auto;color:var(--brand);font-size:.9rem;font-weight:700}
.odhlasit:hover{text-decoration:none;background:var(--brand-soft);border-radius:999px}
.menu a:hover{text-decoration:none;background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink)}
.menu a.on{background:var(--surface);color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.menu a.on .c{color:var(--brand)}

main{background:var(--paper);border-radius:var(--r) 0 0 var(--r);
  padding:1.7rem 2rem 4rem;min-width:0}
/* Dole je místo navíc na dolní lištu, aby pod ní neskončil poslední
   řádek stránky. Bezpečná zóna je kvůli indikátoru domů na iPhonu. */
@media(max-width:860px){main{border-radius:0;
  padding:1.2rem 1rem calc(4.8rem + env(safe-area-inset-bottom, 0px))}}

/* Krok zpět nad nadpisem. Na detailu je prohlížečové „zpět" jediná cesta
   ven a po odeslání formuláře vede do prázdna — odkaz je spolehlivější. */
.zpet{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--ink-3);margin-bottom:.5rem}
.zpet:hover{color:var(--brand);text-decoration:none}

/* Náhled faktury rovnou na stránce — ať se kvůli kontrole nemusí stahovat. */
.nahled{width:100%;height:78vh;border:0;border-radius:var(--r);background:var(--surface);
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
@media(max-width:860px){.nahled{height:60vh}}

/* ─────────────────────────────── typografie */
h1{font-weight:800;font-size:1.6rem;letter-spacing:-.025em;margin:0 0 .15rem}
h2{font-weight:700;font-size:1.08rem;letter-spacing:-.01em;margin:2.1rem 0 .7rem}
.podnadpis{color:var(--ink-3);font-size:.85rem;margin:0 0 1.4rem}
.hlava{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}

/* ─────────────────────────────── dlaždice */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:.7rem;margin-bottom:1.5rem}
.tile{background:var(--surface);border-radius:var(--r);padding:.8rem .9rem .85rem;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tile .k{font-family:var(--mono);font-size:.63rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:.25rem}
.tile .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.3rem;
  font-weight:600;letter-spacing:-.03em}
.tile .s{font-size:.72rem;color:var(--ink-3);margin-top:.15rem}

/* Dlaždice ceníku. Nižší a užší než přehledové — je jich na stránce
   přes třicet a mají se dát přejet očima, ne číst jedna po druhé.
   Cena je to jediné, co má být vidět na dálku. */
.cenik{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));
  gap:.55rem;margin:.5rem 0 1.4rem}
.cen{background:var(--surface);border-radius:var(--r-s);padding:.55rem .7rem .6rem;
  border:1px solid var(--line-2);display:flex;flex-direction:column;gap:.1rem}
.cen .nm{font-size:.78rem;line-height:1.3;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cen .cn{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:1.05rem;font-weight:600;color:var(--ink)}
.cen .dt{font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cen.nevyuzit{opacity:.55}
.cen.nevyuzit .cn{color:var(--ink-3)}

/* Barvy operátorů. Jsou to jejich značkové odstíny, ne naše — slouží
   k tomu, aby se ceník dal přebíhat očima po skupinách. Proto se objeví
   jen jako proužek u dlaždice a tečka u nadpisu, ne jako výplň: na faktuře
   ani jinde v aplikaci cizí značka svítit nemá. */
.op{display:inline-flex;align-items:center;gap:.45rem}
.op::before{content:"";width:.6rem;height:.6rem;border-radius:50%;
  background:var(--op,var(--ink-3));flex:0 0 auto}
.cenik .cen{border-left:3px solid var(--op,var(--line-2))}
.sk-tmobile{--op:#E20074}
.sk-vodafone{--op:#E60000}
.sk-tu{--op:#8E8E8E}

/* Čísla pod tarifem. Rozbalují se — v ceníku je potřeba vidět počet,
   při řešení konkrétního klienta zase konkrétní čísla. */
.cen details.cisla summary{font-size:.68rem;color:var(--ink-3);cursor:pointer;
  list-style:none;font-variant-numeric:tabular-nums}
.cen details.cisla summary::-webkit-details-marker{display:none}
.cen details.cisla summary::after{content:" ▾";font-size:.6rem}
.cen details.cisla[open] summary::after{content:" ▴"}
.cen details.cisla ul{list-style:none;margin:.35rem 0 0;padding:0;
  border-top:1px solid var(--line-2)}
.cen details.cisla li{display:grid;grid-template-columns:1fr auto;
  gap:0 .4rem;padding:.25rem 0;border-bottom:1px solid var(--line-2);
  font-size:.7rem}
.cen details.cisla li:last-child{border-bottom:0}
.cen details.cisla .c{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink-2)}
.cen details.cisla .p{font-family:var(--mono);font-variant-numeric:tabular-nums;
  color:var(--ink);text-align:right}
.cen details.cisla .k{grid-column:1/-1;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v.pos{color:var(--good)} .v.neg{color:var(--bad)}

/* ─────────────────────────────── tabulky */
table{border-collapse:collapse;width:100%;font-size:.84rem;background:var(--surface)}
.tbl{overflow-x:auto;background:var(--surface);border-radius:var(--r);
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
th{text-align:left;font-family:var(--mono);font-size:.63rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:.6rem .8rem;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface)}
td{padding:.46rem .8rem;border-bottom:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
td.n,th.n{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
td.name{color:var(--ink);font-weight:600}
td.neg{color:var(--bad)} td.pos{color:var(--good)}

/* ─────────────────────────────── odznaky a tlačítka */
.pill{display:inline-block;font-size:.67rem;font-weight:700;padding:.12rem .48rem;
  border-radius:999px;white-space:nowrap}
.pill.ok{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.info{background:var(--brand-soft);color:var(--brand)}
.pill.mute{background:var(--line-2);color:var(--ink-3)}

.btn{display:inline-block;font-size:.8rem;font-weight:700;padding:.42rem .9rem;
  border-radius:999px;border:1px solid var(--brand-fill);background:var(--brand-fill);color:#fff}
.btn:hover{text-decoration:none;filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--brand);border-color:var(--line)}
.btn.ghost:hover{background:var(--brand-soft);filter:none}

/* ─────────────────────────────── karty, formuláře, hlášky */
.karta{background:var(--surface);border-radius:var(--r);padding:1rem 1.1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.06);margin-bottom:1rem}
.radky{display:flex;flex-direction:column;gap:.35rem}
.radky .r{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem}
.radky .r span:first-child{color:var(--ink-3)}
.radky .r span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums}

.zprava{display:flex;gap:.6rem;background:var(--surface);border-radius:var(--r);
  padding:.7rem .9rem;margin-bottom:.6rem;box-shadow:0 1px 2px rgba(0,0,0,.06);
  border-left:3px solid var(--line)}
.zprava.bad{border-left-color:var(--bad)}
.zprava.warn{border-left-color:var(--warn)}
.zprava.info{border-left-color:var(--brand)}
.zprava.ok{border-left-color:var(--good)}
.zprava b{font-size:.85rem;color:var(--ink)}
.zprava .d{font-size:.8rem;color:var(--ink-3)}

input,select,textarea,button{font-family:inherit;font-size:.85rem;color:var(--ink)}
input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  padding:.4rem .6rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
button.btn{cursor:pointer}
.filtry{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.2rem 0 1rem}
.filtry label{font-family:var(--mono);font-size:.63rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}

.prazdno{color:var(--ink-3);font-size:.85rem;padding:1.2rem;text-align:center}
.abc{position:sticky;left:0;background:var(--surface-2);font-family:var(--mono);
  font-size:.68rem;font-weight:700;color:var(--brand);letter-spacing:.08em}

/* ─────────────────────────────── komponenty jednotlivých stránek */
.alerts{display:flex;flex-direction:column;gap:1px;background:var(--line-2);border-radius:var(--r-s)}
.alert{background:var(--surface);padding:.6rem .8rem;display:grid;grid-template-columns:4px 1fr;gap:.75rem;align-items:center}
.alert .bar{width:4px;height:100%;min-height:28px;border-radius:2px}
.alert.bad .bar{background:var(--bad)} .alert.warn .bar{background:var(--warn)} .alert.info .bar{background:var(--brand)}
.alert .t{font-size:.83rem;color:var(--ink)}
.alert .t em{font-style:normal;display:block;color:var(--ink-3);font-size:.76rem}

.dvojice{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:900px){.dvojice{grid-template-columns:1fr}}
dl.udaje{display:grid;grid-template-columns:auto 1fr;gap:.28rem .9rem;margin:0;font-size:.85rem}
dl.udaje dt{color:var(--ink-3)}
dl.udaje dd{margin:0;color:var(--ink)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pruh{background:var(--surface);border-radius:var(--r-s);padding:.9rem 1rem;margin-bottom:1rem}

/* měsíční běh */
ol.faze{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;background:var(--line-2);border-radius:var(--r-s)}
ol.faze li{background:var(--surface);padding:.85rem 1rem;display:grid;grid-template-columns:2rem 1fr;gap:.9rem;align-items:start}
ol.faze .cislo{font-family:var(--mono);font-size:.8rem;width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:50%;background:var(--line-2);color:var(--ink-3)}
ol.faze li.faze-hotovo .cislo{background:var(--good-bg);color:var(--good)}
ol.faze li.faze-pozor .cislo{background:var(--warn-bg);color:var(--warn)}
ol.faze .radek{display:flex;align-items:center;gap:.6rem;margin-bottom:.15rem}
ol.faze .popis{font-size:.82rem;color:var(--ink-3)}
ol.faze .detail{font-family:var(--mono);font-size:.79rem;color:var(--ink-2);margin-top:.25rem}
ol.faze .akce{margin-top:.35rem;font-size:.81rem}

/* Výstraha nad seznamem — proč systém nic neodešle. */
.vystraha{border:1px solid var(--bad);background:var(--bad-bg);border-radius:var(--r-s);
  padding:.75rem .9rem;margin:0 0 1.2rem}
.vystraha .t{font-weight:600;color:var(--bad);margin-bottom:.35rem;font-size:.9rem}
.vystraha ul{margin:0;padding-left:1.1rem;font-size:.84rem;color:var(--ink-2)}
.vystraha li{margin:.15rem 0}

/* Filtr a řazení přehledů (tabulky.js). */
.filtr{display:flex;align-items:center;gap:.6rem;margin:0 0 .5rem}
.filtr input{flex:0 1 320px;font-size:.85rem;padding:.35rem .55rem;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--surface-2);color:var(--ink);font-family:var(--ui)}
.filtr input:focus{outline:2px solid var(--brand);outline-offset:1px}
.filtr .pocet{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
th.raditelny{cursor:pointer;user-select:none;position:relative;padding-right:1.1rem}
th.raditelny:hover{color:var(--brand)}
th.raditelny::after{content:"⇅";position:absolute;right:.35rem;opacity:.3;font-size:.7rem}
th.razeno-vzhuru::after{content:"▲";opacity:.9;font-size:.6rem}
th.razeno-dolu::after{content:"▼";opacity:.9;font-size:.6rem}

.hlaska{background:var(--good-bg);color:var(--good);font-size:.85rem;padding:.55rem .75rem;
  border-radius:var(--r-s);margin:0 0 .8rem}
/* Hláška o chybě se zeleně hlásit nemá. Šablony ji takhle značily už dřív
   (Export do POHODY), jen to nebylo nikde obarvené. */
.hlaska.chyba{background:var(--bad-bg);color:var(--bad)}
.btn-hlavni{background:var(--brand-fill);color:#fff;border-color:var(--brand-fill);
  font-weight:600}

/* ─────────────────────────────── nabídka na telefonu
   Lišta i její tlačítko existují jen pod 860 px. Nad tím je postranní
   nabídka pořád vidět a lišta by jen zabírala místo. */
.prepinac{display:none}
.lista{display:none}
.spodni-lista{display:none}
@media(max-width:860px){
  /* Postranní nabídka se na telefon nevejde vedle obsahu; vytáhne ji
     tlačítko v liště. Skrytí patří sem, ne nahoru k mřížce — tam ho
     pozdější .rail přebíjelo. */
  .rail{display:none}
  .lista{display:flex;align-items:center;gap:.7rem;position:sticky;top:0;z-index:20;
    background:var(--surface);border-bottom:1px solid var(--line);padding:.55rem .9rem}
  .lista .znacka{flex:1;min-height:0;padding:0}
  /* Postranní nabídka tu vidět není, takže tahle pilulka je na telefonu
     jediné místo, kde se pozná, v jaké agendě se pracuje. */
  .lista .agenda-ted{flex:0 0 auto;font-family:var(--mono);font-size:.62rem;
    letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#fff;
    background:var(--brand-fill);padding:.2rem .55rem;border-radius:999px}
  /* Rozbalená nabídka nahradí obsah stránky. Výběrem se stránka načte
     znovu, takže se zaškrtávátko samo vynuluje a nabídka zavře.

     Schválně je to běžný blok v toku stránky, ne plovoucí vrstva přes
     celou obrazovku. Plovoucí vrstva si musí posouvání řešit sama
     a v aplikaci na ploše telefonu se zasekávala: seznam končil
     u Smluvních pokut a dál se nedalo. Takhle posouvá stránku prohlížeč
     svým vlastním posouváním, které selhat nemůže. */
  .prepinac:checked ~ .obal .rail{display:flex;position:static;
    height:auto;max-height:none;overflow:visible;background:var(--surface);
    padding:1rem 1.1rem calc(4.8rem + env(safe-area-inset-bottom, 0px))}
  .prepinac:checked ~ .obal .rail .znacka{display:none}
  /* Nabídka musí mít svou skutečnou výšku, ne výšku okna. S flex:1
     se smrskne na obrazovku a zbytek položek se uřízne. */
  .prepinac:checked ~ .obal .rail .menu{flex:0 0 auto}
  .prepinac:checked ~ .obal .rail > *{flex-shrink:0}
  .prepinac:checked ~ .obal main{display:none}

  /* ── Dolní lišta
     Pět cílů na dosah palce. Dřív byl na telefonu jen hamburger a každý
     přesun stál ťuknutí, projetí pětadvaceti položek a další ťuknutí.

     Tahle vrstva plovoucí je, na rozdíl od rozbalené nabídky nad ní:
     je vysoká šestapadesát bodů, nic v ní neposouvá a stránku pod sebou
     nepřekrývá, protože `main` má dole o tolik místa navíc. Zasekávat
     se nemá na čem.

     Vybraná položka se pozná dvakrát — barvou a proužkem nahoře —
     protože samotná barva je na odpoledním slunci slabý signál. */
  .spodni-lista{display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    box-shadow:0 -1px 10px rgba(0,0,0,.07)}
  .spodni-lista a,.spodni-lista .vic{display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:.15rem;position:relative;
    min-height:56px;padding:.35rem .2rem;color:var(--ink-3);
    font-size:.66rem;font-weight:600;cursor:pointer}
  .spodni-lista a:hover{text-decoration:none}
  .spodni-lista .ik{flex:0 0 22px;width:22px;height:22px;opacity:.85}
  .spodni-lista a.on{color:var(--brand)}
  .spodni-lista a.on .ik{opacity:1}
  .spodni-lista a.on::before{content:"";position:absolute;top:0;left:50%;
    transform:translateX(-50%);width:34px;height:3px;
    border-radius:0 0 3px 3px;background:var(--brand-fill)}
  /* Otevřená nabídka: „Víc" se chová jako vybraná položka, ať je vidět,
     odkud se to vysunulo a kam se ťukne zpátky. Zvýrazněná stránka pod
     ní přitom zhasne — dvě červené položky naráz nedávají smysl, když
     obsah stránky stejně není vidět. */
  .prepinac:checked ~ .spodni-lista .vic{color:var(--brand)}
  .prepinac:checked ~ .spodni-lista .vic .ik{opacity:1}
  .prepinac:checked ~ .spodni-lista a.on{color:var(--ink-3)}
  .prepinac:checked ~ .spodni-lista a.on::before{display:none}
  /* Odznak sedí na piktogramu, ne vedle popisku — popisky jsou úzké
     a číslo vedle nich by rozhodilo šířky sloupců. */
  .spodni-lista .odznak{position:absolute;top:.25rem;left:50%;
    margin-left:.3rem;min-width:17px;height:17px;padding:0 .25rem;
    border-radius:999px;background:var(--brand-fill);color:#fff;
    font-family:var(--mono);font-size:.6rem;font-weight:700;
    display:grid;place-items:center}

  /* Na telefonu se míří palcem, ne myší. Čtyřicet čtyři bodů je nejmenší
     plocha, kterou se dá spolehlivě trefit — tolik doporučují obě
     platformy a pod tím se začne klikat vedle. */
  .menu a{min-height:44px}
  button,.btn,select,input[type=submit]{min-height:40px}
  .cen details.cisla summary{min-height:28px;display:flex;align-items:center}
  /* Tabulky se na úzkou obrazovku nevejdou; posouvají se do strany
     místo toho, aby se sloupce zmáčkly na nečitelnou šířku. */
  .tbl{-webkit-overflow-scrolling:touch}
  .tbl table{min-width:34rem}
  h1{font-size:1.45rem}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  .cenik{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* Drobné tlačítko do řádku karty — třeba „Ověřit přihlášení" u pošty.
   Nesmí vypadat jako hlavní akce, jen jako kontrola vedle údaje. */
.tlacitko-maly{font:inherit;font-size:.76rem;padding:.15rem .55rem;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);
  color:var(--ink);cursor:pointer}
.tlacitko-maly:hover{border-color:var(--brand);color:var(--brand)}

/* Pošta je jiná práce než evidence klientů a faktur — vyřizuje se průběžně
   a musí být vidět na první pohled. Oválek v brandové barvě ji odliší
   od ostatních položek, které jsou jen odkazy do evidence. */
.menu a.posta{background:var(--brand-soft);
  border:1px solid color-mix(in srgb, var(--brand) 38%, transparent);
  color:var(--brand)}
.menu a.posta:hover{background:color-mix(in srgb, var(--brand) 18%, var(--brand-soft));
  color:var(--brand)}
.menu a.posta.on{background:var(--brand-fill);border-color:var(--brand-fill);
  color:#fff;box-shadow:none}
.menu a.posta.on .ik{opacity:1}

/* Oválná přepínací tlačítka — filtr pošty, kde se jen přepíná pohled.
   Vypadají jako volba, ne jako odkaz, a vybraná je vyplněná. */
.prepinace{display:flex;gap:.4rem;align-items:center;margin:.6rem 0 1rem;flex-wrap:wrap}
.ovalek{display:inline-flex;align-items:center;gap:.4rem;font:inherit;
  font-size:.82rem;font-weight:600;padding:.3rem .9rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.ovalek:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.ovalek.on{background:var(--brand-fill);border-color:var(--brand-fill);color:#fff}

/* Odhlášení už není poslední prvek, takže mu patří jen malý odstup. */
.odhlasit{margin-top:.2rem}

/* Mikrofon u polí, do kterých se dá diktovat. Vykreslí ho diktovani.js
   jen tam, kde prohlížeč rozpoznávání řeči umí. */
.diktat{display:inline-flex;align-items:center;gap:.35rem;font:inherit;
  font-size:.78rem;font-weight:600;margin-top:.35rem;padding:.25rem .8rem;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer}
.diktat:hover{border-color:var(--brand);color:var(--brand)}
.diktat .ikona{font-size:.6rem;color:var(--ink-3)}
.diktat.nahrava{border-color:var(--brand);color:var(--brand);
  background:var(--brand-soft)}
.diktat.nahrava .ikona{color:var(--brand);animation:tep 1s ease-in-out infinite}
@keyframes tep{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.diktat.nahrava .ikona{animation:none}}

/* Úvodní obrazovka pro telefon: velké dlaždice místo nabídky. Prst není
   myš — každá dlaždice má aspoň 44 pt na výšku a mezi nimi je mezera,
   aby se nedalo trefit vedle. */
.dlazdice{display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.1rem;
  margin-bottom:.7rem;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink);min-height:44px;
  text-decoration:none}
.dlazdice:hover{text-decoration:none;border-color:var(--brand)}
.dlazdice .cislo{font-size:2rem;font-weight:700;line-height:1.05;
  color:var(--brand);font-variant-numeric:tabular-nums}
.dlazdice .co{font-size:.92rem;font-weight:600}
.dlazdice .dal{font-size:.78rem;color:var(--ink-3)}
.dlazdice.hlavni{border-color:var(--brand);background:var(--brand-soft)}
.dlazdice.tichá{background:transparent;border-style:dashed}
.dlazdice-mrizka{display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.dlazdice-mrizka .dlazdice{margin-bottom:0}

/* Tabulky na telefonu: řádek se složí pod sebe a nikam se neposouvá.
   Vodorovné posouvání je na malém displeji past — půlka sloupců je
   za okrajem a nikdo neví, že tam ještě něco je.

   Pozor na dvě věci z běžného zobrazení: tabulka má `min-width:34rem`
   kvůli posouvání a buňky `white-space:nowrap`. Obojí se tu musí vrátit
   zpátky, jinak se karta roztáhne přes okraj a hodnoty utečou vpravo. */
@media (max-width: 640px) {
  .tbl{overflow-x:visible;background:transparent;box-shadow:none}
  .tbl table{min-width:0;width:100%;background:transparent}
  .tbl table, .tbl tbody, .tbl tr, .tbl td{display:block;width:auto;
    max-width:100%}
  .tbl thead{display:none}
  .tbl tbody tr{border:1px solid var(--line);border-radius:12px;
    background:var(--surface);padding:.65rem .85rem;margin-bottom:.6rem}
  .tbl tbody td{border:0;padding:.18rem 0;text-align:left !important;
    white-space:normal;overflow-wrap:anywhere;
    display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.6rem;
    align-items:baseline;color:var(--ink)}
  .tbl tbody td:empty{display:none}
  .tbl tbody td::before{content:attr(data-popisek);
    font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;
    text-transform:uppercase;color:var(--ink-3);font-weight:700}
  /* První buňka je nadpis karty — tam popisek jen překáží. */
  .tbl tbody td:first-child{display:block;font-weight:700;font-size:.98rem;
    color:var(--ink);padding-bottom:.4rem;margin-bottom:.4rem;
    border-bottom:1px solid var(--line)}
  .tbl tbody td:first-child::before{content:none}
  /* Řádek s jedinou buňkou je skupinový nadpis nebo prázdná hláška —
     ten se nemá tvářit jako karta s jedním údajem. */
  .tbl tbody tr:has(td:only-child){border:0;background:transparent;
    padding:.8rem 0 .2rem;margin:0}
  .tbl tbody tr:has(td:only-child) td{border:0;margin:0;padding:0}
  .tbl td.prazdno{text-align:center !important}
}

/* Námět na úpravu — modrý oválek, ať je mezi červenou poštou vidět. */
.namet{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;
  padding:.4rem .9rem;border-radius:999px;font-size:.82rem;font-weight:600;
  background:color-mix(in srgb, var(--info) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--info) 40%, transparent);
  color:var(--info)}
.namet:hover{text-decoration:none;color:#fff;background:var(--info-fill);
  border-color:var(--info-fill)}
.namet:hover .ik{color:#fff}
.namet .ik{flex:0 0 18px;opacity:.9}

/* Lišta „Zpět" jen pro aplikaci spuštěnou z plochy telefonu. Prohlížeč
   má vlastní tlačítko zpět, standalone režim ne — a bez něj se z přijaté
   pošty nedá vrátit jinak než zavřením aplikace. */
.lista-zpet{display:none}
/* Podmínka šířky je tu schválně: na počítači se lišta objevovala
   i v okně na celou obrazovku a překrývala nadpis stránky. Na telefonu
   je okno úzké vždycky, na monitoru nikdy. */
@media (display-mode: standalone) and (max-width: 860px),
       (display-mode: fullscreen) and (max-width: 860px) {
  .lista-zpet{display:flex;align-items:center;justify-content:space-between;
    gap:.6rem;margin:0 0 .9rem;position:sticky;
    top:env(safe-area-inset-top, 0px);z-index:5;
    padding:.4rem 0;background:var(--paper)}
  .lista-zpet .zpet,.lista-zpet .domu{font:inherit;font-size:.85rem;
    font-weight:600;padding:.45rem 1rem;border-radius:999px;
    border:1px solid var(--line);background:var(--surface);
    color:var(--ink-2);cursor:pointer;min-height:40px;
    display:inline-flex;align-items:center}
  .lista-zpet .zpet:active,.lista-zpet .domu:active{background:var(--brand-soft)}
  .lista-zpet .domu{text-decoration:none;color:var(--brand)}
}

/* ─────────────────────────────────────────────────── pošta
   Schránka se nečte jako tabulka, ale jako seznam zpráv: odesílatel,
   předmět a první řádek textu pod sebou. Tabulka s pěti sloupci nutila
   oko skákat zleva doprava a předmět se krátil do nečitelna. */
.posta-seznam{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:.35rem}
.posta-seznam li{display:flex;align-items:stretch;gap:.6rem;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:.1rem .9rem .1rem .1rem;transition:border-color .12s}
.posta-seznam li:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.posta-seznam li.otevrena{border-color:var(--brand);background:var(--brand-soft)}
.posta-seznam li.vyrizena{opacity:.6}
.posta-seznam .radek{display:flex;gap:.75rem;align-items:flex-start;flex:1;
  min-width:0;padding:.7rem .2rem .7rem .8rem;color:var(--ink)}
.posta-seznam .radek:hover{text-decoration:none}
.posta-seznam .stred{display:flex;flex-direction:column;gap:.1rem;
  min-width:0;flex:1}
.posta-seznam .vrch{display:flex;gap:.6rem;align-items:baseline;
  justify-content:space-between}
.posta-seznam .vrch strong{font-size:.9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.posta-seznam .kdy{font-family:var(--mono);font-size:.68rem;color:var(--ink-3);
  white-space:nowrap;flex:0 0 auto}
.posta-seznam .predmet{font-size:.88rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posta-seznam .utrzek{font-size:.8rem;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posta-seznam .akce{display:flex;align-items:center;gap:.7rem;
  font-size:.78rem;font-weight:600;flex:0 0 auto}
.posta-seznam .akce a{color:var(--ink-3)}
.posta-seznam .akce a:hover{color:var(--brand)}
.posta-seznam .znacka-klient{color:var(--brand) !important;
  background:var(--brand-soft);padding:.15rem .6rem;border-radius:999px}
.prazdno-dopis{display:block;padding:2rem;text-align:center;color:var(--ink-3);
  border-style:dashed !important}

/* Kolečko s iniciálou místo prázdného místa — v seznamu se tím zprávy
   od sebe odliší dřív, než se stihne přečíst jméno. */
.avatar{flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand);
  font-weight:700;font-size:.95rem}

/* Otevřená zpráva. Text v úzkém sloupci, ať se dá číst jako dopis. */
.dopis{background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:1.2rem 1.3rem;margin-bottom:1.4rem}
.dopis header{display:flex;align-items:center;gap:.8rem}
.dopis header .kdo{display:flex;flex-direction:column;min-width:0;flex:1}
.dopis header .adresa{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.dopis header .kdy{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.dopis .predmet{font-size:1.15rem;margin:.9rem 0 .2rem}
.dopis .vazba{font-size:.82rem;color:var(--ink-3);margin:0 0 1rem}
.dopis .vazba.nepriradeno{font-style:italic}
/* Text zprávy využije celou šířku okna. Dřív byl omezený na 62 znaků
   a 30 rem výšky s vlastním posuvníkem — na monitoru zbyla půlka
   obrazovky prázdná a v dlouhém e-mailu se rolovalo ve dvou rámech. */
.dopis .telo{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.92rem;
  line-height:1.6;padding:.9rem 0;border-top:1px solid var(--line)}
.dopis footer{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  padding-top:.9rem;border-top:1px solid var(--line)}

@media (max-width: 640px) {
  .posta-seznam li{padding:.1rem}
  .posta-seznam .akce{padding:0 .8rem .7rem 3.2rem;gap:1rem}
  .dopis{padding:1rem}
}

/* Výsledek hromadného odeslání. Musí být vidět na první pohled — dřív
   se stávalo, že prohlížeč odeslání zablokoval vlastní bublinou a člověk
   odešel s dojmem, že faktury šly ven. */
.vysledek-odeslani{border-radius:12px;padding:1rem 1.1rem;margin:1rem 0;
  border:1px solid var(--line);background:var(--surface)}
.vysledek-odeslani.dobre{border-color:color-mix(in srgb,var(--good) 45%,var(--line));
  background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.vysledek-odeslani.spatne{border-color:var(--brand);background:var(--brand-soft)}
.vysledek-odeslani .t{font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
.vysledek-odeslani ul{margin:.3rem 0 .7rem;padding-left:1.1rem;font-size:.88rem}
.vysledek-odeslani li{margin-bottom:.2rem}
.vysledek-odeslani li.tlum{color:var(--ink-3)}
.vysledek-odeslani li.chyba{color:var(--brand);font-weight:600}

/* Hlavní oválek mezi přepínači — Nová zpráva. Je to akce, ne filtr,
   takže je plná a barevná i když není vybraná. Zelená schválně: červená
   je v aplikaci barva značky a varování, tohle je běžná práce. */
.ovalek.hlavni{background:var(--good-fill);border-color:var(--good-fill);color:#fff}
.ovalek.hlavni:hover{color:#fff;background:var(--good-fill-h);
  border-color:var(--good-fill-h)}

/* Přílohy u otevřené zprávy — dlaždičky, na které jde kliknout. */
.prilohy{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:.8rem 0;border-top:1px solid var(--line)}
.prilohy .nadpis{font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
  flex:0 0 100%;margin-bottom:.2rem}
.priloha{display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .8rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font-size:.84rem}
.priloha:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.priloha .velikost{color:var(--ink-3);font-size:.75rem}

/* Úpravy na kartě klienta jsou schované pod rozbalovátkem — většinou se
   karta jen čte a formuláře by překážely. */
.uprava{margin:1rem 0}
.uprava>summary{cursor:pointer;font-weight:600;font-size:.88rem;
  color:var(--brand);padding:.4rem .9rem;border-radius:999px;
  background:var(--brand-soft);display:inline-block;list-style:none}
.uprava>summary::-webkit-details-marker{display:none}
.uprava>summary::before{content:"\00a0+\00a0 "}
.uprava[open]>summary::before{content:"\00a0\2212\00a0 "}
.mrizka-poli{display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.mrizka-poli input,.mrizka-poli select{width:100%}
.mrizka-poli .zaskrtnuti{display:flex;align-items:center;gap:.5rem;
  align-self:end;padding-bottom:.4rem}
.mrizka-poli .zaskrtnuti input{width:auto}

/* Řádek s jednou akcí a vysvětlivkou — např. "Stáhnout poštu". */
.radek-akce { display: flex; align-items: center; gap: .6rem;
              flex-wrap: wrap; margin: .6rem 0 1rem; }
.radek-akce .poznamka { color: var(--ink-3); font-size: .86rem; }

/* Filtr stavu úhrady nad seznamem faktur. Rozvržení .filtry je nahoře
   u formulářů, tady jsou jen pilulky a jejich stavy. */
.filtry .filtr{display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;
  text-decoration:none;color:inherit;font-size:.88rem;background:var(--surface)}
.filtry .filtr .pocet{color:var(--ink-3);font-variant-numeric:tabular-nums}
.filtry .filtr:hover{background:var(--brand-soft)}
.filtry .filtr.aktivni{background:var(--brand-fill);border-color:var(--brand-fill);
  color:#fff}
.filtry .filtr.aktivni .pocet{color:#fff;opacity:.75}
.filtry .filtr.dluh:not(.aktivni){border-color:var(--bad);color:var(--bad)}

/* Kachličky na přehledu jsou odkazy — nesmí vypadat jako text odkazu. */
a.tile{text-decoration:none;color:inherit;display:block}
a.tile:hover{border-color:var(--brand)}

/* Platba k řešení: jedna karta na platbu. */
.platba-reseni{border:1px solid var(--line);border-radius:.6rem;
  padding:.9rem 1rem;margin:0 0 1rem;background:var(--surface)}
.platba-reseni>header{display:flex;gap:1rem;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:.6rem}
.platba-reseni .adresa{display:block;color:var(--ink-3);font-size:.84rem}
.platba-reseni form.vedle{display:flex;gap:.4rem;align-items:center;justify-content:flex-end}
.platba-reseni tr.cast td{color:var(--ink-3);font-size:.88rem}

/* Novinky nahoře. Mají být vidět, ale nesmí tlačit obsah stránky dolů
   natrvalo — proto se dají odkliknout a víc se neukážou. */
.novinky{border:1px solid var(--brand);border-left-width:4px;
  border-radius:.5rem;background:var(--brand-soft);
  padding:.8rem 1rem;margin:0 0 1.2rem}
.novinky .hlava-novinek{display:flex;justify-content:space-between;
  align-items:center;gap:1rem;margin-bottom:.5rem}
.novinky article{padding:.5rem 0;border-top:1px solid rgba(0,0,0,.08)}
.novinky article .t{font-weight:600;display:flex;justify-content:space-between;
  gap:1rem;align-items:baseline}
.novinky article .t .kdy{font-size:.76rem;color:var(--ink-3);font-weight:400;
  white-space:nowrap}
.novinky article p{margin:.25rem 0 .4rem;font-size:.88rem;line-height:1.5}
.novinky .odklik{font:inherit;font-size:.78rem;padding:.25rem .7rem;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer}
.novinky .odklik:hover{background:var(--surface)}

/* Vybrané číslo na kartě klienta a text výpovědi. */
tr.vybrana td{background:var(--brand-soft)}
.zmena-tarifu{margin:1rem 0}
pre.vypoved{white-space:pre-wrap;font-family:var(--mono);font-size:.84rem;
  line-height:1.55;margin:0}

/* Zaplaceno zeleně, nezaplaceno červeně — na filtr se kouká zběžně
   a barva řekne víc než text. */
.filtry .filtr.zaplaceno:not(.aktivni){border-color:var(--good);color:var(--good)}
.filtry .filtr.zaplaceno.aktivni{background:var(--good-fill);
  border-color:var(--good-fill);color:#fff}
.filtry .filtr.zaplaceno.aktivni .pocet{color:#fff;opacity:.75}

/* Rozdíl sjednané ceny proti ceníku. Sleva je běžná, cena nad ceníkem
   je skoro vždycky překlep v řádu — proto se zvýrazní jinak. */
.sleva{font-size:.84rem;color:var(--ink-3);padding-bottom:.55rem}
.sleva.dolu{color:var(--good)}
.sleva.nahoru{color:var(--bad);font-weight:600}

/* Kdo platbu opravdu poslal, když to není klient sám. Musí být na
   vlastním řádku s odstupem — nalepené pod jménem to splývalo v jedno
   a vypadalo to, že klient má dvě jména. */
.platce{display:block;margin-top:.3rem;padding-top:.28rem;
  border-top:1px dotted var(--line);color:var(--ink-3);
  font-size:.78rem;line-height:1.35;white-space:normal}

/* Tlačítko v řádku zprávy, ať vypadá jako ostatní odkazy vedle něj. */
.posta-seznam .akce .jako-odkaz{font:inherit;font-size:.82rem;background:none;
  border:0;padding:0;color:var(--ink-3);cursor:pointer;text-decoration:underline}
.posta-seznam .akce .jako-odkaz:hover{color:var(--bad)}
.ovalek.nebezpecna{border-color:var(--bad);color:var(--bad)}
.ovalek.nebezpecna:hover{background:var(--bad-fill);border-color:var(--bad-fill);
  color:#fff}

/* Nic nesmí přetéct do strany. Když je na stránce jediný prvek širší
   než obrazovka, iOS v aplikaci na ploše přepne na vodorovné posouvání
   a svislé pak drhne nebo se zasekne úplně. Široké věci se proto
   posouvají uvnitř svého rámečku, ne celou stránkou. */
@media (max-width:860px){
  /* Na html ani body se overflow nesahá: na iOSu z nich udělá vlastní
     posouvací schránku a svislé posouvání pak drhne. Stačí držet uvnitř
     obsah, který je širší než obrazovka. */
  main{overflow-x:hidden}
  pre, pre.vypoved, code{max-width:100%;overflow-x:auto;white-space:pre-wrap;
    overflow-wrap:anywhere}
  .novinky article p, .hlaska, .vystraha{overflow-wrap:anywhere}
  .filtry{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.3rem;
    scrollbar-width:none}
  .filtry::-webkit-scrollbar{display:none}
  .filtry .filtr{flex:0 0 auto}
  input,select,textarea{max-width:100%}
}

/* Novinek se za pár nasazení nasbírá tolik, že by na telefonu zabraly
   celou obrazovku a člověk by k obsahu musel rolovat přes ně. Ukážou se
   tři a zbytek je na rozkliknutí. */
.novinky .dalsi summary{cursor:pointer;font-size:.84rem;color:var(--ink-2);
  padding:.4rem 0}
.novinky .dalsi summary::marker{color:var(--brand)}

/* Potvrzení po hromadné akci. Musí být vidět na první pohled — po
   rozeslání osmdesáti zpráv je první otázka „odešlo to všem?" a odpověď
   nesmí být schovaná v řádku textu. */
.potvrzeni{border:1px solid var(--good);border-left-width:4px;border-radius:.5rem;
  background:var(--good-bg);padding:.9rem 1.1rem;margin:0 0 1.2rem}
.potvrzeni .t{font-weight:700;color:var(--good);font-size:1.02rem}
.potvrzeni .cas{margin:.1rem 0 .5rem;font-size:.84rem;color:var(--ink-3);
  font-family:var(--mono)}
.potvrzeni ul{margin:0;padding-left:1.1rem}
.potvrzeni li{font-size:.9rem;line-height:1.5}
.potvrzeni li.spatne{color:var(--bad);font-weight:600}

/* Poslední hromadná zpráva na přehledu rozesílky — zůstane vidět
   i po načtení stránky znovu, takže se dá kdykoli ověřit, co odešlo. */
.posledni-davka{border:1px solid var(--line);border-radius:.5rem;
  background:var(--surface);padding:.7rem .9rem;margin:0 0 1rem;
  font-size:.88rem}
.posledni-davka .kdy{font-family:var(--mono);font-size:.8rem;color:var(--ink-3)}

/* Tlačítko uvnitř tabulky, ať vypadá jako odkaz vedle něj. */
.tbl .jako-odkaz{font:inherit;font-size:.84rem;background:none;border:0;
  padding:0 0 0 .5rem;color:var(--ink-3);cursor:pointer;text-decoration:underline}
.tbl .jako-odkaz:hover{color:var(--bad)}

/* Hromadné odbavení pošty. Lišta se drží nahoře nad seznamem a tlačítka
   zůstanou šedá, dokud není nic vybráno — aby se nedalo odbavit nic. */
.lista-hromadne{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.5rem .7rem;margin:0 0 .5rem;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-s)}
.lista-hromadne .vse-zprav{display:flex;align-items:center;gap:.45rem;
  font-size:.85rem;color:var(--ink-2);cursor:pointer}
.lista-hromadne .pocet{font-size:.82rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.lista-hromadne .tlacitka{display:flex;gap:.4rem;flex-wrap:wrap;margin-left:auto}
.lista-hromadne button{font:inherit;font-size:.82rem;padding:.3rem .8rem;
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer}
.lista-hromadne button:hover:not(:disabled){background:var(--brand-soft);
  border-color:var(--brand);color:var(--brand)}
.lista-hromadne button:disabled{opacity:.45;cursor:default}
.lista-hromadne button.nebezpecna:hover:not(:disabled){background:var(--bad-fill);
  border-color:var(--bad-fill);color:#fff}

/* Zaškrtávátko u zprávy. Je vlevo před odesílatelem, mimo odkaz —
   kliknutím na něj se zpráva nesmí otevřít. */
.posta-seznam .vyber{display:flex;align-items:center;padding:0 .2rem 0 .8rem;
  cursor:pointer}
.posta-seznam .vyber input{width:17px;height:17px;cursor:pointer}
.posta-seznam li{display:flex;align-items:stretch}
.posta-seznam li .radek{flex:1;min-width:0}

/* Tečka u nepřečtené zprávy — v poště se hledá očima, ne čtením. */
.posta-seznam .predmet .nove{display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--brand);margin-right:.4rem;
  vertical-align:middle}

@media (max-width:640px){
  .lista-hromadne .tlacitka{margin-left:0;width:100%}
  /* Na telefonu je zpráva mřížka, ne pružný řádek: vlevo zaškrtávátko,
     vedle něj zpráva, a odkazy (Odpovědět, Přeposlat, Spam) přes celou
     šířku pod nimi. Pružný řádek se spoléhal na to, že si odkazy vezmou
     jen svoje — ony si vzaly skoro vše a na odesílatele a předmět
     nezbylo nic, zbyly z nich tři tečky. Mřížka to neumožní:
     minmax(0,1fr) dá zprávě celý zbytek šířky, ať je odkazů kolik chce. */
  .posta-seznam li{display:grid;grid-template-columns:auto minmax(0,1fr);
    align-items:start;gap:0;padding:.1rem}
  .posta-seznam .vyber{padding:.95rem .2rem 0 .55rem;align-items:flex-start}
  .posta-seznam .radek{min-width:0;padding:.7rem .6rem .5rem .55rem}
  .posta-seznam .akce{grid-column:1 / -1;flex-wrap:wrap;row-gap:.4rem;
    justify-content:flex-start;padding:0 .8rem .7rem 3.4rem;gap:1rem}
}

/* Odesílatel nesmí zmizet ve prospěch data. Datum má pevnou šířku,
   takže bez tohohle se jméno při každém zúžení scvrkne na tři tečky. */
.posta-seznam .vrch{min-width:0}
.posta-seznam .vrch strong{flex:1 1 auto;min-width:0}

/* Tučně svítí jen nepřečtená zpráva. Po označení za přečtenou zůstane
   v seznamu klidná — jinak by se nepoznalo, co ještě čeká. */
.posta-seznam .vrch strong{font-weight:500;color:var(--ink-2)}
.posta-seznam li.neprectena .vrch strong{font-weight:800;color:var(--ink)}
.posta-seznam li.neprectena .predmet{font-weight:700;color:var(--ink)}
.posta-seznam li:not(.neprectena) .predmet{font-weight:400}

/* Pruh zkušební verze. Vědomě křiklavý a přes celou šířku nahoře:
   má se ho všimnout i ten, kdo má otevřená obě okna vedle sebe. */
.pruh-zkusebni{position:sticky;top:0;z-index:100;background:var(--brand-fill);
  color:#fff;text-align:center;font-weight:700;font-size:.82rem;
  letter-spacing:.02em;padding:.35rem .8rem;line-height:1.3}
.pruh-zkusebni .kdy-dat{font-weight:500;opacity:.85;margin-left:.5rem}
@media (max-width:640px){.pruh-zkusebni .kdy-dat{display:block;margin:0}}
/* Na telefonu se pruh a horní lišta se značkou praly o stejné místo:
   obojí `sticky; top:0`, pruh navrch, takže lišta při rolování zajela
   pod něj a půlka loga zmizela.

   Lišta se proto ve zkušební verzi nelepí a odroluje pryč. Pruh zůstává
   nahoře sám, a to je správné pořadí důležitosti — navigaci nese dolní
   lišta, kdežto „tohle je zkušební verze" musí být vidět pořád.

   Odsazení lišty o výšku pruhu by nešlo: pruh je pod 640 px dvouřádkový
   a pevné číslo by jednu z těch dvou šířek rozbilo. Selektor funguje
   proto, že pruh je v šabloně jen ve zkušební verzi — na ostré tohle
   pravidlo nikdy nesedne. */
.pruh-zkusebni ~ .lista{position:static}

/* Chybějící údaj, který něco rozbije (účet u inkasa). Ne výstraha přes
   půl stránky — stačí, aby to v řádku nevypadalo jako prázdno. */
.chybi{color:var(--brand);font-weight:600}