/* Page structure, cards, form fields and tables use the shared site components. */
.evolution { --evolution-muted: #62738b; }
.evolution * { box-sizing: border-box; }
.evolution [hidden] { display: none !important; }
.evolution-heading h1 { margin-top: 0; }
.evolution-heading h1 span { color: var(--color-primary); }
.evolution-back { display: inline-flex; align-items: center; gap: var(--size-xs); margin: var(--size-xs) 0; }
.evolution-notice { margin-bottom: var(--size-md); }
.evolution-notice strong { margin-right: var(--size-xs); }
.evolution .content-widget h2 { margin-top: 0; }
.evolution-selection-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--size-md); }
.evolution-selection-heading h2 { margin-bottom: var(--size-xs); }
.evolution-selection-heading p { margin: 0; }
.evolution-selection-heading button { flex-shrink: 0; color: var(--color-primary); }
.evolution-year-picker { margin: var(--size-md) 0 var(--size-xs); }
.evolution-year-picker > div { display: flex; flex-wrap: wrap; gap: var(--size-xs); }
.evolution-year-2024 { --year-color: #596579; }
.evolution-year-2025 { --year-color: #087e83; }
.evolution-year-2026 { --year-color: var(--color-primary); }
.evolution-year-2027 { --year-color: #8055c3; }
.evolution-year-2028 { --year-color: #b8540f; }
.evolution-year-picker label { margin: 0; }
.evolution-year-picker label:has(input:checked) { border-color: var(--year-color); color: inherit; background: color-mix(in srgb, var(--year-color) 7%, var(--widget-background)); }
.evolution-year:has(:disabled) { opacity: .5; cursor: default; }
.evolution-year input { accent-color: var(--year-color); width: 15px; height: 15px; }
.evolution-swatch { width: 16px; border-top: 3px solid var(--year-color); }
.evolution-year-2027 .evolution-swatch, .evolution-year-2028 .evolution-swatch { border-top-style: dashed; }
.evolution-year small { font-size: 11px; font-weight: 400; color: var(--evolution-muted); }
.evolution-selection-help { font-size: 12px; color: var(--evolution-muted); margin-bottom: 0; }
.evolution-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--size-md); }
.evolution-chart-card { min-width: 0; }
.evolution-chart-heading h2 { margin-bottom: var(--size-xs); }
.evolution-chart-heading p { color: var(--evolution-muted); margin: 0; }
.evolution-plot { position: relative; margin-top: var(--size-md); height: 290px; }
.evolution-plot svg { display: block; width: 100%; height: 100%; overflow: visible; touch-action: pan-y; }
.evolution-empty { position: absolute; inset: 30px 0; display: grid; place-items: center; text-align: center; color: var(--evolution-muted); font-size: 13px; background: var(--background); border-radius: 4px; padding: var(--size-md); }
.evolution-probe { border: 0; padding: var(--size-md) 0 0; margin: 0; min-width: 0; }
.evolution-probe-heading { display: flex; gap: var(--size-xs); justify-content: space-between; align-items: center; }
.evolution-probe-heading label { margin: 0; font-size: 13px; }
.evolution-probe-heading > span { white-space: nowrap; font-size: 12px; color: var(--evolution-muted); }
.evolution-probe .app-input { width: 85px; padding: 0 8px; margin-bottom: 0; font-family: inherit; font-size: 15px; }
.evolution-probe input[type="range"] { display: block; width: 100%; margin: var(--size-xs) 0 3px; accent-color: var(--color-primary); cursor: pointer; min-height: 24px; }
.evolution-range-labels { display: flex; justify-content: space-between; color: var(--evolution-muted); font-size: 11px; }
.evolution-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: var(--size-xs); margin-top: var(--size-md); padding: 0; }
.evolution-values li { padding: var(--size-sm); border-radius: 4px; background: var(--background); border-top: 2px solid var(--year-color); }
.evolution-values span { font-size: 12px; color: var(--evolution-muted); display: block; }
.evolution-values strong { font-size: 21px; font-variant-numeric: tabular-nums; display: block; margin-top: 5px; }
.evolution-values .unavailable { font-size: 12px; }
.evolution-difference { margin: var(--size-sm) 0 0; font-size: 13px; font-weight: 600; }
.evolution-chart-note { color: var(--evolution-muted); margin: var(--size-xs) 0 0; font-size: 12px; }
.evolution-method p { line-height: 1.7; }
.evolution-method p:last-child { margin-bottom: 0; }
.evolution-table-scroll { overflow-x: auto; }
.evolution .app-table { width: 100%; min-width: 640px; }
.evolution th small { display: block; font-weight: 400; font-size: 11px; }
.evolution td a { color: var(--color-primary); font-weight: 600; }
.evolution caption { text-align: left; padding-bottom: var(--size-sm); color: var(--evolution-muted); }
.evolution :focus-visible { outline: 2px solid var(--color-primary) !important; outline-offset: 3px; }
.evolution-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1000px) {
    .evolution-charts { grid-template-columns: 1fr; gap: 0; }
    .evolution-plot { height: 320px; }
}
@media (max-width: 600px) {
    .evolution-selection-heading { align-items: flex-start; }
    .evolution-selection-heading button { font-size: 12px; max-width: 110px; }
    .evolution-year small { font-size: 10px; }
    .evolution-plot { height: 270px; }
    .evolution-probe-heading label { max-width: 160px; font-size: 12px; }
}