/* FBLTWX · Radar (radar.html, assets/np/radar.js): the rules only this page uses, moved out of np.css by V-fu1.2 (Oct.
   25, 2026) so the pages that don't use them, home first, don't load them before they paint. np.css keeps what a storm
   day's replay shares with this page (the box, the bar, its buttons, the key). Every color is a token. */
.rp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.rp-head h1{margin:0;font-size:40px;font-weight:900;line-height:1.1}
.rp-sub{margin:6px 0 12px}
.np-radarpage .rp-lbar{max-width:max(620px, calc(var(--rp-h) * 4 / 3))}   /* Round U2: radar.html's bar is as wide as the map (its speed buttons moved out in U1), and never under 620 px, so it stays one row on wide screens when an alert shrinks the map */
.np-radarpage:has(.rp-box.rg) .rp-lbar{max-width:max(620px, calc(var(--rp-h) * 16 / 9))}
.rp-subrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 18px}
/* the rain line keeps its room when radar.js hides it (stale or no feed), so the map never moves up */
.rp-subrow .rp-rain{min-height:1.4em}   /* shares the subtitle's row when both fit (H-fu8: at 1200 px, the subtitle plus a line up to about 540 px) */
.rp-sub{display:grid}
.rp-sub>span{grid-area:1/1}
.rp-sub>span:not(.on){visibility:hidden}   /* both views' subtitles share the cell: the row is as tall as the longer one */
/* the feed is down (radar.js gifFallback): NWS's loop fills the box; the message moves into the play bar's room under
   it (the bar itself stays hidden but keeps its room), so nothing covers the loop and nothing moves (H-fu9) */
.rp-gif{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111}
.rp-note{margin:10px 0 0}
@media (max-width:720px){
  .rp-head h1{font-size:30px}
}
/* ---------- Round U1: radar.html's playback bar, stamp and options (Radar 21, 2, 10) ----------
   rp-lbar is radar.html's bar (storm.html's replay keeps the old one): each button has its word beside its icon, the
   slider sits in .rp-track with its times and gaps under it (radar.js ticks(); the thumb is THUMB_PX, 16 px, wide),
   and the stamp and the options line up with the bar. On phones the words go under the icons and the slider takes a
   row of its own under the buttons, so it has the whole width for its times. */
.np-radarpage .rp-opts{max-width:max(820px, calc(var(--rp-h) * 4 / 3));margin-inline:auto}
.np-radarpage:has(.rp-box.rg) .rp-opts{max-width:max(820px, calc(var(--rp-h) * 16 / 9))}
/* the stamp in the map's bottom-right corner, a white tag like the time tag (stale and gone keep M4's dashed look) */
.rp-box > .rp-stampw{position:absolute;right:8px;bottom:8px;z-index:2;max-width:calc(50% - 12px);pointer-events:none}
.rp-box > .rp-stampw .np-stamp{margin:0}
.rp-box > .rp-stampw .np-stamp:not(.is-stale){padding:3px 8px;background:#fff;border:1px solid var(--ink)}
.rp-lbar{align-items:flex-start}
.rp-lbar .rp-play,.rp-lbar .rp-step{width:auto;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.rp-bl{font-size:14px;font-weight:800;line-height:1.1}
.rp-track .rp-scrub{display:block;width:100%;min-width:0}
.rp-ticks{position:absolute;left:0;right:0;bottom:0;height:18px;pointer-events:none}
.rp-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:12px}
.rp-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.rp-gl{font-size:14px;font-weight:900}
@media (max-width:720px){
  .rp-lbar .rp-play,.rp-lbar .rp-step{flex-direction:column;gap:2px;padding:4px 8px;min-height:52px}
  .rp-lbar .rp-bl{font-size:12px}
  .rp-lbar .rp-latest{min-height:52px}
  .rp-lbar .rp-track{order:5;flex:1 1 100%;min-width:0}
}
/* ---------- Round U2: radar.html's layout, views, loop and full screen (Radar 5, 7, 22, 25, 29) ----------
   The player (map and bar) and the side: from 1100 px the side is a 300 px column beside the map (the warnings list and
   the keys stay in view next to it), narrower it stacks under the bar. The player is the regional box's container, so
   75cqw is the player's width: the box keeps the local view's height in every view and the 16:9 map sits in it. */
.rp-player{container-type:inline-size}
.rp-side{margin-top:14px}
.rp-side .rp-opts{max-width:none;margin:0}
.rp-side .rp-legends,.rp-side .rp-note{max-width:none;margin-inline:0}
@media (min-width:1100px){
  .rp-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 28px;align-items:start}
  .rp-side{margin-top:0}
  .rp-layout .rp-box,.rp-layout .rp-lbar{margin-inline:0}   /* the map lines up with the headings on the left */
  .rp-side .rp-opts{flex-direction:column;align-items:stretch;gap:14px}
  .rp-side .rp-opt{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
  .rp-side .rp-views,.rp-side .rp-acts{flex-basis:auto;align-self:stretch}
  /* U-fu1.1: the subtitle, then the rain line on its own row right over the map, both in the map's column (not over the
     side); the column is too narrow for the two on one row (the subtitles' cell is about 620 px), so the map starts 18 px
     lower and the first guess is 18 px more (ssr.RP_WIDE adds the same in the alert hold) */
  .rp-subrow{display:block;max-width:calc(100% - 300px - 28px)}
}
@supports (height:1cqw) and selector(:fullscreen){
  @media (min-width:1100px){
    .rp-layout .rp-player:not(:fullscreen) .rp-box{max-width:none;aspect-ratio:auto;height:min(75cqw, var(--rp-h))}
    .rp-layout .rp-player:not(:fullscreen) .rp-lbar{max-width:none}
  }
}
.rp-views{flex-basis:100%}
.rp-thumbs{display:flex;gap:8px;width:100%}
.rp-vbtn[aria-pressed="true"]{background:var(--ink);color:#fff}
/* the picture's box holds its size: an img with no src yet takes no aspect-ratio, and its arrival moved the controls
   under it 22 px (Lighthouse's CLS at 1440 on the rehearsal) */
.rp-tbox{display:block;position:relative;width:100%;height:56px;background:var(--rmap-land);border:1px solid var(--rule)}   /* a set height, not aspect-ratio: the buttons' row is measured while they are 0 wide (flex 1 1 0), so a ratio counted 0 and the row came out 22 px short, over the Loop label */
.rp-thumb{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.rp-thumb.none{visibility:hidden}
.rp-acts{flex-basis:100%}
.rp-fsx{display:none}
#rp-player:fullscreen{background:var(--paper);padding:8px 12px;overflow:auto}
#rp-player:fullscreen .rp-fsx{display:inline-flex;align-items:center}
#rp-player:-webkit-full-screen{background:var(--paper);padding:8px 12px}
#rp-player:-webkit-full-screen .rp-fsx{display:inline-flex;align-items:center}
@media (max-width:720px){
  .rp-vbtn{font-size:13px}
  .np-radarpage .rp-fs,.np-radarpage .rp-fsx{min-height:44px}
}
.rl1{background:var(--rl1)}
.rl2{background:var(--rl2)}
.rl3{background:var(--rl3)}
.rl4{background:var(--rl4)}
.rl5{background:var(--rl5)}
.rl6{background:var(--rl6)}
.pal-cb .rl1{background:var(--rlcb1)}
.pal-cb .rl2{background:var(--rlcb2)}
.pal-cb .rl3{background:var(--rlcb3)}
.pal-cb .rl4{background:var(--rlcb4)}
.pal-cb .rl5{background:var(--rlcb5)}
.pal-cb .rl6{background:var(--rlcb6)}
.rp-box > .rp-legend.rp-ramp{display:flex;gap:0 2px;align-items:center}
.rp-ramp .w{margin:0 4px}
.rp-key{margin-top:14px}
.rp-klist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rr1{background:var(--rr1)}
.rr2{background:var(--rr2)}
.rr3{background:var(--rr3)}
.rr4{background:var(--rr4)}
.rr5{background:var(--rr5)}
.rr6{background:var(--rr6)}
.np-radar-r24{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:multiply}
.np-radar-r24[hidden]{display:none}
.rp-r24{margin-top:14px}
.rp-r24when{margin:0 0 6px}
.np-radarpage .rp-tog[hidden]{display:inline-flex!important;visibility:hidden}   /* each switch keeps its room (U-fu1.2) */
.rp-klist .rp-krate{grid-column:2;color:var(--ink2)}
.rp-knote{margin:8px 0 0}
.np-radarpage .rp-colors[hidden]{display:flex!important;visibility:hidden}   /* keeps its room while no color-blind-safe scans are on file */
/* ---------- Round U4: radar.html's warnings list and storm reports (Radar 6, 14) ---------- */
.rp-side .rp-legends{margin:0 0 14px}
.rp-side .rp-wlegend{display:block}
.rp-tog{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:800;cursor:pointer}
.np-radarpage .rp-layers[hidden]{display:flex!important;visibility:hidden}   /* keeps its room while there are no reports */
.rp-reps{margin-top:14px}
.rp-replist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;line-height:1.3}