/* Общие стили документов: цвета и поверхности из iOS Palette. */
:root{
--bg:#F6F5F4;--surface:#fff;--surface-soft:#F5F5F4;--border:#E3E3E2;--divider:#ECECEB;
--text-primary:#110F0E;--text-secondary:#78716C;--text-tertiary:#A8A29E;
--primary:#F1467E;--primary-pressed:#D72D66;--primary-tint:#FDE2EC;
--cau:#C98A16;--cau-tint:#FBEFDD;--info:#2E6FE0;--info-tint:#E9F0FD;
--neg:#D0472E;--neg-tint:#FBE9E4;--r-sm:12px;--r-md:18px;--r-lg:26px;
--r-xl:34px;--r-pill:999px;--sh-1:0 8px 28px rgba(17,15,14,.04);
--font:-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text-primary);
  font-family:var(--font); font-size:16px; line-height:24px; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}

/* ── Каркас ───────────────────────────────────────────── */
.wrap{max-width:1120px; margin:0 auto; padding:0 20px 64px}
.layout{display:block}
@media (min-width:1000px){
  .layout{display:grid; grid-template-columns:248px minmax(0,1fr); gap:48px; align-items:start}
}

/* ── Шапка ────────────────────────────────────────────── */
.top{padding:32px 0 24px}
.brand{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:600; color:var(--text-primary); text-decoration:none;
}
.brand-mark{
  width:24px; height:24px; border-radius:var(--r-sm);
  background:var(--primary); display:inline-block;
}
h1{font-size:30px; line-height:36px; font-weight:600; letter-spacing:-.02em; margin:20px 0 8px}
.meta{font-size:13px; line-height:19px; color:var(--text-secondary); margin:0}

/* ── Плашка статуса.
   🧑 ВЛАДЕЛЬЦУ: удалить блок .draft, когда снимете оставшиеся [УТОЧНИТЬ].
   Правовой экспертизы не будет — решение владельца от 21.07.2026. ── */
.draft{
  margin:20px 0 0; padding:14px 16px;
  background:var(--cau-tint); border:1px solid rgba(201,138,22,.28);
  border-radius:var(--r-md); font-size:13px; line-height:19px; color:#7A5309;
}
.draft b{font-weight:600}

/* ── Оглавление ───────────────────────────────────────── */
.toc{
  margin:24px 0 0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:4px 16px 8px;
}
@media (min-width:1000px){
  .toc{position:sticky; top:24px; margin-top:32px; padding:8px 16px 12px}
}
.toc summary{
  cursor:pointer; list-style:none; padding:12px 0;
  font-size:11px; line-height:14px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-tertiary);
  display:flex; align-items:center; justify-content:space-between;
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{
  content:''; width:8px; height:8px; margin-right:4px;
  border-right:2px solid var(--text-tertiary); border-bottom:2px solid var(--text-tertiary);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s ease;
}
.toc[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
@media (min-width:1000px){ .toc summary{pointer-events:none} .toc summary::after{display:none} }
.toc ol{margin:0 0 4px; padding:0; list-style:none; counter-reset:toc}
.toc li{counter-increment:toc}
.toc a{
  display:flex; gap:8px; padding:7px 0;
  font-size:13px; line-height:19px; color:var(--text-secondary); text-decoration:none;
}
.toc a::before{content:counter(toc); color:var(--text-tertiary); min-width:16px}
.toc a:hover{color:var(--primary)}

/* ── Текст ────────────────────────────────────────────── */
main{padding-top:8px}
section{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:24px; margin:16px 0 0; scroll-margin-top:24px;
}
h2{font-size:19px; line-height:25px; font-weight:600; letter-spacing:-.01em; margin:0 0 12px}
h3{font-size:16px; line-height:22px; font-weight:600; letter-spacing:-.01em; margin:24px 0 8px}
p{margin:0 0 12px; max-width:62ch}
p:last-child,ul:last-child,ol:last-child,table:last-child{margin-bottom:0}
ul,ol{margin:0 0 12px; padding-left:20px; max-width:62ch}
li{margin:0 0 6px}
li:last-child{margin-bottom:0}
a{color:var(--primary); text-underline-offset:2px}
a:hover{color:var(--primary-pressed)}
strong{font-weight:600}
.lead{font-size:16px; line-height:24px; color:var(--text-secondary)}

/* ── Выноски ──────────────────────────────────────────── */
.note{
  border-radius:var(--r-md); padding:16px; margin:16px 0;
  border:1px solid transparent; max-width:62ch;
}
.note p{margin-bottom:8px}
.note p:last-child{margin-bottom:0}
.note-t{
  font-size:11px; line-height:14px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; margin:0 0 8px;
}
.note.info{background:var(--info-tint); border-color:rgba(46,111,224,.22)}
.note.info .note-t{color:var(--info)}
.note.warn{background:var(--cau-tint); border-color:rgba(201,138,22,.28)}
.note.warn .note-t{color:#8A5F0B}
.note.stop{background:var(--neg-tint); border-color:rgba(208,71,46,.24)}
.note.stop .note-t{color:var(--neg)}

/* ── Метка «требует уточнения».
   🧑 ВЛАДЕЛЬЦУ: подставить значение и снять тег <span class="todo">. ── */
/* Переносится по словам: nowrap выдавливал длинные метки за экран
   и давал горизонтальную прокрутку на телефоне. box-decoration-break
   дорисовывает рамку на каждой строке переноса. */
.todo{
  display:inline; padding:1px 6px; border-radius:var(--r-sm);
  background:#FFF; border:1px dashed var(--neg); color:var(--neg);
  font-size:13px; font-weight:600;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* ── Таблица данных ───────────────────────────────────── */
.tw{overflow-x:auto; margin:0 0 12px; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14px; line-height:20px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--divider); vertical-align:top}
th{
  font-size:11px; line-height:14px; font-weight:600; letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-tertiary); white-space:nowrap;
}
tr:last-child td{border-bottom:none}
td:first-child{font-weight:600; width:30%}

/* ── Подвал ───────────────────────────────────────────── */
footer{
  margin-top:32px; padding-top:24px; border-top:1px solid var(--border);
  font-size:13px; line-height:19px; color:var(--text-secondary);
}
/* Флексом, а не nowrap: длинное название документа на узком экране
   иначе выдавливает подвал за границу viewport. */
.footer-nav{display:flex; flex-wrap:wrap; gap:8px 20px; margin:0 0 12px}

@media (max-width:520px){
  .wrap{padding:0 16px 48px}
  h1{font-size:24px; line-height:30px}
  section{padding:20px 16px}
  body{font-size:15px; line-height:22px}
}

/* Skinself iOS: warm canvas, grouped white surfaces, pink links. */
body{letter-spacing:-.015em}
.wrap{max-width:980px;padding-bottom:max(64px,env(safe-area-inset-bottom))}
.top{padding:48px 0 12px}
.brand{gap:10px;font-size:17px;font-weight:700}
.brand-mark{width:28px;height:28px;border-radius:10px;background:var(--primary);position:relative}
.brand-mark::after{content:"✦";position:absolute;inset:0;color:white;text-align:center;line-height:28px;font-size:19px}
h1{font-size:clamp(30px,4vw,42px);line-height:1.12;font-weight:700;letter-spacing:-.035em;margin:28px 0 12px}
.meta{font-size:14px}
@media(min-width:1000px){.layout{grid-template-columns:220px minmax(0,1fr);gap:28px}}
.toc{box-shadow:var(--sh-1);border-color:var(--divider)}
section{border:0;border-radius:var(--r-xl);padding:30px 32px;margin-top:16px;box-shadow:var(--sh-1)}
h2{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.025em}
h3{font-weight:700}
a:focus-visible,summary:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
.draft{border-radius:var(--r-lg)}
.note{border-radius:var(--r-md)}
footer{border-color:var(--divider)}
@media(max-width:520px){.wrap{padding:0 16px max(48px,env(safe-area-inset-bottom))}.top{padding:30px 0 12px}h1{font-size:32px;line-height:1.14}section{padding:24px 20px;border-radius:28px}body{font-size:16px;line-height:24px}}