/* The Guthrie radar.
 *
 * Sits inside the forecast page's light furniture, but the radar stage itself
 * is dark: reflectivity colours are designed to be read against black, and a
 * white background would wash the light rain out of the picture entirely.
 */

.osc-rdr-head h1 {
    margin: 0 0 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2rem; font-weight: 900; letter-spacing: -0.01em;
    color: #111827;
}
.osc-rdr-head p {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem; color: #4b5563; max-width: 46rem;
}

.osc-rdr-panel { padding-bottom: 18px; }

/* On a phone the stage would scale to about a third of its authored width and
 * the town names would render at under four pixels -- present, and useless.
 * Instead it keeps a legible minimum size and the reader pans. The scroll box
 * is nudged to Guthrie on load rather than to the left edge. */
.osc-rdr-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    background: #121722;
}
.osc-rdr-stage {
    position: relative;
    width: 100%;
    min-width: 660px;
    aspect-ratio: var(--osc-rdr-w) / var(--osc-rdr-h);
    background: #121722;
    overflow: hidden;
}
/* Older browsers without aspect-ratio would collapse the stage to nothing and
 * the page would look broken rather than merely dated. */
@supports not (aspect-ratio: 1 / 1) {
    .osc-rdr-stage { height: 0; padding-bottom: 62.5%; }
}

.osc-rdr-frame,
.osc-rdr-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* Frames are stacked and revealed one at a time rather than swapped into a
 * single element: swapping src leaves a blank gap on a slow connection, which
 * on a radar loop reads as the storm disappearing. */
.osc-rdr-frame { opacity: 0; }
.osc-rdr-frame.is-on { opacity: 1; }
.osc-rdr-base { pointer-events: none; }

.osc-rdr-clear {
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    margin: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(10, 13, 20, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem; color: #cbd5e1;
    white-space: nowrap;
}

/* ---- controls ---------------------------------------------------------- */

.osc-rdr-controls {
    display: flex; align-items: center; gap: 12px;
    margin-top: 12px;
}
.osc-rdr-play {
    display: inline-flex; align-items: center; gap: 7px;
    flex: 0 0 auto;
    padding: 7px 13px 7px 11px;
    border: 1px solid #d4cdbb;
    border-radius: 7px;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.78rem; font-weight: 700; color: #1f2937;
    cursor: pointer;
}
.osc-rdr-play:hover { background: #f7f4ec; }
.osc-rdr-play:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* A triangle that becomes two bars, so the control reads at a glance without
 * loading an icon font for two shapes. */
.osc-rdr-play-icon {
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #1f2937;
}
.osc-rdr-play.is-playing .osc-rdr-play-icon {
    width: 8px; height: 10px;
    border-width: 0;
    border-left: 3px solid #1f2937;
    border-right: 3px solid #1f2937;
    background: transparent;
}

.osc-rdr-range {
    flex: 1 1 auto;
    min-width: 0;
    accent-color: #1d4ed8;
    cursor: pointer;
}
.osc-rdr-range:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }

.osc-rdr-clock {
    flex: 0 0 auto;
    min-width: 5.6rem;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9rem; font-weight: 800; color: #111827;
    font-variant-numeric: tabular-nums;
}

.osc-rdr-span,
.osc-rdr-empty {
    margin: 10px 0 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.76rem; color: #6b7280;
}
.osc-rdr-empty { margin-top: 0; font-size: 0.85rem; color: #4b5563; }

/* ---- legend ------------------------------------------------------------ */

.osc-rdr-legend {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    list-style: none; margin: 14px 0 0; padding: 0;
}
.osc-rdr-legend li {
    display: flex; align-items: center; gap: 7px;
    font-family: Arial, Helvetica, sans-serif; font-size: 0.76rem;
}
.osc-rdr-swatch {
    width: 15px; height: 11px; border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    flex: 0 0 auto;
}
.osc-rdr-legend-label { color: #1f2937; font-weight: 700; }
.osc-rdr-legend-dbz { color: #9ca3af; }

/* ---- method ------------------------------------------------------------ */

.osc-rdr-method {
    margin: 0; padding-left: 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.84rem; line-height: 1.55; color: #374151;
}
.osc-rdr-method li { margin-bottom: 9px; }
.osc-rdr-method li:last-child { margin-bottom: 0; }
.osc-rdr-method strong { color: #111827; }

@media (max-width: 640px) {
    .osc-rdr-head h1 { font-size: 1.6rem; }
    .osc-rdr-clock { min-width: 4.8rem; font-size: 0.82rem; }
    .osc-rdr-legend { gap: 6px 12px; }
}

/* A reader who has asked the system to stop moving things gets a still
 * picture and a scrubber, not an animation they have to chase. */
@media (prefers-reduced-motion: reduce) {
    .osc-rdr-frame { transition: none; }
}