/* =============================================================================
   typography.css — Labels, subtitles, descriptions, section titles, display values
   Consolidated from: shared-styles.css, cards.css, portfolio-sections.css,
   portfolio-analysis.css, expenses.css, achievements.css
   ============================================================================= */

/* ==========================================================================
   Small Muted Labels (~0.85rem, muted color)
   ========================================================================== */

.risk-label,
.snapshot-label,
.stat-card-label,
.dividend-summary-label,
.dividend-stat-label,
.ef-status-balance-label,
.ef-status-suggestion-label,
.comparison-label,
.stat-label,
.account-bank,
.account-provider,
.achievements-progress-text,
.legend-name,
.achievement-profile-stat .stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.stat-card-label {
  margin-bottom: 0.35rem;
}

.stat-label {
  margin-bottom: 0.5rem;
}

.comparison-label {
  min-width: 80px;
}

.achievements-progress-text {
  color: var(--text-secondary);
  white-space: nowrap;
}

.legend-name {
  color: var(--text-secondary);
}

.achievement-profile-stat .stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Block Labels (display: block, small, muted)
   ========================================================================== */

.amount-label,
.filter-panel-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
}

.amount-label {
  display: block;
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   Uppercase Category Labels (small-caps pattern)
   ========================================================================== */

.summary-card-label,
.mini-chart-title,
.net-worth-label,
.performance-tile-label,
.podium-type,
.achievement-category-title,
.concentration-grid-header,
.questionnaire-label,
.achievement-card-stat .stat-label,
.overlap-table th,
.comparison-table th {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-card-label,
.mini-chart-title,
.performance-tile-label {
  font-size: 13px;
}

.summary-card-label {
  margin-bottom: 8px;
}

.net-worth-label {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 12px;
}

.performance-tile-label {
  font-weight: 500;
}

.podium-type {
  font-size: 12px;
  margin-top: 4px;
}

.achievement-category-title {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.concentration-grid-header {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-primary);
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
}

.questionnaire-label {
  font-size: 12px;
  font-weight: 500;
}

.achievement-card-stat .stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
}

.overlap-table th {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.comparison-table th {
  color: var(--text-muted);
}

/* ==========================================================================
   Subtitles (~0.875rem, muted)
   ========================================================================== */

.highlight-subtitle,
.card-subtitle,
.expense-summary-card .summary-label,
.expense-premium-notice p,
.category-modal-hint,
.image-caption,
.subscription-description {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.highlight-subtitle {
  margin-top: 0.25rem;
}

.card-subtitle {
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

.expense-summary-card .summary-label {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   Informational Labels (~0.875rem, muted, medium weight)
   ========================================================================== */

.summary-stat-label,
.plan-type,
.callout-description {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* ==========================================================================
   Descriptions (~0.9rem, muted/secondary, good line-height)
   ========================================================================== */

.section-description,
.risk-description,
.recommendation-description,
.premium-lock-overlay p,
.calculator-card p,
.paycheck-advisor-premium-note {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.section-description {
  margin: 0 0 1.25rem;
}

.risk-description {
  margin-bottom: 1rem;
}

.recommendation-description {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.snapshot-info {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.card-description,
.template-description,
.comparison-description,
.achievement-description {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.card-description,
.comparison-description {
  margin: 0 0 1rem 0;
}

.template-description {
  line-height: 1.4;
}

.achievement-description {
  color: var(--text-secondary);
  line-height: 1.4;
}

.cta-description {
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Descriptions — Near-0.9rem variants (secondary color)
   -------------------------------------------------------------------------- */

.paycheck-advisor-snapshot h3,
.paycheck-advisor-input-description {
  color: var(--text-muted);
}

.paycheck-advisor-snapshot h3 {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.paycheck-advisor-input-description {
  line-height: 1.6;
}

.subscription-info {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.auth-subtitle {
  color: var(--text-muted);
}

/* ==========================================================================
   Section Titles (~1.1rem, semibold, primary)
   ========================================================================== */

.cta-title,
.achievement-gallery-title,
.category-title,
.achievement-name,
.position-symbol,
.recommendation-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cta-title {
  margin: 0 0 0.5rem 0;
}

.achievement-gallery-title {
  margin: 0;
}

.category-title {
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-primary);
}

.achievement-name,
.position-symbol {
  font-size: 0.95rem;
}

.achievement-name {
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.recommendation-title {
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   Semibold Date Headers (13px, semibold, secondary)
   -------------------------------------------------------------------------- */

.settlement-date-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Bold Labels (~0.875rem, semibold, primary)
   -------------------------------------------------------------------------- */

.ticker-symbol {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Semibold Data Labels (~0.85rem, semibold, primary/muted)
   -------------------------------------------------------------------------- */

.legend-pct,
.source-symbol {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.source-pct {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ==========================================================================
   Display Values — Primary Colored (bold, accent)
   ========================================================================== */

.risk-value,
.stat-card-value,
.stat-value,
.total-amount {
  font-weight: 700;
  color: var(--color-primary);
}

.risk-value,
.stat-value,
.total-amount {
  font-size: 1.5rem;
}

.stat-card-value {
  font-size: 1.25rem;
}

.stat-card-value.warning {
  color: var(--color-warning);
}

.stat-card-value.success {
  color: var(--color-success);
}

/* ==========================================================================
   Display Values — Text Colored (semibold, neutral)
   ========================================================================== */

.snapshot-value,
.dividend-summary-value,
.dividend-stat-value,
.balance-native,
.position-current-value,
.expense-card .expense-amount,
.settlement-amount,
.merchant-total {
  font-weight: 600;
  color: var(--text-primary);
}

.snapshot-value {
  font-size: 1rem;
}

.dividend-summary-value {
  font-size: 1.1rem;
}

.dividend-stat-value {
  font-size: 1.1rem;
}

.balance-native {
  font-size: 1.1rem;
}

/* ==========================================================================
   Display Values — Other
   ========================================================================== */

.highlight-value {
  font-size: 1.25rem;
  font-weight: 700;
}

.amount-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-success);
}

/* ==========================================================================
   Display Values — Large (hero/stat displays)
   ========================================================================== */

.net-worth-hero {
  font-size: 40px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.performance-tile-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.expense-summary-card .summary-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
}

.month-display {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

/* ==========================================================================
   Article Typography
   ========================================================================== */

.article-description {
  font-size: 1.25rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ==========================================================================
   Page Subtitles (muted, normal weight)
   ========================================================================== */

.dashboard-subtitle,
.goals-page-subtitle {
  color: var(--text-muted);
  font-weight: 400;
}

.dashboard-subtitle {
  font-size: 15px;
  line-height: 1.5;
}

.goals-page-subtitle {
  font-size: 0.9375rem;
}

/* ==========================================================================
   Small Text (0.75-0.8rem, muted)
   ========================================================================== */

.achievement-date,
.achievement-item-date,
.tile-date,
.achievement-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tile-date {
  font-size: 0.6rem;
}

.tile-description {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.position-name {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.position-details {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ticker-name {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
}

.image-caption {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}

.legend-more {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}

/* ==========================================================================
   Display Values — Text Large (1.5rem, bold, text-primary)
   ========================================================================== */

.achievement-profile-stat .stat-value,
.achievement-card-stat .stat-number,
.achievement-stat-value,
.achievement-modal-title,
.achievement-reveal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ==========================================================================
   Heading — Subheading (1.25rem, semibold, primary)
   ========================================================================== */

.achievement-modal-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ==========================================================================
   Section Title — Medium (0.9-0.95rem, semibold, primary)
   ========================================================================== */

.achievement-summary-title,
.revealed-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.revealed-name {
  font-size: 0.95rem;
}

/* ==========================================================================
   Descriptions — Secondary (0.9-0.95rem, secondary)
   ========================================================================== */

.achievement-modal-description,
.achievement-empty-message,
.achievement-loading,
.achievement-modal-subtitle,
.achievement-reveal-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.achievement-modal-subtitle,
.achievement-reveal-subtitle {
  font-size: 0.95rem;
}

/* ==========================================================================
   Small Semibold — Secondary (0.8rem, semibold)
   ========================================================================== */

.revealed-points {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ==========================================================================
   Small Text — Secondary (0.75rem, secondary)
   ========================================================================== */

.revealed-description {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   Disclaimer Text (tiny, tertiary)
   ========================================================================== */

.paycheck-advisor-disclaimer p {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.5;
}