/* css/settings-stations.css — Settings popup, multi-station grid, landing page, alert log
   ms20: split from the old single style.css. Load ORDER in index.html matters (cascade). */
/* ══════════════ SETTINGS POPUP ══════════════ */
#settings-btn.custom { position:relative; }
#settings-btn.custom::after {
  content:''; position:absolute; top:-3px; right:-3px; width:8px; height:8px;
  border-radius:50%; background:#ffb300; box-shadow:0 0 6px #ffb300;
}
.set-box { max-width:520px; padding:16px 18px 18px; }
.set-body { overflow-y:auto; padding-right:2px; }
.set-sec {
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:11px; letter-spacing:1.5px;
  padding:6px 10px; margin:14px 0 6px; border-left:4px solid; border-radius:4px;
}
.set-sec:first-child { margin-top:0; }
.sec-disp  { color:#00b0ff; border-color:#00b0ff; background:rgba(0,176,255,0.10); }
.sec-alert { color:#ffb300; border-color:#ffb300; background:rgba(255,179,0,0.10); }
.sec-lim   { color:#ff5252; border-color:#ff5252; background:rgba(255,82,82,0.10); }
.sec-about { color:#00e676; border-color:#00e676; background:rgba(0,230,118,0.10); }
.set-row {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px; border-bottom:1px solid var(--border);
}
.set-txt b { display:block; font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:var(--val-white); }
.set-txt small { display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:11px; color:var(--sub); margin-top:1px; }
.sw { position:relative; width:44px; height:24px; flex-shrink:0; }
.sw input { opacity:0; width:0; height:0; }
.sw span { position:absolute; inset:0; background:#546e7a; border-radius:24px; cursor:pointer; transition:background 0.2s; }
.sw span::before {
  content:''; position:absolute; width:18px; height:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:transform 0.2s;
}
.sw input:checked + span { background:#00c853; }
.sw input:checked + span::before { transform:translateX(20px); }
.num-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.num-wrap em { font-style:normal; font-family:'Inter',sans-serif; font-weight:600; font-size:12px; color:var(--sub); width:18px; }
.set-num {
  width:78px; padding:5px 8px; text-align:right;
  font-family:'Inter',sans-serif; font-weight:700; font-size:15px;
  background:rgba(127,127,127,0.12); color:var(--val-white);
  border:1.5px solid var(--modal-border); border-radius:6px;
}
.set-num:focus { outline:none; border-color:#00b0ff; }
.set-num.modified { border-color:#ffb300; color:#ffb300; }
.set-status { font-family:'Inter',sans-serif; font-weight:600; font-size:11px; padding:4px 10px; }
.st-ok { color:#00e676; } .st-warn { color:#ffb300; } .st-bad { color:#ff5252; } .st-off { color:var(--sub); }
.set-custom {
  display:none; margin:8px 10px 0; padding:6px 10px; border-radius:6px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:11px;
  color:#ffb300; background:rgba(255,179,0,0.12); border:1px solid #ffb300;
}
.set-actions { display:flex; flex-wrap:wrap; gap:8px; padding:10px 10px 0; }
.set-btn {
  font-family:'Inter',sans-serif; font-weight:700; font-size:12px; cursor:pointer;
  padding:7px 12px; border-radius:8px; border:1px solid; background:transparent;
}
.b-test     { color:#00b0ff; border-color:#00b0ff; background:rgba(0,176,255,0.10); }
.b-reset    { color:#ffb300; border-color:#ffb300; background:rgba(255,179,0,0.10); }
.b-resetall { color:#ff5252; border-color:#ff5252; background:rgba(255,82,82,0.10); }
.set-btn:hover { filter:brightness(1.25); }
.set-about {
  font-family:'Inter',sans-serif; font-weight:500; font-size:12px; line-height:1.5;
  color:var(--val-white); padding:8px 10px;
}
.ab-warn { font-family:'Orbitron',sans-serif; font-weight:700; font-size:12px; color:#ffb300; margin-bottom:4px; letter-spacing:1px; }
.ab-meta { margin-top:8px; font-size:10px; color:var(--sub); }

/* Fonts: fixed-width digits so live values don't jitter on update */
.wval, .dcv, .rv, #clock, .stat span, .set-num { font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

@media print { #settingsModal { display:none !important; } }


/* ══════════════ SETTINGS POPUP: horizontal layout (matches Flight popup) ══════════════ */
#settingsModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#settingsModal.active { display:flex; }
#settingsBox {
  background:#0d1f35; border:2px solid #1e4a7a; border-radius:16px;
  width:88vw; max-width:1100px; max-height:84vh;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  overflow:hidden; display:flex; flex-direction:column;
}
body:not(.dark) #settingsBox { background:#ffffff; border-color:#b0c4de; }
#settings-header {
  background:linear-gradient(135deg,#0d47a1 0%,#1565c0 50%,#0288d1 100%);
  padding:14px 20px 12px; display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0; border-bottom:2px solid rgba(0,229,255,0.3);
}
.set-hdr-left { display:flex; flex-direction:column; gap:3px; min-width:0; }
.set-title { font-family:'Orbitron',sans-serif; color:#fff; font-size:clamp(15px,2vw,20px); font-weight:900; letter-spacing:0.5px; }
.set-subtitle { font-family:'Inter',sans-serif; color:rgba(255,255,255,0.9); font-size:clamp(11px,1.15vw,15px); font-weight:700; }
.set-close {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-size:22px; cursor:pointer; border-radius:8px;
  padding:2px 10px; line-height:1; transition:all 0.2s; flex-shrink:0;
}
.set-close:hover { background:rgba(255,255,255,0.3); }
#settingsContent { flex:1; min-height:0; overflow-y:auto; padding:16px 20px; font-family:'Inter',sans-serif; }
.set-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.set-card {
  border:1px solid var(--modal-border); border-radius:12px; padding:10px;
  background:rgba(127,127,127,0.06); display:flex; flex-direction:column; min-width:0;
}
.set-card-wide { grid-column:1 / -1; }
.set-card .set-sec { margin:0 0 6px; }
.set-card .set-row:last-of-type { border-bottom:none; }
.set-footer { display:flex; justify-content:flex-end; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
@media (max-width:900px) { .set-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) {
  #settingsModal { padding:8px; align-items:stretch; }
  #settingsBox { width:100%; max-height:none; height:100%; max-width:none; border-radius:12px; }
  #settingsContent { padding:10px 12px; }
  .set-grid { grid-template-columns:1fr; gap:10px; }
}

#snapshotContent:has(.wr-paper) { padding:8px 8px; }

/* ══════════════════════════════════════════
   VOGA WEATHER REPORT (24h · 4 × 6-hour blocks)
   ══════════════════════════════════════════ */
.wr-paper {
  background:#fff; color:#1d2433; border-radius:8px; overflow:hidden;
  font-family:'Inter',Arial,sans-serif; font-size:11px; line-height:1.25;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.wr-paper * { box-sizing:border-box; }
.wr-head {
  background:#0b2545; color:#fff; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.wr-title { font-family:'Orbitron',sans-serif; font-size:19px; font-weight:900; letter-spacing:1px; }
.wr-sub   { color:#c9d6ea; font-size:11px; margin-top:3px; }
.wr-headr { text-align:right; }
.wr-gen   { font-weight:800; font-size:12.5px; }
.wr-gen span { font-weight:500; color:#c9d6ea; }
.wr-per   { color:#c9d6ea; font-size:11px; margin-top:3px; }
.wr-overview { padding:8px 8px 2px; }
.wr-legend { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:4px; color:#7c869a; font-size:9.5px; }
.wr-legend i, .wr-lgd i { display:inline-block; width:9px; height:9px; margin-right:5px; vertical-align:-1px; border-radius:1px; }
.wr-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px 8px 8px; }
@media (max-width:640px) { .wr-grid { grid-template-columns:1fr; } }

.wr-block { border:1.6px solid #2e9e5b; border-radius:8px; overflow:hidden; background:#fff; }
.wr-block.wr-sev1 { border-color:#e59a00; }
.wr-block.wr-sev2 { border-color:#d64045; }
.wr-bhead { background:#2e9e5b; color:#fff; padding:7px 12px; display:flex; justify-content:space-between; align-items:center; }
.wr-sev1 .wr-bhead { background:#e59a00; }
.wr-sev2 .wr-bhead { background:#d64045; }
.wr-btime b { display:block; font-size:16px; font-weight:800; letter-spacing:.3px; }
.wr-btime small { display:block; font-size:9px; opacity:.92; margin-top:1px; }
.wr-sevchip { background:#fff; color:#2e9e5b; font-weight:800; font-size:11px; padding:4px 14px; border-radius:6px; }
.wr-sev1 .wr-sevchip { color:#c27d00; }
.wr-sev2 .wr-sevchip { color:#d64045; }

.wr-wxline { display:flex; align-items:center; gap:8px; background:#f4f6fa; margin:6px 6px 0; padding:4px 8px; border-radius:3px; min-height:24px; }
.wr-wxlbl { font-weight:800; color:#7c869a; font-size:9.5px; }
.wr-chips { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.wr-chip-wx { color:#fff; font-weight:800; font-size:9px; padding:2px 8px; border-radius:8px; white-space:nowrap; }
.wr-nil { font-size:10px; color:#1d2433; }
.wr-cnt { color:#7c869a; font-size:9px; white-space:nowrap; }

.wr-lgd { display:flex; justify-content:flex-end; gap:6px; padding:5px 12px 0; font-size:9.5px; color:#1d2433; }
.wr-lgd i { width:14px; height:3px; margin:0 4px 0 6px; vertical-align:middle; }
.wr-graphs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0 6px; }
.wr-gt { font-weight:800; font-size:9.5px; color:#0b2545; padding:2px 2px 0 4px; }

.wr-t { width:calc(100% - 12px); margin:6px 6px 0; border-collapse:collapse; table-layout:fixed; border:1px solid #cfd6e2; }
.wr-t2 { margin-bottom:8px; }
.wr-t th, .wr-t td { border:1px solid #e1e6ef; }               /* light grid lines */
.wr-t th { font-size:9px; font-weight:800; text-align:center; padding:4px 2px; color:#fff; background:#0b2545; border-color:rgba(255,255,255,.28); }
.wr-t th.wr-th0, .wr-t th.wr-thA { text-align:left; padding-left:6px; width:31%; }
.wr-t th.wr-th28 { background:#1f6fb2; }
.wr-t th.wr-th10 { background:#7b4fb0; }
.wr-t th.wr-thA  { background:#00796b; }
.wr-t2 th { background:#00796b; }
.wr-t tr.wr-sh th { background:#e6ebf3; color:#7c869a; font-size:8.5px; padding:2px; border-color:#d3dae6; }
.wr-t td { padding:4px 2px; text-align:center; }
.wr-t tbody tr:nth-child(odd) td { background:#f6f8fb; }
.wr-t td.wr-l { text-align:left; padding-left:6px; font-size:9.5px; color:#1d2433; }
.wr-t td.wr-v { font-weight:800; font-size:11.5px; color:#1d2433; }
.wr-t td.wr-v.wr-subtxt { font-weight:600; font-size:9.5px; color:#7c869a; }
.wr-t td.wr-red { color:#d64045; }
.wr-t td.wr-amb { color:#d98a00; }
/* strong divider between RWY 28 and RWY 10 columns (runway table only) */
.wr-t:not(.wr-t2) tbody td:nth-child(5),
.wr-t:not(.wr-t2) tr.wr-sh th:nth-child(5) { border-left:2.5px solid #4a5568; }
.wr-t:not(.wr-t2) thead tr:first-child th:nth-child(3) { border-left:2.5px solid #4a5568; }

.wr-foot { border-top:1px solid #e6eaf1; padding:6px 10px 8px; color:#5b6579; font-size:9px; }
.wr-foot-h { font-weight:800; color:#0b2545; font-size:9.5px; letter-spacing:.4px; margin-bottom:3px; }
.wr-foot ul { margin:0; padding-left:14px; }
.wr-foot li { margin:2px 0; }
.wr-foot-warn { color:#d64045; font-weight:700; margin-bottom:3px; }

@media print {
  html, body { background:#fff !important; }
  #snap-header { display:none !important; }
  .wr-paper { width:1000px; zoom:.755; border-radius:0; }
  .wr-block { break-inside:avoid; page-break-inside:avoid; }
  .wr-paper, .wr-paper * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #snapshotContent { padding:0 !important; }
  .snap-24h-section { margin-top:0 !important; }
}

/* report period picker (screen only) */
#snap-period-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 20px; flex-shrink:0;
  background:rgba(0,0,0,0.18); border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:'Inter',sans-serif; font-size:11px; color:#a9bdd6;
}
.wr-pb-lbl { font-weight:700; letter-spacing:.4px; text-transform:uppercase; font-size:10px; color:#7aaccf; }
.wr-pb-btn {
  font-family:inherit; font-size:11px; font-weight:700; padding:5px 12px; border-radius:7px; cursor:pointer;
  background:transparent; color:#cfe0f5; border:1px solid rgba(255,255,255,0.22);
}
.wr-pb-btn.active { background:#1f6fb2; border-color:#1f6fb2; color:#fff; }
.wr-pb-date { display:flex; align-items:center; gap:6px; }
.wr-pb-date input {
  font-family:inherit; font-size:11px; padding:4px 6px; border-radius:6px;
  background:#0d1f35; color:#e8f1fc; border:1px solid rgba(255,255,255,0.25); color-scheme:dark;
}
.wr-pb-hint { font-size:10px; color:#7f93ad; }
.wr-pb-hint.wr-hint-warn { color:#ffb454; }
.wr-future { border-color:#c8cfdb; }
.wr-future .wr-bhead { background:#9aa5b8; }
.wr-future .wr-sevchip { color:#7c869a; }
.wr-futurebody { padding:40px 12px; text-align:center; color:#7c869a; font-size:11px; }
@media print { #snap-period-bar { display:none !important; } }

/* ═══════════ AWOS MULTI-STATION (station-manager.js) ═══════════ */
/* admin theme tokens (follow body.dark, same switch as the full dashboard) */
:root{--sm-bg:#eef3f9;--sm-fg:#10243a;--sm-card:#ffffff;--sm-line:#b8cfe0;--sm-line2:#d3e1ee;--sm-input:#f4f8fc;--sm-muted:#5b7690;--sm-accent:#0077cc;--sm-pri:#1565c0;--sm-pri-fg:#ffffff;
  --g-bg:#ffffff;--g-cell:#ffffff;--g-val:#0f1f33;--g-sel:#f4f8fc}
body.dark{--sm-bg:#04090f;--sm-fg:#e6f1ff;--sm-card:#0b1a2b;--sm-line:#1d4f7a;--sm-line2:#12304a;--sm-input:#04090f;--sm-muted:#8aa4c0;--sm-accent:#00e5ff;--sm-pri:#0a5c8a;--sm-pri-fg:#e6f1ff;
  --g-bg:#07111c;--g-cell:#04090f;--g-val:#ffffff;--g-sel:#0b1a2b}
.sm-view{flex:1 1 auto;min-height:0;width:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;padding:2vh 2vw;background:var(--sm-bg);color:var(--sm-fg);font-family:Inter,system-ui,sans-serif}
.sm-view[hidden],#dashRoot[hidden]{display:none!important}
.sm-view.sm-top{justify-content:flex-start;align-items:stretch}
.sm-view h1{font-family:Orbitron,Inter,sans-serif;font-size:clamp(28px,4vw,72px);margin:0}.sm-view h1 span{color:var(--sm-accent)}
.sm-sub,.muted{color:var(--sm-muted)}.muted{font-size:clamp(11px,.9vw,18px)}
.sm-choices{display:flex;gap:2vw;flex-wrap:wrap;justify-content:center}
.sm-big{font-size:clamp(16px,1.8vw,36px);padding:2.2vh 3vw;border-radius:14px;border:1px solid var(--sm-line);background:var(--sm-card);color:var(--sm-fg);cursor:pointer}
.sm-big:hover{border-color:var(--sm-accent)}
.sm-card{width:min(92vw,520px);background:var(--sm-card);border:1px solid var(--sm-line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px}
.sm-card input,.sm-card select,.sm-pw input{padding:10px;border-radius:8px;border:1px solid var(--sm-line);background:var(--sm-input);color:var(--sm-fg);font-size:16px}
.sm-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.sm-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--sm-line);background:var(--sm-card);color:var(--sm-fg);cursor:pointer;font-size:clamp(12px,1vw,18px)}
.sm-btn.pri{background:var(--sm-pri);border-color:var(--sm-accent);color:var(--sm-pri-fg)}.sm-btn:disabled{opacity:.4;cursor:not-allowed}
.sm-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.sm-bar>div{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.sm-bar button[hidden]{display:none}.sm-bar h2{margin:0}
.bad{color:#e53935}.ok{color:#00a152}body.dark .bad{color:#ff5a5a}body.dark .ok{color:#00e676}#admin-msg{min-height:1.4em}
.sm-scroll{overflow:auto;max-height:70vh}
.sm-table{width:100%;border-collapse:collapse;font-size:clamp(12px,1vw,18px)}
.sm-table th,.sm-table td{padding:6px 10px;border-bottom:1px solid var(--sm-line2);text-align:left}
.sm-table input[type=checkbox]{width:18px;height:18px}
.sm-pw{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.st-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8em;font-weight:700;border:1px solid}
.st-LIVE{color:#00a152;border-color:#00a152}body.dark .st-LIVE{color:#00e676;border-color:#00e676}.st-STALE{color:#ffb300;border-color:#ffb300}
.st-OFFLINE{color:#ff5a5a;border-color:#ff5a5a}.st-ERROR{color:#ff8a65;border-color:#ff8a65}
.st-LOADING,.st-CHECKING{color:#8aa4c0;border-color:#8aa4c0}
/* balanced grid: each row is its own flex line, centered; widths set per row column count */
#grid-host{--gap:1vw;display:flex;flex-direction:column;gap:var(--gap);flex:1}
.grid-row{display:flex;justify-content:center;gap:var(--gap);flex:1;min-height:0}
.tile{background:#0b1a2b;border:2px solid #1d4f7a;border-radius:12px;padding:.8vw;display:flex;flex-direction:column;gap:.4vw;min-width:0;overflow:hidden;cursor:pointer;font-size:clamp(10px,.85vw,20px)}
.tile.st-LIVE{border-color:#00a152}.tile.st-STALE{border-color:#ffb300}.tile.st-OFFLINE{border-color:#c62828}.tile.st-ERROR{border-color:#d84315}
.tile-h{display:flex;justify-content:space-between;align-items:center;font-size:1.3em}.tile-h span:first-child{color:#8aa4c0}
.tile-t,.tile-f{color:#8aa4c0;font-size:.85em}.tile-msg{padding:1em 0;color:#ff8a8a;font-size:1.1em}
.rwy{border-top:1px solid #12304a;padding-top:.3em}.rwy-h{font-weight:700;color:#00e5ff;font-size:1.1em}.rwy-h em{color:#ffb300;font-style:normal;font-size:.8em}
.rwy-stale{opacity:.7}.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5em,1fr));gap:.3em}
.c{display:flex;flex-direction:column;background:#04090f;border-radius:6px;padding:.25em .4em}.c i{font-style:normal;color:#8aa4c0;font-size:.75em}.c b{font-size:1.35em;font-family:'JetBrains Mono',monospace}
#station-tile .tile{font-size:clamp(14px,1.6vw,34px);cursor:default;max-width:1200px;margin:0 auto;width:100%}
#dash-back{margin-right:6px}

/* dashRoot must keep the original body flex-column chain (#topbar/#main/#footer) intact */
#dashRoot{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%;height:100%;overflow:hidden}

/* admin grid: native compact cards. .gcell is the size container; all text scales from it (cqw/cqh) so nothing is cut */
#view-grid{padding:1vh 1vw;gap:1vh;overflow:hidden}
#view-grid .sm-bar h2{font-size:clamp(14px,1.4vw,28px)}
#view-grid #grid-host{min-height:0}
.gcell{position:relative;min-width:0;min-height:0;container-type:size;overflow:hidden;border-radius:10px}
.gcard{--c:#38bdf8;--rn:1;width:100%;height:100%;display:flex;flex-direction:column;background:var(--g-bg);border:3px solid var(--c);border-radius:10px;overflow:hidden;
  --vf:min(7cqw, calc(86cqh / (var(--rn) * 5.4)));font-family:Inter,system-ui,sans-serif}
@container (min-aspect-ratio: 3/2){ .gcard{--vf:min(calc(7cqw / var(--rn)), calc(86cqh / 5.4))} .gc-b{flex-direction:row!important} }
.gc-h{flex:0 0 12cqh;display:flex;align-items:center;gap:1.2cqw;padding:0 1.5cqw;background:var(--c);color:#04090f;font-size:min(4.6cqw,7cqh);white-space:nowrap;overflow:hidden}
.gc-h b{font-family:Orbitron,Inter,sans-serif;font-weight:900}.gc-n{opacity:.8;font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.gc-t{font-family:'JetBrains Mono',monospace;font-size:.7em;opacity:.8}
/* status pill: dark chip on the coloured header so LIVE is always GREEN (STALE amber, OFFLINE red) */
.gc-s{font-size:.6em;background:#04090f}
.gcard .gc-s.st-LIVE{color:#00e676;border-color:#00e676}.gcard .gc-s.st-STALE{color:#ffb300;border-color:#ffb300}.gcard .gc-s.st-OFFLINE{color:#ff5a5a;border-color:#ff5a5a}.gcard .gc-s.st-ERROR{color:#ff8a65;border-color:#ff8a65}.gcard .gc-s.st-LOADING{color:#b8c7d9;border-color:#b8c7d9}
.gc-full{flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:1.8em;height:1.8em;padding:0;margin:0;background:rgba(4,9,15,.25);border:1px solid #04090f;color:#04090f;border-radius:.4em;cursor:pointer;line-height:0}
.gc-full svg{display:block;width:62%;height:62%}.gc-full:hover{background:rgba(4,9,15,.45)}
.gc-b{flex:1;min-height:0;display:flex;flex-direction:column}
.gc-r{flex:1 1 0;min-width:0;min-height:0;display:flex;flex-direction:column;border-top:3px solid var(--c)}
.gc-r:first-child{border-top:0}
@container (min-aspect-ratio: 3/2){ .gc-r{border-top:0;border-left:3px solid var(--c)} .gc-r:first-child{border-left:0} }
.gc-rh{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1cqw;padding:.1em 1.5cqw;font-size:calc(var(--vf)*.55);line-height:1.2}
.gc-rn{font-weight:800;color:var(--c);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-rn em{font-style:normal;font-size:.85em;color:var(--sm-muted)}
.rl-watch .gc-rn em{color:#ff9800}.rl-crit .gc-rn em{color:#ff1744}
.gc-mode{font-size:.95em;font-family:inherit;color:var(--sm-fg);background:var(--g-sel);border:1px solid var(--c);border-radius:5px;padding:0 .3em;max-width:48%;cursor:pointer}
.gc-stale{opacity:.6}
.gc-cells{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;padding:3px}
.gc-c{min-width:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 10%,var(--g-cell));border:1.5px solid color-mix(in srgb,var(--c) 75%,transparent);border-radius:5px;line-height:1.05}
.gc-c i{font-style:normal;font-size:calc(var(--vf)*.42);color:var(--c);font-weight:700;white-space:nowrap}
.gc-c b{font-size:var(--vf);font-weight:900;letter-spacing:-0.5px;color:var(--g-val);font-family:'Inter',sans-serif;white-space:nowrap}
.gc-c.v-orange b{color:var(--sev-orange)}.gc-c.v-red b{color:var(--sev-red)}.gc-c.v-green b{color:var(--sev-green)}
.gc-msg{margin:auto;padding:2cqw;text-align:center;color:#ff8a8a;font-size:min(4cqw,6cqh)}
.gcard:not(.gc-down) .gc-msg{color:var(--sm-muted)}
/* WS watch / critical: card border blinks orange / red (blink = border colour alternates with the card's own colour) */
.gcard.gc-watch{animation:gcWatch 1.6s steps(1,end) infinite}
.gcard.gc-crit{animation:gcCrit .8s steps(1,end) infinite}
@keyframes gcWatch{0%{border-color:#ff9800;box-shadow:inset 0 0 2cqw rgba(255,152,0,.45)}50%{border-color:var(--c);box-shadow:none}}
@keyframes gcCrit{0%{border-color:#ff1744;box-shadow:inset 0 0 2.4cqw rgba(255,23,68,.55)}50%{border-color:var(--c);box-shadow:none}}
/* embed (tile) mode: hide controls that don't fit a tile */
body.embed .top-btns > :not(#status){display:none!important}
body.embed #footer .dev-row,body.embed #metar-history-btn,body.embed #metar-copy-btn{display:none!important}
body.embed #station-tile .tile{font-size:clamp(11px,2.4vw,40px);max-width:none;height:100%}
body.embed #view-station .sm-bar{display:none}
body.embed #view-station{padding:6px;justify-content:center}
body.embed #dash-back{display:none!important}

/* ═══ WS watch / critical: blinking panel border (normal-user dashboard) ═══ */
.panel.ws-watch{animation:wsWatchBlink 1.6s ease-in-out infinite}
.panel.ws-crit{animation:wsCritBlink .8s ease-in-out infinite}
@keyframes wsWatchBlink{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 5px #ff9800,inset 0 0 28px rgba(255,152,0,.35)}}
@keyframes wsCritBlink{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 0 5px #ff1744,inset 0 0 32px rgba(255,23,68,.4)}}
.set-msg{min-height:1.3em;padding:6px 10px 0;font-size:.85em}.set-msg.ok{color:#00e676}.set-msg.bad{color:#ff5252}.set-msg.warn{color:#ffb300}
.b-save{color:#00e676;border-color:#00e676;background:rgba(0,230,118,.10)}

/* ═══ History switched off (stations.js adds html.no-history when no station has a history backend) ═══ */
html.no-history .click-hint,html.no-history #trend-toggle-btn,html.no-history #snap-period-bar{display:none!important}
html.no-history .wbox,html.no-history .dc{cursor:default}


/* ── Runway half with no data: same layout, dimmed + inert ── */
#main > .panel.rwy-empty { position: relative; opacity: .45; filter: grayscale(.7); }
#main > .panel.rwy-empty * { pointer-events: none !important; }
#main > .panel.rwy-empty::after {
  content: attr(data-empty-text); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 4px 12px; border-radius: 6px; font-weight: 700; letter-spacing: .08em; font-size: clamp(10px, 1.1vw, 14px);
  background: rgba(0,0,0,.55); color: #cfd8dc; pointer-events: none; white-space: nowrap;
}
.rwybar-half.rwy-empty { opacity: .55; }
.rwybar-half.rwy-empty select { pointer-events: none; }
.trend-col.rwy-empty { opacity: .45; }

/* 4-runway layout */
#dashRoot.slots-4 #rwybar .rwybar-half{padding:0 clamp(3px,2.4cqw,10px);gap:clamp(3px,1.6cqw,7px)}
#dashRoot.slots-4 #rwybar .rwybar-half:first-child{padding-left:max(clamp(3px,2.4cqw,10px), env(safe-area-inset-left))}
#dashRoot.slots-4 #rwybar .rwybar-half:last-child{padding-right:max(clamp(3px,2.4cqw,10px), env(safe-area-inset-right))}
#dashRoot.slots-4 #rwybar .rwy-sel{font-size:clamp(6.5px,2.3cqw,10px)}
#dashRoot.slots-4 #rwybar .rwy-txt{font-size:clamp(10px,2cqw,19.5px)}
#dashRoot.slots-4 #rwybar .rwy-num{font-size:clamp(10px,4.6cqw,17.5px);padding:1px clamp(4px,3cqw,12.5px)}
#dashRoot.slots-4 #trendView .trend-col-hdr{font:800 clamp(7.5px,2.6cqw,10.5px) 'Inter',sans-serif}
#dashRoot.slots-4 #trendView .trend-live-pill{font:700 clamp(5.5px,1.8cqw,7.5px) 'Inter',sans-serif}
#dashRoot.slots-4 #main .wind-row{grid-template-columns:0.82fr 0.82fr minmax(56px,34cqw)}
#dashRoot.slots-4 #main .wbox{padding:clamp(2px,0.6vh,5.5px) clamp(2px,1.2cqw,5.5px)}
#dashRoot.slots-4 #main .wlbl{font-size:clamp(7px,2.7cqw,12.5px)}
#dashRoot.slots-4 #main .wsub{font-size:clamp(5px,1.6cqw,7.5px)}
#dashRoot.slots-4 #main .wval{font-size:clamp(15.5px,9cqw,39px)}
#dashRoot.slots-4 #main .rr{padding:2px clamp(3px,1.6cqw,7px)}
#dashRoot.slots-4 #main .rl{font-size:clamp(7px,2.6cqw,11px)}
#dashRoot.slots-4 #main .rv{font-size:clamp(11px,5.2cqw,24px)}
#dashRoot.slots-4 #main .dch{font-size:clamp(8.5px,3.6cqw,15.5px)}
#dashRoot.slots-4 #main .dcv{font-size:clamp(17px,9cqw,36.5px)}
#dashRoot.slots-4 #main .wcomp-badge{font-size:clamp(5.5px,2cqw,9px)}
#dashRoot.slots-4 #main .dew-spread{font-size:clamp(6.5px,2cqw,9px)}
#dashRoot.slots-4 #main .qnh-trend{font-size:clamp(10px,3.6cqw,15.5px)}
#dashRoot.slots-4 #main .rvr-trend-badge{font-size:clamp(5.5px,1.7cqw,7.5px)}
#dashRoot.slots-4 #main .no-data-msg{font-size:clamp(14px,5cqw,22.5px)}
#dashRoot.slots-4 #main, #dashRoot.slots-4 #rwybar, #dashRoot.slots-4 #trendView { grid-template-columns:repeat(4,minmax(0,1fr)); }
#dashRoot.slots-4 #main > .panel, #dashRoot.slots-4 #rwybar > .rwybar-half, #dashRoot.slots-4 #trendView > .trend-col { container-type:inline-size; min-width:0; }
#dashRoot:not(.slots-4) #main > .panel:nth-child(n+3), #dashRoot:not(.slots-4) #rwybar > .rwybar-half:nth-child(n+3), #dashRoot:not(.slots-4) #trendView > .trend-col:nth-child(n+3) { display:none; }
#dashRoot:not(.slots-4) #main > .panel:nth-child(2), #dashRoot:not(.slots-4) #trendView > .trend-col:nth-child(2) { border-right:none; }
#dashRoot:not(.slots-4) #rwybar > .rwybar-half:nth-child(2) { border-right:none; padding-right:max(clamp(4px,1.2vw,14px), env(safe-area-inset-right)); }
@media (max-width: 768px) and (orientation: portrait) {
  #dashRoot.slots-4 #main { grid-template-columns:1fr; grid-template-rows:repeat(4,1fr); }
  #dashRoot.slots-4 #main > .panel { container-type:normal; }
}
.wr-grid:has(.wr-t4) { grid-template-columns:1fr; }
.wr-t4 th.wr-th0 { width:15%; }
.wr-t4 th { font-size:8px; padding:3px 1px; }
.wr-t4 tr.wr-sh th { font-size:7px; }
.wr-t4 td { font-size:9px; padding:3px 1px; }

/* ms15: stale runway panel (frozen data) */
#main > .panel.rwy-stale{opacity:.55;filter:saturate(.5)}
#main > .panel.rwy-stale::before{content:'STALE DATA';position:absolute;top:4px;right:8px;z-index:5;font:700 11px Inter,sans-serif;color:#ffaa00;letter-spacing:.08em}
#main > .panel.rwy-stale{position:relative}

/* threshold modal (admin) */
.sm-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
.sm-modal[hidden]{display:none}
.thr-row{display:flex;align-items:center;gap:10px}.thr-row span{flex:1}.thr-row input{width:90px;text-align:right}.thr-row em{font-style:normal;width:2em;color:var(--sm-muted)}
/* LIVE labels: always green */
.trend-live-pill{color:#00e676!important;opacity:1!important}
.tb-btn.live-on{color:#00e676!important}

/* ms15: inactive stations in the admin table, many-station scroll mode, new-card fade-in */
.sm-table tr.row-off td{opacity:.6}
#grid-host.many{flex:none;min-height:100%}
#view-grid:has(#grid-host.many){overflow:auto}
#grid-host.many .grid-row{flex:none;height:42vh}
.gcard.gc-new{animation:gcIn .35s ease-out}
@keyframes gcIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.thr-row{flex-wrap:nowrap}.thr-row span{min-width:0}

/* ═══════════ Landing page (ms21): fits the screen, clipped background, reliable intro ═══════════ */
.ld{--ld-bg1:#f4f1ff;--ld-bg2:#d9d1ff;--ld-fg:#1d1446;--ld-muted:#5b5390;--ld-acc:#6d4fe0;--ld-g:#16a34a;--ld-card:rgba(255,255,255,.74);--ld-line:rgba(109,79,224,.32);--ld-field:rgba(255,255,255,.96);--ld-btnfg:#fff;--ld-sweep:rgba(22,163,74,.26);--ld-ring:rgba(22,163,74,.22);--ld-bad:#c62828;
  position:relative;justify-content:flex-start;align-items:center;gap:clamp(8px,1.8vh,24px);padding:clamp(8px,1.5vh,16px) clamp(14px,2vw,40px) clamp(8px,1.3vh,14px);overflow-x:hidden;overflow-y:auto;background:linear-gradient(180deg,var(--ld-bg1),var(--ld-bg2));color:var(--ld-fg)}
body.dark .ld{--ld-bg1:#0a0820;--ld-bg2:#1d1246;--ld-fg:#f2eeff;--ld-muted:#a79fd0;--ld-acc:#a78bfa;--ld-g:#4ade80;--ld-card:rgba(255,255,255,.06);--ld-line:rgba(167,139,250,.34);--ld-field:rgba(255,255,255,.08);--ld-btnfg:#1a1040;--ld-sweep:rgba(74,222,128,.3);--ld-ring:rgba(74,222,128,.2);--ld-bad:#ff6b6b}
.ld>*{position:relative;z-index:2}
/* background layer: radar + plane live inside a clipped box, so they can never create a scroll bar */
.ld>.ld-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ld-radar,.ld-plane{position:absolute;pointer-events:none}
.ld-radar{left:50%;top:56%;width:min(150vmin,1500px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 9%,var(--ld-ring) 9% calc(9% + 1px))}
.ld-radar::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--ld-ring),var(--ld-ring)) 50% 0/1px 100% no-repeat,linear-gradient(var(--ld-ring),var(--ld-ring)) 0 50%/100% 1px no-repeat}
.ld-sw{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 285deg,var(--ld-sweep) 360deg);animation:ldspin 10s linear infinite;will-change:transform}
@keyframes ldspin{to{transform:rotate(360deg)}}
.ld .bl{position:absolute;width:0;height:0;animation:ldping 10s linear infinite}
.ld .bl i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--ld-g)}
.ld .bl b{position:absolute;left:10px;top:-7px;font:500 clamp(11px,.8vw,15px) "JetBrains Mono",monospace;color:var(--ld-g)}
@keyframes ldping{0%{opacity:1;transform:scale(1.5)}25%{opacity:.3;transform:none}100%{opacity:.3}}
.ld-plane{top:22%;left:0;width:100%;transform:rotate(-8deg)}
.ld-fly{position:relative;width:clamp(72px,9vw,170px);animation:ldfly 14s linear infinite;transform:translateX(-30vw);will-change:transform}
@keyframes ldfly{0%{transform:translateX(-30vw)}70%,100%{transform:translateX(125vw)}}
.ld-fly svg{display:block;width:100%;fill:#fff;filter:drop-shadow(0 14px 10px rgba(0,0,0,.4))}
.ld-fly::before,.ld-fly::after{content:"";position:absolute;right:84%;height:3px;width:34vw;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7))}
.ld-fly::before{top:34%}.ld-fly::after{top:62%}
body:not(.dark) .ld-fly svg{fill:#4b3bb0}body:not(.dark) .ld-fly::before,body:not(.dark) .ld-fly::after{background:linear-gradient(90deg,transparent,rgba(75,59,176,.5))}
/* top bar: AVIATION METEOROLOGY (left) | UTC time (centre) | Theme + Full screen (right) */
.ld-top{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.ld-brand{justify-self:start;font-weight:800;font-size:clamp(14px,min(1.55vw,2.8vh),30px);letter-spacing:.16em;line-height:1.2;white-space:nowrap;color:var(--ld-fg);text-shadow:0 0 18px var(--ld-ring)}
.ld-clk{justify-self:center;font:700 clamp(17px,min(2.1vw,3.8vh),40px) "JetBrains Mono",monospace;letter-spacing:.03em;color:var(--ld-fg);white-space:nowrap}
.ld-tools{justify-self:end;display:flex;gap:8px}
.ld-tb{padding:8px 14px;border-radius:999px;border:1px solid var(--ld-line);background:var(--ld-card);color:var(--ld-fg);cursor:pointer;font:inherit;font-size:clamp(12px,1vw,18px)}
.ld-tb:hover{border-color:var(--ld-acc)}.ld-tb[hidden]{display:none}
.ld-hero{text-align:center;margin-top:auto}
.ld h1{margin:0;font-family:Orbitron,Inter,sans-serif;font-weight:900;font-size:clamp(44px,min(8vw,14vh),170px);letter-spacing:.12em;line-height:1;margin-right:-.12em}
.ld h1 span{display:inline-block;color:var(--ld-fg);background:linear-gradient(180deg,var(--ld-fg) 25%,var(--ld-acc));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ld-sub{margin:clamp(4px,1vh,10px) 0 0;font-weight:300;font-size:clamp(12px,min(1.5vw,2.6vh),30px);letter-spacing:.4em;text-transform:uppercase;color:var(--ld-muted)}
.ld-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(12px,1.6vw,34px);width:min(100%,clamp(860px,62vw,1500px))}
.ld-panel{display:flex;flex-direction:column;gap:clamp(4px,min(.6vw,.9vh),12px);padding:clamp(14px,min(1.8vw,2.8vh),38px);border-radius:16px;border:1px solid var(--ld-line);background:var(--ld-card);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ld-ph{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.ld-ph svg{width:clamp(34px,min(3.2vw,5.4vh),72px);height:clamp(34px,min(3.2vw,5.4vh),72px);flex:none;stroke:var(--ld-acc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ld-ph h2{margin:0;font-family:Orbitron,Inter,sans-serif;font-size:clamp(20px,min(2.3vw,3.8vh),48px);font-weight:700;letter-spacing:.05em;line-height:1.15;color:var(--ld-fg)}
.ld-ph p{margin:3px 0 0;font-size:clamp(13px,min(1.1vw,2vh),22px);color:var(--ld-muted)}
.ld label{font-size:clamp(12px,min(1vw,1.9vh),19px);color:var(--ld-muted);margin-top:2px}
.ld input,.ld select{height:clamp(38px,min(3.4vw,5.6vh),66px);padding:0 12px;border-radius:10px;border:1px solid var(--ld-line);background:var(--ld-field);color:var(--ld-fg);font:inherit;font-size:clamp(14px,min(1.15vw,2.2vh),22px);width:100%;box-sizing:border-box}
.ld select option{background:#1d1246;color:#f2eeff}
.ld input:focus,.ld select:focus,.ld button:focus-visible{outline:2px solid var(--ld-acc);outline-offset:2px}
.ld-pb{height:clamp(40px,min(3.5vw,5.8vh),68px);margin-top:auto;border:0;border-radius:10px;background:var(--ld-acc);color:var(--ld-btnfg);font:600 clamp(14px,min(1.2vw,2.3vh),23px) Inter,sans-serif;cursor:pointer;transition:transform .15s,filter .15s}
.ld-pb:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-2px)}.ld-pb:active:not(:disabled){transform:scale(.98)}.ld-pb:disabled{opacity:.45;cursor:not-allowed}
.ld-lk{background:none;border:0;color:var(--ld-muted);font:inherit;font-size:clamp(12px,min(1vw,1.9vh),19px);cursor:pointer;padding:3px;text-decoration:underline}
.ld-hint{font-size:clamp(11px,min(.9vw,1.7vh),17px);color:var(--ld-muted)}
.ld-msg{min-height:1.2em;font-size:clamp(12px,min(1vw,1.8vh),18px);color:var(--ld-g)}.ld .bad{color:var(--ld-bad)}.ld .ok{color:var(--ld-g)}
.ld-rs{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding-top:10px;border-top:1px solid var(--ld-line)}.ld-rs[hidden]{display:none}
.ld-sb{height:clamp(38px,3vw,56px);border-radius:10px;border:1px solid var(--ld-line);background:var(--ld-field);color:var(--ld-fg);cursor:pointer;font:inherit;font-size:clamp(14px,1.05vw,20px)}
.ld-sb.pri{background:var(--ld-acc);color:var(--ld-btnfg);border-color:transparent}.ld-sb:disabled{opacity:.5;cursor:not-allowed}
/* bottom row: status exactly centred, developer credit on the right in two lines */
.ld-foot{width:100%;margin-top:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:10px}
.ld-st{grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(12px,min(.95vw,1.8vh),18px);color:var(--ld-muted);white-space:nowrap}
.ld-credit{grid-column:3;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;text-align:right;line-height:1.25;text-transform:uppercase;color:var(--ld-muted)}
.ld-credit small{font-size:clamp(10px,min(.8vw,1.5vh),15px);font-weight:600;letter-spacing:.22em}
.ld-credit b{font-size:clamp(12px,min(1.05vw,2vh),20px);font-weight:800;letter-spacing:.12em;color:var(--ld-fg)}
.ld-dot{width:8px;height:8px;border-radius:50%;background:var(--ld-g);animation:lddot 2s infinite}
@keyframes lddot{0%{box-shadow:0 0 0 0 var(--ld-g)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* intro: transform + opacity only (smooth, no blur repaint). JS removes .ld-calm to replay it every time the landing is shown.
   .ld-hold pauses it until the fonts are ready so the big title never jumps. */
@keyframes ldrise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ldfade{from{opacity:0}to{opacity:1}}
@keyframes ldltr{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.ld:not(.ld-calm) .ld-radar{animation:ldfade 1.2s .05s both}
.ld:not(.ld-calm) .ld-top{animation:ldfade .7s .1s both}
.ld:not(.ld-calm) h1 span{animation:ldltr .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.25s + var(--i)*.09s)}
.ld:not(.ld-calm) .ld-sub{animation:ldrise .7s .7s both}
.ld:not(.ld-calm) .ld-panel:nth-child(1){animation:ldrise .7s .85s both}
.ld:not(.ld-calm) .ld-panel:nth-child(2){animation:ldrise .7s 1s both}
.ld:not(.ld-calm) .ld-foot{animation:ldfade .8s 1.2s both}
.ld.ld-hold *,.ld.ld-hold *::before,.ld.ld-hold *::after{animation-play-state:paused!important}
@media (max-width:720px){
  .ld-top{grid-template-columns:1fr auto}.ld-clk{grid-column:1/-1;grid-row:2;justify-self:start}
  .ld-brand{letter-spacing:.1em;font-size:14px}.ld-fly::before,.ld-fly::after{width:45vw}
  .ld-foot{grid-template-columns:1fr}.ld-st,.ld-credit{grid-column:1}.ld-st{justify-self:center}
}
/* reduced-motion: skip only the entrance effect; the radar + plane keep running (they are the landing page animation) */
@media (prefers-reduced-motion:reduce){.ld:not(.ld-calm) .ld-top,.ld:not(.ld-calm) h1 span,.ld:not(.ld-calm) .ld-sub,.ld:not(.ld-calm) .ld-panel,.ld:not(.ld-calm) .ld-foot,.ld:not(.ld-calm) .ld-radar{animation:none}}

/* system notices (audio hint, missing chart library, hidden runways) */
#sysNotes{flex:none;display:flex;flex-direction:column;gap:1px;width:100%;background:#0b1626}
#sysNotes:empty{display:none}
#sysNotes div{padding:3px 12px;background:rgba(20,30,48,.96);color:#e6f1ff;border-top:1px solid #1d4f7a;font:500 clamp(10px,.9vw,12px)/1.3 Inter,system-ui,sans-serif;cursor:default}



/* ═══ ms19: alert strip + alert log + station profile note ═══ */
#grid-alerts{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-height:20vh;overflow:auto;padding:7px 12px;border:1px solid var(--sm-line);border-radius:10px;background:var(--sm-card);color:var(--sm-fg);font-size:clamp(12px,1vw,18px)}
#grid-alerts>b{letter-spacing:.12em;font-size:.85em}
#grid-alerts.ga-ok{border-color:rgba(22,163,74,.5)}#grid-alerts.ga-ok>span{color:#16a34a}body.dark #grid-alerts.ga-ok>span{color:#22c55e}
#grid-alerts.ga-crit{border-color:#ef4444;background:rgba(239,68,68,.13)}
#grid-alerts.ga-watch{border-color:#f59e0b;background:rgba(245,158,11,.13)}
.ga-chip{cursor:pointer;border:1px solid transparent;border-radius:999px;padding:4px 12px;font:inherit;font-weight:700;white-space:nowrap}
.ga-chip i{font-style:normal;font-size:.75em;letter-spacing:.08em;opacity:.9;margin-right:2px}
.ga-chip.ga-c{background:#dc2626;color:#fff;animation:gaPulse 1s steps(1,end) infinite}
.ga-chip.ga-w{background:#f59e0b;color:#1a1200}
@keyframes gaPulse{50%{background:#7f1d1d}}
@media (prefers-reduced-motion:reduce){.ga-chip.ga-c{animation:none}}
.alog-card{width:min(96vw,980px);max-height:90vh}
.alog-tools{justify-content:space-between;align-items:center}
.alog-wrap{overflow:auto;min-height:120px;max-height:55vh;border:1px solid var(--sm-line);border-radius:8px}
.alog-wrap thead th{position:sticky;top:0;background:var(--sm-card)}
.alog-wrap tr.al-r-c td{color:#ef4444;font-weight:600}.alog-wrap tr.al-r-w td{color:#d98200}
#alog-empty{padding:16px;text-align:center}
.set-prof{font-size:12px;opacity:.85;margin:2px 0 8px}.set-prof.own{color:#22c55e;opacity:1}

/* ═══ ms21 ═══ */
.sm-ico{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:8px 10px;font-size:clamp(14px,1.2vw,22px);line-height:1}
.thr-opt{padding-bottom:10px;border-bottom:1px solid var(--sm-line2);margin-bottom:2px}
.thr-opt span b{font-size:1em}
.thr-opt .sw{flex:none;position:relative;width:44px;height:24px}.thr-opt .sw input{opacity:0;width:0;height:0;padding:0}
.thr-opt .sw span{position:absolute;inset:0;background:#546e7a;border-radius:24px;cursor:pointer;transition:background .2s}
.thr-opt .sw span::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}
.thr-opt .sw input:checked+span{background:#00c853}.thr-opt .sw input:checked+span::before{transform:translateX(20px)}
/* background tab: pause every CSS animation (landing, blinking alert cards) so a hidden tab costs almost nothing */
html.tab-hidden *,html.tab-hidden *::before,html.tab-hidden *::after{animation-play-state:paused!important}