#model-mode-controls,#ops-model-title{display:none}
body[data-weather-mode="model"] #radar-controls > :not(#model-mode-controls){display:none!important}
body[data-weather-mode="model"] #model-mode-controls{display:grid;gap:7px;width:100%}
body[data-weather-mode="model"] #radar-controls{display:block!important;width:min(720px,calc(100vw - 110px));padding:12px!important}
body[data-weather-mode="model"] #layers-panel,body[data-weather-mode="model"] #btn-layers,body[data-weather-mode="model"] #explorer-stream-alert,body[data-weather-mode="model"] #ops-impact-popup{display:none!important}
body[data-weather-mode="model"] #ops-model-title{display:flex;align-items:center;gap:18px;position:fixed;right:12px;z-index:1000;padding:13px;background:#071b29;border:1px solid #ffc300;border-radius:14px;color:white}
#ops-model-title>span{color:#ffc300;font-size:11px;font-weight:800}#ops-model-title>strong{font-size:20px}#ops-model-title>small{margin-left:auto;color:#b8c9d7;font-size:11px}
.model-selectors,.model-playback{display:flex;align-items:center;gap:10px}.model-selectors label{display:flex;align-items:center;gap:6px}.model-selectors select{max-width:280px;background:#ffc300;color:#071b29;border-radius:6px;padding:5px}.model-playback input{flex:1;min-width:50px}.model-playback button,.model-selectors button{padding:5px 10px;border:1px solid #8297a4;border-radius:6px;background:#183549;color:white}#model-frame-status,#model-frame-label{font-size:11px;color:#d8e5ef}
@media(max-width:650px){.model-selectors{flex-wrap:wrap}.model-selectors select{max-width:210px}#ops-model-title{flex-wrap:wrap;gap:5px!important}#ops-model-title>strong{font-size:15px}#ops-model-title>small{width:100%;margin:0}}

@media(max-width:650px){body[data-weather-mode="model"] #radar-controls{width:calc(100vw - 24px)!important;max-width:none;left:12px!important;right:12px!important;transform:none!important;box-sizing:border-box}.model-selectors label{font-size:12px;min-width:0;max-width:100%}.model-selectors select{min-width:0;max-width:190px}#ops-model-title{padding:9px!important}#model-frame-status{overflow-wrap:anywhere}}

/* Compact two-row forecast controls, matching the radar timeline. */
body[data-weather-mode="model"] #radar-controls{padding:7px 9px!important}
body[data-weather-mode="model"] #model-mode-controls{gap:5px}
#model-mode-controls .model-selectors{gap:5px;flex-wrap:nowrap}
#model-mode-controls #model-frame-status{flex:1;min-width:90px;font-size:10px;line-height:1.2;color:#fff}
#model-mode-controls .model-selectors select{background:#ffc300!important;color:#000!important;border:0!important;border-radius:5px;padding:4px 6px;font-size:11px;height:25px;min-width:0;max-width:240px}
#model-mode-controls .model-selectors option{background:#ffc300;color:#000}
#model-mode-controls button{height:26px;min-width:26px;padding:0 4px;border-radius:5px;background:#53616c;color:#fff;display:flex;align-items:center;justify-content:center}
#model-mode-controls [data-model="play"]{height:36px;width:36px;min-width:36px;border-radius:50%;border:2px solid #e4ecf2;background:#071b29;font-size:17px}
#model-mode-controls .model-playback{gap:6px}
.model-timeline{flex:1;min-width:0}
.model-track{position:relative;height:12px;margin:0 8px;background:linear-gradient(90deg,#399cb6 0%,#59b681 40%,#e0d044 70%,#ff973d 100%);border-radius:8px}
#model-mode-controls input[type="range"]{appearance:none;-webkit-appearance:none;position:absolute;inset:-4px -8px;width:calc(100% + 16px);height:20px;margin:0;background:transparent!important;cursor:pointer;border:0;padding:0}
#model-mode-controls input[type="range"]::-webkit-slider-runnable-track{height:12px;background:transparent;border:0}
#model-mode-controls input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-3px;border:2px solid #fff0b0;border-radius:50%;background:#ffc300}
#model-mode-controls input[type="range"]::-moz-range-track{height:12px;background:transparent;border:0}
#model-mode-controls input[type="range"]::-moz-range-thumb{width:14px;height:14px;border:2px solid #fff0b0;border-radius:50%;background:#ffc300}
#model-mode-controls input:focus-visible{outline:2px solid white;outline-offset:3px}
#model-time-ticks{position:absolute;inset:0;pointer-events:none}
.model-time-tick{position:absolute;top:3px;width:6px;height:6px;transform:translateX(-50%);background:#d6e5e9;border-radius:50%;opacity:.8}
.model-time-labels{display:flex;justify-content:space-between;gap:5px;margin-top:5px;font-size:9px;font-weight:700;color:#e3edf4;white-space:nowrap}
#model-mode-controls #model-frame-label{font-size:9px}
@media(max-width:650px){#model-mode-controls .model-selectors{flex-wrap:wrap}#model-mode-controls #model-frame-status{flex-basis:100%;font-size:9px}#model-mode-controls .model-selectors select{flex:1;max-width:none;font-size:10px}.model-time-labels{font-size:8px;flex-wrap:wrap}#model-mode-controls #model-frame-label{font-size:8px}}

#model-product-legend{position:absolute;bottom:calc(100% + 8px);right:0;box-sizing:border-box;width:440px;max-width:100%;padding:9px 11px;border:1px solid #ffc300;border-radius:10px;background:#071b29;color:#fff;font-size:10px;box-shadow:0 2px 8px #0005}
#model-product-legend>strong{display:block;font-size:12px;margin-bottom:7px}
.model-legend-scale{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 4px}
.model-legend-scale>div{display:flex;flex-direction:column;gap:3px;text-align:center;font-size:9px;white-space:nowrap}
.model-legend-swatch{display:block;height:10px;border:1px solid #ffffff30;border-radius:2px}
#model-product-legend small{display:block;margin-top:6px;color:#b8c9d7;font-size:10px}
#model-product-legend img{display:block;max-width:100%;width:300px;height:auto}
#model-product-legend a{color:#ffc300}
@media(max-width:650px){.model-legend-scale{grid-template-columns:repeat(5,minmax(0,1fr))}#model-product-legend{padding:7px 9px}}

/* Product scale belongs to the title banner, leaving the map controls clear. */
body[data-weather-mode="model"] #ops-model-title{flex-wrap:wrap;gap:4px 18px;padding-bottom:7px}
#ops-model-title #model-product-legend{position:static;flex-basis:100%;width:100%;max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;margin-top:2px}
#ops-model-title #model-product-legend>strong{display:none}
#ops-model-title .model-legend-scale{display:block;margin:0 12px}
.model-legend-values{position:relative;height:15px;font-size:10px;color:#e3edf4}
.model-legend-values>span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.model-legend-values>span:first-child{transform:none}
.model-legend-values>span:last-child{transform:translateX(-100%)}
.model-legend-ramp{height:9px;border:1px solid #ffffff40;border-radius:3px}
#ops-model-title #model-product-legend small{margin-top:3px;font-size:9px;text-align:right}
#ops-model-title #model-product-legend img{width:240px;max-height:145px;object-fit:contain}
@media(max-width:650px){.model-legend-values{font-size:8px}.model-legend-values>span:nth-child(even):not(:last-child){display:none}#ops-model-title .model-legend-scale{margin:0 3px}}

/* The categorical precipitation key remains a separate map popup. */
#ops-model-title #model-product-legend.model-legend-popup{position:fixed;right:14px;bottom:124px;width:264px;max-width:calc(100vw - 28px);padding:10px 12px;margin:0;border:1px solid #ffc300;border-radius:14px;background:#071b29;color:#fff;box-shadow:0 4px 16px #0005}
#ops-model-title #model-product-legend.model-legend-popup>strong{display:block;margin-bottom:7px;font-size:12px}
#ops-model-title #model-product-legend.model-legend-popup img{width:240px;max-width:100%;max-height:none;border-radius:4px}
#ops-model-title #model-product-legend.model-legend-popup small{text-align:left;line-height:1.3;margin-top:6px}
@media(max-width:650px){#ops-model-title #model-product-legend.model-legend-popup{right:12px;bottom:190px;width:224px;padding:8px 10px}}

.model-feed-notice{color:#ffe16b;font-size:10px;padding:3px 0;line-height:1.4}.model-feed-notice[hidden]{display:none}