/* QO-100 WebSDR waterfall module. Link this next to web/waterfall.js.
   All colours are CSS variables on .wf-root; override them in the host page if needed. */
.wf-root {
  --wf-bg: #f4f5f7;
  --wf-panel: #ffffff;
  --wf-fg: #1c2230;
  --wf-dim: #5d667a;
  --wf-grid: rgba(0, 0, 0, 0.12);
  --wf-line: #0b6bcb;
  --wf-fill: rgba(11, 107, 203, 0.18);
  --wf-peak: #d9480f;
  --wf-pass: rgba(255, 255, 255, 0.22);
  --wf-pass-edge: #e8590c;
  --wf-accent: #0b6bcb;
  --wf-tx: #e03131;
  --wf-border: #c9cfdb;
  --wf-k-beacon: #d9480f;
  --wf-k-cw: #0c8599;
  --wf-k-digi: #7048e8;
  --wf-k-rade: #d6336c;
  --wf-k-ssb: #2f9e44;
  --wf-k-special: #e8a600;
  --wf-k-mixed: #7a8396;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--wf-bg);
  color: var(--wf-fg);
  border: 1px solid var(--wf-border);
  border-radius: 8px;
  overflow: hidden;
  font: 13px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
@media (prefers-color-scheme: dark) {
  .wf-root:not([data-theme="light"]) {
    --wf-bg: #11151c;
    --wf-panel: #1a2029;
    --wf-fg: #dfe4ee;
    --wf-dim: #98a1b3;
    --wf-grid: rgba(255, 255, 255, 0.14);
    --wf-line: #5cb0ff;
    --wf-fill: rgba(92, 176, 255, 0.18);
    --wf-peak: #ffa94d;
    --wf-pass: rgba(255, 255, 255, 0.16);
    --wf-pass-edge: #ffa94d;
    --wf-accent: #5cb0ff;
    --wf-border: #2f3846;
    --wf-k-beacon: #ff6b3d;
    --wf-k-cw: #22b8cf;
    --wf-k-digi: #9775fa;
    --wf-k-rade: #f06595;
    --wf-k-ssb: #51cf66;
    --wf-k-special: #fcc419;
    --wf-k-mixed: #8a93a6;
  }
}
.wf-root[data-theme="dark"] {
  --wf-bg: #11151c; --wf-panel: #1a2029; --wf-fg: #dfe4ee; --wf-dim: #98a1b3;
  --wf-grid: rgba(255, 255, 255, 0.14); --wf-line: #5cb0ff; --wf-fill: rgba(92, 176, 255, 0.18);
  --wf-peak: #ffa94d; --wf-pass: rgba(255, 255, 255, 0.16); --wf-pass-edge: #ffa94d;
  --wf-accent: #5cb0ff; --wf-border: #2f3846;
  --wf-k-beacon: #ff6b3d; --wf-k-cw: #22b8cf; --wf-k-digi: #9775fa; --wf-k-rade: #f06595; --wf-k-ssb: #51cf66;
  --wf-k-special: #fcc419; --wf-k-mixed: #8a93a6;
}

.wf-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding: 6px 10px; background: var(--wf-panel); border-bottom: 1px solid var(--wf-border);
}
.wf-bar label { display: inline-flex; align-items: center; gap: 4px; color: var(--wf-dim); white-space: nowrap; }
.wf-bar select, .wf-bar input[type="number"], .wf-bar button {
  font: inherit; color: var(--wf-fg); background: var(--wf-bg);
  border: 1px solid var(--wf-border); border-radius: 5px; padding: 3px 6px; min-height: 28px;
}
.wf-bar input[type="number"] { width: 4.6em; }
.wf-bar button { cursor: pointer; }
.wf-bar button:hover { border-color: var(--wf-accent); }
.wf-bar button[aria-pressed="true"] { background: var(--wf-accent); color: #fff; border-color: var(--wf-accent); }
.wf-bar .wf-sp { flex: 1 1 auto; }
.wf-switch { display: inline-flex; align-items: center; gap: 6px; color: var(--wf-fg) !important; font-weight: 600; }
.wf-switch input { width: 18px; height: 18px; accent-color: var(--wf-accent); }

.wf-legend {
  display: none; flex-wrap: wrap; gap: 4px 12px; padding: 5px 10px;
  background: var(--wf-panel); border-bottom: 1px solid var(--wf-border); color: var(--wf-dim); font-size: 12px;
}
.wf-legend.wf-open { display: flex; }
.wf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wf-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.wf-legend .wf-tri { width: 0; height: 0; border-radius: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--wf-fg); background: none; }

.wf-stage { position: relative; width: 100%; touch-action: pan-y; cursor: crosshair; background: #000; }
.wf-stage canvas { display: block; width: 100%; }
.wf-stage .wf-overlay { position: absolute; left: 0; top: 0; pointer-events: none; }
.wf-readout {
  position: absolute; right: 6px; top: 4px; padding: 1px 6px; border-radius: 4px; pointer-events: none;
  background: rgba(0, 0, 0, 0.55); color: #fff; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; display: none;
}
.wf-tip {
  position: absolute; z-index: 5; max-width: 80%; padding: 4px 8px; border-radius: 5px; pointer-events: none;
  background: var(--wf-fg); color: var(--wf-bg); font-size: 12px; display: none;
}
.wf-off {
  display: none; padding: 28px 10px; text-align: center; color: var(--wf-dim); background: var(--wf-panel);
}
.wf-root.wf-disabled .wf-stage { display: none; }
.wf-root.wf-disabled .wf-off { display: block; }
.wf-root.wf-hidden { display: none; }
@media (max-width: 520px) {
  .wf-root { border-radius: 0; border-left: 0; border-right: 0; }
  .wf-bar { padding: 6px 16px; }
  .wf-legend { padding: 5px 16px; }
}

.wf-zoomctl { display: inline-flex; align-items: center; gap: 4px; }
.wf-zoomctl .wf-zlabel { color: var(--wf-dim); width: 5.4em; min-width: 5.4em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-zoomctl button { min-width: 32px; }
.wf-zoomctl button:disabled { opacity: 0.45; cursor: default; }
.wf-stage.wf-zoom { border-top: 2px solid var(--wf-accent); }
.wf-wait { position: absolute; left: 0; right: 0; top: 40%; text-align: center; color: #aab; display: none; pointer-events: none; }

.wf-size { display: inline-flex; align-items: center; gap: 2px; }
.wf-size button { min-width: 28px; padding: 3px 7px; }
.wf-size button[aria-pressed=true] { background: var(--wf-accent); color: #fff; border-color: var(--wf-accent); }

.wf-sens { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.wf-sens button { min-width: 44px; font-weight: 600; }
.wf-rangeinfo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; flex: 1 1 0; min-width: calc(4.4em + 4px + 8ch); max-width: calc(4.4em + 4px + 52ch); }      /* room for the longest text, but it gives way before the toolbar wraps (Portuguese labels are wider) */
.wf-rangetxt { color: var(--wf-dim); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: left; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 699px) { .wf-sens button { min-height: 36px; min-width: 52px; } .wf-rangeinfo { flex: 1 1 100%; max-width: 100%; } }      /* phones: the info keeps a row of its own as before */
.wf-rangetag { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--wf-accent); border-radius: 4px; padding: 1px 0; width: 4.4em; flex: 0 0 4.4em; text-align: center; box-sizing: border-box; }
.wf-legend-notes { flex-basis: 100%; font-size: 11px; color: var(--wf-dim); }

.wf-disp { position: absolute; right: 8px; top: 40px; z-index: 6; width: 290px; max-width: calc(100% - 16px); padding: 8px 10px; background: var(--wf-panel); color: var(--wf-fg); border: 1px solid var(--wf-border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.wf-disp[hidden] { display: none; }
.wf-disp label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.wf-disp select { font: inherit; color: var(--wf-fg); background: var(--wf-bg); border: 1px solid var(--wf-border); border-radius: 5px; padding: 3px 6px; }
.wf-disp-note { margin: 2px 0 8px; font-size: 11px; color: var(--wf-dim); line-height: 1.35; }
.wf-disp input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--wf-accent); }