/* ====================================================================
   WEATHER DASHBOARD (/weather) — v4.
   All Sky Camera sits on its own, always visible, and collapses to a
   single text line when the feed is unavailable. Below it, one shared
   "wall" grid holds every other widget/image; a 預報(forecast) /
   觀測(observation) toggle in the top ticker line just reorders the
   same tiles via [data-mode] + CSS `order` — every widget/iframe
   exists exactly once in the DOM, only its position changes.

   Every tile's caption is a solid header bar that sits ABOVE its
   image/iframe (never overlaps it). Every tile is portrait
   (aspect-ratio taller than wide) to match the CWA imagery's own
   proportions, except the meteogram widget (a horizontal timeline
   chart, not a photo - needs to stay wide/landscape to read, and per
   spec keeps its double-width "2br" size in both modes) and the
   All Sky Camera (a wide fisheye feed, landscape).

   Only base.css tokens/reset and the sidebar shell are shared with the
   rest of the app.
   ==================================================================== */

.wx-page {
    max-width: 1760px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==================== TOPBAR (slim, text-first) ==================== */
.wx-topbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 6px;
}

.wx-title-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.wx-eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--secondary-purple);
}

.wx-topbar-main h1 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}

.wx-ticker {
    margin-top: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 12px;
}

.wx-tick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.wx-tick svg {
    color: var(--text-faint);
    flex-shrink: 0;
}

.wx-tick b {
    font-weight: 600;
    color: var(--text-primary);
}

.wx-tick-sep {
    width: 1px;
    height: 12px;
    background: var(--border-hairline-strong);
}

.wx-tick-muted {
    color: var(--text-muted);
}

/* ==================== MODE TOGGLE (預報 / 觀測) ==================== */
.wx-mode-toggle {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border-hairline);
    gap: 2px;
}

.wx-mode-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 3px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.wx-mode-btn:hover {
    color: var(--text-primary);
}

.wx-mode-btn.active {
    background: var(--primary-gradient);
    color: #fff;
}

.wx-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wx-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-hairline);
    background: var(--surface-2);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.wx-btn:hover {
    background: var(--surface-3);
    color: var(--text-primary);
    border-color: var(--border-hairline-strong);
}

.wx-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==================== ALERT PILL ==================== */
.wx-alert-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(240, 184, 79, 0.14);
    border: 1px solid rgba(240, 184, 79, 0.4);
    color: #f0b84f;
    font-weight: 500;
    font-size: 0.78rem;
}

.wx-alert-pill.high-alert {
    background: rgba(239, 90, 90, 0.16);
    border-color: rgba(239, 90, 90, 0.45);
    color: #ff8a8a;
}

.wx-alert-icon {
    font-size: 1em;
}

/* ==================== PROGRESS ==================== */
.wx-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 140px;
}

.wx-progress-track {
    flex: 1;
    height: 4px;
    background: var(--surface-3);
    border-radius: 4px;
    overflow: hidden;
}

.wx-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-gradient);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.wx-progress-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 28px;
    text-align: right;
}

/* ==================== SHARED CAPTION BAR ====================
   A solid, non-overlapping header strip - used by both the all-sky
   section and every wall tile - so the label never sits on top of
   (and never obscures) the image/iframe beneath it. */
.wx-tile-caption-meta {
    font-weight: 400;
    letter-spacing: 0.3px;
    color: var(--text-faint);
}

.wx-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff5a5a;
    box-shadow: 0 0 6px #ff5a5a;
    animation: wx-live-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes wx-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ==================== ALL SKY CAMERA (own section, always visible) ==================== */
.wx-allsky {
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-sunken);
    border: 1px solid var(--border-hairline);
    transition: border-color 0.15s ease;
}

.wx-allsky:hover {
    border-color: var(--border-accent);
}

.wx-allsky-caption {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--text-primary);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-hairline);
}

.wx-allsky-media {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

.wx-allsky-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* Collapsed "unavailable" state — the whole section shrinks to a
   single slim text line instead of holding a big empty frame. */
.wx-allsky-offline {
    display: none;
}

#allsky-image.is-hidden {
    display: none;
}

.wx-allsky.is-offline {
    aspect-ratio: auto;
}

.wx-allsky.is-offline .wx-allsky-caption,
.wx-allsky.is-offline .wx-allsky-media {
    display: none;
}

.wx-allsky.is-offline .wx-allsky-offline {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ==================== TOGGLE WALL ====================
   Mobile-first single column - one tile per row, full width. Widens
   to a 12-column (720-1440px) then 8-column (>1440px) grid at larger
   breakpoints below. Mode only changes `order`. */
.wx-wall {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.wx-tile {
    grid-column: span 1;
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-sunken);
    border: 1px solid var(--border-hairline);
    transition: border-color 0.15s ease;
}

.t-meteogram {
    grid-column: span 1;
    aspect-ratio: 3 / 2;
    min-height: 700px;
}

/* The "three" widget has no autowidth param (unlike the other meteoblue
   embeds), so it doesn't reflow to a narrower box - it needs close to
   its native ~460px design width or its 4th day/hourly row clips off
   the edge. Give it the same double-width treatment as meteogram at
   720px+; aspect-ratio is its own (~4:5, close to the widget's native
   460x564) rather than matching row-mates exactly, since forcing it
   short would clip the bottom instead of the side. */
.t-threeday {
    grid-column: span 1;
    aspect-ratio: 4 / 5;
}

.wx-tile:hover {
    border-color: var(--border-accent);
}

.wx-tile-caption {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-secondary);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-hairline);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wx-tile-media {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
}

.wx-tile-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.wx-tile:hover .wx-tile-media img {
    transform: scale(1.035);
    filter: brightness(1.06);
}

.wx-tile-iframe {
    width: 100%;
    height: 100%;
    flex: 1;
    border: 0;
}

.wx-seeing-wrap {
    background: #fff;
}

.wx-seeing-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Mode ordering - every tile is the SAME size in both modes now (see
   the >=720px block below): one uniform width for map/seeing/all CWA
   tiles, double that for meteogram. Giving map/seeing the same width
   as everything else (instead of a narrower "featured" width) is what
   makes forecast mode's tiles tall enough - a narrower tile means a
   shorter tile once the portrait aspect-ratio is applied.
   Only `order` differs per mode, chosen so every row's spans add up to
   exactly 12 with no leftover gaps (see the math in the media query
   comment below). Because map+meteogram alone already sum to 12,
   "seeing" starts the next row rather than sharing a row with them -
   that's the trade-off for keeping every tile uniformly wide/tall. */
[data-mode="forecast"] .t-map { order: 1; }
[data-mode="forecast"] .t-meteogram { order: 2; }
[data-mode="forecast"] .t-seeing { order: 3; }
[data-mode="forecast"] .t-threeday { order: 4; }
[data-mode="forecast"] .t-rainradar { order: 5; }
[data-mode="forecast"] .t-radar { order: 6; }
[data-mode="forecast"] .t-cloudreal { order: 7; }
[data-mode="forecast"] .t-cloudir { order: 8; }
[data-mode="forecast"] .t-rainprec { order: 9; }
[data-mode="forecast"] .t-rainpred1 { order: 10; }
[data-mode="forecast"] .t-rainpred2 { order: 11; }

[data-mode="observation"] .t-rainradar { order: 1; }
[data-mode="observation"] .t-radar { order: 2; }
[data-mode="observation"] .t-cloudreal { order: 3; }
[data-mode="observation"] .t-cloudir { order: 4; }
[data-mode="observation"] .t-map { order: 5; }
[data-mode="observation"] .t-seeing { order: 6; }
[data-mode="observation"] .t-meteogram { order: 7; }
[data-mode="observation"] .t-rainprec { order: 8; }
[data-mode="observation"] .t-threeday { order: 9; }
[data-mode="observation"] .t-rainpred1 { order: 10; }
[data-mode="observation"] .t-rainpred2 { order: 11; }

/* 720px-1440px only: 12-column base, capped at 3 tiles per row, with
   a taller portrait ratio + a 500px height floor (narrow/medium
   screens need the extra help to not look cramped). Every tile spans
   4/12 (33%); meteogram and the three-day widget always span 8/12
   (double) in both modes - both need the extra width to render
   without clipping.
   With the order above, spans pack into clean rows with no gaps:
     forecast:    [map4 meteogram8] [seeing4 threeday8]
                  [rainradar4 radar4 cloudreal4] [cloudir4 rainprec4 rainpred1_4]
                  [rainpred2_4]
     observation: [rainradar4 radar4 cloudreal4] [cloudir4 map4 seeing4]
                  [meteogram8 rainprec4] [threeday8 rainpred1_4] [rainpred2_4] */
@media (min-width: 720px) and (max-width: 1440px) {
    .wx-wall {
        grid-template-columns: repeat(12, 1fr);
    }

    .wx-tile {
        grid-column: span 4;
        aspect-ratio: 3 / 5;
        min-height: 500px;
    }

    .t-meteogram {
        grid-column: span 8;
        aspect-ratio: 3 / 2;
        min-height: 500px;
    }

    .t-threeday {
        grid-column: span 8;
        aspect-ratio: 4 / 5;
    }
}

/* >1440px: back to the original 8-column base, 4 tiles per row, the
   default 3/4 portrait ratio and no height floor (plenty of width at
   this size to keep things tall without forcing it). Every tile spans
   2/8 (25%); meteogram and the three-day widget span 4/8 (double).
   Same order as above packs naturally with no gaps:
     forecast:    [map2 meteogram4 seeing2] [threeday4 rainradar2 radar2]
                  [cloudreal2 cloudir2 rainprec2 rainpred1_2] [rainpred2_2]
     observation: [rainradar2 radar2 cloudreal2 cloudir2] [map2 seeing2 meteogram4]
                  [rainprec2 threeday4 rainpred1_2] [rainpred2_2] */
@media (min-width: 1441px) {
    .wx-wall {
        grid-template-columns: repeat(8, 1fr);
    }

    .wx-tile {
        grid-column: span 2;
    }

    .t-meteogram {
        grid-column: span 4;
        min-height: 0;
    }

    .t-threeday {
        grid-column: span 4;
    }
}

/* ==================== SHARED CREDIT LINE ==================== */
.wx-fcredit {
    text-align: center;
}

.wx-fcredit a {
    color: var(--text-faint);
    text-decoration: none;
    font-size: 0.7em;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .wx-topbar {
        padding-left: 46px;
    }

    .wx-topbar-actions {
        width: 100%;
        justify-content: space-between;
    }
}