/* status-feedback family · prefix sf- · values from tokens only */

/* ---------- chips: additions on the shared .chip ---------- */

.chip.sf-n{padding-right:6px}

/* dot + label, the quiet form used in table cells */
.sf-dl{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-body);white-space:nowrap}
.sf-dl .dot{width:7px;height:7px}

/* status sets */
.sf-sets{display:grid;gap:0}
.kit-d .sf-sets{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-10)}
.sf-set{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-4);align-items:start;padding:var(--s-4) 0;border-top:1px solid hsl(var(--border))}
.kit-d .sf-set:nth-child(-n+2){border-top:0;padding-top:0}
.kit-m .sf-set{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
.kit-m .sf-set:first-child{border-top:0;padding-top:0}
.sf-set h3{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.sf-set h3 small{display:block;font:var(--w-regular) var(--text-micro)/1.35 var(--font-code);color:hsl(var(--muted-foreground));margin-top:3px}
.sf-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kit-m .sf-chips{gap:7px}

/* colour roles table */
.sf-roles{width:100%;font-size:var(--text-body)}
.sf-roles th{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);text-align:left;color:hsl(var(--muted-foreground));height:var(--row-th);padding:0 var(--s-3);background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border))}
.sf-roles td{height:var(--row);padding:0 var(--s-3);border-bottom:1px solid hsl(var(--border));vertical-align:middle}
.sf-roles tr:last-child td{border-bottom:0}
.sf-roles td.num{text-align:right}
.sf-roles th:last-child{text-align:right}
.sf-roles code{font-size:var(--text-micro)}
.sf-rolelist{display:flex;flex-direction:column}
.sf-rolelist li{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-3);align-items:center;padding:var(--s-3) 0;border-bottom:1px solid hsl(var(--border))}
.sf-rolelist li:last-child{border-bottom:0}
.sf-rolelist .u{grid-column:1/-1;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sf-rolelist .r{font:var(--w-medium) var(--text-micro)/1 var(--font-code);color:hsl(var(--muted-foreground))}

/* anatomy row */
.sf-anat{display:flex;flex-wrap:wrap;gap:var(--s-6) var(--s-8);align-items:flex-end}
.sf-anat figure{display:flex;flex-direction:column;gap:var(--s-2)}
.sf-anat figcaption{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
.kit-m .sf-anat{gap:var(--s-5) var(--s-6)}

/* chip in context: product rows */
.sf-rows{display:flex;flex-direction:column}
.sf-row{display:flex;align-items:center;gap:var(--s-3);min-height:60px;padding:10px var(--s-4);border-bottom:1px solid hsl(var(--border))}
.sf-row:last-child{border-bottom:0}
.sf-row .thumb{display:grid;place-items:center}
.sf-row .thumb svg{width:20px;height:26px}
.sf-row .t{flex:1;min-width:0}
.sf-row .t b{display:block;font-weight:var(--w-medium);font-size:var(--text-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-row .t span{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:1px}
.sf-row .p{font-variant-numeric:tabular-nums;font-size:var(--text-body);text-align:right;min-width:64px}
.sf-row .meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.sf-row .meta .q{font-size:var(--text-small)}

/* filter chips with counts */
.sf-filter{display:inline-flex;align-items:center;gap:var(--s-2);height:32px;padding:0 var(--s-3);border-radius:var(--r-control);border:1px solid hsl(var(--secondary-border));background:hsl(var(--background));
  font:var(--w-medium) 12.5px/1 var(--font-voice);font-stretch:var(--font-stretch-title);color:hsl(var(--foreground));
  transition:background-color var(--motion-hover),border-color var(--motion-hover),box-shadow var(--motion-focus)}
.kit-m .sf-filter{height:var(--control-h-m);padding:0 var(--s-4);font-size:13.5px}
.sf-filter:hover,.sf-filter.is-hover{background:hsl(var(--muted))}
.sf-filter .n{font:var(--w-regular) 12px/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}
.sf-filter[aria-pressed=true]{background:hsl(var(--accent));border-color:hsl(var(--primary)/.4)}
.sf-filter[aria-pressed=true] .n{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
.sf-filter.is-focus{outline:0;border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
.sf-filter[disabled]{opacity:.45;pointer-events:none}
.sf-filter.warn .n{color:hsl(var(--warning));font-weight:var(--w-semibold)}
.sf-fbar{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.kit-m .sf-fbar{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4);scrollbar-width:none}
.kit-m .sf-fbar .sf-filter{flex:none}

/* ---------- alerts ---------- */
.sf-alert{--c:var(--info);display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3) var(--s-4);border:1px solid hsl(var(--c)/.34);background:hsl(var(--c)/.07);border-radius:var(--r-card);position:relative}
.sf-alert.info{--c:var(--info)}
.sf-alert.success{--c:var(--success)}
.sf-alert.warning{--c:var(--warning)}
.sf-alert.danger{--c:var(--destructive)}
.sf-alert.locked{--c:var(--locked);background:hsl(var(--muted));border-color:hsl(var(--secondary-border))}
.sf-alert.wired{--c:var(--not-wired);border-style:dashed;border-color:hsl(var(--c)/.55)}
.sf-alert>svg{color:hsl(var(--c));margin-top:1px;width:18px;height:18px}
.sf-alert .b{flex:1;min-width:0}
.sf-alert h4{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title);color:hsl(var(--foreground))}
.sf-alert p{font-size:var(--text-body);line-height:var(--lh-body);margin-top:2px;color:hsl(var(--foreground))}
.sf-alert p+p{margin-top:var(--s-1)}
.sf-alert .q{color:hsl(var(--muted-foreground))}
.sf-alert .act{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.sf-alert .x{position:absolute;top:6px;right:6px;width:32px;height:32px}
.sf-alert.dis{padding-right:var(--s-10)}
.kit-m .sf-alert .x{top:2px;right:2px}
.sf-alert .chip{margin-left:auto;align-self:flex-start;flex:none}
.sf-alert ul{margin:var(--s-2) 0 0 var(--s-4);font-size:var(--text-body)}
.sf-alert li{margin-top:3px}
.sf-alert li a{font-weight:var(--w-medium)}
.sf-alert.sf-sm{align-items:center;padding:0 var(--s-3);min-height:36px;gap:var(--s-2)}
.sf-alert.sf-sm>svg{width:16px;height:16px;margin:0}
.sf-alert.sf-sm p{margin:0;flex:1;padding:8px 0}
.sf-alert.sf-gone{overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity var(--motion-toast-out),transform var(--motion-toast-out)}
.sf-grid-a{display:grid;gap:var(--s-4);align-items:start}
.kit-d .sf-grid-a{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-m .sf-grid-a{grid-template-columns:minmax(0,1fr)}

/* page-level banner under the top bar */
.sf-banner{--c:var(--warning);display:flex;align-items:center;gap:var(--s-3);padding:9px var(--s-5);background:hsl(var(--c)/.09);border-bottom:1px solid hsl(var(--c)/.3);font-size:var(--text-body)}
.sf-banner>svg{color:hsl(var(--c));width:16px;height:16px}
.sf-banner b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.sf-banner .g{flex:1;min-width:0}
.sf-banner.danger{--c:var(--destructive)}
.sf-banner.info{--c:var(--info)}
.kit-m .sf-banner{padding:var(--s-3);align-items:flex-start}
.sf-minipage{padding:var(--s-5) var(--s-6)}
.kit-m .sf-minipage{padding:var(--s-4)}
.sf-minipage .page-title{font-size:var(--text-20)}
.kit-m .sf-minipage .page-title{font-size:var(--text-20)}

/* ---------- toasts (anatomy of board 3: popover ground, hairline, e-toast) ---------- */
/* toast surface + parts: shared .toast in base.css */
.toast .act .btn-link{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:3px}
.sf-bar{height:4px;border-radius:var(--r-pill);background:hsl(var(--muted));overflow:hidden;margin-top:8px;position:relative}
.sf-bar>i{display:block;height:100%;width:var(--v,0%);background:hsl(var(--primary));border-radius:inherit;transition:width var(--motion-sheet-in)}
.sf-bar.ind>i{position:absolute;width:38%;left:0;animation:sf-slide var(--motion-indeterminate) var(--ease-standard) infinite}
.sf-bar.lg{height:8px;margin-top:0}
.sf-bar.ok>i{background:hsl(var(--success))}
.sf-bar.bad>i{background:hsl(var(--destructive))}
@keyframes sf-slide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}

.sf-well{background:hsl(var(--muted)/.55);border-radius:var(--r-card);padding:var(--s-5);position:relative}
.sf-kinds{display:grid;gap:var(--s-4)}
.kit-d .sf-kinds{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit-m .sf-kinds{grid-template-columns:minmax(0,1fr)}
.sf-kinds figure{display:flex;flex-direction:column;gap:var(--s-2)}
.sf-kinds figcaption{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
.sf-kinds .k-toast{opacity:1;transform:none;pointer-events:auto}

/* collapsed stack, as Sonner fans three */
.sf-stack{position:relative;height:216px}
.sf-stack .toast{position:absolute;left:0;right:0;bottom:0;transform-origin:bottom center;transition:transform var(--motion-toast-in),opacity var(--motion-toast-in)}
.sf-stack .toast:nth-child(1){transform:translateY(-16px) scale(.92);opacity:.75}
.sf-stack .toast:nth-child(2){transform:translateY(-8px) scale(.96);opacity:.9}
.sf-stack .toast:nth-child(3){transform:none}
.sf-stack.open .toast:nth-child(1){transform:translateY(-136px)}
.sf-stack.open .toast:nth-child(2){transform:translateY(-68px)}

/* live demo stage */
.sf-stage{position:relative;overflow:hidden;background:hsl(var(--muted)/.55);border-radius:var(--r-card);min-height:420px}
.kit-d .sf-stage{display:grid;grid-template-columns:260px minmax(0,1fr)}
.sf-ctl{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start}
.sf-ctl .btn{justify-content:flex-start}
.sf-ctl h3,.sf-hd{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title);margin-bottom:var(--s-2)}
.sf-toaster{position:absolute;right:var(--s-4);bottom:var(--s-4);width:min(380px,calc(100% - var(--s-8)));height:0;z-index:5}
.sf-toaster .toast{position:absolute;right:0;bottom:0;transition:opacity var(--motion-toast-out),transform var(--motion-toast-in)}
.sf-toaster .toast:not(.show){transition:opacity var(--motion-toast-out),transform var(--motion-toast-out)}
.sf-toaster .toast.show{transition:opacity var(--motion-toast-in),transform var(--motion-toast-in)}
.sf-toaster .toast.gone{opacity:0}
.sf-board{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.sf-board .sf-rows{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card)}

/* phone demo screen */
.sf-screen{position:relative;display:flex;flex-direction:column;height:560px;overflow:hidden;background:hsl(var(--background))}
.sf-screen .sf-body{flex:1;min-height:0;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);overflow:hidden}
.sf-screen .sf-pbtn{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.sf-screen .sf-pbtn .btn{padding:0 var(--s-2);font-size:13px}
.sf-screen .sf-toaster{left:var(--s-3);right:var(--s-3);bottom:86px;width:auto}

/* behaviour table */
.sf-beh{width:100%;font-size:var(--text-body)}
.sf-beh th{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);text-align:left;color:hsl(var(--muted-foreground));height:var(--row-th);padding:0 var(--s-3);background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border))}
.sf-beh td{height:var(--row);padding:0 var(--s-3);border-bottom:1px solid hsl(var(--border))}
.sf-beh tr:last-child td{border-bottom:0}
.sf-beh code{font-size:var(--text-micro)}

/* ---------- empty states ---------- */
.sf-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);padding:var(--s-12) var(--s-6)}
.kit-m .sf-empty{padding:var(--s-10) var(--s-5)}
.sf-tile{width:48px;height:48px;border-radius:var(--r-card);display:grid;place-items:center;color:hsl(var(--muted-foreground));margin-bottom:var(--s-2);
  background:repeating-linear-gradient(135deg,hsl(var(--border)/.85) 0 1px,transparent 1px 5px),hsl(var(--muted));border:1px solid hsl(var(--border))}
.sf-tile svg{width:20px;height:20px}
.sf-empty h3{font:var(--w-semibold) var(--text-section)/1.25 var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:var(--tr-section)}
.sf-empty p{font-size:var(--text-body);line-height:var(--lh-body);color:hsl(var(--muted-foreground));max-width:42ch}
.sf-empty .act{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;margin-top:var(--s-3)}
.kit-m .sf-empty .act{flex-direction:column;align-self:stretch}
.kit-m .sf-empty .act .btn{width:100%}
.sf-empty code{font-size:var(--text-small)}
.sf-compact{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4);font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.sf-compact svg{color:hsl(var(--success))}
.sf-card{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));overflow:hidden}
.sf-card>.h{display:flex;align-items:center;gap:var(--s-2);height:var(--row-th);padding: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);font-stretch:var(--font-stretch-title);color:hsl(var(--muted-foreground))}
.sf-card>.h .r{margin-left:auto}
.sf-dashbox{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);padding:var(--s-5) var(--s-4);font-size:var(--text-body);color:hsl(var(--muted-foreground));display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-start}
.sf-dashbox b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title);color:hsl(var(--foreground))}

/* ---------- loading ---------- */
.sf-sk{display:block;background:hsl(var(--foreground)/.075);border-radius:var(--r-chip);animation:kit-skel var(--motion-skeleton);height:10px}
.sf-sk.h14{height:14px}.sf-sk.w30{width:30%}.sf-sk.w40{width:40%}.sf-sk.w50{width:50%}.sf-sk.w60{width:60%}.sf-sk.w70{width:70%}.sf-sk.w80{width:80%}.sf-sk.w100{width:100%}.sf-sk.w16{width:16%}.sf-sk.w24{width:24%}
.sf-sk.ph3{aspect-ratio:3/4;height:auto;border-radius:var(--r-media);background:hsl(var(--foreground)/.06)}
.sf-sk.th{width:30px;height:40px;border-radius:var(--r-media);flex:none}
.sf-sk.pill{height:22px;width:76px;border-radius:var(--r-chip)}
.sf-skrow{display:grid;grid-template-columns:44px minmax(0,2.4fr) 1fr .6fr 1fr .9fr;gap:var(--s-4);align-items:center;min-height:56px;padding:0 var(--s-4);border-bottom:1px solid hsl(var(--border))}
.sf-skrow:last-child{border-bottom:0}
.sf-skrow.hd{min-height:var(--row-th);background:hsl(var(--muted));font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);font-stretch:var(--font-stretch-title);color:hsl(var(--muted-foreground))}
.sf-skrow .two{display:flex;flex-direction:column;gap:7px}
.sf-skrow:nth-child(3n) .sf-sk{animation-delay:.2s}
.sf-gal{display:grid;gap:var(--s-4)}
.kit-d .sf-gal{grid-template-columns:repeat(6,minmax(0,1fr))}
.kit-m .sf-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.sf-gcard{display:flex;flex-direction:column;gap:var(--s-2)}
.sf-gcard .two{display:flex;flex-direction:column;gap:7px;padding:2px 2px 0}
.sf-mrow{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));min-height:68px}
.sf-mrow:last-child{border-bottom:0}
.sf-mrow .two{flex:1;display:flex;flex-direction:column;gap:8px}
.sf-spins{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:center}
.sf-spins .spin.s12{width:12px;height:12px;border-width:2px}
.sf-spins .spin.s20{width:20px;height:20px}
.sf-spins .spin.s28{width:28px;height:28px;border-width:3px}
.sf-spins .spin{color:hsl(var(--primary))}
.sf-inl{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--text-body);color:hsl(var(--muted-foreground))}
.sf-inl .spin{color:hsl(var(--info))}
.sf-prog{display:flex;flex-direction:column;gap:var(--s-2)}
.sf-prog .l{display:flex;justify-content:space-between;gap:var(--s-3);font-size:var(--text-body)}
.sf-prog .l b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.sf-prog .l span{color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.sf-prog .s{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sf-steps{display:flex;flex-direction:column}
.sf-steps li{list-style:none;display:flex;align-items:center;gap:var(--s-3);min-height:40px;border-bottom:1px solid hsl(var(--border));font-size:var(--text-body)}
.sf-steps li:last-child{border-bottom:0}
.sf-steps li .m{width:20px;height:20px;display:grid;place-items:center;flex:none;color:hsl(var(--muted-foreground))}
.sf-steps li.done .m{color:hsl(var(--success))}
.sf-steps li.run{font-weight:var(--w-medium)}
.sf-steps li.run .spin{color:hsl(var(--info));width:14px;height:14px}
.sf-steps li.wait{color:hsl(var(--muted-foreground))}
.sf-steps li.wait .m::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid hsl(var(--secondary-border))}
.sf-steps li .tm{margin-left:auto;font:var(--w-regular) var(--text-micro)/1 var(--font-code);color:hsl(var(--muted-foreground))}
.sf-topload{height:2px;background:hsl(var(--info)/.14);position:relative;overflow:hidden}
.sf-topload i{position:absolute;inset:0 auto 0 0;width:34%;background:hsl(var(--info));animation:sf-slide var(--motion-indeterminate) var(--ease-standard) infinite}

/* ---------- errors ---------- */
.sf-errpage{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);padding:var(--s-12) var(--s-10);max-width:640px}
.kit-m .sf-errpage{padding:var(--s-8) var(--s-4)}
.sf-errpage h3{font:var(--w-semibold) var(--text-22)/1.2 var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:var(--tr-page)}
.sf-errpage p{font-size:var(--text-read);line-height:var(--lh-read);max-width:54ch}
.sf-errpage .tech{font:var(--w-regular) var(--text-code)/1.7 var(--font-code);background:hsl(var(--muted));border:1px solid hsl(var(--border));border-radius:var(--r-card);padding:var(--s-3) var(--s-4);color:hsl(var(--muted-foreground));align-self:stretch}
.sf-errpage .tech span{color:hsl(var(--foreground))}
.sf-errpage .act{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.kit-m .sf-errpage .act{flex-direction:column;align-self:stretch}
.kit-m .sf-errpage .act .btn{width:100%}
.sf-errmark{width:48px;height:48px;border-radius:var(--r-card);display:grid;place-items:center;background:hsl(var(--destructive)/.1);color:hsl(var(--destructive));border:1px solid hsl(var(--destructive)/.28)}
.sf-errmark svg{width:22px;height:22px}
.sf-inerr{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-4);border:1px solid hsl(var(--destructive)/.34);border-radius:var(--r-card);background:hsl(var(--card))}
.sf-inerr>svg{color:hsl(var(--destructive));margin-top:1px;width:18px;height:18px}
.sf-inerr .b{flex:1;min-width:0}
.sf-inerr h4{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
.sf-inerr p{font-size:var(--text-body);margin-top:2px}
.sf-inerr .meta{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:var(--s-1)}
.sf-inerr .act{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.sf-inerr.ok{border-color:hsl(var(--success)/.4)}
.sf-inerr.ok>svg{color:hsl(var(--success))}
.sf-fails{margin-top:var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control);overflow:hidden;background:hsl(var(--background))}
.sf-fails li{list-style:none;display:flex;align-items:center;gap:var(--s-3);min-height:44px;padding:6px var(--s-3);border-bottom:1px solid hsl(var(--border));font-size:var(--text-body)}
.sf-fails li:last-child{border-bottom:0}
.sf-fails li .t{flex:1;min-width:0}
.sf-fails li .t span{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sf-fails li .code{color:hsl(var(--muted-foreground));flex:none}
.kit-m .sf-fails li{flex-wrap:wrap;padding:var(--s-3)}
.sf-field{max-width:320px}
.kit-m .sf-field{max-width:none}
.sf-field+.sf-field{margin-top:var(--s-4)}
.sf-err-ic{color:hsl(var(--destructive))}
.help.err{display:flex;gap:6px;align-items:flex-start}
.help.err svg{width:13px;height:13px;margin-top:1px;flex:none}

/* ---------- environment badge ---------- */

.sf-env.staging-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sf-strip{display:flex;align-items:center;gap:var(--s-3);height:30px;padding:0 var(--s-5);background:hsl(var(--warning)/.1);border-bottom:1px solid hsl(var(--warning)/.3);
  font-size:var(--text-small);color:hsl(var(--warning))}
.sf-strip b{font:var(--w-semibold) var(--text-small)/1 var(--font-voice);font-stretch:var(--font-stretch-title)}
.sf-strip .code{color:hsl(var(--warning))}
.sf-strip .r{margin-left:auto}
.sf-envrow{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:flex-start}
.sf-envrow figure{display:flex;flex-direction:column;gap:var(--s-2)}
.sf-envrow figcaption{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
.sf-topbar .brandmini{display:flex;align-items:center;gap:var(--s-2)}
.sf-pop{width:288px;padding:var(--s-3) var(--s-4);border-radius:var(--r-card);background:hsl(var(--popover));border:1px solid hsl(var(--border));box-shadow:var(--e-pop);font-size:var(--text-body)}
.sf-pop b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title);display:block;margin-bottom:2px}
.sf-pop .code{color:hsl(var(--muted-foreground))}
.sf-phonebar{border-radius:var(--r-card);overflow:hidden;border:1px solid hsl(var(--border))}
.sf-hint{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.sf-two{display:grid;gap:var(--s-5)}
.kit-d .sf-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-m .sf-two{grid-template-columns:minmax(0,1fr)}
.sf-sub{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title);margin:var(--s-6) 0 var(--s-3)}
.sf-sub:first-child{margin-top:0}
.sf-retry-ok{display:none}
.sf-inerr.is-ok .sf-retry-bad{display:none}
.sf-inerr.is-ok .sf-retry-ok{display:block}

.sf-alert .act .btn-tertiary:first-child{margin-left:calc(var(--s-3) * -1)}
.spec-body.flush>.frame{box-shadow:none;border-radius:0}
.staging.sf-dot{display:inline-flex;align-items:center;gap:6px}
.staging.sf-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sf-rolelist .chip{justify-self:start}
.sf-row .t span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.kit-m .sf-alert .x{width:var(--control-h-m);height:var(--control-h-m);top:0;right:0}
.kit-m .sf-alert.dis{padding-right:var(--s-12)}
.kit-m .toast{flex-wrap:wrap}
.kit-m .toast .b{flex:1 1 0}
.kit-m .toast .act{order:3;flex:0 0 100%;justify-content:flex-end;margin:var(--s-1) calc(var(--s-1) * -1) -6px 0;padding-top:var(--s-1);border-top:1px solid hsl(var(--border))}
.kit-m .toast .act .btn-link{margin-right:auto}
.kit-m .sf-stack{height:196px}