/* SM-T5 route-scoped layout; imagery and agency hazard palettes are unchanged. */
body[data-st-page="tropical"] .st{width:min(100% - 32px,1800px);padding-top:12px}
body[data-st-page="tropical"] .st-workspace-grid{grid-template-columns:minmax(0,2fr) minmax(390px,1fr);gap:14px}
body[data-st-page="tropical"] .st-selected-head{gap:12px;margin-bottom:10px}
body[data-st-page="tropical"] .st-selected-head h1{font-size:var(--fs-section)}
body[data-st-page="tropical"] .st-weather-glyph{display:grid;place-items:center;color:var(--st-info)}
body[data-st-page="tropical"] .st-weather-glyph svg{width:44px;height:44px}
body[data-st-page="tropical"] .st-map-stage{aspect-ratio:auto;height:clamp(400px,47vh,580px);min-height:400px}
body[data-st-page="tropical"] .st-map-toolbar{gap:5px;flex-wrap:wrap}
body[data-st-page="tropical"] .st-map-toolbar .st-button{font-size:var(--fs-small);padding:7px 10px}
body[data-st-page="tropical"] .st-facts dt,body[data-st-page="tropical"] .st-facts dd{padding:8px 12px}
body[data-st-page="tropical"] .st-facts{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
body[data-st-page="tropical"] .st-rail{min-width:0;gap:10px}
body[data-st-page="tropical"] .st-pane-note{font-size:var(--fs-small)}
body[data-st-page="tropical"] .st-rail-action{margin:10px}
body[data-st-page="tropical"] .st-center-follow{position:absolute;bottom:35px;right:10px;z-index:2;background:var(--st-bg);font-size:var(--fs-small)}
body[data-st-page="tropical"] .st-tropical-fit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border-top:1px solid var(--st-line)}
body[data-st-page="tropical"] .st-tropical-fit .st-button{font-size:var(--fs-micro);padding:6px 9px}
body[data-st-page="tropical"] .st-timeline{margin-top:10px;padding:8px}
body[data-st-page="tropical"] .st-timeline-modes{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--st-line);padding-bottom:8px}
body[data-st-page="tropical"] .st-timeline-modes .st-button{font-size:var(--fs-small)}
body[data-st-page="tropical"] button[aria-pressed="true"]{border-color:var(--st-action);color:var(--st-info)!important}
body[data-st-page="tropical"] [data-st-transport]>div{position:static!important;width:100%!important;transform:none!important;max-width:100%!important}
body[data-st-page="tropical"] [data-st-forecast-transport]{padding:10px}
body[data-st-page="tropical"] [data-st-forecast-transport] input{display:block;width:100%;min-height:44px;accent-color:var(--st-action)}
body[data-st-page="tropical"] [hidden]{display:none!important}
body[data-st-page="tropical"] .st-impact-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-st-page="tropical"] .st-impact-grid svg{width:23px;height:23px}
body[data-st-page="tropical"] details>summary{padding:12px;min-height:44px;cursor:pointer;font-weight:650}
body[data-st-page="tropical"] .st-comparison form{display:flex;flex-wrap:wrap;align-items:end;gap:8px;padding:10px}
body[data-st-page="tropical"] .st-comparison label{display:block;min-width:0;flex:1}
body[data-st-page="tropical"] :is(input[type="search"],select){display:block;min-height:44px;width:100%;max-width:100%;padding:8px;border:1px solid var(--st-border);border-radius:5px;background:var(--st-panel);color:var(--st-text);font:inherit}
body[data-st-page="tropical"] .st-comparison-toggle{display:flex;gap:8px;align-items:center;padding:10px;min-height:44px}
body[data-st-page="tropical"] input[type="checkbox"]{width:20px;height:20px;accent-color:var(--st-action)}
body[data-st-page="tropical"] .st-table-scroll{max-width:100%;overflow:auto}
body[data-st-page="tropical"] .st-table-scroll:focus-visible{outline:3px solid var(--st-action);outline-offset:-3px}
body[data-st-page="tropical"] .sm-table{width:100%;color:var(--st-text);border-collapse:collapse}
body[data-st-page="tropical"] .sm-table caption{text-align:left;padding:10px;font-weight:650}
body[data-st-page="tropical"] .sm-table :is(td,th){vertical-align:top;border-bottom:1px solid var(--st-line);padding:8px;font-size:var(--fs-small);overflow-wrap:anywhere}
body[data-st-page="tropical"] .sm-table thead{background:var(--st-raised)}
body[data-st-page="tropical"] .st-place-table{table-layout:fixed;min-width:370px}
body[data-st-page="tropical"] .st-place-table th{width:30%;text-align:left}
body[data-st-page="tropical"] .st-place-table small{display:block;font-size:var(--fs-micro);font-weight:400;color:var(--st-muted);margin:5px 0}
body[data-st-page="tropical"] .st-place-table strong{display:block;font-size:var(--fs-micro);font-weight:600;margin-bottom:4px}
body[data-st-page="tropical"] .st-place-pick{color:var(--st-info);border:0;background:transparent;font:inherit;font-weight:700;text-align:left;cursor:pointer;min-height:44px;padding:2px 0;text-decoration:underline}
body[data-st-page="tropical"] #st-add-place form{padding:10px;display:grid;gap:8px}
body[data-st-page="tropical"] .st-place-result{display:flex;gap:6px;flex-wrap:wrap;padding:6px 10px}
body[data-st-page="tropical"] [data-st-place-message]{padding:10px;font-size:var(--fs-small)}
body[data-st-page="tropical"] [data-st-product-health] ul{padding:0 16px 12px 28px;margin:0;font-size:var(--fs-micro);color:var(--st-secondary)}
body[data-st-page="tropical"] [data-st-product-health] li{padding:5px 0}
body[data-st-page="tropical"] [data-st-impact-detail]{padding:14px;overflow-wrap:anywhere}
body[data-st-page="tropical"] [data-st-impact-detail]>h3{font-size:var(--fs-subhead)}
body[data-st-page="tropical"] .st-point-group{padding:12px 0;border-top:1px solid var(--st-line);margin-top:12px}
body[data-st-page="tropical"] .st-point-group dl{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2fr);gap:10px;margin:10px 0 0}
body[data-st-page="tropical"] .st-point-group dt{font-weight:650;color:var(--st-secondary)}
body[data-st-page="tropical"] .st-point-group dd{margin:0}
body[data-st-page="tropical"] .st-point-group small{display:block;color:var(--st-muted);font-size:var(--fs-small);margin-top:5px}
body[data-st-page="tropical"] [data-st-forecast-row][data-selected]{background:var(--st-raised);outline:2px solid var(--st-action);outline-offset:-2px}
body[data-st-page="tropical"] [data-st-intensity]{padding:12px;max-width:500px}
body[data-st-page="tropical"] :is(select,input):focus-visible{outline:3px solid var(--st-action);outline-offset:2px}
body[data-st-page="tropical"] .storm-forecast-label{background:var(--st-bg);color:var(--st-text);border:1px solid var(--st-border);padding:4px 6px;border-radius:4px;font-size:var(--fs-micro);pointer-events:none}
body[data-st-page="tropical"] .storm-forecast-label span{display:block}
body[data-st-page="tropical"] .storm-forecast-label.is-crowded{display:none}
/* A phone's storm map (critique of 2026-11-01): 44px zoom controls, as the area map's; the toolbar wraps
   rather than hiding Wind extent past the edge; a forecast point's callout is its wind alone, the time
   being in the forecast table, so the callouts no longer cover the coast. */
body[data-st-page="tropical"] .storm-detail-map-panel .maplibregl-ctrl-group button{width:44px;height:44px}
@media(max-width:767px){body[data-st-page="tropical"] .storm-detail-map-panel .st-map-toolbar{flex-wrap:wrap;overflow:visible}html body[data-st-page="tropical"] .storm-detail-map-panel .st-tool-long{display:none}html body[data-st-page="tropical"] .storm-detail-map-panel .st-tool-short{display:inline}body[data-st-page="tropical"] .storm-forecast-label{padding:2px 5px}}
/* A forecast point keeps its time on a phone: "29 mph (25 kt)" had said how strong and not when (sixteenth run). */
@media(max-width:1279px){body[data-st-page="tropical"] .st-workspace-grid{grid-template-columns:minmax(0,1fr)}body[data-st-page="tropical"] .st-rail{grid-template-columns:repeat(2,minmax(0,1fr))}body[data-st-page="tropical"] .st-map-stage{height:520px}body[data-st-page="tropical"] #st-watched{grid-row:1 / span 2;grid-column:2}body[data-st-page="tropical"] .st-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){body[data-st-page="tropical"] .st{width:calc(100% - 24px)}body[data-st-page="tropical"] .st-rail{grid-template-columns:minmax(0,1fr)}body[data-st-page="tropical"] #st-watched{grid-row:auto;grid-column:auto}body[data-st-page="tropical"] .st-selected-head h1{font-size:var(--fs-subhead)}body[data-st-page="tropical"] .st-map-stage{height:400px;min-height:340px}body[data-st-page="tropical"] .st-map-toolbar{flex-wrap:nowrap;overflow:auto}body[data-st-page="tropical"] .st-impact-grid{grid-template-columns:minmax(0,1fr)}body[data-st-page="tropical"] .st-point-group dl{grid-template-columns:minmax(0,1fr)}body[data-st-page="tropical"] .st-tropical-fit .st-muted{flex-basis:100%}body[data-st-page="tropical"] input[type="search"]{font-size:var(--fs-remarks)}}
@media(forced-colors:active){body[data-st-page="tropical"] :is(.st-button,.st-surface,.st-tabs){border-color:CanvasText}body[data-st-page="tropical"] button[aria-pressed="true"],body[data-st-page="tropical"] a[aria-current]{outline:2px solid Highlight}body[data-st-page="tropical"] .st-map-label span{background:Canvas;color:CanvasText}}

body[data-st-page="tropical"] .st-map-host[aria-hidden="true"]{visibility:hidden}

@media(max-width:767px){body[data-st-page="tropical"] .st-weather-glyph{display:none}}

/* A storm map's towns as an area map's are: a dot on the town and its name in a halo, not a dark chip that read as one of the
   forecast points' boxes (critique of 2026-11-04, sixteenth run). The storm's basemap is dark in either theme. */
/* The label is MapLibre's marker: it keeps the marker's absolute position, and its dot is placed against it. A
   position of its own had stacked every town in a row at the map's top-left (critique of 2026-11-04, seventeenth run). */
body[data-st-page="tropical"] .st-tropical-town{font:600 var(--fs-micro)/1.2 Manrope,sans-serif;color:#f1f7fc;white-space:nowrap;text-shadow:0 0 2px #0b1520,0 0 2px #0b1520,0 0 4px #0b1520;pointer-events:none}
body[data-st-page="tropical"] .st-tropical-town::before{content:"";position:absolute;left:-7px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#f1f7fc;box-shadow:0 0 0 1.5px #0b1520}

body[data-st-page="tropical"] .maplibregl-ctrl-attrib{color:#102a43}body[data-st-page="tropical"] .maplibregl-ctrl-attrib a{color:#0759c7;text-decoration:underline}
body[data-st-page="tropical"] .tropics-layers-body,body[data-st-page="tropical"] .tropics-satellite-body{position:static;width:100%;max-width:100%;background:var(--st-panel);color:var(--st-text);border-color:var(--st-line);box-shadow:none}
body[data-st-page="tropical"] .tropics-transport-button{min-width:44px;min-height:44px;background:var(--st-raised);color:var(--st-text);border-color:var(--st-border)}
body[data-st-page="tropical"] .tropics-transport-wrap{margin:8px 0}
body[data-st-page="tropical"] :is(.tropics-transport-time,.tropics-layer-status,.tropics-layer-legend,.tropics-layer-group legend,.tropics-layer.is-unavailable label,.tropics-layers-note){color:var(--st-secondary)}
body[data-st-page="tropical"] .tropics-scrub{min-height:44px;accent-color:var(--st-action)}
body[data-st-page="tropical"] .st-place-table strong{text-align:left}
body[data-st-page="tropical"] .st-place-table :is(td,th){text-align:left}
body[data-st-page="tropical"] .storm-overview-map-panel.is-live .st-map-fallback{display:none}
body[data-st-page="tropical"] [data-formation-map][aria-hidden="true"]{visibility:hidden}
body[data-st-page="tropical"] .st-monitor-warning-list{padding:0 14px;list-style:none;margin:0}
body[data-st-page="tropical"] .st-monitor-warning-list li{border-top:1px solid var(--st-line);padding:12px 0;display:grid;gap:6px}

/* Keep advisory following clear of MapLibre's expanded attribution at narrow widths. */
body[data-st-page="tropical"] .st-center-follow { left:10px; right:auto; bottom:48px; }
/* The storm map gets the height (critique of 2026-11-02). Its layers and Fit storm sit on the map, top-left to
   top-right, as the area map's controls do; the basemap and the credit are under its ⓘ. A layer that is on is
   filled, not only recoloured. A phone shortens the long names; each button's name keeps the whole words. */
body[data-st-page="tropical"] .storm-detail-map-panel .st-tool-short{display:none}
body[data-st-page="tropical"] .storm-detail-map-panel .st-map-toolbar [aria-pressed=true]{background:var(--st-action);color:var(--st-action-text)!important;border-color:var(--st-action)}
body[data-st-page="tropical"] .storm-detail-map-panel .st-map-toolbar [data-st-unavailable]{background:var(--st-panel);color:var(--st-muted)!important;border-style:dashed;border-color:var(--st-border)}
body[data-st-workbench=yes] main:not([data-st-mobile=yes]) .st-wb-map>.storm-detail-map-panel>.st-map-toolbar{position:absolute;top:10px;left:10px;right:66px;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;margin:0;padding:0;border:0;background:none;pointer-events:none}
body[data-st-workbench=yes] main:not([data-st-mobile=yes]) .st-wb-map>.storm-detail-map-panel>.st-map-toolbar>*{pointer-events:auto;min-height:36px;padding:6px 10px;font-size:var(--fs-small);box-shadow:0 1px 4px #0003}
body[data-st-workbench=yes] main:not([data-st-mobile=yes]) .st-wb-map>.storm-detail-map-panel>.st-map-toolbar>:not([aria-pressed=true]){background:var(--st-panel)}
body[data-st-workbench=yes] main:not([data-st-mobile=yes]) .storm-detail-map-panel .st-map-fit{margin-left:auto}
body[data-st-workbench=yes] main:not([data-st-mobile=yes]) .storm-detail-map-panel .st-map-label{top:56px}
body[data-st-page="tropical"] .st-map-basemap{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0}
body[data-st-page="tropical"] .st-map-basemap>span{color:var(--st-secondary);font-size:var(--fs-small)}
/* The ramp's swatch beside the classification, never the colour alone (DESIGN.md, tier chips). */
body[data-st-page="tropical"] .st-tier{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--st-text);white-space:nowrap}
body[data-st-page="tropical"] .st-tier-swatch{flex:none;width:12px;height:12px;border-radius:3px;background:var(--wx-tier-unknown);box-shadow:0 0 0 1px #0005}
body[data-st-page="tropical"] .tier-td .st-tier-swatch{background:var(--wx-tier-td)}body[data-st-page="tropical"] .tier-ts .st-tier-swatch{background:var(--wx-tier-ts)}body[data-st-page="tropical"] .tier-c1 .st-tier-swatch{background:var(--wx-tier-c1)}body[data-st-page="tropical"] .tier-c2 .st-tier-swatch{background:var(--wx-tier-c2)}body[data-st-page="tropical"] .tier-c3 .st-tier-swatch{background:var(--wx-tier-c3)}body[data-st-page="tropical"] .tier-c4 .st-tier-swatch{background:var(--wx-tier-c4)}body[data-st-page="tropical"] .tier-c5 .st-tier-swatch{background:var(--wx-tier-c5)}
@media (forced-colors:active){body[data-st-page="tropical"] .st-tier-swatch{forced-color-adjust:none;box-shadow:0 0 0 1px CanvasText}}
/* A narrow map (1280 and below with the side panes open) takes the short names, so its controls stay one row. */
body[data-st-workbench=yes] .st-wb-map:has(>.storm-detail-map-panel){container-type:inline-size}
@container (max-width:780px){html body[data-st-page="tropical"] .storm-detail-map-panel .st-tool-long{display:none}html body[data-st-page="tropical"] .storm-detail-map-panel .st-tool-short{display:inline}}
body[data-st-workbench=yes] main:not([data-st-imagery-shown]) [data-st-transport]{display:none}

/* A layer that turns on and off has a box, filled when on; an action (Layers, Fit storm) has none. The fill alone had
   marked a toggle, so an off "Wind extent" looked like "Fit storm" (critique of 2026-11-02, seventh run). Unavailable
   keeps its hollow ring. */
body[data-st-page="tropical"] .storm-detail-map-panel .st-map-toolbar .st-button[aria-pressed]:not([data-st-unavailable])::before{content:"";flex:none;width:.75em;height:.75em;box-sizing:border-box;border:2px solid currentColor;border-radius:3px}
body[data-st-page="tropical"] .storm-detail-map-panel .st-map-toolbar .st-button[aria-pressed=true]:not([data-st-unavailable])::before{background:currentColor;box-shadow:inset 0 0 0 2px var(--st-action)}
@media (forced-colors:active){body[data-st-page="tropical"] .storm-detail-map-panel .st-map-toolbar .st-button[aria-pressed=true]:not([data-st-unavailable])::before{background:CanvasText;box-shadow:none}}
/* A storm's layers are the pane's own, open (critique of 2026-11-04, sixteenth run): the group's own summary is not shown. */
body[data-st-page="tropical"] .tropics-layers.is-flat>summary{display:none}