/**
 * assets/css/verification.css
 * Verification page (verification.html, core/verificationModule.js).
 *
 * The page carries the classes of the Airport Forecast page as well (daw-page), so daw.css supplies the
 * size knob, the colours, the run card, the segmented buttons, the board box, the notice, the detail header, the
 * narrative, the chart box and the chart text. Only what is specific to this page is here.
 */

.ver-page {
  --ver-ok:   var(--text-success, #4ade80);      /* tolerance band */
  --ver-miss: var(--daw-warn, #e2574c);           /* a variable below its target */
  --ver-fc:   #ffb454;                            /* forecast lines: bright amber, high contrast on the dark cards */
}

/* ---- board ---- */
.ver-bhead, .ver-row { display: grid; grid-template-columns: minmax(9.5em, 13em) repeat(var(--ver-n, 3), minmax(7em, 1fr)); gap: 0 1.2em; align-items: center;
  padding: 0.7em 0.9em; border-left: 0.3em solid transparent; }
.ver-bhead { color: var(--daw-muted); border-bottom: 1px solid var(--daw-line); }
.ver-bhead > span { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em; }
.ver-bhead > span small { display: block; text-transform: none; letter-spacing: 0; font-size: 1em; opacity: 0.85; }
.ver-row { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--daw-line); border-left: 0.3em solid transparent; cursor: pointer; }
.ver-row.miss { border-left-color: var(--ver-miss); }
.ver-row:hover:not(.ver-all), .ver-row:focus-visible:not(.ver-all) { background: rgba(2, 170, 252, 0.08); outline: none; }
.ver-row.ver-all { cursor: default; background: rgba(2, 170, 252, 0.05); }
#verRows > :last-child { border-bottom: 0; }
.ver-apt { display: flex; flex-direction: column; min-width: 0; }
.ver-icao { font-weight: 700; font-size: 1.3em; letter-spacing: 0.03em; }
.ver-nm { font-size: 0.95em; color: var(--daw-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ver-cell { display: flex; flex-direction: column; }
.ver-cell b { font-size: 1.35em; font-weight: 700; line-height: 1.2; }
.ver-cell small { color: var(--daw-muted); font-size: 0.82em; }
.ver-cell.miss b { color: var(--ver-miss); }
.ver-cell.na b { color: var(--daw-muted); }
.ver-cell .ver-vl { display: none; }

/* ---- detail ---- */
.ver-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 0.7em; margin: 0.4em 0 0.8em; }
.ver-vcard { background: var(--daw-panel); border: 1px solid var(--daw-line); border-top: 0.3em solid var(--daw-line); border-radius: 0.65em; padding: 0.7em 0.9em 0.8em; }
.ver-vcard.miss { border-top-color: var(--ver-miss); }
.ver-vh { font-weight: 600; }
.ver-vh small { color: var(--daw-muted); font-weight: 400; font-size: 0.82em; margin-left: 0.3em; }
.ver-pct { font-size: 2.1em; font-weight: 700; line-height: 1.15; margin: 0.1em 0; }
.ver-vcard.miss .ver-pct { color: var(--ver-miss); }
.ver-pct.na { color: var(--daw-muted); }
.ver-tgt { color: var(--daw-muted); font-size: 0.92em; }
.ver-chip { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.55em; border: 1px solid var(--daw-line); border-radius: 0.8em; font-size: 0.85em; color: var(--daw-ink); }
.ver-chip.miss { border-color: var(--ver-miss); color: var(--ver-miss); }
.ver-stats { display: grid; grid-template-columns: 1fr auto; gap: 0.15em 0.8em; margin: 0.6em 0 0; font-size: 0.92em; }
.ver-stats dt { color: var(--daw-muted); }
.ver-stats dd { margin: 0; text-align: right; font-family: var(--font-mono, monospace); }
.ver-split { margin-top: 0.6em; padding-top: 0.5em; border-top: 1px solid var(--daw-line); font-size: 0.88em; color: var(--daw-muted); }
.ver-split small { opacity: 0.85; }

@media (max-width: 860px) {
  .ver-bhead { display: none; }
  .ver-row { grid-template-columns: repeat(auto-fit, minmax(7em, 1fr)); gap: 0.4em 0.9em; }
  .ver-row .ver-apt { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 0.6em; }
  .ver-cell .ver-vl { display: block; }
}

/* day / case selector card: the forecast switch and the window buttons share one row, the Daily button follows (it wraps
   to the next line when the card is too narrow) */
.ver-page .ver-runmode { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 1.2em; }
.ver-page .daw-top > .daw-runcard { flex: 0 1 40em; }

/* forecast source switch (WRF model | TAF): gold, so it reads apart from the blue window buttons */
.ver-page { --ver-src: #f2b01e; }
.ver-page #verSource button[aria-pressed="true"] { background: var(--ver-src); color: #1b1f27; border-color: var(--ver-src); }
.ver-page #verSource button[aria-pressed="false"]:hover { color: var(--ver-src); }

/* dew point and humidity: a section of its own, apart from the ICAO scores (no colour for pass or fail) */

/* collapsible chart panels */
.daw-svg .vtog { cursor: pointer; }
.daw-svg .vtog:hover .ttl, .daw-svg .vtog:focus-visible .ttl { fill: var(--daw-accent, var(--daw-ink)); }
.daw-svg .vtog:focus { outline: none; }