/* ==========================================================================
   Conditions and forecast (conditions.php), page rules only.
   The live board, readout, tags, ledgers and notices come from styles.css;
   this file adds the two-column "now" grid, the forecast columns app.js
   fills, the radar frame on the wall and the TAF line under the METAR.
   ========================================================================== */

/* 02 · the live board beside the radio and density-altitude boards. The right
   column is two boards stacked, so the grid must not stretch them to the left
   board's height. */
.now { align-items: start; }
.stack { display: grid; gap: 1.1rem; }
.raw--taf { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }

/* 03 · forecast: plain columns, day and night side by side, no cards.
   .notices sets display:grid, which would beat the browser's [hidden] rule,
   so the empty alerts list is hidden explicitly. */
.notices[hidden] { display: none; }
#alerts { margin-bottom: 1.1rem; }
.forecast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; border-top: var(--frame) solid var(--navy); }
@media (min-width: 720px) { .forecast { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fcast { padding: .9rem 0 1.1rem; border-bottom: 1px solid var(--line); }
.fcast__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; color: var(--paint); }
.fcast__temp { margin-top: .45rem; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--paint); }
.fcast__desc { margin-top: .5rem; font-size: .92rem; line-height: 1.35; color: var(--paint); text-wrap: pretty; }
.fcast__wind { margin-top: .35rem; font-family: var(--font-mono); font-size: .76rem; line-height: 1.4; color: var(--paint-soft); }
.fcast--night .fcast__name, .fcast--night .fcast__temp { color: var(--paint-soft); }
.fcast-note { grid-column: 1 / -1; padding: 1rem 0; font-size: .95rem; color: var(--paint-soft); }

/* 04 · the radar loop at its native 600px, framed white on the wall, beside
   the sun board. A GIF upscaled to the column would go soft, so the column
   is sized to the image. */
.picture { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .picture { grid-template-columns: minmax(0, 604px) minmax(0, 1fr); align-items: start; } }
.radar { margin: 0; }
.radar img { width: 100%; height: auto; aspect-ratio: 600 / 550; border: var(--frame) solid var(--board); background: var(--navy-deep); }
.radar figcaption { margin-top: .6rem; font-size: .88rem; line-height: 1.5; color: var(--on-navy-soft); max-width: 60ch; }

/* 05 · the stations ledger: distance on one line, true bearing beneath it.
   The station id is the row's link and the phone numbers in the radio board
   are the actions a pilot taps, so each gets a full-height hit area without
   moving the text. */
@media (min-width: 720px) { .near .r { white-space: nowrap; } }
.near td small { display: block; font-size: .76rem; color: var(--paint-soft); }
.radio .kv a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; }
.near th a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }