/* ---- radar, bands, scan chooser ---- */
.radar { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 auto; }
.radar .rr { fill: none; stroke: var(--line); stroke-width: 1; }
.radar .rp { fill: color-mix(in srgb, var(--sea) 28%, transparent); stroke: var(--sea); stroke-width: 2; }
.radar .rl { font-size: 10.5px; fill: var(--ink); }
.dd-svg .band.b0 { fill: var(--b0); opacity: .14; } .dd-svg .band.b1 { fill: var(--b1); opacity: .16; }
.dd-svg .band.b2 { fill: var(--b2); opacity: .16; } .dd-svg .band.b3 { fill: var(--b3); opacity: .16; } .dd-svg .band.b4 { fill: var(--b4); opacity: .18; }
.calm4 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 10px 0; }
.calm4 > div { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: var(--panel2); font-size: 14px; }
.calm4 b { display: block; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--sea); margin-bottom: 2px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel); margin: 4px 0 10px; }
.seg button { border: 0; background: transparent; color: var(--muted); padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--sea); color: var(--sea-ink); }
.lvl { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.lvl.red { background: var(--b4); } .lvl.amber { background: var(--b2); } .lvl.green { background: var(--b0); }