/* One sizing contract for summary indicators across every workspace.
   Extra text grows the whole grid row; no labels or explanatory data are clipped. */
html{--metric-card-min-height:134px;--metric-card-padding:16px;--metric-card-gap:8px;--metric-card-radius:12px;--metric-card-title-size:16px;--metric-card-value-size:28px;--metric-card-detail-size:12px;--metric-card-icon-size:32px}
html:root :is(.stats,.stats.three,.af-metrics,.ad-home-metrics,.mx-kpis,.ops-metrics,.wp-kpis,.mr-metrics,.mf-people-overview,.log-metrics,.sf-type-strip,.lc-card-grid.lc-metrics){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));grid-auto-rows:1fr;gap:16px;align-items:stretch;min-width:0}
html:root :is(.stat,.af-metric,.mx-kpi,.ops-metric,.wp-kpi,.mr-metric,.mf-people-metric,.log-metric,.sf-type-metric,.lc-metrics>.lc-card){box-sizing:border-box;display:grid;grid-template-rows:minmax(32px,auto) minmax(34px,auto) minmax(18px,1fr);align-items:start;align-content:start;align-self:stretch;min-width:0;min-height:var(--metric-card-min-height);padding:var(--metric-card-padding);gap:var(--metric-card-gap);margin:0;border:1px solid var(--line);border-radius:var(--metric-card-radius);background:var(--surface);text-align:start;font-family:inherit;text-decoration:none;white-space:normal;overflow-wrap:anywhere}
html:root .stats.three .stat:last-child{grid-column:auto}
/* Header layouts put the label first and reserve the same space for an icon. */
html:root :is(.stat,.af-metric,.mx-kpi,.wp-kpi,.mr-metric,.mf-people-metric,.lc-metrics>.lc-card)>:is(.stat-top,.af-metric-top,.mf-kpi-heading,.mr-metric-top,.metric-card-heading,div:not(.metric-card-detail)){display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;min-width:0;min-height:32px;margin:0;padding:0;font-size:var(--metric-card-title-size);font-weight:700;line-height:1.5;color:var(--heading-ink,var(--ink))}
html:root :is(.stat,.af-metric,.mx-kpi,.wp-kpi,.mr-metric,.mf-people-metric,.lc-metrics>.lc-card)>:is(.stat-top,.af-metric-top,.mf-kpi-heading,.mr-metric-top,.metric-card-heading,div:not(.metric-card-detail))>:is(span:not(.icon-tile):not(.wp-kpi-icon):not(.mr-metric-icon),h2){order:0;flex:1;min-width:0;font-size:var(--metric-card-title-size);font-weight:700;line-height:1.5;margin:0;color:inherit;overflow-wrap:anywhere}
html:root :is(.stat,.af-metric,.mx-kpi,.wp-kpi,.mr-metric,.mf-people-metric,.lc-metrics>.lc-card) :is(.icon-tile,.mx-icon,.wp-kpi-icon,.mr-metric-icon){order:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--metric-card-icon-size);width:var(--metric-card-icon-size);height:var(--metric-card-icon-size);min-width:var(--metric-card-icon-size);border-radius:9px;margin:0}
html:root :is(.stat,.af-metric,.mx-kpi,.wp-kpi,.mr-metric,.mf-people-metric,.lc-metrics>.lc-card) :is(.icon-tile,.mx-icon,.wp-kpi-icon,.mr-metric-icon)>.icon{width:18px;height:18px;flex:none}
html:root :is(.ops-metric,.log-metric)>span:first-child,html:root .sf-type-metric>strong{display:flex;align-items:center;min-height:32px;font-size:var(--metric-card-title-size);font-weight:700;line-height:1.5;margin:0;color:var(--heading-ink,var(--ink))}
/* Values and hints keep the same rhythm regardless of their originating module. */
html:root :is(.stat,.af-metric,.mx-kpi,.ops-metric,.wp-kpi,.mr-metric,.mf-people-metric,.log-metric,.lc-metrics>.lc-card)>strong,html:root .sf-type-metric>b{display:block;min-width:0;min-height:34px;font-size:var(--metric-card-value-size);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:normal;margin:0;padding:0;overflow-wrap:anywhere}
html:root :is(.stat,.af-metric,.mx-kpi,.ops-metric,.wp-kpi,.mr-metric,.mf-people-metric)>small,html:root .sf-type-metric>span,html:root .lc-metrics>.lc-card>.metric-card-detail{display:flex;align-items:center;justify-content:space-between;align-self:end;gap:8px;min-width:0;min-height:18px;font-size:var(--metric-card-detail-size);line-height:1.5;color:var(--muted);margin:0;padding:0;white-space:normal;overflow-wrap:anywhere}
html:root :is(.stat,.af-metric,.mx-kpi,.ops-metric,.wp-kpi,.mr-metric,.mf-people-metric)>small>.icon{flex:none;width:16px;height:16px}
html:root .lc-metrics>.lc-card>.metric-card-detail{display:grid;gap:4px}
html:root .lc-metrics>.lc-card>.metric-card-detail>:is(p,small){font-size:inherit;line-height:inherit;margin:0;color:inherit}
@media(hover:hover){html:root :is(a,button):is(.stat,.af-metric,.mx-kpi,.ops-metric,.wp-kpi,.mr-metric,.mf-people-metric,.log-metric,.sf-type-metric,.lc-metrics>.lc-card):hover{border-color:var(--brand)}}
html:root :is(a,button):is(.stat,.af-metric,.mx-kpi,.ops-metric,.wp-kpi,.mr-metric,.mf-people-metric,.log-metric,.sf-type-metric,.lc-metrics>.lc-card):focus-visible{outline:3px solid var(--action-border);outline-offset:3px}
html[data-text-size=large]{--metric-card-title-size:18px;--metric-card-value-size:32px;--metric-card-detail-size:14px}
@media(max-width:480px){html:root :is(.stats,.stats.three,.af-metrics,.ad-home-metrics,.mx-kpis,.ops-metrics,.wp-kpis,.mr-metrics,.mf-people-overview,.log-metrics,.sf-type-strip,.lc-card-grid.lc-metrics){grid-template-columns:minmax(0,1fr)}}