/* ════════════════════════════════════════════════════════════════════════════
 *  Finance module — shared base (behavior_split shape per ui-platform-convention §4).
 *
 *  This file holds ONLY platform-agnostic primitives. Most surfaces are
 *  structurally divergent between desktop and mobile, so the per-platform
 *  sheets (finance.desktop.css / finance.mobile.css) carry the bulk of styling.
 *
 *  All values flow from `css/app.css :root` tokens. The only raw px allowed
 *  in this module is `999px` for pill radius idiom (see mobile sheet).
 *
 *  Migrated 2026-05-09 (Finance Module UI Re-Design, task KsrJSsKqDD-q-1rNq29xQ).
 * ════════════════════════════════════════════════════════════════════════════ */

/* Module root container — applied by both renderDashboard* and renderBudgetsV2*. */
.fin-page {
  display: block;
  width: 100%;
  color: var(--text);
  background: transparent;
}

/* Section title primitive — shared between dashboard tiles, top-categories block,
   subscription radar, and budget side-panel. */
.fin-section-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}

/* Money primitive — used across desktop story tiles and mobile KPI tiles. */
.fin-money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -.01em;
}

/* Visually-hidden helper for screen-reader-only labels (carousel dots, etc.). */
.fin-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}