/* Selected concept C: ivory sliding climate control with a chrome outer bezel. */
.climate-selector{width:min(100%,760px);margin:10px auto 40px;--thumb-width:64px}
.climate-selector .climate-labels{display:flex;justify-content:space-between;gap:0;border:0;border-radius:0;padding:0;margin:0 0 12px;overflow:visible;background:transparent}
.climate-selector .climate-labels button{position:relative;flex:0 0 110px;padding:10px 0 26px;min-height:65px;border:0;border-radius:12px;background:transparent;text-align:center;color:#7b796a;font-size:14px;font-weight:700;letter-spacing:.7px}
.climate-selector .climate-labels span{display:inline;margin:0 5px 0 0;font-size:10px}
.climate-selector .climate-labels small{display:none}
.climate-selector .climate-labels button:after{content:'';position:absolute;width:5px;height:12px;left:calc(50% - 2.5px);bottom:0;border-radius:2px;background:#a40d22;opacity:.6}
.climate-selector .climate-labels button:nth-child(2):after{background:#b95805}
.climate-selector .climate-labels button:nth-child(3):after{background:#215732}
.climate-selector .climate-labels [aria-selected=true]{color:var(--ink);background:transparent}
.climate-selector .climate-labels [aria-selected=true]:after{opacity:1;box-shadow:0 0 0 3px #c4b98d24}
.climate-chrome{padding:5px;border-radius:27px;background:linear-gradient(165deg,#fdfefd 0%,#bfc3c1 15%,#fbfcfb 27%,#777e7a 47%,#f4f6f3 53%,#a9afaa 74%,#fcfdfb 88%,#7e8780 100%);border:1px solid #858b83;box-shadow:0 9px 15px #403c2d20,0 1px 1px #fff inset,0 -1px 1px #5558 inset}
.climate-panel{padding:15px 20px;border-radius:21px;border:1px solid #b9b298;background:linear-gradient(#fffbed 0%,#f5eed7 32%,#ede3c7 85%,#d8cfb3);box-shadow:inset 0 2px 3px #fff,inset 0 -2px 4px #8c82623d}
.climate-slider{display:block;width:100%;height:56px;margin:0;padding:0;border:0;border-radius:9px;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:pan-y}
.climate-slider:focus-visible{outline:2px solid #706e5f;outline-offset:6px}
.climate-slider::-webkit-slider-runnable-track{height:23px;border-radius:20px;border:1px solid #767969;background:repeating-linear-gradient(0deg,#b5b7ac 0px,#c9ccc1 1px,#c1c3b9 2px,#d1d2c8 3px);box-shadow:inset 0 3px 5px #20271f66,0 1px 1px #fff,0 0 0 2px #d5d2be}
.climate-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:var(--thumb-width);height:52px;margin-top:-15px;border:3px solid #c0c5be;border-radius:11px;background:linear-gradient(#283026,#283026) center/4px 28px no-repeat,linear-gradient(135deg,#fffbed,#f5ecd5 55%,#e8dcbf);box-shadow:0 4px 6px #262a214d,0 0 0 1px #73796f,inset 0 2px 1px #fff,inset 0 -2px 2px #aa9c7c;cursor:grab}
.climate-slider:active::-webkit-slider-thumb{cursor:grabbing}
.climate-slider::-moz-range-track{height:23px;border-radius:20px;border:1px solid #767969;background:repeating-linear-gradient(0deg,#b5b7ac 0px,#c9ccc1 1px,#c1c3b9 2px,#d1d2c8 3px);box-shadow:inset 0 3px 5px #20271f66,0 1px 1px #fff,0 0 0 2px #d5d2be}
.climate-slider::-moz-range-thumb{width:var(--thumb-width);height:46px;border:3px solid #c0c5be;border-radius:11px;background:linear-gradient(#283026,#283026) center/4px 28px no-repeat,linear-gradient(135deg,#fffbed,#f5ecd5 55%,#e8dcbf);box-shadow:0 4px 6px #262a214d,0 0 0 1px #73796f,inset 0 2px 1px #fff,inset 0 -2px 2px #aa9c7c;cursor:grab}
@media(max-width:480px){.climate-selector{--thumb-width:48px;margin-bottom:30px}.climate-selector .climate-labels button{flex-basis:86px;font-size:11px;letter-spacing:0}.climate-selector .climate-labels span{font-size:9px;margin-right:3px}.climate-chrome{padding:4px;border-radius:23px}.climate-panel{padding:10px 13px;border-radius:18px}.climate-slider{height:52px}}
/* Number badges become illuminated dashboard telltales. */
.climate-selector .climate-labels button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:12px;padding:8px 0 4px;min-height:91px}
.climate-selector .climate-labels .moment-name{display:block;font:inherit;white-space:nowrap}
.climate-selector .climate-labels button::after{display:none}
.climate-selector .climate-labels .moment-lamp{position:relative;display:flex;align-items:center;justify-content:center;width:43px;height:43px;flex:0 0 43px;margin:0;border-radius:50%;border:1px solid #474a3f;background:radial-gradient(circle at 35% 24%,#45473a,#24291f 72%);color:#a29d82;font-family:Impact,'Arial Narrow',sans-serif;font-size:24px;font-weight:400;line-height:1;letter-spacing:-.6px;box-shadow:inset 0 2px 4px #0008,0 1px 1px #fff9;transition:background .2s,color .2s,box-shadow .2s,border-color .2s}
.climate-selector .climate-labels .moment-lamp::before{content:'';position:absolute;left:9px;right:9px;top:4px;height:9px;border-radius:50%;background:linear-gradient(#ffffff32,#fff0);pointer-events:none}
.climate-selector .climate-labels button:nth-child(1){--lamp-ink:#a40d22}
.climate-selector .climate-labels button:nth-child(2){--lamp-ink:#b95805}
.climate-selector .climate-labels button:nth-child(3){--lamp-ink:#215732}
.climate-selector .climate-labels [aria-selected=true] .moment-lamp{color:var(--lamp-ink);border-color:#fff5cf;background:radial-gradient(circle at 38% 30%,#fffef3,#fff0b9 65%,#e8ca78);box-shadow:inset 0 1px 3px #fff,0 0 5px #fff3bb,0 0 15px #f5ce7199,0 0 26px #f5ce7140}
@media(max-width:480px){.climate-selector .climate-labels button{gap:10px;min-height:82px;padding-bottom:3px}.climate-selector .climate-labels .moment-lamp{width:37px;height:37px;flex-basis:37px;font-size:22px}.climate-selector .climate-labels .moment-name{font-size:11px}}
/* A fine chrome bezel, independent of the telltale's on/off lighting. */
.climate-selector .climate-labels .moment-lamp::after{content:'';position:absolute;inset:-2px;padding:2px;border-radius:50%;pointer-events:none;background:conic-gradient(from 20deg,#fff 0deg,#8d969d 45deg,#fff 80deg,#313940 125deg,#e9edf0 160deg,#fff 200deg,#747e86 240deg,#fff 285deg,#a7b0b6 325deg,#fff 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.climate-selector .climate-labels .moment-lamp::after{inset:-3px;padding:0;background:transparent url('assets/number-chrome-ring.svg?v=2') center/100% 100% no-repeat;-webkit-mask:none;mask:none;box-shadow:none}
.climate-selector .climate-labels [aria-selected=true] .moment-lamp{border-color:#7a838a;box-shadow:inset 0 1px 3px #fff,inset 0 0 7px #ffe5a0,0 0 9px #dbe3e950}