:root{--navy:#0d3565;--blue:#176ea3;--cream:#f5f0e7;--yellow:#ffd84a;--ink:#17324a;--muted:#607783}*{box-sizing:border-box}body{margin:0;background:#e9eef0;color:var(--ink);font-family:Arial,sans-serif}.app{width:min(100%,1280px);margin:auto;background:var(--cream);box-shadow:0 0 36px #0d356524}header{height:54px;display:flex;align-items:center;padding:0 14px;background:linear-gradient(90deg,#0d3565,#12679a)}header a{color:#fff;font-weight:800;font-size:18px;text-decoration:none}header a>span{color:#4fc3ff}header small{margin-left:7px;color:#b7d8eb;font:700 10px ui-monospace;letter-spacing:1px}.console{padding:9px 10px;background:linear-gradient(#fffdf8,#f3eadc);border-bottom:1px solid #d9c7a9}.status-row{display:flex;gap:8px}.status{width:66.66%;min-height:92px;display:flex;align-items:center;padding:9px 10px;border:1px solid var(--yellow);border-radius:12px;background:linear-gradient(135deg,#0d2f48,#145f8d);color:#fff}.copy{display:flex;min-width:0;flex-direction:column}.copy small{color:#9ddcff;font:700 10px ui-monospace;letter-spacing:1px}.copy strong{margin-top:3px;font-size:23px}.copy span{margin-top:4px;color:#d4efff;font-size:12px}.actions{flex:1;display:flex;flex-direction:column;gap:7px}.actions button{flex:1;min-height:42px;border-radius:11px;background:#fff;color:#194967}.actions button:first-child{border:2px solid #48bfe8}.actions button:last-child{border:2px solid #8a67c7}.actions svg{width:20px;fill:none;stroke:currentColor;stroke-width:2}.state-mark,.state-icon{display:flex;align-items:center;justify-content:center}.state-mark{width:42%;margin-right:8px}.state-icon{width:78px;height:36px;flex:0 0 78px;border:1.5px solid var(--yellow);border-radius:8px;background:var(--blue)}.trails{display:flex;z-index:2;flex-direction:column;gap:5px}.trails i{display:block;width:48px;height:6px;border-radius:2px;background:#fff}.trails i:last-child{height:5px;opacity:.6}.plane{z-index:3;margin-left:3px;color:var(--yellow);font-size:18px}.low .trails{gap:0}.low .trails i{width:20px;height:3px}.low .trails i:last-child{display:none}.no .plane{margin:0}.yes{width:118px;flex-basis:118px;justify-content:flex-start}.yes .plane{transform:translateY(-3px)}.cloud-icon{display:block;width:34px;height:auto;margin-right:2px}.cloud{z-index:1;position:relative;width:27px;height:18px;margin-right:3px;border-radius:10px;background:#dce8f3}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:15px;height:15px;left:3px;top:-7px}.cloud:after{width:18px;height:18px;right:1px;top:-9px}.day-row{display:flex;align-items:center;gap:8px;margin-top:8px}.weather{min-width:114px;height:44px;display:flex;align-items:center;gap:6px;padding:4px 7px;border:2px solid #f2a23a;border-radius:12px;background:#fff}.weather svg{width:35px}.weather strong{font-size:17px}.weather span{display:block;color:#51738a;font-size:10px}.range{display:block;flex:1;min-width:0}.range input{width:100%;margin:0;accent-color:#168dcc}.range>span{display:flex;justify-content:space-between}.range i{color:#6b7c84;font:normal 9px ui-monospace}.range i:nth-child(2){color:#087db7;font-weight:700}.hours{padding:6px 8px 0}.hours i{font-size:10px}.mapbox{position:relative;height:clamp(430px,62vh,700px);background:#dff3fb}.mapbox #map{height:100%}.leaflet-control-attribution{display:none}#message{display:none;position:absolute;z-index:500;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px;border-radius:8px;background:#fffffff0}#message.show{display:block}.updated{position:absolute;z-index:500;left:8px;top:8px;padding:7px 9px;border-radius:7px;background:#060a08e3;color:#8fa3bd;font:10px/1.4 ui-monospace}.updated>*{display:block}.updated b{color:#fff}.updated span:nth-of-type(2){margin-top:4px}.meta{position:absolute;z-index:500;left:0;right:0;bottom:21px;display:flex;justify-content:center;gap:15px;padding:5px;background:#080e14db;color:#43e96a;font:9px ui-monospace}.meta b{color:#fff}.attr{position:absolute;z-index:500;left:0;right:0;bottom:0;padding:5px;background:#080e14f0;color:#8fa6b8;text-align:center;font:9px ui-monospace}.attr a{color:inherit}.details{padding:16px 12px 20px}.details h1{margin:0 0 13px;font-size:18px}.states{display:grid;grid-template-columns:1fr 1fr;gap:11px}.states>div{display:flex;align-items:center;gap:9px}.states p{margin:0;font-size:13px}.states small{display:block;margin-top:3px;color:var(--muted)}.zone{display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%}.zlow{background:#f7a8c4}.zpossible{background:#df4e88}.zyes{background:#d31835}.note{color:var(--muted);font-size:13px;line-height:1.5}.details aside{display:flex;align-items:center;gap:13px;padding:12px;border-radius:10px;background:#e6f4fa}.details aside h2{margin:0;font-size:15px}.details aside p{margin:4px 0 0;color:#31596e;font-size:13px}.compact{width:66px;height:66px;flex:0 0 66px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;border:2px solid var(--yellow);border-radius:14px;background:linear-gradient(145deg,#27c4ef,#12639e);color:#fff}.compact .trails i{width:26px;height:3px}.compact b{margin-left:3px;color:var(--yellow)}.compact small{width:100%;margin-top:4px;text-align:center;font:9px ui-monospace}footer{padding:16px 12px 20px;background:var(--navy);color:#c9deec;font-size:13px;line-height:1.6}footer strong{display:block;color:#fff}footer>a{color:#8de8ff}footer nav{display:flex;gap:17px;margin-top:10px}footer nav a{color:#fff}#toast{position:fixed;z-index:1000;left:50%;bottom:20px;padding:10px 14px;border-radius:8px;background:#102436;color:#fff;opacity:0;transform:translate(-50%,10px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}.legal{width:min(720px,calc(100% - 32px));margin:auto;padding:42px 0 70px}.legal p{font-size:17px;line-height:1.65;color:#314c5d}@media(min-width:760px){.app{display:grid;grid-template-columns:440px 1fr;grid-template-rows:54px auto auto}header{grid-column:1/-1}.console{grid-column:1}.mapbox{grid-column:2;grid-row:2/4;height:calc(100vh - 54px);min-height:620px}.details{grid-column:1}.app>footer{grid-column:1/-1}}@media(max-width:350px){.states{grid-template-columns:1fr}.copy span{font-size:11px}}.info{padding:16px 18px;background:#f4f7fa;color:#18324d;border-top:1px solid #d6e0e8}.info h1,.info h2{color:#0d3565;line-height:1.2}.info h1{font-size:22px;margin:0 0 8px}.info h2{font-size:16px;margin:14px 0 4px}.info p{font-size:14px;line-height:1.5;margin:0}.details>h2{font-size:18px;margin:0 0 12px}.details aside p{margin:4px 0 8px}.cta{display:inline-block;padding:7px 12px;border-radius:6px;background:#0d3565;color:#fff;text-decoration:none;font-weight:700;font-size:13px}@media(min-width:760px){.app{grid-template-rows:54px auto auto auto}.mapbox{grid-row:2/5}.info,.details{grid-column:1}}.info,.info h1,.info h2,.info p,.details,.details>h2,.states small,.details aside h2,.details aside p{color:#111}.actions button:first-child{border-color:#48bfe8}.actions button:last-child{border-color:#28a745}.actions .weather{width:100%;min-width:0;height:44px}.actions .weather svg{width:31px;flex:0 0 31px}.actions .weather strong{font-size:15px}.actions .weather span{font-size:9px}.place-search{position:relative;z-index:800;width:114px;min-width:114px;height:44px}.place-search>input{width:100%;height:44px;padding:7px 29px 7px 9px;border:2px solid #48bfe8;border-radius:12px;background:#fff;color:#111;font-size:14px}.place-search>svg{position:absolute;right:8px;top:12px;width:19px;fill:none;stroke:#194967;stroke-width:2;pointer-events:none}.place-search>input::-webkit-search-cancel-button{display:none}#place-results{position:absolute;z-index:900;left:0;top:49px;width:min(360px,calc(100vw - 40px));max-height:260px;overflow-y:auto;border:1px solid #ccd7df;border-radius:9px;background:#fff;box-shadow:0 10px 24px #0d356533}#place-results[hidden]{display:none}#place-results button{width:100%;display:flex;justify-content:space-between;gap:12px;padding:10px 11px;border:0;border-bottom:1px solid #e1e7eb;background:#fff;color:#111;text-align:left}#place-results button:last-child{border-bottom:0}#place-results button:focus,#place-results button:hover{background:#eaf6fb}#place-results strong{font-size:13px}#place-results span{color:#333;font-size:11px;text-align:right}#place-results .search-note{padding:11px;color:#333;font-size:12px}.app>footer>small{display:block;margin-top:6px;color:#c9deec}.app>footer>small a{color:#8de8ff}@media(max-width:350px){.actions .weather{padding:3px 4px}.actions .weather svg{width:27px;flex-basis:27px}.place-search{width:100px;min-width:100px}}/* Custom day/hour sliders: consistent controls instead of browser defaults. */.range input{  --range-progress:50%;  height:24px;  appearance:none;  -webkit-appearance:none;  background:transparent;  cursor:pointer;}.range input::-webkit-slider-runnable-track{  height:6px;  border-radius:999px;  background:linear-gradient(to right,#168dcc 0 var(--range-progress),#cbd6dc var(--range-progress) 100%);}.range input::-webkit-slider-thumb{  width:18px;  height:18px;  margin-top:-6px;  appearance:none;  -webkit-appearance:none;  border:3px solid #168dcc;  border-radius:50%;  background:#fff;  box-shadow:0 1px 4px #0d356540;}.range input::-moz-range-track{  height:6px;  border:0;  border-radius:999px;  background:#cbd6dc;}.range input::-moz-range-progress{  height:6px;  border-radius:999px;  background:#168dcc;}.range input::-moz-range-thumb{  width:12px;  height:12px;  border:3px solid #168dcc;  border-radius:50%;  background:#fff;  box-shadow:0 1px 4px #0d356540;}.range input:focus-visible{outline:2px solid #ffd84a;outline-offset:2px;border-radius:999px}/* Keep city search readable when the device or browser uses dark mode. */.place-search>input{  appearance:none;  -webkit-appearance:none;  color-scheme:light;  background-color:#fff;  color:#111;  -webkit-text-fill-color:#111;}.place-search>input::placeholder{  color:#6b7c84;  -webkit-text-fill-color:#6b7c84;  opacity:1;}/* Keep the aircraft centred on the contrail in the website forecast banner. */.compact .trails,.compact>b{  align-self:center;}.compact>b{  display:inline-flex;  align-items:center;  height:18px;  line-height:18px;  transform:translateY(0);}/* Forecast PNG already contains the approved magenta palette. */.forecast-overlay{filter:none}/* Selected-city forecast marker. */.forecast-city-marker{background:transparent;border:0}.forecast-city-marker .state-icon{box-shadow:0 2px 8px #0008}