/**
 * assets/css/daw.css
 * Airport Forecast page (daw.html, core/dawModule.js).
 *
 * One knob sets the size of everything on the page: --daw-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.
 */

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

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

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

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

/* ---- run, mode, units ---- */
.daw-top { display: flex; flex-wrap: wrap; gap: 0.75em; margin-bottom: 0.9em; align-items: stretch; }
.daw-runcard { flex: 1 1 22em; }
.daw-unitcard { flex: 1 1 22em; display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; align-items: center; }
.daw-runmeta { margin-top: 0.5em; font-size: 0.9em; color: var(--daw-muted); }
.daw-runmeta span { color: var(--daw-accent); font-family: var(--font-mono, monospace); }
.daw-runmode { margin-top: 0.5em; }
.daw-page .daw-mode-btn { font-size: 0.95em; }
.daw-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(--daw-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; }
.daw-toggle-btn:hover { background: rgba(2,170,252,0.2); }
.daw-mode-btn.research { background: rgba(251,146,60,0.15); border-color: rgba(251,146,60,0.4); color: #fb923c; }
.daw-mode-btn.research:hover { background: rgba(251,146,60,0.25); }
.daw-unit { display: flex; align-items: center; gap: 0.5em; }
.daw-lbl, .daw-ctl { color: var(--daw-muted); font-size: 0.9em; }
.daw-ctl { display: inline-flex; align-items: center; gap: 0.5em; }
.daw-check { cursor: pointer; }

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

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

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

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

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