/* Radio-Stuff solar conditions widget — scoped under .rsw */

.rsw {
  --rsw-bg: #0c1220;
  --rsw-edge: #22304a;
  --rsw-text: #dbe4f2;
  --rsw-dim: #7e8ca3;
  --rsw-good: #58d38c;
  --rsw-fair: #e8b84b;
  --rsw-poor: #e06056;
  background: var(--rsw-bg);
  border: 1px solid var(--rsw-edge);
  border-radius: 10px;
  overflow: hidden;
  color: var(--rsw-text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 760px;
}

.rsw-sponsor {
  text-align: center;
  padding: 4px 12px;
  font-size: 0.72em;
  color: var(--rsw-dim);
  border-bottom: 1px solid var(--rsw-edge);
}
.rsw-sponsor-link {
  color: var(--rsw-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--rsw-dim);
}
.rsw-sponsor-link:hover { color: var(--rsw-text); border-bottom-color: var(--rsw-text); }

.rsw-map {
  position: relative;
  background: #04070f;
  aspect-ratio: 2 / 1;
  width: 100%;
  min-width: 240px;
  min-height: 120px;
  max-width: 100%;
  resize: both;
  overflow: hidden;
}
.rsw-map canvas { display: block; width: 100%; height: 100%; }
.rsw-map-resize-hint {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 45%, rgba(219,228,242,0.55) 45% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 65%, rgba(219,228,242,0.35) 65% 75%, transparent 75% 100%);
}

.rsw-locator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--rsw-edge);
}
.rsw-locator-input {
  flex: 0 1 180px;
  background: #0a0f1a;
  border: 1px solid var(--rsw-edge);
  border-radius: 6px;
  color: var(--rsw-text);
  font: inherit;
  padding: 6px 8px;
}
.rsw-locator-input::placeholder { color: var(--rsw-dim); }
.rsw-locator-btn {
  background: var(--rsw-edge);
  border: 1px solid var(--rsw-edge);
  border-radius: 6px;
  color: var(--rsw-text);
  font: inherit;
  padding: 6px 12px;
  cursor: pointer;
}
.rsw-locator-btn:hover { background: #2b3c5c; }
.rsw-locator-msg { font-size: 0.85em; color: var(--rsw-dim); }
.rsw-locator-msg[data-state="ok"] { color: var(--rsw-good); }
.rsw-locator-msg[data-state="error"] { color: var(--rsw-poor); }

.rsw-clocks {
  display: flex;
  border-top: 1px solid var(--rsw-edge);
  border-bottom: 1px solid var(--rsw-edge);
}
.rsw-clock {
  flex: 1;
  text-align: center;
  padding: 10px 4px 8px;
  border-right: 1px solid var(--rsw-edge);
}
.rsw-clock:last-child { border-right: none; }
.rsw-clock-time {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.15em;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.rsw-clock:first-child .rsw-clock-time { color: var(--rsw-fair); }
.rsw-clock-label { color: var(--rsw-dim); font-size: 0.78em; margin-top: 2px; }

.rsw-panel { display: flex; }
.rsw-stat {
  flex: 1;
  text-align: center;
  padding: 14px 6px 10px;
  border-right: 1px solid var(--rsw-edge);
}
.rsw-stat:last-child { border-right: none; }
.rsw-stat-value {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.9em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.rsw-stat-label { color: var(--rsw-dim); font-size: 0.82em; margin-top: 3px; }
.rsw-stat-status { font-size: 0.82em; min-height: 1.3em; margin-top: 1px; }
.rsw-stat[data-level="good"] .rsw-stat-status { color: var(--rsw-good); }
.rsw-stat[data-level="fair"] .rsw-stat-status { color: var(--rsw-fair); }
.rsw-stat[data-level="poor"] .rsw-stat-status { color: var(--rsw-poor); }

.rsw-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  padding: 4px 12px 12px;
  font-size: 0.85em;
  color: var(--rsw-dim);
}
.rsw-band b { font-weight: 600; }
.rsw-band-good { color: var(--rsw-good); }
.rsw-band-fair { color: var(--rsw-fair); }
.rsw-band-poor { color: var(--rsw-poor); }

.rsw-history-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--rsw-edge);
  color: var(--rsw-dim);
  font: inherit;
  font-size: 0.85em;
  padding: 8px 12px;
  cursor: pointer;
  text-align: center;
}
.rsw-history-toggle:hover { color: var(--rsw-text); background: #0e1626; }

.rsw-history {
  padding: 12px;
  border-top: 1px solid var(--rsw-edge);
}
.rsw-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.rsw-history-label { color: var(--rsw-dim); font-size: 0.85em; }
.rsw-history-date {
  background: #0a0f1a;
  border: 1px solid var(--rsw-edge);
  border-radius: 6px;
  color: var(--rsw-text);
  font: inherit;
  padding: 5px 8px;
  color-scheme: dark;
}
.rsw-history-btn {
  background: var(--rsw-edge);
  border: 1px solid var(--rsw-edge);
  border-radius: 6px;
  color: var(--rsw-text);
  font: inherit;
  padding: 6px 12px;
  cursor: pointer;
}
.rsw-history-btn:hover { background: #2b3c5c; }
.rsw-history-btn:disabled { opacity: 0.6; cursor: default; }

.rsw-history-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 0.8em;
  color: var(--rsw-dim);
  margin-bottom: 6px;
}
.rsw-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.rsw-legend-flux { background: var(--rsw-good); border-radius: 50%; }
.rsw-legend-kp { background: rgba(232,184,75,0.7); }

.rsw-history-canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #0a0f1a;
}
.rsw-history-msg {
  color: var(--rsw-dim);
  font-size: 0.82em;
  margin-top: 8px;
}

.rsw-footer {
  text-align: center;
  color: var(--rsw-dim);
  font-size: 0.75em;
  padding: 0 12px 10px;
}

@media (max-width: 560px) {
  .rsw-clocks { flex-wrap: wrap; }
  .rsw-clock { flex: 1 1 33%; border-bottom: 1px solid var(--rsw-edge); }
  .rsw-stat-value { font-size: 1.5em; }
  .rsw-panel { flex-wrap: wrap; }
  .rsw-stat { flex: 1 1 50%; border-bottom: 1px solid var(--rsw-edge); }
  .rsw-stat:nth-child(2n) { border-right: none; }
  .rsw-stat:nth-last-child(-n+2) { border-bottom: none; }
  .rsw-locator { flex-wrap: wrap; }
  .rsw-locator-input { flex: 1 1 100%; }
  .rsw-history-row { gap: 6px; }
  .rsw-history-date { flex: 1 1 auto; }
}