/* Alert and banner · the kit rules for this component, quoted from phase-2/kit (kit v3) by phase-4/src/build_pack.py.
   Tokens come from ../../styles.css. Build it as: Alert. */
/* families/status-feedback/family.css */
.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}
/* families/status-feedback/family.css */
.sf-alert.info{--c:var(--info)}
/* families/status-feedback/family.css */
.sf-alert.success{--c:var(--success)}
/* families/status-feedback/family.css */
.sf-alert.warning{--c:var(--warning)}
/* families/status-feedback/family.css */
.sf-alert.danger{--c:var(--destructive)}
/* families/status-feedback/family.css */
.sf-alert.locked{--c:var(--locked);background:hsl(var(--muted));border-color:hsl(var(--secondary-border))}
/* families/status-feedback/family.css */
.sf-alert.wired{--c:var(--not-wired);border-style:dashed;border-color:hsl(var(--c)/.55)}
/* families/status-feedback/family.css */
.sf-alert>svg{color:hsl(var(--c));margin-top:1px;width:18px;height:18px}
/* families/status-feedback/family.css */
.sf-alert .b{flex:1;min-width:0}
/* families/status-feedback/family.css */
.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))}
/* families/status-feedback/family.css */
.sf-alert p{font-size:var(--text-body);line-height:var(--lh-body);margin-top:2px;color:hsl(var(--foreground))}
/* families/status-feedback/family.css */
.sf-alert p+p{margin-top:var(--s-1)}
/* families/status-feedback/family.css */
.sf-alert .q{color:hsl(var(--muted-foreground))}
/* families/status-feedback/family.css */
.sf-alert .act{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
/* families/status-feedback/family.css */
.sf-alert .x{position:absolute;top:6px;right:6px;width:32px;height:32px}
/* families/status-feedback/family.css */
.sf-alert.dis{padding-right:var(--s-10)}
/* families/status-feedback/family.css */
.sf-alert .chip{margin-left:auto;align-self:flex-start;flex:none}
/* families/status-feedback/family.css */
.sf-alert ul{margin:var(--s-2) 0 0 var(--s-4);font-size:var(--text-body)}
/* families/status-feedback/family.css */
.sf-alert li{margin-top:3px}
/* families/status-feedback/family.css */
.sf-alert li a{font-weight:var(--w-medium)}
/* families/status-feedback/family.css */
.sf-alert.sf-sm{align-items:center;padding:0 var(--s-3);min-height:36px;gap:var(--s-2)}
/* families/status-feedback/family.css */
.sf-alert.sf-sm>svg{width:16px;height:16px;margin:0}
/* families/status-feedback/family.css */
.sf-alert.sf-sm p{margin:0;flex:1;padding:8px 0}
/* families/status-feedback/family.css */
.sf-alert.sf-gone{overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity var(--motion-toast-out),transform var(--motion-toast-out)}
/* families/status-feedback/family.css */
.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)}
/* families/status-feedback/family.css */
.sf-banner>svg{color:hsl(var(--c));width:16px;height:16px}
/* families/status-feedback/family.css */
.sf-banner b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);font-stretch:var(--font-stretch-title)}
/* families/status-feedback/family.css */
.sf-banner .g{flex:1;min-width:0}
/* families/status-feedback/family.css */
.sf-banner.danger{--c:var(--destructive)}
/* families/status-feedback/family.css */
.sf-banner.info{--c:var(--info)}
/* families/status-feedback/family.css */
.sf-alert .act .btn-tertiary:first-child{margin-left:calc(var(--s-3) * -1)}