/* METAR form panels: Date, Weather, RVR, Clouds, Temp/QNH, Trend/RMK (one colour theme each) */
.p-date{--g:#274690;--pb:#fff;--pl:#dbe4f1}
.p-date .grid{grid-template-columns:2.6fr 2fr 1.9fr}
.p-rvr{--g:#1f3f8f;--pb:#eef3fc;--pl:#d3def0}
.p-rvr .grid{grid-template-columns:repeat(4,1fr)}
.pair{display:grid;grid-template-columns:78px 1fr;gap:8px}
.p-cld{--g:#1d6bf3;--pb:#eaf1fd;--pl:#d3e0f5}
.p-cld .grid{grid-template-columns:repeat(4,1fr)}
.p-cld .wide{grid-column:1/4}.p-cld .tot{grid-column:4}
.p-tmp{--g:#15803d;--pb:#e3f6e8;--pl:#bfe6c9}
.p-tmp .grid{grid-template-columns:repeat(4,1fr)}
.p-trd{--g:#d9480f;--pb:linear-gradient(90deg,#fdeadb,#fef6ee);--pl:#f6d7b8}
.p-trd .grid{grid-template-columns:1fr 1.15fr}
.pair2{display:grid;grid-template-columns:1.7fr 1fr;gap:12px}
.p-trd .cl label{color:#c2410c}
.p-trd .cell.bad .cl label{color:var(--bad)}
.p-wx{--g:#c2640a;--pb:linear-gradient(90deg,#fdeedd,#fff7ee);--pl:#f6d7b8}
.p-wx .grid{grid-template-columns:3.4fr 1.3fr 1.3fr 1.3fr}

/* Panel headings (Weather, RVR, Clouds, Temp / QNH, Trend / RMK): same label style as the Wind and Visibility cards */
#v-metar .panel .cl label{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
#v-metar .panel .inl .cl label{font-size:14px}
#v-metar .panel .cl{min-height:17px}
#v-metar .panel .er{font-size:12.5px}
#v-metar .ph span{font-size:20px}
/* input boxes of those panels: stronger border + white fill + readable placeholder */
#v-metar .panel .cv{border:1.5px solid color-mix(in srgb,var(--g) 45%,#8fa2bf);background:#fff;box-shadow:0 1px 3px rgba(15,40,90,.1)}
#v-metar .panel .cell:hover .cv{border-color:var(--g)}
#v-metar .panel .cv:focus-within{border-color:var(--g);box-shadow:0 0 0 3px color-mix(in srgb,var(--g) 25%,transparent)}
#v-metar .panel .cv input{font-weight:700;color:#0b1b3a}
#v-metar .panel .cv input::placeholder{color:#7d8ca6;font-weight:500}
#v-metar .panel .u{background:#e8eef8;color:#33466b;font-weight:700}
#v-metar .panel .cell.bad .cv{border-color:var(--bad);background:#fff1f3}
#v-metar .panel .cell.off .cv{border-color:#b9c5d8;background:repeating-linear-gradient(135deg,#eef1f6 0 7px,#e2e7ef 7px 14px)}
@media(max-height:800px){#v-metar .panel .cl label{font-size:13px}}