/* Компоненты: выводы, callout, figure, таблица, цитата, кейс, шаги, FAQ, автор, подвал, диалог, print */
/* ---------- Ключевые выводы ---------- */
.takeaways{background:var(--surface);border:2px solid var(--ink);border-radius:.8rem;padding:1.3rem 1.4rem 1.4rem;margin-top:2rem!important}
.takeaways h2{font-size:1.25rem;margin:0 0 .8rem!important}
.takeaways ul{list-style:none;padding:0!important}
.takeaways li{display:flex;gap:.8rem;align-items:baseline}
.takeaways li .disc{width:.5em;height:.5em;transform:translateY(-.05em)}

/* ---------- Callout ---------- */
.callout{position:relative;background:var(--soft);border-radius:.6rem;padding:1.1rem 1.2rem 1.15rem 1.2rem}
.callout-label{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);margin:0 0 .35rem;font-size:.95rem}
.callout-label .disc{width:.8em;height:.8em}
.callout p{margin:0}
.callout.warning{background:transparent;border:2px dashed var(--ink)}

/* ---------- Figure / Infographic ---------- */
figure{margin:0}
.fig{margin-block:1.8rem!important}
.fig .frame{border-radius:.7rem;overflow:hidden;border:2px solid var(--ink);background:var(--surface)}
figcaption{font-size:.86rem;color:var(--muted);margin-top:.6rem;line-height:1.45}
.fig details{margin-top:.6rem;font-size:.92rem}
.fig summary{cursor:pointer;color:var(--link);font-weight:500;min-height:2.2rem;display:flex;align-items:center}
.fig details p{margin:.4rem 0 0}
.svg-bg{fill:var(--soft)}.svg-line{stroke:var(--ink);fill:none;stroke-width:5}
.svg-box{fill:var(--surface);stroke:var(--ink);stroke-width:4}
.svg-txt{fill:var(--ink);font:600 24px var(--font)}
.svg-yellow{fill:var(--yellow);stroke:var(--ink);stroke-width:4}
.svg-dot{fill:var(--ink)}

/* ---------- Таблица ---------- */
.table-wrap{overflow-x:auto;border:2px solid var(--ink);border-radius:.6rem;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:30rem;font-size:.95rem}
caption{text-align:left;font-weight:600;color:var(--ink);padding:.8rem 1rem;caption-side:top;border-bottom:2px solid var(--ink)}
th,td{text-align:left;vertical-align:top;padding:.75rem 1rem}
thead th{background:var(--ink);color:var(--surface);font-weight:600}
tbody th{font-weight:600;color:var(--ink);width:40%}
tbody tr+tr>*{border-top:1px solid var(--border)}

/* ---------- Цитата ---------- */
blockquote{margin:1.8rem 0!important;padding:0 0 0 1.4rem;border-left:.45rem solid var(--yellow);box-shadow:-.16rem 0 0 0 var(--ink)}
blockquote p{font-size:1.4rem;line-height:1.4;font-weight:500;color:var(--ink);margin:0}
blockquote footer{font-size:.9rem;color:var(--muted);margin-top:.7rem}

/* ---------- Кейс ---------- */
.case{background:var(--surface);border:2px solid var(--ink);border-radius:.8rem;padding:1.2rem 1.3rem}
.case h3{margin:0 0 1rem!important;font-size:1.15rem}
.case dl{display:grid;gap:1rem 1.5rem;margin:0}
@media (min-width:40rem){.case dl{grid-template-columns:1fr 1fr}}
.case dt{font-weight:600;color:var(--ink);display:flex;gap:.5rem;align-items:center;margin-bottom:.15rem}
.case dt .disc{width:.55em;height:.55em}
.case dd{margin:0;font-size:.95rem}

/* ---------- Шаги (настоящая последовательность) ---------- */
.steps{list-style:none;counter-reset:s;padding:0!important}
.steps li{counter-increment:s;position:relative;padding-left:3.2rem;min-height:2.4rem}
.steps li+li{margin-top:1.25rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.1rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;font-weight:800;box-shadow:0 0 0 .14rem var(--bg),0 0 0 .24rem var(--ink)}
.steps b{display:block;color:var(--ink)}

/* ---------- Чек-лист ---------- */
.checklist{list-style:none;padding:0!important}
.checklist li{position:relative;padding-left:2.1rem}
.checklist li::before{content:"";position:absolute;left:0;top:.2rem;width:1.15rem;height:1.15rem;border:2px solid var(--ink);border-radius:.25rem;background:var(--surface)}
.checklist li::after{content:"";position:absolute;left:.4rem;top:.35rem;width:.35rem;height:.7rem;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(40deg)}

/* ---------- FAQ ---------- */
.faq details{border-top:2px solid var(--ink)}
.faq details:last-child{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 0;font-weight:600;color:var(--ink);font-size:1.05rem;min-height:3rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--yellow) no-repeat center/55% ;box-shadow:0 0 0 .1rem var(--bg),0 0 0 .2rem var(--ink);background-image:linear-gradient(var(--on-yellow),var(--on-yellow)),linear-gradient(var(--on-yellow),var(--on-yellow));background-size:55% 3px,3px 55%;background-position:center}
.faq details[open] summary::after{background-size:55% 3px,0 0}
.faq .answer{padding:0 0 1.2rem;max-width:36rem}
.faq .answer p{margin:0}

/* ---------- Термины, источники ---------- */
.glossary{margin:0}
.glossary div{padding:.85rem 0;border-top:1px solid var(--border)}
.glossary dt{font-weight:600;color:var(--ink)}
.glossary dd{margin:.15rem 0 0}
.sources{font-size:.95rem}

/* ---------- Автор ---------- */
.author{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;background:var(--surface);border:2px solid var(--ink);border-radius:.8rem;padding:1.3rem;margin-top:3rem!important}
.avatar{width:4.2rem;height:4.2rem;border-radius:50%;background:var(--soft);display:grid;place-items:center;color:var(--ink);font-weight:800;font-size:1.3rem;border:2px solid var(--ink)}
.author h2{display:block;font-size:1.15rem!important;margin:0 0 .15rem!important}
.author .role{color:var(--muted);font-size:.9rem;margin:0 0 .5rem}
.author p{margin:0;font-size:.95rem}
.author a.more{display:inline-block;margin-top:.5rem;font-size:.95rem}

/* ---------- Читайте также ---------- */
.related ul{list-style:none;padding:0!important;display:grid;gap:0}
.related li{margin:0!important;border-top:1px solid var(--border)}
.related li:last-child{border-bottom:1px solid var(--border)}
.related a{display:block;padding:1rem 0;text-decoration:none;color:var(--ink)}
.related a:hover strong{text-decoration:underline}
.related small{display:block;color:var(--muted);font-size:.82rem;margin-bottom:.15rem}
.related span{display:block;color:var(--muted);font-size:.92rem}
.report{margin-top:2rem!important;font-size:.95rem;color:var(--muted)}

/* ---------- Подвал ---------- */
.site-footer{background:var(--band);color:var(--band-text);padding:2.2rem 0 calc(2.2rem + env(safe-area-inset-bottom,0px));font-size:.92rem;--focus:var(--yellow)}
.site-footer a{color:var(--band-text)}
.site-footer ul{list-style:none;margin:0 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.site-footer a{display:inline-block;padding:.35rem 0}
.site-footer p{margin:0;color:var(--band-muted)}

/* ---------- Диалог настроек ---------- */
dialog{border:2px solid var(--ink);border-radius:.9rem;background:var(--surface);color:var(--text);padding:0;width:min(27rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;font-family:var(--font)}
dialog::backdrop{background:rgba(6,10,24,.65)}
.dlg-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-bottom:2px solid var(--ink)}
.dlg-head h2{margin:0!important;font-size:1.2rem;display:block}
.dlg-body{padding:1rem 1.25rem 1.25rem;display:grid;gap:1.25rem}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-weight:600;color:var(--ink);padding:0;margin-bottom:.5rem}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opts span{display:flex;align-items:center;min-height:2.75rem;padding:.35rem .9rem;border:2px solid var(--ink);border-radius:.5rem;font-weight:500;color:var(--ink)}
.opts input:checked+span{background:var(--yellow);color:var(--on-yellow);font-weight:600}
.opts input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.dlg-foot{display:flex;gap:.6rem;flex-wrap:wrap}
.dlg-foot .btn{color:var(--ink)}
.dlg-foot .btn-primary{color:var(--on-yellow)}
.dlg-foot .btn:hover{color:var(--on-yellow)}

.toast{position:fixed;left:50%;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:.65rem 1.1rem;border-radius:.5rem;font-size:.92rem;z-index:200}
.toast:empty{display:none}

@media (max-width:40rem){
  h2{font-size:1.55rem}
  .author{grid-template-columns:1fr}
}
@media print{
  .site-header,.demo,.toc-mobile,.toc-side,.anchor,.skip,.toast,dialog,.report{display:none!important}
  .hero{background:none;color:#000;padding:0}.hero::after{display:none}.hero a,.crumbs ol{color:#000}
  body{background:#fff;color:#000}
}