/* legal.css — оформление юридических страниц (/offer, /privacy).
 *
 * Отдельный файл, а не инлайн в каждой странице: документов уже два, будут
 * ещё (правила возврата, реквизиты), и держать копию стилей в каждом — способ
 * получить три разных оформления одного и того же.
 *
 * Палитра «Асфальт» продублирована здесь намеренно: страницы автономны и не
 * тянут за собой весь motogolova-weather.html ради переменных.
 */

:root{
  --bg-page:   #0E1013;
  --asphalt-1: #1D2025;
  --asphalt-3: #31363E;
  --hairline:  #33383F;
  --text-0:    #F3F1EA;
  --text-1:    #A7ACB4;
  --text-2:    #6E737B;
  --accent:    #FF8A1E;
  --r-md: 12px;
  --font-display: 'Oswald', system-ui, sans-serif;
  --font-text:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg-page);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.65;
  /* Длинные адреса и реквизиты в тексте документа не должны распирать
     страницу в горизонтальный скролл на 320px. */
  overflow-wrap: break-word;
}

.doc-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
  border-bottom: 1px solid var(--hairline);
}
.doc-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  text-decoration: none;
  font-size: 13px;
}
.doc-back:hover{ color: var(--text-0); }
.doc-brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-0);
  font-size: 15px;
}
.doc-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.doc{
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 16px 40px;
}
.doc h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  color: var(--text-0);
  margin: 0 0 10px;
}
.doc h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--text-0);
  margin: 30px 0 10px;
}
.doc-lead{
  color: var(--text-2);
  font-size: 14px;
  margin: 0 0 26px;
}
.doc p{ margin: 0 0 14px; }
.doc a{ color: var(--accent); }

/* Заглушка до публикации текста. Отдельный блок, чтобы её нельзя было
   спутать с самим документом. */
.doc-stub{
  background: var(--asphalt-1);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 18px 18px 6px;
}
.doc-stub-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text-0);
  margin-bottom: 8px;
}

.doc-updated{
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
}

.doc-footer{
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px 30px;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  font-size: 12px;
  color: var(--text-2);
}
.doc-footer a{ color: var(--text-1); text-decoration: none; }
.doc-footer a:hover{ color: var(--text-0); }

@media (max-width: 400px){
  .doc h1{ font-size: 23px; }
  .doc-footer span{ display: none; }
  .doc-footer{ flex-direction: column; align-items: center; }
}

/* ---------------------------------------------------------------------------
   Элементы юридических документов
   --------------------------------------------------------------------------- */

/* Выноска «коротко о главном» в начале документа. Юридический текст читают
   плохо; краткая сводка сверху повышает шанс, что суть дойдёт. Она не
   заменяет документ — это прямо следует из формулировок. */
.doc-callout{
  background: var(--asphalt-1);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 16px 16px 4px;
  margin: 0 0 26px;
  font-size: 14px;
}
.doc-callout strong{ color: var(--text-0); }

.doc h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-0);
  margin: 22px 0 8px;
}

/* Кнопка-ссылка на странице отмены подписки. Отмена должна быть заметной и
   короткой: платёжный сервис прямо запрещает «сложную процедуру отмены», а
   376-ФЗ требует, чтобы отказ принимался без препятствий. */
/* ⚠ Селектор с .doc: правило `.doc a{ color: var(--accent) }` выше по
   специфичности, чем одиночный класс, и красило текст кнопки в тот же
   оранжевый, что и её фон, — надпись пропадала целиком. Поймано на снимке
   экрана: кнопка была, текста на ней не было. */
.doc a.doc-cta{
  display: inline-block;
  margin: 4px 0 14px;
  padding: 11px 18px;
  border-radius: var(--r-md, 10px);
  background: var(--accent);
  color: var(--bg-page);
  font-weight: 600;
  text-decoration: none;
}
.doc a.doc-cta:hover{ opacity: 0.9; }

.doc-ul{ margin: 0 0 14px; padding-left: 20px; }
.doc-ul li{ margin-bottom: 7px; }

/* Таблица реквизитов и сводных сведений.
   ⚠ table-layout: fixed + word-break обязательны: длинные значения вроде
   почты или названий служб иначе распирают таблицу и уводят страницу
   в горизонтальный скролл на 320px. */
.doc-req{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}
.doc-req th,
.doc-req td{
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  overflow-wrap: break-word;
}
.doc-req th{
  width: 38%;
  font-weight: 500;
  color: var(--text-2);
}
.doc-req td{ color: var(--text-0); }
.doc-req-wide th{ width: 34%; }
.doc-req-wide td{ color: var(--text-1); }
/* ИНН — то, что ищут проверяющие и платёжный сервис. Выделяем моноширинным. */
.doc-req-key{
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

.doc-formula{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-0);
  background: var(--asphalt-1);
  border-radius: 6px;
  padding: 2px 7px;
}

@media (max-width: 430px){
  /* На узком экране двухколоночная таблица нечитаема: заголовок становится
     подписью над значением. */
  .doc-req, .doc-req tbody, .doc-req tr, .doc-req th, .doc-req td{ display: block; width: auto; }
  .doc-req tr{ border-bottom: 1px solid var(--hairline); padding: 4px 0; }
  .doc-req th, .doc-req td{ border-bottom: none; padding: 4px 0; }
  .doc-req th{ font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Архив редакций (/legal)

   ⚠ SHA-256 — 64 символа без пробелов. Без word-break он распирает страницу
   в горизонтальный скролл на 320px: перенести такую строку браузеру негде.
   --------------------------------------------------------------------------- */

.lv-row{
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 13px 15px;
  margin: 0 0 10px;
  background: var(--asphalt-0);
}
/* Действующая редакция выделена той же оранжевой полосой, что и выноска
   «коротко о главном»: в архиве важнее всего не перепутать её с прежними. */
.lv-row-current{
  background: var(--asphalt-1);
  border-left: 3px solid var(--accent);
}

.lv-head{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 7px;
}
.lv-head a{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-0);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
}
.lv-head a:hover{ color: var(--accent); border-bottom-color: var(--accent); }

.lv-badge{
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border-radius: 4px;
  padding: 2px 7px;
}
.lv-date{ font-size: 13px; color: var(--text-2); margin-left: auto; }

.lv-note{ font-size: 14px; color: var(--text-1); margin-bottom: 8px; }

.lv-hash{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  word-break: break-all;
}

@media (max-width: 430px){
  /* На узком экране дата уезжает под заголовок, а не жмётся к нему. */
  .lv-date{ margin-left: 0; }
}