/* 11-10 year slider + year-page illustration (year_slider.py, yslider.js) */
.ysl { display: grid; gap: 12px; margin-block: 8px 24px }
.ysl-stage { position: relative; aspect-ratio: 3 / 2; width: 100%; max-width: 100%; background: transparent; overflow: hidden }   /* 11-10 (Elijah): no box around the slider */
.ysl-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .22s ease }
.ysl-stage img.on { opacity: 1 }
.ysl-yr { position: absolute; left: 16px; top: 12px; display: grid; line-height: 1 }
.ysl-yr b { font-size: clamp(44px, 11vw, 88px); font-weight: 800; letter-spacing: -.04em; color: #17161a; font-variant-numeric: tabular-nums }
.ysl-gen { font-size: 13px; font-weight: 600; color: #6b6870; margin-top: 4px; letter-spacing: .02em }
.ysl-info { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-height: 28px; font-size: 15px; font-weight: 600 }
.ysl-li { padding: 4px 10px; border-radius: 999px; background: #f3f1ec }
.ysl-li.good { background: #e6f4ea; color: #1e6b34 } .ysl-li.bad { background: #fde8e7; color: #a3241c } .ysl-li.na { font-weight: 500; color: #6b6870 }
.ysl-yt { color: #6b6870 }
.ysl-go { margin-left: auto }
.ysl-range { width: 100%; height: 36px; accent-color: #e9b300; cursor: pointer; touch-action: pan-y }
.ysl-ends { display: flex; justify-content: space-between; font-size: 12px; color: #6b6870; margin-top: -8px; font-variant-numeric: tabular-nums }
figure.aiy { margin: 12px 0 0 }
figure.aiy img { width: 100%; max-width: 100%; height: auto; background: transparent }
figure.aiy figcaption { font-size: 12.5px; color: #6b6870; margin-top: 6px }
@media (prefers-reduced-motion: reduce) { .ysl-stage img { transition: none } }

/* 11-10 (Elijah): the slider as the model page's top image (ysl-hero), opening on the best year */
.ysl-hero { margin: 0 0 14px; gap: 8px }
.ysl-hero .ysl-stage { border: 0; background: transparent; border-radius: 0 }
.ysl-hero .ysl-yr { left: 4px; top: 2px }
.ysl-hero .ysl-yr b { font-size: clamp(36px, 9vw, 64px) }
.ysl-hero .ysl-info { font-size: 14px; min-height: 26px; gap: 6px 10px }
.ysl-best { padding: 4px 10px; border-radius: 999px; background: #ffd400; color: #17161a; font-weight: 700; font-size: 13px }
.ysl-hero .ysl-range { height: 32px }

/* 11-10 (Elijah): no box around the slider or the year image; every car on one canvas (same width, same baseline), so nothing jumps while sliding */
.ysl-stage { border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.ysl-stage img { object-position: 50% 100%; }
figure.aiy img { background: transparent !important; border-radius: 0 !important; }
figure.aim { margin: 0; position: relative; width: min(100%, 640px) } figure.aim img { aspect-ratio: 5 / 3; filter: none }   /* 11-10: no drop-shadow (iOS clipped it into a hard line) */

/* 11-12 (Jess: the slider was ~14 px per year on a phone): a bigger thumb + a year picker beside the slider */
.ysl-ctl { display: flex; align-items: center; gap: 12px; }
.ysl-ctl .ysl-range { flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; }
.ysl-range::-webkit-slider-thumb { width: 28px; height: 28px; }
.ysl-range::-moz-range-thumb { width: 28px; height: 28px; }
.ysl-pick { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #6b6870; font-weight: 600; }
.ysl-sel { min-height: 44px; padding: 0 30px 0 12px; border: 1px solid #d9d6cf; border-radius: 12px; background: #fff; color: #17161a; font: 700 16px/1 inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.ysl-sel:focus-visible { outline: 2px solid #17161a; outline-offset: 2px; }
@media (max-width: 640px) { .ysl-pl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
/* short screens: the car shrinks so the answer is above the fold */
@media (max-height: 820px) { .ysl-hero .ysl-stage { max-height: 34vh; } .ysl-hero .ysl-yr b { font-size: clamp(30px, 7vw, 52px); } }
/* 11-12 r2: the YouTube score explains itself on tap; partial (2023+) years are gray */
button.ysl-yt { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px }
button.ysl-yt i { font-style: normal; font-size: .9em }
.ysl-ytn { flex-basis: 100%; margin: 0; font-size: 13px; font-weight: 400; color: #6b6870; line-height: 1.4 }