@media (max-width: 1200px) {
.site-header { grid-template-columns: minmax(0, 1fr) auto; }
.site-nav {
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
.historical-risk-panel { grid-template-columns: 1fr; }
.historical-risk-picker {
border-right: 0;
border-bottom: 1px solid var(--border);
}
}
@media (max-width: 1080px) {
.charts-row { grid-template-columns: 1fr; }
.site-brand small { display: none; }
}
@media (max-width: 960px) {
.site-header {
display: flex;
top: 5px;
min-height: 0;
flex-wrap: wrap;
gap: var(--space-md);
margin-block: var(--space-xs) var(--space-md);
padding: var(--space-md) var(--space-md) var(--space-md);
border-radius: var(--radius-lg);
}
.site-brand { order: 1; }
.site-brand-mark {
width: 36px;
height: 36px;
}
.site-brand-copy strong { font-size: var(--font-size-sm); }
.site-nav {
order: 5;
width: 100%;
min-width: 0;
gap: var(--space-lg);
margin-left: 0;
padding-top: var(--space-xs);
border-top: 1px solid var(--border);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav-link { font-size: var(--font-size-2xs); }
.site-tools { order: 2; }
.site-header .lang-switch a {
padding: 0 var(--space-sm);
font-size: var(--font-size-2xs);
}
}
@media (max-width: 900px) {
.hub-group { grid-template-columns: 1fr; }
.focused-workbench { grid-template-columns: 1fr; }
.focused-form { border-right: 0; border-bottom: 1px solid var(--border); }
.comparison-workbench { grid-template-columns: 1fr; }
.index-scope-grid { grid-template-columns: 1fr; }
.app {
width: 100%;
height: auto;
min-height: 0;
margin: 0;
display: block;
}
.sidebar {
width: 100%;
min-width: 0;
max-height: none;
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--border);
box-shadow: none;
}
.main { max-height: none; padding: var(--space-xl) var(--space-xl) var(--space-3xl); }
.hero-value { font-size: var(--display-md); }
.hero-value-words { font-size: var(--display-sm); }
.hero-side { margin-left: 0; text-align: left; }
.hero-side .mini-label { margin-left: 0; }
.result-peek {
display: flex;
position: fixed;
inset-inline: 10px;
bottom: 10px;
z-index: 40;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
box-shadow: var(--elevation-overlay);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
color: var(--text);
font-family: inherit;
cursor: pointer;
text-align: left;
}
.result-peek[hidden] { display: none; }
.result-peek-text { display: grid; gap: var(--space-2xs); min-width: 0; }
.result-peek-label {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.result-peek-value {
font-size: var(--font-size-lg);
font-weight: 760;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.result-peek-cue {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
flex: none;
color: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 700;
}
.result-peek-cue svg { width: 14px; height: 14px; }
body { padding-bottom: 74px; }
}
@media (max-width: 560px) {
.seg-mode button {
min-width: 0;
min-height: var(--control-h);
justify-content: center;
padding: var(--space-md) var(--space-xs);
}
.seg-mode .seg-title {
font-size: var(--font-size-sm);
white-space: nowrap;
hyphens: none;
}
.seg-mode .seg-sub { display: none; }
body { padding-top: 0; }
.chart-head { align-items: flex-start; }
.chart-head-tools {
width: 100%;
justify-content: space-between;
}
.site-header {
position: relative;
top: auto;
right: auto;
left: auto;
width: calc(100% - 2 * var(--page-gutter));
height: auto;
margin: 0 auto var(--space-md);
padding: calc(3px + env(safe-area-inset-top)) 8px 3px;
align-content: center;
gap: var(--space-2xs) var(--space-md);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.site-brand-copy strong { font-size: var(--font-size-2xs); }
.site-brand-mark {
width: 32px;
height: 32px;
}
.site-brand-mark svg {
width: 18px;
height: 18px;
}
.site-header .site-theme {
width: var(--control-h-compact);
height: var(--control-h-compact);
min-width: var(--control-h-compact);
min-height: var(--control-h-compact);
}
.site-header .lang-switch a { padding: 0 var(--space-sm); }
.site-nav {
gap: var(--space-xs);
padding-top: 0;
}
.site-header .site-nav-link {
min-height: var(--control-h-compact);
padding-block: var(--space-2xs);
}
.hub-next-step {
align-items: stretch;
flex-direction: column;
}
.hub-primary-link { justify-content: center; }
.focused-fields,
.focused-result-grid,
.focused-reading,
.risk-case-grid,
.history-headline-grid { grid-template-columns: 1fr; }
.history-horizon-y-title { margin-left: var(--space-4xl); }
.history-horizon-plot-row { grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-md); }
.history-horizon-axis-title,
.history-horizon-legend,
.history-horizon-range { margin-left: var(--space-4xl); }
.history-horizon-range-summary { align-items: flex-start; flex-direction: column; }
.calendar-range { grid-template-columns: 1fr 1fr; }
.comparison-outcomes,
.allocation-hero { grid-template-columns: 1fr; }
.property-cost-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.allocation-bar { min-height: 130px; }
.focused-related { align-items: flex-start; flex-direction: column; }
.focused-related a { font-size: var(--font-size-sm); }
.result-matrix-summary { padding-inline: var(--space-lg); }
.result-matrix caption { padding: var(--space-lg) var(--space-lg) var(--space-md); }
.result-matrix th,
.result-matrix td { padding: var(--space-md) var(--space-md); }
.result-matrix tbody th[scope="row"] { padding-left: var(--space-lg); }
.result-matrix-note { padding: var(--space-md) var(--space-lg) var(--space-lg); }
.field-grid { grid-template-columns: 1fr; }
.timeline-slider-row { flex-wrap: wrap; }
.timeline-slider-row > input[type="range"] { flex-basis: 100%; }
.timeline-duration { width: 100%; }
.slider-row .timeline-duration .input-sm {
width: auto;
min-width: 0;
flex: 1;
}
.main-head { flex-direction: column; }
.cards { grid-template-columns: 1fr 1fr; }
.legal-card { border-radius: var(--radius-lg); }
.error-actions > a { flex: 1 1 100%; }
[data-accordion-summary="retirement"] { display: none; }
.legal-footer { align-items: flex-start; flex-direction: column; }
.legal-footer nav { justify-content: flex-start; }
}
@media (max-width: 560px) and (pointer: coarse) {
.site-header .site-theme {
width: var(--control-h);
height: var(--control-h);
min-width: var(--control-h);
min-height: var(--control-h);
}
.site-header .site-nav-link { min-height: var(--control-h); }
}
@media (max-width: 480px) {
.site-nav {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-2xs);
overflow: visible;
}
.site-nav-link {
width: 100%;
padding-inline: var(--space-2xs);
line-height: 1.2;
text-align: center;
white-space: normal;
}
.site-nav-link::after {
right: 4px;
left: 4px;
}
}
@media (max-width: 400px) {
.me-toolbar,
.me-grid { grid-template-columns: minmax(0, 1fr); }
.me-field-wide { grid-column: auto; }
.result-matrix th,
.result-matrix td { padding: var(--space-md) var(--space-sm); }
.result-matrix tbody th[scope="row"] {
padding-left: var(--space-md);
overflow-wrap: anywhere;
}
.result-matrix td { font-size: var(--font-size-2xs); }
.result-matrix thead th { letter-spacing: 0; }
.result-matrix .matrix-unit { display: block; }
.segmented { gap: var(--space-2xs); padding: var(--space-2xs); }
.segmented button { padding-inline: var(--space-xs); }
.seg-mode button { padding-inline: var(--space-xs); }
}
@media (max-width: 340px) {
.site-nav { gap: var(--space-md); }
.site-nav-link { font-size: var(--font-size-2xs); }
}
@media print {
.result-matrix { break-inside: auto; }
.result-matrix-disclosure > .result-matrix-summary { display: none; }
.result-matrix-disclosure > .result-matrix-body {
display: block !important;
}
.result-matrix-disclosure::details-content {
block-size: auto;
content-visibility: visible;
}
.result-matrix caption .matrix-title {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
.result-matrix thead { display: table-header-group; }
.result-matrix tbody { break-inside: avoid; }
.result-matrix caption { break-after: avoid; }
.result-matrix .matrix-net { border-left: 1px solid #999; }
.result-matrix-math[open] .result-matrix-math-body { display: block; }
.legal-page { padding: 0; background: #fff; color: #111; }
.legal-page .bg-glow,
.site-header,
.skip-link { display: none !important; }
.legal-card { padding: 0; border: 0; box-shadow: none; background: #fff; }
.legal-section p,
.legal-section li,
.legal-address,
.legal-footer { color: #333; }
.legal-section a,
.legal-footer a { color: #111; }
}
@media (pointer: coarse) {
.focused-input input,
.focused-select,
.return-reference-pick,
.ghost-btn,
.site-theme,
.site-nav-link,
.segmented button,
.panel-head-btn,
.lang-switch,
.chip-x,
.advanced-tax > summary,
.tool-menu button,
.tool-menu a,
.result-matrix-math > summary,
.footer-checks > summary,
.source-register > summary {
min-height: var(--control-h);
}
.fx-btn { position: relative; }
.fx-btn::before,
.ev-tl-marker::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: var(--control-h);
height: var(--control-h);
transform: translate(-50%, -50%);
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
animation-delay: 0s !important;
}
.action-primary,
.btn-primary,
.ghost-btn,
.site-theme,
.segmented button {
transform: none !important;
}
.action-primary::after,
.btn-primary::after {
display: none !important;
}
.action-continue,
.action-continue > span[aria-hidden="true"] {
transition: none !important;
}
.action-continue:hover,
.action-continue:focus-visible,
.action-continue:active,
.action-continue:hover > span[aria-hidden="true"] {
transform: none !important;
}
}