/* One type scale for the whole app.
   The original design used 7–11px for most text and 23–28px for a few numbers, with more
   than 20 different sizes. Everything now snaps to six steps:
     caption 12 · body 13 · emphasis 14 · title 16 · section 18 · display 22–26
   Loaded after the component styles and before mobile.css. The "body" prefix only adds
   enough specificity to win over single-class component rules. */
:root {
  --fs-caption: 12px;
  --fs-body: 13px;
  --fs-emphasis: 14px;
  --fs-title: 16px;
  --fs-section: 18px;
  --fs-number: 22px;
  --fs-page: 26px;
  --lh-text: 1.5;
}

/* ---------- Captions (12px): labels, badges, hints, table headers ---------- */
body small, body kbd, body th, body th button,
body .eyebrow, body .status-badge, body .platform-pill, body .mode-pill, body .new-badge, body .nav-count,
body .nav-label, body .term-category, body .count-badge, body .report-tag,
body .chart-tab, body .legend-item, body .kpi-bottom, body .kpi-bottom span, body .change,
body .card-header p, body .section-heading p, body .store-tabs-heading p, body .table-heading p,
body .platform-sales-note, body .platform-attribution-note, body .platform-sales-label,
body .platform-card-details, body .platform-card-details span, body .platform-card-details b,
body .platform-card-spend, body .platform-card-foot, body .platform-card-split,
body .filter-description, body .filter-description span,
body .main-footer, body .main-footer span, body .footer-mark,
body .small-note, body .muted, body .integration-info small, body .theme-option-description,
body .theme-choice-indicator, body .budget-row > span, body .budget-equivalent, body .budget-actual,
body .budget-remaining, body .budget-utilization, body .budget-table-head, body .budget-table-head span,
body .channel-card p, body .channel-roas small, body .allocation-legend, body .allocation-legend span,
body .metric-strip small, body .best-row small, body .best-row span, body .live-platform-values small,
body .campaign-name small, body .term-cell small, body .store-tab-title [lang="ar"],
body .brand-wordmark small, body .global-search span, body .topbar-refresh-text small,
body .sidebar-tip p, body .chart-axis-text, body .table-footer, body .pagination button,
body .disclosure-toggle small, body .actuals-list span, body .selection-bar span,
body .template-scope-note, body .template-file-badge, body .search-result small {
  font-size: var(--fs-caption);
  line-height: var(--lh-text);
}
body .status-badge, body .platform-pill, body .mode-pill, body .new-badge, body .nav-count, body .term-category, body .count-badge {
  line-height: 1.3;
}
body th, body th button, body .nav-label, body .eyebrow { letter-spacing: .02em; }

/* ---------- Body (13px): paragraphs, table cells, buttons, inputs ---------- */
body p, body td, body li, body label, body input, body select, body textarea,
body .button, body button.button, body .select-button, body .date-range-button,
body .warning-banner, body .error-banner, body .warning-note, body .toast,
body .roas-cell, body .platform-tab-name, body .platform-tab small,
body .dropdown button, body .search-result, body .date-presets button,
body .store-item span, body .workspace span strong, body .profile span strong,
body .breadcrumbs, body .breadcrumbs span, body .breadcrumbs strong,
body .integration-info strong, body .best-row strong, body .live-platform-values b, body .live-value,
body .kpi-title, body .channel-card h3, body .budget-row, body .budget-platform-name,
body .template-grid td, body .template-grid input, body .template-grid th,
body .disclosure-toggle, body .admin-tile span, body .activity-row, body .admin-file small {
  font-size: var(--fs-body);
  line-height: var(--lh-text);
}
body .button, body .chart-tab { line-height: 1.25; }
body .template-grid th { font-size: var(--fs-caption); }

/* ---------- Emphasis (14px): names people scan for ---------- */
body .campaign-name strong, body .term-cell strong, body .nav-item span, body .nav-item,
body .store-tab-title, body .store-item, body .theme-option-heading strong,
body .platform-card-logo, body .best-card h3, body .admin-tile strong, body .page-heading p,
body .disclosure-toggle strong, body .term-card > small:first-of-type, body .modal p {
  font-size: var(--fs-emphasis);
}
body .page-heading p { line-height: 1.55; max-width: 62ch; }

/* ---------- Titles (16–18px): cards and sections ---------- */
body .card h2, body .card-header h2, body .table-heading h2, body .store-tabs-heading h2,
body .best-card h3, body .term-card h2, body .settings-card h2, body .report-card h2, body .modal h2 {
  font-size: var(--fs-title);
  line-height: 1.3;
}
body .section-heading h2 { font-size: var(--fs-section); line-height: 1.3; }
body .empty-state h3 { font-size: var(--fs-title); }

/* ---------- Numbers and the page title: big enough to stand out, no longer oversized ---------- */
body .page-heading h1 { font-size: var(--fs-page); line-height: 1.15; letter-spacing: -.02em; }
body .kpi-value, body .kpi-value span:not(.currency) { font-size: 26px; }
body .kpi-value .currency { font-size: var(--fs-caption); }
body .chart-large-value, body .donut-center strong { font-size: var(--fs-number); }
body .metric-strip strong { font-size: 20px; line-height: 1.25; }
body .platform-tab strong { font-size: 17px; }
body .platform-sales-card > strong, body .platform-card > strong { font-size: 20px; }
body .channel-roas strong { font-size: 18px; }
body .drawer-kpis strong { font-size: 18px; }
body .best-row b { font-size: var(--fs-emphasis); }

/* ---------- Colour: muted text was too faint to read at small sizes ---------- */
body small, body .muted, body .card-header p, body .section-heading p, body .kpi-bottom span,
body .campaign-name small, body .term-cell small, body .metric-strip small, body .small-note,
body .platform-card-details, body .platform-sales-label, body .filter-description {
  color: var(--text-secondary, #5d6f63);
}

/* Glossary cards: definition readable, the "typical range" line a caption. */
body .term-card p { font-size: var(--fs-body); line-height: 1.6; }
body .term-card small { font-size: var(--fs-caption); }

/* Larger text needs room: the filter row wraps onto two lines instead of pushing the page sideways. */
body .filter-bar { flex-wrap: wrap; row-gap: 10px; }
body .filter-bar .filter-group { flex-wrap: wrap; row-gap: 8px; }

/* Remaining component text set by more specific rules. */
body .compact-table thead th, body thead tr th, body .budget-summary small, body .budget-summary span,
body .store-item span small, body .workspace span small, body .profile span small,
body .donut-center small, body .donut-center span, body .budget-scope span,
body .store-logo-info small, body .store-logo-status, body .appearance-footer span,
body .report-grid .report-tag, body .settings-grid p.small-note, body main > p.small-note,
body .template-preview-tabs button span, body .global-search kbd {
  font-size: var(--fs-caption);
}
body .settings-grid .card > p, body .report-grid .card > p, body .insight-banner p, body .insight-banner p strong,
body .channel-bar-row span, body .channel-bar-row strong, body .allocation-legend b,
body .glossary-grid .live-value, body .store-logo-info strong, body .language-choice,
body .template-controls label, body .template-metric-options label, body .template-copy-controls label,
body .template-preview-tabs button, body .table-actions .button span, body .table-actions a.button span,
body .text-link, body .sidebar-tip button, body .integration-row .text-link {
  font-size: var(--fs-body);
}

/* styles.css pins .small-note to 9px in a pale grey with !important; only !important can override it. */
body .small-note { font-size: var(--fs-caption) !important; color: var(--text-secondary, #5d6f63) !important; line-height: 1.55; }

/* KPI numbers scale with the card so the value and its sparkline always fit. */
body .kpi-value-row { gap: 8px; min-width: 0; }
body .kpi-value, body .kpi-value span:not(.currency) { font-size: clamp(20px, 1.9vw, 26px); white-space: nowrap; }
body .kpi-value-row .sparkline { flex: 0 1 82px; min-width: 44px; }
body .insight-banner .text-link, body .section-heading > span.muted, body .terms-toolbar .terms-only { font-size: var(--fs-caption); }
body .empty-state p, body .template-heading p { font-size: var(--fs-body); }

/* Sidebar: keep badges small and single-line labels on one line. */
body .nav-item .new-badge, body .nav-item .nav-count { font-size: 11px; line-height: 1.3; letter-spacing: .03em; }
body .workspace span strong, body .profile span strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
body .sidebar-tip button, body .sidebar-tip .text-link { font-size: var(--fs-caption); white-space: nowrap; }
body .sidebar-tip p { font-size: var(--fs-caption); }
body .brand-wordmark small { font-size: 11px; letter-spacing: .14em; }
body .search-field input, body .terms-toolbar select, body .table-actions select, body .glossary-toolbar select, body .creative-filter-bar select, body .campaign-filter { font-size: var(--fs-body); }
body .search-field input::placeholder { font-size: var(--fs-body); }