/* =====================================================================================
   RJ DTC Admin · Round 4 · brand shell · Website group · wb.css   (prefix wb-)
   Shared by /website, /website/menu, /releases and /content (one copy per page folder,
   source: phase-3/pages/website/src/wb.css). Loads after the _kit mirror.
   Turns the kit's specimen pieces into full-viewport pages. Tokens only: no hex, no raw
   radius, no raw shadow. Two dedicated compositions: .kit-d (desktop /) and .kit-m (phone /m/).
   No size queries.
   ===================================================================================== */

.wb{background:hsl(var(--background))}
.wb a.btn{text-decoration:none}
.wb [hidden]{display:none!important}
.wb-ml{margin-left:auto}
.wb-o75{opacity:.75}
.wb-small{font-size:var(--text-small)}
.wb-mono,.wb-mono input{font-family:var(--font-code);font-size:var(--text-code)}
.wb-h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section);font-stretch:var(--font-stretch-title)}
.wb-vn,.wb-big,.wb-vcell,.wb-wm,.wb-mh{font-family:var(--font-voice);font-stretch:var(--font-stretch-title)}

/* ---------- desktop shell: sidebar + top bar stay put ---------- */
.kit-d .wb-app{min-height:100vh;border-radius:0;box-shadow:none}
.kit-d .wb-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .wb-side::-webkit-scrollbar{display:none}
.wb-gap{height:var(--s-2)}
.kit-d .wb-main{overflow:clip;min-width:0}
.wb-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.wb-top .top-r{gap:var(--s-3)}
.wb-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.wb-ph{align-items:flex-end}
.wb-ph .ph-r .chip{margin-right:var(--s-1)}

/* ---------- shared blocks ---------- */
.wb-card{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));box-shadow:var(--e-1)}
.wb-card-h{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5)}
.wb-tile{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:var(--r-card);background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.wb-tile.on{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.wb-empty{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);padding:var(--s-12) var(--s-6)}
.wb-errpage{border:1px solid hsl(var(--destructive)/.25);border-radius:var(--r-card);background:hsl(var(--destructive)/.025)}
.wb-skp{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5)}
.wb-skrow{display:flex;align-items:center;gap:var(--s-4);justify-content:space-between;min-height:var(--s-8)}
.wb-loadline{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}
.wb-foot{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);margin-top:var(--s-6)}
.wb-foot svg{flex:none}

/* ======================================== /website · cockpit ======================================== */
.wb-body{display:flex;flex-direction:column;gap:var(--s-5)}
.wb-site{display:flex;align-items:center;gap:var(--s-6);padding:var(--s-5) var(--s-6);border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-1);
  background:linear-gradient(180deg,hsl(var(--muted)/.55),hsl(var(--background)) 70%)}
.wb-site.wb-sk{background:hsl(var(--background))}
.wb-site-l{display:flex;align-items:center;gap:var(--s-4);min-width:0}
.wb-globe{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-card);background:hsl(var(--primary));color:hsl(var(--primary-foreground));flex:none}
.wb-host{display:flex;align-items:center;gap:var(--s-2);font:var(--w-semibold) 20px/1.2 var(--font-voice);letter-spacing:-.01em}
.wb-host a{color:inherit;text-decoration:none}
.wb-host a:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.wb-host svg{color:hsl(var(--muted-foreground))}
.wb-chips{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.wb-site-v{margin-left:auto;display:flex;align-items:center;gap:var(--s-4);padding-left:var(--s-6);border-left:1px solid hsl(var(--border))}
.wb-ver{display:flex;flex-direction:column;gap:2px}
.wb-ver .lbl,.wb-rbcmp .lbl,.wb-mver .lbl{margin:0;font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.wb-vn{font-weight:var(--w-semibold);font-size:24px;line-height:1.1;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.wb-arrow{color:hsl(var(--muted-foreground))}
.wb-site-a{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-2);margin-left:var(--s-4)}
.wb-grid2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
.wb-lanes{list-style:none;margin:0;padding:0 var(--s-5) var(--s-2)}
.wb-lane{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid hsl(var(--border))}
.wb-lane:first-child{border-top:0}
.wb-lane .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wb-lane .t b{font:var(--w-semibold) var(--text-card)/var(--lh-card) var(--font-voice)}
.wb-lane .t span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.wb-dl dd .sub{display:block}
.wb-quicks{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-2)}
.wb-quick-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}
.wb-quick{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);border:1px solid hsl(var(--border));border-radius:var(--r-card);color:inherit;text-decoration:none;
  background:hsl(var(--card));transition:border-color var(--motion-hover),box-shadow var(--motion-hover)}
.wb-quick:hover{border-color:hsl(var(--secondary-border));box-shadow:var(--e-card-hover)}
.wb-quick:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.wb-quick .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.wb-quick .t b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.wb-quick .t span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.wb-quick>svg{color:hsl(var(--muted-foreground))}
.wb-susp{margin-bottom:0}

/* ======================================== /website/menu ======================================== */
.wb-ed{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s-6);align-items:start}
.wb-col{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.wb-flash{margin-bottom:var(--s-5)}
.wb-rcards{padding:0 var(--s-5) var(--s-5);display:grid;grid-template-columns:1fr 1fr}
.wb-sync{margin:0 var(--s-5) var(--s-5)}
.wb-sync svg{animation:wb-rot 1.2s linear infinite}
@keyframes wb-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.wb-sync svg{animation:none}}
.wb-sectbl{table-layout:fixed;border-top:1px solid hsl(var(--border))}
.wb-sectbl tr:last-child td{border-bottom:0}
.wb-grip{padding-left:var(--s-2)!important;padding-right:0!important}
.wb-handle{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-control);color:hsl(var(--muted-foreground));cursor:grab}
.wb-handle:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.wb-handle:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:1px}
.wb-secname{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.wb-secname>span{display:flex;flex-direction:column;min-width:0}
.wb-secname .dt-t1{cursor:pointer;text-decoration:none;color:inherit}
.wb-secname .dt-t1:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.wb-nest{color:hsl(var(--muted-foreground));flex:none}
.wb-nested .wb-secname{padding-left:var(--s-5)}
.wb-n{font-variant-numeric:tabular-nums;font-weight:var(--w-medium)}
.wb-sectbl tr.is-off .dt-t1{color:hsl(var(--muted-foreground))}
.wb-sectbl tr.is-flash td{animation:wb-flash 900ms var(--ease-standard)}
@keyframes wb-flash{0%{background:hsl(var(--accent))}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.wb-sectbl tr.is-flash td{animation:none}}
.wb-sectbl .dt-ra{justify-content:flex-end}
.wb-linkl{list-style:none;margin:0;padding:0;border-top:1px solid hsl(var(--border))}
.wb-link{display:flex;align-items:center;gap:var(--s-3);min-height:var(--row);padding:0 var(--s-5);border-bottom:1px solid hsl(var(--border))}
.wb-link:last-child{border-bottom:0}
.wb-link .t{flex:1;display:flex;align-items:baseline;gap:var(--s-3);min-width:0}
.wb-link .t b{font-weight:var(--w-medium)}
.wb-link .t .code{color:hsl(var(--muted-foreground))}
.wb-nolinks{padding:var(--s-4) var(--s-5);border-top:1px solid hsl(var(--border));margin:0}
.wb-linkform{padding:var(--s-4) var(--s-5) var(--s-5);border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.45);border-radius:0 0 var(--r-card) var(--r-card)}
.wb-lf-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.wb-lf-a{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-3)}
.wb-linkform .help.err{margin-top:var(--s-2)}

/* preview column */
.wb-pv{position:sticky;top:calc(var(--topbar-h) + var(--s-5));display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);border:1px solid hsl(var(--border));
  border-radius:var(--r-card);background:hsl(var(--muted)/.5)}
.wb-pv-h{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.wb-pv-lab{display:flex;align-items:center;gap:6px;margin-top:var(--s-2);font-size:var(--text-small);font-weight:var(--w-medium);color:hsl(var(--muted-foreground))}
.wb-browser{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--background));overflow:visible;box-shadow:var(--e-1)}
.wb-addr{display:flex;align-items:center;justify-content:center;height:26px;border-bottom:1px solid hsl(var(--border));background:hsl(var(--muted)/.7);border-radius:var(--r-card) var(--r-card) 0 0}
.wb-addr .code{font-size:10.5px;color:hsl(var(--muted-foreground))}
.wb-sitehead{position:relative;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border-bottom:1px solid hsl(var(--border))}
.wb-wm{font-weight:var(--w-bold);font-size:var(--text-small);letter-spacing:-.01em;white-space:nowrap}
.wb-sitenav{display:flex;flex-wrap:wrap;gap:2px var(--s-3);flex:1;min-width:0;font-size:10.5px;color:hsl(var(--foreground))}
.wb-sitenav>span{position:relative;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.wb-sitenav>span.link{color:hsl(var(--muted-foreground))}
.wb-sitenav>span.dd svg{opacity:.6}
.wb-sitenav .wb-drop{position:absolute;top:calc(100% + 8px);left:-8px;z-index:2;min-width:120px;padding:6px;border:1px solid hsl(var(--border));border-radius:var(--r-control);
  background:hsl(var(--popover));box-shadow:var(--e-pop);display:flex;flex-direction:column;gap:2px}
.wb-sitenav .wb-drop i{font-style:normal;padding:4px 6px;border-radius:var(--r-chip)}
.wb-sitenav .wb-drop i:first-child{background:hsl(var(--muted))}
.wb-siteic{display:flex;gap:6px;color:hsl(var(--muted-foreground))}
.wb-siteic svg{width:12px;height:12px}
.wb-hero{height:96px;border-radius:0 0 var(--r-card) var(--r-card);opacity:.92}
.wb-phonef{align-self:center;width:216px;border:6px solid hsl(var(--primary));border-radius:var(--r-frame);background:hsl(var(--background));overflow:hidden;box-shadow:var(--e-card-hover)}
.wb-phonef-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid hsl(var(--border))}
.wb-phonef-h svg{color:hsl(var(--muted-foreground))}
.wb-phonef-l{list-style:none;margin:0;padding:0 12px 6px}
.wb-phonef-l li{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid hsl(var(--border));font-size:var(--text-small)}
.wb-phonef-l li:last-child{border-bottom:0}
.wb-phonef-l li.sub{padding-left:var(--s-3);color:hsl(var(--muted-foreground))}
.wb-phonef-l li.link{color:hsl(var(--muted-foreground))}
.wb-phonef-l li svg{color:hsl(var(--muted-foreground))}
.wb-phonef-l li.none{justify-content:center;color:hsl(var(--muted-foreground))}
.wb-pv-hidden{font-size:var(--text-small);margin:0}
.wb-pv-note{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--text-small);color:hsl(var(--muted-foreground))}

/* section sheet */
.wb-ssheet{display:flex;flex-direction:column}
.wb-stabs{padding:0 var(--s-5);gap:var(--s-5);flex:none}
.wb-fg{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.wb-fg .seg{width:100%}
.wb-photo{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2);border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.wb-photo .t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--text-small)}
.wb-photo .t b{font-weight:var(--w-medium);font-size:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-photo-i{width:44px;height:56px}
.wb-photo.none .wb-photo-i{display:grid;place-items:center;border-radius:var(--r-media);background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.wb-appr{font-size:var(--text-small)}
.wb-ssheet .fc-f{display:flex;flex-direction:column;gap:6px}
.wb-ssheet .fc-f .lbl{margin:0}
.wb-ssheet .ov-sh-b{gap:var(--s-4)}
.wb-ssheet [data-ss=photofields]{display:flex;flex-direction:column;gap:var(--s-4)}
.wb-ssheet .fc-pop.up{top:auto;bottom:calc(100% + 4px)}
.wb-sp-h{display:flex;align-items:center;gap:var(--s-2)}
.wb-plist{list-style:none;margin:0;padding:0;border:1px solid hsl(var(--border));border-radius:var(--r-card)}
.wb-prow{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-bottom:1px solid hsl(var(--border))}
.wb-prow:last-child{border-bottom:0}
.wb-prow .t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.wb-prow .t b{font-weight:var(--w-medium);font-size:var(--text-body);color:hsl(var(--foreground))}
.wb-prow .thumb{width:30px;height:40px}
.wb-pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.wb-ptile{display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid hsl(var(--border));border-radius:var(--r-card);text-align:left;transition:border-color var(--motion-hover)}
.wb-ptile .thumb{width:100%;height:auto;aspect-ratio:3/4}
.wb-ptile .n{font-size:10.5px;color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-ptile:hover{border-color:hsl(var(--secondary-border))}
.wb-ptile.on{border-color:hsl(var(--primary));box-shadow:0 0 0 1px hsl(var(--primary))}
.wb-psheet{display:flex;flex-direction:column}

/* ======================================== /releases ======================================== */
.wb-editmode{display:flex;align-items:center;gap:var(--s-3);font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.wb-editmode b{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
.wb-result{margin-bottom:var(--s-5)}
.wb-pipe{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:stretch}
.wb-pipe-arrow{display:grid;place-items:center;color:hsl(var(--muted-foreground))}
.wb-rcard{position:relative;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5) var(--s-6);border:1px solid hsl(var(--border));border-radius:var(--r-card);
  background:hsl(var(--card));box-shadow:var(--e-1);overflow:hidden}
.wb-rcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:hsl(var(--info))}
.wb-rcard.lv::before{background:hsl(var(--success))}
.wb-rcard.wb-skp::before{background:hsl(var(--muted))}
.wb-rc-h{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.wb-rc-host{display:inline-flex;align-items:center;gap:var(--s-2);margin-right:var(--s-1);font:var(--w-semibold) 19px/1.2 var(--font-voice);letter-spacing:-.01em;color:inherit;text-decoration:none}
.wb-rc-host svg{color:hsl(var(--muted-foreground))}
.wb-rc-host:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.wb-rc-k{margin:-6px 0 0}
.wb-rc-v{display:flex;align-items:flex-end;gap:var(--s-5);margin-top:var(--s-1)}
.wb-big{font-weight:var(--w-semibold);font-size:52px;line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wb-rc-m{display:flex;flex-direction:column;gap:2px;padding-bottom:4px}
.wb-rc-m b{font-weight:var(--w-semibold)}
.wb-rc-empty{padding:var(--s-5) 0;color:hsl(var(--muted-foreground));max-width:42ch}
.wb-rc-f{display:flex;align-items:flex-start;gap:var(--s-3)}
.wb-det summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;list-style:none;font-size:var(--text-small);color:hsl(var(--muted-foreground));border-radius:var(--r-chip)}
.wb-det summary::-webkit-details-marker{display:none}
.wb-det summary svg{transition:transform var(--motion-hover)}
.wb-det[open] summary svg{transform:rotate(90deg)}
.wb-det summary:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.wb-det .dd-dl{margin-top:var(--s-2);font-size:var(--text-small)}
.wb-ract{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-1) 0}
.wb-ract .btn-primary{order:-1}
.wb-gl-i{display:inline-flex}
.wb-hist{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden;box-shadow:var(--e-1)}
.wb-htbl{table-layout:fixed;border-top:1px solid hsl(var(--border))}
.wb-htbl tr:last-child td{border-bottom:0}
.wb-vcell{font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.wb-htbl td.num .btn{margin-left:auto}
.wb-hempty{padding:var(--s-4) var(--s-5);margin:0;border-top:1px solid hsl(var(--border))}
.wb-rbcmp{display:flex;align-items:center;gap:var(--s-5);padding:var(--s-3) var(--s-4);margin-bottom:var(--s-3);border-radius:var(--r-card);background:hsl(var(--muted))}
.wb-rbcmp>div{display:flex;flex-direction:column;gap:2px}
.wb-rbcmp>svg{color:hsl(var(--muted-foreground))}
[data-state=busy] .wb-gl-i .spin{color:currentColor}

/* ======================================== /content · Payload frame ======================================== */
.wb[data-page=content] .wb-page{max-width:none;padding:var(--s-4) var(--s-5) var(--s-5)}
.wb-cf{height:calc(100vh - var(--topbar-h) - var(--s-4) - var(--s-5));min-height:560px}
.wb-frame{height:100%}
.wb-frame .sh-frame-h .r{gap:var(--s-2)}
.wb-fb{flex:1;min-height:0;overflow:auto}
.wb-pl{grid-template-columns:200px minmax(0,1fr);align-items:stretch}
.wb-pl .sh-pl-n{overflow:auto}
.wb-pl .sh-pl-n span{cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-pl .sh-pl-m{padding:var(--s-4) var(--s-8) var(--s-8)}
.wb-pl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-4);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.wb-pl-av{width:26px;height:26px;font-size:10px}
.wb-pl-g{font:var(--w-semibold) 22px/1.2 var(--font-ui);margin:var(--s-4) 0 var(--s-3)}
.wb-plgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3)}
.wb-plc{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2);min-height:72px;padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--border));
  border-radius:var(--r-chip);background:hsl(var(--muted)/.6);font-weight:var(--w-semibold);font-size:var(--text-body)}
.wb-plc-add{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-pill);border:1px solid hsl(var(--input));color:hsl(var(--muted-foreground));flex:none}
.wb-spin-q{color:hsl(var(--muted-foreground))}

/* ---------- fixed overlay layers (kit.js stages, sized to the viewport) ---------- */
.wb-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.wb-layer.open>.k-scrim,.wb-layer.open>.k-sheet,.wb-layer.open>.k-dialog{pointer-events:auto}
.kit-d .wb-help-layer{left:var(--sidebar-w)}
.kit-d .wb-help-layer>.k-sheet,.kit-d .wb-help-layer>.k-scrim{top:var(--topbar-h)}
.wb-help-layer .k-sheet{display:flex;flex-direction:column}
.wb-cmd-layer>.k-dialog{top:14vh;width:auto;background:transparent;box-shadow:none;border-radius:var(--r-frame);overflow:visible;transform:translate(-50%,var(--pop-shift)) scale(.985)}
.wb-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.wb-cmd-field{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--w-regular) var(--text-read)/1 var(--font-ui);color:hsl(var(--foreground))}
.wb-cmd-field::placeholder{color:hsl(var(--muted-foreground))}

/* toasts */
.wb-toasts{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--toast-gap);pointer-events:none}
.kit-d .wb-toasts{left:calc(var(--sidebar-w) + var(--s-6));bottom:var(--s-6);width:360px}
.wb-toasts .toast{pointer-events:auto}

/* preview-state switcher (prototype only, not product UI) */
.wb-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);transition:opacity var(--motion-hover)}
.kit-d .wb-proto{right:var(--s-5);bottom:var(--s-5)}
.wb-proto>.k-anchor>button{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-pill);
  border:1px dashed hsl(var(--input));background:hsl(var(--background)/.94);backdrop-filter:blur(6px);box-shadow:var(--e-pop);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.wb-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}
.wb-proto .k-pop{right:0;left:auto}
body:has(.wb-layer.open) .wb-proto{opacity:0;pointer-events:none}

/* ======================================== PHONE ======================================== */
.kit-m .wb-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .wb-phone>.p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.wb-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.wb-pcrumb .wb-proto{position:static;margin-left:auto}
.wb-pcrumb .wb-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .wb-mbody{flex:1;padding:0 var(--s-4) var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .wb-mbody>div:not(.sf-alert){display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m .wb-mh{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-2) 0 calc(var(--s-2) * -1);font-weight:var(--w-semibold);font-size:var(--text-card)}
.kit-m .wb-msite{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:linear-gradient(180deg,hsl(var(--muted)/.55),hsl(var(--background)) 70%)}
.kit-m .wb-host{font-size:17px}
.kit-m .wb-globe{width:42px;height:42px}
.wb-mver{display:flex;align-items:center;gap:var(--s-3);padding-top:var(--s-3);border-top:1px solid hsl(var(--border))}
.wb-mver>div{display:flex;flex-direction:column}
.wb-mver>svg{color:hsl(var(--muted-foreground))}
.wb-mver .chip{margin-left:auto}
.kit-m .wb-lanes{padding:0 var(--s-4)}
.kit-m .wb-lane{align-items:flex-start}
.kit-m .wb-lane .chip{margin-top:2px}
.kit-m .wb-dl{padding:var(--s-3) var(--s-4)}
.wb-mq{min-height:60px}
.wb-mq .t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.wb-mq .t b{flex:none;font-size:var(--text-body)}
.wb-mq .t span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .wb-empty{padding:var(--s-8) var(--s-4)}

/* phone action bar: the one primary action in thumb reach */
.kit-m .wb-actbar{position:sticky;bottom:var(--tabbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
.kit-m .wb-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .wb-actbar .btn-secondary{flex:none;padding:0 var(--s-4)}
.kit-m .tabbar{bottom:0}
.kit-m .wb-ractm{flex-direction:column;align-items:stretch;gap:var(--s-2)}
.kit-m .wb-ractm>.q{text-align:center}
.wb-ab2{display:flex;gap:var(--s-2)}

/* phone menu editor */
.kit-m .wb-mtabs{padding:0 var(--s-4);margin-bottom:var(--s-4);position:sticky;top:var(--pbar-h);z-index:var(--z-sticky);background:hsl(var(--background))}
.kit-m .wb-mode .wb-card-h{padding:var(--s-4)}
.kit-m .wb-rcards{grid-template-columns:1fr;padding:0 var(--s-4) var(--s-4)}
.kit-m .wb-sync{margin:0 var(--s-4) var(--s-4);flex-wrap:wrap}
.kit-m [data-mpane=sections]{display:flex;flex-direction:column;gap:var(--s-4)}
.kit-m [data-mpane=sections]>section{display:flex;flex-direction:column;gap:var(--s-3)}
.wb-mrow{display:flex;align-items:center;gap:var(--s-2);min-height:68px;padding:var(--s-2) var(--s-2) var(--s-2) var(--s-1);border-bottom:1px solid hsl(var(--border))}
.wb-mrow:last-child{border-bottom:0}
.wb-mrow .wb-handle{width:24px;height:44px;cursor:grab}
.wb-mrow-t{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:var(--s-1) 0}
.wb-mrow-t b{display:flex;align-items:center;gap:6px;font:var(--w-semibold) var(--text-read)/1.25 var(--font-voice)}
.wb-mrow-t>span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.wb-mrow.wb-nested{padding-left:var(--s-4)}
.wb-mrow .switch{margin:0 var(--s-1)}
.kit-m .wb-link{padding:0 var(--s-2) 0 var(--s-4);min-height:56px}
.kit-m .wb-link .t{flex-direction:column;gap:2px}
.kit-m .wb-linkl{border-top:0}
.kit-m .wb-lf-g{grid-template-columns:1fr}
.kit-m .wb-linkform{padding:var(--s-4)}
.kit-m .wb-linkform .btn{height:var(--control-h-m)}
.wb-phonef-m{width:100%;max-width:300px;align-self:center;border-width:8px;border-radius:calc(var(--r-frame) * 1.6)}
.wb-phonef-m .wb-phonef-l li{padding:12px 0;font-size:var(--text-body)}
.wb-mpvlead{margin:0;text-align:center}
.kit-m .wb-ssheet .wb-fg{grid-template-columns:1fr}
.kit-m .wb-ssheet .ov-sh-f{flex-wrap:wrap}
.kit-m .wb-ssheet .ov-sh-f .r{flex:1;display:grid;grid-template-columns:1fr 1fr}
.kit-m .wb-ssheet .ov-sh-f .btn{height:var(--control-h-m-lg)}
.kit-m .wb-ssheet .ov-sh-f .btn-danger-quiet{order:2;width:100%}
.kit-m .wb-ssheet .ov-sh-h{padding:var(--s-3) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .wb-ssheet .ov-sh-b{padding:var(--s-4)}
.kit-m .wb-stabs{padding:0 var(--s-4)}
.kit-m .wb-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit-m .wb-psheet .ov-sh-f .r{flex:1;display:grid;grid-template-columns:1fr 1fr}
.kit-m .wb-psheet .ov-sh-f>.q{display:none}

/* phone releases */
.wb-editmode.m{display:flex;flex-wrap:wrap;margin:0;font-size:var(--text-small)}
.wb-pipe-arrow.m{height:20px;margin:calc(var(--s-2) * -1) 0}
.kit-m .wb-rcard{padding:var(--s-4)}
.kit-m .wb-rc-host{font-size:16px}
.kit-m .wb-big{font-size:44px}
.kit-m .wb-rc-v{gap:var(--s-4)}
.kit-m .wb-rc-f{flex-direction:column;gap:var(--s-2)}
.kit-m .wb-rc-f .btn{margin-left:0;padding-left:0}
.wb-hlist{list-style:none;margin:0;padding:0}
.wb-hrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"v t w" "v a a";align-items:center;gap:2px var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.wb-hrow:last-child{border-bottom:0}
.wb-hrow .wb-vcell{grid-area:v;font-size:var(--text-read)}
.wb-hrow .t{grid-area:t;display:flex;flex-direction:column;font-size:var(--text-small)}
.wb-hrow [data-where]{grid-area:w}
.wb-hrow [data-act]{grid-area:a}
.wb-hrow [data-act]:empty{display:none}
.wb-hrow [data-act] .btn{padding-left:0;height:36px}
.kit-m .wb-rbcmp{gap:var(--s-3)}

/* phone content frame */
.kit-m .wb-cfm{padding-bottom:var(--s-4)}
.kit-m .wb-cfm .wb-frame{flex:1;min-height:560px}
.wb-scope{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-bottom:1px solid hsl(var(--border))}
.wb-scope .code{font-size:var(--text-micro);margin-left:auto}
.kit-m .wb-pl{grid-template-columns:minmax(0,1fr)}
.kit-m .wb-pl .sh-pl-n{display:none}
.kit-m .wb-pl .sh-pl-m{padding:var(--s-3) var(--s-4) var(--s-5)}
.kit-m .wb-plgrid{grid-template-columns:1fr 1fr;gap:var(--s-2)}
.kit-m .wb-plc{min-height:60px;padding:var(--s-3);font-size:var(--text-small)}
.kit-m .wb-pl-g{font-size:18px}

/* phone layers */
.kit-m .wb-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .wb-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5);overflow-y:auto}
.kit-m .wb-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .wb-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .wb-cmd-sheet .sh-cmd-in{height:56px;padding:0 var(--s-2) 0 var(--s-4)}
.kit-m .wb-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .wb-drawer .sh-bs-body{overflow-y:auto}
.kit-m .wb-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .wb-layer .k-dialog{width:calc(100% - var(--s-8))}
.kit-m .wb-layer .k-dialog .ov-dg-f{flex-direction:column-reverse;align-items:stretch}
.kit-m .wb-layer .k-dialog .ov-dg-f .btn{height:var(--control-h-m-lg)}
.wb-dl>dt:last-of-type,.wb-dl>dd:last-of-type{border-bottom:0}
.wb-sitehead{flex-wrap:wrap;row-gap:var(--s-2)}
.wb-sitehead .wb-sitenav{order:3;flex-basis:100%}
.wb-sitehead .wb-siteic{margin-left:auto}
.wb-secsub{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.wb-fg .seg>button{min-width:0;padding:0 var(--s-2);flex:1}
.kit-m [data-mpane=preview]{display:flex;flex-direction:column;gap:var(--s-3)}
.wb-hrow{grid-template-areas:"v t w" "v t a";align-items:center}
.wb-hrow [data-act]{justify-self:end}
.wb-hrow [data-act] .btn{padding:0;height:28px}
.wb-hrow [data-act] .btn[disabled]{display:none}
.kit-m .wb-cfm>.wb-frame{gap:0}
.kit-m .wb-cfm{padding-top:var(--s-3)}