/* RJ DTC Admin · Specimens · family.css  (prefix sp-)  Values from tokens only. */

/* ---------- page furniture ---------- */
.sp-jump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:calc(var(--s-2) * -1) 0 var(--s-8)}
.sp-jump a{display:inline-flex;align-items:center;height:var(--control-h-sm);padding:0 var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);
  background:hsl(var(--card));font:var(--w-medium) var(--text-small)/1 var(--font-voice);color:hsl(var(--foreground));text-decoration:none;
  transition:background-color var(--motion-hover),border-color var(--motion-hover)}
.sp-jump a:hover{background:hsl(var(--muted));border-color:hsl(var(--secondary-border))}
.kit-m .sp-jump a{height:var(--control-h-m)}
.sp-why{padding:var(--s-5) var(--s-6);border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/.4)}
.sp-why p{font-size:var(--text-read);line-height:var(--lh-read);max-width:74ch}
.kit-m .sp-why{padding:var(--s-4)}
.kit-m .sp-why p{font-size:var(--text-body);line-height:1.55}

.kit-m .kit-sec{margin-bottom:var(--s-8)}
.spec-foot code{overflow-wrap:anywhere}
.sp-sv{font:var(--w-medium) var(--text-small)/1.2 var(--font-code);color:hsl(var(--foreground))}
.sp-su{font-size:var(--text-small);color:hsl(var(--muted-foreground));line-height:1.35}
.sp-note{margin-top:var(--s-5);padding:var(--s-3) var(--s-4);border-left:2px solid hsl(var(--warning));background:hsl(var(--warning)/.07);border-radius:0 var(--r-control) var(--r-control) 0;
  font-size:var(--text-body);line-height:1.5;max-width:90ch}
.sp-note b{margin-right:var(--s-1)}

/* ---------- 1 colour ---------- */
.sp-grp+.sp-grp{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid hsl(var(--border))}
.sp-grp-h{margin-bottom:var(--s-4)}
.sp-grp-h .spec-p{margin:0;max-width:80ch}
.sp-roles{display:grid;gap:var(--s-3)}
.kit-d .sp-roles{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit-m .sp-roles{grid-template-columns:minmax(0,1fr)}
.sp-role{display:flex;gap:var(--s-3);padding:var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-card);min-width:0}
.sp-sw{width:var(--s-12);flex:none;align-self:stretch;min-height:var(--s-12);border-radius:var(--r-control);border:1px solid hsl(var(--foreground)/.14)}
.kit-m .sp-sw{width:var(--s-10)}
.sp-rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-1)}
.sp-rn{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2)}
.sp-rn code{font-size:var(--text-code);color:hsl(var(--foreground))}
.sp-rn .title{font-size:var(--text-card);font-weight:var(--w-semibold)}
.sp-ru{font-size:var(--text-small);color:hsl(var(--muted-foreground));line-height:1.4}
.sp-rv{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);font:var(--w-regular) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
.sp-rv .sp-hex{color:hsl(var(--foreground));font-weight:var(--w-medium)}
.sp-rp{display:flex;flex-direction:column;gap:var(--s-1);margin-top:var(--s-1)}
.sp-pair{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);line-height:1;min-height:var(--s-6)}
.sp-pair b{font:var(--w-medium) var(--text-small)/1 var(--font-ui);min-width:var(--s-12);font-variant-numeric:tabular-nums}
.sp-pl{color:hsl(var(--muted-foreground));flex:1;min-width:0}
.sp-pair em{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);padding:var(--s-1) 6px;border-radius:var(--r-chip);white-space:nowrap}
.sp-pair.ok em{color:hsl(var(--success));background:hsl(var(--success)/var(--status-soft-alpha))}
.sp-pair.warn em{color:hsl(var(--warning));background:hsl(var(--warning)/var(--status-soft-alpha))}
.sp-pair.bad em{color:hsl(var(--destructive));background:hsl(var(--destructive)/var(--status-soft-alpha))}
.sp-pair.hair em{color:hsl(var(--neutral));background:hsl(var(--neutral)/var(--status-soft-alpha))}
.sp-aa{width:var(--s-8);height:var(--s-6);flex:none;display:grid;place-items:center;border-radius:var(--r-chip);border:1px solid hsl(var(--foreground)/.12);
  font:var(--w-semibold) var(--text-small)/1 var(--font-voice)}
.sp-aa-bar i{display:block;width:var(--s-5);height:var(--s-1);border-radius:var(--r-pill)}
.sp-focus-roles{margin-top:var(--s-6)}
.kit-d .sp-focus-roles{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- 2 type ---------- */
.sp-trow{display:grid;gap:var(--s-3) var(--s-6);align-items:center;padding:var(--s-4) 0;border-bottom:1px solid hsl(var(--border))}
.sp-trow:first-child{padding-top:0}
.kit-d .sp-trow{grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,250px)}
.kit-m .sp-trow{grid-template-columns:minmax(0,1fr)}
.sp-tm{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.sp-tm .title{font-size:var(--text-card);font-weight:var(--w-semibold)}
.sp-tm code{font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.sp-tm p{font-size:var(--text-small);color:hsl(var(--muted-foreground));line-height:1.4}
.sp-ts{min-width:0;overflow-wrap:anywhere}
.sp-btns{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.sp-tl{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.sp-tf{font:var(--w-semibold) var(--text-small)/1.2 var(--font-voice)}
.sp-tv{font:var(--w-regular) var(--text-micro)/1.4 var(--font-code);color:hsl(var(--muted-foreground))}
.sp-t-display{display:block;font:var(--w-semibold) var(--text-display)/var(--lh-display) var(--font-title);letter-spacing:var(--tr-display);font-stretch:var(--font-stretch-title)}
.sp-t-page{display:block;font:var(--w-semibold) var(--text-page)/var(--lh-page) var(--font-title);letter-spacing:var(--tr-page);font-stretch:var(--font-stretch-title)}
.sp-t-section{display:block;font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-title);letter-spacing:var(--tr-section);font-stretch:var(--font-stretch-title)}
.sp-t-card{display:block;font:var(--w-semibold) var(--text-card)/var(--lh-card) var(--font-title);font-stretch:var(--font-stretch-title)}
.sp-t-label{display:block;font:var(--w-semibold) var(--text-label)/1.3 var(--font-title);font-stretch:var(--font-stretch-title)}
.sp-t-body{display:block;font:var(--w-regular) var(--text-body)/var(--lh-body) var(--font-ui)}
.sp-t-read{display:block;max-width:62ch;font:var(--w-regular) var(--text-read)/var(--lh-read) var(--font-ui)}
.sp-t-small{display:block;font:var(--w-regular) var(--text-small)/1.4 var(--font-ui);color:hsl(var(--muted-foreground))}
.sp-t-micro{display:block;font:var(--w-regular) var(--text-micro)/1.4 var(--font-ui);color:hsl(var(--muted-foreground))}
.sp-t-th{display:block;font:var(--w-semibold) var(--text-micro)/1.4 var(--font-title);font-stretch:var(--font-stretch-title);color:hsl(var(--muted-foreground))}
.sp-t-code{display:block;font:var(--w-regular) var(--text-code)/1.4 var(--font-code)}
.sp-t-price{display:block;font:var(--w-medium) var(--text-body)/var(--lh-body) var(--font-ui);font-variant-numeric:tabular-nums}
.sp-two{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid hsl(var(--border));display:grid;gap:var(--s-8)}
.kit-d .sp-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-wts{display:flex;flex-direction:column;gap:var(--s-4)}
.sp-wts>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-5);font:var(--w-regular) var(--text-section)/1.3 var(--font-title);font-stretch:var(--font-stretch-title)}
.sp-wts>.sp-plex{font-family:var(--font-ui)}
.sp-wts>.sp-mono{font-family:var(--font-code);font-size:var(--text-body)}
.sp-wl{width:100%;font:var(--w-semibold) var(--text-small)/1 var(--font-voice);color:hsl(var(--muted-foreground))}
.sp-w4{font-weight:var(--w-regular)}.sp-w5{font-weight:var(--w-medium)}.sp-w6{font-weight:var(--w-semibold)}.sp-w7{font-weight:var(--w-bold)}
.sp-retire ul{list-style:none;display:flex;flex-direction:column;gap:var(--s-2)}
.sp-retire li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-3);font-size:var(--text-body)}
.sp-old{font:var(--w-medium) var(--text-body)/1 var(--font-code);text-decoration:line-through;color:hsl(var(--muted-foreground));min-width:var(--s-10)}
.sp-arrow{font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* ---------- 3 layout ---------- */
.sp-lay{display:grid;gap:var(--s-6);align-items:start}
.kit-d .sp-lay{grid-template-columns:auto minmax(0,1fr);gap:var(--s-10)}
.kit-m .sp-lay{grid-template-columns:minmax(0,1fr);justify-items:start}
.sp-fig{min-width:0}
.sp-dg{width:calc(var(--vp-desktop) * var(--sp-k));aspect-ratio:16/9;display:grid;overflow:hidden;position:relative;
  grid-template-columns:calc(var(--sidebar-w) * var(--sp-k)) minmax(0,1fr);grid-template-rows:calc(var(--topbar-h) * var(--sp-k)) minmax(0,1fr);
  border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background))}
.sp-dg-side{grid-row:1 / 3;background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));padding:var(--s-3)}
.sp-dg-side span,.sp-dg-top span,.sp-dg-pbar span,.sp-dg-tabs span{font:var(--w-medium) var(--text-micro)/1 var(--font-code)}
.sp-dg-top{border-bottom:1px solid hsl(var(--border));padding:var(--s-3) var(--s-3);color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.5)}
.sp-dg-page{padding:calc(var(--s-6) * var(--sp-k));background:hsl(var(--warning)/.1);min-height:0}
.sp-dg-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(var(--s-4) * var(--sp-k));height:100%}
.sp-dg-cols i{background:hsl(var(--info)/.18);border-radius:var(--r-chip)}
.sp-dg-m{width:calc(var(--vp-phone) * var(--sp-k));aspect-ratio:390/560;grid-template-columns:minmax(0,1fr);
  grid-template-rows:calc((var(--control-h-m) + var(--s-2)) * var(--sp-k)) minmax(0,1fr) calc((var(--s-16) - 2px) * var(--sp-k))}
.sp-dg-m .sp-dg-page{padding:calc(var(--s-4) * var(--sp-k))}
.sp-dg-m .sp-dg-cols{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--s-3) * var(--sp-k))}
.sp-dg-pbar{background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));padding:var(--s-3)}
.sp-dg-tabs{border-top:1px solid hsl(var(--border));padding:var(--s-3);background:hsl(var(--muted)/.5);color:hsl(var(--muted-foreground))}
.sp-legend{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sp-legend span{width:var(--s-4);height:var(--s-4);border-radius:var(--r-chip);display:inline-block;border:1px solid hsl(var(--foreground)/.12)}
.sp-legend .sp-lg-g{background:hsl(var(--warning)/.1)}
.sp-legend .sp-lg-c{background:hsl(var(--info)/.18);margin-left:var(--s-3)}
.sp-dims{display:flex;flex-direction:column;min-width:0}
.sp-dims>div{display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid hsl(var(--border));align-items:baseline}
.sp-dims>div:first-child{padding-top:0}
.sp-dims dt{font:var(--w-semibold) var(--text-card)/1.3 var(--font-title)}
.sp-dims dd{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);align-items:baseline;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sp-dims dd code{color:hsl(var(--foreground));font-weight:var(--w-medium)}
.kit-m .sp-dims{width:100%}
.sp-widths{--sp-wk:.7;margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid hsl(var(--border))}
.kit-m .sp-widths{--sp-wk:.62}
.sp-wbars{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-3)}
.sp-wbars>div{display:grid;grid-template-columns:120px auto 1fr;gap:var(--s-3);align-items:center}
.kit-m .sp-wbars>div{grid-template-columns:1fr auto;gap:var(--s-1) var(--s-3)}
.kit-m .sp-wbars .sp-wb{grid-column:1 / -1;grid-row:2}
.sp-wbars code{font-size:var(--text-code)}
.sp-wb{height:var(--s-3);border-radius:var(--r-chip);background:hsl(var(--chart-muted)/.45);display:block}

/* ---------- 4 spacing ---------- */
.sp-sp{display:grid;gap:var(--s-10)}
.kit-d .sp-sp{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-srows,.sp-zrows{display:flex;flex-direction:column}
.sp-srow{display:grid;grid-template-columns:56px var(--s-18) 48px minmax(0,1fr);gap:var(--s-3);align-items:center;min-height:var(--s-8);border-bottom:1px solid hsl(var(--border)/.6)}
.sp-srow code,.sp-zrow code{font-size:var(--text-code)}
.sp-sbar{height:var(--s-3);background:hsl(var(--primary));border-radius:var(--r-chip);display:block}
.sp-zrow{display:grid;grid-template-columns:var(--s-4) 128px 48px minmax(0,1fr);gap:var(--s-3);align-items:center;padding:var(--s-1) 0;border-bottom:1px solid hsl(var(--border)/.6)}
.sp-zb{width:var(--s-4);background:hsl(var(--info)/.2);border:1px solid hsl(var(--info)/.5);border-radius:var(--r-chip);display:block}
.kit-m .sp-srow{grid-template-columns:48px var(--s-18) 44px minmax(0,1fr);gap:var(--s-2)}
.kit-m .sp-zrow{grid-template-columns:var(--s-4) 112px 40px minmax(0,1fr);gap:var(--s-2)}
.kit-m .sp-su{font-size:var(--text-micro)}

/* ---------- 5 radius ---------- */
.sp-rads{display:grid;gap:var(--s-5)}
.kit-d .sp-rads{grid-template-columns:repeat(6,minmax(0,1fr))}
.kit-m .sp-rads{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-rad{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.sp-rbox{display:block;height:var(--s-16);background:hsl(var(--accent));border:1px solid hsl(var(--secondary-border))}
.sp-rad code{font-size:var(--text-code)}

/* ---------- 6 elevation ---------- */
.sp-els{display:grid;gap:var(--s-8) var(--s-6);padding:var(--s-8) var(--s-6);background:hsl(var(--muted)/.55);border-radius:var(--r-card)}
.kit-d .sp-els{grid-template-columns:repeat(5,minmax(0,1fr))}
.kit-m .sp-els{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--s-6) var(--s-4);gap:var(--s-6) var(--s-4)}
.sp-el{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.sp-ebox{display:block;height:var(--s-16);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.sp-el code{font-size:var(--text-code)}
.sp-el-x{display:grid;gap:var(--s-5);margin-top:var(--s-6)}
.kit-d .sp-el-x{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-el-x>div{display:flex;align-items:center;gap:var(--s-4)}
.sp-el-x code{font-size:var(--text-code);min-width:112px}
.sp-scrim-demo{width:var(--s-16);height:var(--s-10);border-radius:var(--r-control);background:var(--scrim);display:block;flex:none}
.sp-ring-demo{width:var(--s-16);height:var(--s-10);border-radius:var(--r-control);background:hsl(var(--background));border:1px solid hsl(var(--ring));box-shadow:var(--focus-ring);display:block;flex:none}

/* ---------- 7 motion ---------- */
#sp-root[data-sp-rm]{--motion-hover:1ms linear;--motion-press:1ms linear;--motion-focus:1ms linear;--motion-pop-in:1ms linear;--motion-pop-out:1ms linear;
  --motion-sheet-in:1ms linear;--motion-sheet-out:1ms linear;--motion-toast-in:1ms linear;--motion-toast-out:1ms linear;--press-shift:0px;--pop-shift:0px;--toast-shift:0px}
.sp-mrows{display:flex;flex-direction:column}
.sp-mrow{display:grid;align-items:center;gap:var(--s-1) var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid hsl(var(--border));
  grid-template-columns:168px minmax(0,1fr) 56px 104px 48px minmax(0,1fr);grid-template-areas:"c u ms e v t"}
.kit-m .sp-mrow{grid-template-columns:minmax(0,1fr) auto var(--s-12);grid-template-areas:"c ms v" "u e v" "t t t"}
.sp-mrow>code{grid-area:c;font-size:var(--text-code)}
.sp-mu{grid-area:u;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sp-mms{grid-area:ms;font:var(--w-medium) var(--text-small)/1 var(--font-code);text-align:right}
.sp-mease{grid-area:e;font-size:var(--text-small)}
.kit-m .sp-mease{color:hsl(var(--muted-foreground))}
.kit-m .sp-mms{text-align:left}
.sp-curve{grid-area:v;width:var(--s-12);height:var(--s-12);overflow:visible}
.sp-curve path{fill:none;stroke-linecap:round}
.sp-curve .sp-grid{stroke:hsl(var(--border));stroke-width:1}
.sp-curve .sp-cpath{stroke:hsl(var(--primary));stroke-width:2}
.sp-mtrack{grid-area:t;height:var(--s-2);background:hsl(var(--muted));border-radius:var(--r-pill);display:block}
.sp-mbar{display:block;height:100%;background:hsl(var(--primary));border-radius:var(--r-pill)}
.sp-mx{display:grid;gap:var(--s-4);margin-top:var(--s-5)}
.kit-d .sp-mx{grid-template-columns:repeat(4,minmax(0,1fr))}
.kit-m .sp-mx{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-mx>div{display:flex;flex-direction:column;gap:var(--s-1)}
.sp-mx code{font-size:var(--text-code)}
.sp-mdemo{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid hsl(var(--border))}
.sp-mctl{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);flex-wrap:wrap}
.sp-mctl .spec-h{margin:0}
.sp-mctl .btn[aria-pressed=true]{background:hsl(var(--accent));border-color:hsl(var(--ring))}
.sp-mgrid{display:grid;gap:var(--s-4)}
.kit-d .sp-mgrid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.2fr)}
.sp-md{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--muted)/.4);position:relative}
.sp-md .state-k{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
.sp-mrun{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.sp-mrun .btn{align-self:flex-start}
.sp-fld{width:100%;cursor:pointer}
.sp-pressed.btn{transform:translateY(var(--press-shift))}
.sp-md-pop{min-height:220px}
.sp-pop-wrap{position:relative}
.sp-pop-wrap .field{cursor:pointer;background:hsl(var(--background))}
.sp-menu{position:absolute;top:calc(100% + var(--s-1));left:0;right:0;z-index:var(--z-pop)}  /* surface = shared .menu */

.sp-stage{height:300px;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.sp-stage-body{padding:var(--s-4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.sp-toast{position:absolute;left:var(--s-4);right:var(--s-4);bottom:var(--s-4);z-index:var(--z-toast);align-items:center;width:auto}  /* surface = shared .toast */

.sp-sheet-h{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.sp-sheet-h .title{font-size:var(--text-section)}
.sp-sheet-b{flex:1;padding:var(--s-4)}
.sp-sheet-f{display:flex;justify-content:flex-end;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid hsl(var(--border))}

/* ---------- 8 icons ---------- */
.sp-icg+.sp-icg{margin-top:var(--s-6)}
.sp-icg .spec-h{margin-bottom:var(--s-3)}
.sp-icons{list-style:none;display:grid;gap:var(--s-2)}
.kit-d .sp-icons{grid-template-columns:repeat(7,minmax(0,1fr))}
.kit-m .sp-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
.sp-ic{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);padding:var(--s-3) var(--s-2);border:1px solid hsl(var(--border));border-radius:var(--r-card);text-align:center;min-width:0}
.sp-ic b{font:var(--w-medium) var(--text-small)/1.25 var(--font-voice)}
.sp-ic code{font-size:var(--text-micro);color:hsl(var(--muted-foreground));overflow-wrap:anywhere;line-height:1.25}
.sp-icv{color:hsl(var(--foreground));display:grid;place-items:center;height:var(--s-8)}
.kit-m .sp-ic{flex-direction:row;text-align:left;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3)}
.kit-m .sp-ic b,.kit-m .sp-ic code{display:block}
.kit-m .sp-ic .sp-icv{height:auto;flex:none}
.kit-m .sp-ic{display:grid;grid-template-columns:var(--s-5) minmax(0,1fr);column-gap:var(--s-3);row-gap:0}
.kit-m .sp-ic .sp-icv{grid-row:1 / 3}
.sp-isz,.sp-ictx{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid hsl(var(--border))}
.sp-isz-row{display:flex;flex-wrap:wrap;gap:var(--s-8);align-items:flex-end;margin:var(--s-3) 0 var(--s-4)}
.sp-isz figure{display:flex;flex-direction:column;align-items:center;gap:var(--s-2)}
.sp-isz figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sp-isz figcaption code{color:hsl(var(--foreground));font-weight:var(--w-medium)}
.sp-ictx-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin:var(--s-3) 0 var(--s-4)}
.kit-m .sp-ictx-row .btn{width:100%}
.sp-search{width:260px}
.kit-m .sp-search{width:100%}
.sp-nav-demo{background:var(--sidebar-sheen);padding:var(--s-2);border-radius:var(--r-card);display:flex;flex-direction:column;gap:var(--s-1);min-width:180px}
.kit-m .sp-nav-demo{width:100%}
.sp-nav-i{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-control);color:hsl(var(--sidebar-foreground));
  font:var(--w-medium) var(--text-card)/1 var(--font-voice);font-stretch:var(--font-stretch-title)}
.sp-nav-i.on{background:hsl(var(--sidebar-foreground)/.09);color:hsl(var(--sidebar-accent-foreground))}
.sp-nav-i.on svg{color:hsl(var(--sidebar-primary))}

/* ---------- 9 focus ---------- */
.sp-foc{display:grid;gap:var(--s-4)}
.kit-d .sp-foc{grid-template-columns:repeat(3,minmax(0,1fr))}
.sp-fc{padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.sp-fc .field{width:100%}
.sp-fc .spec-p,.sp-fc .help{margin:0}
.sp-fc .state-k{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
.sp-fc-dark{background:var(--sidebar-sheen);border-color:hsl(var(--sidebar-border));color:hsl(var(--sidebar-foreground))}
.sp-fc-dark .state-k,.sp-fc-dark .spec-p{color:hsl(var(--sidebar-foreground))}
.sp-nav-focus{outline:2px solid hsl(var(--sidebar-ring));outline-offset:2px;background:hsl(var(--sidebar-foreground)/.09);min-width:160px}
.sp-try{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kit-m .sp-try .btn{flex:1}
.sp-md>.btn{align-self:flex-start}
.sp-pop-wrap .field{text-align:left}
.sp-stage-list{display:flex;flex-direction:column;width:100%;margin-top:var(--s-1)}
.sp-stage-list>div{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;border-top:1px solid hsl(var(--border));font-size:var(--text-body)}
.sp-stage-list>div span:first-child{flex:1;min-width:0}