/* Give the severe-weather heading and controls more room below navigation. */
#page-severe .sw-container { padding-top:88px; }
#page-severe .sw-header-title { position:relative; top:28px; }
@media(min-width:761px) {
    #page-severe .severe-inner-tabs,
    #outlook-day-tabs,
    #type-tabs-container { position:relative; top:40px; }
}
@media(max-width:760px) {
    #page-severe .severe-inner-tabs { margin-top:40px; }
}
.outlook-map-toolbar { position:relative; z-index:2; display:flex; justify-content:flex-end; margin:0 0 5px; }
#type-tabs-container { pointer-events:none; }
#type-tabs-container > * { pointer-events:auto; }
.outlook-map-toolbar .outlook-source-switch { padding:4px 7px; box-shadow:none; }
#sw-risk-banner { margin:14px 0; }
@media(min-width:761px) { .nav-dropdown-menu { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }

/* The same forecast rail becomes the blue loop-range editor. */
.tc-forecast-slider { position:relative; height:30px; min-width:40px; flex:1 1 auto; }
.tc-forecast-slider #tc-ensemble-hour { position:absolute; inset:0; margin:0; width:100%; height:30px; }
.tc-forecast-slider #tc-loop-range-fill { display:none; pointer-events:none; height:4px; top:13px; }
.tc-forecast-slider #tc-loop-start, .tc-forecast-slider #tc-loop-end { display:none; appearance:none; -webkit-appearance:none; position:absolute; inset:0; width:100%; height:30px; margin:0; padding:0; border:0; background:none; pointer-events:none; }
.tc-forecast-slider input::-webkit-slider-thumb { cursor:pointer; }
.tc-forecast-slider #tc-loop-start::-webkit-slider-thumb, .tc-forecast-slider #tc-loop-end::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:14px; height:21px; background:#2587e5; border:2px solid #c1e3ff; border-radius:5px; pointer-events:auto; cursor:ew-resize; }
.tc-forecast-slider #tc-loop-start::-moz-range-thumb, .tc-forecast-slider #tc-loop-end::-moz-range-thumb { width:10px; height:17px; background:#2587e5; border:2px solid #c1e3ff; border-radius:5px; pointer-events:auto; cursor:ew-resize; }
.tc-loop-range-heading { display:none; }
.is-loop-editing .tc-loop-range-heading { display:flex; }
.is-loop-editing .tc-forecast-slider #tc-loop-start, .is-loop-editing .tc-forecast-slider #tc-loop-end, .is-loop-editing .tc-forecast-slider #tc-loop-range-fill { display:block; }
.is-loop-editing #tc-ensemble-hour { pointer-events:none; }
.is-loop-editing #tc-ensemble-hour::-webkit-slider-thumb { width:4px; border-radius:0; background:#fff; }
.tc-forecast-slider input:focus-visible { outline:2px solid #8fc8ff; outline-offset:2px; }

/* Keep cyclone strength badges entirely clear of the title. */
#page-tropical .tropical-map-header { z-index:20; background:rgba(0,0,0,.52) !important; }
#page-winter .map-overlay-header { background:rgba(0,0,0,.52) !important; }

@media(max-width:760px) {

    #page-tropical .tc-ensemble-panel { padding:9px; }
    #page-tropical .tc-ensemble-heading { flex-wrap:wrap; gap:8px; }
    #page-tropical .tc-ensemble-heading h2 { font-size:22px; }
    #page-tropical .tc-ensemble-heading p { display:none; }
    #page-tropical .tc-ensemble-actions { max-width:none; display:flex; flex-wrap:wrap; gap:5px; }
    #page-tropical .tc-ensemble-button-row { gap:5px; margin-bottom:8px; }
    #page-tropical .tc-ensemble-button-row button { padding:7px 9px; min-height:34px; font-size:11px; }
    #page-tropical .tc-ensemble-view-controls { gap:7px; }
    #page-tropical .tc-ensemble-overlays { gap:12px; margin:9px 0; }
    #page-tropical .tc-ensemble-map-frame { display:grid; grid-template-columns:minmax(0,1fr); height:auto; overflow:hidden; }
    #page-tropical #tc-ensemble-map { position:relative; inset:auto; width:100%; height:clamp(350px,62svh,520px); grid-row:2; }
    #page-tropical .tc-ensemble-map-header { position:relative; inset:auto; grid-row:1; min-height:58px; padding:8px 10px; gap:8px; background:rgba(0,0,0,.65); }
    #page-tropical .tc-ensemble-map-header strong { font-size:16px; line-height:1.1; }
    #page-tropical .tc-ensemble-map-logo { width:65px; height:33px; flex-basis:65px; }
    #page-tropical #tc-ensemble-map-run { font-size:9px; }
    #page-tropical .tc-intensity-card { position:static; grid-row:3; width:auto; display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; margin:0; padding:9px 12px; border:0; border-top:1px solid #283445; border-radius:0; background:#0b1119; }
    #page-tropical .tc-intensity-card[hidden] { display:none; }
    #page-tropical .tc-intensity-caption { grid-column:1/-1; margin-bottom:2px; font-size:9px; }
    #page-tropical .tc-intensity-metric { flex-direction:column; align-items:flex-start; gap:3px; }
    #page-tropical .tc-intensity-metric strong { font-size:22px; }
    #page-tropical .tc-intensity-note { grid-column:1/-1; font-size:10px; }
    #page-tropical .tc-wind-key { position:static; grid-row:4; margin:0; padding:9px 10px; border-radius:0; background:#0b1119; border-top:1px solid #253145; }
    #page-tropical .tc-wind-swatches { gap:2px; }
    #page-tropical .tc-wind-swatches span { min-width:0; font-size:9px; }
    #page-tropical .tc-ensemble-empty { top:235px; }
    #page-tropical .tc-ensemble-empty[data-kind='error'] { top:auto; bottom:210px; max-width:calc(100% - 20px); }
    #page-tropical .tc-ensemble-time-controls { display:grid; grid-template-columns:30px 44px minmax(60px,1fr) 30px; gap:5px; }
    #page-tropical #tc-ensemble-all-hours { grid-column:1/-1; justify-self:end; min-height:27px; }
    #page-tropical .tc-forecast-slider { width:100%; }
}