/* Desktop fidelity pass — one masthead, one readable type floor, one chart language.
   This file intentionally loads last so the accepted 1024 × 1536 design boards
   remain the final authority over earlier page-by-page migration styles. */

:root {
  --v2-desktop-gutter: 28px;
  --v2-header-height: 62px;
  --v2-header-accent: #d85b37;
}

/* Stable desktop canvas and masthead ------------------------------------------------ */
@media (min-width: 901px) {
  body.editorial-ui.v2-foundation .app-shell,
  body.editorial-ui.v2-foundation.is-landing-view:has(#modules-view:not([hidden])) .app-shell,
  body.editorial-ui.v2-foundation.is-v2-debt-view .app-shell,
  body.editorial-ui.v2-foundation.is-v2-retirement-view .app-shell,
  body.editorial-ui.v2-foundation:has(#module-view:not([hidden]) .v2-investment-page) .app-shell,
  body.editorial-ui.v2-foundation:has(#module-view:not([hidden]) .v2-housing-page) .app-shell,
  body.editorial-ui.v2-foundation:has(#module-view:not([hidden]) .v2-standalone-page) .app-shell {
    width: min(1440px, calc(100% - (var(--v2-desktop-gutter) * 2))) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
  }

  body.editorial-ui.v2-foundation .site-header.v2-header,
  body.editorial-ui.v2-foundation.is-landing-view .site-header.v2-header,
  body.editorial-ui.v2-foundation .site-header[data-profile] {
    box-sizing: border-box !important;
    display: grid !important;
    width: 100% !important;
    height: var(--v2-header-height) !important;
    min-height: var(--v2-header-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: minmax(210px, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(12, 53, 84, .78) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.editorial-ui.v2-foundation .site-header.v2-header .site-name,
  body.editorial-ui.v2-foundation .site-header[data-profile] .site-name {
    margin: 0 !important;
    color: #0c3554 !important;
    font-family: var(--v2-font-display) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.editorial-ui.v2-foundation .site-header.v2-header .primary-nav,
  body.editorial-ui.v2-foundation .site-header[data-profile] .primary-nav {
    display: flex !important;
    height: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1px !important;
    overflow: visible !important;
  }

  body.editorial-ui.v2-foundation .site-header.v2-header .nav-action,
  body.editorial-ui.v2-foundation .site-header[data-profile] .nav-action {
    position: relative !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: #0c3554 !important;
    background: transparent !important;
    font-family: var(--v2-font-display) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body.editorial-ui.v2-foundation .site-header.v2-header .nav-action::before,
  body.editorial-ui.v2-foundation .site-header.v2-header .nav-action::after {
    display: none !important;
    content: none !important;
  }

  body.editorial-ui.v2-foundation .site-header.v2-header .nav-action:hover,
  body.editorial-ui.v2-foundation .site-header.v2-header .nav-action:focus-visible {
    border-color: rgba(12, 53, 84, .42) !important;
    background: rgba(251, 244, 230, .58) !important;
  }

  body.editorial-ui.v2-foundation .site-header.v2-header .nav-action[aria-current="page"] {
    color: var(--v2-header-accent) !important;
    border-color: var(--v2-header-accent) !important;
    background: rgba(251, 244, 230, .72) !important;
  }

  /* My Plan and Risk own their full-page canvases. Their embedded mastheads use
     the exact same geometry, order and type as the shared application masthead. */
  body.editorial-ui #plan-view.v2-plan-page,
  body.editorial-ui.is-risk-view #risk-view {
    box-sizing: border-box !important;
    width: min(1440px, 100%) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    padding-inline: var(--v2-desktop-gutter) !important;
  }

  body.editorial-ui #plan-view .plan-v2-header,
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-site-header,
  .mm-header {
    box-sizing: border-box !important;
    display: flex !important;
    width: 100% !important;
    height: var(--v2-header-height) !important;
    min-height: var(--v2-header-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(12, 53, 84, .78) !important;
  }

  body.editorial-ui #plan-view .plan-v2-brand,
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-brand,
  .mm-brand {
    display: inline-flex !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    border: 0 !important;
    color: #0c3554 !important;
    background: transparent !important;
    font-family: var(--v2-font-display) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  body.editorial-ui #plan-view .plan-v2-header nav,
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-site-header nav,
  .mm-nav {
    display: flex !important;
    height: 100% !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 1px !important;
  }

  body.editorial-ui #plan-view .plan-v2-header nav :is(a, button),
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-site-header nav :is(a, button),
  .mm-nav a {
    position: relative !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 8px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: #0c3554 !important;
    background: transparent !important;
    font-family: var(--v2-font-display) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body.editorial-ui #plan-view .plan-v2-header nav :is(a, button)::after,
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-site-header nav :is(a, button)::after,
  .mm-nav a::after {
    display: none !important;
    content: none !important;
  }

  body.editorial-ui #plan-view .plan-v2-header nav :is(a, button):hover,
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-site-header nav :is(a, button):hover,
  .mm-nav a:hover {
    border-color: rgba(12, 53, 84, .42) !important;
    background: rgba(251, 244, 230, .58) !important;
  }

  body.editorial-ui #plan-view .plan-v2-header nav [aria-current="page"],
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-site-header nav [aria-current="page"],
  .mm-nav a[aria-current="page"] {
    align-self: center !important;
    color: var(--v2-header-accent) !important;
    border-color: var(--v2-header-accent) !important;
    background: rgba(251, 244, 230, .72) !important;
  }

  .mm-page {
    width: min(1440px, calc(100% - (var(--v2-desktop-gutter) * 2))) !important;
    max-width: 1440px !important;
  }

  .mm-header {
    margin-inline: auto !important;
  }

  /* My Plan and Risk previously rendered a second, page-local masthead. Keep the
     shared masthead visible at the same viewport coordinates and remove the copy. */
  body.editorial-ui.is-plan-view .app-shell > .site-header.v2-header,
  body.editorial-ui.is-risk-view .app-shell > .site-header.v2-header {
    display: grid !important;
    width: 100% !important;
    margin-inline: 0 !important;
  }

  body.editorial-ui #plan-view .plan-v2-header,
  body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-site-header {
    display: none !important;
  }
}

/* Housing chart: target-board direct labels, asymmetric range and print texture. */
.v2h-chart-key { display: none !important; }
.v2h-balance-chart { max-height: 386px !important; }
.v2h-axis { stroke: rgba(12, 53, 84, .76); stroke-width: 1; }
.v2h-axis-title { fill: #0c3554; font: 800 14px var(--v2-font-display); letter-spacing: .045em; text-transform: uppercase; }
.v2h-area-equity { fill: url(#v2h-ochre-grain) !important; stroke: #a87317 !important; }
.v2h-area-mortgage { fill: url(#v2h-coral-grain) !important; stroke: #9c412e !important; }
.v2h-area-invested { fill: url(#v2h-teal-grain) !important; stroke: #1d6265 !important; }
.v2h-area-rent { fill: url(#v2h-sky-grain) !important; stroke: #477c87 !important; stroke-dasharray: 4 3; }
.v2h-grid text,
.v2h-year-tick text { font-size: 15px !important; }
.v2h-component-label {
  font-family: var(--v2-font-editorial) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.v2h-component-label.is-equity,
.v2h-component-label.is-rent { fill: #0c3554 !important; }
.v2h-component-label.is-mortgage,
.v2h-component-label.is-invested { fill: #fbf4e6 !important; }
.v2h-bracket { fill: none; stroke-width: 1.5; }
.v2h-bracket.is-buy { stroke: #a87317; }
.v2h-bracket.is-rent { stroke: #2f7f7c; }
.v2h-end-label text { font-size: 16px !important; }
.v2h-end-label text:first-child { font-family: var(--v2-font-display); font-size: 14px !important; }
.v2h-end-label text:last-child { font-family: var(--v2-font-editorial); font-size: 29px !important; }
.v2h-hit:hover { fill: rgba(251, 244, 230, .12); stroke: rgba(12, 53, 84, .34); }

/* Readability floor — metadata remains secondary, never microscopic. */
.v2h-help,
.v2h-field > small,
.v2h-advanced > summary small,
.v2h-stepper i,
.v2h-budget-overlap p,
.v2h-chart-table > summary,
.v2h-difference > span,
.v2h-difference strong em,
.v2h-difference small,
.v2h-month-row header span,
.v2h-month-row dl,
.v2h-principal-note,
.v2h-current-cash small,
.v2h-mechanism a,
.v2h-exclusions > div p,
.v2h-input-boundary { font-size: 13px !important; }
.v2h-current-cash em { font-size: 13px !important; }
.v2h-table-scroll table { font-size: 12px !important; }
.v2h-difference strong { font-size: 15px !important; }

/* Earlier Debt and Retirement passes nested two separate full-bleed expansions,
   creating a 14px horizontal scroll at the reference viewport. The shared shell
   now owns the gutter, so each page and hero use that single boundary. */
.v2-debt-page,
.v2-retirement-page,
.v2d-hero,
.v2r-hero {
  width: 100% !important;
  margin-left: 0 !important;
}

.v2i-field-suffix,
.v2i-advanced > summary small,
.v2i-result-disclosure > summary small,
.v2i-profile-fieldset > p,
.v2i-profile-card small,
.v2i-profile-current,
.v2i-allocation output,
.v2i-technical-note,
.v2i-local-note,
.v2i-result-heading .dollar-mode button,
.v2i-chart-key,
.v2i-chart-figure > figcaption,
.v2i-chart-values > summary,
.v2i-table-scroll table,
.v2i-target-note > div:last-child small,
.v2i-result-actions button,
.v2i-side-details .v2i-result-disclosure > summary small,
.v2i-disclosure-body,
.v2i-model-note,
.v2-investment-page .field-feedback,
.v2i-suffix,
.v2i-result-heading .dollar-mode legend { font-size: 13px !important; }
.v2i-grid text,
.v2i-x-tick text,
.v2i-goal-label text,
.v2i-end-label text:last-child,
.v2i-success-callout text { font-size: 13px !important; }

.v2r-advanced-field i,
.v2r-timing button,
.v2r-method p,
.v2r-method li,
.v2r-result-heading .dollar-mode button,
.v2r-legend,
.v2r-chart figcaption,
.v2r-data,
.v2r-data table,
.v2r-callouts span,
.v2r-callouts small,
.v2r-key-results p,
.v2r-boundary p,
.v2r-boundary a { font-size: 13px !important; }
.v2r-y-tick text,
.v2r-x-tick text,
.v2r-axis-title,
.v2r-vulnerable-label,
.v2r-direct-label { font-size: 13px !important; }

body.editorial-ui #plan-view .plan-summary-item span,
body.editorial-ui #plan-view .plan-drawer li,
body.editorial-ui #plan-view .plan-exact-values table,
body.editorial-ui #plan-view .plan-v2-today,
body.editorial-ui #plan-view .plan-summary-mode button,
body.editorial-ui #plan-view .plan-timeline-eyebrow,
body.editorial-ui #plan-view .plan-axis-label,
body.editorial-ui #plan-view .plan-cross-date,
body.editorial-ui #plan-view .plan-drawer-kicker,
body.editorial-ui #plan-view .plan-v2-footer,
body.editorial-ui #plan-view .plan-lane-value,
body.editorial-ui #plan-view .plan-exact-values > summary,
body.editorial-ui #plan-view .plan-timeline-explanation p,
body.editorial-ui #plan-view .plan-add-empty p { font-size: 13px !important; }

.landing-case-time,
.fictional-case-label,
.v2-landing .landing-plan-lanes button,
body.editorial-ui.v2-foundation.is-landing-view .landing-footer-colophon,
body.editorial-ui.v2-foundation.is-landing-view .landing-footer-colophon .privacy-controls button { font-size: 13px !important; }

.v2d-mechanism svg text,
.v2d-boundary { font-size: 13px !important; }

body.editorial-ui #plan-view .plan-drawer p,
body.editorial-ui #plan-view .plan-pressure-note p { font-size: 13px !important; }

.v2r-result-heading .dollar-mode legend { font-size: 13px !important; }

.mm-result-summary small,
.mm-chart-label,
.mm-result-context,
.mm-data > summary,
.mm-card-copy em,
.mm-research-grid article > p:first-child,
.mm-source-line,
.mm-footer p { font-size: 13px !important; }

body.editorial-ui.is-risk-view #risk-lab-root :is(.fm-risk-kicker, small, .fm-risk-footer),
body.editorial-ui.is-risk-view #risk-lab-root .fm-risk-progress-text { font-size: 13px !important; }

/* The selected display mode uses the same navy plate shown in the target boards. */
.v2i-result-heading .dollar-mode button[aria-pressed="true"],
.v2r-result-heading .dollar-mode button[aria-pressed="true"] {
  color: #fbf4e6 !important;
  background: #0c3554 !important;
}

@media print {
  .v2h-area-equity { fill: url(#v2h-ochre-grain) !important; }
  .v2h-area-mortgage { fill: url(#v2h-coral-grain) !important; }
  .v2h-area-invested { fill: url(#v2h-teal-grain) !important; }
  .v2h-area-rent { fill: url(#v2h-sky-grain) !important; }
}