.segmented {
display: flex;
gap: var(--space-xs);
padding: var(--space-xs);
background: color-mix(in srgb, var(--surface-alt) 45%, transparent);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--glass-rim);
backdrop-filter: blur(6.4px) saturate(140%);
-webkit-backdrop-filter: blur(6.4px) saturate(140%);
}
.segmented button {
flex: 1;
min-height: var(--control-h-compact);
padding: var(--space-md) var(--space-md);
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-dim);
font-family: inherit;
font-size: var(--font-size-xs);
font-weight: 600;
cursor: pointer;
transition: background var(--motion-base), color var(--motion-base), box-shadow var(--motion-base);
white-space: normal;
text-wrap: balance;
hyphens: auto;
hyphenate-limit-chars: 10 5 4;
overflow-wrap: break-word;
position: relative;
overflow: hidden;
}
.segmented button:hover { color: var(--text); }
.segmented button.active {
border-color: color-mix(in srgb, var(--accent-2) 52%, transparent);
color: var(--on-glass);
background:
linear-gradient(120deg,
color-mix(in srgb, var(--accent) 34%, transparent),
color-mix(in srgb, var(--accent-2) 30%, transparent));
backdrop-filter: blur(6.4px) saturate(150%);
-webkit-backdrop-filter: blur(6.4px) saturate(150%);
box-shadow:
var(--glass-rim-lit), var(--glass-cast);
}
.segmented button.active .seg-sub {
color: var(--on-glass);
opacity: 0.72;
}
.segmented button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--motion-base) var(--ease-out);
background: radial-gradient(80px circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.28), transparent 65%);
}
.segmented button:not(.active)::after {
background: radial-gradient(70px circle at var(--mx, 50%) var(--my, 50%),
var(--accent-soft), transparent 70%);
}
.segmented button:focus-visible::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.segmented button:hover::after { opacity: 1; }
}
.segmented button > * { position: relative; }
.seg-mode { margin-bottom: var(--space-md); }
.seg-mode button {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-md) var(--space-md);
}
.seg-mode .seg-title { font-size: var(--font-size-md); font-weight: 700; }
.seg-mode .seg-sub {
font-size: var(--font-size-2xs);
font-weight: 500;
opacity: 0.75;
white-space: normal;
text-wrap: balance;
line-height: 1.3;
}
.seg-sm button { padding: var(--space-sm) var(--space-md); font-size: var(--font-size-2xs); }
.mode-hint {
font-size: var(--font-size-xs);
color: var(--text-dim);
text-align: center;
margin-bottom: var(--space-xl);
min-height: 18px;
transition: opacity var(--motion-slow);
}
.seg-explain {
font-size: var(--font-size-2xs);
color: var(--text-faint);
margin-top: var(--space-md);
line-height: 1.5;
}
.seg-explain b { color: var(--text-dim); }
.historical-phase-head {
margin-top: var(--space-xs);
}
.historical-window-field {
gap: var(--space-md);
}
.historical-window-dates {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--space-xl);
}
.historical-window-dates span:last-child { text-align: right; }
.historical-window-dates small {
display: block;
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.historical-window-dates strong {
color: var(--text);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
.historical-window-slider {
--window-left: 0%;
--window-width: 100%;
position: relative;
height: 38px;
cursor: grab;
touch-action: none;
}
.historical-window-slider.dragging { cursor: grabbing; }
.historical-window-rail {
position: absolute;
inset: 13px 0;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-xs);
background: var(--surface-raised);
}
.historical-window-block {
position: absolute;
inset-block: 0;
left: var(--window-left);
width: var(--window-width);
min-width: 18px;
border: 1px solid color-mix(in srgb, var(--accent) 76%, transparent);
border-radius: var(--radius-xs);
background: color-mix(in srgb, var(--accent) 20%, var(--surface-raised));
box-shadow: 0 1px 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.historical-window-block::before,
.historical-window-block::after {
content: '';
position: absolute;
top: 50%;
width: 2px;
height: 9px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--accent) 70%, var(--text));
transform: translateY(-50%);
}
.historical-window-block::before { left: 4px; }
.historical-window-block::after { right: 4px; }
.historical-window-slider input[type="range"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
pointer-events: none;
}
.historical-window-slider:has(input:focus-visible) {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
.historical-retirement-return {
display: grid;
gap: var(--space-lg);
margin-top: var(--space-md);
padding-top: var(--space-xl);
border-top: 1px solid var(--border);
}
.historical-retirement-summary {
color: var(--text-dim);
}
.segmented + .field { margin-top: var(--space-lg); }
.panel {
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.028), transparent 46%),
color-mix(in srgb, var(--surface-solid) 48%, transparent);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
transition: border-color var(--motion-base), background var(--motion-base);
}
.panel:hover {
border-color: var(--border-strong);
}
.panel-body {
min-width: 0;
min-height: 0;
padding: var(--space-xl);
transition: padding var(--motion-slow) var(--ease-out);
}
.panel.reveal:not(.open) > .panel-body { padding-top: 0; padding-bottom: 0; }
.panel-head {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.panel-head h2 {
font-size: var(--font-size-md);
font-weight: 740;
letter-spacing: -0.012em;
color: var(--text);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.panel-sub { font-size: var(--font-size-2xs); color: var(--text-faint); }
.panel-head-btn {
width: 100%;
min-height: var(--control-h);
background: none;
border: none;
cursor: pointer;
padding: 0;
justify-content: space-between;
font-family: inherit;
margin-bottom: 0;
text-align: left;
}
.panel-collapsible .panel-head-btn h2 { transition: color var(--motion-base); }
.panel-collapsible .panel-head-btn:hover h2 { color: var(--text); }
.panel-summary {
margin-left: auto;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity var(--motion-base);
}
.panel-head-btn[aria-expanded="true"] .panel-summary {
opacity: 0;
pointer-events: none;
}
.panel-collapsible .panel-head-btn:hover .panel-summary { color: var(--text-dim); }
.panel-head-btn h2 { flex: 0 1 auto; min-width: 0; }
.chevron {
width: 8px;
height: 8px;
border-right: 2px solid var(--text-dim);
border-bottom: 2px solid var(--text-dim);
transform: rotate(45deg);
transition: transform var(--motion-slow);
margin-right: var(--space-2xs);
flex: none;
}
.panel-head-btn[aria-expanded="true"] .chevron { transform: rotate(225deg); }
[data-accordion-body].open { margin-top: var(--space-lg); }
.panel-head-row {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-xs);
}
.panel-head-row .panel-head-btn {
min-width: 0;
margin-bottom: 0;
}
.panel-head-row .panel-head-btn h2 { flex-shrink: 0; }
.panel-head-row .switch { flex: none; }
.reveal {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows var(--motion-slow) var(--ease-in-out),
opacity var(--motion-slow) var(--ease-out),
visibility var(--motion-slow),
margin var(--motion-slow) var(--ease-out);
}
.motion-hold .reveal,
.motion-hold .panel-body,
.motion-hold .chevron,
.motion-hold .panel-summary { transition: none; }
.reveal.open {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
}
.reveal > * { overflow: hidden; min-height: 0; }
.reveal:not(.open) {
contain: layout paint;
}
.reveal.open > .reveal-body, .reveal.open > .panel-body { overflow: visible; }
.panel.reveal { border-width: 0; margin-bottom: 0; }
.panel.reveal.open { border-width: 1px; margin-bottom: var(--space-lg); }
.cond-hidden { display: none !important; }
.field { margin-bottom: var(--space-lg); }
.field-inline {
display: flex;
align-items: center;
gap: var(--space-md);
grid-column: 1 / -1;
}
.field-inline label { margin-bottom: 0; flex: 1; }
.field-inline .input-wrap { width: 92px; flex: none; }
.field-inline input { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-xs); }
.field-inline .input-unit { right: 8px; font-size: var(--font-size-2xs); }
.field:last-child { margin-bottom: 0; }
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--space-md);
}
.field-grid > .field.reveal:not(.open) { display: none; }
.field-grid > .field-full { grid-column: 1 / -1; }
.field-anchor { display: none; }
.retirement-streams { margin-top: var(--space-2xs); }
.retirement-streams > .field:not(.reveal),
.retirement-streams > .field.reveal:not(.retirement-income-total) > .reveal-body {
display: flex;
flex-direction: column;
}
.retirement-streams > .field.reveal:not(.retirement-income-total) > .reveal-body {
height: 100%;
}
.retirement-streams > .field:not(.retirement-income-total) .input-wrap {
margin-top: auto;
}
.retirement-income-total > .reveal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-2xs) var(--space-md);
padding: var(--space-md) var(--space-lg);
border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--border));
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--accent-soft) 58%, transparent);
color: var(--text-dim);
font-size: var(--font-size-xs);
}
.retirement-income-total strong {
color: var(--text);
font-variant-numeric: tabular-nums;
}
.retirement-income-total small {
grid-column: 1 / -1;
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.milestone-echo {
margin: -2px 0 var(--space-lg);
color: var(--accent-2);
font-size: var(--font-size-2xs);
font-weight: 650;
line-height: 1.4;
}
.advanced-tax {
margin-top: var(--space-xs);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--surface-alt) 24%, transparent);
}
.advanced-tax > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
min-height: var(--control-h-compact);
padding: var(--space-md) var(--space-lg);
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
cursor: pointer;
list-style: none;
}
.advanced-tax > summary::-webkit-details-marker { display: none; }
.advanced-tax > summary:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.advanced-tax[open] > summary .chevron { transform: rotate(225deg); }
.advanced-tax-body {
padding: var(--space-xs) var(--space-lg) var(--space-lg);
border-top: 1px solid var(--border);
}
.advanced-tax-body > .field:first-child { margin-top: var(--space-lg); }
.field label {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: var(--font-size-2xs);
font-weight: 600;
color: var(--text-dim);
margin-bottom: var(--space-xs);
}
.field-label {
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
margin-bottom: var(--space-xs);
}
.field .field-label > label {
margin-bottom: 0;
}
.field-label-text {
color: var(--text-dim);
font-size: var(--font-size-2xs);
font-weight: 600;
}
.field-inline > .field-label {
flex: 1;
margin-bottom: 0;
}
.field-inline > .field-label > label { flex: none; }
.input-wrap {
position: relative;
display: flex;
align-items: center;
}
.input-wrap input,
.input-wrap select {
width: 100%;
min-height: var(--control-h);
padding: var(--space-md) var(--unit-pad, var(--control-pad-x))
var(--space-md) var(--control-pad-x);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--surface-solid) 84%, transparent);
color: var(--text);
font-family: inherit;
font-size: var(--font-size-sm);
font-weight: 500;
outline: none;
transition: border-color var(--motion-base), box-shadow var(--motion-base);
}
.input-wrap input::placeholder { color: var(--text-faint); }
.input-wrap input:focus-visible,
.input-wrap:focus-within input[type="month"],
.input-wrap select:focus-visible,
.guide-slider-entry input:focus-visible,
.guide-number-entry input:focus-visible,
.adv-entry input:focus-visible,
.adv-entry select:focus-visible,
.guide-field:has(.guide-amount-entry input:focus-visible) {
border-color: var(--accent-2);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 10%, transparent);
}
.input-wrap input[aria-invalid="true"],
.input-wrap select[aria-invalid="true"],
.guide-slider-entry input[aria-invalid="true"],
.guide-number-entry input[aria-invalid="true"],
.adv-entry input[aria-invalid="true"],
.guide-field:has(.guide-amount-entry input[aria-invalid="true"]),
.focused-input:has(input[aria-invalid="true"]),
#simForm :is(input, select, textarea)[aria-invalid="true"] {
border-color: var(--red);
box-shadow: 0 0 0 3px var(--red-soft);
}
.input-unit {
position: absolute;
right: var(--control-pad-x);
font-size: var(--font-size-2xs);
font-weight: 600;
color: var(--text-faint);
pointer-events: none;
background: var(--surface-solid);
padding-left: var(--space-sm);
}
.number-note {
display: block;
color: var(--text-dim);
font-size: var(--font-size-2xs);
font-weight: 500;
line-height: 1.45;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
grid-column: 1 / -1;
flex-basis: 100%;
}
.number-note:not(:empty) { margin-top: var(--space-xs); }
.number-note:empty { display: none; }
.number-note.number-note-problem {
color: var(--red);
font-weight: 600;
}
.input-wrap select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%239299b0' d='M6 8.5L1 3.5h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--control-pad-x) center;
padding-right: var(--space-3xl);
cursor: pointer;
}
.input-wrap select option, .input-wrap select optgroup {
background: var(--surface-solid);
color: var(--text);
}
.tax-row {
display: grid;
grid-template-columns: 1fr 110px;
gap: var(--space-md);
}
.check {
display: flex;
align-items: center;
gap: var(--space-md);
min-height: var(--control-h);
font-size: var(--font-size-sm);
color: var(--text-dim);
cursor: pointer;
}
.check input {
flex: none;
width: var(--control-icon);
height: var(--control-icon);
accent-color: var(--accent);
cursor: pointer;
}
.check-with-help {
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
}
.field .check-with-help .check { margin-bottom: 0; }
.slider-row {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.slider-row .input-sm { width: 96px; min-width: 96px; }
.timeline-duration {
display: flex;
flex: none;
gap: var(--space-sm);
}
.slider-row .timeline-duration .input-sm {
width: 82px;
min-width: 82px;
}
.timeline-slider-row > input[type="range"] { min-width: 64px; }
input[type="range"] {
flex: 1;
height: var(--control-h);
appearance: none;
-webkit-appearance: none;
background: transparent;
outline: none;
cursor: pointer;
}
input[type="range"]:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
border-radius: var(--radius-pill);
}
input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
border-radius: var(--radius-pill);
background: linear-gradient(to right,
#6366f1 var(--fill, 33%),
var(--border-strong) var(--fill, 33%));
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin-top: -6px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--accent);
box-shadow: var(--elevation-control);
transition: transform var(--motion-fast);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--accent);
cursor: pointer;
}
input[type="range"]::-moz-range-track {
height: 4px;
border-radius: var(--radius-pill);
background: linear-gradient(to right,
#6366f1 var(--fill, 33%),
var(--border-strong) var(--fill, 33%));
}
.return-reference {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-xs) var(--space-md);
margin: var(--space-md) 0 0;
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.5;
}
.return-reference-pick {
min-width: 0;
max-width: 100%;
min-height: var(--control-h-compact);
padding: var(--space-2xs) var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-dim);
background: var(--surface-alt);
font: inherit;
cursor: pointer;
}
.return-reference-pick:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.switch {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
min-height: var(--control-h);
cursor: pointer;
}
.switch input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
}
.switch-track {
position: relative;
flex: none;
width: 42px;
height: 24px;
box-sizing: border-box;
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--border-strong);
transition: background var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.switch-thumb {
position: absolute;
top: 50%;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: var(--elevation-control);
transform: translateY(-50%);
transition: transform var(--motion-slow) var(--ease-out);
}
.switch:hover .switch-track { border-color: var(--text-faint); }
.switch input:focus-visible + .switch-track {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
.switch input:checked + .switch-track {
border-color: var(--accent);
background: var(--accent);
}
.switch input:checked + .switch-track .switch-thumb {
transform: translate(18px, -50%);
}
.switch-state {
min-width: 20px;
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 700;
line-height: 1;
}
.switch-state-on { display: none; }
.switch input:checked ~ .switch-state { color: var(--text); }
.switch input:checked ~ .switch-state .switch-state-off { display: none; }
.switch input:checked ~ .switch-state .switch-state-on { display: inline; }
.version-notice {
margin-bottom: var(--space-lg);
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--surface-alt);
font-size: var(--font-size-xs);
color: var(--text);
}
.version-notice p {
margin: 0 0 var(--space-sm);
}
.version-notice-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm) var(--space-lg);
}