/* ============================================================
   Каркас страниц-документов (/about, /contacts) — 1:1 со «Стоп Приказ»
   (docs/sp-style-constant-variable.md: каркас постоянный, значения — токены РА).
   Источники СП: legal.css (doc-a, req, form), blog.css (art-back, art-callout),
   styles.css (btn, steps), inline-стили about.html / contacts.html
   (about-sec, about-grid, cgrid, infocard) — у РА CSP запрещает inline-стили.
   Отличия от СП только в значениях слотов:
   - акцент как текст на тёмном: --accent-pale (#990066 на --ink не читается);
   - текст на акцентной заливке: --white (как в РА: hero, CTA, тарифы).
   ============================================================ */

/* Сброс глобальных правил РА к базе СП внутри каркаса */
.doc-a { line-height: normal; }
.doc-a h1, .doc-a h2, .doc-a h3 { margin: 0; color: inherit; font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; }
.doc-a p { margin: 0; }
.doc-a a { color: inherit; text-decoration: none; }
.doc-a a:hover { color: inherit; }

/* ---------- контейнер + шапка (legal.css СП) ---------- */
.doc-a { width: min(1180px, 100% - 48px); margin: clamp(24px,4vh,48px) auto clamp(64px,8vh,110px); }

.doc-a__head { padding: clamp(30px,4vw,52px) clamp(28px,4vw,56px); border-radius: var(--radius-xl); background: var(--ink); color: var(--white); position: relative; overflow: hidden; }
.doc-a__head::before { content:""; position:absolute; inset:0; opacity:.5; background-image: repeating-linear-gradient(135deg, transparent 0 40px, color-mix(in srgb, var(--accent) 6%, transparent) 40px 41px); }
.doc-a__head > * { position: relative; }
.doc-a__tag { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color: var(--accent-pale); }
.doc-a__tag::before { content:""; width:24px; height:3px; background: var(--accent-pale); border-radius:3px; }
.doc-a .doc-a__title { font-weight:800; font-size: clamp(34px,5vw,64px); line-height:.98; letter-spacing:-.04em; margin:20px 0 14px; max-width: 18ch; }
/* Правовые документы: «Публичная оферта сервиса / «Развод и Алименты»» в 2 строки
   (у СП 18ch; название РА длиннее — решение владельца 2026-09-23). */
.doc-a .doc-a__title--legal { max-width: 22ch; }
@media (min-width: 521px) { .doc-a__brand { white-space: nowrap; } }
/* ≤345px: «персональных» при 34px (229px) шире шапки (216px на 320) → 30px (200px). */
@media (max-width: 345px) { .doc-a .doc-a__title--legal { font-size: 30px; } }
.doc-a .doc-a__sub { color: rgba(255,255,255,.74); font-size: clamp(16px,1.4vw,19px); line-height:1.5; max-width: 60ch; }
.doc-a__meta { margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.doc-a__meta span { font-size:13px; font-weight:600; color: var(--white); background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); padding:8px 14px; border-radius: var(--radius-pill); }
.doc-a__meta span b { color: var(--accent-pale); font-weight:700; }
/* Адрес размещения РА длиннее, чем у СП (…/legal/razvod-alimenti-offer): без переноса
   плашка на телефоне шире шапки и обрезается → разрешаем перенос URL в любом месте. */
.doc-a__meta span { max-width: 100%; }
.doc-a__meta span b { overflow-wrap: anywhere; }

/* ---------- ссылка «На сайт» (blog.css СП) ---------- */
.doc-a .art-back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.doc-a .art-back:hover { color: var(--ink); }
.art-back svg { width: 17px; height: 17px; }

/* ---------- дисклеймер (blog.css СП) ---------- */
.doc-a .art-callout { background: var(--warn-bg); border: 1.5px solid var(--warn-border); border-radius: var(--radius); padding: 20px 22px; margin: clamp(32px,4vw,48px) 0 24px; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: none; }
/* У СП нижний margin 24px схлопывается с margin .doc-a (72px); body РА — flex, схлопывания нет → убираем, итог 72px как у СП. */
.doc-a > .art-callout:last-child { margin-bottom: 0; }

/* ---------- карточки справа ---------- */
.infocard { background: var(--white); border:1.5px solid var(--line); border-radius: var(--radius-lg); padding:24px 26px; }
.infocard__t { font-weight:800; font-size:16px; margin-bottom:10px; }
.doc-a .infocard p { margin:0; font-size:15px; line-height:1.7; color: var(--ink-2); }

.req { background: var(--paper); border:1.5px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; margin-top: 0; max-width:none; }
.req__t { font-weight:800; font-size:18px; margin-bottom:12px; }
.doc-a .req p { margin:0; line-height:1.8; }

/* ---------- шаги (styles.css СП) ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { padding-top: 28px; }
.step__n { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; }
.step__bar { height: 4px; background: var(--line); margin: 14px 0 22px; position: relative; overflow: hidden; border-radius: var(--radius-pill); }
.step__bar::after { content: ""; position: absolute; inset: 0; width: 38%; background: var(--accent); border-radius: var(--radius-pill); }
.step:nth-child(2) .step__bar::after { width: 62%; }
.step:nth-child(3) .step__bar::after { width: 84%; }
.step:nth-child(4) .step__bar::after { width: 100%; }
.step__t { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 10px; }
.doc-a .step__d { color: var(--muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2,1fr); gap: 30px 24px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- /about (inline-стили about.html СП) ---------- */
.about-sec { max-width:760px; margin:clamp(26px,4vw,44px) 0 0; }
.doc-a .about-sec h2 { font-weight:800; font-size:clamp(21px,2.6vw,28px); letter-spacing:-.02em; margin:0 0 12px; }
.doc-a .about-sec p { color:var(--ink-2); font-size:16px; line-height:1.7; margin:0 0 12px; max-width:64ch; }
.about-sec--wide { max-width:none; }
/* список — из inline-стилей editorial.html СП */
.doc-a .about-sec ul { color:var(--ink-2); font-size:16px; line-height:1.7; margin:0 0 12px; max-width:64ch; padding-left:22px; }
.doc-a .about-sec ul li { margin:0 0 6px; }
.about-grid { display:grid; grid-template-columns:1fr 360px; gap:clamp(28px,4vw,56px); margin-top:clamp(26px,4vw,44px); align-items:start; }
.about-grid__main > .about-sec:first-child { margin-top:0; }
.about-grid__aside { display:grid; gap:16px; }
@media (max-width: 860px) { .about-grid { grid-template-columns:1fr; } }

/* ---------- /contacts (inline-стили contacts.html СП) ---------- */
.cgrid { display:grid; grid-template-columns: 1fr 360px; gap: clamp(28px,4vw,56px); margin-top: clamp(28px,4vw,52px); align-items:start; }
.doc-a .cgrid__main h2 { font-weight:800; font-size: clamp(24px,2.8vw,32px); letter-spacing:-.03em; margin:0 0 8px; }
.doc-a .cgrid__main .lead2 { color: var(--muted); font-size:17px; line-height:1.6; max-width:52ch; margin:0 0 6px; }
.cgrid__aside { display:grid; gap:16px; position:sticky; top:98px; }
@media (max-width: 860px) { .cgrid { grid-template-columns:1fr; } .cgrid__aside { position:static; } }

/* ---------- кнопка (styles.css СП: .btn + вариант accent) ---------- */
.btn { font-family: var(--font); font-weight: 700; font-size: 16px; border: none; cursor: pointer; border-radius: var(--radius-pill); padding: 18px 30px; display: inline-flex; align-items: center; gap: 10px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; white-space: nowrap; }
.btn-accent { background: var(--accent); color: var(--white); }
.btn-accent:hover { background: var(--accent-deep); transform: translateY(-2px); }
.btn:disabled { cursor: default; opacity: .6; transform: none; }
.btn[hidden] { display: none; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- форма обратной связи (legal.css СП) ---------- */
.form { display:grid; gap:18px; max-width:560px; margin-top: 6px; }
.form__row { display:grid; gap:8px; }
.form__row label { font-weight:700; font-size:14px; color: var(--ink); }
.form__row label .opt { color: var(--muted); font-weight:600; }
.form input, .form textarea { font-family: var(--font); font-size:16px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); color: var(--ink); width:100%; transition: border-color .15s, background .15s; }
.form input::placeholder, .form textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, transparent); }
.form input:focus, .form textarea:focus { outline:none; border-color: var(--ink); background: var(--white); }
.form input.is-invalid, .form textarea.is-invalid { border-color: var(--danger); }
.form textarea { min-height:150px; resize:vertical; line-height:1.5; }
.form__actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.doc-a .form__hint { font-size:13px; color: var(--muted); max-width:34ch; line-height:1.4; }
.doc-a .form__hint a { color:inherit; text-decoration:underline; }
.form__ok { display:none; align-items:flex-start; gap:14px; background: var(--accent-pale); border:1.5px solid var(--accent); border-radius: var(--radius); padding:18px 20px; }
.form__ok.show { display:flex; }
.form__ok svg { flex:none; width:24px; height:24px; stroke: var(--ink); margin-top:1px; }
.form__ok b { font-weight:800; font-size:16px; display:block; margin-bottom:3px; }
.form__ok span { font-size:14.5px; color: var(--ink-2); line-height:1.5; }
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.form__err { display:none; align-items:flex-start; gap:14px; background:var(--danger-bg); border:1.5px solid var(--danger-border); border-radius: var(--radius); padding:18px 20px; }
.form__err.show { display:flex; }
.form__err svg { flex:none; width:24px; height:24px; stroke:var(--danger); margin-top:1px; }
.form__err b { font-weight:800; font-size:16px; display:block; margin-bottom:3px; color:var(--danger); }
.form__err span { font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.form__consent { display:flex; gap:10px; align-items:flex-start; font-size:14px; color: var(--ink-2); line-height:1.45; }
.form__consent input { width:18px; height:18px; margin-top:2px; flex:none; accent-color: var(--ink); }
.doc-a .form__consent a { color:inherit; text-decoration:underline; }
.form input:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- правовой документ: оглавление + разделы (legal.css СП) ---------- */
/* глифы-маски из токенов СП (styles.css :root --check / --x) */
.doc-a {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.doc-a__grid { display:grid; grid-template-columns: 248px 1fr; gap: clamp(28px,4vw,64px); margin-top: clamp(28px,4vw,52px); align-items:start; }

.toc { position: sticky; top: 98px; }
.toc__t { font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); margin-bottom:14px; padding-left:14px; }
.toc__list { list-style:none; margin:0; padding:0; display:grid; gap:2px; max-height: calc(100vh - 150px); overflow:auto; }
.doc-a .toc__list a { display:flex; gap:10px; align-items:baseline; padding:8px 14px; border-radius:var(--radius-xs); font-size:14px; font-weight:600; color: var(--muted); line-height:1.3; transition: background .15s, color .15s; }
.doc-a .toc__list a:hover { background: var(--paper); color: var(--ink); }
.doc-a .toc__list a.active { background: var(--ink); color: var(--white); }
.toc__n { flex:none; font-weight:800; font-size:12px; color: var(--ink); width:20px; }
.toc__list a.active .toc__n { color: var(--accent-pale); }

.doc-a__body { min-width:0; font-size:17px; line-height:1.7; color: var(--ink-2); }
/* В тексте РА есть длинные URL (п. 14.2 Политики) — без переноса на телефоне горизонтальный скролл. */
.doc-a__body { overflow-wrap: break-word; }
.doc-a .doc-a__intro { font-size: clamp(18px,1.6vw,21px); line-height:1.6; color: var(--ink); padding-bottom:8px; }
.doc-a__intro strong { font-weight:700; }
.sec { padding-top: 14px; margin-top: 30px; border-top: 1.5px solid var(--line); scroll-margin-top: 96px; }
.sec:first-of-type { border-top: none; }
.sec__h { display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; }
.sec__n { flex:none; font-weight:800; font-size:18px; color: var(--white); background: var(--accent); width:42px; height:42px; border-radius:var(--radius-sm); display:grid; place-items:center; letter-spacing:-.02em; }
.doc-a .sec__t { font-weight:800; font-size: clamp(22px,2.6vw,30px); letter-spacing:-.03em; line-height:1.1; padding-top:6px; }
.doc-a .sec p { margin:0 0 14px; max-width: 70ch; }
.sec p .cl { font-weight:800; color: var(--ink); margin-right:7px; font-size: .94em; }
.doc-a .sec p.note { background: var(--paper); border:1.5px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding:16px 20px; color: var(--ink-2); }
.doc-a .sec p.intro { font-weight:600; color: var(--ink); }

.sec__list { list-style:none; margin:4px 0 18px; padding:0; display:grid; gap:11px; max-width:70ch; }
.sec__list li { position:relative; display:flex; gap:12px; font-size:16px; line-height:1.5; color: var(--ink-2); }
.sec__list li::before { content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background: var(--accent); }
.sec__list li::after { content:""; position:absolute; left:0; top:1px; width:22px; height:22px; background: var(--white); -webkit-mask: var(--check) center / 13px no-repeat; mask: var(--check) center / 13px no-repeat; }
.sec__list.x li::before { background: var(--paper); border:1.5px solid var(--line); }
.sec__list.x li::after { background: var(--danger); -webkit-mask: var(--x) center / 11px no-repeat; mask: var(--x) center / 11px no-repeat; }
.sec__list.n li { gap:14px; }
.sec__list.n li::before { width:7px; height:7px; margin:9px 0 0 7px; border:none; background: var(--accent); }
.sec__list.n li::after { display:none; }

.doc-a .req a { color: var(--ink); text-decoration: underline; text-underline-offset:3px; text-decoration-color: var(--accent); text-decoration-thickness:2px; font-weight:600; }
.sec .req { margin-top: 10px; }
.doc-a .sec .req p { margin: 0; }  /* у СП .req p объявлен после .sec p и перебивает его */

@media (max-width: 900px) {
  .doc-a__grid { grid-template-columns: 1fr; }
  .toc { position: static; max-height:none; margin-bottom: 8px; border:1.5px solid var(--line); border-radius: var(--radius); padding:18px; }
  .toc__list { max-height:none; }
}

.doc-a .toc__list a:focus-visible,
.doc-a .req a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }