/* Вёрстка страницы брендбука. Только то, чего нет в продукте: оглавление, образцы, схемы.
   Правило то же, что для продукта: кегли, цвета, отступы, линии — только токены.
   Проверка: python3 tools/check.py. Префикс .bb- */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--sc-space-6)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
img{max-width:100%;display:block}
code{font-family:var(--sc-font-family-mono);font-size:var(--sc-size-xs);background:var(--sc-bg-subtle);padding:0 var(--sc-space-1)}
figure{margin:0}

/* ── Каркас: оглавление слева, содержание справа ── */
.bb{--side:280px}
.bb-side{position:fixed;inset:0 auto 0 0;width:var(--side);padding:var(--sc-space-8) var(--sc-space-6);border-right:var(--sc-border-width-hairline) solid var(--sc-border);display:flex;flex-direction:column;gap:var(--sc-space-8);overflow-y:auto;background:var(--sc-bg);z-index:var(--sc-z-header)}
.bb-logo-link{display:block;width:150px;color:var(--sc-text)}
.bb-logo-link svg{width:100%;height:auto;display:block}
.bb-toc{list-style:none;margin:0;padding:0;display:grid}
.bb-toc a{display:grid;grid-template-columns:var(--sc-space-8) 1fr;padding:var(--sc-space-1) 0;color:var(--sc-text-secondary);text-decoration:none}
.bb-toc a span{color:var(--sc-text-tertiary);font-variant-numeric:tabular-nums}
.bb-toc a:hover,.bb-toc a.is-current{color:var(--sc-text)}
.bb-toc a.is-current span{color:var(--sc-text-accent)}
.bb-side__foot{margin-top:auto}
.bb-main{margin-left:var(--side);min-width:0}
.bb-wrap{padding-inline:var(--sc-layout-margin);max-width:1440px}

.bb-topbar{display:none}
@media(max-width:1099px){
  .bb-side{display:none}
  .bb-main{margin-left:0}
  .bb-topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:var(--sc-z-header);padding:var(--sc-space-3) var(--sc-layout-margin);background:var(--sc-bg);border-bottom:var(--sc-border-width-hairline) solid var(--sc-border)}
  .bb-topbar .bb-logo-link{width:120px}
  .bb-topbar details{position:relative}
  .bb-topbar summary{list-style:none;cursor:pointer;display:flex;gap:var(--sc-space-2);align-items:center;min-height:var(--sc-dimension-control-s)}
  .bb-topbar summary::-webkit-details-marker{display:none}
  .bb-topbar .bb-toc{position:absolute;right:0;top:calc(100% + var(--sc-space-3));width:min(320px,90vw);background:var(--sc-surface);border:var(--sc-border-width-hairline) solid var(--sc-border);padding:var(--sc-space-4) var(--sc-space-5);box-shadow:var(--sc-shadow-overlay);max-height:75vh;overflow:auto}
}

/* ── Обложка: единственная громкая деталь страницы ── */
.bb-cover{min-height:min(100svh,980px);display:flex;flex-direction:column;padding-block:var(--sc-space-10)}
.bb-cover .sc-geo__plane{z-index:0}
.bb-cover>:not(.sc-geo__plane){position:relative;z-index:1}
.bb-cover__top{display:flex;justify-content:space-between;gap:var(--sc-space-6)}
.bb-cover__title{margin-top:auto;padding-top:var(--sc-space-32);display:grid;gap:var(--sc-space-6)}
.bb-cover__title .sc-body{max-width:34ch}
.bb-cover__bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sc-space-6);margin-top:var(--sc-space-12);max-width:42%}
@media(max-width:899px){.bb-cover__bottom{grid-template-columns:1fr;max-width:60%}}

/* ── Глава и блок: левая колонка 3 + содержание 9 (как .sc-rail) ── */
.bb-chapter{padding-top:var(--sc-space-32);border-top:var(--sc-border-width-hairline) solid var(--sc-border-strong)}
.bb-chapter-head{display:grid;gap:var(--sc-space-4) var(--sc-layout-gutter-desktop);margin-bottom:var(--sc-space-20)}
.bb-chapter-head__text{display:grid;gap:var(--sc-space-5)}
.bb-block{display:grid;gap:var(--sc-space-6);padding-block:var(--sc-space-10) var(--sc-space-16);border-top:var(--sc-border-width-hairline) solid var(--sc-border)}
@media(min-width:900px){.bb-chapter-head,.bb-block{grid-template-columns:3fr 9fr}}
.bb-block__head{display:grid;gap:var(--sc-space-2);align-content:start}
.bb-block__head .sc-small{max-width:32ch}
.bb-block__body{min-width:0;display:grid;gap:var(--sc-space-8);align-content:start}
.bb-block--wide>.bb-block__body{grid-column:1/-1}
.bb-list{margin:0;padding:0;list-style:none;display:grid;gap:var(--sc-space-3);max-width:var(--sc-layout-measure)}
.bb-list li{position:relative;padding-left:var(--sc-space-6)}
.bb-list li::before{content:"";position:absolute;left:0;top:.6em;width:var(--sc-space-2);height:var(--sc-space-2);background:var(--sc-ink)}

.bb-cols{display:grid;gap:var(--sc-space-6)}
.bb-cols--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.bb-cols--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.bb-cols--4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ── Демо-рамка ── */
.bb-demo{border:var(--sc-border-width-hairline) solid var(--sc-border);background:var(--sc-bg);min-width:0}
.bb-demo__stage{padding:var(--sc-space-8);display:flex;flex-wrap:wrap;gap:var(--sc-space-5);align-items:center;min-width:0}
.bb-demo__stage--col{flex-direction:column;align-items:flex-start}
.bb-demo__stage--center{justify-content:center;min-height:200px}
.bb-demo__stage--end{justify-content:flex-end;align-items:flex-end;min-height:260px}
.bb-demo__stage--block{display:block}
.bb-demo__stage--scroll{display:block;overflow-x:auto;padding-block:0}
.bb-demo__stage--scroll>*{min-width:880px}
.bb-demo__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sc-space-2) var(--sc-space-4);padding:var(--sc-space-3) var(--sc-space-4);border-top:var(--sc-border-width-hairline) solid var(--sc-border);color:var(--sc-text-secondary)}
.bb-demo__cap code{background:none;padding:0;color:var(--sc-text)}
.bb-on-red{background:var(--sc-red)}
.bb-on-mint{background:var(--sc-mint)}
.bb-on-blue{background:var(--sc-blue)}
.bb-on-dark{background:var(--sc-bg-inverse);color:var(--sc-text-inverse)}
.bb-on-subtle{background:var(--sc-bg-subtle)}

/* ── Можно / нельзя ── */
.bb-verdict{display:flex;align-items:center;gap:var(--sc-space-2)}
.bb-verdict::before{content:"";width:var(--sc-space-3);height:var(--sc-space-3);flex:none}
.bb-verdict--yes{color:var(--sc-color-mint-700)}
.bb-verdict--yes::before{background:var(--sc-color-mint-600)}
.bb-verdict--no{color:var(--sc-color-red-600)}
.bb-verdict--no::before{background:linear-gradient(45deg,transparent 43%,currentColor 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,currentColor 43% 57%,transparent 57%)}
.bb-dont .bb-demo__stage{min-height:150px;justify-content:center;overflow:hidden;flex-wrap:nowrap}
/* Намеренные ошибки для раздела «Так нельзя» */
.bb-wrong-font{font:900 var(--sc-size-m)/1 'Arial Black',Arial,sans-serif;letter-spacing:-.04em} /* пример-нарушения */
.bb-wrong-latin{font:700 var(--sc-size-m)/1 var(--sc-font-family-display);text-transform:uppercase}
.bb-wrong-squash{transform:scaleX(.715);transform-origin:left}
.bb-wrong-rotate{rotate:-27deg}
.bb-wrong-shadow{filter:drop-shadow(6px 6px 0 var(--sc-blue))}
.bb-wrong-dot{align-self:flex-start;margin-left:var(--sc-space-6)}
.bb-wrong-dot rect{fill:var(--sc-red)}
.bb-wrong-inline{display:inline-block;width:110px;vertical-align:-1px}

/* ── Логотип ── */
.bb-logo-stage{min-height:180px;display:grid;place-items:center;padding:var(--sc-space-10);color:var(--sc-text)}
.bb-logo-stage.bb-on-dark,.bb-logo-stage.bb-on-red{color:var(--sc-paper)}
.bb-logo-stage svg{width:min(360px,80%);height:auto}
.bb-logo-w80{width:80px}.bb-logo-w128{width:128px}.bb-logo-w240{width:240px}.bb-logo-w76{width:76px}.bb-logo-w220{width:220px}
.bb-mark{width:120px;height:auto}
.bb-avatar{width:120px;border-radius:50%}
.bb-avatar--line{border:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-favicon-l{width:32px}.bb-favicon-s{width:16px}
.bb-sizes{align-items:flex-end;gap:var(--sc-space-10)}
.bb-sizes svg{display:block;height:auto;margin-bottom:var(--sc-space-2);color:var(--sc-text)}
.bb-construct{padding:var(--sc-space-10);background:var(--sc-bg-subtle);overflow:hidden}
.bb-construct svg{display:block;width:100%;height:auto;overflow:visible}

/* Цвета схем: только через токены */
.bb-svg text{font-family:var(--sc-font-family-text)}
.bb-svg .t-blue{fill:var(--sc-color-blue-700)}
.bb-svg .t-red{fill:var(--sc-color-red-600)}
.bb-svg .t-ink{fill:var(--sc-ink);font-weight:var(--sc-font-weight-semibold)}
.bb-svg .t-muted{fill:var(--sc-text-secondary)}
.bb-svg .s-blue{stroke:var(--sc-color-blue-700);fill:none}
.bb-svg .s-red{stroke:var(--sc-color-red-600);fill:none}
.bb-svg .s-ink{stroke:var(--sc-ink);fill:none}
.bb-svg .s-line{stroke:var(--sc-border);fill:none}
.bb-svg .f-blue{fill:var(--sc-blue);opacity:.45}
.bb-svg .f-red{fill:var(--sc-red)}
.bb-svg .f-mint{fill:var(--sc-mint)}
.bb-svg .logo{color:var(--sc-ink)}

/* ── Цвет ── */
.bb-swatch{display:grid;grid-template-columns:minmax(0,1fr);border:var(--sc-border-width-hairline) solid var(--sc-border);background:var(--sc-bg)}
.bb-swatch__chip{width:100%;min-width:0;aspect-ratio:4/3;padding:var(--sc-space-5);display:flex;flex-direction:column;justify-content:space-between;border:0;cursor:copy;text-align:left;font:inherit;background:var(--c);color:var(--on,var(--sc-ink))}
.bb-swatch__chip--wide{aspect-ratio:8/3}
.bb-swatch__chip:focus-visible{outline:var(--sc-border-width-strong) solid var(--sc-focus);outline-offset:-6px}
.bb-swatch__data{display:grid;grid-template-columns:auto 1fr;gap:var(--sc-space-1) var(--sc-space-4);padding:var(--sc-space-4) var(--sc-space-5);margin:0}
.bb-swatch__data dt{color:var(--sc-text-tertiary)}
.bb-swatch__data dd{margin:0}
.bb-ramp{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));border:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-ramp--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.bb-ramp button{border:0;padding:var(--sc-space-3);min-height:112px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;cursor:copy;font:var(--sc-size-xs)/var(--sc-typography-small-line) var(--sc-font-family-text);background:var(--c);color:var(--on,var(--sc-ink))}
.bb-ramp button b{font-weight:var(--sc-font-weight-semibold)}
.bb-ramp button:focus-visible{outline:var(--sc-border-width-strong) solid var(--sc-focus);outline-offset:-4px}
.bb-status{padding:var(--sc-space-4);background:var(--bg);color:var(--fg)}
.bb-pair{display:inline-grid;place-items:center;min-width:64px;height:40px;padding:0 var(--sc-space-3);background:var(--bg);color:var(--fg);border:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-dot{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:var(--sc-space-2);background:var(--c);border:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-pass{color:var(--sc-color-status-success)}
.bb-fail{color:var(--sc-color-status-error)}
.bb-large{color:var(--sc-color-status-warning)}
.bb-proportion{display:flex;height:72px;border:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-proportion>div{display:flex;align-items:flex-end;padding:var(--sc-space-2);min-width:0;overflow:hidden;white-space:nowrap;background:var(--c);color:var(--on,var(--sc-ink));flex:var(--f)}
.bb-toast{position:fixed;left:50%;bottom:var(--sc-space-6);translate:-50% 0;background:var(--sc-ink);color:var(--sc-paper);padding:var(--sc-space-3) var(--sc-space-5);z-index:var(--sc-z-toast);opacity:0;pointer-events:none;transition:opacity var(--sc-motion-duration-base) ease-out}
.bb-toast.is-on{opacity:1}

/* ── Типографика ── */
.bb-specimen{display:grid;gap:var(--sc-space-6);padding:var(--sc-space-10);border:var(--sc-border-width-hairline) solid var(--sc-border);overflow:hidden}
.bb-chars{word-break:break-all;color:var(--sc-text-secondary)}
.bb-scale-row{display:grid;gap:var(--sc-space-3);padding:var(--sc-space-6) 0;border-bottom:var(--sc-border-width-hairline) solid var(--sc-border);align-items:baseline}
@media(min-width:900px){.bb-scale-row{grid-template-columns:200px minmax(0,1fr)}}
.bb-scale-row__sample{min-width:0;overflow:hidden;display:grid;gap:var(--sc-space-2)}

/* ── Сетка ── */
.bb-gridviz{padding:var(--sc-space-5);background:var(--sc-bg-subtle);border:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-gridviz__cols{display:grid;gap:var(--g);grid-template-columns:repeat(var(--c),1fr);height:120px}
.bb-gridviz__cols i{background:var(--sc-color-red-100);border-inline:var(--sc-border-width-hairline) solid var(--sc-color-red-500)}
.bb-gridviz__label{display:flex;justify-content:space-between;margin-top:var(--sc-space-3);color:var(--sc-text-secondary)}
.bb-spacing{display:grid;gap:var(--sc-space-2)}
.bb-spacing div{display:grid;grid-template-columns:80px 48px 1fr;align-items:center;gap:var(--sc-space-3)}
.bb-spacing i{display:block;height:var(--sc-space-4);width:var(--w);background:var(--sc-blue)}
.bb-layout-demo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sc-layout-gutter-desktop);padding:var(--sc-space-8);border:var(--sc-border-width-hairline) solid var(--sc-border);background:var(--sc-bg);position:relative;isolation:isolate}
.bb-layout-demo>:nth-child(2){grid-column:1/4}
.bb-layout-demo>:nth-child(3){grid-column:4/-1}
.bb-layout-demo__cols{position:absolute;inset:0 var(--sc-space-8);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--sc-layout-gutter-desktop);z-index:-1;pointer-events:none}
.bb-layout-demo__cols i{background:var(--sc-color-red-50)}
@media(max-width:699px){.bb-layout-demo{grid-template-columns:1fr}.bb-layout-demo>*{grid-column:1/-1!important}.bb-layout-demo__cols{display:none}}

/* ── Форма ── */
.bb-shape{width:96px;height:64px;background:var(--sc-blue)}
.bb-round{width:56px;height:56px;border-radius:var(--sc-radius-full);border:var(--sc-border-width-hairline) solid var(--sc-border);display:grid;place-items:center;box-shadow:var(--sc-shadow-overlay)}
.bb-rule-ink{border:0;border-top:var(--sc-border-width-hairline) solid var(--sc-ink);margin:0;width:100%}
.bb-lifted{width:160px;height:72px;background:var(--sc-surface);box-shadow:var(--sc-shadow-overlay)}
.bb-field-demo{width:220px}

/* ── Геометрия ── */
.bb-geo{aspect-ratio:16/9;border:var(--sc-border-width-hairline) solid var(--sc-border);background:var(--sc-bg)}
.bb-geo__text{position:absolute;z-index:1;left:6%;top:10%;max-width:56%}
.bb-geo__text--right{left:auto;right:6%;top:auto;bottom:10%;max-width:40%}
.bb-angle{display:block;width:100%;height:auto;background:var(--sc-bg-subtle);border:var(--sc-border-width-hairline) solid var(--sc-border)}

/* ── Иконки ── */
.bb-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));border-top:var(--sc-border-width-hairline) solid var(--sc-border);border-left:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-icons figure{display:grid;justify-items:center;gap:var(--sc-space-3);padding:var(--sc-space-6) var(--sc-space-2) var(--sc-space-3);border-right:var(--sc-border-width-hairline) solid var(--sc-border);border-bottom:var(--sc-border-width-hairline) solid var(--sc-border);color:var(--sc-text-secondary)}
.bb-icons svg{width:32px;height:32px;color:var(--sc-text)}
.bb-icon-grid{width:200px;height:200px;flex:none;background-image:linear-gradient(var(--sc-border) 1px,transparent 1px),linear-gradient(90deg,var(--sc-border) 1px,transparent 1px);background-size:calc(100%/24) calc(100%/24);border:var(--sc-border-width-hairline) solid var(--sc-border);position:relative}
.bb-icon-grid::before{content:"";position:absolute;inset:12.5%;border:var(--sc-border-width-hairline) dashed var(--sc-color-blue-600)}
.bb-icon-grid svg{position:absolute;inset:0;width:100%;height:100%;color:var(--sc-red)}
.bb-icon-row{display:flex;flex-wrap:wrap;gap:var(--sc-space-8);align-items:flex-start}
.bb-icon-row .bb-list{flex:1;min-width:260px}

/* ── Изображения и обложки ── */
.bb-photo img{aspect-ratio:4/3;object-fit:cover;width:100%}
.bb-photo figcaption{margin-top:var(--sc-space-3);display:grid;gap:var(--sc-space-1)}
.bb-cover-text{position:absolute;left:var(--sc-space-6);top:26%;max-width:45%;margin:0;color:var(--sc-color-neutral-100)}
.bb-cover-phone{position:absolute;right:-6%;bottom:-26%;width:30%;height:74%;background:var(--sc-paper);border:6px solid var(--sc-ink);outline:2px solid var(--sc-color-neutral-400);border-radius:28px;rotate:12deg} /* phone: макет устройства, исключение из радиуса 0 */
.bb-cover-sheet{position:absolute;left:14%;top:26%;width:72%;color:var(--sc-ink);background:var(--sc-surface);border:var(--sc-border-width-hairline) solid var(--sc-color-blue-600);rotate:-5deg;padding:7%;display:grid;align-content:start;gap:var(--sc-space-2)}
.bb-cover-sheet .sc-small{color:var(--sc-color-blue-700)}
.sc-case__visual.bb-on-blue{color:var(--sc-ink)}

/* ── Тон ── */
.bb-compare{border-top:var(--sc-border-width-hairline) solid var(--sc-border-strong)}
.bb-compare__row{display:grid;gap:var(--sc-space-2) var(--sc-space-6);padding:var(--sc-space-4) 0;border-bottom:var(--sc-border-width-hairline) solid var(--sc-border)}
@media(min-width:760px){.bb-compare__row{grid-template-columns:1fr 1fr 1fr}}
.bb-was{color:var(--sc-text-tertiary);text-decoration:line-through;text-decoration-color:var(--sc-color-red-500)}

/* ── Шаблоны ── */
.bb-tpl{display:grid;gap:var(--sc-space-3);text-decoration:none;color:inherit}
.bb-tpl img{width:100%;height:auto;border:var(--sc-border-width-hairline) solid var(--sc-border);background:var(--sc-bg-subtle)}
.bb-tpl__cap{display:flex;justify-content:space-between;gap:var(--sc-space-3)}
.bb-tpl:hover .sc-body-strong{text-decoration:underline;text-underline-offset:.25em}

/* ── Код и файлы ── */
.bb-code{display:block;margin:0;padding:var(--sc-space-5) var(--sc-space-6);background:var(--sc-bg-inverse);color:var(--sc-paper);overflow-x:auto;font:var(--sc-size-xs)/1.6 var(--sc-font-family-mono);white-space:pre}
.bb-code .c{color:var(--sc-color-neutral-300)}
.bb-code .k{color:var(--sc-mint)}
.bb-code .v{color:var(--sc-blue)}
.bb-files{list-style:none;margin:0;padding:0;border-top:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-files li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sc-space-4);padding:var(--sc-space-3) 0;border-bottom:var(--sc-border-width-hairline) solid var(--sc-border)}
.bb-files a{color:inherit}
.bb-foot{padding-block:var(--sc-space-16);border-top:var(--sc-border-width-hairline) solid var(--sc-border-strong);margin-top:var(--sc-space-24);display:flex;flex-wrap:wrap;gap:var(--sc-space-4) var(--sc-space-10);justify-content:space-between;color:var(--sc-text-tertiary)}