/* ============================================================
   Кравцов А.Ю. Мир «Плата ночью». Юридические страницы.
   Каркас (шапка/подвал/cookie) общий со styles.css, здесь только
   колонка документа под паяльной маской. Тема одна, медиазапросов
   темы здесь нет намеренно.
   ============================================================ */

body.page-legal{background:var(--board);color:var(--silk)}

/* На главной .hdr__name это <span>, здесь это ссылка на главную:
   styles.css не задаёт ей цвет, добавляем здесь, чтобы не тронуть
   styles.css и не получить синюю ссылку браузера по умолчанию. */
.hdr__name{color:var(--silk);text-decoration:none}
.hdr__name:focus-visible{outline:2px solid var(--silk);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .hdr__name:hover{color:var(--copper-text-hi)}
}

main.legal{
  position:relative;
  max-width:72ch;
  margin:0 auto;
  padding:var(--pad);
  padding-top:64px;
  padding-bottom:96px;
  background:var(--plate);
}

.legal__edition{
  font-family:'Fira Sans',sans-serif;
  font-weight:400;
  font-size:14px;
  color:var(--silk-2);
  margin:10px 0 32px;
}

.legal h1{
  font-family:'Tektur',sans-serif;
  font-weight:700;
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0;
}

.legal h2{
  font-family:'Tektur',sans-serif;
  font-weight:500;
  font-size:clamp(20px,2vw,24px);
  line-height:1.25;
  margin:46px 0 16px;
  padding-left:16px;
  border-left:2px solid var(--copper);
}

.legal p,
.legal li{
  font-family:'Fira Sans',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  color:var(--silk);
  margin:0 0 18px;
}

.legal ul,
.legal ol{margin:0 0 18px;padding-left:1.25em}
.legal li{margin-bottom:10px}
.legal li:last-child{margin-bottom:0}

.legal a{color:var(--copper-text);text-decoration:underline;text-decoration-color:var(--edge);text-underline-offset:2px}
.legal a:focus-visible{outline:2px solid var(--silk);outline-offset:3px}

/* Плашка внутри документа. `.legal a` (класс + тег) перебивает `.pad`
   (один класс) по специфичности, и кнопка получала текст в цвет
   собственной заливки: медь на меди, 1.0:1. Возвращаем краску явно. */
.legal a.pad{color:var(--board);text-decoration:none}

.legal table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.legal table th,
.legal table td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:left;color:var(--silk)}

/* Короткая страница подтверждения. Три правки по вердикту приёмки 09.09:
   колонка лежала встык на фон без кромки и читалась лоскутом; подвал
   всплывал на середину экрана, потому что содержимого мало; заголовок
   упирался в абзац без зазора (на длинных документах его держит
   .legal__edition, здесь его нет). */
.legal--short{max-width:64ch;border:1px solid var(--rule);border-top:0}
.legal--short h1{margin-bottom:18px}
body.page-legal:has(.legal--short){display:flex;flex-direction:column;min-height:100dvh}
body.page-legal:has(.legal--short) main.legal{flex:1 0 auto}

.legal .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}

@media (hover:hover) and (pointer:fine){
  .legal a:hover{color:var(--copper-text-hi);text-decoration-color:var(--copper-hi)}
  .legal a.pad:hover{color:var(--board)}
}

@media (max-width:680px){
  main.legal{padding-top:36px;padding-bottom:64px}
  .legal h2{margin-top:36px}
}