/* KERR OUTLOOK DECK 2026-10-18 · one deck for the outlook charts: precipitation is the cover, then temperature, snow,
   models and accuracy. Same dark instrument look as the extended console (xc), gold for the Kerr blend. */
.kco{position:relative;margin:22px 0 10px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(23,26,32,.94),rgba(10,11,14,.97));box-shadow:0 40px 90px -40px rgba(0,0,0,.95);overflow:hidden}
.kco[hidden]{display:none}
.kco-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:18px 20px 12px}
.kco-t h2{margin:0;font:650 22px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.kco-sub{margin:5px 0 0;font:500 12.5px/1.35 Inter,system-ui,sans-serif;color:#9aa1ab}
.kco-models{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding-bottom:2px}
.kco-models::-webkit-scrollbar{display:none}
.kco-models[hidden]{display:none}
.kco-models button{appearance:none;flex:none;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#c9cdd3;border-radius:999px;padding:8px 12px;font:600 12px/1 Inter,system-ui,sans-serif;cursor:pointer;min-height:34px}
.kco-models button i{width:8px;height:8px;border-radius:50%;display:inline-block}
.kco-models button:hover{border-color:rgba(212,168,83,.5)}
.kco-models button.on{background:rgba(212,168,83,.18);border-color:rgba(212,168,83,.7);color:#fff}
.kco-models button.kb{color:#e5c77b}.kco-models button.kb.on{background:#d4a853;border-color:#d4a853;color:#15110a}
.kco-models button.al.on{background:rgba(244,114,182,.16);border-color:rgba(244,114,182,.6)}
.kco-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.08);overflow-x:auto;scrollbar-width:none}
.kco-tabs::-webkit-scrollbar{display:none}
.kco-tab{appearance:none;flex:none;background:none;border:0;border-bottom:2px solid transparent;color:#9aa1ab;font:600 13.5px/1 Inter,system-ui,sans-serif;padding:12px 12px 11px;cursor:pointer;margin-bottom:-1px}
.kco-tab[hidden]{display:none}
.kco-tab:hover{color:#e6e8eb}
.kco-tab.on{color:#fff;border-bottom-color:#d4a853}
.kco-tab:focus-visible,.kco-models button:focus-visible{outline:2px solid #d4a853;outline-offset:2px}
.kco-panes{padding:4px 0 2px}
.kco-pane[hidden]{display:none}
/* the console boxes sit flush inside the deck */
.kco .xc{margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.kco .xc+.xc{margin-top:0;border-top:1px solid rgba(255,255,255,.06)}
.kco .kco-pane.ksd{padding:6px 18px 14px}
.kco .kco-pane .ksd-sec:first-child{margin-top:8px}
.kco-gone{display:none!important}
@media (max-width:640px){.kco{border-radius:18px;margin:16px -4px 8px}.kco-h{padding:14px 14px 10px}.kco-t h2{font-size:19px}.kco-tab{padding:11px 10px 10px;font-size:13px}.kco .kco-pane.ksd{padding:4px 12px 12px}}
/* Data tab library: every outlook and snow chart as its own card */
.kco-lib{margin:28px 0 8px}
.kco-lib>h2{margin:0 0 4px;font:650 20px/1.2 Inter,system-ui,sans-serif;color:#fff;letter-spacing:-.01em}
.kco-lib>p{margin:0 0 12px;color:#9aa1ab;font:400 13.5px/1.45 Inter,system-ui,sans-serif}
.kco-lib .xc{margin:14px 0 0}
.kco-lib .ksd-sec{border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 16px;margin-top:14px;background:rgba(255,255,255,.015)}
@media (prefers-reduced-motion:reduce){.kco *{transition:none!important}}

/* Header artwork, one per tab (ChatGPT and Gemini, Oct 2026). Sits behind the title and tabs, fades into the deck. */
.kco-art{position:absolute;left:0;right:0;top:0;height:230px;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
.kco-art i{position:absolute;inset:0;background:no-repeat right center/cover;opacity:0;transition:opacity .6s ease}
.kco-art i.on{opacity:.9}
.kco-art i[data-k=precip]{background-image:url(/img/kco/precip.webp)}
.kco-art i[data-k=temp]{background-image:url(/img/kco/temp.webp)}
.kco-art i[data-k=snow]{background-image:url(/img/kco/snow.webp)}
.kco-art i[data-k=models]{background-image:url(/img/kco/models.webp)}
.kco-art i[data-k=acc]{background-image:url(/img/kco/accuracy.webp)}
.kco-art i[data-k=wind]{background-image:url(/img/kco/models.webp);transform:scaleX(-1)}
.kco-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,16,.85),rgba(12,13,16,.25) 45%,transparent 70%)}
.kco-h,.kco-tabs,.kco-panes{position:relative;z-index:1}
@media (max-width:640px){.kco-art{height:170px}
.kco-art i[data-k=precip]{background-image:url(/img/kco/precip-m.webp)}
.kco-art i[data-k=temp]{background-image:url(/img/kco/temp-m.webp)}
.kco-art i[data-k=snow]{background-image:url(/img/kco/snow-m.webp)}
.kco-art i[data-k=models]{background-image:url(/img/kco/models-m.webp)}
.kco-art i[data-k=acc]{background-image:url(/img/kco/accuracy-m.webp)}
.kco-art i[data-k=wind]{background-image:url(/img/kco/models-m.webp);transform:scaleX(-1)}}

/* MOBILE 2026-10-18 · grid children may shrink (the model table no longer stretches the Models tab), wide strips swipe, swipe edges fade */
.ksd>*,.kco-pane>*,#kcoLib>*{min-width:0;max-width:100%}
.kwide{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
.kwide::-webkit-scrollbar{display:none}
@media (max-width:760px){.kwide>svg{min-width:760px;width:760px!important;height:auto;max-width:none}}
.kfr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.kfl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.kfl.kfr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}

/* DESKTOP 2026-10-18 · drag to scroll and side arrows on long charts */
@media (hover:hover) and (pointer:fine){.kmr-wrap,.kwide,.ksd-mt-scroll,.hourly-scroll,.kco-models,.kco-tabs,.kr-tabs{cursor:grab}.kdrag{cursor:grabbing!important;user-select:none;-webkit-user-select:none;scroll-behavior:auto}.kdrag *{pointer-events:none}}
.karr{position:absolute;z-index:5;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(16,18,22,.88);color:#f2f3f5;font:400 24px/1 Inter,system-ui,sans-serif;display:grid;place-items:center;padding:0 0 3px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.5);opacity:.85;transition:opacity .15s,border-color .15s}
.karr:hover{opacity:1;border-color:#d4a853;color:#d4a853}
.karr[hidden]{display:none}
@media (hover:none),(pointer:coarse){.karr{display:none!important}}
.kmr-wrap:focus-visible,.kwide:focus-visible,.ksd-mt-scroll:focus-visible,.hourly-scroll:focus-visible{outline:2px solid #9fd0ec;outline-offset:2px}

/* TABS-SOLID 2026-10-18 (Errol: the tab row went see-through on Snow, the art is bright there): the tab row keeps one solid backing on every tab */
.kco-tabs{background:rgba(14,15,19,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}