/* ================= feature launchers (main screen) ================= */
/* Single column: header, tabs, weather, player and launchers can be taller than a phone screen,
   which used to squeeze the station list to 0px. The screen itself now scrolls, and the station
   area is never shorter than one screen, so swiping up always reveals a full, scrollable list. */
.app {
  /* max-content: header, tabs, weather, player and launchers always get their full height, even though
     the station area below makes the grid taller than the screen (auto rows could shrink to 0 there) */
  grid-template-rows: max-content max-content max-content max-content max-content minmax(calc(100vh - var(--sat) - 24px), 1fr);
  grid-template-rows: max-content max-content max-content max-content max-content minmax(calc(100dvh - var(--sat) - 24px), 1fr);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app::-webkit-scrollbar { display: none; }
.app .list { overscroll-behavior-y: auto; } /* at the list's top/end the swipe carries on to the screen */
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; user-select: none; -webkit-user-select: none; }
.feat-btn {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 6px 12px 6px 8px;
  border-radius: 16px; border: 1px solid var(--line); text-align: left; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .12s, filter .2s;
}
.feat-btn:active { transform: scale(.97); filter: brightness(1.2); }
.feat-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.radar-btn { background: radial-gradient(120% 160% at 0% 50%, rgba(40,220,170,.35), transparent 60%), linear-gradient(140deg, rgba(8,50,48,.85), rgba(6,18,30,.85)); border-color: rgba(90,255,200,.3); }
.map-btn { background: radial-gradient(120% 160% at 0% 50%, rgba(62,160,255,.35), transparent 60%), linear-gradient(140deg, rgba(16,40,80,.85), rgba(6,14,30,.85)); border-color: rgba(62,160,255,.35); }
.feat-ic { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.radar-btn .feat-ic { background: radial-gradient(circle, #0c4a42 0 30%, #06231f 70%); box-shadow: inset 0 0 0 1px rgba(120,255,210,.45), 0 0 14px rgba(60,255,190,.25); }
.radar-btn .feat-ic::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px solid rgba(120,255,210,.35); }
.radar-btn .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(90,255,200,0) 0 70%, rgba(90,255,200,.75) 100%); animation: rdSpin 2.6s linear infinite; }
.radar-btn .feat-ic b { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #9fffe0; box-shadow: 0 0 6px #5fffc8; animation: rdBlink 2.6s linear infinite; }
.radar-btn .feat-ic b:nth-of-type(1) { left: 26%; top: 30%; animation-delay: -1.9s; }
.radar-btn .feat-ic b:nth-of-type(2) { left: 64%; top: 56%; animation-delay: -.6s; }
.radar-btn .feat-ic b:nth-of-type(3) { left: 40%; top: 70%; animation-delay: -1.1s; }
@keyframes rdSpin { to { transform: rotate(360deg); } }
@keyframes rdBlink { 0%, 100% { opacity: .25; } 8% { opacity: 1; } 40% { opacity: .5; } }
.map-btn .feat-ic { background: radial-gradient(circle at 30% 30%, #3ea0ff, #0b3f7a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 0 14px rgba(62,160,255,.3); }
.map-btn .feat-ic svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.feat-tx { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.feat-tx b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-tx small { font-size: 12px; color: #b9c9dd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (orientation: landscape) and (min-width: 600px), (min-width: 820px) {
  .app { grid-template-rows: max-content max-content max-content minmax(0, max-content) max-content minmax(0, 1fr); }
  .app .list { overscroll-behavior-y: contain; }
  .topnav { grid-row: 2; grid-column: 1 / -1; }
  .wx { grid-row: 3; grid-column: 1; }
  .player { grid-row: 4; grid-column: 1; }
  .feat { grid-row: 5; grid-column: 1; align-self: start; margin-bottom: calc(var(--sab) + 12px); }
  .browse { grid-row: 3 / -1; grid-column: 2; }
}
@media (orientation: portrait) and (max-height: 700px) {
  .feat-btn { min-height: 46px; padding-top: 3px; padding-bottom: 3px; }
  .feat-tx small { display: none; }
  .feat-ic { width: 32px; height: 32px; }
}

.toast { z-index: 70; }

/* ================= overlay shell ================= */
.ovl {
  position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; min-width: 0;
  background:
    radial-gradient(90% 50% at 100% 0%, rgba(0,114,206,.28), transparent 70%),
    radial-gradient(80% 40% at 0% 100%, rgba(40,220,170,.12), transparent 70%),
    linear-gradient(180deg, #071226, #030812 70%);
  opacity: 0; transform: translateY(14px); transition: opacity .22s, transform .22s;
}
.ovl[hidden] { display: none; }
.ovl.in { opacity: 1; transform: none; }
.ovl-top {
  flex: none; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: calc(var(--sat) + 10px) calc(var(--sar) + 14px) 8px calc(var(--sal) + 10px);
  user-select: none; -webkit-user-select: none;
}
.ovl-x svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ovl-ht { flex: 1; min-width: 0; }
.ovl-ht h2 { margin: 0; font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovl-ht p { margin: 1px 0 0; font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovl-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 4px calc(var(--sar) + 14px) 18px calc(var(--sal) + 14px); display: flex; flex-direction: column; gap: 12px;
}
/* scrolling panels: children keep their natural height instead of being squeezed */
.ovl-body > * { flex-shrink: 0; }
.live-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  color: #9fffe0; background: rgba(40,220,170,.12); border: 1px solid rgba(90,255,200,.35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: #3dffb5; box-shadow: 0 0 8px #3dffb5; animation: pulseG 1.6s infinite; }
.live-pill.busy { color: #ffe08a; border-color: rgba(255,211,77,.4); background: rgba(255,211,77,.1); }
.live-pill.busy i { background: #ffd34d; box-shadow: 0 0 8px #ffd34d; }
@keyframes pulseG { 50% { opacity: .35; } }

/* mini player (both views) */
.mini {
  flex: none; display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px calc(var(--sar) + 12px) calc(var(--sab) + 8px) calc(var(--sal) + 12px);
  background: linear-gradient(180deg, rgba(14,26,50,.92), rgba(6,12,26,.98)); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px rgba(0,0,0,.4); user-select: none; -webkit-user-select: none;
}
.mini-logo { flex: none; }
.mini-logo .logo { width: 44px; height: 44px; }
.mini-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mini-tx b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-tx small { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini.on .mini-tx small { color: #8fc8ff; }
.mini-pp { width: 48px; height: 48px; border: 0; background: linear-gradient(180deg, #2b9bff, #0062b8); box-shadow: 0 6px 16px rgba(0,114,206,.5); }
.mini .ic-pause { display: none; }
.mini.on .ic-play { display: none; }
.mini.on .ic-pause { display: block; }
.mini.busy .spinner { opacity: .9; animation: spin .9s linear infinite; }

.chip[aria-pressed="true"] { background: #fff; color: #06204a; border-color: #fff; }
.pill-btn.sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.pill-btn.primary { background: linear-gradient(180deg, #2b9bff, #0062b8); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(0,114,206,.45); }
.notice-s { margin: 0; font-size: 14px; color: #ffd9a8; background: rgba(255,170,60,.12); border: 1px solid rgba(255,170,60,.3); border-radius: 12px; padding: 10px 12px; }

/* ================= Eetriradar ================= */
.rd-hero { display: flex; align-items: center; gap: clamp(12px, 4vw, 22px); min-width: 0; }
.rd-scope { flex: none; width: clamp(140px, 44vw, 260px); max-width: 34vh; min-width: 120px; aspect-ratio: 1; border-radius: 50%; position: relative;
  box-shadow: 0 0 0 3px rgba(12,40,36,.9), 0 0 0 5px rgba(120,255,210,.18), 0 18px 40px rgba(0,0,0,.5), 0 0 40px rgba(40,220,170,.15); }
#rdCanvas { width: 100%; height: 100%; display: block; border-radius: 50%; cursor: pointer; touch-action: manipulation; }
.rd-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.rd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stat { min-width: 0; min-height: 52px; padding: 6px 10px; border-radius: 14px; text-align: left; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--line); background: rgba(255,255,255,.05); transition: transform .12s, background .2s; }
button.stat:active { transform: scale(.96); }
button.stat:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.stat b { font-size: 22px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.s-music b { color: #5fffc8; } .stat.s-talk b { color: #ffc450; } .stat.s-unknown b { color: #a9b8d0; } .stat.s-act b { color: #8fc8ff; }
.stat[aria-pressed="true"] { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.surprise {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 0;
  font-size: 16px; font-weight: 800; color: #2a1a00; overflow: hidden;
  background: linear-gradient(110deg, #ffe58a, #ffb547 45%, #ff7aa8 100%);
  box-shadow: 0 10px 26px rgba(255,150,80,.35), inset 0 1px 0 rgba(255,255,255,.6); transition: transform .12s;
}
.surprise::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 60%, 100% { transform: translateX(100%); } }
.surprise svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.surprise:active { transform: scale(.96); }
.surprise:focus-visible { outline: 3px solid #67e8f9; outline-offset: 2px; }
.rd-filters { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-chips { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px 2px; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.rd-chips::-webkit-scrollbar { display: none; }
.rd-chips .chip { height: 44px; }
.rd-note { margin: 0; font-size: 13px; color: var(--mute); }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 8px; }
.rc {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 92px; padding: 10px; border-radius: 18px; text-align: left;
  border: 1px solid rgba(255,255,255,.08); background: linear-gradient(120deg, rgba(20,34,62,.85), rgba(8,14,28,.85));
  box-shadow: 0 8px 22px rgba(0,0,0,.3); transition: transform .12s, border-color .2s, box-shadow .3s; overflow: hidden;
}
.rc[hidden] { display: none; }
.rc::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: #56657d; }
.rc.t-music::before { background: #3dffb5; box-shadow: 0 0 10px #3dffb5; }
.rc.t-talk::before { background: #ffc450; box-shadow: 0 0 10px #ffc450; }
.rc.t-down { opacity: .55; }
.rc:active { transform: scale(.98); }
.rc:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.rc.cur { border-color: rgba(62,160,255,.7); background: linear-gradient(120deg, rgba(0,90,170,.55), rgba(8,14,28,.85)); }
.rc.pop { box-shadow: 0 0 0 3px #ffd34d, 0 0 30px rgba(255,211,77,.6); }
.rc-art { position: relative; flex: none; width: 70px; height: 70px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.14); }
.rc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.rc-art img.ok { opacity: 1; }
.rc-logo { position: absolute; left: 54px; top: 58px; z-index: 1; }
.rc-logo .logo { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; box-shadow: 0 3px 8px rgba(0,0,0,.6), 0 0 0 2px #0a1426; }
.rc-logo .logo img { padding: 2px; }
.rc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.rc-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rc-st { flex: 1; min-width: 0; font-size: 13px; color: #b9c9dd; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-type { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.08); color: #c9d4e6; }
.t-music .rc-type { background: rgba(61,255,181,.14); color: #7fffd0; }
.t-talk .rc-type { background: rgba(255,196,80,.16); color: #ffd98a; }
.rc-type.you { background: #3ea0ff; color: #fff; }
.rc-title { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-artist { font-size: 14px; color: #dbe5f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-unknown .rc-title, .t-down .rc-title { font-size: 14px; font-weight: 600; color: var(--mute); }
.t-unknown .rc-artist, .t-down .rc-artist { font-size: 13px; color: #7f8ca3; }
.rc-foot { font-size: 12px; color: #8fa0bb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rc .prog { margin-top: 4px; }
.rc .prog[hidden] { display: none; }
.rc-eq { position: absolute; right: 12px; bottom: 12px; }
.rc.on .rc-eq { display: flex; }
.rd-empty { grid-column: 1 / -1; }

/* ================= Raadio Levikaart ================= */
.lk-main { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.lk-mapbox { position: relative; flex: 0 0 44%; min-height: 180px; margin: 0 calc(var(--sar) + 10px) 0 calc(var(--sal) + 10px); border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(0,0,0,.45); background: radial-gradient(circle at 50% 40%, #0d2346, #050b18); }
.lk-map { position: absolute; inset: 0; background: transparent; }
.lk-map.osm-std .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(.92) contrast(.88) saturate(.7); }
.lk-map .leaflet-tile-pane { filter: brightness(1.25) saturate(1.1); }
.lk-map.orto .leaflet-tile-pane { filter: brightness(.86) contrast(1.05) saturate(1.05); }
.lk-mapnote { position: absolute; left: 10px; right: 66px; bottom: 26px; z-index: 1001; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 340px;
  padding: 9px 12px; border-radius: 12px; background: rgba(8,14,28,.9); border: 1px solid rgba(255,255,255,.18); color: #dbe5f5; font-size: 13px; line-height: 1.35;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; }
.lk-mapnote[hidden] { display: none; }
.lk-mapnote.busy span::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid #8fc8ff; border-right-color: transparent; vertical-align: -1px; animation: lkSpin .8s linear infinite; }
.lk-mapnote .pill-btn { min-height: 44px; }
@keyframes lkSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lk-mapnote.busy span::before { animation: none; } }
/* Leaflet's core layout, so panes stack correctly (points above the photo) even before / without its CDN stylesheet */
.lk-map.leaflet-container { overflow: hidden; -webkit-tap-highlight-color: transparent; outline: 0; }
.lk-map .leaflet-pane, .lk-map .leaflet-tile, .lk-map .leaflet-marker-icon, .lk-map .leaflet-tile-container, .lk-map .leaflet-pane > svg,
.lk-map .leaflet-pane > canvas, .lk-map .leaflet-layer, .lk-map .leaflet-zoom-box { position: absolute; left: 0; top: 0; }
.lk-map .leaflet-tile, .lk-map .leaflet-marker-icon { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.lk-map img.leaflet-tile, .lk-map .leaflet-marker-icon img { max-width: none !important; max-height: none !important; padding: 0; width: auto; }
.lk-map .leaflet-tile { visibility: hidden; } .lk-map .leaflet-tile-loaded { visibility: inherit; }
.lk-map .leaflet-pane { z-index: 400; } .lk-map .leaflet-tile-pane { z-index: 200; } .lk-map .leaflet-overlay-pane { z-index: 400; }
.lk-map .leaflet-marker-pane { z-index: 600; } .lk-map .leaflet-tooltip-pane { z-index: 650; } .lk-map .leaflet-popup-pane { z-index: 700; }
.lk-map .leaflet-map-pane canvas { z-index: 100; } .lk-map .leaflet-map-pane svg { z-index: 200; }
.lk-map.leaflet-touch-drag.leaflet-touch-zoom { touch-action: none; }
.lk-map .leaflet-interactive { cursor: pointer; }
.lk-map .leaflet-top, .lk-map .leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
.lk-map .leaflet-top { top: 0; } .lk-map .leaflet-bottom { bottom: 0; } .lk-map .leaflet-left { left: 0; } .lk-map .leaflet-right { right: 0; }
.lk-map .leaflet-control { position: relative; z-index: 800; pointer-events: auto; float: left; clear: both; }
.lk-map .leaflet-right .leaflet-control { float: right; }
.lk-map .leaflet-top .leaflet-control { margin-top: 10px; } .lk-map .leaflet-left .leaflet-control { margin-left: 10px; }
.lk-map .leaflet-bar { border-radius: 10px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.lk-map .leaflet-bar a { display: block; text-align: center; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.15); }
.lk-map .leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; }
.lk-map .leaflet-popup-content-wrapper { padding: 1px; text-align: left; border-radius: 12px; }
.lk-map .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; }
.lk-map .leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; pointer-events: auto; transform: rotate(45deg); }
.lk-map a.leaflet-popup-close-button { position: absolute; top: 0; right: 0; text-align: center; text-decoration: none; display: grid; place-items: center; }
.lk-map .leaflet-tooltip { position: absolute; padding: 4px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.lk-map .leaflet-control-attribution { padding: 0 5px; margin: 0; }
.lk-map.leaflet-container { font: 13px/1.35 -apple-system, system-ui, sans-serif; background: #0a1730; }
.lk-map.leaflet-container .leaflet-control-attribution { background: rgba(5,10,22,.75); color: #a9b6cc; font-size: 11px; }
.lk-map.leaflet-container .leaflet-control-attribution a { color: #8fc8ff; }
.lk-map.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 20px; background: rgba(10,18,34,.9); color: #fff; border-color: rgba(255,255,255,.15); }
.lk-map .leaflet-popup-content-wrapper, .lk-map .leaflet-popup-tip { background: rgba(10,18,34,.96); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.lk-map .leaflet-popup-content { margin: 12px 14px; max-width: 70vw; }
.lk-map.leaflet-container a.leaflet-popup-close-button { color: #fff; width: 32px; height: 32px; font-size: 22px; }
.lk-map .leaflet-tooltip { background: rgba(10,18,34,.95); color: #fff; border: 1px solid rgba(255,255,255,.2); font-weight: 700; }
.lk-tip { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.lk-tip b { font-size: 14px; }
.lk-tip span { color: #c9d4e6; }
.lk-pin i { display: block; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: radial-gradient(circle at 50% 50%, #fff 0 22%, #ff4d6d 24%); box-shadow: 0 6px 14px rgba(0,0,0,.6), 0 0 0 2px #fff; }
.lk-vpin i, .lk-end i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal; font-weight: 900; font-size: 13px; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.6), 0 0 0 2px #fff; }
.lk-vpin.ok i { background: #19b97a; }
.lk-vpin.no i { background: #d8432a; }
.lk-end i { width: 26px; height: 26px; background: #0b3f7a; }
.lk-mapbox { isolation: isolate; }
.lk-layers { position: absolute; top: 10px; right: 10px; z-index: 1001; display: flex; flex-direction: column; gap: 6px; }
.lk-lay { display: flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 800;
  background: rgba(8,14,28,.88); border: 1px solid rgba(255,255,255,.2); color: #7f8ca3; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .12s; }
.lk-lay:active { transform: scale(.94); }
.lk-lay:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.lk-lay i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; }
.lk-lay[aria-pressed="true"] { color: #fff; }
.lk-lay.fm[aria-pressed="true"] i { background: #ff4d6d; border-color: #fff; box-shadow: 0 0 0 4px rgba(62,160,255,.35); }
.lk-lay.dab[aria-pressed="true"] i { background: #a46bff; border-color: #fff; }
.lk-lay.ver[aria-pressed="true"] i { background: #19b97a; border-color: #fff; }
.lk-loc { position: absolute; right: 10px; bottom: 26px; z-index: 1001; background: rgba(8,14,28,.9); }
.lk-loc svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lk-maperr { position: absolute; inset: auto 12px 12px 12px; z-index: 1002; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(10,16,30,.95); border: 1px solid rgba(255,170,60,.4); color: #ffd9a8; font-size: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.lk-maperr[hidden] { display: none; }
.lk-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 10px;
  padding: 12px calc(var(--sar) + 14px) 18px calc(var(--sal) + 14px); position: relative; }
.lk-mode { align-self: flex-start; }
.lk-loc-ui, .lk-route-ui { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; }
.lk-loc-ui[hidden], .lk-route-ui[hidden] { display: none; }
.lk-towns { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.lk-towns::-webkit-scrollbar { display: none; }
.lk-towns .chip { height: 44px; }
.lk-sugg { list-style: none; margin: 0; padding: 4px; border-radius: 14px; background: rgba(10,18,34,.97); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.lk-sugg[hidden] { display: none; }
.lk-sg { width: 100%; min-height: 48px; display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; border: 0; border-radius: 10px; background: none; text-align: left; }
.lk-sg:active, .lk-sg:focus-visible { background: rgba(62,160,255,.2); outline: none; }
.lk-sg small, .lk-sm { font-size: 13px; color: var(--mute); }
.lk-sm { padding: 10px 12px; }
.lk-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--mute); }
.lk-field input { height: 48px; border-radius: 14px; padding: 0 14px; border: 1px solid var(--line); background: rgba(10,18,34,.6); font-size: 16px; color: var(--ink); font-weight: 400; -webkit-appearance: none; appearance: none; }
.lk-field input:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.lk-out { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lk-intro { margin: 0; font-size: 15px; color: #dbe5f5; }
.lk-place { padding: 12px 14px; border-radius: 16px; background: radial-gradient(120% 140% at 100% 0%, rgba(62,160,255,.3), transparent 60%), rgba(12,22,44,.8); border: 1px solid rgba(62,160,255,.4); }
.lk-pn { display: flex; flex-direction: column; min-width: 0; }
.lk-pn b { font-size: 18px; overflow-wrap: anywhere; }
.lk-pn small { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.lk-h { margin: 6px 2px 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.lk-hn { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: #c9d4e6; }
.lk-none { margin: 0 2px; font-size: 14px; color: var(--mute); }
.lk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lk-row { padding: 10px; border-radius: 16px; background: rgba(12,20,38,.7); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lk-row.b-strong { box-shadow: inset 3px 0 0 #3dffb5; }
.lk-row.b-good { box-shadow: inset 3px 0 0 #b8f04a; }
.lk-row.b-weak { box-shadow: inset 3px 0 0 #ffb547; }
.lk-rt { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lk-freq { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 56px; height: 46px; padding: 0 6px; border-radius: 10px;
  background: linear-gradient(180deg, #1c1307, #2e1d08); border: 1px solid rgba(255,190,110,.4); color: #ffd9a0; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 12px rgba(255,160,60,.2); }
.lk-freq b { font-size: 17px; line-height: 1; }
.lk-freq small { font-size: 10px; opacity: .75; }
.lk-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lk-tx b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-tx small { font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.lk-meter { flex: none; display: flex; align-items: flex-end; gap: 2px; height: 18px; }
.lk-meter i { width: 4px; border-radius: 2px; background: rgba(255,255,255,.15); }
.lk-meter i:nth-child(1) { height: 25%; } .lk-meter i:nth-child(2) { height: 50%; } .lk-meter i:nth-child(3) { height: 75%; } .lk-meter i:nth-child(4) { height: 100%; }
.lk-meter i.on { background: #5fffc8; box-shadow: 0 0 6px rgba(95,255,200,.6); }
.b-weak .lk-meter i.on { background: #ffb547; box-shadow: none; }
.lk-rb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.lk-badge { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; white-space: nowrap; }
.lk-badge.est { color: #bfe3ff; border: 1px dashed rgba(62,160,255,.7); }
.lk-badge.ver { color: #fff; background: #19b97a; }
.lk-badge.no { color: #fff; background: #d8432a; }
.lk-band { font-size: 13px; font-weight: 700; color: #c9d4e6; }
.lk-sp { flex: 1; }
.lk-rb .ctl.sm { font-size: 17px; font-weight: 900; }
.lk-rb .vy[aria-pressed="true"] { background: #19b97a; border-color: #19b97a; color: #fff; }
.lk-rb .vn[aria-pressed="true"] { background: #d8432a; border-color: #d8432a; color: #fff; }
.lk-online { display: flex; flex-direction: column; gap: 8px; }
.lk-ost { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; touch-action: pan-x; }
.lk-ost::-webkit-scrollbar { display: none; }
.lk-o { flex: none; width: 84px; min-height: 84px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(12,20,38,.7); font-size: 12px; font-weight: 700; transition: transform .12s; }
.lk-o:active { transform: scale(.94); }
.lk-o:disabled { opacity: .6; }
.lk-o span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-noloc { padding: 10px 12px; border-radius: 14px; background: rgba(12,20,38,.6); border: 1px solid var(--line); font-size: 14px; }
.lk-noloc summary { min-height: 32px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.lk-noloc ul { margin: 6px 0 0; padding-left: 18px; color: #c9d4e6; columns: 2 160px; }
.lk-src { padding: 12px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.2); font-size: 13px; color: var(--mute); }
.lk-src b { color: var(--ink); font-size: 14px; }
.lk-src p { margin: 6px 0 0; }
.lk-src a { color: #8fc8ff; font-weight: 700; }
.lk-meta { margin: 0; font-size: 12px; color: #8fa0bb; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lk-chart { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.lk-chart canvas { display: block; width: 100%; cursor: crosshair; }
.lk-ev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lk-ev li { display: flex; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(12,20,38,.6); font-size: 14px; }
.lk-ev li .tm { flex: none; width: 4.2em; font-variant-numeric: tabular-nums; font-weight: 700; color: #c9d4e6; }
.lk-ev li.on { box-shadow: inset 3px 0 0 #3dffb5; }
.lk-ev li.off { box-shadow: inset 3px 0 0 #ff7a5c; color: #ffc3b4; }
.lk-ev li.gap { box-shadow: inset 3px 0 0 #ff3b3b; color: #ffb4a0; font-weight: 700; }
/* route: county-by-county frequency guide */
.lk-ctybox { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lk-meta.busy::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #8fc8ff; border-top-color: transparent; animation: lkSpin .9s linear infinite; }
.lk-meta.busy { justify-content: flex-start; }
@keyframes lkSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lk-meta.busy::before { animation: none; } }
.lk-mine { padding: 10px 12px; border-radius: 16px; min-width: 0; border: 1px solid rgba(95,240,192,.45);
  background: radial-gradient(120% 160% at 0% 0%, rgba(95,240,192,.22), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 6px, transparent 6px 12px), rgba(10,24,32,.85); }
.lk-mine .mt { display: block; font-size: 15px; overflow-wrap: anywhere; }
.lk-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.lk-seq .stp { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 4px 8px; border-radius: 10px; background: linear-gradient(180deg, #1c1307, #2e1d08); border: 1px solid rgba(255,190,110,.4); box-shadow: inset 0 0 12px rgba(255,160,60,.2); }
.lk-seq .stp small { font-size: 11px; color: #e8c79a; white-space: nowrap; }
.lk-seq .stp b { font-size: 18px; color: #ffd9a0; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lk-seq .stp.off { opacity: .5; }
.lk-seq .ar, .lk-sw .ar { font-style: normal; color: #ffd166; font-weight: 900; }
.lk-cty { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lk-cty::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; opacity: .55;
  background: linear-gradient(180deg, #3ea0ff, #5ff0c0 50%, #c08bff); }
.lk-seg, .lk-x { position: relative; min-width: 0; border-radius: 16px; }
.lk-seg { padding: 10px 12px; border: 1px solid var(--line); background: radial-gradient(120% 140% at 100% 0%, var(--cc, rgba(62,160,255,.22)), transparent 60%), rgba(12,22,44,.8); }
.lk-seg::before { content: ''; position: absolute; left: -16px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--cd, #3ea0ff);
  box-shadow: 0 0 0 3px rgba(6,12,26,.95), 0 0 12px var(--cd, #3ea0ff); }
.lk-sh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lk-sh b { font-size: 16px; color: var(--cd, #fff); overflow-wrap: anywhere; }
.lk-sh small { font-size: 13px; color: var(--mute); font-variant-numeric: tabular-nums; }
.lk-fqs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; min-width: 0; }
.lk-fq { min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 12px; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); transition: transform .12s; -webkit-user-select: none; user-select: none; }
button.lk-fq:active { transform: scale(.95); }
button.lk-fq:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.lk-fq b { font-size: 16px; color: #9fd3ff; font-variant-numeric: tabular-nums; }
.lk-fq span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-fq.chg { border-color: rgba(255,209,102,.6); }
.lk-fq.chg b { color: #ffd166; }
.lk-fq.me { border-color: #5ff0c0; background: rgba(95,240,192,.16); box-shadow: 0 0 14px rgba(95,240,192,.25); }
.lk-fq.me b { color: #5ff0c0; }
.lk-more { align-self: center; font-size: 13px; color: var(--mute); }
.lk-x { padding: 9px 12px; font-size: 14px; border: 1px dashed rgba(255,209,102,.55); background: linear-gradient(90deg, rgba(255,209,102,.16), rgba(255,209,102,.03)); }
.lk-x::before { content: ''; position: absolute; left: -15px; top: 13px; width: 11px; height: 11px; transform: rotate(45deg); background: #ffd166; box-shadow: 0 0 0 3px rgba(6,12,26,.95); }
.lk-xh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 800; }
.lk-xh .tm { color: #ffd166; font-variant-numeric: tabular-nums; }
.lk-x small { display: block; margin-top: 4px; font-size: 13px; color: var(--mute); overflow-wrap: anywhere; }
.lk-x small.hint { color: #ffe3a3; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.lk-sw { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lk-sw li { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; min-width: 0; }
.lk-sw .nm { font-weight: 700; overflow-wrap: anywhere; }
.lk-sw s { color: var(--mute); font-variant-numeric: tabular-nums; }
.lk-sw .to { font-size: 17px; font-weight: 900; color: #ffd166; font-variant-numeric: tabular-nums; }
.lk-sw li small { margin: 0; display: inline; font-size: 12px; }
.lk-sw li.me .nm, .lk-sw li.me .to { color: #5ff0c0; }
.lk-cty-m span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: #fff; background: rgba(8,14,28,.92); border: 2px solid var(--cd, #ffd166); box-shadow: 0 4px 12px rgba(0,0,0,.55); pointer-events: none; }

@media (orientation: landscape) and (min-width: 600px) {
  .lk-main { flex-direction: row; gap: 4px; }
  .lk-mapbox { flex: 1 1 56%; min-height: 0; margin: 0 0 10px calc(var(--sal) + 10px); }
  .lk-panel { flex: 1 1 44%; padding-top: 0; }
  .rd-scope { max-width: 46vh; }
}
@media (max-width: 380px) {
  .rd-hero { flex-direction: column; align-items: stretch; }
  .rd-scope { align-self: center; width: min(62vw, 30vh); }
  .feat-btn { gap: 8px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ovl { transform: none; }
}

/* ================= top tabs: Raadio | Veder news ================= */
.topnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; min-width: 0; border-radius: 16px;
  background: rgba(10,18,34,.6); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); user-select: none; -webkit-user-select: none; }
.tn { position: relative; min-height: 44px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 12px;
  background: none; color: var(--mute); font-size: 15px; font-weight: 800; overflow: hidden; transition: background .2s, color .2s, transform .12s; }
.tn span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tn:active { transform: scale(.96); }
.tn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.tn[aria-current="true"] { color: #06204a; background: linear-gradient(180deg, #fff, #dfeaff); box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.tn-v { color: #ffe7a8; }
.tn-v .sun { fill: #ffd34d; stroke: #ffb020; }
.tn-v .ray { stroke: #ffd34d; }
.tn-v .cl { fill: rgba(235,243,255,.95); stroke: #9fb4d0; }
.tn-v:not([aria-current="true"]) { background: radial-gradient(120% 180% at 0% 50%, rgba(255,190,80,.22), transparent 60%), linear-gradient(120deg, rgba(40,90,160,.45), rgba(10,20,40,.3)); }
.tn-v:not([aria-current="true"])::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%); transform: translateX(-100%); animation: shine 4.5s ease-in-out infinite; pointer-events: none; }
.topnav.in-ovl { flex: none; margin: 0 calc(var(--sar) + 14px) 8px calc(var(--sal) + 14px); }
@media (orientation: portrait) and (max-height: 700px) {
  .tn { min-height: 44px; font-size: 14px; }
}

/* ================= Veder news ================= */
.vd { background:
    radial-gradient(90% 50% at 100% 0%, rgba(255,180,70,.18), transparent 70%),
    radial-gradient(80% 40% at 0% 100%, rgba(62,160,255,.18), transparent 70%),
    linear-gradient(180deg, #08162e, #030812 70%); }
.vd-pill { color: #ffe08a; background: rgba(255,211,77,.1); border-color: rgba(255,211,77,.4); }
.vd-pill i { background: #ffd34d; box-shadow: 0 0 8px #ffd34d; }
.vd-pill.busy { color: #bfe3ff; background: rgba(62,160,255,.12); border-color: rgba(62,160,255,.45); }
.vd-pill.busy i { background: #3ea0ff; box-shadow: 0 0 8px #3ea0ff; }
.vd-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.vd-body { gap: 14px; }
.vd-sec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vd-sec h3, .vd-maphead h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-ic { width: 40px; height: 40px; flex: none; display: block; }
.vd-ic.sm { width: 30px; height: 30px; }

/* day strip */
.vd-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; user-select: none; -webkit-user-select: none; }
.vd-day { min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px 8px; border-radius: 16px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(30,54,96,.6), rgba(10,18,34,.6)); transition: transform .12s, background .2s; }
.vd-day b { font-size: 14px; font-weight: 800; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-day small { font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.vd-day .vd-ic { width: clamp(30px, 9vw, 44px); height: clamp(30px, 9vw, 44px); }
.vd-day-t { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-day-t i, .vt-t i { font-style: normal; font-weight: 600; color: #b9c7dc; margin-left: 3px; font-size: .85em; }
.vd-day:active { transform: scale(.95); }
.vd-day:focus-visible, .vd-town:focus-visible, .vd-shd:focus-visible, .vd-attr-l:focus-visible, .vd-story:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.vd-day[aria-selected="true"] { background: radial-gradient(120% 90% at 50% 0%, rgba(255,211,77,.35), transparent 70%), linear-gradient(180deg, #2b7fe0, #0b3f7a); border-color: rgba(255,255,255,.6); box-shadow: 0 8px 20px rgba(0,80,180,.45); }
.vd-day[aria-selected="true"] small, .vd-day[aria-selected="true"] .vd-day-t i { color: #e3eeff; }

.vd-err { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 14px; font-size: 14px; color: #ffd9a8; background: rgba(255,170,60,.12); border: 1px solid rgba(255,170,60,.35); }
.vd-err[hidden] { display: none; }
.vd-err p { margin: 0; }
.vd-err .vd-err-s { color: #e8cfa8; font-size: 13px; }

/* map */
.vd-grid { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vd-mapcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vd-maphead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-width: 0; }
.vd-mode button { padding: 0 12px; font-size: 14px; }
.vd-mapbox { position: relative; width: 100%; aspect-ratio: 1.5 / 1; max-height: 56dvh; min-height: 200px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); background: #071a36; box-shadow: 0 16px 36px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.4); }
#vdMap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; }
.vd-legend { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; pointer-events: none;
  background: rgba(5,12,26,.72); border: 1px solid rgba(255,255,255,.15); font-size: 11px; font-weight: 700; color: #dbe5f5; font-variant-numeric: tabular-nums; }
.vd-legend i { display: block; width: clamp(60px, 22vw, 120px); height: 7px; border-radius: 4px; }

/* warnings */
.vd-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vd-warns { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vd-warn { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 16px; min-width: 0; flex-wrap: wrap;
  background: linear-gradient(110deg, rgba(255,211,77,.16), rgba(12,20,38,.7) 60%); border: 1px solid rgba(255,211,77,.4); box-shadow: inset 4px 0 0 #ffd34d; }
.vd-warn.l-o { background: linear-gradient(110deg, rgba(255,140,50,.22), rgba(12,20,38,.7) 60%); border-color: rgba(255,140,50,.5); box-shadow: inset 4px 0 0 #ff8c32; }
.vd-warn.l-r { background: linear-gradient(110deg, rgba(255,60,60,.25), rgba(12,20,38,.7) 60%); border-color: rgba(255,80,80,.55); box-shadow: inset 4px 0 0 #ff4040; }
.vd-warn > b { font-size: 15px; flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.vd-warn > small, .vd-warn > p { flex: 1 1 100%; margin: 0; font-size: 13px; color: #dbe5f5; overflow-wrap: anywhere; }
.vd-warn .tm { color: var(--mute); font-variant-numeric: tabular-nums; }
.vd-wic { width: 38px; height: 38px; flex: none; }
.vd-warn-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vd-warn-tx b { font-size: 15px; }
.vd-warn-tx p { margin: 0; font-size: 14px; color: #e6edf8; overflow-wrap: anywhere; }
.vd-badge { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; white-space: normal; }
.vd-badge.off { color: #2a1a00; background: linear-gradient(135deg, #fff1b8, #ffd34d); }
.vd-badge.est { margin-top: 3px; color: #bfe3ff; border: 1px dashed rgba(62,160,255,.7); }
.vd-none { margin: 0; padding: 12px; border-radius: 14px; font-size: 14px; color: var(--mute); background: rgba(12,20,38,.55); border: 1px solid var(--line); }
.vd-none.ok { color: #b8f5d8; border-color: rgba(61,255,181,.3); background: rgba(20,60,50,.35); }
.vd-note { margin: 0 2px; font-size: 12px; color: #8fa0bb; }

/* stories */
.vd-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; min-width: 0; }
.vd-stories .vd-note { grid-column: 1 / -1; }
.vd-story { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px; border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none;
  border: 1px solid rgba(255,255,255,.09); background: linear-gradient(130deg, rgba(24,44,82,.85), rgba(8,14,28,.85)); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.vd-story::after { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(255,211,77,.12), transparent 70%); pointer-events: none; }
.vd-story.hero { grid-column: 1 / -1; background: radial-gradient(120% 140% at 100% 0%, rgba(255,190,80,.28), transparent 60%), linear-gradient(130deg, rgba(20,70,140,.9), rgba(8,14,28,.9)); border-color: rgba(255,211,77,.35); }
.vd-story.hero b { font-size: 19px; }
.vd-story.off { flex-direction: column; padding: 0; }
.vd-story.off .vd-st-tx { padding: 10px 12px 12px; }
.vd-st-img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }
.vd-st-ic { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.vd-st-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vd-st-tx b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.vd-st-tx p { margin: 0; font-size: 14px; color: #d3def0; overflow-wrap: anywhere; }
.vd-tag { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ffe08a; }
.vd-story:active { transform: scale(.985); }

/* towns */
.vd-towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; min-width: 0; }
.vd-town { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 18px; text-align: left;
  border: 1px solid rgba(255,255,255,.09); background: linear-gradient(120deg, rgba(20,34,62,.85), rgba(8,14,28,.85)); box-shadow: 0 8px 22px rgba(0,0,0,.3); transition: transform .12s, border-color .2s; }
.vd-town:active { transform: scale(.985); }
.vd-town.sel { border-color: rgba(255,255,255,.7); box-shadow: 0 0 0 2px rgba(62,160,255,.5), 0 8px 22px rgba(0,0,0,.3); }
.vt-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vt-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vt-nm b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-nm small { font-size: 13px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-now { flex: none; display: flex; align-items: center; gap: 2px; }
.vt-t { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: #c9d4e6; font-variant-numeric: tabular-nums; }
.vt-meta:empty { display: none; }
.vt-meta .wet { color: #8fd0ff; }
.vt-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.vt-d { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 4px 0 5px; border-radius: 12px; background: rgba(255,255,255,.04); font-variant-numeric: tabular-nums; }
.vt-d.on { background: rgba(62,160,255,.28); box-shadow: inset 0 0 0 1px rgba(62,160,255,.6); }
.vt-d small { font-size: 11px; color: var(--mute); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-d b { font-size: 14px; }
.vt-d i { font-style: normal; font-size: 12px; color: #9fb0c8; }

.vd-attr { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.2); font-size: 13px; color: var(--mute); }
.vd-attr-l { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 800; color: #ffe08a; text-decoration: none; }
.vd-attr span { overflow-wrap: anywhere; }

/* town detail sheet */
.vd-sheet { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; background: rgba(2,6,14,.55); opacity: 0; transition: opacity .2s; }
.vd-sheet[hidden] { display: none; }
.vd-sheet.in { opacity: 1; }
.vd-sh-card { width: 100%; max-width: 640px; max-height: 92%; display: flex; flex-direction: column; min-height: 0; border-radius: 24px 24px 0 0; overflow: hidden;
  background: radial-gradient(120% 60% at 100% 0%, rgba(255,190,80,.2), transparent 60%), linear-gradient(180deg, #12274a, #071226); border: 1px solid rgba(255,255,255,.14); border-bottom: 0;
  box-shadow: 0 -20px 50px rgba(0,0,0,.6); transform: translateY(24px); transition: transform .22s; }
.vd-sheet.in .vd-sh-card { transform: none; }
.vd-sh-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px calc(var(--sar) + 14px) 6px calc(var(--sal) + 16px); }
.vd-sh-top .ctl svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.vd-sh-ht { flex: 1; min-width: 0; }
.vd-sh-ht h3 { margin: 0; font-size: 22px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-sh-ht p { margin: 0; font-size: 14px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-sh-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px calc(var(--sar) + 14px) 16px calc(var(--sal) + 14px); display: flex; flex-direction: column; gap: 10px; }
.vd-sh-body h4 { margin: 4px 0 0; font-size: 15px; font-weight: 800; }
.vd-sh-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.vd-sh-ic { width: 72px; height: 72px; flex: none; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); }
.vd-sh-t { font-size: 36px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-sh-t i { font-style: normal; font-size: .55em; color: #b9c7dc; font-weight: 700; }
.vd-facts { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 6px; }
.vd-facts:empty { display: none; }
.vd-fact { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.vd-fact small { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); }
.vd-fact b { font-size: 15px; overflow-wrap: anywhere; }
.vd-chart { width: 100%; height: 130px; display: block; border-radius: 14px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.08); }
.vd-chart[hidden] { display: none; }
.vd-hours { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; touch-action: pan-x; min-width: 0; }
.vd-hours::-webkit-scrollbar { display: none; }
.vd-hr { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; background: rgba(255,255,255,.05); font-variant-numeric: tabular-nums; }
.vd-hr small { font-size: 12px; color: var(--mute); }
.vd-hr b { font-size: 15px; }
.vd-hr i { font-style: normal; font-size: 11px; color: #9fb0c8; white-space: nowrap; }
.vd-hr i.wet { color: #8fd0ff; }
.vd-hours .vd-none { flex: 1; }
.vd-shdays { display: flex; flex-direction: column; gap: 4px; }
.vd-shd { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 10px; border-radius: 14px; border: 1px solid transparent; background: rgba(255,255,255,.05); text-align: left; min-width: 0; transition: transform .12s; }
.vd-shd:active { transform: scale(.98); }
.vd-shd.on { background: rgba(62,160,255,.26); border-color: rgba(62,160,255,.6); }
.vd-shd-n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vd-shd-n b { font-size: 15px; }
.vd-shd-n small { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-shd-r { flex: none; font-size: 12px; color: #8fd0ff; font-variant-numeric: tabular-nums; }
.vd-shd .vt-t { font-size: 17px; }

/* mini player with prev/next */
.mini-sk svg { width: 18px; height: 18px; }
@media (max-width: 360px) {
  .mini-logo { display: none; }
  .vd-day { padding-left: 0; padding-right: 0; }
  .vd-day b { font-size: 12px; }
}
@media (orientation: landscape) and (min-width: 600px) {
  .vd-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .vd-mapbox { max-height: 62dvh; }
  .vd-sh-card { max-height: 96%; }
}
@media (orientation: landscape) and (max-height: 480px) {
  .topnav.in-ovl { margin-bottom: 4px; }
  .vd-days .vd-ic { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .vd-sh-card { transform: none; }
}

/* export (download the app) button in the header */
.ex-btn {
  position: relative; display: grid; place-items: center;
  width: 44px; min-width: 44px; padding: 0; flex: none;
  background: radial-gradient(120% 120% at 30% 20%, rgba(62,160,255,.28), rgba(255,255,255,.06) 60%);
}
.ex-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s; }
.ex-btn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
.ex-spin {
  position: absolute; inset: 10px; border-radius: 50%; opacity: 0;
  border: 2.5px solid rgba(255,255,255,.2); border-top-color: #67e8f9;
}
.ex-btn.busy svg { opacity: .25; }
.ex-btn.busy .ex-spin { opacity: 1; animation: exSpin .8s linear infinite; }
@keyframes exSpin { to { transform: rotate(360deg); } }
@media (max-width: 360px) {
  .top-actions .chip-btn { padding: 0 10px; min-width: 44px; }
  .top-actions .ex-btn { padding: 0; }
}

/* add to home screen */
.inst-btn[hidden] { display: none; }
.inst-btn.ready::after {
  content: ''; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: #67e8f9; box-shadow: 0 0 0 2px #0a1a3a, 0 0 10px #67e8f9;
}
.inst {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  padding: calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);
  background: rgba(2,6,16,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s;
}
.inst[hidden] { display: none; }
.inst.in { opacity: 1; }
.inst-card {
  width: 100%; max-width: 460px; max-height: 100%; overflow: auto; overscroll-behavior: contain;
  padding: 18px 18px 16px; border-radius: 26px; border: 1px solid var(--line);
  background:
    radial-gradient(120% 70% at 15% 0%, rgba(62,160,255,.28), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(103,232,249,.12), transparent 60%),
    linear-gradient(180deg, rgba(20,34,62,.97), rgba(8,14,28,.98));
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12);
  transform: translateY(24px); transition: transform .25s cubic-bezier(.2,.8,.2,1);
  user-select: none; -webkit-user-select: none;
}
.inst.in .inst-card { transform: none; }
.inst-top { display: flex; align-items: center; gap: 12px; }
.inst-app { width: 52px; height: 52px; border-radius: 14px; flex: none; box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.15); }
.inst-top h2 { flex: 1; min-width: 0; margin: 0; font-size: clamp(18px, 4.8vw, 21px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.inst-x { flex: none; }
.inst-x svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.inst-lead { margin: 12px 0 14px; color: var(--mute); font-size: 16px; }
.inst-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inst-steps li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.inst-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; background: linear-gradient(180deg, #2b9bff, #0062b8); }
.inst-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.9); color: #0a62d0; }
.inst-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inst-ic circle { fill: currentColor; stroke: none; }
.inst-tx { font-size: 16px; font-weight: 600; line-height: 1.3; }
.inst-note { margin: 12px 2px 0; font-size: 14px; color: #ffd9a0; }
.inst-note[hidden] { display: none; }
.inst-ok { width: 100%; margin-top: 16px; min-height: 48px; font-size: 16px; }
@media (orientation: landscape) and (max-height: 520px) {
  .inst { align-items: center; }
  .inst-card { max-width: 640px; }
  .inst-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inst-steps li { grid-template-columns: auto minmax(0, 1fr); }
  .inst-steps .inst-n { display: none; }
  .inst-lead { margin: 8px 0 10px; }
}

/* ---- weather warning (Keskkonnaagentuur): a one-line strip inside the weather card, tap to read it all ----
   It lives inside .wx on purpose: the app is a fixed-height grid, and an extra row there squeezed the station list. */
.wxwarn {
  grid-column: 1 / -1; display: block; width: 100%; min-width: 0; box-sizing: border-box; margin: 2px 0 0; padding: 6px 10px;
  text-align: left; font: inherit; font-size: 13px; line-height: 1.35; color: #2a1800; cursor: pointer; border-radius: 12px;
  border: 1px solid rgba(255, 200, 60, .6); background: linear-gradient(120deg, #ffd34d, #ffb02e); -webkit-tap-highlight-color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wxwarn[hidden] { display: none; }
.wxwarn.red { color: #fff; border-color: rgba(255, 120, 100, .7); background: linear-gradient(120deg, #e5484d, #b3262b); }
.wxwarn b { font-weight: 800; }
.wxwarn b::after { content: ' · '; font-weight: 400; }
.wxwarn span.more, .wxwarn small { display: none; }
.wxwarn.open { white-space: normal; max-height: 40vh; overflow: auto; }
.wxwarn.open b { display: block; } .wxwarn.open b::after { content: none; }
.wxwarn.open span, .wxwarn.open span.more { display: block; margin-bottom: 4px; }
.wxwarn.open small { display: block; opacity: .8; font-size: 12px; }
.wxwarn:focus-visible { outline: 2px solid #67e8f9; outline-offset: 2px; }
/* ---- morning weather line on the alarm screen ---- */
.ar-wx { margin: 10px auto 0; max-width: 32em; font-size: 17px; line-height: 1.4; color: #e8f1ff; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.ar-wx[hidden] { display: none; }
/* ---- Eesti raadio edetabel ---- */
.list.top { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; }
.top-hd { margin: 2px 4px 6px; font-size: 13px; line-height: 1.4; color: var(--mute); }
.top-hd b { color: var(--ink); }
.top-it { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 8px 8px;
  border-radius: 14px; border: 1px solid var(--line); background: rgba(10, 22, 44, .55); text-align: left; font: inherit; color: var(--ink); width: 100%; box-sizing: border-box; }
button.top-it { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.top-it:active { transform: scale(.985); }
.top-n { font-size: 18px; font-weight: 900; text-align: center; color: #9cc8ff; font-variant-numeric: tabular-nums; }
.top-it:nth-child(2) .top-n { color: #ffd34d; } .top-it:nth-child(3) .top-n { color: #e6edf7; } .top-it:nth-child(4) .top-n { color: #f0a868; }
.top-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.top-tx b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-tx span { font-size: 13px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-c { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.top-c b { font-size: 16px; font-weight: 900; }
.top-c span { font-size: 12px; color: var(--mute); white-space: nowrap; }
.top-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 3px; }
.top-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3ea0ff, #67e8f9); }
.top-empty { padding: 24px 12px; text-align: center; color: var(--mute); font-size: 15px; line-height: 1.5; }