/* Year slider (Dash 4 / Radix): brand track and a knob that lifts when grabbed (motion tokens in 00-tokens.css) */

.dash-slider-track { background: var(--color-fill-quiet-strong); }
.dash-slider-range { background: var(--color-fill-accent); }
.dash-slider-thumb {
    width: 22px; height: 22px;
    background: #fff;
    border: 0;
    box-shadow: 0 0 0 0.5px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.18), 0 1px 1px rgba(16, 24, 40, 0.12);
    cursor: grab;
    transition: scale var(--dur-spring) var(--ease-spring), box-shadow var(--dur-fast) linear;
}
.dash-slider-thumb:active { cursor: grabbing; scale: calc(1 + (1 - var(--press-scale)) * 4); box-shadow: 0 0 0 0.5px rgba(16, 24, 40, 0.12), 0 6px 14px rgba(16, 24, 40, 0.22); transition-duration: var(--dur-press); }
.dash-slider-thumb:focus-visible { outline: none; box-shadow: var(--focus-ring), 0 2px 6px rgba(16, 24, 40, 0.18); }

/* Mark labels are centred on their stop, so the first and last reach past the ends of the track: keep room for them
   before the value box beside the slider. On phones the value box takes its own line and the labels get smaller. */
.dash-slider-container { display: flex; align-items: center; gap: var(--space-4); }
.dash-slider-wrapper { flex: 1; min-width: 0; padding: 0 3.25rem 0 0.75rem; }
.dash-slider-mark { font-size: var(--text-xs); color: var(--color-ink-700); white-space: nowrap; }
/* A mark written on two lines ("2030" over "projection") needs room below the track */
.dash-slider-wrapper:has(.dash-slider-mark[style*="pre-line"]) { padding-bottom: 1rem; }
@media (max-width: 768px) {
    .dash-slider-container { flex-wrap: wrap; gap: var(--space-2); }
    .dash-slider-container > input { order: -1; margin-left: auto; }
    .dash-slider-wrapper { flex-basis: 100%; padding: 0 2.5rem 0 1rem; }
    .dash-slider-mark { font-size: 0.6875rem; }
}