/* controls.css — the receiver controls: command buttons, tuning steps, band selector and the
   frequency display with its direct entry.
   There is no control BAR any more: each of these now sits in the widget or the header where
   it means something, so what is described here is a set of shared idioms and not a place. */

.btn{font-family:var(--mono); font-size:12px; color:var(--ink); cursor:pointer;
     background:#121b23; border:1px solid var(--edge); border-radius:2px;
     padding:8px 14px; letter-spacing:.06em; user-select:none;}
.btn:hover{background:#172530; border-color:#2a3946;}
.btn:active{transform:translateY(1px);}
.btn.act{color:var(--teal); border-color:#1f5048; background:#0d1f1c;}
/* A running pass fills its OWN control, left to right, from `--pass`. The button is lit while
   the pass runs and is now also what ends it, so it is where the eye already is -- and the
   corner of the picture stays clear of furniture. The fill is painted UNDER the label, never
   beside it: a control that grew as the pass advanced would push its neighbours along with it.
   A hard stop, not a blend, so the edge states a position rather than suggesting one. */
.btn.act{background-image:linear-gradient(90deg, #17403a 0 var(--pass,0%), transparent var(--pass,0%));}
/* The label of a RUNNING pass pulses. The fill says how far along it is; the pulse says it is
   still going -- a pass that stalls stops pulsing, which a filled bar cannot show. It is the
   text that moves and not the button: the fill and the border have to stay where they are, or
   the position would flicker along with the sign of life.
   Scoped to a receiver command, since `.act` elsewhere means a toggle that is simply ON. */
@keyframes passpulse{50%{color:#42706a;}}
.btn[data-cmd].act{animation:passpulse 1.15s ease-in-out infinite;}
.btn.tog{padding:6px 11px; font-size:11px; letter-spacing:.1em;}   /* tuner toggle; on is the active state */
.btn.na{opacity:.35; cursor:not-allowed;}                          /* unsupported by this firmware */

/* Band selector. Joined segments mean an exclusive choice rather than two independent
   buttons, because the tuner is on one band at a time. Quiet at rest, since it is a state
   and not an action; the active segment carries the colour of states confirmed by the
   backend, like the active buttons. */
.segbar{display:inline-flex; border:1px solid var(--edge); border-radius:2px;
        overflow:hidden; margin-right:14px;}
.segbar .seg{font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--dim);
             background:#121b23; border:0; border-left:1px solid var(--edge);
             padding:4px 10px; cursor:pointer; user-select:none;}
.segbar .seg:first-child{border-left:0;}
.segbar .seg:hover{background:#172530; color:var(--ink);}
.segbar .seg.act{color:var(--teal); background:#0d1f1c;}
/* Awaiting confirmation: the command has gone and the backend has not answered yet. */
.segbar .seg.pending{color:var(--ink); opacity:.6;}
.freqedit{font-family:var(--mono); font-size:34px; font-weight:600; letter-spacing:.02em;
          width:3.6em; text-align:left; color:#eaf2f7; background:#0c1319;
          border:1px solid var(--teal); border-radius:2px; padding:0 8px; outline:none;}