/* Návod na měření.

   Kostru čtené stránky nese stranka.css; tady je jen to, co má návod navíc.
   Je to jediná stránka, kterou zákazník čte venku na terase s pásmem v ruce,
   takže kroky musí jít najít okem při zběžném pohledu — proto číslovaný
   seznam, který jinde na webu schválně není. Tady pořadí informaci nese:
   měří se odshora dolů. */

/* Věta, kvůli které se celý návod píše. Rám v tuši, ne barevný pruh —
   kótovací červená je vyhrazená rozměrům. */
.navod__duraz {
  border: 1px solid var(--tus);
  padding: var(--s3);
}

.navod__duraz h2 {
  margin-top: 0;
}

.navod__duraz p:last-child {
  margin-bottom: 0;
}

.navod__kroky {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  counter-reset: krok;
}

.navod__kroky li {
  position: relative;
  counter-increment: krok;
  /* Místo pro číslo. V em, aby odsazení drželo krok s velikostí písma. */
  padding: var(--s2) 0 var(--s2) 3.5em;
  border-top: 1px solid var(--linka);
  max-width: 62ch;
}

.navod__kroky li:last-child {
  border-bottom: 1px solid var(--linka);
}

/* Číslo kroku v mono, jako pozice v kusovníku na výkrese. */
.navod__kroky li::before {
  content: counter(krok);
  position: absolute;
  left: 0;
  top: var(--s2);
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--t-s);
  color: var(--tlum);
}

.navod__kroky .navest {
  display: block;
  margin-bottom: 2px;
}

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

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

.navod__seznam {
  margin: 0;
}

.navod__seznam > div {
  padding: var(--s3) 0;
  border-top: 1px solid var(--linka);
}

.navod__seznam > div:last-child {
  border-bottom: 1px solid var(--linka);
}

.navod__seznam dt {
  font-weight: 600;
  margin-bottom: var(--s1);
}

.navod__seznam dd {
  /* Prohlížeč dává `dd` odsazení 40 px a odpověď by stála o kus vpravo
     od své otázky. */
  margin: 0;
  max-width: 62ch;
}

.navod__poznamka {
  font-size: var(--t-s);
  color: var(--tlum);
}

.navod__dal .tlacitko {
  display: inline-block;
}

.navod__verze {
  margin-top: var(--s5);
  padding-top: var(--s2);
  border-top: 1px solid var(--linka);
}

/* Tisk. Návod si někdo vytiskne a vezme ven; hlavička, patička, ilustrace
   a odkazy jsou na papíře k ničemu — odkaz „Spočítat cenu" na vytištěném
   listu je tlačítko, na které nejde kliknout. */
@media print {
  .hlavicka,
  .paticka,
  .navod__netiskne,
  .hlasky {
    display: none;
  }

  .stranka {
    padding: 0;
    max-width: none;
  }
}