/* W2JKT online receiver (sdr.html). Uses the shared "On Watch" tokens from site.css.
   The waterfall and its overlays keep their dark instrument ground in both themes. */

.rx-intro{padding:30px 0 14px}
.nav-page{display:none}
/* On a phone the page's name moves into the header and the introduction goes; the status line stays. */
@media(max-width:760px){
  .nav-page{display:inline;font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
  .rx-intro{padding:12px 0 0}
  .open-sec .span-pick{display:none}     /* 7 days of hourly columns cannot be read on a phone */
  .rx-intro h1,.rx-intro p{display:none}
  .rx-intro .rx-state{margin-top:0}
  .rx-intro.quiet{display:none}          /* the header lamp says on or off the air; this line only carries messages */
}
.rx-intro h1{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:850;letter-spacing:-.02em}
/* "Share your SDR" leads to the station list, which offers EasySDR: beside the heading on a wide
   screen, under the waterfall on a phone, where the introduction is hidden. */
.rx-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.rx-share-phone{display:none}
@media(max-width:760px){
  .rx-head .rx-share{display:none}
  .rx-share-phone{display:inline-flex;margin-top:14px}
}
.rx-intro p{margin-top:8px;color:var(--ink-2);max-width:64ch}
.rx-state{margin-top:14px;display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:14px}
.rx-state b{color:var(--ink);font-weight:700}
.rx-state.quiet{display:none}

.rx-sec{padding:0 0 34px}

/* ---- band strip: the activity display is the tuner ---------------------- */
.bands{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}
.band{--level:0;position:relative;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:
    linear-gradient(0deg, color-mix(in srgb,var(--brand) calc(var(--level) * 62%),transparent), color-mix(in srgb,var(--brand) calc(var(--level) * 62%),transparent)),
    var(--surface);
  color:var(--ink);cursor:pointer;padding:9px 6px 8px;text-align:center;font-family:var(--sans)}
.band .name{display:block;font-weight:800;font-size:15px;letter-spacing:-.01em}
.band .rate{display:block;margin-top:2px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-2)}
.band:hover{border-color:var(--brand)}
.band[aria-pressed="true"]{border-color:var(--cq);box-shadow:inset 0 0 0 1px var(--cq)}
.band:disabled{cursor:not-allowed;color:var(--dim);background:var(--surface);border-style:dashed}
.band:disabled .rate{color:var(--dim)}
.bands-note{margin-top:8px;color:var(--dim);font-size:13px}
/* On a phone the strip scrolls sideways; a caret at either edge says more bands are that way. */
.bands-wrap{position:relative}
.bands-more{display:none;position:absolute;top:0;bottom:4px;width:26px;align-items:center;pointer-events:none}
.bands-more svg{width:10px;height:16px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bands-more.left{left:0;justify-content:flex-start;padding-left:2px;background:linear-gradient(90deg,var(--bg) 35%,transparent)}
.bands-more.right{right:0;justify-content:flex-end;padding-right:2px;background:linear-gradient(270deg,var(--bg) 35%,transparent)}
@media(max-width:860px){
  .bands{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74px;overflow-x:auto;padding-bottom:4px}
  .bands-wrap.more-left .bands-more.left,.bands-wrap.more-right .bands-more.right{display:flex}
}

/* ---- the console: stays under the site header while the page scrolls ---- */
.console{position:sticky;top:57px;z-index:40;margin-top:14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;
  padding:13px 16px 12px;display:grid;grid-template-columns:auto auto auto 1fr;align-items:center;gap:12px 20px}
.listen-box{justify-self:end;display:flex;align-items:center;gap:14px;grid-column:-2 / -1}   /* the last column, with or without the HWN buttons */
.here{font-size:13px;color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.here b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;color:var(--ink);font-weight:700}
.here svg{width:16px;height:16px;fill:currentColor;opacity:.8}
.trim{grid-column:1 / -1;display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  border-top:1px solid var(--line-soft);padding-top:11px}
@media(max-width:760px){
  .console{grid-template-columns:1fr;position:static}
  .listen-box{justify-self:stretch;justify-content:space-between}
  .console .listen{flex:1;justify-content:center;max-width:280px}
}

.freq{display:flex;align-items:baseline;gap:8px}
.digits{display:inline-flex;align-items:baseline;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:700;font-size:clamp(1.7rem,3.6vw,2.35rem);line-height:1;letter-spacing:.01em;color:var(--ink)}
.digits button{font:inherit;color:inherit;background:none;border:0;padding:3px 1px;border-radius:5px;cursor:ns-resize}
.digits button:hover{background:var(--surface-2)}
.digits button:focus-visible{outline:2px solid var(--cq);outline-offset:1px}
.digits .lead{color:var(--dim)}
.digits{cursor:text}
.freq-entry{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);
  width:8.5ch;color:var(--ink);background:var(--surface-2);border:1px solid var(--brand);border-radius:8px;padding:2px 8px}
.freq-entry:focus{outline:2px solid var(--cq);outline-offset:1px}
/* Fine tuning, for touch screens where the digits cannot be scrolled */
.fine{display:none;flex:1 1 auto;justify-content:flex-end;gap:6px}
.play{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:44px;height:40px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;color:#fff;background:linear-gradient(180deg,var(--cq),var(--cq-deep));touch-action:manipulation;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--cq) 70%,transparent)}
.play svg{width:18px;height:18px;fill:currentColor}
.play .icon-pause{display:none}
.play[aria-pressed="true"]{background:var(--surface-2);color:var(--ink-2);border-color:var(--line);box-shadow:none}
.play[aria-pressed="true"] .icon-play{display:none}
.play[aria-pressed="true"] .icon-pause{display:block}
.play:focus-visible{outline:2px solid var(--cq);outline-offset:2px}
.fine button{font:700 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;min-width:46px;min-height:40px;padding:0 8px;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.fine button:active{background:var(--brand);color:#fff;border-color:var(--brand)}
.fine button:focus-visible{outline:2px solid var(--cq);outline-offset:2px}
@media(max-width:760px),(pointer:coarse){.fine{display:flex}}
@media(max-width:760px){
  .console .modes{display:flex}
  .console .modes button{flex:1 1 0;min-width:0}    /* equal widths across the row, not the last one taking the slack */
  .trim{gap:12px 8px}
  .trim .knob-bw{display:none}          /* on a phone the passband edges are dragged (hold one to grab it) */
  /* On a phone the play button sits with the fine tuning; the big Listen button and the count go. */
  .console .listen-box{display:none}
  .trim .play{display:inline-flex}
  .trim .knob{flex:1 1 100%}             /* Volume has its own line; the meter, play and fine tuning share the next */
  .trim .meter{flex:1 1 40px;min-width:0}
  .trim .fine{flex:0 0 auto;gap:4px}
  .trim .fine button{min-width:38px;padding:0 5px}
}
.digits .sep{color:var(--dim);padding:0 1px}
.digits .hz{font-size:.62em;color:var(--ink-2)}
.freq .unit{font-weight:700;font-size:13px;color:var(--dim)}

.modes{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2)}
.modes button{font:700 13px/1 var(--sans);color:var(--ink-2);background:none;border:0;border-left:1px solid var(--line);
  padding:10px 12px;cursor:pointer;min-width:46px}
.modes button:first-child{border-left:0}
.modes button:hover{color:var(--ink)}
.modes button[aria-pressed="true"]{background:var(--brand);color:#fff}

.knob{display:flex;align-items:center;gap:10px;flex:1 1 240px;min-width:220px}
.knob label{font-weight:700;font-size:13px;color:var(--ink-2);flex:0 0 auto}
.knob output{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink);flex:0 0 62px;text-align:right;white-space:nowrap}
.knob input[type=range]{flex:1;min-width:80px;accent-color:var(--brand);height:22px;cursor:pointer}

.meter{flex:0 0 190px}
.meter .bar{height:8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.meter .fill{height:100%;width:0;background:linear-gradient(90deg,var(--ok) 0 62%,var(--warn) 62% 84%,var(--fault) 84%);
  background-size:190px 100%;transition:width .18s linear}
.meter .read{margin-top:4px;display:flex;justify-content:space-between;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px;color:var(--ink-2)}

.listen{font:800 14px/1 var(--sans);letter-spacing:.01em;border-radius:11px;border:1px solid transparent;
  padding:13px 20px;cursor:pointer;color:#fff;background:linear-gradient(180deg,var(--cq),var(--cq-deep));
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--cq) 70%,transparent);display:inline-flex;align-items:center;gap:9px}
.listen:hover{filter:brightness(1.05)}
.listen[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);border-color:var(--line);box-shadow:none}
.listen .dot{width:9px;height:9px;border-radius:50%;background:currentColor}
.listen[aria-pressed="true"] .dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}

.console :is(button,input):focus-visible,.band:focus-visible,.fall:focus-visible,.wf-tools :is(button,select,input):focus-visible{
  outline:2px solid var(--cq);outline-offset:2px}

/* ---- waterfall --------------------------------------------------------- */
.fall-box{position:relative;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;background:#06101A;box-shadow:var(--shadow)}
/* pan-y: a vertical swipe on the waterfall still scrolls the page (on a phone it fills most of the
   screen); sideways drags, taps, holds and two-finger pinches still come to the page. */
.fall{position:relative;height:clamp(250px,44vh,430px);touch-action:pan-y;cursor:crosshair;outline-offset:-3px}
@media(max-width:760px){.fall{height:clamp(200px,34vh,320px)}}
.fall canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wf-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 12px;border-top:1px solid #152838;
  background:#0A1420;color:#B0C6DA;font-size:13px}
.wf-tools label{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.wf-tools select,.wf-tools button{font:600 13px/1 var(--sans);color:#E9F1F9;background:#152838;border:1px solid #22384D;
  border-radius:8px;padding:7px 9px;cursor:pointer}
.wf-tools button:hover,.wf-tools select:hover{border-color:#3B9BE0}
.wf-tools input[type=range]{accent-color:#3B9BE0;width:120px}
/* Phones zoom with a pinch, and the tuning step follows the zoom: no span or step menus there, and
   the two sliders share one line. */
@media(max-width:760px){
  .wf-tools .wf-span,.wf-tools .wf-step{display:none}
  .wf-tools{gap:10px 14px}
  .wf-tools #center{flex:1 1 100%}
  .wf-tools .wf-slider{flex:1 1 0;min-width:0}
  .wf-tools .wf-slider input[type=range]{flex:1;width:auto;min-width:0}
}

/* ---- where the bands are open ------------------------------------------ */
.open-sec{padding:26px 0 80px}
.open-sec h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800}
.open-sec .lede{margin-top:6px;color:var(--ink-2);max-width:66ch}
.best{margin:16px 0 14px;display:flex;gap:10px;flex-wrap:wrap}
.best button{font:600 14px/1.3 var(--sans);text-align:left;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 13px;cursor:pointer}
.best button b{font-weight:800}
.best button span{display:block;color:var(--ink-2);font-size:13px;margin-top:2px}
.best button:hover{border-color:var(--brand)}
.span-pick{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface-2);margin-bottom:12px}
.span-pick button{font:700 13px/1 var(--sans);color:var(--ink-2);background:none;border:0;padding:9px 13px;cursor:pointer}
.span-pick button+button{border-left:1px solid var(--line)}
.span-pick button[aria-pressed="true"]{background:var(--brand);color:#fff}
.span-pick button:focus-visible{outline:2px solid var(--cq);outline-offset:-2px}
.heat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.heat canvas{width:100%;height:auto;display:block;cursor:pointer}
.heat .key{margin-top:10px;display:flex;gap:18px;flex-wrap:wrap;color:var(--dim);font-size:13px}

.rx-state .notice{color:var(--warn);font-weight:600}
.modes button:disabled{color:var(--dim);cursor:not-allowed;text-decoration:line-through}
.presets[hidden]{display:none}
.presets button{min-width:0;padding:10px 11px}
.presets button[aria-pressed="true"]{background:var(--cq-deep);color:#fff}
@media(max-width:1020px) and (min-width:761px){.console{grid-template-columns:auto auto 1fr}.presets{grid-column:2}}

/* ---- "Still listening?" ------------------------------------------------- */
.still{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);
  padding:24px 26px 22px;max-width:min(440px,calc(100vw - 32px));box-shadow:var(--shadow)}
.still::backdrop{background:rgba(4,10,18,.62);backdrop-filter:blur(3px)}
.still h2{font-size:1.35rem;font-weight:800}
.still p{margin-top:10px;color:var(--ink-2);line-height:1.5}
.still p b{color:var(--ink)}
#still-left{font-family:var(--mono);font-variant-numeric:tabular-nums}
.still-buttons{margin-top:18px;display:flex;gap:12px;align-items:center}
.still .quiet{font:700 14px/1 var(--sans);color:var(--ink-2);background:none;border:1px solid var(--line);border-radius:11px;padding:13px 18px;cursor:pointer}
.still .quiet:hover{color:var(--ink);border-color:var(--brand)}
.still :is(button):focus-visible{outline:2px solid var(--cq);outline-offset:2px}