/* Rekapitulace, záloha a stav objednávky.

   Stránky vědomě nevypadají jako konfigurátor. Tam se všechno mění pod rukama
   a razítko drží přehled; tady se naopak nic neděje a zákazník jen čte, co
   podepisuje. Proto jeden úzký sloupec a žádný živý panel. */

.stranka {
  max-width: var(--sirka-obsahu);
  margin: 0 auto;
  padding: var(--s5) var(--s3);
}

/* Rekapitulace je čtení, ne procházení. Míra řádku drží text v délce, která
   se dá číst i u odstavce s poučením podle § 1837. */
.stranka--uzka {
  max-width: 760px;
}

.stranka h1 {
  font-size: var(--t-xl);
  /* Velkorysá mezera pod nadpisem. Za ním na těchhle stránkách hned následuje
     pruh — postup objednávky nebo upozornění na ukázkovou platbu — a nalepený
     na nadpis vypadá jako jeho pokračování. */
  margin-bottom: var(--s4);
}

.stranka h2 {
  font-size: var(--t-l);
  margin-bottom: var(--s2);
}

.stranka h3 {
  font-size: var(--t-m);
  margin-bottom: var(--s2);
}

.stranka section {
  margin-top: var(--s5);
}

.stranka p {
  margin-bottom: var(--s2);
  max-width: 62ch;
}

.uvodni {
  font-size: var(--t-m);
  color: var(--tlum);
}

/* --- zadání --------------------------------------------------------------- */

.zadani__strana + .zadani__strana {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--linka);
}

.zadani__nakres {
  border: 1px solid var(--linka);
  padding: var(--s2);
  margin-bottom: var(--s3);
}

/* --- rozpad ceny ---------------------------------------------------------- */

.rozpad {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-s);
}

.rozpad caption {
  text-align: left;
  margin-bottom: var(--s1);
}

.rozpad th,
.rozpad td {
  text-align: left;
  padding: var(--s1) var(--s2) var(--s1) 0;
  border-bottom: 1px solid var(--linka);
  font-weight: 400;
}

/* Čísla vpravo, a s nimi i jejich záhlaví — jinak stojí „Celkem" nad levým
   okrajem sloupce, ve kterém jsou částky zarovnané doprava. */
.rozpad td,
.rozpad thead th:not(:first-child) {
  text-align: right;
}

.rozpad tfoot th,
.rozpad tfoot td {
  border-bottom: 0;
  padding-top: var(--s2);
}

.rozpad__celkem th,
.rozpad__celkem td {
  font-size: var(--t-m);
  font-weight: 600;
  border-top: 2px solid var(--tus);
}

/* Čtyři sloupce se na 320 px nevejdou. Vodorovné posouvání by šlo nejlevněji,
   ale rozpad ceny je právě to místo, kde zákazník kontroluje, za co platí —
   utnutá částka vpravo je horší než delší stránka. Řádek se proto rozpadne
   na položku a pod ni popsané hodnoty; návěstí nese `data-navest`, protože
   záhlaví tabulky se do buňky nedostane jinak než přes obsah atributu. */
@media (max-width: 560px) {
  /* `display: none`, ne skrytí mimo obrazovku. Absolutně umístěná `thead`
     si v tabulkovém rozvržení ponechá svou přirozenou šířku a řádek záhlaví
     pak roztáhne stránku, i když ho nikdo nevidí. Odstranění ze stromu
     přístupnosti je tu navíc správně: po rozpadu na řádky už záhlaví
     neodpovídá sloupcům a popisek si nese každá buňka sama. */
  .rozpad--polozky thead {
    display: none;
  }

  .rozpad--polozky tbody tr {
    display: block;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--linka);
  }

  .rozpad--polozky tbody th[scope="row"] {
    display: block;
    border: 0;
    padding: 0 0 var(--s1);
    font-weight: 600;
  }

  .rozpad--polozky tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--s2);
    border: 0;
    padding: 2px 0;
    text-align: right;
    font-size: var(--t-s);
  }

  .rozpad--polozky tbody td::before {
    content: attr(data-navest);
    font-family: "Plex Sans", system-ui, sans-serif;
    color: var(--tlum);
  }

  /* Souhrnná tabulka má dva sloupce a vejde se, jen jí na nejužších
     displejích překáží mezera mezi nimi. „Celkem k zaplacení" se pak zlomí
     na dva řádky místo toho, aby vytlačilo částku ze stránky. */
  .rozpad--objednavka th,
  .rozpad--objednavka td {
    padding-right: var(--s1);
  }
}

.zaloha-info {
  margin-top: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--linka);
}

/* --- formulář ------------------------------------------------------------- */

.mrizka-poli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
}

/* Popisky nejsou stejně dlouhé. „Přibližná šířka — nepovinné" se na úzkém
   sloupci zalomí na dva řádky a jeho pole se propadne o řádek níž než
   sousední; vedle sebe pak stojí vstupy na dvou různých linkách.

   Subgrid to řeší tím, že návěstí, vstup a zprávy sdílejí řádky s celou
   mřížkou. Každé pole proto musí mít přesně tři děti — proto ten obal
   `.pole__pod`, i když je prázdný. Bez podpory subgridu se položka vykreslí
   jako obyčejný blok, tedy tak, jak vypadala doteď. */
.pole {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  row-gap: var(--s1);
}

.pole label {
  display: block;
  align-self: end;
}

.pole input {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--tus);
  background: transparent;
  color: var(--tus);
  font-family: inherit;
  font-size: var(--t-m);
  /* 10 px svisle dá poli 46 px — dotykový cíl podle §16.2. S 8 px vycházelo
     42 a chybějící dva pixely by nikdo nenašel jinak než měřením. */
  padding: 10px 0;
}

.pole--upozorneno input {
  border-bottom-color: var(--kota);
}

.pole__zprava {
  margin-top: var(--s1);
  font-size: var(--t-s);
  color: var(--tlum);
}

.pole__zprava--chyba {
  color: var(--tus);
}

/* Zaškrtávátko podle §9.5 musí být samostatné a čitelné, ne poznámka pod
   čarou. Dotykový cíl 44 px drží svislý padding celého řádku. */
.zaskrtavatko {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid var(--linka);
  cursor: pointer;
}

/* Focus patří celému řádku, ne skrytému čtverečku uvnitř — jinak uživatel
   klávesnice nevidí, na čem stojí. */
.zaskrtavatko:has(input:focus-visible) {
  outline: 3px solid var(--kota);
  outline-offset: 2px;
}

.zaskrtavatko input {
  margin-top: 2px;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.zaskrtavatko span {
  font-size: var(--t-s);
  line-height: 1.6;
  max-width: 58ch;
}

.zaskrtavatko--chyba {
  border-left: 3px solid var(--kota);
  padding-left: var(--s2);
}

.garance p {
  font-size: var(--t-s);
}

.podminky__prehled {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.podminky__prehled dd {
  font-size: var(--t-s);
  margin-top: 4px;
}

.tlacitko--velke {
  margin-top: var(--s4);
  margin-bottom: var(--s3);
  width: 100%;
  font-size: var(--t-l);
  padding: var(--s3);
}

/* Druhá možnost platby nesmí vypadat jako méně platná, jen jako druhá. */
.tlacitko--druhy {
  background: transparent;
  color: var(--tus);
  border: 2px solid var(--tus);
}

.platebni-tlacitka {
  display: grid;
  gap: var(--s2);
  margin: var(--s4) 0;
}

@media (min-width: 640px) {
  .platebni-tlacitka {
    grid-template-columns: 1fr 1fr;
  }

  .tlacitko--velke {
    width: auto;
  }
}

/* --- záloha a stav -------------------------------------------------------- */

/* Upozornění, že platba je ukázka. Sytá plocha, ne kótovací červená —
   ta patří výhradně rozměrům. */
.ukazka {
  background: var(--syta);
  color: var(--papir);
  padding: var(--s3);
  font-size: var(--t-s);
  max-width: none;
}

.ukazka a {
  color: var(--papir);
  border-bottom-color: var(--papir);
}

.souhrn-platby {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.souhrn-platby dd {
  font-size: var(--t-m);
  margin-top: 4px;
}

.zvyrazneno {
  font-size: var(--t-l);
  font-weight: 600;
}

/* Postup jako řada kroků. Číslování tu smysl má — na rozdíl od konfigurátoru
   se stavy opravdu procházejí v pořadí a zákazník potřebuje vědět, kolikátý
   z nich je jeho. */
.postup {
  list-style: none;
  counter-reset: krok;
  display: grid;
  gap: 1px;
  background: var(--linka);
  border: 1px solid var(--linka);
  margin-bottom: var(--s4);
  padding: 0;
}

.postup__krok {
  counter-increment: krok;
  background: var(--papir);
  padding: var(--s2) var(--s3);
  font-size: var(--t-s);
  color: var(--tlum);
}

.postup__krok::before {
  content: counter(krok, decimal-leading-zero) " ";
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  margin-right: var(--s2);
}

.postup__krok--hotovo {
  color: var(--tus);
}

.postup__krok--tady {
  background: var(--tus);
  color: var(--papir);
  font-weight: 600;
}

@media (min-width: 720px) {
  .postup {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
  }
}

/* --- dráha 2 -------------------------------------------------------------- */

.jak-to-chodi {
  padding-left: var(--s3);
  margin-bottom: var(--s3);
  max-width: 62ch;
}

.jak-to-chodi li {
  margin-bottom: var(--s2);
  line-height: 1.6;
}

/* Nahrání souboru není pole jako ostatní — potřebuje větší dotykový cíl
   a nápovědu nad sebou, protože „celý otvor zpříma" je instrukce, ne popisek. */
.pole-souboru {
  padding: var(--s3) 0;
  border-top: 1px solid var(--linka);
}

.pole-souboru__napoveda {
  font-size: var(--t-s);
  color: var(--tlum);
  margin: 4px 0 var(--s2);
}

/* Šířka na 100 %, jinak si pole vezme tolik, kolik potřebuje jeho tlačítko
   a název souboru dohromady — a na 320 px roztáhne vodorovně celou stránku,
   takže se ořežou i odstavce, se kterými nemá co dělat. */
.pole-souboru input[type="file"] {
  width: 100%;
  font-family: inherit;
  font-size: var(--t-s);
  min-height: 44px;
}

/* Systémové tlačítko „Vybrat soubor" je jediné místo formuláře, kde by
   prohlížeč prosadil vlastní vzhled. Nechává se funkční, jen se obleče. */
.pole-souboru input[type="file"]::file-selector-button {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--tus);
  border: 1px solid var(--tus);
  padding: 12px var(--s2);
  margin-right: var(--s2);
  cursor: pointer;
}

.pole-souboru input[type="file"]::file-selector-button:hover {
  background: var(--tus);
  color: var(--papir);
}

/* „nepovinné" patří k návěstí, ne k větě — musí mít i jeho velikost.
   Pomlčka je v `::before`, aby ji šablona nemusela psát a nemohla ji
   zapomenout; bez ní splyne s koncem popisku v jedno slovo. */
.navest .tlumene {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.navest .tlumene::before {
  content: "— ";
}

.pole--siroke {
  margin-top: var(--s3);
}

.pole textarea {
  width: 100%;
  border: 1px solid var(--tus);
  background: transparent;
  color: var(--tus);
  font-family: inherit;
  font-size: var(--t-m);
  padding: var(--s2);
}

/* Rozpětí, ne jedno číslo — odhad od oka není pětkrát změřený otvor. */
.rozpeti {
  font-size: var(--t-xl);
  font-weight: 600;
  margin-bottom: var(--s3);
}

.historie {
  list-style: none;
  padding: 0;
  font-size: var(--t-s);
}

.historie li {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--linka);
}

.historie time {
  display: block;
  margin-bottom: 4px;
}