/* /map weather effects (wx-fx.js): lightning flash canvas, style/loop chips, radar loop panel */
.wx-flash { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.lr-chip.wx-chip { height: 1.9rem; padding: 0 0.6rem; font-size: 0.78rem; font-weight: 650; white-space: nowrap; cursor: pointer; }
.lr-chip.wx-chip[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 22%, var(--bg)); }
/* Radar ▾ / Lightning ▾ caret buttons (tucked against their layer button) and their menus */
.lr-chip.wx-dd { margin-left: -0.2rem; padding: 0 0.45rem; min-width: 1.9rem; }
.lr-chip.wx-dd.on, .lr-chip.wx-dd[aria-expanded="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 22%, var(--bg)); }
.lr-chip.wx-dd:focus-visible, .wx-mi:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wx-menu { position: fixed; z-index: 40; min-width: 13.5rem; max-width: calc(100vw - 12px); padding: 0.3rem; border-radius: 0.9rem; border: 1px solid var(--line);
  background: var(--glass, rgba(255, 255, 255, 0.92)); color: var(--fg); backdrop-filter: blur(10px); box-shadow: 0 8px 22px var(--shadow, rgba(0, 0, 0, 0.3));
  display: grid; gap: 0.15rem; font-size: 0.82rem; }
.wx-mi { display: grid; gap: 0.05rem; text-align: left; padding: 0.45rem 0.6rem 0.45rem 1.7rem; border: 0; border-radius: 0.6rem; background: transparent;
  color: var(--fg); font: inherit; cursor: pointer; position: relative; min-height: 2.4rem; }
.wx-mi:hover, .wx-mi:focus-visible { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.wx-mi[aria-checked="true"]::before { content: "✓"; position: absolute; left: 0.55rem; top: 0.45rem; color: var(--primary); font-weight: 900; }
.wx-mi-t { font-weight: 700; }
.wx-mi-s { color: var(--muted); font-size: 0.72rem; }
@media (pointer: coarse) { .wx-mi { min-height: 2.9rem; } }
.rl-panel { position: fixed; left: 50%; bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 3.6rem); transform: translateX(-50%); z-index: 16;
  width: min(34rem, calc(100vw - 1.2rem)); padding: 0.45rem 0.65rem 0.4rem; border-radius: 0.9rem; border: 1px solid var(--line);
  background: var(--glass, rgba(255, 255, 255, 0.9)); color: var(--fg); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); font-size: 0.82rem; }
.rl-panel[hidden] { display: none; }
.rl-top { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.rl-play { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 0; background: var(--primary, #0a7f99); color: #fff; font-size: 0.85rem; font-weight: 800; cursor: pointer; }
.rl-when { display: grid; line-height: 1.15; min-width: 5.6rem; }
.rl-time { font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.rl-rel { color: var(--muted); font-size: 0.74rem; }
.rl-grow { flex: 1; }
.rl-badge { flex: none; padding: 0.15rem 0.5rem; border-radius: 999px; background: #7c3aed; color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.rl-badge[hidden] { display: none; }
.rl-btn { flex: none; height: 1.8rem; min-width: 1.9rem; padding: 0 0.45rem; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-weight: 700; cursor: pointer; }
.rl-span { flex: none; height: 1.8rem; max-width: 10.5rem; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-size: 0.74rem; }
.rl-range { display: block; width: 100%; margin: 0.35rem 0 0.1rem; accent-color: var(--primary, #0a7f99); }
.rl-panel.fc { border-color: #7c3aed; box-shadow: 0 0 0 2px color-mix(in srgb, #7c3aed 35%, transparent), 0 8px 24px rgba(0, 0, 0, 0.3); }
.rl-panel.fc .rl-range { accent-color: #7c3aed; }
.rl-foot { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; color: var(--muted); font-size: 0.68rem; }
.rl-foot [hidden] { display: none; }
.rl-load { margin-left: auto; font-weight: 650; }
@media (max-width: 560px) { .rl-span { max-width: 6.8rem; } .rl-when { min-width: 4.6rem; } .rl-badge { font-size: 0.6rem; padding: 0.12rem 0.35rem; } }