/* ── Airport Operations board ─────────────────────────────────────────────
   Two palettes, chosen by data-theme on <html> and remembered in localStorage.

   DAY is the one the ASOS/tower boards this page copies actually use: a pale blue field, white
   panels, navy labels, and cream value boxes with a thin border, so the numbers read as the
   instrument readouts they are. NIGHT is the same layout for a dim room.

   Every color on the page — including the SVG rose, the runways and the trend — comes from these
   custom properties, so switching themes restyles what is already drawn and redraws nothing. */
:root,
:root[data-theme="night"] {
  --bg: #0e1116;
  --panel: #171b22;
  --panel-2: #10141a;        /* value boxes / inset surfaces */
  --line: #2b323d;
  --ink: #dfe6ef;            /* primary text */
  --ink-2: #8e9bab;          /* labels, secondary */
  --accent: #6fb6ff;         /* headings, the "blue" of the reference */
  --value: #ffe08a;          /* the readouts themselves */
  --good: #5ad15a;
  --warn: #ffa23e;
  --bad: #ff6b6b;

  --rose-face: #11161d;      /* inside of the compass */
  --rose-ring: #39414e;
  --tick: #4a5464;
  --tick-major: #93a2b5;
  --rose-lbl: #93a2b5;
  --rose-lbl-card: #cfe0f5;

  --rwy-edge: #4c535d;
  --rwy-pave: #8f98a3;
  --rwy-center: #e9edf2;
  --rwy-id: #f2f6fb;
  --halo: #0b0e13;           /* outline behind text drawn over anything */

  --wind-cur: #46d246;
  --wind-prev: #2c7a3f;
  --wind-lbl: #f2f6fb;

  --t-wind: #ffe08a;
  --t-gust: #ffa23e;
  --t-temp: #6fb6ff;
  --t-axis: #2b323d;

  --shadow: none;
}

:root[data-theme="day"] {
  --bg: #b9cde1;             /* the pale blue field of the reference display */
  --panel: #f4f7fb;
  --panel-2: #fffde8;        /* cream readout boxes */
  --line: #8fa6bd;
  --ink: #15233a;
  --ink-2: #41566f;
  --accent: #0b4f9c;
  --value: #10233f;
  --good: #197a2b;
  --warn: #a35a00;
  --bad: #b3261e;

  --rose-face: #ffffff;
  --rose-ring: #6f8aa6;
  --tick: #8fa6bd;
  --tick-major: #15233a;
  --rose-lbl: #41566f;
  --rose-lbl-card: #0b4f9c;

  --rwy-edge: #5d6b7a;
  --rwy-pave: #93a3b4;
  --rwy-center: #ffffff;
  --rwy-id: #10233f;
  --halo: #ffffff;

  --wind-cur: #2e9e3f;
  --wind-prev: #86bf8e;
  --wind-lbl: #10233f;

  --t-wind: #b07c00;
  --t-gust: #a35a00;
  --t-temp: #0b4f9c;
  --t-axis: #8fa6bd;

  --shadow: 0 1px 2px rgba(21, 35, 58, .18);
}

html, body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Consolas', ui-monospace, monospace; font-size: 13px;
}
.wrap { max-width: 1500px; margin: 0 auto; padding: 14px 16px 40px; }
.dim { color: var(--ink-2); }

/* ── picker ── */
.picker { max-width: 620px; margin: 8vh auto; text-align: center; }
.picker h1 { color: var(--accent); font-size: 26px; letter-spacing: 3px; margin-bottom: 12px; }
.lede { color: var(--ink-2); line-height: 1.6; margin-bottom: 22px; text-align: left; }
.pick-form { display: flex; gap: 8px; justify-content: center; }
.pick-form input {
  background: var(--panel-2); color: var(--value); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 14px; font: inherit; font-size: 20px; letter-spacing: 3px; width: 160px;
  text-align: center; text-transform: uppercase; box-shadow: var(--shadow);
}
.pick-form input:focus { outline: none; border-color: var(--accent); }
.pick-form button {
  background: var(--panel); color: var(--accent); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 18px; font: inherit; cursor: pointer; letter-spacing: 2px; box-shadow: var(--shadow);
}
.pick-form button:hover { border-color: var(--accent); }
.quick { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.quick a {
  color: var(--ink-2); text-decoration: none; border: 1px solid var(--line); border-radius: 14px;
  padding: 3px 11px; font-size: 12px; background: var(--panel);
}
.quick a:hover { color: var(--accent); border-color: var(--accent); }

/* ── header ── */
/* /shared/frame.css styles the bare <header> dark with a 100px left pad for the floating HOME
   button. Keep the pad, drop the background — the board supplies its own palette. */
header.bhead { background: transparent; border-bottom: 1px solid var(--line); padding: 10px 18px 10px 100px; }
.bhead {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.ident { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.ident .id { color: var(--accent); font-size: 32px; letter-spacing: 3px; }
.ident .name { font-size: 15px; color: var(--ink); }
.ident .sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.clocks { display: flex; align-items: center; gap: 14px; }
.clk { text-align: right; }
.clk b { display: block; color: var(--value); font-size: 20px; letter-spacing: 1px; }
.clk span { font-size: 10px; color: var(--ink-2); letter-spacing: 1px; }
.cat {
  font-size: 13px; letter-spacing: 2px; padding: 4px 10px; border: 1px solid var(--line);
  border-radius: 4px; color: var(--ink-2); background: var(--panel);
}
.cat.VFR { color: var(--good); border-color: var(--good); }
.cat.MVFR { color: var(--accent); border-color: var(--accent); }
.cat.IFR { color: var(--bad); border-color: var(--bad); }
.cat.LIFR { color: #b23ab2; border-color: #b23ab2; }
#themeBtn {
  background: var(--panel); color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 5px 10px; font: inherit; font-size: 11px; letter-spacing: 1.5px; cursor: pointer;
  white-space: nowrap; box-shadow: var(--shadow);
}
#themeBtn:hover { color: var(--accent); border-color: var(--accent); }

/* ── layout ── */
.grid { display: grid; grid-template-columns: 240px minmax(380px, 1fr) 340px; gap: 14px; align-items: start; }
.col { min-width: 0; }

/* ── readouts ── */
.readouts { display: grid; grid-template-columns: 1fr; gap: 7px; }
.field {
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px; padding: 7px 10px;
  box-shadow: var(--shadow);
}
.field label { display: block; font-size: 10px; letter-spacing: 1.5px; color: var(--ink-2); margin-bottom: 3px; }
.field .v {
  color: var(--value); font-size: 21px; letter-spacing: 1px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px;
}
.field .v.sm {
  font-size: 12px; line-height: 1.45; color: var(--ink); letter-spacing: 0; word-break: break-word;
}
.field.wind .v { font-size: 25px; }

/* ── rose ── */
.rose-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px;
  display: flex; justify-content: center; box-shadow: var(--shadow);
}
/* Square, so width alone would push the bottom of the compass below the fold on a wide screen. */
#rose { width: 100%; max-width: min(100%, 72vh); height: auto; display: block; }
.rose-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--ink-2); }
.rose-legend i.k { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 5px; border-radius: 2px; }
i.k.cur { background: var(--wind-cur); }
i.k.prev { background: var(--wind-prev); }
i.k.rwy { background: var(--rwy-pave); }
i.k.spd { background: var(--t-wind); }
i.k.gust { background: var(--t-gust); }
i.k.tmp { background: var(--t-temp); }

/* ── SVG: rose ── */
#rose .rose-face { fill: var(--rose-face); stroke: none; }
#rose .rose-ring { fill: none; stroke: var(--rose-ring); stroke-width: 1.5; }
#rose .rose-ring.inner { stroke-width: 1; opacity: .6; }
#rose .tick { stroke: var(--tick); stroke-width: 1; }
#rose .tick.major { stroke: var(--tick-major); stroke-width: 2; }
#rose text { font-family: 'Consolas', ui-monospace, monospace; }
#rose .rose-lbl { fill: var(--rose-lbl); }
#rose .rose-lbl.cardinal { fill: var(--rose-lbl-card); }
#rose .rwy-edge { stroke: var(--rwy-edge); }
#rose .rwy-pave { stroke: var(--rwy-pave); }
#rose .rwy-center { stroke: var(--rwy-center); opacity: .85; }
#rose .rwy-id { fill: var(--rwy-id); stroke: var(--halo); }
#rose .wind-cur .arrow-stem { stroke: var(--wind-cur); }
#rose .wind-cur .arrow-head { fill: var(--wind-cur); }
#rose .wind-prev .arrow-stem { stroke: var(--wind-prev); }
#rose .wind-prev .arrow-head { fill: var(--wind-prev); }
#rose .wind-lbl { fill: var(--wind-lbl); stroke: var(--halo); }

/* ── side panels ── */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px;
  margin-bottom: 12px; box-shadow: var(--shadow);
}
.panel h3 { font-size: 11px; letter-spacing: 2px; color: var(--accent); margin-bottom: 8px; font-weight: normal; }
.rwy-list { display: flex; flex-direction: column; gap: 7px; }
.rwy {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 8px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 6px;
}
.rwy:first-child { border-top: 0; padding-top: 0; }
.rwy .rid { color: var(--value); font-size: 17px; letter-spacing: 1px; }
.rwy .meta { font-size: 10px; color: var(--ink-2); }
.rwy .comp { text-align: right; font-size: 12px; white-space: nowrap; }
.rwy .comp .h { color: var(--good); }
.rwy .comp .h.tail { color: var(--bad); }
.rwy .comp .x { color: var(--ink); }
.rwy .comp .x.strong { color: var(--warn); }
.rwy .comp .x.severe { color: var(--bad); }
.rwy.best { background: var(--panel-2); margin: 0 -6px; padding: 6px; border-radius: 4px; }
.trend { width: 100%; height: auto; display: block; }
.trend text { font-family: 'Consolas', ui-monospace, monospace; }
.trend .t-lbl { fill: var(--ink-2); }
.trend .t-axis { stroke: var(--t-axis); }
.trend .t-wind { fill: none; stroke: var(--t-wind); }
.trend .t-gust { fill: none; stroke: var(--t-gust); }
.trend .t-temp { fill: none; stroke: var(--t-temp); opacity: .9; }
.trend-legend { display: flex; gap: 12px; font-size: 10px; color: var(--ink-2); margin-top: 4px; }

/* ── metar ── */
.metar {
  margin-top: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center; box-shadow: var(--shadow);
}
.metar .mlabel { color: var(--accent); font-size: 13px; letter-spacing: 2px; }
.metar .mtext { color: var(--ink); font-size: 12px; word-break: break-word; line-height: 1.5; }
.metar .mage { color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.note { margin-top: 8px; font-size: 11px; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 1150px) {
  .grid { grid-template-columns: 200px 1fr; }
  .side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 780px) {
  .grid { grid-template-columns: 1fr; }
  .readouts { grid-template-columns: 1fr 1fr; }
  .side { grid-template-columns: 1fr; }
  .ident .id { font-size: 26px; }
  .metar { grid-template-columns: 1fr; }
}