/* ==========================================================================
   Документ. Десктопный кит, лист `doc.html`.
   ========================================================================== */

.ac-dc{display:grid;grid-template-columns:var(--ac-d-side) minmax(0,1fr);gap:var(--ac-s16);align-items:start;padding-top:var(--ac-s6)}

/* Оглавление липкое: в документе на десять разделов иначе приходится
   возвращаться наверх за каждым переходом. */
.ac-toc{position:sticky;top:calc(var(--ac-d-hd) + var(--ac-s6));display:grid;gap:2px}
.ac-toc b{margin-bottom:var(--ac-s2);font-size:var(--ac-size-xs);letter-spacing:var(--ac-track-caps);text-transform:uppercase;color:var(--ac-ink-mute)}
.ac-toc a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--ac-s2);padding:9px 0;font-size:var(--ac-size-sm);line-height:1.4;color:var(--ac-ink-body)}
.ac-toc a:hover{color:var(--ac-ink)}
.ac-toc em{font-style:normal;font-family:var(--ac-font-mono);font-size:var(--ac-size-xs);color:var(--ac-ink-mute)}

/* Мера чтения. На 1440 текст во всю ширину даёт строку на 200 знаков -
   глаз теряет начало следующей. */
.ac-doc{max-width:var(--ac-d-text)}
/* `scroll-margin-top` - иначе липкая шапка съедает первую строку раздела,
   к которому только что перешли по оглавлению. */
.ac-doc h2{margin:var(--ac-s10) 0 var(--ac-s3);font-family:var(--ac-font-display);font-size:var(--ac-size-h2);font-weight:var(--ac-w-semi);letter-spacing:var(--ac-track-h2);scroll-margin-top:calc(var(--ac-d-hd) + var(--ac-s6))}
.ac-doc h2 span{display:block;margin-bottom:6px;font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);font-weight:var(--ac-w-reg);letter-spacing:var(--ac-track-mono);color:var(--ac-ink-mute)}
.ac-doc p,.ac-doc li{font-size:var(--ac-size-body);line-height:var(--ac-lh-body);color:var(--ac-ink-body);text-wrap:pretty}
.ac-doc p+p{margin-top:var(--ac-s4)}
.ac-doc ul{margin:var(--ac-s4) 0;padding:0;display:grid;gap:var(--ac-s2);list-style:none}
.ac-doc li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--ac-s3)}
.ac-doc li::before{content:"";width:4px;height:4px;margin-top:11px;border-radius:50%;background:var(--ac-line-strong)}

.ac-h1--doc{max-width:24em}
.ac-meta{display:flex;flex-wrap:wrap;gap:var(--ac-s5);font-family:var(--ac-font-mono);font-size:var(--ac-size-mono);color:var(--ac-ink-mute)}

/* Предупреждение о черновике. Не заливка и не цвет действия: это не действие
   и не ошибка посетителя - это состояние документа. Гранатовая линия слева
   ровно настолько заметна, чтобы её прочли до текста. */
.ac-warn{max-width:var(--ac-d-text);margin-top:var(--ac-s6);padding:var(--ac-s4) var(--ac-s5);border-left:2px solid var(--ac-act-del);border-radius:0 var(--ac-r-field) var(--ac-r-field) 0;background:var(--ac-surface);font-size:var(--ac-size-sm);line-height:var(--ac-lh-body);color:var(--ac-ink-body)}
.ac-warn a{text-decoration:underline;text-decoration-color:var(--ac-line-strong);text-underline-offset:3px}

.ac-same{margin-top:var(--ac-s12);padding-top:var(--ac-s5);border-top:1px solid var(--ac-line);font-size:var(--ac-size-sm);color:var(--ac-ink-mute)}
.ac-same a{color:var(--ac-ink-body);text-decoration:underline;text-decoration-color:var(--ac-line-strong);text-underline-offset:3px}