/* ===== DASHBOARD ===== */
.statgrid { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--cr-space-3); }
.statcard { padding:var(--cr-space-5) var(--cr-space-4); border-radius:var(--cr-radius-control); background:var(--cr-color-surface-default);
  border:1px solid var(--cr-site-hairline); text-align:left; }
.statcard svg { width:22px; height:22px; color:var(--cr-color-action-primary-fill); }
.statcard .n { font-family:var(--cr-font-sans); font-size:2rem; font-weight:600; margin-top:10px; line-height:1; }
.statcard .l { font-size:.76rem; font-weight:600; color:var(--cr-color-text-secondary); margin-top:6px; }
.breakdown { margin-top:var(--cr-space-4); display:flex; flex-direction:column; gap:var(--cr-space-4); }
.brow .h { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.brow .h svg { width:16px; height:16px; color:var(--cr-color-action-secondary-fill); }
.brow .h b { font-weight:700; }
.brow .h .c { margin-inline-start:auto; font-size:.78rem; color:var(--cr-color-text-secondary); }
.bar { display:flex; height:12px; border-radius:var(--cr-radius-pill); overflow:hidden; background:var(--cr-site-surface-tint-3); }
.bar span { display:block; transition:flex-grow .6s var(--cr-motion-ease-standard); }
.bar .s-ready { background:var(--cr-color-action-success-fill); }
.bar .s-prog { background:var(--cr-color-action-warning-fill); }
.bar .s-plan { background:var(--cr-color-action-primary-fill-hover); }
.legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; font-size:.8rem; color:var(--cr-color-text-secondary); }
/* stylelint-disable-next-line crossroads/radius-token-only -- a 10px legend
   swatch reads as a square at --cr-radius-xs and as a lozenge at --cr-radius-sm;
   3px is the one value that reads as a rounded square at this size. */
.legend i { width:10px; height:10px; border-radius:3px; display:inline-block; margin-inline-end:6px; vertical-align:middle; }