/* Flight category colors (FAA standard) */
:root {
    --fc-vfr:  hsl(120, 50%, 38%);
    --fc-mvfr: hsl(210, 65%, 45%);
    --fc-ifr:  hsl(5, 65%, 45%);
    --fc-lifr: hsl(295, 50%, 45%);
    --fc-unkn: var(--gray60);
}

.wx-page {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--md);
}

/* Top row: picker (left) + info card (right). 50/50 on wide screens. */
.wx-row-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--md);
    align-items: start;
}

/* Quick-info card */
.wx-info-section { margin-top: var(--em-sm); }
.wx-info-section:first-child { margin-top: 0; }
.wx-info-section-title {
    font-size: var(--xs);
    color: var(--gray50);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--em-x3s);
}
.wx-info-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--sm);
    padding: var(--em-x3s) 0;
    border-bottom: 1px solid var(--gray95);
}
.wx-info-row:last-child { border-bottom: 0; }
.wx-info-label { color: var(--gray40); }
.wx-info-val { font-variant-numeric: tabular-nums; }
.wx-info-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--em-md);
    font-size: var(--sm);
}

/* Bottom row: TAF (left) + Nearby stations (right) side-by-side on wide screens. */
.wx-row-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--md);
    align-items: start;
}
.wx-col-taf, .wx-col-nearby { min-width: 0; }

/* Collapse to single column on narrower screens. */
@media (max-width: 900px) {
    .wx-row-top, .wx-row-bottom {
        grid-template-columns: 1fr;
    }
}

/* Airport picker */
.wx-picker label {
    margin-top: 0;
}
.wx-picker input[type="text"] {
    width: 100%;
    font-family: var(--code);
    font-size: var(--md);
}
.wx-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--white);
    border: 1px solid var(--gray70);
    border-top: 0;
    max-height: 24em;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 var(--xs) 12px var(--gray80);
}
.wx-suggest-item {
    padding: var(--em-xxs) var(--em-sm);
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: var(--em-sm);
    border-bottom: 1px solid var(--gray90);
}
.wx-suggest-item:last-child { border-bottom: 0; }
.wx-suggest-item:hover,
.wx-suggest-item.active {
    background-color: var(--gray90);
}
.wx-suggest-id {
    font-family: var(--code);
    font-weight: 600;
    min-width: 5ch;
}
.wx-suggest-name { flex: 1; }
.wx-suggest-dist {
    color: var(--gray50);
    font-size: var(--sm);
    font-variant-numeric: tabular-nums;
}

/* Flight category badge */
.fc-badge {
    display: inline-block;
    padding: var(--em-x3s) var(--em-sm);
    border-radius: var(--x3s);
    font-size: var(--sm);
    font-weight: 600;
    color: white;
    letter-spacing: 0.04em;
    min-width: 4ch;
    text-align: center;
}
.fc-badge.fc-vfr  { background-color: var(--fc-vfr); }
.fc-badge.fc-mvfr { background-color: var(--fc-mvfr); }
.fc-badge.fc-ifr  { background-color: var(--fc-ifr); }
.fc-badge.fc-lifr { background-color: var(--fc-lifr); }
.fc-badge.fc-unkn { background-color: var(--fc-unkn); }

/* Status banner */
.wx-status {
    padding: var(--sm) var(--md);
    border-radius: var(--x3s);
    background-color: var(--gray90);
}
.wx-status.error {
    background-color: var(--alert-bg);
    color: var(--alert-fg);
}

/* Gridded forecast strip — two panes: fixed labels + horizontally scrolling data.
   Two panes share row heights via explicit grid-template-rows set inline. */
.wx-strip {
    display: flex;
    border-top: 1px solid var(--gray90);
    border-bottom: 1px solid var(--gray90);
    font-size: var(--sm);
    font-variant-numeric: tabular-nums;
}
.wx-strip-labels {
    flex: 0 0 7.5em;
    display: grid;
    background-color: var(--white);
    border-right: 1px solid var(--gray70);
    z-index: 2;
}
.wx-strip-scroll {
    overflow-x: auto;
    flex: 1 1 0;
    min-width: 0;
}
.wx-strip-data {
    display: grid;
    width: max-content;
}
.wx-row-label {
    padding: var(--em-x3s) var(--em-sm);
    color: var(--gray40);
    font-size: var(--xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 1.1;
}
.wx-cell {
    padding: var(--em-x3s) var(--em-x3s);
    text-align: center;
    border-right: 1px solid var(--gray95);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1.1;
}
.wx-cell-time-local {
    color: var(--gray10);
    font-weight: 500;
    border-bottom: 1px solid var(--gray90);
}
.wx-cell-time-z {
    color: var(--gray55);
    font-size: var(--xs);
    border-bottom: 1px solid var(--gray90);
}
.wx-cell.day-divider {
    border-left: 2px solid var(--gray70);
}
.wx-cell-fc {
    height: 0.5em;
    margin: 0 1px;
    border-right: 0;
    align-self: center;
    padding: 0;
}
.wx-cell-fc.fc-vfr  { background-color: var(--fc-vfr); }
.wx-cell-fc.fc-mvfr { background-color: var(--fc-mvfr); }
.wx-cell-fc.fc-ifr  { background-color: var(--fc-ifr); }
.wx-cell-fc.fc-lifr { background-color: var(--fc-lifr); }
.wx-cell-fc.fc-unkn { background-color: var(--gray80); }

/* Cloud cover pie */
.wx-cloud-pie {
    flex: 0 0 auto;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    background: conic-gradient(var(--gray35) 0 var(--pct, 0%), var(--gray85) var(--pct, 0%) 100%);
    border: 1px solid var(--gray70);
}
.wx-cloud-num {
    flex: 0 0 auto;
    font-size: var(--xs);
    color: var(--gray50);
    line-height: 1;
    margin-top: 1px;
}

/* Wind cell sub-style */
.wx-wind {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.wx-wind .gust { color: var(--alert-bg); font-size: var(--xs); }
.wx-wind .dir { color: var(--gray50); font-size: var(--xs); }

/* Precip color cue (light) */
.wx-cell-pop[data-pop="hi"]  { background-color: hsl(210, 70%, 88%); color: var(--gray10); }
.wx-cell-pop[data-pop="med"] { background-color: hsl(210, 70%, 94%); }

/* Cell value emphasis when below VFR mins */
.wx-cell.below-vfr { color: var(--alert-bg); font-weight: 600; }

/* Nearby stations grid */
.wx-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28ch, 1fr));
    gap: var(--md);
}
.wx-station {
    border: 1px solid var(--gray80);
    border-radius: var(--x3s);
    padding: var(--em-sm);
    background-color: var(--white);
}
.wx-station-head {
    display: flex;
    align-items: baseline;
    gap: var(--em-sm);
}
.wx-station-id {
    font-family: var(--code);
    font-weight: 600;
    font-size: var(--md);
}
.wx-station-name {
    color: var(--gray50);
    font-size: var(--sm);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wx-station-dist {
    color: var(--gray60);
    font-size: var(--xs);
    font-variant-numeric: tabular-nums;
}
.wx-raw {
    font-family: var(--code);
    font-size: var(--sm);
    background-color: var(--gray95);
    padding: var(--em-xxs) var(--em-sm);
    border-radius: var(--x3s);
    margin-top: var(--em-xs);
    overflow-x: auto;
    white-space: nowrap;
}
.wx-decoded {
    font-size: var(--sm);
    margin-top: var(--em-xs);
}
.wx-decoded dt {
    color: var(--gray50);
    font-size: var(--xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--em-xs);
}
.wx-decoded dd {
    margin-left: 0;
}

/* TAF time block (FM groups) */
.wx-taf-block {
    border-left: 3px solid var(--gray80);
    padding: var(--em-xs) var(--em-sm);
    margin-top: var(--em-xs);
}
.wx-taf-block .when {
    font-size: var(--sm);
    color: var(--gray40);
}
.wx-taf-block .when .z { color: var(--gray60); margin-left: var(--em-xs); }
.wx-taf-block.fc-vfr  { border-left-color: var(--fc-vfr); }
.wx-taf-block.fc-mvfr { border-left-color: var(--fc-mvfr); }
.wx-taf-block.fc-ifr  { border-left-color: var(--fc-ifr); }
.wx-taf-block.fc-lifr { border-left-color: var(--fc-lifr); }

/* Toggle for raw view */
.raw-toggle {
    margin-top: var(--em-xs);
    font-size: var(--xs);
    color: var(--gray50);
    cursor: pointer;
    user-select: none;
}
.raw-toggle:hover { color: var(--gray30); }

/* Hazards */
.hazard {
    padding: var(--em-sm);
    border-left: 4px solid var(--alert-bg);
    background-color: hsl(5, 50%, 96%);
    margin-top: var(--em-xs);
    font-size: var(--sm);
}
.hazard .hazard-head {
    font-weight: 600;
    margin-bottom: var(--em-xxs);
}

/* Geolocation button tweaks */
#geo-btn { display: inline-flex; align-items: center; gap: var(--em-xs); }
#geo-btn svg { vertical-align: middle; }

/* Mobile niceties */
@media (max-width: 60ch) {
    .wx-strip-grid > .wx-row-label { min-width: 5em; font-size: 0.6rem; }
    .wx-strip-grid { grid-auto-columns: 3em; }
}