/* KPI tile · 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: Card. */
/* base.css */
.kpi-v{font:var(--w-semibold) var(--text-kpi)/1.1 var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:var(--tr-page);font-variant-numeric:tabular-nums}
/* families/data-display/family.css */
.dd-kpis{display:grid;gap:var(--s-4)}
/* families/data-display/family.css */
.dd-kpi{position:relative;display:flex;flex-direction:column;gap:var(--s-2);min-width:0;padding:var(--s-4) var(--s-4) var(--s-3);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-1);text-decoration:none;color:inherit;transition:border-color var(--motion-hover),background-color var(--motion-hover),box-shadow var(--motion-focus)}
/* families/data-display/family.css */
.dd-kpi.is-hover{border-color:hsl(var(--secondary-border));background:hsl(var(--muted)/.45)}
/* families/data-display/family.css */
.dd-kpi.is-focus{outline:0;border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
/* families/data-display/family.css */
.dd-kpi-k{display:flex;align-items:center;gap:var(--s-2);font:var(--w-medium) var(--text-small)/1.2 var(--font-ui);color:hsl(var(--muted-foreground))}
/* families/data-display/family.css */
.dd-kpi-k .r{margin-left:auto}
/* families/data-display/family.css */
.dd-kpi-v{font:var(--w-semibold) var(--text-kpi)/1.05 var(--font-ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:hsl(var(--foreground))}
/* families/data-display/family.css */
.dd-kpi-v small{font-size:var(--text-body);font-weight:var(--w-medium);color:hsl(var(--muted-foreground));letter-spacing:0;margin-left:var(--s-1)}
/* families/data-display/family.css */
.dd-kpi-row{display:flex;align-items:flex-end;gap:var(--s-3);min-height:34px;min-width:0}
/* families/data-display/family.css */
.dd-kpi-row .dd-spark{margin-left:auto}
/* families/data-display/family.css */
.dd-kpi-foot{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));min-height:20px}
/* families/data-display/family.css */
.dd-delta{display:inline-flex;align-items:center;gap:2px;font:var(--w-semibold) var(--text-small)/1 var(--font-ui);font-variant-numeric:tabular-nums;padding:3px 6px 3px 4px;border-radius:var(--r-chip)}
/* families/data-display/family.css */
.dd-delta svg{width:12px;height:12px}
/* families/data-display/family.css */
.dd-delta.good{color:hsl(var(--success));background:hsl(var(--success)/var(--status-soft-alpha))}
/* families/data-display/family.css */
.dd-delta.bad{color:hsl(var(--destructive));background:hsl(var(--destructive)/var(--status-soft-alpha))}
/* families/data-display/family.css */
.dd-delta.flat{color:hsl(var(--neutral));background:hsl(var(--muted))}
/* families/data-display/family.css */
.dd-spark{width:96px;height:32px;overflow:visible}
/* families/data-display/family.css */
.dd-spark .ln{fill:none;stroke:hsl(var(--chart-muted));stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
/* families/data-display/family.css */
.dd-spark .ln.now{stroke:hsl(var(--chart-1));stroke-width:2}
/* families/data-display/family.css */
.dd-spark .end{fill:hsl(var(--chart-1));stroke:hsl(var(--card));stroke-width:2}
/* families/data-display/family.css */
.dd-kpi.is-loading .dd-kpi-v, .dd-kpi.is-loading .dd-kpi-foot{color:transparent}
/* families/data-display/family.css */
.dd-kpi-err{font-size:var(--text-small);color:hsl(var(--destructive));display:flex;gap:var(--s-1);align-items:flex-start;line-height:1.35}
/* families/data-display/family.css */
.dd-kpi-empty{font:var(--w-semibold) var(--text-kpi)/1.05 var(--font-ui);color:hsl(var(--muted-foreground))}
/* families/data-display/family.css */
.dd-split{display:flex;gap:2px;height:8px;margin-top:var(--s-1)}
/* families/data-display/family.css */
.dd-split i{display:block;height:100%}
/* families/data-display/family.css */
.dd-split i:first-child{border-radius:var(--r-chip) 0 0 var(--r-chip)}
/* families/data-display/family.css */
.dd-split i:last-child{border-radius:0 var(--r-chip) var(--r-chip) 0}
/* families/data-display/family.css */
.dd-cur{display:grid;grid-template-columns:auto 1fr auto;gap:6px var(--s-3);align-items:center;font-size:var(--text-small);margin-top:var(--s-2)}
/* families/data-display/family.css */
.dd-cur .sw{width:8px;height:8px;border-radius:2px}
/* families/data-display/family.css */
.dd-cur .v{font-variant-numeric:tabular-nums;text-align:right}
/* families/data-display/family.css */
.dd-cur .q{font-variant-numeric:tabular-nums}
/* families/data-display/family.css */
.dd-carousel{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:2px var(--s-4) var(--s-2);margin:0 calc(var(--s-4) * -1);scrollbar-width:none;overscroll-behavior-x:contain}
/* families/data-display/family.css */
.dd-carousel::-webkit-scrollbar{display:none}
/* families/data-display/family.css */
.dd-carousel>*{scroll-snap-align:start}
/* families/data-display/family.css */
.dd-kpi-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
/* families/data-display/family.css */
.dd-kpi-stack .dd-kpi-v{font-size:var(--text-22)}