/* KPI cards, one layout for every staff app: one HERO card (label + context on the left, the big number on the right)
   and compact STAT TILES in a 2 or 3 column grid. Layout, size and spacing only: colours, fonts, radius and shadow come from
   each app's own .kpi card style and the shared tokens. Applied by ds/kpi.js (adds .kg, .k-hero, --kc). */
.kpis.kg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 10px;overflow:visible}
.kpis.kg>.kpi{padding:12px;gap:4px;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;flex:none}
.kpis.kg>.kpi>:is(.l,.k,.k-l,span){order:-1;font-size:12px;line-height:1.25;overflow-wrap:anywhere;margin:0}
.kpis.kg>.kpi>:is(.v,.n,.k-v,b){font-size:20px;line-height:1.15;font-weight:800;margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.kpis.kg>.kpi>:is(.s,.d,.k-s){font-size:12px;line-height:1.25;margin:0;overflow-wrap:anywhere}
/* hero: the primary emphasis card */
.kpis.kg>.kpi{grid-column:span var(--sp,2)}
.kpis.kg>.kpi.k-hero{display:grid;flex-direction:initial;justify-content:normal;grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;align-content:center;padding:18px;background:var(--accent);color:var(--on-accent,#fff);border-color:transparent}
.kpis.kg>.kpi.k-hero>:is(.l,.k,.k-l,span){grid-column:1;grid-row:1;order:0;font-size:15px;font-weight:600;color:inherit;align-self:end}
.kpis.kg>.kpi.k-hero>:is(.s,.d,.k-s){grid-column:1;grid-row:2;order:0;font-size:12px;color:inherit;opacity:.75;align-self:start}
.kpis.kg>.kpi.k-hero>:is(.v,.n,.k-v,b){grid-column:2;grid-row:1/3;order:0;font-size:34px;line-height:1.05;font-weight:800;letter-spacing:-.02em;text-align:right;color:inherit;justify-self:end;max-width:100%;white-space:nowrap}
.kpis.kg>.kpi.k-hero>:is(.v,.n,.k-v,b) *{color:inherit}
.kpis.kg>.kpi.k-hero:not(:has(.s,.d,.k-s))>:is(.l,.k,.k-l,span){grid-row:1/3;align-self:center}
/* more metrics (7 or more KPIs): the rest folds away */
.kpis.kg>.kmore{grid-column:1/-1}
.kpis.kg>.kmore>summary{list-style:none;cursor:pointer;min-height:40px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--accent-text,var(--accent));border-radius:12px;background:var(--card);box-shadow:0 0 0 .5px var(--sep,rgba(0,0,0,.12))}
.kpis.kg>.kmore>summary::-webkit-details-marker{display:none}
.kpis.kg>.kmore>.kt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:8px}
.kpis.kg>.kmore>.kt>.kpi{padding:12px;gap:4px;min-width:0;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;grid-column:span var(--sp,2)}
.kpis.kg>.kmore>.kt>.kpi>:is(.l,.k,.k-l,span){order:-1;font-size:12px;overflow-wrap:anywhere}
.kpis.kg>.kmore>.kt>.kpi>:is(.v,.n,.k-v,b){font-size:20px;font-weight:800;overflow-wrap:anywhere}
.kpis.kg>.kmore>.kt>.kpi>:is(.s,.d,.k-s){font-size:12px;overflow-wrap:anywhere}
@media (min-width:900px){.kpis.kg>.kpi.k-hero>:is(.v,.n,.k-v,b){font-size:40px}}