/* HFradio — "A · Marine Receiver" phosphor-green theme */
:root {
  --bg0: #05080a;
  --bg1: #0a0f0c;
  --panel: #070b09;
  --line: #16302455;
  --line-solid: #1c3a2c;
  --phos: #27e08a;
  --phos-dim: #1f8a5a;
  --phos-faint: #165c3c;
  --ink: #cfeede;
  --ink-dim: #5fae89;
  --label: #3f7a5e;
  --amber: #f5b942;
  --red: #e0584f;
  --glow: 0 0 22px #16c47766;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--mono);
  color: var(--ink);
  background: radial-gradient(circle at 50% 0%, var(--bg1) 0%, var(--bg0) 70%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;       /* Layout A: radio on top, map below */
  align-items: center;
  justify-content: flex-start;
  padding: 28px 14px;
}

.receiver {
  width: 100%;
  max-width: 780px;
  background: linear-gradient(180deg, var(--bg1), var(--bg0));
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 80px -20px #0f3d29;
}

/* header */
.hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel);
  font-size: 11px; letter-spacing: .25em;
}
.hdr .brand { color: var(--phos); }
.hdr .right { display: flex; gap: 14px; align-items: center; font-size: 9px; color: var(--label); }
.hdr select {
  background: var(--bg0); color: var(--ink-dim); border: 1px solid var(--line-solid);
  border-radius: 5px; font-family: var(--mono); font-size: 9px; padding: 3px 6px;
}
.relay-cfg {
  background: transparent; border: 1px solid var(--line-solid); color: var(--label);
  border-radius: 5px; font-size: 11px; cursor: pointer; padding: 1px 6px; font-family: var(--mono);
}
.relay-cfg:hover { color: var(--phos); border-color: var(--phos-dim); }

/* app footer: donation / community */
.appfoot {
  width: 100%; max-width: 780px; margin: 14px auto 30px; padding: 12px 4px;
  display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center;
  font-family: var(--mono); font-size: 9px; color: var(--label); letter-spacing: .05em;
}
.appfoot .donate { color: var(--amber); text-decoration: none; border: 1px solid #6b4f24; border-radius: 6px; padding: 6px 14px; }
.appfoot .donate:hover { background: #1a1206; }
.appfoot .creditnote { color: #2c5240; max-width: 560px; line-height: 1.5; }
.status { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--phos-faint); box-shadow: 0 0 8px transparent; }
.status-dot.live { background: var(--phos); box-shadow: 0 0 10px var(--phos); }
.status-dot.reconnecting, .status-dot.busy { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.status-dot.offline { background: var(--red); box-shadow: 0 0 10px var(--red); }

/* body grid */
.body { display: flex; gap: 18px; padding: 20px 18px; flex-wrap: wrap; }
.col-dial { flex: 0 0 200px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.col-main { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }

/* rotary dial */
.dial {
  position: relative; width: 170px; height: 170px; border-radius: 50%;
  background: conic-gradient(from 220deg, #0c1f15, #091410 60%, #0c1f15);
  border: 2px solid var(--line-solid);
  box-shadow: inset 0 0 26px -8px #000, 0 0 40px -16px #16a06a;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; user-select: none;
}
.dial:active { cursor: grabbing; }
.dial .ring { position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed #16302466; }
.dial .pip { position: absolute; top: 6px; left: 50%; width: 2px; height: 14px; background: var(--phos); transform: translateX(-50%); box-shadow: 0 0 8px var(--phos); }
.knob {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #143f2c, #070b09);
  border: 1px solid var(--phos-dim);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  transition: transform .05s linear;
}
.knob .cap { font-size: 8px; color: var(--label); letter-spacing: .2em; }
.knob .nub { width: 3px; height: 30px; background: var(--phos); border-radius: 2px; margin-top: 4px; box-shadow: 0 0 10px var(--phos); }

.modes { display: flex; gap: 5px; }
.mode-btn {
  font-size: 9px; color: var(--label); border: 1px solid var(--line-solid);
  border-radius: 4px; padding: 4px 9px; background: transparent; cursor: pointer; font-family: var(--mono);
}
.mode-btn.active { background: #143f2c; color: var(--phos); border-color: var(--phos-dim); }
.dial-hint { font-size: 8px; color: var(--label); letter-spacing: .12em; text-align: center; }

/* squelch dial (small) */
.sql { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.sql-dial {
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(from 220deg, #0c1f15, #091410 60%, #0c1f15);
  border: 1px solid var(--line-solid); box-shadow: inset 0 0 16px -6px #000;
  display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; user-select: none;
}
.sql-dial:active { cursor: grabbing; }
.sql-knob {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #2a1c0c, #070b09);
  border: 1px solid #6b4f24;
}
.sql-knob::after {
  content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 20px; background: var(--amber); border-radius: 2px; box-shadow: 0 0 6px var(--amber);
}
.sql-label { font-size: 8px; color: var(--label); letter-spacing: .15em; }

/* panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.readout .freq { font-size: 42px; font-weight: 700; color: var(--phos); text-shadow: var(--glow); line-height: 1; }
.readout .freq .unit { font-size: 14px; color: var(--label); }
.readout .chan { font-size: 10px; color: var(--ink-dim); margin-top: 4px; letter-spacing: .08em; }
.freq-entry { margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.freq-entry input {
  background: var(--bg0); color: var(--phos); border: 1px solid var(--line-solid);
  border-radius: 5px; font-family: var(--mono); font-size: 12px; padding: 5px 8px; width: 110px;
}
.freq-entry .err { font-size: 9px; color: var(--red); }

/* s-meter */
.smeter .lbl { display: flex; justify-content: space-between; font-size: 8px; color: var(--label); margin-bottom: 6px; }
.smeter .lbl .val { color: var(--phos); }
.smeter .bar { position: relative; height: 12px; border-radius: 6px; background: #0d1f17; overflow: hidden; }
.smeter .bar .fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--phos-dim), var(--phos)); transition: width .12s linear; }
.smeter .bar .sql-marker { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--amber); box-shadow: 0 0 6px var(--amber); display: none; }
.smeter canvas { display: block; width: 100%; height: 28px; margin-top: 8px; }
.smeter .scale { font-size: 7px; color: #2c5240; margin-top: 4px; letter-spacing: .35em; }

/* presets */
.presets .cap { font-size: 8px; color: var(--label); letter-spacing: .2em; margin-bottom: 7px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 9px; color: var(--ink-dim); border: 1px solid var(--line-solid);
  border-radius: 5px; padding: 5px 9px; background: transparent; cursor: pointer; font-family: var(--mono);
}
.chip:hover { color: var(--ink); }
.chip.active { background: #143f2c; color: var(--phos); border-color: var(--phos-dim); }

/* scan / watch */
.scan { margin-top: 14px; }
.scan .cap { display: flex; align-items: center; gap: 10px; }
.scan-state { color: var(--phos); font-size: 9px; letter-spacing: .06em; text-shadow: 0 0 8px #16c47766; }
.scan-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.sbtn {
  font-size: 9px; color: var(--ink-dim); border: 1px solid var(--line-solid);
  background: transparent; border-radius: 5px; padding: 5px 9px; cursor: pointer; font-family: var(--mono);
}
.sbtn:hover { color: var(--ink); }
.sbtn.active { background: #143f2c; color: var(--phos); border-color: var(--phos-dim); box-shadow: 0 0 10px -2px var(--phos-dim); }
.sbtn.ch16 { color: var(--amber); border-color: #6b4f24; }
.band-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.band-label { font-size: 8px; color: var(--label); letter-spacing: .12em; }
.bands { display: flex; gap: 5px; flex-wrap: wrap; }
.sbtn.band { color: var(--ink-dim); border-color: #1c3a2c; }
.sbtn.band:hover { color: var(--phos); border-color: var(--phos-dim); }
.range-row { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 9px; color: var(--label); flex-wrap: wrap; }
.range-row input {
  background: var(--bg0); color: var(--phos); border: 1px solid var(--line-solid);
  border-radius: 5px; font-family: var(--mono); font-size: 11px; padding: 4px 7px; width: 82px;
}

/* waterfall placeholder */
.waterfall .cap { display: flex; justify-content: space-between; font-size: 8px; color: var(--label); letter-spacing: .2em; margin-bottom: 6px; }
.waterfall .cap .soon { color: #2c5240; }
.waterfall canvas {
  display: block; width: 100%; height: 90px; border-radius: 6px;
  border: 1px solid var(--line); background: #05080a; image-rendering: pixelated;
}

/* transport */
.transport {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--line); background: var(--panel);
}
.transport .left { display: flex; gap: 12px; align-items: center; }
.play {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--phos); color: var(--bg0); font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.play.playing { background: var(--phos-dim); }
.play-wrap { display: flex; justify-content: center; margin-top: 16px; }
.badge { font-size: 8px; color: #2c5240; letter-spacing: .15em; }

.body, .waterfall, .transport { padding-left: 18px; padding-right: 18px; }

/* receivers / ships map (Phase 3 — Layout A: below the radio) */
.mapwrap { width: 100%; max-width: 780px; margin: 14px auto 0; font-family: var(--mono); }
.map-hdr { display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .15em; color: var(--label); padding: 0 4px 6px; }
.map-note { color: var(--phos); }
#map { height: 320px; border: 1px solid var(--line); border-radius: 12px; background: #05080a; }
.leaflet-container { background: #05080a; }
.leaflet-control-attribution { background: rgba(5, 8, 10, .7) !important; color: #3f7a5e !important; }
.leaflet-control-attribution a { color: #5fae89 !important; }
.map-foot { font-size: 9px; color: var(--ink-dim); padding: 7px 4px; letter-spacing: .05em; }