/**
 * assets/css/wxops_airport.css
 * Airport Forecast page (wxops_airport.html, core/wxopsAirportModule.js).
 *
 * One knob sets the size of everything on the page: --wxops-airport-font-size, just below. Every size in
 * this file is in em, so changing that one value scales the text and the layout together, and
 * the charts (drawn in real pixels from the page's font size) follow it too.
 *
 * Colours come from the site's tokens (variables.css) where they exist; the value after the
 * comma is only used if a token is missing.
 */

.wxops-airport-page {
  --wxops-airport-font-size: 16px;                         /* <- the size knob */

  --wxops-airport-bg:     var(--bg-surface, #0e1620);
  --wxops-airport-panel:  var(--bg-card, #152130);
  --wxops-airport-panel2: var(--bg-card-dark, #101a26);
  --wxops-airport-line:   var(--border-color, #2a3b4d);
  --wxops-airport-ink:    var(--text-primary, #e8eef4);
  --wxops-airport-muted:  var(--text-muted, #8da0b4);
  --wxops-airport-accent: var(--color-accent-primary, #02aafc);
  --wxops-airport-night:  rgba(0, 0, 0, 0.30);

  /* attention levels: watch and warning (normal conditions have no colour) */
  --wxops-airport-watch: #f2b53c; --wxops-airport-warn: #e2574c;
  /* chart lines */
  --wxops-airport-gust: #ff9d66; --wxops-airport-rain: #5ab0ff; --wxops-airport-t: #ff7a4d; --wxops-airport-td: #4aa8ff; --wxops-airport-wind: #6fb1ff; --wxops-airport-vis: #b49bff; --wxops-airport-cloud: #7d93ad; --wxops-airport-echo: #ffa133;

  font-size: var(--wxops-airport-font-size);
  line-height: 1.4;
  color: var(--wxops-airport-ink);
}
.wxops-airport-page [hidden] { display: none !important; }
.wxops-airport-page * { box-sizing: border-box; }
.wxops-airport-page button, .wxops-airport-page select, .wxops-airport-page input { font: inherit; color: inherit; }
.wxops-airport-page .select { font-size: 1em; }
.wxops-airport-page .input-group label { font-size: 0.95em; }

/* ---- run, mode, units ---- */
.wxops-airport-top { display: flex; flex-wrap: wrap; gap: 0.75em; margin-bottom: 0.9em; align-items: stretch; }
.wxops-airport-runcard { flex: 1 1 22em; }
.wxops-airport-unitcard { flex: 1 1 22em; display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; align-items: center; }
.wxops-airport-runmeta { margin-top: 0.5em; font-size: 0.9em; color: var(--wxops-airport-muted); }
.wxops-airport-runmeta span { color: var(--wxops-airport-accent); font-family: var(--font-mono, monospace); }
.wxops-airport-runmode { margin-top: 0.5em; }
.wxops-airport-page .wxops-mode-btn { font-size: 0.95em; }
.wxops-toggle-btn { display: inline-flex; align-items: center; gap: 0.3em; background: rgba(2,170,252,0.1); border: 1px solid rgba(2,170,252,0.3);
  border-radius: 0.4em; color: var(--wxops-airport-accent); font-family: var(--font-mono, monospace); font-weight: 600; padding: 0.3em 0.8em; cursor: pointer; white-space: nowrap; transition: background 0.15s ease; }
.wxops-toggle-btn:hover { background: rgba(2,170,252,0.2); }
.wxops-mode-btn.research { background: rgba(251,146,60,0.15); border-color: rgba(251,146,60,0.4); color: #fb923c; }
.wxops-mode-btn.research:hover { background: rgba(251,146,60,0.25); }
.wxops-airport-unit { display: flex; align-items: center; gap: 0.5em; }
.wxops-airport-lbl, .wxops-airport-ctl { color: var(--wxops-airport-muted); font-size: 0.9em; }
.wxops-airport-ctl { display: inline-flex; align-items: center; gap: 0.5em; }
.wxops-airport-check { cursor: pointer; }

.wxops-airport-seg { display: inline-flex; border: 1px solid var(--wxops-airport-line); border-radius: 0.5em; overflow: hidden; }
.wxops-airport-seg button { border: 0; background: transparent; padding: 0.3em 0.75em; border-right: 1px solid var(--wxops-airport-line); color: var(--wxops-airport-muted); font-size: 0.9em; cursor: pointer; }
.wxops-airport-seg button:last-child { border-right: 0; }
.wxops-airport-seg button:hover { background: rgba(2, 170, 252, 0.12); }
.wxops-airport-seg button[aria-pressed="true"] { background: var(--wxops-airport-accent); color: #00131f; font-weight: 600; }

.wxops-airport-btn { border: 1px solid var(--wxops-airport-line); background: var(--wxops-airport-panel); border-radius: 0.5em; padding: 0.3em 0.8em; cursor: pointer; font-size: 0.95em; }
.wxops-airport-btn:hover { border-color: var(--wxops-airport-accent); }
.wxops-airport-input { border: 1px solid var(--wxops-airport-line); background: var(--wxops-airport-panel2); border-radius: 0.5em; padding: 0.3em 0.7em; font-size: 0.95em; min-width: 13em; }

.wxops-airport-notice { margin: 0 0 0.9em; padding: 0.65em 0.9em; border: 1px solid rgba(251,191,36,0.5); background: rgba(251,191,36,0.10); color: #f5cf6b; border-radius: 0.6em; font-size: 0.92em; }

/* ---- board ---- */
.wxops-airport-toolbar { display: flex; flex-wrap: wrap; gap: 0.6em 1.2em; align-items: center; margin-bottom: 0.6em; }
.wxops-airport-summary { color: var(--wxops-airport-muted); font-size: 0.95em; margin: 0.2em 0 0.7em; }
.wxops-airport-summary b { color: var(--wxops-airport-ink); }
.wxops-airport-boardbox { background: var(--wxops-airport-panel); border: 1px solid var(--wxops-airport-line); border-radius: 0.8em; overflow: hidden; }
.wxops-airport-bhead, .wxops-airport-row { display: grid; grid-template-columns: 4.6em minmax(9.5em, 13em) 1fr; gap: 0 1.2em; align-items: center; padding: 0.7em 0.9em; border-left: 0.3em solid transparent; }
.wxops-airport-bhead { color: var(--wxops-airport-muted); border-bottom: 1px solid var(--wxops-airport-line); }
.wxops-airport-bhead > span { font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em; }
.wxops-airport-row { width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--wxops-airport-line); border-left: 0.3em solid transparent; cursor: pointer; }
.wxops-airport-row.lvl1 { border-left-color: var(--wxops-airport-watch); }
.wxops-airport-row.lvl2 { border-left-color: var(--wxops-airport-warn); }
#wxopsAirportRows > :last-child { border-bottom: 0; }
.wxops-airport-row:hover, .wxops-airport-row:focus-visible { background: rgba(2, 170, 252, 0.08); outline: none; }
.wxops-airport-ico { display: block; width: 3em; height: 3em; }
.wxops-airport-row .wxops-airport-ico { width: 4em; height: 4em; }
.wxops-airport-ico img, .wxops-airport-ico svg { width: 100%; height: 100%; display: block; }
.wxops-airport-apt { display: flex; flex-direction: column; min-width: 0; }
.wxops-airport-icao { font-weight: 700; font-size: 1.3em; letter-spacing: 0.03em; }
.wxops-airport-nm { font-size: 0.95em; color: var(--wxops-airport-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxops-airport-out { font-size: 1.15em; line-height: 1.4; }
.wxops-airport-row.lvl0 .wxops-airport-out { color: var(--wxops-airport-muted); }
.wxops-airport-rule { padding: 0.7em 0.9em; font-size: 0.85em; color: var(--wxops-airport-muted); border-top: 1px solid var(--wxops-airport-line); }
.wxops-airport-rule b { color: var(--wxops-airport-ink); }
.wxops-airport-empty { padding: 1em; color: var(--wxops-airport-muted); }
/* the arrow sits on the same line as the speed (the site's reset makes svg a block) */
.wxops-airport-page .wxops-airport-warr { display: inline-block; width: 1em; height: 1em; margin-right: 0.25em; vertical-align: -0.15em; fill: currentColor; }

/* ---- detail ---- */
.wxops-airport-dhead { display: flex; flex-wrap: wrap; gap: 0.6em 1.2em; align-items: center; margin-bottom: 0.7em; }
.wxops-airport-dhead h2 { margin: 0; font-size: 1.45em; }
.wxops-airport-subline { color: var(--wxops-airport-muted); font-size: 0.92em; }
.wxops-airport-push { margin-left: auto; display: flex; gap: 0.4em; }
.wxops-airport-narr { margin: 0 0 0.7em; padding: 0.7em 1em; background: var(--wxops-airport-panel); border: 1px solid var(--wxops-airport-line); border-left: 0.3em solid var(--wxops-airport-accent);
  border-radius: 0.6em; font-size: 1.05em; line-height: 1.5; }
.wxops-airport-note { font-size: 0.88em; color: var(--wxops-airport-muted); margin-bottom: 0.4em; }
.wxops-airport-note.warn { color: #f0a24a; }
.wxops-airport-cards { display: flex; gap: 0.6em; overflow-x: auto; padding: 0.3em 0.15em 0.8em; scroll-snap-type: x proximity; }
.wxops-airport-card { flex: 0 0 9.6em; display: flex; flex-direction: column; align-items: center; background: var(--wxops-airport-panel); border: 1px solid var(--wxops-airport-line); border-top: 0.3em solid var(--wxops-airport-line);
  border-radius: 0.65em; padding: 0.5em 0.4em 0.65em; text-align: center; scroll-snap-align: start; cursor: pointer; }
.wxops-airport-card.l1 { border-top-color: var(--wxops-airport-watch); } .wxops-airport-card.l2 { border-top-color: var(--wxops-airport-warn); }
.wxops-airport-card[aria-current="true"] { outline: 2px solid var(--wxops-airport-accent); }
.wxops-airport-card .d, .wxops-airport-card .l { font-size: 0.8em; color: var(--wxops-airport-muted); }
.wxops-airport-card .h { font-weight: 700; font-size: 1.1em; }
.wxops-airport-card .wxops-airport-ico { width: 4em; height: 4em; margin: 0.2em 0 0; }
.wxops-airport-card .c { font-size: 0.88em; min-height: 2.4em; line-height: 1.2; margin: 0.15em 0 0.25em; display: block; }
.wxops-airport-card .t { font-size: 1.35em; font-weight: 700; }
.wxops-airport-card .t small { font-size: 0.6em; font-weight: 400; color: var(--wxops-airport-muted); }
.wxops-airport-card .w, .wxops-airport-card .v, .wxops-airport-card .g { font-size: 0.92em; margin-top: 0.15em; }
.wxops-airport-card .g { color: var(--wxops-airport-gust); font-weight: 600; }
.wxops-airport-chartbox { background: var(--wxops-airport-panel); border: 1px solid var(--wxops-airport-line); border-radius: 0.8em; padding: 0.7em 0.9em 0.4em; margin-top: 0.3em; }
.wxops-airport-readout { margin: 0 0 0.3em 0.2em; min-height: 1.4em; font-size: 0.95em; }
.wxops-airport-charts { width: 100%; overflow: hidden; }
.wxops-airport-svg { display: block; touch-action: pan-y; }
.wxops-airport-svg text { fill: var(--wxops-airport-muted); font-family: inherit; }
.wxops-airport-svg .ttl { fill: var(--wxops-airport-ink); font-weight: 600; }
.wxops-airport-svg .frame { fill: none; stroke: var(--wxops-airport-line); }
.wxops-airport-svg .grid { stroke: var(--wxops-airport-line); stroke-dasharray: 2 5; }
.wxops-airport-svg .night { fill: var(--wxops-airport-night); }
.wxops-airport-svg .tick { stroke: var(--wxops-airport-muted); }
.wxops-airport-svg .xh { stroke: var(--wxops-airport-ink); opacity: 0.6; stroke-width: 1; }
.wxops-airport-foot { margin-top: 0.9em; font-size: 0.85em; color: var(--wxops-airport-muted); }

@media (max-width: 860px) {
  .wxops-airport-bhead { display: none; }
  .wxops-airport-row { grid-template-columns: 4em 1fr; gap: 0.4em 0.9em; }
  .wxops-airport-row .wxops-airport-out { grid-column: 1 / -1; }
  }