/* Страницы разделов «Миледи». Поверх base.css (стили прототипа): статья с оглавлением,
   блок «Коротко», схемы, сравнения, виджеты, метки «уточнить». */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  --tbd:#b86e0c; --tbd-soft:#fdf1de; --fig:#f1eff8;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tbd:#f0b052;--tbd-soft:#3a2c17;--fig:#211e33}}
:root[data-theme="dark"]{--tbd:#f0b052;--tbd-soft:#3a2c17;--fig:#211e33}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* шапка: ссылки разделов в одну строку, на узком экране — бургер */
nav.main a{white-space:nowrap}

/* статья */
.art{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start;padding-block:8px 40px}
@media (max-width:960px){.art{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 88px);display:flex;flex-direction:column;gap:2px;font-size:14px}
.toc b{font:600 12px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.toc a{color:var(--muted);text-decoration:none;padding:5px 10px;border-left:2px solid var(--line)}
.toc a:hover,.toc a.on{color:var(--ink);border-left-color:var(--brand)}
.content{display:flex;flex-direction:column;gap:22px;min-width:0}
.content section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:90px;padding-top:18px}
.content h2{font-size:clamp(21px,2.6vw,28px)}
.content h3{font:600 17px var(--f-body);margin-top:6px}
.content p,.content li{max-width:720px}
.content ul,.content ol{margin:0;padding-left:20px;display:grid;gap:6px}
.answer{font-size:17px;background:var(--brand-soft);border-radius:var(--r-s);padding:14px 16px;max-width:720px}

/* первый экран страницы */
.p-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:center;padding-block:28px 24px}
@media (max-width:900px){.p-hero{grid-template-columns:minmax(0,1fr)}}
.p-hero .lead{font-size:18px;color:var(--muted);max-width:560px}
.p-hero-text{display:flex;flex-direction:column;gap:16px;min-width:0}
.p-hero-art{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:16px;min-width:0}
.p-hero-art svg{width:100%;height:auto;display:block}

/* «Коротко»: запрос — ответ */
.short{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:grid;gap:10px;max-width:820px}
.short dl{margin:0;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:8px 18px}
.short dt{font-weight:600}
.short dd{margin:0;color:var(--muted)}
@media (max-width:560px){.short dl{grid-template-columns:1fr}.short dd{margin-bottom:6px}}

/* цены «от» */
.prices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.price-card b{font:700 20px var(--f-display);color:var(--brand)}
.price-card span{font-size:13.5px;color:var(--muted)}

/* схемы и иллюстрации: надписи — текст SVG, не картинка */
figure.fig{margin:0;background:var(--fig);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;max-width:820px}
figure.fig svg{width:100%;height:auto;display:block;max-width:100%}
figure.fig figcaption{font-size:14px;color:var(--muted)}
.svg-t{font:500 14px var(--f-body);fill:var(--ink)}
.svg-s{font:400 13px var(--f-body);fill:var(--muted)}
.svg-line{stroke:var(--muted);stroke-width:1.5;fill:none}
.svg-brand{fill:var(--brand)} .svg-brand-soft{fill:var(--brand-soft)} .svg-paper{fill:var(--paper)} .svg-sun{fill:var(--sun)} .svg-glass{fill:var(--sky1)}

/* сравнения */
.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper);max-width:860px}
.cmp table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:560px}
.cmp th{font:500 12px var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg)}
.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:600}

/* виджеты */
.widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px;max-width:860px}
.widget h3{margin:0;display:flex;gap:8px;align-items:center}
.widget .eyebrow{color:var(--brand)}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice button{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:9px 15px;font:500 14.5px var(--f-body);cursor:pointer}
.choice button[aria-pressed="true"]{border-color:var(--brand);background:var(--brand-soft)}
.result{background:var(--ok-soft);border-radius:var(--r-s);padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.result b{font-weight:600}
.range-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.range-row input[type=range]{flex:1;min-width:160px;accent-color:var(--brand)}
.range-row output{font:600 15px var(--f-mono);min-width:70px}

/* шаги инструкции */
ol.howto{list-style:none;padding:0;counter-reset:h;display:grid;gap:14px;max-width:820px}
ol.howto li{counter-increment:h;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
ol.howto li::before{content:counter(h);font:700 16px var(--f-mono);color:var(--brand-ink);background:var(--brand);width:34px;height:34px;border-radius:50%;display:grid;place-items:center}

/* «уточнить у Татьяны» — видно в макете, на живом сайте заменяется настоящими данными */
.tbd{background:var(--tbd-soft);color:var(--ink);border-bottom:1.5px dashed var(--tbd);padding:0 3px;border-radius:3px;white-space:nowrap}
.tbd::after{content:" ?";font:600 11px var(--f-mono);color:var(--tbd)}

/* связанные разделы */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.related a{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px;min-width:0}
.related a span{font-size:13.5px;color:var(--muted)}
.related a:hover{border-color:var(--brand)}

/* полоса заявки */
.cta-band{background:var(--brand);color:var(--brand-ink);border-radius:22px;padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px}
.cta-band p{opacity:.88;max-width:560px}
.cta-band .btn-sun{white-space:nowrap}

/* хаб страниц */
.hub-group{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.hub a{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:6px;min-width:0}
.hub a:hover{border-color:var(--brand)}
.hub a small{font:500 12px var(--f-mono);color:var(--muted)}
.hub a span{font-size:14px;color:var(--muted)}

/* схема + текст рядом; на узком экране друг под другом */
.split{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:20px;align-items:center}
@media (max-width:620px){.split{grid-template-columns:minmax(0,1fr)}}
.split svg{width:100%;height:auto;display:block}
.split-text{display:flex;flex-direction:column;gap:8px;min-width:0}
.split-text ul{margin:0;padding-left:18px}
.price-inline{font:700 19px var(--f-display);color:var(--brand)}
.trust b{white-space:nowrap}
/* шесть разделов в шапке: телефон прячем раньше, чем у прототипа */
@media (max-width:1240px){.top .phone{display:none}}
@media (max-width:1080px) and (min-width:981px){nav.main a{padding:8px 9px;font-size:14px}}

/* оглавление прячем на узких экранах (правило стоит после .toc, чтобы его не перебить) */
@media (max-width:960px){.toc{display:none}}