/* ---------- Card ---------- */
.sp-card { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-1); transition: var(--transition-control); }
.sp-card--flat { box-shadow: none; }
.sp-card--raised { box-shadow: var(--shadow-3); border-color: transparent; }
.sp-card--sunken { background: var(--surface-sunken); border-color: transparent; box-shadow: none; }
.sp-card--interactive { cursor: pointer; }
.sp-card--interactive:hover { border-color: var(--ink-200); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.sp-card--interactive:active { transform: translateY(0); box-shadow: var(--shadow-1); }
.sp-card--selected { border-color: var(--velocity-500); box-shadow: 0 0 0 1px var(--velocity-500); }
.sp-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-hairline); }
.sp-card__title { font: var(--text-heading-s); letter-spacing: var(--tracking-heading); color: var(--text-strong); margin: 0; }
.sp-card__sub { font: var(--text-caption); color: var(--text-muted); margin: 2px 0 0; }
.sp-card__body { padding: var(--space-6); }
.sp-card__footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border-hairline); display: flex; align-items: center; gap: var(--space-4); }

/* ---------- Tabs ---------- */
.sp-tabs { display: flex; align-items: center; gap: var(--space-7); border-bottom: 1px solid var(--border-hairline); }
.sp-tabs__tab { position: relative; appearance: none; background: none; border: 0; padding: 0 0 11px; margin-bottom: -1px; font-family: var(--font-text); font-size: 14px; font-weight: 600; letter-spacing: var(--tracking-label); color: var(--ink-500); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: color var(--duration-fast) var(--ease-express); }
.sp-tabs__tab:hover { color: var(--ink-800); }
.sp-tabs__tab[aria-selected="true"] { color: var(--ink-900); }
.sp-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--velocity-500); }
.sp-tabs__tab:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }
.sp-tabs__count { font: var(--text-mono-s); color: var(--ink-400); background: var(--paper-100); border-radius: var(--radius-full); padding: 1px 6px; }
.sp-tabs--segmented { gap: 2px; border: 1px solid var(--ink-100); background: var(--paper-100); border-radius: var(--radius-control); padding: 3px; display: inline-flex; }
.sp-tabs--segmented .sp-tabs__tab { padding: 0 12px; height: 28px; margin: 0; border-radius: var(--radius-xs); font-size: 13px; }
.sp-tabs--segmented .sp-tabs__tab[aria-selected="true"] { background: var(--paper-000); box-shadow: var(--shadow-1); }
.sp-tabs--segmented .sp-tabs__tab[aria-selected="true"]::after { display: none; }

/* ---------- StatTile ---------- */
.sp-stat { display: flex; flex-direction: column; gap: 6px; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); }
.sp-stat__label { font: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--text-faint); }
.sp-stat__value { font: var(--text-display-m); font-size: 32px; letter-spacing: var(--tracking-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.sp-stat__delta { display: inline-flex; align-items: center; gap: 4px; font: var(--text-mono-s); font-size: 12px; }
.sp-stat__delta--up { color: var(--green-600); }
.sp-stat__delta--down { color: var(--red-600); }
.sp-stat__delta--flat { color: var(--ink-400); }
.sp-stat__foot { font: var(--text-caption); color: var(--text-faint); }

/* ---------- EmptyState ---------- */
.sp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); padding: var(--space-11) var(--space-8); }
.sp-empty__glyph { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--velocity-050); color: var(--velocity-500); display: flex; align-items: center; justify-content: center; }
.sp-empty__title { font: var(--text-heading-m); letter-spacing: var(--tracking-heading); color: var(--text-strong); margin: 0; }
.sp-empty__body { font: var(--text-body-m); color: var(--text-muted); margin: 0; max-width: 42ch; }