/* Plan v17.23.9 flow, with the Dashboard's compact presentation.
   Styling only: existing sections, controls, models and results keep their places.
   The compact presentation is shared across all viewport sizes. */

/* The Dashboard heading starts 8px inside the page. Plan's existing shell
   has 10px of padding, or 7px on narrow screens; balance only the heading. */
:where(html:not([data-expense-mode="simple"])) #planView .plan-head.page-ledger-head { margin-inline: -2px; padding: 8px 0 2px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-title-block { display: grid; grid-template-columns: minmax(0, max-content) max-content; align-items: baseline; gap: 2px 8px; min-width: 0; }
:where(html:not([data-expense-mode="simple"])) #planView .page-ledger-title { grid-column: 1 / -1; margin: 0; padding: 0; font: 600 clamp(26px, 3vw, 34px)/1.1 var(--font-title); letter-spacing: -.035em; text-align: left; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-title-block > span { grid-column: 1; grid-row: 2; align-self: baseline; margin: 0; color: color-mix(in srgb, var(--muted) 85%, var(--bg)); font: 400 8px/1.25 var(--font-ui); letter-spacing: 0; text-transform: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-help-trigger { grid-column: 2; grid-row: 2; align-self: baseline; justify-self: start; margin: 0; white-space: nowrap; }
@media (max-width: 760px) {
  :where(html:not([data-expense-mode="simple"])) #planView .plan-head.page-ledger-head { margin-inline: 1px; }
  :where(html:not([data-expense-mode="simple"])) #planView .plan-title-block { display: contents; }
  :where(html:not([data-expense-mode="simple"])) #planView .page-ledger-title { grid-column: 1; }
}
@media (max-height: 500px) {
  :where(html:not([data-expense-mode="simple"])) #planView .plan-head.page-ledger-head { padding-bottom: 2px; }
}

:where(html:not([data-expense-mode="simple"])) #planView { --plan-paper: var(--bg); --plan-soft: var(--bg); --plan-card-radius: 0; --plan-gutter: 8px; --plan-row-gap: 8px; --plan-reset-width: 104px; --plan-control-height: 34px; --plan-input-bg: color-mix(in srgb, var(--text) 4%, var(--bg)); --plan-action-bg: color-mix(in srgb, var(--text) 7%, var(--bg)); --plan-compact-line: color-mix(in srgb, var(--text) 11%, transparent); --plan-compact-muted: color-mix(in srgb, var(--text) 65%, var(--bg)); background: var(--bg); overflow-anchor: none; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-summary-block, .plan-shared-cash, .plan-tool-workspace, .plan-purchase-tool-wrap, .plan-flexibility-disclosure) { border: 0; border-bottom: 1px solid var(--plan-compact-line); border-radius: 0; background: transparent; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-summary-block, .plan-shared-cash, .plan-purchase-tool-wrap, .plan-flexibility-disclosure, .rcv-box) { margin: 0 0 8px; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-shared-cash, .rcv-box) { padding: var(--plan-gutter); }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-summary-block > summary, .plan-flexibility-disclosure > summary) { min-height: 34px; padding: 6px var(--plan-gutter); border-bottom-color: var(--plan-compact-line); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-summary-title > b { font: 700 12px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-summary-block .plan-metric { min-height: 76px; gap: 4px; padding: var(--plan-gutter); border-color: var(--plan-compact-line); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-summary-block .plan-metric > span { font: 500 10px/1.3 var(--font-ui); color: var(--plan-compact-muted); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-summary-block .plan-metric > strong, :where(html:not([data-expense-mode="simple"])) #planView .plan-summary-block .plan-metric-comparison strong { font: 500 clamp(18px, 1.7vw, 24px)/1.2 var(--font-num); letter-spacing: -.02em; white-space: normal; overflow-wrap: anywhere; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-summary-block .plan-metric > small { color: var(--plan-compact-muted); font: 10px/1.3 var(--font-ui); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-metric-comparison { gap: 5px; flex-wrap: wrap; justify-content: center; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-metric-comparison > small { font: 11px/1.3 var(--font-num); }

:where(html:not([data-expense-mode="simple"])) #planView .plan-tools-ledger { border-top: 0; row-gap: 2px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tools-title { min-height: 34px; margin: 0; padding: 6px var(--plan-gutter); border: 0; border-bottom: 1px solid var(--text); background: transparent; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tools-title h3 { color: var(--text); font: 700 12px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-tools-title small, .plan-shared-cash-title > small, .plan-tool-title small, .plan-tool-status, .rcv-status) { color: var(--plan-compact-muted); font: 10px/1.35 var(--font-ui); letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-shared-cash { padding-top: 4px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-shared-cash-title { margin-bottom: 6px; gap: 8px; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-shared-cash-title b, .plan-tool-panel-head b, .plan-tool-title b, .rcv-title) { color: var(--text); font: 600 11px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-tool-panel .plan-tool-body, .plan-purchase-panel .plan-tool-body) { padding: 0 var(--plan-gutter) 8px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-panel-head { min-height: var(--plan-control-height); padding: 0; margin: 0 0 6px; border-bottom: 1px solid var(--plan-compact-line); align-items: center; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-panel-head > span { display: flex; align-items: center; align-self: stretch; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-panel .plan-primary-form, :where(html:not([data-expense-mode="simple"])) #planView .plan-purchase-panel .plan-purchase-primary-form { padding: 6px 0; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-head-export, .plan-secondary-btn, .rcv-refresh) { min-height: var(--plan-control-height); height: auto; padding: 4px 8px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: transparent; box-shadow: none; color: var(--text); font: 700 var(--ui-font-button, 9px)/1.3 var(--font-button); letter-spacing: .045em; text-transform: uppercase; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-reset-btn { min-width: 0; min-height: var(--plan-control-height); height: auto; padding: 4px; white-space: normal; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-form-grid { gap: 8px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-form-grid > label { overflow: visible; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-form-grid label > span { color: var(--plan-compact-muted); font: 10px/1.3 var(--font-ui); letter-spacing: 0; text-transform: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-shared-cash-form { align-items: start; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-shared-cash-form > .plan-tool-actions { align-self: start; margin-top: 17px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-cash-operators { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 4px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-cash-operators > button { min-height: 24px; padding: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-tag); background: transparent; color: var(--text); font: 600 12px/1 var(--font-num); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-form-grid :is(input:not([type="checkbox"]), select) { min-width: 0; width: 100%; height: var(--plan-control-height); min-height: var(--plan-control-height); padding: 0 6px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: var(--plan-input-bg); box-shadow: none; font-size: 13px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-linked-option-control { min-height: var(--plan-control-height); padding: 4px 6px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: var(--plan-input-bg); box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-inline-budget > div { min-height: var(--plan-control-height); padding: 4px 6px; border: 0; border-bottom: 1px solid var(--plan-compact-line); border-radius: 0; background: transparent; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-linked-option-control b { font: 500 11px/1.3 var(--font-ui); letter-spacing: 0; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-linked-tool-field > small, .plan-inline-hint, .plan-inline-budget small) { font: 10px/1.4 var(--font-ui); }

:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-selector { margin: 0 0 8px; border: 0; border-bottom: 1px solid var(--plan-compact-line); border-radius: 0; background: transparent; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 44px; padding: 6px var(--plan-gutter); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card:not(.is-active) { background: transparent; opacity: 1; filter: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card.is-active { border-bottom-color: var(--text); background: transparent; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card::before, :where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card::after { content: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card .plan-tool-card-copy b, :where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card:not(.is-active) .plan-tool-card-copy b { color: var(--text); font: 600 11px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card.is-active .plan-tool-card-copy b { font-weight: 700; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card .plan-tool-status { margin-top: 3px; }
@media (min-width: 761px) {
  :where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card-copy { align-self: stretch; align-content: start; }
  :where(html:not([data-expense-mode="simple"])) #planView .plan-tool-card-copy b { align-self: start; }
}
:where(html:not([data-expense-mode="simple"])) #planView .plan-allocation-option { border-bottom-color: var(--plan-compact-line); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-allocation-option > summary { min-height: 34px; padding: 6px var(--plan-gutter); border-radius: 0; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-allocation-option[open] > summary { padding-bottom: 6px; background: transparent; box-shadow: inset 2px 0 0 color-mix(in srgb, var(--text) 50%, transparent); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-allocation-option > summary b { font: 600 11px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-allocation-option > summary small { margin-top: 3px; color: var(--plan-compact-muted); font: 10px/1.35 var(--font-ui); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-allocation-option-body { padding: 6px var(--plan-gutter); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-ratio-fieldset.plan-ratio-slider-set { gap: 4px; margin: 0 0 6px; padding: 0; border: 0; border-radius: 0; background: transparent; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-ratio-legend { padding: 0; min-height: 28px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-ratio-legend button { min-height: 28px; padding: 4px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control); background: transparent; color: var(--text); font: 10px/1.3 var(--font-ui); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-ratio-slider { gap: 2px 10px; padding: 3px 0; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-ratio-slider > span { font: 11px/1.3 var(--font-ui); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-ratio-slider > output[data-plan-ratio-output] { font: 600 11px/1.3 var(--font-num); }

:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-result-metric, .plan-payment-row, .plan-result-list > div, .plan-flex-row) { padding-top: 6px; padding-bottom: 6px; border-color: var(--plan-compact-line); border-radius: 0; background: transparent; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-result-metric > span { color: var(--plan-compact-muted); font: 10px/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-result-metric > strong { font: 500 13px/1.3 var(--font-num); }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-result-metric > small, .plan-result-note span, .plan-recommendation p, .plan-payment-row small, .plan-result-list small) { color: var(--plan-compact-muted); font: 10px/1.35 var(--font-ui); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-payment-row { min-height: 42px; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-payment-row > span > b { font: 500 12px/1.3 var(--font-ui); }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-result-note, .plan-recommendation, .plan-inline-hint) { margin: 6px 0; padding: 6px 0; border-radius: 0; background: transparent; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-advanced-fields, .plan-result-details) { margin: 6px 0; border: 0; border-bottom: 1px solid var(--plan-compact-line); border-radius: 0; background: transparent; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-advanced-fields > summary, .plan-result-details > summary) { min-height: 34px; padding: 6px var(--plan-gutter); font: 600 11px/1.3 var(--font-ui); }
:where(html:not([data-expense-mode="simple"])) #planView .plan-purchase-tool-card { min-height: 38px; padding: 6px var(--plan-gutter); background: transparent; }
/* Disclosure marks share the Dashboard's unboxed chevron and right-hand slot. */
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-summary-block, .plan-flexibility-disclosure) > summary,
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-allocation-option, .plan-advanced-fields, .plan-result-details) > summary,
:where(html:not([data-expense-mode="simple"])) #planView .plan-purchase-tool-card { display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: auto; align-items: center; gap: 2px 8px; min-height: var(--plan-control-height); list-style: none; cursor: pointer; }
:where(html:not([data-expense-mode="simple"])) #planView summary::-webkit-details-marker { display: none; }
:where(html:not([data-expense-mode="simple"])) #planView summary::marker { content: ""; }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-allocation-option, .plan-advanced-fields, .plan-result-details) > summary::before { content: none; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-summary-title,
:where(html:not([data-expense-mode="simple"])) #planView .plan-allocation-option > summary > span { grid-column: 1; grid-row: 1; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-flexibility-disclosure > summary,
:where(html:not([data-expense-mode="simple"])) #planView .plan-purchase-tool-card { grid-template-rows: auto auto; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-flexibility-disclosure > summary > span:first-child,
:where(html:not([data-expense-mode="simple"])) #planView .plan-purchase-tool-card > .plan-tool-title { grid-column: 1; grid-row: 1; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-flexibility-disclosure > summary > small,
:where(html:not([data-expense-mode="simple"])) #planView .plan-purchase-tool-card > .plan-tool-status { grid-column: 1; grid-row: 2; margin: 0; text-align: left; white-space: normal; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-tool-collapse { display: grid; grid-column: 2; grid-row: 1 / -1; place-items: center; justify-self: end; align-self: center; width: 24px; min-width: 24px; height: 24px; min-height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .summary-collapse-mark { display: inline-grid; place-items: center; width: 12px; min-width: 12px; height: 12px; min-height: 12px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--plan-compact-muted); font-size: 0; line-height: 0; transform: none; }
:where(html:not([data-expense-mode="simple"])) #planView .summary-collapse-mark::before,
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-allocation-option, .plan-advanced-fields, .plan-result-details) > summary::after { content: ""; display: block; width: 6px; height: 6px; margin: 0; padding: 0; border: 0; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; border-radius: 0; background: none; box-shadow: none; color: var(--plan-compact-muted); transform: rotate(-45deg); }
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-allocation-option, .plan-advanced-fields, .plan-result-details) > summary::after { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; }
:where(html:not([data-expense-mode="simple"])) #planView .plan-disclosure[open] > summary .summary-collapse-mark::before,
:where(html:not([data-expense-mode="simple"])) #planView .plan-purchase-tool-card[aria-expanded="true"] .summary-collapse-mark::before,
:where(html:not([data-expense-mode="simple"])) #planView .rcv-toggle[aria-expanded="true"] .summary-collapse-mark::before,
:where(html:not([data-expense-mode="simple"])) #planView :is(.plan-allocation-option, .plan-advanced-fields, .plan-result-details)[open] > summary::after { transform: rotate(45deg); }

/* Refresh keeps its own button; the toggle spans the title and far-right mark. */
:where(html:not([data-expense-mode="simple"])) #planView .rcv-box { margin: 12px 0 14px; padding: 4px var(--plan-gutter); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-card-bg-active); box-shadow: none; }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-box .rcv-head { border-bottom: 0; }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-box .rcv-refresh { min-height: 24px; padding: 2px 6px; border: 0; background: transparent; color: var(--muted); }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-box .rcv-refresh:hover { color: var(--text); background: transparent; }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-head { grid-template-columns: minmax(0, 1fr) auto 24px; padding: 0 0 0 6px; }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-toggle { grid-column: 1 / -1; grid-row: 1; grid-template-columns: subgrid; min-height: var(--plan-control-height); width: 100%; }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-title-stack { grid-column: 1; }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-collapse-mark { grid-column: 3; justify-self: center; }
:where(html:not([data-expense-mode="simple"])) #planView .rcv-refresh { grid-column: 2; grid-row: 1; z-index: 1; }
:where(html:not([data-expense-mode="simple"])) #planView :is(summary, .rcv-toggle, .plan-purchase-tool-card):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (pointer: coarse) {
  :where(html:not([data-expense-mode="simple"])) #planView { --plan-control-height: 36px; }
}

/* Narrow Plan retains its existing section order, metrics and form columns. */
@media (max-width: 760px) {
  :where(html:not([data-expense-mode="simple"])) #planView { --plan-gutter: 6px; --plan-reset-width: 96px; }
  :where(html:not([data-expense-mode="simple"])) #planView .plan-shared-cash-form { padding: 6px 0; }
}

/* Shared export-button display must not override inactive simulation visibility. */
#planView #planResetSimulation[hidden] { display: none; }