/* RJ DTC Admin design system docs: the ONE stylesheet for /docs/. GENERATED by phase-4/src/build_site.py.
   1. the shared shell (dx-*), from build_patterns_impl.py
   2. the Foundations content styles, scoped to body[data-sec=foundations]
   3. the Components content styles, scoped to body[data-sec=components]
   Tokens only. Desktop and phone are chosen by body class (.kit-d / .kit-m), never a width query. */

.dx{background:hsl(var(--background))}
.kit-top .r a{display:inline-flex;align-items:center;gap:var(--s-1)}
.dx code{font-family:var(--font-code);font-size:.92em}
.dx p code,.dx li code,.dx td code,.dx .dx-kv code,.dx .dx-note code{background:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:var(--r-chip);padding:0 var(--s-1);overflow-wrap:anywhere}
.dx .q{color:hsl(var(--muted-foreground))}

/* ---------- top bar (desktop) ---------- */
.dx-top{position:sticky;top:0;z-index:var(--z-pop);height:var(--topbar-h);display:flex;align-items:center;gap:var(--s-6);padding:0 var(--s-6);
  border-bottom:1px solid hsl(var(--border));background:hsl(var(--background)/.92);backdrop-filter:blur(var(--actbar-blur))}
.dx-brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;font:var(--w-semibold) var(--text-card)/1 var(--font-title);white-space:nowrap}
.dx-brand .q{font-weight:var(--w-regular)}
.dx-mark{width:28px;height:28px;flex:none;border-radius:var(--r-control);display:grid;place-items:center;background:var(--sidebar-sheen);
  color:hsl(var(--sidebar-accent-foreground));font:var(--w-bold) var(--text-micro)/1 var(--font-title);text-decoration:none;box-shadow:var(--e-btn)}
.dx a.dx-mark{color:hsl(var(--sidebar-accent-foreground))}
.dx-top-r{margin-left:auto;display:flex;gap:var(--s-3);align-items:center}
.dx-search{position:relative;display:flex;align-items:center}
.kit-d .dx-search{width:360px}
.dx-search .input{padding-left:var(--s-8);padding-right:var(--s-8)}
.dx-search-i{position:absolute;left:var(--s-3);color:hsl(var(--muted-foreground));display:grid;pointer-events:none}
.dx-search kbd{position:absolute;right:var(--s-2)}
.dx-results{position:absolute;top:calc(100% + var(--s-1));left:0;right:0;z-index:var(--z-pop);max-height:420px;overflow-y:auto}
.dx-results a{height:auto;min-height:var(--control-h-sm);padding:var(--s-2);flex-direction:column;align-items:flex-start;gap:2px;white-space:normal}
.dx-results a small{font:var(--w-regular) var(--text-small)/1.3 var(--font-ui);color:hsl(var(--muted-foreground))}
.dx-results .none{padding:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* ---------- three-column desktop grid ---------- */
.dx-grid{display:grid;grid-template-columns:264px minmax(0,1fr) 224px;max-width:var(--vp-desktop);margin:0 auto}
.dx-rail{display:flex;flex-direction:column;gap:2px}
.kit-d .dx-rail{position:sticky;top:var(--topbar-h);align-self:start;max-height:calc(100vh - var(--topbar-h));overflow-y:auto;
  padding:var(--s-8) var(--s-4) var(--s-10);border-right:1px solid hsl(var(--border))}
.dx-rail a{display:flex;align-items:center;min-height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-control);text-decoration:none;
  font:var(--w-medium) var(--text-body)/1.25 var(--font-title);color:hsl(var(--muted-foreground));transition:background-color var(--motion-hover),color var(--motion-hover)}
.dx-rail a:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.dx-rail .dx-sec-l{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
.dx-rail .dx-sec-l.on{background:hsl(var(--muted))}
.dx-sub{display:flex;flex-direction:column;gap:2px;margin:var(--s-1) 0 var(--s-2) var(--s-3);padding-left:var(--s-2);border-left:1px solid hsl(var(--border))}
.dx-rail a[aria-current=page]{background:hsl(var(--accent));color:hsl(var(--accent-foreground));font-weight:var(--w-semibold)}
.dx-main{min-width:0;padding:var(--s-8) var(--s-12) var(--s-18)}
.dx-doc{max-width:860px}
.dx-lede{margin-top:var(--s-3);color:hsl(var(--muted-foreground))}
.dx-toc{position:sticky;top:var(--topbar-h);align-self:start;display:flex;flex-direction:column;gap:2px;padding:var(--s-10) var(--s-4) var(--s-6) 0;
  max-height:calc(100vh - var(--topbar-h));overflow-y:auto}
.dx-toc b{font:var(--w-semibold) var(--text-micro)/1 var(--font-title);color:hsl(var(--muted-foreground));margin-bottom:var(--s-2)}
.dx-toc a{font-size:var(--text-small);line-height:1.35;padding:var(--s-1) var(--s-3);border-left:2px solid hsl(var(--border));color:hsl(var(--muted-foreground));text-decoration:none}
.dx-toc a:hover{color:hsl(var(--foreground))}
.dx-toc a.on{color:hsl(var(--foreground));border-left-color:hsl(var(--primary));font-weight:var(--w-medium)}

/* ---------- content ---------- */
.dx-sec{margin-top:var(--s-12);scroll-margin-top:calc(var(--topbar-h) + var(--s-4))}
.dx-h2{font:var(--w-semibold) var(--text-hero)/var(--lh-page) var(--font-title);letter-spacing:var(--tr-page);font-stretch:var(--font-stretch-title);margin-bottom:var(--s-4)}
.kit-d .dx-h2{font-size:var(--text-page)}
.dx-h2 a{text-decoration:none}
.dx-h2 a:hover{text-decoration:underline;text-decoration-color:hsl(var(--border))}
.dx-h3{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-title);letter-spacing:var(--tr-section);margin:var(--s-6) 0 var(--s-2);scroll-margin-top:calc(var(--topbar-h) + var(--s-4))}
.dx-sec>p,.dx-sec .dx-ul,.dx-sec .dx-ol{font-size:var(--text-read);line-height:var(--lh-read);max-width:72ch}
.dx-sec>p+p,.dx-sec>p+.dx-ul,.dx-sec>.dx-ul+p{margin-top:var(--s-3)}
.dx-ul,.dx-ol{padding-left:var(--s-5);display:flex;flex-direction:column;gap:var(--s-1);margin:var(--s-3) 0}
.dx-sec>*+.spec,.dx-sec>*+.dx-tw,.dx-sec>*+.dx-code,.dx-sec>*+.dx-note,.dx-sec>*+.dx-cards{margin-top:var(--s-4)}
.dx-sec>.spec+*,.dx-sec>.dx-tw+*,.dx-sec>.dx-code+*,.dx-sec>.dx-note+*,.dx-sec>.dx-cards+*{margin-top:var(--s-4)}
.dx-surf{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-top:var(--s-4);font-size:var(--text-small)}
.dx-surf b{font:var(--w-semibold) var(--text-small)/1 var(--font-title);color:hsl(var(--muted-foreground));margin-right:var(--s-1)}
.dx-surf a.chip{text-decoration:none;color:hsl(var(--foreground))}
.dx-surf a.chip:hover{background:hsl(var(--accent))}

/* tables */
.dx-tw{overflow-x:auto;border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.dx-t{width:100%;font-size:var(--text-body)}
.dx-t th{height:var(--row-th);padding:0 var(--s-3);text-align:left;background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border));
  font:var(--w-semibold) var(--text-micro)/1.2 var(--font-title);color:hsl(var(--muted-foreground));white-space:nowrap}
.dx-t td{padding:var(--s-2) var(--s-3);border-bottom:1px solid hsl(var(--border));vertical-align:top;line-height:1.45}
.dx-t tr:last-child td{border-bottom:0}
.dx-t td:first-child{white-space:nowrap}
.dx-t .chip{vertical-align:middle}
.dx .dx-t td code{overflow-wrap:normal;white-space:nowrap}
.dx .dx-t td:last-child code,.dx .dx-t td:nth-child(2) code{white-space:normal;overflow-wrap:break-word}
.dx-res{font-size:var(--text-micro);color:hsl(var(--muted-foreground));margin-top:2px;font-family:var(--font-code)}
.dx-tokname{display:inline-flex;align-items:center;gap:var(--s-2)}
.dx-sw{width:16px;height:16px;flex:none;border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.12);display:inline-block}
.dx-cp{width:1%;text-align:right}

/* notes */
.dx-note{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-radius:var(--r-card);font-size:var(--text-body);line-height:1.5;
  background:hsl(var(--info)/.07);border:1px solid hsl(var(--info)/.25)}
.dx-note>svg{flex:none;margin-top:2px;color:hsl(var(--info))}
.dx-note b{font-family:var(--font-title);font-weight:var(--w-semibold)}
.dx-note.rule{background:hsl(var(--primary)/.04);border-color:hsl(var(--primary)/.18)}
.dx-note.rule>svg{color:hsl(var(--primary))}
.dx-note.warning{background:hsl(var(--warning)/.07);border-color:hsl(var(--warning)/.3)}
.dx-note.warning>svg{color:hsl(var(--warning))}
.dx-note.open{background:hsl(var(--muted));border-style:dashed;border-color:hsl(var(--secondary-border))}
.dx-note.open>svg{color:hsl(var(--muted-foreground))}

/* code */
.dx-code{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--muted)/.6);overflow:hidden}
.dx-code-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);height:var(--control-h-sm);padding:0 var(--s-2) 0 var(--s-3);
  border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));font:var(--w-medium) var(--text-small)/1 var(--font-code);color:hsl(var(--muted-foreground))}
.dx-code pre{margin:0;padding:var(--s-3) var(--s-4);overflow:auto;max-height:560px;font:var(--w-regular) var(--text-code)/1.6 var(--font-code);tab-size:2}
.dx-code pre code{font-size:inherit;background:none;border:0;padding:0}
.dx-copy{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 var(--s-2);border-radius:var(--r-control);color:hsl(var(--muted-foreground));
  font:var(--w-medium) var(--text-small)/1 var(--font-title);transition:background-color var(--motion-hover),color var(--motion-hover)}
.dx-copy:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.dx-copy.done{color:hsl(var(--success))}

/* demos */
.dx-demo .spec-body{overflow-x:auto}
.dx-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.dx-col{display:flex;flex-direction:column;gap:var(--s-3)}
.dx-stack{display:flex;flex-direction:column;gap:var(--s-2)}
.dx-mini{max-width:420px}
.dx-chiprow{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.dx-cap{font-size:var(--text-micro);color:hsl(var(--muted-foreground));font-family:var(--font-code)}

/* checklist */
.dx-check{list-style:none;display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-3) 0}
.dx-check label{display:flex;gap:var(--s-3);align-items:flex-start;font-size:var(--text-read);line-height:var(--lh-read);cursor:pointer}
.dx-check .cb{margin-top:4px}

/* previous / next */
.dx-pn{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-16);padding-top:var(--s-6);border-top:1px solid hsl(var(--border))}
.dx-pn-a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);
  text-decoration:none;font:var(--w-semibold) var(--text-card)/1.2 var(--font-title);transition:border-color var(--motion-hover),box-shadow var(--motion-hover)}
.dx-pn-a small{width:100%;font:var(--w-regular) var(--text-micro)/1 var(--font-ui);color:hsl(var(--muted-foreground))}
.dx-pn-a.r{text-align:right;justify-content:flex-end}
.dx-pn-a:hover{border-color:hsl(var(--secondary-border-hover));box-shadow:var(--e-card-hover)}

/* section index cards */
.dx-idx{display:grid;gap:var(--s-4);margin-top:var(--s-6)}
.kit-d .dx-idx{grid-template-columns:repeat(2,minmax(0,1fr))}
.dx-idx a{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));
  text-decoration:none;box-shadow:var(--e-1)}
.dx-idx a b{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-title);letter-spacing:var(--tr-section)}
.dx-idx a span{font-size:var(--text-body);color:hsl(var(--muted-foreground));line-height:1.5}
.dx-idx a em{font-style:normal;font-size:var(--text-micro);color:hsl(var(--muted-foreground));font-family:var(--font-code)}

/* toaster */
.dx-toaster{position:fixed;right:var(--s-4);bottom:var(--s-4);width:340px;z-index:var(--z-toast)}
.kit-m .dx-toaster{left:var(--s-4);right:var(--s-4);width:auto;bottom:calc(var(--control-h-m-lg) + var(--s-8))}

/* ---------- phone composition ---------- */
.dx-mwrap{max-width:var(--vp-phone);margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.dx-pbar{position:sticky;top:0;z-index:var(--z-pop);background:hsl(var(--background)/.94);backdrop-filter:blur(var(--actbar-blur))}
.dx-pbar-t{flex:1;min-width:0}
.dx-mmain{flex:1;padding:var(--s-4) var(--s-4) var(--s-10);min-width:0}
.dx-mcrumb{display:flex;align-items:center;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-3)}
.dx-mcrumb a{color:inherit}
.dx-mcrumb .dx-desk{margin-left:auto;display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--control-h-m);text-decoration:none}
.kit-m .kit-h1{font-size:var(--text-page);line-height:var(--lh-page);letter-spacing:var(--tr-page)}
.kit-m .dx-sec{margin-top:var(--s-10);scroll-margin-top:calc(var(--pbar-h) + var(--s-3))}
.kit-m .dx-h2{font-size:var(--text-step-m);line-height:var(--lh-section)}
.kit-m .dx-sec>p,.kit-m .dx-ul,.kit-m .dx-ol{font-size:var(--text-input-m);line-height:var(--lh-read)}
.kit-m .dx-code pre{max-height:420px}
.dx-otp{margin-top:var(--s-5);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.dx-otp summary{display:flex;align-items:center;justify-content:space-between;min-height:var(--control-h-m);padding:0 var(--s-4);cursor:pointer;
  font:var(--w-semibold) var(--text-card)/1 var(--font-title);list-style:none}
.dx-otp summary::-webkit-details-marker{display:none}
.dx-otp summary .q{font:var(--w-regular) var(--text-small)/1 var(--font-ui)}
.dx-otp nav{display:flex;flex-direction:column;border-top:1px solid hsl(var(--border))}
.dx-otp nav a{display:flex;align-items:center;min-height:var(--control-h-m);padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border));text-decoration:none;font-size:var(--text-read)}
.dx-otp nav a:last-child{border-bottom:0}
.dx-cards{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.dx-card{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.dx-cards.tok{gap:0;border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card))}
.dx-cards.tok .dx-card{border:0;border-bottom:1px solid hsl(var(--border));border-radius:0;background:none;padding:var(--s-2) var(--s-3);gap:2px}
.dx-cards.tok .dx-card:last-child{border-bottom:0}
.dx .dx-cards.tok .dx-card-h code{background:none;border:0;padding:0;font-weight:var(--w-medium)}
.dx-cards.tok .dx-copy{height:36px}
.dx-card-t{font:var(--w-semibold) var(--text-read)/1.35 var(--font-title)}
.dx-card-h{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.dx-card-h code{flex:1;min-width:0;overflow-wrap:anywhere}
.dx-card-v{font-size:var(--text-small);overflow-wrap:anywhere}
.dx-card-n{font-size:var(--text-small);line-height:1.45}
.dx-kv{display:grid;grid-template-columns:var(--kv-label-m) minmax(0,1fr);gap:var(--s-3);font-size:var(--text-body);line-height:1.45}
.dx-kv>span{color:hsl(var(--muted-foreground))}
.dx-kv>div{min-width:0;overflow-wrap:anywhere}
.dx-actbar{gap:var(--s-2)}
.dx-actbar .dx-prev{flex:none;width:var(--control-h-m-lg);padding:0}
.dx-msheet{max-height:88%}
.dx-msheet-h{display:flex;align-items:center;justify-content:space-between;padding:var(--s-1) var(--s-4) var(--s-2);font:var(--w-semibold) var(--text-section)/1 var(--font-title)}
.dx-msheet .k-sheet-b{padding:0 var(--s-4) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.dx-mrail a{min-height:var(--control-h-m);font-size:var(--text-read)}
.kit-m .dx-results{position:static;margin-top:var(--s-2);box-shadow:none}
.kit-m .dx-search{flex-direction:column;align-items:stretch}
.kit-m .dx-search-i{top:15px}
.kit-m .dx-copy{height:var(--control-h-m);padding:0 var(--s-3)}
.kit-m .dx-idx a{padding:var(--s-4)}

/* ---------- unified site additions (build_site.py) ---------- */
.dx-toplink{display:inline-flex;align-items:center;gap:var(--s-1);font:var(--w-medium) var(--text-small)/1 var(--font-title);color:hsl(var(--muted-foreground));text-decoration:none}
.dx-toplink:hover{color:hsl(var(--foreground))}
.dx-rail .dx-n{margin-left:auto;font:var(--w-regular) var(--text-micro)/1 var(--font-code);color:hsl(var(--muted-foreground))}
.dx-grp{display:block;padding:var(--s-3) var(--s-3) var(--s-1);font:var(--w-semibold) var(--text-micro)/1 var(--font-title);color:hsl(var(--muted-foreground))}
.dx-doc.wide{max-width:none}
.dx-results a{text-decoration:none}
.dx-ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dx-actbar .btn-primary{flex:1;min-width:0}
.dx-lead{font-size:var(--text-read);line-height:var(--lh-read);max-width:72ch;margin-top:var(--s-3)}
.dx-pill{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--chip-h);padding:0 var(--s-2);border-radius:var(--r-chip);background:hsl(var(--muted));
  font:var(--w-medium) var(--text-micro)/1 var(--font-code);color:hsl(var(--muted-foreground))}
.dx-prin{display:grid;gap:var(--s-3)}
.kit-d .dx-prin{grid-template-columns:repeat(2,minmax(0,1fr))}
.dx-prin>div{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));padding:var(--s-4) var(--s-5)}
.dx-prin b{display:block;font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-title);letter-spacing:var(--tr-section);margin-bottom:var(--s-1)}
.dx-prin p{font-size:var(--text-body);line-height:1.5;color:hsl(var(--muted-foreground))}
.dx-surfgrid{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.kit-d .dx-surfgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.dx-sf{display:flex;flex-direction:column;border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));overflow:hidden;box-shadow:var(--e-1)}
.dx-sf img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border))}
.dx-sf .b{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3) var(--s-4)}
.dx-sf .b b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-title)}
.dx-sf .b code{font-size:var(--text-micro);color:hsl(var(--muted-foreground));overflow-wrap:anywhere}
.dx-sf .l{display:flex;gap:var(--s-3);padding:0 var(--s-4) var(--s-3);font-size:var(--text-small)}
.dx-sf .l a{display:inline-flex;align-items:center;gap:var(--s-1)}
.kit-m .dx-sf .l a{min-height:var(--control-h-m)}
.kit-m .dx-mmain .dc-mmain{padding:0}
/* one ground for every section: the Components content was authored on the canvas grey; the site is white */
body.dx.kit[data-sec]{background:hsl(var(--background))}
.kit-m .dx-sf{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto}
.kit-m .dx-sf>a:first-child{grid-row:1/3}
.kit-m .dx-sf img{width:64px;height:100%;min-height:112px;aspect-ratio:auto;border-bottom:0;border-right:1px solid hsl(var(--border))}
.kit-m .dx-sf .b{padding:var(--s-3) var(--s-3) var(--s-1)}
.kit-m .dx-sf .l{padding:0 var(--s-3) var(--s-1)}

/* ---------- 2 · Foundations content (scoped) ---------- */
.dc[data-sec=foundations]{background:hsl(var(--canvas))}
.kit-d[data-sec=foundations] .dc-layout{display:grid;grid-template-columns:calc(var(--sidebar-w) - var(--s-8)) minmax(0,1fr) calc(var(--sidebar-w) - var(--s-12));gap:var(--s-8);align-items:start}
[data-sec=foundations] .dc-rail,[data-sec=foundations] .dc-toc{position:sticky;top:var(--s-6);display:flex;flex-direction:column;gap:2px;font-size:var(--text-body)}
[data-sec=foundations] .dc-rail h2,[data-sec=foundations] .dc-toc h2{font:var(--w-semibold) var(--text-micro)/1.2 var(--font-voice);color:hsl(var(--muted-foreground));margin:0 0 var(--s-2) var(--s-3)}
[data-sec=foundations] .dc-rail a,[data-sec=foundations] .dc-toc a{display:flex;align-items:center;gap:var(--s-2);min-height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-control); color:hsl(var(--muted-foreground));text-decoration:none;transition:background-color var(--motion-hover),color var(--motion-hover)}
[data-sec=foundations] .dc-rail a:hover,[data-sec=foundations] .dc-toc a:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
[data-sec=foundations] .dc-rail a[aria-current=page]{background:hsl(var(--card));color:hsl(var(--foreground));font-weight:var(--w-semibold);box-shadow:var(--e-1),0 0 0 1px hsl(var(--border))}
[data-sec=foundations] .dc-rail a em{margin-left:auto;font:normal var(--text-micro)/1 var(--font-ui);font-variant-numeric:tabular-nums}
[data-sec=foundations] .dc-toc a{min-height:var(--chip-h-lg);font-size:var(--text-small);border-left:2px solid hsl(var(--border));border-radius:0 var(--r-control) var(--r-control) 0}
[data-sec=foundations] .dc-toc a.on{border-left-color:hsl(var(--primary));color:hsl(var(--foreground))}
[data-sec=foundations] .dc-main{min-width:0}
[data-sec=foundations] .dc-main .kit-head{margin-bottom:var(--s-8)}
[data-sec=foundations] .dc-p{font-size:var(--text-read);line-height:var(--lh-read);max-width:72ch;margin:0 2px}
.kit-m[data-sec=foundations] .dc-p{font-size:var(--text-body);line-height:var(--lh-body)}
[data-sec=foundations] .dc-p code,[data-sec=foundations] .dc-li code,[data-sec=foundations] .dc-tbl td code,[data-sec=foundations] .dc-flag code,[data-sec=foundations] .dc-mr code{font-size:var(--text-code);background:hsl(var(--muted));padding:1px var(--s-1);border-radius:var(--r-chip);overflow-wrap:anywhere}
[data-sec=foundations] .dc-ul{margin:0 2px 0 var(--s-5);display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--text-body);line-height:var(--lh-body);max-width:80ch}
[data-sec=foundations] .dc-sub{font:var(--w-semibold) var(--text-card)/var(--lh-card) var(--font-voice);margin:0 2px}
[data-sec=foundations] .kit-sec+.kit-sec{padding-top:var(--s-2)}
[data-sec=foundations] .kit-sec>*+*:not(header){margin-top:var(--s-4)}
[data-sec=foundations] .kit-sec>.dc-sub{margin-top:var(--s-6)}
[data-sec=foundations] .kit-sec>header+*{margin-top:0}
[data-sec=foundations] .dc-tw{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-frame);overflow-x:auto}
[data-sec=foundations] .dc-tbl{width:100%;font-size:var(--text-body)}
[data-sec=foundations] .dc-tbl th:first-child,[data-sec=foundations] .dc-tbl td:first-child{padding-left:var(--s-4)}
[data-sec=foundations] .dc-tbl th{height:var(--row-th);padding:0 var(--s-3);text-align:left;background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border)); font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground));white-space:nowrap}
[data-sec=foundations] .dc-tbl td{padding:var(--s-2) var(--s-3);border-bottom:1px solid hsl(var(--border));vertical-align:middle;min-height:var(--row)}
[data-sec=foundations] .dc-tbl tr:last-child td{border-bottom:0}
[data-sec=foundations] .dc-tbl td.dc-w{color:hsl(var(--muted-foreground));font-size:var(--text-small);line-height:1.4;min-width:calc(var(--sidebar-w) - var(--s-8))}
[data-sec=foundations] .dc-tbl .num{white-space:nowrap}
[data-sec=foundations] .dc-tbl.dc-fixed{table-layout:fixed}
.kit-d[data-sec=foundations] .dc-tbl.dc-fixed .dc-c code:not(.long){white-space:normal;overflow-wrap:break-word}
[data-sec=foundations] .dc-tbl.dc-fixed td.dc-w{min-width:0}
[data-sec=foundations] .dc-mt{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-frame);overflow:hidden}
[data-sec=foundations] .dc-mr{padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
[data-sec=foundations] .dc-mr:last-child{border-bottom:0}
[data-sec=foundations] .dc-mr-h{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;font-weight:var(--w-semibold);margin-bottom:var(--s-1)}
[data-sec=foundations] .dc-mr dl{display:flex;flex-direction:column;gap:2px;margin:0}
[data-sec=foundations] .dc-mr dl>div{display:grid;grid-template-columns:var(--kv-label-m) minmax(0,1fr);gap:var(--s-2);font-size:var(--text-small);align-items:start;min-height:var(--chip-h-lg)}
[data-sec=foundations] .dc-mr dt{color:hsl(var(--muted-foreground));padding-top:var(--s-1)}
[data-sec=foundations] .dc-mr dd{margin:0;min-width:0;overflow-wrap:anywhere;padding-top:var(--s-1)}
[data-sec=foundations] .dc-c{display:inline-flex;align-items:center;gap:2px;max-width:100%;min-width:0;vertical-align:middle}
[data-sec=foundations] .dc-c code{font:var(--w-regular) var(--text-code)/1.35 var(--font-code);color:hsl(var(--foreground));overflow-wrap:anywhere;min-width:0}
.kit-d[data-sec=foundations] .dc-tbl .dc-c code:not(.long){white-space:nowrap;overflow-wrap:normal}
[data-sec=foundations] .dc-cp{flex:none;width:var(--control-h-xs);height:var(--control-h-xs);display:inline-grid;place-items:center;border-radius:var(--r-control);color:hsl(var(--muted-foreground)); transition:background-color var(--motion-hover),color var(--motion-hover),transform var(--motion-press)}
[data-sec=foundations] .dc-cp:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
[data-sec=foundations] .dc-cp:active{transform:translateY(var(--press-shift))}
[data-sec=foundations] .dc-cp:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:0}
[data-sec=foundations] .dc-cp.done{color:hsl(var(--success))}
.kit-m[data-sec=foundations] .dc-cp{width:var(--control-h-m);height:var(--control-h-m);margin:calc(var(--s-2) * -1) calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0}
[data-sec=foundations] .dc-sw{display:inline-block;width:var(--control-h-sm);height:var(--control-h-xs);border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px hsl(var(--foreground) / .1);flex:none;vertical-align:middle}
[data-sec=foundations] .dc-sw.lg{width:100%;height:var(--s-16);border-radius:var(--r-control)}
[data-sec=foundations] .dc-code{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-frame);overflow:hidden}
[data-sec=foundations] .dc-code header{display:flex;align-items:center;gap:var(--s-2);height:var(--row-th);padding:0 var(--s-2) 0 var(--s-4);background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border)); font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground))}
[data-sec=foundations] .dc-code header .dc-cp{margin-left:auto}
[data-sec=foundations] .dc-code pre{margin:0;padding:var(--s-3) var(--s-4);overflow-x:auto;font:var(--w-regular) var(--text-code)/1.6 var(--font-code);color:hsl(var(--foreground));tab-size:2}
.kit-m[data-sec=foundations] .dc-code pre{white-space:pre-wrap;overflow-wrap:anywhere}
[data-sec=foundations] .dc-flag{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border-radius:var(--r-card);border:1px dashed hsl(var(--not-wired) / .55); background:hsl(var(--not-wired) / .05);font-size:var(--text-body);line-height:var(--lh-body)}
[data-sec=foundations] .dc-flag>svg{color:hsl(var(--warning));margin-top:2px}
[data-sec=foundations] .dc-flag b{font-weight:var(--w-semibold)}
[data-sec=foundations] .dc-dd{display:grid;gap:var(--s-4)}
.kit-d[data-sec=foundations] .dc-dd{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-sec=foundations] .dc-dd>div{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-frame);padding:var(--s-4) var(--s-5);border-top:3px solid hsl(var(--success))}
[data-sec=foundations] .dc-dd>div.dont{border-top-color:hsl(var(--destructive))}
[data-sec=foundations] .dc-dd h3{display:flex;align-items:center;gap:var(--s-2);font:var(--w-semibold) var(--text-card)/var(--lh-card) var(--font-voice);margin-bottom:var(--s-2)}
[data-sec=foundations] .dc-dd ul{margin-left:var(--s-5);display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--text-body)}
[data-sec=foundations] .dc-cards{display:grid;gap:var(--s-4)}
.kit-d[data-sec=foundations] .dc-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-sec=foundations] .dc-card{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-frame); text-decoration:none;color:inherit;min-height:var(--s-16)}
[data-sec=foundations] .dc-card b{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
[data-sec=foundations] .dc-card p{color:hsl(var(--muted-foreground));font-size:var(--text-body)}
[data-sec=foundations] .dc-card .chip{align-self:flex-start;margin-top:auto}
[data-sec=foundations] .dc-stats{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-8);margin-bottom:var(--s-8)}
[data-sec=foundations] .dc-stats div{display:flex;flex-direction:column;gap:var(--s-1)}
[data-sec=foundations] .dc-stats b{font:var(--w-semibold) var(--text-kpi)/1.1 var(--font-voice);letter-spacing:var(--tr-page);font-variant-numeric:tabular-nums}
[data-sec=foundations] .dc-stats span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
[data-sec=foundations] .dc-type{display:flex;flex-direction:column}
[data-sec=foundations] .dc-type>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:baseline;padding:var(--s-3) 0;border-bottom:1px solid hsl(var(--border))}
[data-sec=foundations] .dc-type>div:last-child{border-bottom:0}
[data-sec=foundations] .dc-type small{color:hsl(var(--muted-foreground));font:var(--text-micro)/1.2 var(--font-code)}
.kit-m[data-sec=foundations] .dc-type>div{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}
[data-sec=foundations] .dc-bar{display:block;height:var(--s-3);background:hsl(var(--chart-1) / .7);border-radius:2px;min-width:1px}
[data-sec=foundations] .dc-boxes{display:grid;gap:var(--s-5)}
.kit-d[data-sec=foundations] .dc-boxes{grid-template-columns:repeat(4,minmax(0,1fr))}
.kit-m[data-sec=foundations] .dc-boxes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
[data-sec=foundations] .dc-box{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
[data-sec=foundations] .dc-box>i{display:block;height:calc(var(--s-16) + var(--s-6));background:hsl(var(--card));border:1px solid hsl(var(--border))}
[data-sec=foundations] .dc-box.e>i{border-color:transparent}
[data-sec=foundations] .dc-box.r>i{background:hsl(var(--accent));border-color:hsl(var(--input))}
[data-sec=foundations] .dc-box b{font:var(--w-semibold) var(--text-small)/1.2 var(--font-code)}
[data-sec=foundations] .dc-box span{font-size:var(--text-micro);color:hsl(var(--muted-foreground));line-height:1.35;overflow-wrap:anywhere}
[data-sec=foundations] .dc-ground{background:hsl(var(--muted) / .55);padding:var(--s-8) var(--s-6)}
.kit-m[data-sec=foundations] .dc-ground{padding:var(--s-5) var(--s-4)}
[data-sec=foundations] .dc-lanes{display:flex;flex-direction:column;gap:var(--s-3)}
[data-sec=foundations] .dc-lane-row{display:grid;grid-template-columns:calc(var(--sidebar-w) - var(--s-8)) minmax(0,1fr);gap:var(--s-4);align-items:center}
.kit-m[data-sec=foundations] .dc-lane-row{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
[data-sec=foundations] .dc-lane-row>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
[data-sec=foundations] .dc-lane-row b{font:var(--w-semibold) var(--text-small)/1.2 var(--font-code)}
[data-sec=foundations] .dc-lane-row span{font-size:var(--text-micro);color:hsl(var(--muted-foreground));overflow-wrap:anywhere}
[data-sec=foundations] .dc-lane{position:relative;height:var(--control-h-xs);border-radius:var(--r-pill);background:hsl(var(--muted));box-shadow:inset 0 0 0 1px hsl(var(--border))}
[data-sec=foundations] .dc-mover{position:absolute;left:var(--s-1);top:var(--s-1);bottom:var(--s-1);width:calc(100% - var(--s-8))}
[data-sec=foundations] .dc-dot{display:block;width:var(--s-5);height:var(--s-5);border-radius:var(--r-pill);background:hsl(var(--primary));box-shadow:var(--e-btn)}
[data-sec=foundations] .dc-lane.go .dc-mover{transform:translateX(100%)}
[data-sec=foundations] .dc-curves{display:grid;gap:var(--s-5)}
.kit-d[data-sec=foundations] .dc-curves{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-sec=foundations] .dc-curve{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
[data-sec=foundations] .dc-curve svg{width:100%;height:auto;max-width:220px;overflow:visible}
[data-sec=foundations] .dc-curve .ax{stroke:hsl(var(--border));stroke-width:1;fill:none}
[data-sec=foundations] .dc-curve .cp{stroke:hsl(var(--chart-muted));stroke-width:1;stroke-dasharray:3 3;fill:none}
[data-sec=foundations] .dc-curve .cv{stroke:hsl(var(--primary));stroke-width:2.5;fill:none;stroke-linecap:round}
[data-sec=foundations] .dc-curve circle{fill:hsl(var(--chart-1))}
[data-sec=foundations] .dc-tools{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin-bottom:var(--s-4)}
[data-sec=foundations] .dc-demo{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;min-height:var(--control-h-m-lg)}
[data-sec=foundations] .dc-stage{position:relative;height:calc(var(--s-16) * 3 + var(--s-8));border-radius:var(--r-card);border:1px solid hsl(var(--border));background:hsl(var(--background));overflow:hidden}
[data-sec=foundations] .dc-stage-in{padding:var(--s-4);display:flex;gap:var(--s-3);align-items:flex-start;flex-wrap:wrap}
[data-sec=foundations] .dc-toastwrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);flex:1;min-width:0}
[data-sec=foundations] .dc-toastwrap .k-toast{flex:1;min-width:calc(var(--sidebar-w) + var(--s-6));max-width:calc(var(--sheet-w) - var(--s-10))}
[data-sec=foundations] .dc-steps{display:flex;flex-direction:column;gap:var(--s-3)}
[data-sec=foundations] .dc-steps .wz-pane{padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background))}
[data-sec=foundations] .dc-skel{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background));max-width:calc(var(--sheet-w) - var(--s-10))}
[data-sec=foundations] .dc-liftcard{padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));box-shadow:var(--e-1);max-width:var(--sidebar-w)}
[data-sec=foundations] .dc-stack{position:relative;height:calc(var(--s-16) * 6)}
[data-sec=foundations] .dc-stack>div{position:absolute;display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-3);height:var(--control-h);border-radius:var(--r-control); background:hsl(var(--card));border:1px solid hsl(var(--input));box-shadow:var(--e-pop);font-size:var(--text-small);white-space:nowrap}
[data-sec=foundations] .dc-stack>div b{font:var(--w-semibold) var(--text-small)/1 var(--font-code)}
[data-sec=foundations] .dc-shell{display:grid;grid-template-columns:calc(var(--sidebar-w) / 2) minmax(0,1fr);height:calc(var(--s-16) * 4);border-radius:var(--r-card);overflow:hidden;border:1px solid hsl(var(--border));background:hsl(var(--background))}
[data-sec=foundations] .dc-shell .sb{background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));padding:var(--s-2);font-size:var(--text-micro)}
[data-sec=foundations] .dc-shell .tb{height:calc(var(--topbar-h) / 2);border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;padding:0 var(--s-2);font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
[data-sec=foundations] .dc-shell .pg{padding:var(--s-2);font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
[data-sec=foundations] .dc-shell .ct{max-width:calc(var(--content-max) / 2);height:calc(var(--s-16) + var(--s-8));border:1px dashed hsl(var(--input));border-radius:var(--r-chip);display:grid;place-items:center}
[data-sec=foundations] .dc-phone{width:calc(var(--vp-phone) / 2);height:calc(var(--s-16) * 5);border:1px solid hsl(var(--border));border-radius:var(--r-frame);overflow:hidden;display:flex;flex-direction:column;background:hsl(var(--background));font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
[data-sec=foundations] .dc-phone .pb{height:calc(var(--pbar-h) / 2);border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;padding:0 var(--s-2)}
[data-sec=foundations] .dc-phone .bd{flex:1;padding:var(--s-2)}
[data-sec=foundations] .dc-phone .ab{height:calc(var(--control-h-m-lg) / 2 + var(--s-3));border-top:1px solid hsl(var(--border));display:flex;align-items:center;padding:0 var(--s-2)}
[data-sec=foundations] .dc-phone .tb{height:calc(var(--tabbar-h) / 2);border-top:1px solid hsl(var(--border));display:flex;align-items:center;padding:0 var(--s-2)}
[data-sec=foundations] .dc-cols{display:grid;gap:var(--s-4);grid-template-columns:repeat(12,minmax(0,1fr));height:var(--s-16)}
[data-sec=foundations] .dc-cols.m{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
[data-sec=foundations] .dc-cols i{background:hsl(var(--chart-1) / .12);border:1px solid hsl(var(--chart-1) / .35);border-radius:2px}
[data-sec=foundations] .dc-icons{display:grid;gap:var(--s-2)}
.kit-d[data-sec=foundations] .dc-icons{grid-template-columns:repeat(6,minmax(0,1fr))}
.kit-m[data-sec=foundations] .dc-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-sec=foundations] .dc-ic{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2);border:1px solid hsl(var(--border));border-radius:var(--r-control);background:hsl(var(--background));min-width:0}
[data-sec=foundations] .dc-ic>span{display:flex;flex-direction:column;min-width:0;flex:1}
[data-sec=foundations] .dc-ic b{font-size:var(--text-small);font-weight:var(--w-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-sec=foundations] .dc-ic code{font-size:var(--text-micro);color:hsl(var(--muted-foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-sec=foundations] .dc-sizes{display:flex;gap:var(--s-6);align-items:flex-end;flex-wrap:wrap}
[data-sec=foundations] .dc-sizes>div{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
[data-sec=foundations] .dc-mtoc{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);margin-bottom:var(--s-6)}
[data-sec=foundations] .dc-mtoc summary{display:flex;align-items:center;min-height:var(--control-h-m);padding:0 var(--s-4);font:var(--w-semibold) var(--text-body)/1 var(--font-voice);cursor:pointer}
[data-sec=foundations] .dc-mtoc nav{display:flex;flex-direction:column;border-top:1px solid hsl(var(--border))}
[data-sec=foundations] .dc-mtoc a{display:flex;align-items:center;min-height:var(--control-h-m);padding:0 var(--s-4);text-decoration:none;border-bottom:1px solid hsl(var(--border))}
[data-sec=foundations] .dc-mtoc a:last-child{border-bottom:0}
[data-sec=foundations] .dc-mnext{display:flex;gap:var(--s-2);margin:var(--s-8) 0 var(--s-4)}
[data-sec=foundations] .dc-mnext .btn{flex:1;min-width:0}
[data-sec=foundations] .dc-mnext .btn span{overflow:hidden;text-overflow:ellipsis}
[data-sec=foundations] .dc-mall h2{font:var(--w-semibold) var(--text-micro)/1.2 var(--font-voice);color:hsl(var(--muted-foreground));margin:var(--s-6) 0 var(--s-2)}
[data-sec=foundations] .dc-mall .k-li{min-height:var(--control-h-m-lg);align-items:center}
[data-sec=foundations] .dc-mall .k-li[aria-current=page]{background:hsl(var(--accent))}
[data-sec=foundations] .dc-toast{position:fixed;left:50%;bottom:var(--s-6);z-index:var(--z-toast);width:min(calc(var(--sheet-w) - var(--s-12)),calc(100% - var(--s-8)));translate:-50% 0}
[data-sec=foundations] .dc-toast .toast{align-items:center}
.kit-m[data-sec=foundations] .dc-toastwrap{flex-basis:100%}
.kit-m[data-sec=foundations] .dc-toastwrap .k-toast{flex-basis:100%;min-width:0;max-width:none}
/* ---------- 3 · Components content (scoped) ---------- */
.dc[data-sec=components]{background:hsl(var(--canvas))}
.dc[data-sec=components] code{font-family:var(--font-code);font-size:var(--text-code)}
.dc[data-sec=components] .q{color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-top{position:sticky;top:0;z-index:var(--z-tip);height:var(--topbar-h);display:flex;align-items:center;gap:var(--s-5);padding:0 var(--s-6); background:hsl(var(--background)/.92);backdrop-filter:blur(10px);border-bottom:1px solid hsl(var(--border))}
[data-sec=components] .dc-brand{display:flex;align-items:center;gap:var(--s-3);text-decoration:none;color:inherit;flex:none}
[data-sec=components] .dc-brand b{display:block;font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice)}
[data-sec=components] .dc-brand small{display:block;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-crumbs{min-width:0;overflow:hidden;white-space:nowrap}
[data-sec=components] .dc-crumbs a{color:inherit;text-decoration:none}
[data-sec=components] .dc-crumbs a:hover{color:hsl(var(--foreground))}
[data-sec=components] .dc-crumbs .sep{opacity:.5}
[data-sec=components] .dc-wrap{display:grid;grid-template-columns:calc(var(--s-16) * 4) minmax(0,1fr);max-width:var(--vp-desktop);margin:0 auto}
[data-sec=components] .dc-rail{position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;overscroll-behavior:contain; padding:var(--s-5) var(--s-3) var(--s-10) var(--s-4);border-right:1px solid hsl(var(--border));background:hsl(var(--background))}
[data-sec=components] .dc-rail .dc-search{margin-bottom:var(--s-3)}
[data-sec=components] .dc-grp{margin-top:var(--s-2)}
[data-sec=components] .dc-grp ul,[data-sec=components] .dc-cards,[data-sec=components] .dc-slist{list-style:none}
[data-sec=components] .dc-grp .mlabel{padding-left:var(--s-2)}
[data-sec=components] .dc-nl{display:flex;align-items:center;gap:var(--s-2);height:var(--control-h-xs);padding:0 var(--s-2);border-radius:var(--r-control);font-size:var(--text-body); color:hsl(var(--muted-foreground));text-decoration:none;transition:background-color var(--motion-hover),color var(--motion-hover)}
[data-sec=components] .dc-nl .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-sec=components] .dc-nl:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
[data-sec=components] .dc-nl.on{background:hsl(var(--accent));color:hsl(var(--accent-foreground));font-weight:var(--w-medium)}
[data-sec=components] .dc-nl:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
[data-sec=components] .dc-nl-t{font:var(--w-medium) var(--text-micro)/1 var(--font-ui);color:hsl(var(--info));flex:none}
[data-sec=components] .dc-home{margin-bottom:var(--s-1);color:hsl(var(--foreground))}
[data-sec=components] .dc-none{font-size:var(--text-small);color:hsl(var(--muted-foreground));padding:var(--s-2)}
[data-sec=components] .dc-main{min-width:0;padding:var(--s-8) var(--s-10) var(--s-18)}
[data-sec=components] .dc-head{padding-bottom:var(--s-6);border-bottom:1px solid hsl(var(--border));margin-bottom:var(--s-2)}
[data-sec=components] .dc-head .kit-lede{margin-top:var(--s-3);max-width:80ch}
[data-sec=components] .dc-eyebrow{font:var(--w-medium) var(--text-small)/1 var(--font-voice);color:hsl(var(--muted-foreground));margin-bottom:var(--s-3)}
[data-sec=components] .dc-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-4);align-items:center}
[data-sec=components] .dc-gap{margin-top:var(--s-4);max-width:80ch}
[data-sec=components] .dc-gap p{margin-top:2px}
[data-sec=components] .dc-toc{position:sticky;top:var(--topbar-h);z-index:calc(var(--z-tip) - 1);display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap; margin:0 calc(var(--s-10) * -1);padding:var(--s-3) var(--s-10);background:hsl(var(--canvas)/.94);backdrop-filter:blur(8px);border-bottom:1px solid hsl(var(--border))}
[data-sec=components] .dc-toc-k{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-toc a{font-size:var(--text-small);color:hsl(var(--muted-foreground));text-decoration:none;padding:var(--s-1) 0;border-bottom:2px solid transparent;transition:color var(--motion-hover),border-color var(--motion-hover)}
[data-sec=components] .dc-toc a:hover{color:hsl(var(--foreground))}
[data-sec=components] .dc-toc a.on{color:hsl(var(--foreground));border-bottom-color:hsl(var(--primary))}
[data-sec=components] .dc-sec{padding-top:var(--s-10);scroll-margin-top:calc(var(--topbar-h) + var(--s-12))}
[data-sec=components] .dc-sec-h{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-4)}
[data-sec=components] .dc-h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
[data-sec=components] .dc-h2 em{font:normal var(--text-small)/1 var(--font-ui);color:hsl(var(--muted-foreground));margin-left:var(--s-1)}
[data-sec=components] .dc-sec-note{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-lift{margin-bottom:var(--s-8)}
[data-sec=components] .dc-from{display:flex;align-items:center;gap:var(--s-1);margin-top:var(--s-2);font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-p{font-size:var(--text-body);line-height:1.8}
[data-sec=components] .dc-p .chip{margin-right:var(--s-1)}
[data-sec=components] .dc-pi{display:flex;gap:var(--s-2)}
[data-sec=components] .dc-search input{border:0;outline:0;background:transparent;height:100%;min-width:0}
[data-sec=components] .dc-search input::placeholder{color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-search input::-webkit-search-cancel-button{display:none}
[data-sec=components] .dc-p+.dc-p{margin-top:var(--s-3)}
[data-sec=components] .dc-list{padding-left:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);font-size:var(--text-body);line-height:var(--lh-body)}
[data-sec=components] .dc-cols{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
[data-sec=components] .dc-cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-sec=components] .dc-cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-sec=components] .dc-cols.c1{grid-template-columns:minmax(0,1fr)}
[data-sec=components] .dc-a11y,[data-sec=components] .dc-do,[data-sec=components] .dc-dont{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-4)}
[data-sec=components] .dc-a11y .spec-h,[data-sec=components] .dc-do .spec-h,[data-sec=components] .dc-dont .spec-h{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}
[data-sec=components] .dc-do{box-shadow:inset 3px 0 0 hsl(var(--success))}
[data-sec=components] .dc-do .spec-h svg{color:hsl(var(--success))}
[data-sec=components] .dc-dont{box-shadow:inset 3px 0 0 hsl(var(--destructive))}
[data-sec=components] .dc-dont .spec-h svg{color:hsl(var(--destructive))}
[data-sec=components] .dc-rm{display:flex;gap:var(--s-2);align-items:flex-start;margin-top:var(--s-4);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-rm svg{margin-top:2px;color:hsl(var(--info))}
[data-sec=components] .dc-tblw{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow-x:auto;margin-top:var(--s-4)}
[data-sec=components] .dc-tbl{width:100%;font-size:var(--text-body)}
[data-sec=components] .dc-tbl th{height:var(--row-th);padding:0 var(--s-3);text-align:left;background:hsl(var(--muted));font:var(--w-semibold) var(--text-micro)/1 var(--font-voice); color:hsl(var(--muted-foreground));border-bottom:1px solid hsl(var(--border));white-space:nowrap}
[data-sec=components] .dc-tbl td{padding:var(--s-2) var(--s-3);border-bottom:1px solid hsl(var(--border));vertical-align:top;line-height:var(--lh-body)}
[data-sec=components] .dc-tbl tr:last-child td{border-bottom:0}
[data-sec=components] .dc-tbl td code{overflow-wrap:anywhere}
[data-sec=components] .dc-tbl td:has(.dc-copy){width:1%;white-space:nowrap}
[data-sec=components] .dc-val{font-variant-numeric:tabular-nums;font-weight:var(--w-medium)}
[data-sec=components] .dc-src td{font-size:var(--text-small)}
[data-sec=components] .dc-decl{color:hsl(var(--muted-foreground));white-space:normal}
[data-sec=components] .dc-det{margin-top:var(--s-4)}
[data-sec=components] .dc-det summary{cursor:pointer;font:var(--w-medium) var(--text-small)/1.4 var(--font-voice);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-det summary:hover{color:hsl(var(--foreground))}
[data-sec=components] .dc-rule{font-size:var(--text-small);padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--border));overflow-wrap:anywhere}
[data-sec=components] .dc-sw{display:inline-block;width:var(--s-4);height:var(--s-4);border-radius:var(--r-chip);box-shadow:inset 0 0 0 1px hsl(var(--foreground)/.12);vertical-align:middle;margin-right:var(--s-1)}
[data-sec=components] .dc-copy{position:relative;width:var(--control-h-xs);height:var(--control-h-xs);display:inline-grid;place-items:center;border-radius:var(--r-control); color:hsl(var(--muted-foreground));transition:background-color var(--motion-hover),color var(--motion-hover)}
[data-sec=components] .dc-copy:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
[data-sec=components] .dc-copy:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
[data-sec=components] .dc-copy .dc-copy-ok{position:absolute;inset:0;display:none;place-items:center;color:hsl(var(--success))}
[data-sec=components] .dc-copy.done>svg{visibility:hidden}
[data-sec=components] .dc-copy.done .dc-copy-ok{display:grid}
[data-sec=components] .dc-code{margin-top:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--muted)/.6);overflow:hidden}
[data-sec=components] .dc-code-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding:var(--s-1) var(--s-2) var(--s-1) var(--s-4);border-bottom:1px solid hsl(var(--border)); font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);color:hsl(var(--muted-foreground));background:hsl(var(--card))}
[data-sec=components] .dc-code pre{margin:0;padding:var(--s-4);overflow-x:auto;font:var(--w-regular) var(--text-code)/1.65 var(--font-code);color:hsl(var(--foreground));tab-size:2}
[data-sec=components] .dc-build .k-kv{margin-top:var(--s-4);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:0 var(--s-4)}
[data-sec=components] .dc-build .k-kv>div{grid-template-columns:calc(var(--kv-label) + var(--s-10)) minmax(0,1fr)}
[data-sec=components] .dc-build .dc-p{margin-top:var(--s-3);color:hsl(var(--muted-foreground));align-items:flex-start}
[data-sec=components] .dc-build .dc-p svg{margin-top:5px;color:hsl(var(--info))}
[data-sec=components] .dc-anat{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:stretch;padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background))}
[data-sec=components] .dc-anat.col{flex-direction:column}
[data-sec=components] .dc-part{display:flex;align-items:flex-start;gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px dashed hsl(var(--input));border-radius:var(--r-control);background:hsl(var(--muted)/.45);min-width:0}
[data-sec=components] .dc-part-lg{flex-basis:100%;border-style:solid;border-color:hsl(var(--ring)/.55);background:hsl(var(--accent)/.5)}
[data-sec=components] .dc-anat.col .dc-part{flex-basis:auto}
[data-sec=components] .dc-part-b{display:flex;flex-direction:column;gap:2px;min-width:0}
[data-sec=components] .dc-part-b b{font:var(--w-semibold) var(--text-small)/1.2 var(--font-voice)}
[data-sec=components] .dc-part-b code{color:hsl(var(--muted-foreground));font-size:var(--text-micro);overflow-wrap:anywhere}
[data-sec=components] .dc-n{display:inline-grid;place-items:center;flex:none;width:var(--s-5);height:var(--s-5);border-radius:var(--r-pill);background:hsl(var(--primary));color:hsl(var(--primary-foreground)); font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);font-variant-numeric:tabular-nums}
[data-sec=components] .dc-slist{margin-top:var(--s-3);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
[data-sec=components] .dc-slist li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-bottom:1px solid hsl(var(--border));font-size:var(--text-body);min-width:0}
[data-sec=components] .dc-slist li:nth-child(odd){border-right:1px solid hsl(var(--border))}
[data-sec=components] .dc-s-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--w-medium)}
[data-sec=components] .dc-slist code{color:hsl(var(--muted-foreground));font-size:var(--text-micro)}
[data-sec=components] .dc-s-l{display:flex;gap:var(--s-3);flex:none;font-size:var(--text-small)}
[data-sec=components] .dc-s-l a,[data-sec=components] .dc-sli a{color:hsl(var(--info))}
[data-sec=components] .dc-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-12)}
[data-sec=components] .dc-pn-a{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);text-decoration:none;color:inherit; transition:border-color var(--motion-hover)}
[data-sec=components] .dc-pn-a:hover{border-color:hsl(var(--secondary-border-hover))}
[data-sec=components] .dc-pn-a.r{text-align:right}
[data-sec=components] .dc-pn-a small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-pn-a b{font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice)}
[data-sec=components] .dc-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
[data-sec=components] .dc-row-t{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--text-body)}
[data-sec=components] .dc-ttdemo{margin-top:var(--s-10)}
[data-sec=components] .dc-page{padding:var(--s-6)}
[data-sec=components] .dc-page .ph+.ph{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid hsl(var(--border))}
[data-sec=components] .dc-mlist{margin:calc(var(--s-4) * -1)}
[data-sec=components] .dc-iframe iframe{display:block;width:var(--vp-phone);height:calc(var(--s-16) * 11);border:1px solid hsl(var(--border));border-radius:var(--r-frame);background:hsl(var(--background));box-shadow:var(--e-frame)}
[data-sec=components] .dc-iframe p{margin-top:var(--s-3);font-size:var(--text-small)}
[data-sec=components] .dc-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4);margin-top:var(--s-6)}
[data-sec=components] .dc-sum>div{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-1)}
[data-sec=components] .dc-sum small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
[data-sec=components] .dc-ifilter{max-width:calc(var(--s-16) * 6);margin-top:var(--s-10)}
[data-sec=components] .dc-igrp{padding-top:var(--s-8)}
[data-sec=components] .dc-igrp>.dc-h2{margin-bottom:var(--s-3)}
[data-sec=components] .dc-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-4)}
[data-sec=components] .dc-card{display:flex;flex-direction:column;gap:var(--s-2);height:100%;padding:var(--s-4);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card); text-decoration:none;color:inherit;box-shadow:var(--e-1)}
[data-sec=components] .dc-card b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
[data-sec=components] .dc-card p{font-size:var(--text-small);color:hsl(var(--muted-foreground));flex:1}
[data-sec=components] .dc-card-f{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-micro);flex-wrap:wrap}
[data-sec=components] .dc-card-n{margin-left:auto;color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
[data-sec=components] .dc-card:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.dc-m[data-sec=components]{padding-bottom:0}
[data-sec=components] .dc-mbar{position:sticky;top:0;z-index:var(--z-tip);display:flex;align-items:center;gap:var(--s-2);height:var(--pbar-h);padding:0 var(--s-2) 0 var(--s-3); background:hsl(var(--background)/.96);backdrop-filter:blur(var(--actbar-blur));border-bottom:1px solid hsl(var(--border))}
[data-sec=components] .dc-mbar .grow{flex:1;min-width:0;font:var(--w-semibold) 15px/1.2 var(--font-voice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-sec=components] .dc-mbar>a.icon-btn svg{transform:scaleX(-1)}
[data-sec=components] .dc-mlink{font-size:var(--text-small);color:hsl(var(--info));padding:0 var(--s-2)}
.dc-m[data-sec=components] .dc-mtoc{position:sticky;top:var(--pbar-h);z-index:calc(var(--z-tip) - 1);margin:0;padding:0 var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(var(--actbar-blur))}
.dc-m[data-sec=components] .dc-mtoc .tab.on{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
[data-sec=components] .dc-mmain{padding:var(--s-5) var(--s-4) var(--s-8);min-width:0}
.dc-m[data-sec=components] .kit-h1{font-size:30px}
.dc-m[data-sec=components] .dc-head .kit-lede{font-size:14px}
.dc-m[data-sec=components] .dc-sec{scroll-margin-top:calc(var(--pbar-h) + var(--tab-h-m) + var(--s-2))}
.dc-m[data-sec=components] .dc-sum{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.dc-m[data-sec=components] .dc-sum .kpi-v{font-size:22px}
[data-sec=components] .dc-mcards{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-3)}
[data-sec=components] .dc-mcard{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-3) var(--s-4)}
[data-sec=components] .dc-mcard-t{display:flex;align-items:center;gap:var(--s-2);font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);margin-bottom:var(--s-1);overflow-wrap:anywhere}
[data-sec=components] .dc-mcard .k-kv>div{font-size:var(--text-small)}
[data-sec=components] .dc-mcard .k-kv dd code{overflow-wrap:anywhere}
.dc-m[data-sec=components] .dc-code pre{font-size:11.5px}
.dc-m[data-sec=components] .dc-build .k-kv>div{grid-template-columns:var(--kv-label-m) minmax(0,1fr)}
[data-sec=components] .dc-slist-m{margin:var(--s-3) calc(var(--s-4) * -1) 0;list-style:none}
[data-sec=components] .dc-sli .r{flex-direction:row;gap:var(--s-3);align-self:center}
.dc-m[data-sec=components] .dc-igrp .k-list{list-style:none}
.dc-m[data-sec=components] .dc-igrp .k-li .r{align-self:center}
.dc-m[data-sec=components] .dc-igrp .k-li b{font-size:var(--text-read)}
[data-sec=components] .dc-actbar{gap:var(--s-2)}
[data-sec=components] .dc-actbar .btn{min-width:0;overflow:hidden;text-overflow:ellipsis}
[data-sec=components] .dc-navsheet{display:flex;flex-direction:column}
[data-sec=components] .dc-navsheet-h{display:flex;align-items:center;justify-content:space-between;height:var(--pbar-h);padding:0 var(--s-2) 0 var(--s-4);border-bottom:1px solid hsl(var(--border));flex:none}
[data-sec=components] .dc-navsheet-h b{font:var(--w-semibold) var(--text-section)/1 var(--font-voice)}
[data-sec=components] .dc-navsheet-b{padding:var(--s-4)}
[data-sec=components] .dc-navsheet-b .dc-nl{height:var(--control-h-m);font-size:var(--text-read)}
[data-sec=components] .dc-navsheet-b .dc-grp ul{list-style:none}
.dc-m[data-sec=components] .dc-lift{margin-bottom:var(--s-6)}
@media (prefers-reduced-motion: reduce){[data-sec=components] .dc-toc{backdrop-filter:none}}
[data-sec=components] .dc-sec-note code,.dc-m[data-sec=components] code{overflow-wrap:anywhere}
[data-sec=components] .dc-gap{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--warning)/.34);background:hsl(var(--warning)/.07);border-radius:var(--r-card);font-size:var(--text-body)}
[data-sec=components] .dc-gap>svg{color:hsl(var(--warning));flex:none;margin-top:1px}
[data-sec=components] .dc-gap b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
[data-sec=components] .dc-ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}