/* Interactive radar page: full-window map with the channel's radar-scene look for the time bar and legend. */
.radar-page { height: 100vh; height: 100dvh; overflow: hidden; }
.radar-page main { position: relative; flex: 1; min-height: 0; }
.rwrap { position: absolute; inset: 0; background: #242e3f; overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; display: block; }
#map:active { cursor: grabbing; }
.rtop { position: absolute; left: 14px; top: 14px; right: 80px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; z-index: 3; pointer-events: none; }
.rtop > * { pointer-events: auto; }
.tabs { display: flex; background: rgba(5, 8, 14, .84); border-radius: 10px; padding: 4px; }
.tabs button { background: none; border: 0; color: #fff; font: 700 18px var(--head); text-transform: uppercase; letter-spacing: .03em; padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.tabs button.on { background: var(--green); color: #04140f; }
.sitepick select { background: rgba(5, 8, 14, .84); border: 0; max-width: 260px; }
.run { font: 700 15px var(--head); text-transform: uppercase; background: var(--green); color: #04140f; padding: 4px 10px; border-radius: 6px; display: none; }
.future .run { display: inline-block; }
.future .sitepick { display: none; }
.rside { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 3; }
.rside > button, .layers summary { width: 44px; height: 44px; border-radius: 10px; border: 0; background: rgba(5, 8, 14, .84); color: #fff; font: 700 22px/44px var(--body); text-align: center; cursor: pointer; list-style: none; }
.layers summary::-webkit-details-marker { display: none; }
.rside > button:hover, .layers summary:hover { background: var(--blue); }
.layers { position: relative; }
.layers[open] { z-index: 5; }
.layers label { display: flex; gap: 8px; align-items: center; white-space: nowrap; font-weight: 600; padding: 6px 4px; }
.layers[open] > label { position: relative; }
.layers > label { background: rgba(5, 8, 14, .92); margin-right: 0; }
.layers[open] { display: flex; flex-direction: column; align-items: flex-end; }
.layers[open] > label:first-of-type { border-radius: 10px 10px 0 0; padding-top: 10px; } .layers[open] > label:last-of-type { border-radius: 0 0 10px 10px; padding-bottom: 10px; }
.layers > label { padding-left: 14px; padding-right: 14px; min-width: 160px; }
.future .radar-only, body:not(.future) .future-only { display: none !important; }
#svrKey { position: absolute; z-index: 3; right: 70px; top: 14px; padding: 8px 12px 4px; background: rgba(5, 8, 14, .84); border-radius: 8px; font: 700 15px var(--head); text-transform: uppercase; }
#svrKey div { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; white-space: nowrap; }
#svrKey i { width: 20px; height: 12px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .7); }
#status { position: absolute; z-index: 3; left: 50%; top: 46%; transform: translate(-50%, -50%); background: rgba(5, 8, 14, .88); padding: 12px 18px; border-radius: 10px; font-weight: 600; max-width: 90%; text-align: center; }
.rfoot { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; padding: 10px 16px 12px; background: rgba(5, 8, 14, .84); border-radius: 10px; font: 700 16px var(--head); }
.rrow { display: flex; align-items: center; gap: 14px; }
#play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--green); cursor: pointer; position: relative; }
#play::before { content: ""; position: absolute; left: 13px; top: 12px; width: 5px; height: 16px; background: #04140f; box-shadow: 9px 0 0 #04140f; }
#play.paused::before { left: 15px; top: 11px; width: 0; height: 0; background: none; box-shadow: none; border-left: 15px solid #04140f; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
#time { font: 700 26px var(--head); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 128px; }
#bar { position: relative; flex: 1; height: 8px; background: rgba(255, 255, 255, .3); border-radius: 4px; cursor: pointer; touch-action: none; }
#bar::after { content: ""; position: absolute; inset: -12px 0; }
#knob { position: absolute; top: -8px; left: 0; width: 26px; height: 22px; margin-left: -13px; background: var(--green); transform: skewX(-24deg); box-shadow: 0 0 0 3px rgba(0, 0, 0, .6); pointer-events: none; }
.ramps { display: flex; gap: 18px; margin-top: 10px; }
.r { flex: 1; display: flex; align-items: center; gap: 8px; text-transform: uppercase; }
.r i { flex: 1; height: 14px; border: 1px solid rgba(255, 255, 255, .4); }
.wx { display: none; } .cold .wx { display: flex; }
@media (max-width: 700px) {
  .tabs button { font-size: 15px; padding: 6px 8px; }
  .sitepick select { max-width: 170px; font-size: 14px; padding: 8px; }
  #time { font-size: 20px; min-width: 96px; }
  .ramps { gap: 10px; } .r span { font-size: 13px; }
  #svrKey { top: auto; bottom: 120px; left: 14px; right: auto; }
}
/* Home page preview: the map only, with the time bar. */
.embed .site-head, .embed .rtop, .embed .rside, .embed #alertBar, .embed .skip { display: none !important; }
.embed .rfoot { left: 8px; right: 8px; bottom: 8px; padding: 6px 12px 8px; }
.embed #play { width: 30px; height: 30px; } .embed #play::before { left: 9px; top: 8px; height: 14px; box-shadow: 7px 0 0 #04140f; width: 4px; }
.embed #play.paused::before { left: 11px; top: 7px; border-left-width: 12px; border-top-width: 8px; border-bottom-width: 8px; height: 0; width: 0; box-shadow: none; }
.embed #time { font-size: 20px; }
.embed #map { cursor: default; }