/* Оформление самой витрины. Собрано на переменных системы; компоненты подключаются отдельным файлом. */
.docs{display:grid;grid-template-columns:17rem minmax(0,1fr);max-width:calc(var(--wrap) + var(--pad-x) * 2);margin:0 auto;align-items:start}
.docs__side{position:sticky;top:calc(var(--hdr-h) + 2px);max-height:calc(100dvh - var(--hdr-h));overflow:auto;padding:1.6rem 1rem 2rem var(--pad-x);border-right:var(--border-thin)}
.docs__main{min-width:0;padding:2rem var(--pad-x) 4rem clamp(1rem,3vw,2.6rem)}
.docs__group{font-size:var(--fs-micro);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--safety);margin:1.4rem 0 .5rem}
.docs__group:first-child{margin-top:0}
.docs__nav a{display:block;font-size:.8rem;padding:.22rem 0;border-left:2px solid transparent;padding-left:.6rem;margin-left:-.6rem}
.docs__nav a:hover{color:var(--safety)}
.docs__nav a.is-active{border-left-color:var(--safety);font-weight:700}
.docs__search{width:100%;font-family:var(--mono);font-size:.85rem;color:var(--ink);background:var(--surface);border:var(--border-thin);border-radius:0;padding:.5rem .6rem;margin-bottom:1.2rem}
.docs__search:focus{outline:none;background:var(--base);box-shadow:var(--shadow-sm)}
.docs__lead{font-family:var(--sans);font-size:1.08rem;line-height:1.55;color:var(--text-soft);max-width:68ch;margin-top:.9rem}
.docs__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.docs__chip{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:700;padding:.25rem .5rem;border:var(--border-thin)}
.docs__chip--ink{background:var(--ink);color:#fff}
.docs h2{margin:2.6rem 0 1rem;padding-bottom:.4rem;border-bottom:var(--border-thin);font-size:clamp(1.2rem,2vw,1.6rem)}
.docs__text{font-family:var(--sans);line-height:1.6;max-width:72ch}
.docs__text p{margin-bottom:.9rem}
.docs__text code,.docs__table code{font-family:var(--mono);font-size:.88em;background:var(--surface);border:var(--hair);padding:.05rem .35rem}

.demo{border:var(--border-thin);margin-bottom:1.6rem;background:var(--base)}
.demo__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .8rem;border-bottom:var(--border-thin);background:var(--surface)}
.demo__title{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.demo__copy{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--ink);background:var(--base);border:var(--border-thin);border-radius:0;padding:.3rem .55rem;cursor:pointer}
.demo__copy:hover{background:var(--ink);color:#fff}
.demo__stage{padding:1.6rem;overflow:auto;background-image:linear-gradient(rgba(0,0,0,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px);background-size:40px 40px}
.demo__frame{display:block;width:100%;height:26rem;border:0;background:var(--base)}
.demo__frame--tall{height:40rem}
.demo__code{margin:0;border-top:var(--border-thin);background:var(--term-bg);color:var(--term-green);font-family:var(--mono);font-size:.75rem;line-height:1.6;padding:.9rem 1rem;max-height:22rem;overflow:auto;white-space:pre;tab-size:2}
.demo__code--plain{border:var(--border-thin);margin-bottom:1.2rem;max-height:none}

.docs__table-wrap{overflow-x:auto;border:var(--border-thin);margin-bottom:1.4rem}
.docs__table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.92rem}
.docs__table th{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;text-align:left;background:var(--ink);color:#fff;padding:.55rem .7rem}
.docs__table td{padding:.55rem .7rem;border-top:1px solid var(--line);vertical-align:top}

.docs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.docs__card{display:block;border:var(--border-thin);padding:.9rem 1rem;background:var(--base);transition:transform .12s,box-shadow .12s}
.docs__card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-sm)}
.docs__card b{display:block;font-family:var(--grotesk);font-size:1.05rem;letter-spacing:-.01em}
.docs__card span{display:block;font-family:var(--sans);font-size:.85rem;line-height:1.4;color:var(--muted);margin-top:.3rem}
.docs__card small{display:block;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--safety);font-weight:700;margin-bottom:.4rem}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1rem;margin-bottom:1.4rem}
.swatch{border:var(--border-thin)}
.swatch__c{height:4.2rem;border-bottom:var(--border-thin)}
.swatch__n{padding:.5rem .6rem;font-size:.75rem;line-height:1.5}
.swatch__n b{display:block}
.scale__row{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.8rem 0;border-top:var(--hair)}
.scale__row code{font-size:.75rem;color:var(--muted)}
.scale__row span{font-family:var(--grotesk);font-weight:700;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}


@media (max-width:920px){
  .docs{grid-template-columns:1fr}
  .docs__side{position:static;max-height:none;border-right:0;border-bottom:var(--border-thin);padding:1rem var(--pad-x)}
  .docs__nav{columns:2}
  .docs__main{padding:1.4rem var(--pad-x) 3rem}
}

/* ---------- лендинг витрины ---------- */
.land__samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;align-items:start}
.land__samples .demo{margin-bottom:0}
.land__group{margin-top:1.8rem}
.land__group h3{margin-bottom:.8rem}
.land__group small{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--safety);font-weight:700;margin-left:.6rem}
.land__term{max-width:60rem}
.land__cells{margin-top:.4rem}
@media (max-width:900px){.land__samples{grid-template-columns:1fr}}

.swatch__c--base{background:var(--base)}.swatch__c--ink{background:var(--ink)}.swatch__c--safety{background:var(--safety)}.swatch__c--muted{background:var(--muted)}.swatch__c--surface{background:var(--surface)}.swatch__c--text-soft{background:var(--text-soft)}.swatch__c--text-dim{background:var(--text-dim)}.swatch__c--line{background:var(--line)}.swatch__c--on-ink-muted{background:var(--on-ink-muted)}.swatch__c--on-ink-soft{background:var(--on-ink-soft)}.swatch__c--prose-fg{background:var(--prose-fg)}.swatch__c--on-ink-dim{background:var(--on-ink-dim)}.swatch__c--code-fg{background:var(--code-fg)}.swatch__c--code-punct{background:var(--code-punct)}.swatch__c--code-key{background:var(--code-key)}.swatch__c--safety-tint{background:var(--safety-tint)}.swatch__c--ok{background:var(--ok)}.swatch__c--ok-tint{background:var(--ok-tint)}.swatch__c--term-bg{background:var(--term-bg)}.swatch__c--term-green{background:var(--term-green)}.swatch__c--term-amber{background:var(--term-amber)}.swatch__c--term-red{background:var(--term-red)}.swatch__c--term-blue{background:var(--term-blue)}.swatch__c--dot-amber{background:var(--dot-amber)}.swatch__c--dot-green{background:var(--dot-green)}
.scale__s--hero{font-size:var(--fs-hero)}.scale__s--h1{font-size:var(--fs-h1)}.scale__s--h2{font-size:var(--fs-h2)}.scale__s--h3{font-size:var(--fs-h3)}