/* docs.css — anatomy/library page chrome. Not part of the sellable component set. */
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--s6)}
main.wrap{display:block}

.theme-btn{
  font:400 var(--t1)/1 var(--font-mono);letter-spacing:.08em;
  background:transparent;color:var(--fg-muted);
  border:var(--hair);border-radius:var(--r1);
  padding:var(--s1) var(--s2);white-space:nowrap;cursor:pointer;
  transition:border-color var(--d1) var(--ease),color var(--d1) var(--ease);
}
.theme-btn:hover{border-color:var(--fg);color:var(--fg)}

/* page head */
.crumb{font:400 var(--t1)/1 var(--font-mono);letter-spacing:.1em;color:var(--fg-muted);margin-bottom:var(--s4);text-transform:uppercase}
.crumb a:hover{color:var(--accent)}
.crumb .here{color:var(--accent)}
.page-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6);padding:var(--s12) 0 var(--s8) 0;border-bottom:var(--hair)}
.page-head__main{grid-column:1 / span 8}
.page-head h1{margin:0;font-size:var(--t6);font-weight:600;letter-spacing:-.02em;text-wrap:balance}
.page-head .lede{max-width:52ch;color:var(--fg-muted);font-size:var(--t3);line-height:1.6;text-wrap:pretty}
.meta-rail{grid-column:10 / span 3;font-family:var(--font-mono);font-size:var(--t1);border-top:1px solid var(--line-strong);align-self:start}
.meta-rail>div{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s2) 0;border-bottom:var(--hair)}
.meta-rail .k{color:var(--fg-faint)}

/* sections */
.sec{padding:var(--s8) 0;border-bottom:var(--hair)}
.sec--last{border-bottom:none;padding-bottom:var(--s16)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.sec-label{font:400 var(--t1)/1.5 var(--font-mono);letter-spacing:.1em;color:var(--fg-muted);text-transform:uppercase}
.sec-note{font:400 var(--t1)/1.5 var(--font-mono);color:var(--fg-faint)}
.sec-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6);padding:var(--s8) 0;border-bottom:var(--hair)}
.sec-cols>.half{grid-column:span 6}
.sec-cols.sec--last{border-bottom:none;padding-bottom:var(--s16)}

/* 01 — state specimen grid */
.stategrid{display:grid;border:var(--hair);overflow-x:auto}
.stategrid>div{padding:var(--s4) var(--s3);border-bottom:var(--hair);border-left:var(--hair);display:flex;align-items:center;min-width:0}
.stategrid>.gh{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-strong);border-left:none;font:400 var(--t1)/1.4 var(--font-mono);color:var(--fg-faint);text-transform:uppercase;letter-spacing:.06em}
.stategrid>.rowlab{border-left:none;font:400 var(--t1)/1.4 var(--font-mono);letter-spacing:.06em}
.stategrid>.na{font:400 var(--t1)/1.4 var(--font-mono);color:var(--fg-faint)}
.stategrid>.last{border-bottom:none}
.specimen-note{margin-top:var(--s3);font:400 var(--t1)/1.6 var(--font-mono);color:var(--fg-faint)}

/* 02 — exploded anatomy */
.anatomy{border:var(--hair);background:var(--bg-inset);padding:var(--s12) var(--s6);display:flex;flex-direction:column;align-items:stretch;gap:0}
.anatomy__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s6);padding:var(--s6) 0}
.anatomy__row+.anatomy__row{border-top:1px dashed var(--line)}
.anatomy__layer{justify-self:center;display:flex;align-items:center;justify-content:center}
.anatomy__call{font:400 var(--t1)/1.6 var(--font-mono)}
.anatomy__call .n{color:var(--accent)}
.anatomy__call .d{color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em}
.anatomy__call--l{text-align:right;justify-self:end;border-bottom:1px solid var(--fg-faint);padding-bottom:var(--s1)}
.anatomy__call--r{text-align:left;justify-self:start;border-bottom:1px solid var(--fg-faint);padding-bottom:var(--s1)}
.anatomy__fig{font:400 var(--t1)/1.5 var(--font-mono);color:var(--fg-faint);margin-top:var(--s4)}
@media (max-width:639px){
  .anatomy__row{grid-template-columns:1fr;gap:var(--s3)}
  .anatomy__call--l,.anatomy__call--r{text-align:left;justify-self:start}
}

/* 03/05/06 — key-value spec tables (mono) */
.kv{font-family:var(--font-mono);font-size:var(--t1)}
.kv__row{display:grid;gap:var(--s4);padding:var(--s2) 0;border-bottom:var(--hair);line-height:1.7}
.kv--3 .kv__row{grid-template-columns:1.2fr 1fr 1fr}
.kv--2 .kv__row{grid-template-columns:120px 1fr}
.kv__row--head{border-bottom:1px solid var(--line-strong);color:var(--fg-faint);text-transform:uppercase;letter-spacing:.06em}
.kv .p{color:var(--fg-muted)}
.kv .t{color:var(--accent)}
.kv .b{color:var(--accent)}
.kv .k{color:var(--fg-faint)}
@media (max-width:639px){.kv--3 .kv__row{grid-template-columns:1fr 1fr 1fr;gap:var(--s2)}}

/* 04 — code block */
.codeblock{margin:0;border:var(--hair);background:var(--bg-inset);padding:var(--s4);font:400 var(--t1)/1.7 var(--font-mono);overflow-x:auto;color:var(--fg-muted);white-space:pre}
.copy-btn{
  font:400 var(--t1)/1 var(--font-mono);letter-spacing:.08em;
  background:transparent;color:var(--fg-muted);
  border:1px solid var(--line-strong);border-radius:var(--r1);
  padding:var(--s1) var(--s3);cursor:pointer;
  transition:all var(--d1) var(--ease);
}
.copy-btn:hover{border-color:var(--accent);color:var(--accent)}
.copy-btn.copied{color:var(--accent);border-color:var(--accent)}

/* index page bits */
.manifest-head,.manifest-row{display:grid;grid-template-columns:88px 1.4fr 2fr 140px 24px;gap:var(--s4);align-items:baseline}
.manifest-head{padding:var(--s2) 0;font:400 var(--t1)/1.4 var(--font-mono);letter-spacing:.06em;color:var(--fg-faint);border-bottom:1px solid var(--line-strong);text-transform:uppercase}
.manifest-row{padding:var(--s4) 0;border-bottom:var(--hair);transition:background var(--d1) var(--ease)}
a.manifest-row:hover{background:var(--bg-inset)}
.manifest-row .id{font:400 var(--t1)/1.4 var(--font-mono)}
.manifest-row .nm{font-weight:600;font-size:var(--t3)}
.manifest-row .nt{color:var(--fg-muted);font-size:var(--t2)}
.manifest-row .st{font:400 var(--t1)/1.4 var(--font-mono)}
.manifest-row.q{pointer-events:none}
.manifest-row.q .nm,.manifest-row.q .nt{opacity:.45}
.manifest-row.q .id,.manifest-row.q .st{color:var(--fg-faint)}
.manifest-row.f .id,.manifest-row.f .st{color:var(--accent)}
.inv{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--hair);border-left:var(--hair)}
.inv a,.inv span.cell{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-right:var(--hair);border-bottom:var(--hair);font:400 var(--t1)/1.4 var(--font-mono);transition:background var(--d1) var(--ease)}
.inv a{color:var(--fg)}
.inv a:hover{background:var(--bg-inset);color:var(--accent)}
.inv a .mk{color:var(--accent)}
.inv span.cell{color:var(--fg-faint)}
.inv span.cell .mk{color:var(--fg-faint)}
@media (max-width:1023px){.inv{grid-template-columns:repeat(2,1fr)}}

/* system page bits */
.ramp{display:grid;border:var(--hair)}
.ramp>div{border-right:var(--hair)}
.ramp .sw{height:var(--s16)}
.ramp .lb{padding:var(--s2);font:400 var(--t1)/1.5 var(--font-mono);border-top:var(--hair)}
.ramp .lb .hex{color:var(--fg-faint)}
.specimen-row{display:grid;grid-template-columns:120px 80px 1fr;gap:var(--s6);align-items:baseline;padding:var(--s3) 0;border-bottom:var(--hair)}
.specimen-row .tok{font:400 var(--t1)/1.4 var(--font-mono);color:var(--accent)}
.specimen-row .px{font:400 var(--t1)/1.4 var(--font-mono);color:var(--fg-faint)}

/* responsive page chrome */
@media (max-width:1023px){
  .page-head__main{grid-column:1 / -1}
  .meta-rail{grid-column:1 / span 6}
  .sec-cols>.half{grid-column:1 / -1}
}
@media (max-width:639px){
  .manifest-head{display:none}
  .manifest-row{grid-template-columns:88px 1fr;grid-auto-rows:auto}
  .manifest-row .nt{grid-column:2}
  .meta-rail{grid-column:1 / -1}
}

/* sticky demo bar */
body{padding-bottom:var(--s24)}
.demo-bar{
  position:fixed;bottom:var(--s4);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:center;
  background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--r2);
  padding:var(--s2) var(--s3);z-index:90;
  font-family:var(--font-mono);font-size:var(--t1);
  max-width:calc(100vw - var(--s6));
}
.db-skins{display:flex;gap:var(--s1);flex-wrap:wrap}
.db-skin{
  background:none;border:var(--hair);border-radius:var(--r1);
  padding:var(--s1) var(--s2);cursor:pointer;color:var(--fg-muted);
  font-family:var(--font-mono);font-size:var(--t1);letter-spacing:.06em;
  transition:all var(--d1) var(--ease);
}
.db-skin:hover{border-color:var(--accent);color:var(--accent)}
.db-skin[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.db-pages{position:relative}
.db-pages summary{
  cursor:pointer;list-style:none;letter-spacing:.08em;color:var(--fg-muted);
  padding:var(--s1) var(--s2);border:var(--hair);border-radius:var(--r1);
}
.db-pages summary::-webkit-details-marker{display:none}
.db-pages summary:hover{border-color:var(--accent);color:var(--accent)}
.db-pages[open] summary{color:var(--accent);border-color:var(--accent)}
.db-pages nav{
  position:absolute;bottom:calc(100% + var(--s2));left:0;
  background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--r1);
  padding:var(--s2);display:flex;flex-direction:column;min-width:200px;
}
.db-pages nav a{padding:var(--s1) var(--s2);color:var(--fg-muted);letter-spacing:.06em}
.db-pages nav a:hover{color:var(--accent)}
.db-pages nav a[aria-current="page"]{color:var(--accent)}
.db-buy{white-space:nowrap}
@media (max-width:639px){.demo-bar{bottom:0;left:0;right:0;transform:none;max-width:none;border-radius:0;border-inline:none;border-bottom:none}}