/* ══════════════════════════════════════════════════════════════════════
   sc-weather.css — game-day weather (js/sc-weather.js), Oct 4 2026.

   Tokens only (no hex, no !important). The pieces:
     .sc-wx__*      the parts of a condition line (numerals, words, dots)
     .sc-wx-strip   the /live hero's glass plate, its own row under the
                    venue line (a broadcast strip: dark in EVERY theme)
     .sc-wx-chip    the console's per-field conditions chip (phase B)
     .sc-wx-band    the console's heat warning band (whistle gold FILL,
                    dark text — never gold text on a light surface)
   (The athlete schedule's row line is styled in athlete/css/season.css,
   in that app's own tokens.)

   Type voice: Orbitron for NUMERALS ONLY (degrees, mph, %); Saira Condensed
   for the words (FEELS, WIND, SHOWERS); Rajdhani for the band's sentence.
   Weather is NOT on the public scoreboard (Carlos, Oct 4 2026).
   ══════════════════════════════════════════════════════════════════════ */

/* ── the parts ──────────────────────────────────────────────────────────
   ⛔ A GROUP IS INLINE, NOT FLEX. partsHTML() puts real spaces between the
   words; whitespace between children of a flex box is not rendered, which is
   how "SHOWERS40%" shipped. nowrap keeps a condition with its number. */
.sc-wx__grp { display: inline; white-space: nowrap; }
.sc-wx__num {
    font-family: 'Orbitron', var(--gc-font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.sc-wx__lbl {
    font-family: var(--gc-font-display);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.sc-wx__sky { display: inline-block; flex: 0 0 auto; vertical-align: -0.15em; }

/* ── the /live hero strip ───────────────────────────────────────────────
   ONE legible ink over ANY hero photo: the plate is --gc-overlay (92 %
   opaque ink, dark in both themes), every token on it is
   --gc-text-on-overlay. One row; js fit() drops whole conditions from the
   right when the plate is narrower than the line. */
.sc-wx-strip {
    display: inline-flex;
    align-items: center;
    gap: var(--gc-space-2);
    box-sizing: border-box;
    max-width: 100%;
    margin-top: var(--gc-space-3);
    padding: var(--gc-space-2) var(--gc-space-3);
    overflow: hidden;
    white-space: nowrap;
    background: var(--gc-overlay);
    border: 1px solid color-mix(in srgb, var(--gc-text-on-overlay) 16%, transparent);
    border-left: 3px solid var(--league-primary, var(--gc-accent-primary));
    border-radius: 4px;
    box-shadow: var(--gc-shadow-lg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--gc-text-on-overlay);
    font-family: var(--gc-font-display);
    font-weight: 700;
    font-size: clamp(0.88rem, 1.25vw, 1.05rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.sc-wx-strip[hidden] { display: none; }
.sc-wx-strip .sc-wx__sky { width: 1.2em; height: 1.2em; }
.sc-wx-strip .sc-wx__line { display: inline-flex; align-items: baseline; gap: var(--gc-space-2); }
.sc-wx-strip .sc-wx__num { font-size: 0.92em; }
.sc-wx-strip .sc-wx__lbl,
.sc-wx-strip .sc-wx__dot { color: var(--gc-text-on-overlay); }

/* ── the console chip ───────────────────────────────────────────────── */
.sc-wx-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--gc-space-2);
    padding: var(--gc-space-1) var(--gc-space-2);
    border: 1px solid var(--gc-border-default);
    border-radius: 3px;
    background: var(--gc-bg-elevated);
    color: var(--gc-text-color-primary);
    line-height: 1.1;
    white-space: nowrap;
}
.sc-wx-chip .sc-wx__num { font-size: var(--gc-text-sm); }
.sc-wx-chip .sc-wx__lbl { font-size: var(--gc-text-2xs); color: var(--gc-text-color-muted); }
.sc-wx-chip--hot {
    border-color: var(--gc-status-warning-fill);
    box-shadow: inset 0 -2px 0 var(--gc-status-warning-fill);
}
.sc-wx-chip--none .sc-wx__lbl { letter-spacing: 0.08em; color: var(--gc-text-color-muted); }
.sc-wx-chip--none { border-style: dashed; background: transparent; }

/* ── the heat warning band ──────────────────────────────────────────── */
.sc-wx-band {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gc-space-3);
    padding: var(--gc-space-3) var(--gc-space-4);
    background: var(--gc-status-warning-fill);
    color: var(--gc-text-on-accent);
    border-radius: 4px;
}
.sc-wx-band__eyebrow {
    font-family: var(--gc-font-display);
    font-weight: 800;
    font-size: var(--gc-text-xs);
    letter-spacing: 0.16em;
    padding: var(--gc-space-1) var(--gc-space-2);
    border: 1.5px solid currentColor;
    border-radius: 3px;
}
.sc-wx-band__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-wx-band__line {
    font-family: var(--gc-font-display);
    font-weight: 800;
    font-size: var(--gc-text-lg);
    letter-spacing: 0.01em;
    line-height: 1.15;
}
.sc-wx-band__sub {
    font-family: var(--gc-font-body);
    font-weight: 600;
    font-size: var(--gc-text-sm);
    line-height: 1.2;
}
.sc-wx-band__go {
    min-height: 44px;
    padding: 0 var(--gc-space-4);
    font-family: var(--gc-font-display);
    font-weight: 800;
    font-size: var(--gc-text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gc-text-on-overlay);
    background: var(--gc-overlay);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.sc-wx-band__go:focus-visible { outline: 2px solid var(--gc-text-on-accent); outline-offset: 2px; }

@media (max-width: 560px) {
    .sc-wx-band { grid-template-columns: auto 1fr; }
    .sc-wx-band__go { grid-column: 1 / -1; width: 100%; }
}