/* Environment badge · 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: Badge. */
/* base.css */
.staging{font:var(--w-semibold) var(--text-10-5)/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--warning));background:hsl(var(--warning)/.12);border:1px solid hsl(var(--warning)/.4);padding:5px 8px;border-radius:var(--r-control)}
/* base.css */
.env-prod, .env-local{font:var(--w-semibold) var(--text-10-5)/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r-control);white-space:nowrap;color:hsl(var(--neutral));background:hsl(var(--neutral)/.1);border:1px solid hsl(var(--neutral)/.3)}
/* base.css */
.staging{white-space:nowrap}
/* families/status-feedback/family.css */
.sf-env.staging-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
/* families/status-feedback/family.css */
.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))}
/* families/status-feedback/family.css */
.sf-strip b{font:var(--w-semibold) var(--text-small)/1 var(--font-voice);font-stretch:var(--font-stretch-title)}
/* families/status-feedback/family.css */
.sf-strip .code{color:hsl(var(--warning))}
/* families/status-feedback/family.css */
.sf-strip .r{margin-left:auto}
/* families/status-feedback/family.css */
.sf-envrow{display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:flex-start}
/* families/status-feedback/family.css */
.sf-envrow figure{display:flex;flex-direction:column;gap:var(--s-2)}
/* families/status-feedback/family.css */
.sf-envrow figcaption{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground))}
/* families/status-feedback/family.css */
.staging.sf-dot{display:inline-flex;align-items:center;gap:6px}
/* families/status-feedback/family.css */
.staging.sf-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}