/* Shared type system for the whole application, including client-facing tools.
   Layout, colour, alignment and chart coordinate sizes stay with each feature.
   Important declarations intentionally outrank late-loaded calculator styles. */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-4.1/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: "InterVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-4.1/InterVariable-Italic.woff2") format("woff2");
}
:root {
  --app-font-family: "InterVariable", Arial, Helvetica, sans-serif;
  --app-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --app-type-title: 28px;
  --app-type-section: 20px;
  --app-type-subsection: 18px;
  --app-type-body: 14px;
  --app-type-control: 14px;
  --app-type-label: 12px;
  --app-type-caption: 12px;
  --app-type-table: 12px;
  --app-type-table-heading: 13px;
  --app-type-metric: 28px;
}

body, body :where(*) { font-family: var(--app-font-family) !important; }
body :is(pre, code, kbd, samp), body :is(pre, code, kbd, samp) * { font-family: var(--app-font-mono) !important; }
body { font-size: var(--app-type-body); line-height: 1.5; font-optical-sizing: auto; }
:root :is(#app, body) :is(h1,h2,h3,h4,h5,h6) {
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
:root :is(#app, body) :is(input,select,textarea,button) { letter-spacing: normal; }
:root :is(#app, body) :is(table, input[type="number"], output) { font-variant-numeric: tabular-nums; }
:root :is(#app, body) :is(strong,b) { font-weight: 700 !important; }

@media screen {
  :root :is(#app, body) h1 { font-size: var(--app-type-title) !important; }
  :root :is(#app, body) h2 { font-size: var(--app-type-section) !important; }
  :root :is(#app, body) h3 { font-size: var(--app-type-subsection) !important; }
  :root :is(#app, body) h4 { font-size: 16px !important; }
  :root :is(#app, body) h5 { font-size: 14px !important; }
  :root :is(#app, body) h6 { font-size: 12px !important; }
  /* These h2s are page/report titles, rather than card/section headings. */
  :root :is(#app, body) :is(.page-header, .fpc-output-page > header, .mc-output-page > header, .pc-output-page > header, .rc-report-header, .pss-report-header) h2 { font-size: var(--app-type-title) !important; }
  :root :is(#app, body) :is(p,li) { font-size: var(--app-type-body); line-height: 1.5; }
  :root :is(#app, body) :is(label,legend),
  :root :is(#app, body) label > :is(span,b,strong) {
    font-size: var(--app-type-label) !important; font-weight: 600 !important;
    letter-spacing: normal; text-transform: none;
  }
  :root :is(#app, body) :is(input,select,textarea) {
    font-size: var(--app-type-control) !important; font-weight: 400 !important; line-height: 1.4;
  }
  :root :is(#app, body) :is(button,.button) { font-weight: 600 !important; }
  :root :is(#app, body) button:not([aria-label]):not(.collapse-toggle):not(.help-dot),
  :root :is(#app, body) .button { font-size: 13px !important; }
  :root :is(#app, body) :is(small,caption) { font-size: var(--app-type-caption) !important; line-height: 1.4; }
  :root :is(#app, body) :is(.phase-badge,.page-subheading,.mcx-kicker,.cfq-kicker,.cfq-card-kicker,.ds-kicker),
  :root :is(#app, body) [class$="-hero"] > span,
  :root :is(#app, body) [class$="-hero"] > div:first-child > span,
  :root :is(#app, body) .nit-head > div:first-child > span { font-size: var(--app-type-label) !important; font-weight: 700 !important; }
  :root :is(#app, body) :is(.fpc-tax-note,.fpc-roi-growth-note,.fpc-income-print-caption,.field-hint,.field-help,.muted):not(h1,h2,h3,h4,h5,h6) { font-size: var(--app-type-caption) !important; line-height: 1.5; }
  :root :is(#app, body) :is(th,td) { font-size: var(--app-type-table) !important; line-height: 1.4; }
  :root :is(#app, body) thead th { font-size: var(--app-type-table-heading) !important; font-weight: 600 !important; }
  :root :is(#app, body) :is(th,td) :is(label,span,small,output,input,select,textarea) { font-size: var(--app-type-table) !important; }
  :root :is(#app, body) thead th :is(span,small) { font-size: inherit !important; }
  :root :is(#app, body) .income-life-panel-head :is(span,strong) { font-size: var(--app-type-table-heading) !important; font-weight: 600 !important; }
  :root :is(#app, body) .fpc-income-section > th { font-size: var(--app-type-label) !important; }
  :root :is(#app, body) :is(.kpi-card,.metric-card,.mc-kpi,.pc-kpi,.rc-kpi,.ss-kpi,.fpc-overview-kpi,.mfc-highlight-card,.mfc-result-context,.nit-result-hero,.bsc-kpis article,.pss-kpis article,.dashboard-test-kpi,.networth-analysis article,.networth-item,.networth-total-card,.client-notes-summary,.report-metric) > strong { font-size: var(--app-type-metric) !important; font-weight: 700 !important; line-height: 1.2; }
  :root :is(#app, body) :is(.kpi-card,.metric-card,.mc-kpi,.pc-kpi,.rc-kpi,.ss-kpi,.fpc-overview-kpi,.bsc-kpis article,.pss-kpis article,.dashboard-test-kpi) > span { font-size: var(--app-type-label) !important; font-weight: 600; }
  :root :is(#app, body) :is(.bsc-chart-title,.fp-chart-title) > strong { font-size: var(--app-type-subsection) !important; line-height: 1.25; }
}

@media screen and (max-width: 600px) {
  :root { --app-type-title: 24px; --app-type-control: 16px; --app-type-metric: 24px; }
  /* Avoid mobile browser zoom when an adviser/client focuses a field. */
  :root :is(#app, body) :is(th,td) :is(input,select,textarea) { font-size: var(--app-type-control) !important; }
}

@media print {
  :root :is(#app, body) h1 { font-size: 18pt !important; }
  :root :is(#app, body) h2 { font-size: 13pt !important; }
  :root :is(#app, body) h3 { font-size: 10pt !important; }
  :root :is(#app, body) :is(h4,h5,h6) { font-size: 9pt !important; }
  /* Financial tables retain their feature-specific A4 sizing and pagination. */
  :root :is(#app, body) :is(input,select,textarea) { font-size: inherit; }
}