/* public/css/user/typography.css */
/*
  RealRates authenticated user-shell typography.

  This is the single typography layer for the complete user shell. Route CSS
  may still own colour, spacing and layout, but text sizing is normalised here.
  The selectors deliberately include the shell and its mount IDs so this file
  remains authoritative even when route-specific stylesheets load later.

  There are no device checks or alternate mobile components in this file.
  Fluid type uses clamp(), while unusually narrow dashboard cards respond to
  their own width with container units.
*/

.page-user-app {
  font-family: var(--rr-font-sans);
  font-size: var(--rr-text-body);
  line-height: var(--rr-line-height-copy);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   Shared user-shell chrome
   ========================================================================== */

.page-user-app .nav-brand-title {
  font-size: clamp(1.75rem, 1.45rem + 1.35vw, 2.625rem);
  line-height: 0.98;
}

.page-user-app .nav-brand-tagline,
.page-user-app .nav-right a,
.page-user-app .nav-account-trigger {
  font-size: var(--rr-text-small);
}

.page-user-app .nav-account-arrow,
.page-user-app .nav-current-user-label {
  font-size: var(--rr-text-micro);
}

.page-user-app .nav-current-user-value,
.page-user-app .nav-user-email,
.page-user-app .muted,
.page-user-app .contribution-notes,
.page-user-app .footer {
  font-size: var(--rr-text-small);
}

.page-user-app label.consent {
  font-size: var(--rr-text-small);
}

.page-user-app .auth-loading-card h1 {
  font-size: var(--rr-heading-section);
  line-height: var(--rr-line-height-tight);
}

.page-user-app .auth-loading-card p {
  font-size: var(--rr-text-body);
}

.page-user-app .app-route-error h2 {
  font-size: var(--rr-heading-card);
  line-height: var(--rr-line-height-tight);
}

.page-user-app .app-route-error p,
.page-user-app .app-route-error a {
  font-size: var(--rr-text-body);
}

/* ==========================================================================
   Shared page hero
   ========================================================================== */

.page-user-app #pageHeroMount .page-hero-eyebrow {
  font-size: var(--rr-text-micro);
}

.page-user-app #pageHeroMount .page-hero-title {
  font-size: var(--rr-heading-page);
  line-height: var(--rr-line-height-tight);
  letter-spacing: var(--rr-letter-spacing-heading);
  text-wrap: balance;
}

.page-user-app #pageHeroMount .page-hero-subtitle {
  font-size: var(--rr-text-body);
  line-height: var(--rr-line-height-copy);
}

/* ==========================================================================
   Shared route content, forms and controls
   ========================================================================== */

.page-user-app #appView {
  font-size: var(--rr-text-body);
  line-height: var(--rr-line-height-copy);
}

.page-user-app #appView :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-family: var(--rr-font-sans);
  font-size: var(--rr-text-control) !important;
  line-height: 1.3;
}

.page-user-app #appView :where(button, [role="button"], .button) {
  font-family: var(--rr-font-sans);
  font-size: var(--rr-text-button);
}

.page-user-app #appView :where(h1, h2, h3, h4) {
  text-wrap: balance;
}

/* ==========================================================================
   Dashboard / account
   ========================================================================== */

.page-user-app #appView .account-card h1 {
  font-size: var(--rr-heading-page);
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView .account-card h2 {
  font-size: var(--rr-heading-section);
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView .account-card h3,
.page-user-app #appView .account-payment-history-section h3 {
  font-size: var(--rr-heading-card);
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView .account-card > p,
.page-user-app #appView .account-section-heading p,
.page-user-app #appView .account-empty-copy,
.page-user-app #appView .account-muted-copy {
  font-size: var(--rr-text-body) !important;
  line-height: var(--rr-line-height-copy) !important;
}

.page-user-app #appView .account-error-copy,
.page-user-app #appView .account-previous-searches-title,
.page-user-app #appView .account-previous-searches-list a,
.page-user-app #appView .account-previous-searches-empty,
.page-user-app #appView .account-purchase-benefit-item,
.page-user-app #appView .account-search-product-copy,
.page-user-app #appView .account-search-product-active-copy p,
.page-user-app #appView .account-contribution-card p,
.page-user-app #appView .account-payment-table {
  font-size: var(--rr-text-small) !important;
  line-height: var(--rr-line-height-copy) !important;
}

.page-user-app #appView .account-status-chip,
.page-user-app #appView .account-status-value,
.page-user-app #appView .account-product-pill,
.page-user-app #appView .account-product-subcopy,
.page-user-app #appView .account-purchase-reward-conditions,
.page-user-app #appView .account-contribution-info-subcopy,
.page-user-app #appView .account-payment-table th {
  font-size: var(--rr-text-micro) !important;
  line-height: 1.25;
}

.page-user-app #appView .account-purchase-benefits-title,
.page-user-app #appView .account-selected-summary strong {
  font-size: var(--rr-text-body) !important;
}

.page-user-app #appView .account-selected-summary span,
.page-user-app #appView .account-purchase-reward-copy,
.page-user-app #appView .account-contribution-info-copy {
  font-size: var(--rr-text-lead) !important;
  line-height: 1.3;
}

.page-user-app #appView .account-primary-button {
  font-size: var(--rr-text-button);
}

/* The dashboard intentionally keeps three product cards across. */
.page-user-app #appView .account-search-product-card {
  container-type: inline-size;
  container-name: rr-account-search-card;
}

.page-user-app #appView .account-contribution-card {
  container-type: inline-size;
  container-name: rr-account-contribution-card;
}

.page-user-app #appView .account-product-option,
.page-user-app #appView .account-product-option-link {
  container-type: inline-size;
  container-name: rr-account-option-card;
}

.page-user-app #appView .account-search-product-topline h3,
.page-user-app #appView .account-contribution-card-topline h3 {
  min-width: 0;
  max-width: 100%;
  font-size: var(--rr-heading-card) !important;
  font-size: clamp(1rem, 11cqw, 1.3rem) !important;
  line-height: 1.12;
  letter-spacing: -0.018em;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal;
  text-wrap: balance;
}

.page-user-app #appView .account-search-product-price {
  font-size: clamp(1.375rem, 18cqw, 2.625rem) !important;
  line-height: 1;
  white-space: nowrap;
}

.page-user-app #appView .account-product-price {
  font-size: clamp(0.875rem, 11cqw, 1.25rem) !important;
  line-height: 1.15;
}

.page-user-app #appView .account-contribution-card-action,
.page-user-app #appView .account-product-option,
.page-user-app #appView .account-product-option-link {
  font-size: var(--rr-text-button) !important;
  font-size: clamp(0.875rem, 9cqw, 1rem) !important;
  line-height: 1.2;
  overflow-wrap: normal;
  word-break: normal;
}

.page-user-app #appView .account-product-option.is-disabled,
.page-user-app #appView .account-product-option.is-disabled .account-product-price {
  font-size: var(--rr-text-button) !important;
}

.page-user-app #appView .account-status-chip,
.page-user-app #appView .account-product-pill {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* ==========================================================================
   Shared car-loan and personal-loan profile forms
   ========================================================================== */

.page-user-app #appView :where(.form-section-title, .carloan-profile-title) {
  font-size: var(--rr-heading-card) !important;
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView :where(
  .page-search label,
  .page-contribute label,
  .carloan-profile-field-label,
  .loan-outcome-grid label,
  .contribution-payment-grid label
) {
  font-size: var(--rr-text-small) !important;
  line-height: 1.3;
}

.page-user-app #appView :where(
  .field-help,
  .carloan-field-help,
  .estimate-note-line,
  .carloan-estimate-note-line,
  .optional-label,
  .carloan-readonly-label,
  .compact-rate-control label,
  .compact-rate-control strong,
  .mini-rate-labels
) {
  font-size: var(--rr-text-micro) !important;
  line-height: 1.35;
}

.page-user-app #appView :where(
  .mini-metric,
  .carloan-mini-metric,
  .estimate-cell,
  .merged-estimate-cell,
  .carloan-estimate-cell,
  .estimate-signal,
  .carloan-readonly-value
) {
  font-size: var(--rr-text-small) !important;
  line-height: 1.35;
}

.page-user-app #appView :where(.info-dot, .carloan-info-dot) {
  font-size: var(--rr-text-micro) !important;
}

/* ==========================================================================
   Car-loan / personal-loan contribution
   ========================================================================== */

.page-user-app #appView :where(
  .loan-outcome-title,
  .private-evidence-title,
  .contribution-payment-header h2
) {
  font-size: var(--rr-heading-card) !important;
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView :where(
  .contribution-context-box strong,
  .evidence-upload-box strong
) {
  font-size: var(--rr-text-body) !important;
}

.page-user-app #appView :where(
  .contribution-context-box p,
  .evidence-file-button,
  .private-evidence-card-privacy,
  .contribute-submit-copy,
  .consent,
  .submission-success-box,
  .submission-error-box,
  .submit-status,
  .contribution-payment-header p,
  .contribution-payment-grid label,
  .contribution-payment-help,
  .contribution-payment-locked-note
) {
  font-size: var(--rr-text-small) !important;
  line-height: var(--rr-line-height-copy);
}

.page-user-app #appView :where(
  .evidence-upload-box > span,
  .evidence-file-name,
  .evidence-privacy-note,
  .contribution-payment-header .section-eyebrow,
  .contribution-payment-summary
) {
  font-size: var(--rr-text-micro) !important;
  line-height: 1.4;
}

.page-user-app #appView .rate-input-suffix {
  font-size: var(--rr-text-small) !important;
}

/* ==========================================================================
   Car-loan / personal-loan search
   ========================================================================== */

.page-user-app #appView .search-page-eyebrow,
.page-user-app #appView .search-trust-pill,
.page-user-app #appView #resultsSummaryText,
.page-user-app #appView .result-meta,
.page-user-app #appView .profile-similarity-block,
.page-user-app #appView .match-block {
  font-size: var(--rr-text-micro) !important;
}

.page-user-app #appView .search-page-intro h1 {
  font-size: var(--rr-heading-page) !important;
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView :where(.recap-title, .results-card h2, .results-empty h2) {
  font-size: var(--rr-heading-section) !important;
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView :where(.result-card-compact-title, .result-lender) {
  font-size: var(--rr-heading-card) !important;
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView :where(
  .search-page-lead,
  .recap-copy,
  .recap-lead,
  .results-empty
) {
  font-size: var(--rr-text-body) !important;
  line-height: var(--rr-line-height-copy);
}

.page-user-app #appView :where(
  .search-disclaimer-box,
  .result-card-context,
  .recap-inline-select,
  .recap-model-label,
  .recap-model-result,
  .recap-legacy-summary p,
  .generated-card-image-loading,
  .generated-card-image-error,
  .error-box,
  .loading-box
) {
  font-size: var(--rr-text-small) !important;
  line-height: var(--rr-line-height-copy);
}

.page-user-app #appView .result-rate {
  font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.75rem) !important;
}

/* ==========================================================================
   Mortgage wizard: hierarchy
   ========================================================================== */

.page-user-app #appView .mortgage-step-card h2 {
  font-size: var(--rr-heading-section) !important;
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView :where(
  .mortgage-start-section h3,
  .mortgage-start-section-heading h3,
  .mortgage-government-panel-heading h3,
  .mortgage-liability-panel__header h3,
  .mortgage-applicant-panel__header h3,
  .private-evidence-title,
  .contribution-payment-heading h2,
  .mortgage-complete-box h3,
  .mortgage-reward-header h3
) {
  font-size: var(--rr-heading-card) !important;
  line-height: var(--rr-line-height-tight);
}

.page-user-app #appView :where(
  .mortgage-liability-type-box__header h4,
  .mortgage-liability-row__header h4,
  .mortgage-step-card--liability .mortgage-inherited-card__header h4
) {
  font-size: var(--rr-text-body) !important;
  line-height: 1.25;
}

.page-user-app #appView :where(
  .mortgage-step-description,
  .mortgage-step-description--compact,
  .mortgage-start-intro,
  .mortgage-placeholder-box span,
  .mortgage-applicant-panel__header p,
  .mortgage-government-panel-heading p,
  .mortgage-evidence-explanation-row p,
  .mortgage-start-reward p,
  .mortgage-complete-box p
) {
  font-size: var(--rr-text-body) !important;
  line-height: var(--rr-line-height-copy);
}

/* ==========================================================================
   Mortgage wizard: labels, controls and actions
   ========================================================================== */

.page-user-app #appView :where(
  .mortgage-form-label,
  .mortgage-question-row__label .mortgage-form-label,
  .mortgage-inline-label,
  .mortgage-rate-field__label,
  .mortgage-mini-label,
  .mortgage-liability-field .mortgage-form-label,
  .mortgage-evidence-file-label,
  .mortgage-reward-field-label,
  .mortgage-reward-grid label,
  .contribution-payment-grid label
) {
  font-size: var(--rr-text-small) !important;
  line-height: 1.3;
}

.page-user-app #appView :where(
  .mortgage-choice-button,
  .mortgage-choice-button--standard,
  .mortgage-choice-button--suggestion,
  .mortgage-lender-suggestion-button,
  .mortgage-checkbox-card,
  .mortgage-checkbox-card--compact,
  .mortgage-inline-checkbox,
  .mortgage-button--small,
  .mortgage-family-support-main .mortgage-choice-button--standard,
  .mortgage-applicant-handoff,
  .mortgage-reward-ack,
  .mortgage-evidence-file-input,
  .mortgage-reward-input,
  .mortgage-complete-actions a,
  .mortgage-complete-actions button,
  .evidence-file-button
) {
  font-size: var(--rr-text-small) !important;
  line-height: 1.3;
}

.page-user-app #appView :where(
  .mortgage-select,
  .mortgage-textarea,
  .mortgage-text-input,
  .mortgage-row-control,
  .mortgage-smart-money-input,
  .mortgage-government-input-wrap input,
  .contribution-payment-grid input
) {
  font-size: var(--rr-text-control) !important;
}

/* ==========================================================================
   Mortgage wizard: secondary and compact information
   ========================================================================== */

.page-user-app #appView :where(
  .mortgage-step-progress__title,
  .mortgage-step-progress__number,
  .mortgage-step-kicker,
  .mortgage-small-help,
  .mortgage-question-row__label .mortgage-small-help,
  .mortgage-info-dot,
  .mortgage-step-progress__folder-icon,
  .mortgage-step-progress__item--child .mortgage-step-progress__number,
  .mortgage-shared-applicant-selector__label,
  .mortgage-shared-applicant-selector__empty,
  .mortgage-applicant-pill,
  .mortgage-applicant-chip,
  .mortgage-choice-button--applicant-chip,
  .mortgage-included-savings__item small,
  .mortgage-liability-field .mortgage-form-label,
  .mortgage-flag-column h4,
  .mortgage-government-benefit-label small,
  .mortgage-government-manual-field > span:first-child,
  .mortgage-government-duty-summary span,
  .mortgage-government-calculator-grid span,
  .mortgage-loan-estimate-copy small,
  .mortgage-memory-note,
  .mortgage-linked-liability-card small,
  .mortgage-linked-liability-card dt,
  .mortgage-linked-liability-card dd,
  .mortgage-repayment-estimate-panel span,
  .mortgage-repayment-estimate-panel small,
  .private-evidence-card-upload span,
  .evidence-privacy-note,
  .evidence-file-name,
  .consent,
  .contribution-payment-locked-pill,
  .contribution-payment-help,
  .mortgage-government-duty-control--derived > small,
  .mortgage-included-savings--linked > p,
  .mortgage-included-savings--linked .mortgage-included-savings__item small,
  .mortgage-evidence-file-help,
  .mortgage-reward-field-help,
  .mortgage-evidence-selected-file,
  .mortgage-evidence-selected-file small,
  .mortgage-turnstile-copy,
  .mortgage-evidence-status-line,
  .mortgage-reward-status-line,
  .mortgage-reward-summary span,
  .mortgage-reward-declaration span,
  .mortgage-reward-summary
) {
  font-size: var(--rr-text-micro) !important;
  line-height: 1.4;
}

.page-user-app #appView :where(
  .mortgage-step-progress__label,
  .mortgage-row-warning,
  .mortgage-start-row-warning,
  .mortgage-start-warning,
  .mortgage-start-validation,
  .mortgage-start-ready,
  .mortgage-inline-status,
  .mortgage-step-progress__folder-title,
  .mortgage-savings-entry__header strong,
  .mortgage-liability-panel__header p,
  .mortgage-liability-row__header p,
  .mortgage-liability-empty-help,
  .mortgage-liability-none-note,
  .mortgage-government-used-row > span,
  .mortgage-government-duty-control > span,
  .mortgage-government-benefit-label strong,
  .mortgage-government-calculator-warnings p,
  .mortgage-loan-estimate-copy strong,
  .mortgage-loan-estimate-copy span,
  .mortgage-linked-liability-card strong,
  .mortgage-repayment-estimate-panel strong,
  .private-evidence-card-upload strong,
  .evidence-privacy-note strong,
  .submission-success-box,
  .contribution-payment-heading p,
  .mortgage-government-duty-control--derived > strong,
  .mortgage-included-savings--linked > strong,
  .mortgage-included-savings--linked .mortgage-included-savings__item span,
  .mortgage-property-complexity-note,
  .mortgage-smart-money-feedback,
  .mortgage-smart-money__display small,
  .mortgage-applicant-panel .mortgage-inherited-field__label,
  .mortgage-applicant-panel .mortgage-inherited-label,
  .mortgage-applicant-panel .mortgage-additional-details-label,
  .mortgage-step-card--liability .mortgage-inherited-section__heading small,
  .mortgage-step-card--liability .mortgage-inherited-card__header small,
  .mortgage-step-card--liability .mortgage-inherited-card__header .mortgage-inherited-label,
  .mortgage-step-card--liability .mortgage-inherited-label,
  .mortgage-step-card--liability .mortgage-inherited-field__label,
  .mortgage-step-card--liability .mortgage-inherited-section__heading span,
  .mortgage-select--placeholder,
  .mortgage-family-support-slot--dash,
  .mortgage-muted-dash
) {
  font-size: var(--rr-text-small) !important;
  line-height: 1.4;
}

/* ==========================================================================
   Mortgage wizard: values and constrained card content
   ========================================================================== */

.page-user-app #appView :where(
  .mortgage-choice-button__number,
  .mortgage-applicant-count-button__number,
  .mortgage-smart-money__display strong,
  .mortgage-government-duty-summary strong,
  .mortgage-government-calculator-grid strong,
  .mortgage-reward-summary strong
) {
  font-size: var(--rr-text-lead) !important;
}

.page-user-app #appView :where(
  .mortgage-choice-button__text,
  .mortgage-applicant-count-button__word,
  .mortgage-applicant-nickname-input,
  .mortgage-applicant-nickname-card--medium-name .mortgage-applicant-nickname-input,
  .mortgage-applicant-nickname-card--long-name .mortgage-applicant-nickname-input,
  .mortgage-applicant-nickname-card--standard-name .mortgage-applicant-nickname-input,
  .mortgage-applicant-nickname-status
) {
  font-size: var(--rr-text-micro) !important;
}

.page-user-app #appView :where(
  .mortgage-input-suffix,
  .mortgage-government-input-prefix,
  .mortgage-government-input-suffix,
  .mortgage-smart-money-digit,
  .mortgage-smart-money-separator,
  .mortgage-inherited-value,
  .mortgage-row-control--readonly,
  .mortgage-inherited-choice,
  .mortgage-choice-button.mortgage-inherited-choice,
  .mortgage-inherited-field__value,
  select.mortgage-inherited-field__select
) {
  font-size: var(--rr-text-small) !important;
}

/* Do not let old phone-specific rules collapse readable text below 12px. */
.page-user-app #appView :where(
  .account-card,
  .carloan-profile-grid,
  .contribute-workspace,
  .search-workspace,
  .mortgage-wizard-shell
) {
  --rr-user-min-readable: var(--rr-text-micro);
}

/* ========================================================================== 
   Phase 4: component-width-aware typography and wrapping
   ========================================================================== */

/*
  The user shell keeps one HTML/JavaScript path for every device. These named
  containers let unusually narrow cards react to the space they actually
  receive instead of asking whether the viewport is a phone, tablet or desktop.

  Readability floor:
  - important compact text never falls below 0.75rem / 12px;
  - controls remain at least 0.875rem / 14px where their component has room;
  - long labels wrap rather than forcing a smaller global type scale.
*/

/* Dashboard product cards -------------------------------------------------- */

.page-user-app #appView .account-search-product-card :where(
  .account-search-product-copy,
  .account-search-product-active-copy p
) {
  font-size: clamp(0.75rem, 8.5cqw, 0.875rem) !important;
}

.page-user-app #appView .account-contribution-card p {
  font-size: clamp(0.75rem, 8.5cqw, 0.875rem) !important;
}

.page-user-app #appView .account-search-product-card :where(
  .account-primary-button,
  .account-product-option,
  .account-product-option-link,
  .account-product-availability
),
.page-user-app #appView .account-contribution-card .account-contribution-card-action {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(0.875rem, 9cqw, 1rem) !important;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

@container rr-account-search-card (max-width: 160px) {
  .account-search-product-topline {
    align-items: flex-start !important;
  }

  .account-search-product-topline h3,
  .account-search-product-price,
  .account-product-availability,
  .account-product-pill {
    max-width: 100% !important;
  }

  .account-product-availability,
  .account-product-pill {
    white-space: normal !important;
    text-align: center;
  }
}

@container rr-account-contribution-card (max-width: 160px) {
  .account-contribution-card-topline {
    align-items: flex-start !important;
  }

  .account-contribution-card-topline h3,
  .account-contribution-card-action {
    max-width: 100% !important;
  }
}


@container rr-account-search-card (max-width: 120px) {
  .page-user-app #appView .account-search-product-topline {
    width: 100%;
    min-width: 0;
    flex-direction: column !important;
  }

  .page-user-app #appView .account-search-product-topline h3,
  .page-user-app #appView .account-product-availability,
  .page-user-app #appView .account-product-pill {
    width: 100%;
    min-width: 0;
    overflow-wrap: anywhere !important;
    text-wrap: wrap !important;
  }

  .page-user-app #appView .account-search-product-price {
    font-size: 1.25rem !important;
    letter-spacing: -0.04em;
  }
}

@container rr-account-contribution-card (max-width: 120px) {
  .page-user-app #appView .account-contribution-card-topline {
    width: 100%;
    min-width: 0;
    flex-direction: column !important;
  }

  .page-user-app #appView .account-contribution-card-topline h3,
  .page-user-app #appView .account-contribution-card-action {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere !important;
    text-wrap: wrap !important;
  }
}

/* Mortgage component containers ------------------------------------------ */

/* Safe block/grid wrappers whose width is established by their parent. */
.page-user-app #appView .mortgage-start-row__answer {
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  container-type: inline-size;
  container-name: rr-mortgage-start-answer;
}

.page-user-app #appView .mortgage-question-row__controls {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: rr-mortgage-controls;
}

.page-user-app #appView .mortgage-checkbox-grid {
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  container-name: rr-mortgage-checkboxes;
}

.page-user-app #appView .mortgage-applicant-panel {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: rr-mortgage-applicant-panel;
}

/* Applicant-card text uses the width of its answer/control container. */
.page-user-app #appView .mortgage-choice-button--applicant-count {
  box-sizing: border-box;
}

.page-user-app #appView .mortgage-choice-button--applicant-count .mortgage-choice-button__number,
.page-user-app #appView .mortgage-choice-button--applicant-count .mortgage-applicant-count-button__number {
  font-size: clamp(1.125rem, 24cqw, 1.45rem) !important;
  line-height: 1;
}

.page-user-app #appView .mortgage-choice-button--applicant-count .mortgage-choice-button__text,
.page-user-app #appView .mortgage-choice-button--applicant-count .mortgage-applicant-count-button__word {
  font-size: var(--rr-text-micro) !important;
  line-height: 1.12;
  white-space: normal;
  text-wrap: balance;
}

.page-user-app #appView .mortgage-applicant-nickname-card .mortgage-applicant-nickname-input,
.page-user-app #appView .mortgage-applicant-nickname-card--medium-name .mortgage-applicant-nickname-input,
.page-user-app #appView .mortgage-applicant-nickname-card--long-name .mortgage-applicant-nickname-input,
.page-user-app #appView .mortgage-applicant-nickname-card--standard-name .mortgage-applicant-nickname-input {
  font-size: clamp(0.75rem, 6cqw, 0.875rem) !important;
  letter-spacing: -0.01em;
}

.page-user-app #appView .mortgage-applicant-nickname-card .mortgage-applicant-nickname-status {
  font-size: clamp(0.75rem, 14cqw, 0.8125rem) !important;
}

/* Standard choice groups keep readable type and wrap labels when cramped. */
.page-user-app #appView .mortgage-question-row__controls :where(
  .mortgage-choice-button,
  .mortgage-choice-button--standard,
  .mortgage-choice-button--suggestion,
  .mortgage-lender-suggestion-button,
  .mortgage-inline-checkbox
) {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(0.75rem, 3.9cqw, 0.875rem) !important;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

@container rr-mortgage-start-answer (max-width: 520px) {
  .mortgage-choice-pair--applicant-count {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
  }

  .mortgage-choice-pair--applicant-count .mortgage-choice-button--applicant-count,
  .mortgage-choice-pair--applicant-nicknames .mortgage-applicant-nickname-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none;
  }
}

@container rr-mortgage-start-answer (max-width: 300px) {
  .mortgage-choice-pair--applicant-count {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container rr-mortgage-controls (max-width: 520px) {
  .mortgage-choice-pair--three-col,
  .mortgage-choice-pair--repayment-type {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .mortgage-choice-pair--two-col {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .mortgage-choice-pair--three-col .mortgage-choice-button--standard,
  .mortgage-choice-pair--two-col .mortgage-choice-button--standard,
  .mortgage-choice-pair--repayment-type .mortgage-choice-button--standard {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
}

@container rr-mortgage-controls (max-width: 380px) {
  .mortgage-choice-pair--age,
  .mortgage-choice-pair--dependants {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .mortgage-choice-pair--residency {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .mortgage-choice-pair--loan-term {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
  }

  .mortgage-choice-pair--loan-term .mortgage-choice-button--standard {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@container rr-mortgage-checkboxes (max-width: 520px) {
  .mortgage-checkbox-card,
  .mortgage-checkbox-card--compact {
    min-width: 0;
    font-size: clamp(0.75rem, 3.8cqw, 0.875rem) !important;
    line-height: 1.25;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@container rr-mortgage-applicant-panel (max-width: 560px) {
  .mortgage-inherited-field {
    grid-template-columns: 1fr !important;
    gap: 5px;
  }

  .mortgage-applicant-panel__header h3,
  .mortgage-inherited-section__heading h3 {
    font-size: clamp(1rem, 4.8cqw, 1.25rem) !important;
  }
}


/* ==========================================================================
   Phase 5 dashboard tile readability and alignment

   The six dashboard tiles keep one shared three-column layout. Typography
   responds to each tile's width, remains centred, and never splits a word in
   the middle merely to preserve the row.
   ========================================================================== */

.page-user-app #appView .account-search-product-card,
.page-user-app #appView .account-contribution-card {
  text-align: center;
}

.page-user-app #appView .account-search-product-topline,
.page-user-app #appView .account-contribution-card-topline {
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: center;
}

.page-user-app #appView .account-search-product-topline h3,
.page-user-app #appView .account-contribution-card-topline h3 {
  display: grid;
  place-items: center;
  min-block-size: 2.32em;
  font-size: clamp(0.875rem, 10.5cqw, 1.25rem) !important;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-align: center;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual;
  text-wrap: balance;
}

.page-user-app #appView .account-search-product-price {
  font-size: clamp(1.25rem, 18cqw, 2.625rem) !important;
  line-height: 1;
  text-align: center;
}

.page-user-app #appView .account-product-option,
.page-user-app #appView .account-product-option-link,
.page-user-app #appView .account-contribution-card-action,
.page-user-app #appView .account-product-option .account-product-price {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(0.875rem, 9cqw, 1rem) !important;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual;
  text-wrap: balance;
}

.page-user-app #appView .account-product-option,
.page-user-app #appView .account-product-option-link,
.page-user-app #appView .account-contribution-card-action {
  width: 100%;
  padding-inline: clamp(4px, 2cqw, 12px) !important;
  overflow: hidden;
}

/* Compact one-line navigation for the authenticated shell. This changes only
   typography and spacing; the same navigation markup is used at every size. */
@media (max-width: 640px) {
  .page-user-app .nav-right {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(4px, 1.4vw, 8px);
  }

  .page-user-app .nav-right > a,
  .page-user-app .nav-right > .nav-account-menu,
  .page-user-app .nav-account-trigger {
    min-width: 0;
    flex: 0 1 auto;
  }

  .page-user-app .nav-right a,
  .page-user-app .nav-account-trigger {
    font-size: clamp(0.6875rem, 2.8vw, 0.75rem);
    line-height: 1;
    white-space: nowrap;
  }

  .page-user-app .nav-account-trigger {
    gap: 2px;
  }

  .page-user-app .nav-account-arrow {
    font-size: 0.625rem;
  }
}