/* ══ Kupón ════════════════════════════════════════════════════════
   Doklad nahoře, pod perforací u dolní hrany platební úsek: účet,
   symboly, částka a QR kód pohromadě, čísla ve strojovém písmu. Kdo
   platí, čte spodek; kdo účtuje, skenuje spodek.

   Tmavé pole nese jen typ dokladu a číslo, ne celou hlavičku — logo
   dodavatele bývá tmavé a na tmavém pruhu by zmizelo. */
.s-kupon {
  /* Grafit místo firemní cyanové: akcent listu je tmavé pole a amber linka
     kupónu, třetí barva by je jen rozmělnila. Základní styl bere popisky
     oddílů i součet z `--cyan`, takže stačí přepsat proměnnou. */
  --cyan: #22282c;
  /* Platební úsek je až za patičkou. V mapě oblastí to je jen přehozený
     řádek — dřív to dělal `order` nad pružným rozvržením a to se s mřížkou
     dokladu pralo: šablona ztratila oblasti a strany se poskládaly pod sebe. */
  grid-template-areas:
    "hlav"
    "dod"
    "odb"
    "data"
    "text"
    "pol"
    "pridat"
    "zatext"
    "souhrn"
    "pata"
    "lplat"
    "plat";
}
/* Popisek strany s vlasovou linkou pod sebou — kupón má linek dost, ale tahle
   odděluje dva sloupce údajů, které by jinak splynuly do jednoho odstavce. */
.s-kupon h4 {
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.s-kupon .strong {
  font-size: 14.5px;
  line-height: 1.25;
}
.s-kupon header {
  align-items: flex-start;
  margin-bottom: 24px;
}
.s-kupon .doctype {
  min-width: 250px;
  margin: calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) 0 0;
  padding: 16px 22px 14px;
  border: none;
  background: #22282c;
  text-align: right;
}
.s-kupon select.t {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #9daab0;
  text-align: right;
  text-align-last: right;
}
.s-kupon select.t:hover {
  background-color: rgba(255, 255, 255, 0.12);
}
.s-kupon .doctype .n {
  font-family: var(--mono);
  font-size: 25px;
  font-weight: 500;
}
/* Číslo dokladu se do tmavého pole píše, takže musí být bílé — jinak by
   `[contenteditable] { color: #000 }` napsalo černou na černou. */
.s-kupon .doctype [contenteditable] {
  color: #fff;
}
.s-kupon .doctype [contenteditable].sample {
  color: #9daab0;
}
.s-kupon .doctype [contenteditable]:focus {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
/* Perforace a za ní úsek. V dokumentu blok zůstává u ostatních platebních
   údajů, takže se čte i bez stylu — přesouvá ho jen mapa oblastí. */
.s-kupon .seclabel.platba {
  margin-top: 30px;
  padding-top: 18px;
  padding-bottom: 6px;
  border-top: 1.5px dashed #b9c2c6;
  border-bottom: 2px solid #c08a12;
  color: #8a6a10;
}
.s-kupon #pay {
  padding: 14px 0 0;
  border: none;
}
/* Účet, symboly a IBAN se opisují do bankovnictví. Stejně široké číslice
   drží skupiny pohromadě — v proporcionálním písmu se „0308" a „0808"
   liší o pixely. */
.s-kupon .pay .val {
  font-family: var(--mono);
  letter-spacing: -0.01em;
}
.s-kupon .pay .cell.r .val {
  font-size: 20px;
}

/* Rozvržení do sloupců: široký displej A PAPÍR. `print` v podmínce není
   zbytečný — A4 je v CSS 794 px široká, takže podmínka jen na šířku by na
   papíře neplatila a doklad by se vytiskl v jednom sloupci. Na telefonu
   platí mobilní oddíl ve `style.css` a všechno se slévá do jednoho sloupce. */
@media print, (min-width: 821px) {
  /* Kupón: strany vedle sebe jako jinde, platební úsek zůstává na konci.
     Sloupce si šablona určuje sama — spoléhat na to, že je nastaví jiná,
     se vymstilo: dodavatel pak zabral 780 px a odběratel 116 px. */
  .s-kupon {
    grid-template-columns: 1fr 1fr;
    column-gap: 34px;
    grid-template-areas:
      "hlav hlav"
      "dod odb"
      "data data"
      "text text"
      "pol pol"
      "pridat pridat"
      "zatext zatext"
      "souhrn souhrn"
      "pata pata"
      "lplat lplat"
      "plat plat";
  }
}