/* Bakkie and Compact share the current front-panel controls, not the old layout.
   SDR keeps its existing display and waterfall implementation. */
.radio-page:has(.radio:not([data-view=sdr])) main{max-width:1440px;padding-top:10px}
.radio-page:has(.radio:not([data-view=sdr])) .intro{display:none}
.radio-page:has(.radio:not([data-view=sdr])) .station-strip{margin-bottom:10px}
.radio-page .radio:not([data-view=sdr]) .radio-head{padding-top:12px;padding-bottom:10px;gap:10px}
.radio-page .radio:not([data-view=sdr]) .radio-head .connection-bar{flex-basis:360px;padding:7px 10px}
.radio-page .radio:not([data-view=sdr]) .transceiver-links{margin-top:8px}
.radio-page .radio:not([data-view=sdr]) .transceiver-links .connection-diagnostics{padding-top:6px;padding-bottom:6px}
.radio-page .radio:not([data-view=sdr]) .transceiver-deck{grid-template-columns:minmax(0,1fr) 168px;align-items:start;gap:14px;padding:10px 18px 8px}
.radio-page .radio:not([data-view=sdr]) .screen-unit{align-self:start}
.radio-page .radio:not([data-view=sdr]) .screen-top{padding:5px 8px}
.radio-page .radio:not([data-view=sdr]) .screen-keys button{padding:8px 2px}
.radio-page .radio:not([data-view=sdr]) .main-tuning{gap:6px}
.radio-page .radio:not([data-view=sdr]) .main-tuning .model-mark,
.radio-page .radio:not([data-view=sdr]) .main-tuning>small,
.radio-page .radio:not([data-view=sdr])>.tuning,
.radio-page .radio:not([data-view=sdr])>.speaker-strip{display:none}
.radio-page .radio:not([data-view=sdr]) .main-tuning #display-mode{width:100%;max-width:168px;margin:0;padding:8px 10px}
.radio-page .radio:not([data-view=sdr]) .main-tuning .dial{width:104px;height:104px;margin:3px 0}
.radio-page .radio:not([data-view=sdr]) .main-tuning .dial i{transform-origin:50% 40px}
.radio-page .radio:not([data-view=sdr]) .dial-caption{font-size:8px}
.radio-page .radio:not([data-view=sdr]) .dial-step button{padding:2px 15px}
.radio-page .radio:not([data-view=sdr]) .channel-scale{margin:8px 24px 4px}

/* The lower controls have the same predictable footprint in every mode. */
.radio-page .radio:not([data-view=sdr]) .controls{grid-template-columns:120px minmax(0,1fr);align-items:center;gap:22px;margin:0;padding:10px 22px 8px}
.radio-page .radio:not([data-view=sdr]) .ptt-wrap>button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:80px;gap:3px;padding:6px}
.radio-page .radio:not([data-view=sdr]) .ptt-wrap>button strong{font-size:30px;line-height:1.1}
.radio-page .radio:not([data-view=sdr]) .ptt-wrap>button span{font-size:6px;line-height:1.3;letter-spacing:.3px}
.radio-page .radio:not([data-view=sdr]) .ptt-wrap>button small{display:block;max-width:100%;font-size:5px;line-height:1.4;letter-spacing:.15px}
.radio-page .radio:not([data-view=sdr]) .ptt-wrap>p{font-size:8px;margin:4px 0 0}
.radio-page .radio:not([data-view=sdr]) .ptt-clock{width:100%;margin-top:6px}
.radio-page .radio:not([data-view=sdr]) .switches{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;font-size:9px}
.radio-page .radio:not([data-view=sdr]) .switches label{display:flex;align-items:center;gap:10px;margin:0}
.radio-page .radio:not([data-view=sdr]) .switches button{margin:0;padding:6px}
.radio-page .radio:not([data-view=sdr]) .radio-utility{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:16px;margin:0 22px 10px;padding-top:10px;border-top:1px solid #3a4e5c}
.radio-page .radio:not([data-view=sdr]) .speech-queue{grid-template-columns:100px minmax(0,1fr);gap:10px;margin:0;padding:0;border:0;box-shadow:none}
.radio-page .radio:not([data-view=sdr]) .queue-display{padding:7px 9px}
.radio-page .radio:not([data-view=sdr]) .station-controls{gap:8px 12px;padding:0;border:0}
.radio-page .radio:not([data-view=sdr]) .station-controls label{gap:4px;font-size:9px}
.radio-page .radio:not([data-view=sdr]) .station-controls select{padding:5px;font-size:10px}
.radio-page .radio:not([data-view=sdr]) .radio-foot{padding-top:9px;padding-bottom:9px}

/* Bakkie: an amber channel display and readable modulation meters. */
.radio-page .radio[data-view=bakkie] .screen-top{background:#343323;color:#dccc97}
.radio-page .radio[data-view=bakkie] .console{grid-template-columns:minmax(0,1fr) 190px;min-height:230px}
.radio-page .radio[data-view=bakkie] .console .meter{display:flex;flex-direction:column;justify-content:center;padding:16px;background:linear-gradient(130deg,#15282b,#0b181d)}
.radio-page .radio[data-view=bakkie] .console .display{padding:16px 10px;background:linear-gradient(#202a1d,#121d16);color:#ffda8c}
.radio-page .radio[data-view=bakkie] #channel{font-size:76px}
.radio-page .radio[data-view=bakkie] .current-speaker{min-height:48px;margin-top:12px}
.radio-page .radio[data-view=bakkie] .current-speaker strong{font-size:24px}
.radio-page .radio[data-view=bakkie] .level-row{grid-template-columns:24px minmax(24px,1fr) 100px;gap:5px}
.radio-page .radio[data-view=bakkie] .level-row>span{grid-column:3;text-align:right}
.radio-page .radio[data-view=bakkie] .level-scale{margin-right:100px}

/* Compact: a short display plus one horizontal control strip on desktop. */
.radio-page .radio[data-view=compact] .transceiver-deck{grid-template-columns:minmax(0,1fr);gap:12px}
.radio-page .radio[data-view=compact] .console{grid-template-columns:128px minmax(0,1fr);min-height:114px}
.radio-page .radio[data-view=compact] .console .display{grid-column:1;grid-row:1;padding:8px;border-left:0;border-right:1px solid #294355}
.radio-page .radio[data-view=compact] #channel{font-size:48px;padding:2px 0}
.radio-page .radio[data-view=compact] .console .display small{display:none}
.radio-page .radio[data-view=compact] .console .meter{grid-column:2;grid-row:1;display:flex;align-items:center;padding:12px 16px}
.radio-page .radio[data-view=compact] .current-speaker{min-height:0;margin:0;padding:0;border:0}
.radio-page .radio[data-view=compact] .current-speaker strong{font-size:22px;margin-top:6px}
.radio-page .radio[data-view=compact] .channel-scale{display:none}
.radio-page .radio[data-view=compact] .main-tuning{display:grid;grid-template-columns:minmax(130px,1fr) 118px 64px 76px minmax(140px,1fr);align-items:center;gap:12px}
.radio-page .radio[data-view=compact] .main-tuning .presets{grid-column:1;grid-row:1;justify-self:center;margin:0}
.radio-page .radio[data-view=compact] .main-tuning #display-mode{grid-column:2;grid-row:1;max-width:none}
.radio-page .radio[data-view=compact] .main-tuning .dial{grid-column:3;grid-row:1;width:64px;height:64px;margin:0;border-width:5px}
.radio-page .radio[data-view=compact] .main-tuning .dial::after{inset:7px}
.radio-page .radio[data-view=compact] .main-tuning .dial i{height:9px;transform-origin:50% 22px}
.radio-page .radio[data-view=compact] .main-tuning .dial-caption{display:none}
.radio-page .radio[data-view=compact] .main-tuning .dial-step{grid-column:4;grid-row:1;justify-content:center;gap:6px}
.radio-page .radio[data-view=compact] .main-tuning .dial-step button{padding:3px 10px}
.radio-page .radio[data-view=compact] .main-tuning .control-bank{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;grid-column:5;grid-row:1;justify-self:center;margin:0;padding:0 0 0 10px;border-top:0;border-left:1px solid #465864}

.radio-page .radio[data-view=compact] .main-tuning .control-bank .rotary-control{min-width:0}

@media(max-width:1250px){
 .radio-page .radio:not([data-view=sdr]) .radio-utility{grid-template-columns:minmax(0,1fr)}
 .radio-page .radio:not([data-view=sdr]) .station-controls{padding-top:10px;border-top:1px solid #304552}
}
@media(min-width:651px) and (max-width:900px){
 .radio-page .radio[data-view=compact] .main-tuning{grid-template-columns:minmax(90px,1fr) 90px 54px 60px 118px;gap:8px}
 .radio-page .radio[data-view=compact] .main-tuning #display-mode{gap:6px;padding:8px 6px;font-size:11px}
 .radio-page .radio[data-view=compact] .main-tuning #mode-value{font-size:9px}
 .radio-page .radio[data-view=compact] .main-tuning .presets{gap:3px}
 .radio-page .radio[data-view=compact] .main-tuning .presets button{font-size:12px}
 .radio-page .radio[data-view=compact] .main-tuning .dial{width:54px;height:54px}
 .radio-page .radio[data-view=compact] .main-tuning .dial i{transform-origin:50% 17px}
}
@media(max-width:650px){
 .radio-page .radio:not([data-view=sdr]) .transceiver-deck{grid-template-columns:minmax(0,1fr);gap:12px;padding:10px 14px 8px}
 .radio-page .radio:not([data-view=sdr]) .main-tuning{display:grid;grid-template-columns:minmax(0,1fr) 100px;gap:8px 14px;padding:0 4px}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .presets{grid-column:1;grid-row:1;max-width:none;margin:0}
 .radio-page .radio:not([data-view=sdr]) .main-tuning #display-mode{grid-column:1;grid-row:2;max-width:none}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .control-bank{grid-column:1;grid-row:3/6;max-width:none;align-self:start;justify-self:stretch;gap:6px;margin:0;padding:7px 0 0;border-top:1px solid #465864;border-left:0}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .dial{grid-column:2;grid-row:1/4;justify-self:center;width:84px;height:84px;border-width:7px;margin:0}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .dial::after{inset:12px}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .dial i{height:14px;transform-origin:50% 30px}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .dial-caption{display:block;grid-column:2;grid-row:4;font-size:7px}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .dial-step{grid-column:2;grid-row:5;justify-self:center;gap:10px}
 .radio-page .radio:not([data-view=sdr]) .main-tuning .dial-step button{padding:2px 15px}
 .radio-page .radio:not([data-view=sdr]) .controls{grid-template-columns:100px minmax(0,1fr);gap:12px;padding:12px 16px}
 .radio-page .radio:not([data-view=sdr]) .switches{grid-column:2;font-size:8px;gap:10px}
 .radio-page .radio:not([data-view=sdr]) .ptt-wrap>button{width:88px;height:80px}
 .radio-page .radio:not([data-view=sdr]) .radio-utility{gap:10px;margin:0 16px 10px}
 .radio-page .radio:not([data-view=sdr]) .speech-queue{grid-template-columns:90px minmax(0,1fr)}
 .radio-page .radio:not([data-view=sdr]) .station-controls{gap:10px}
 .radio-page .radio:not([data-view=sdr]) .station-controls select{max-width:140px}
 .radio-page .radio[data-view=bakkie] .console{grid-template-columns:minmax(0,1fr);min-height:0}
 .radio-page .radio[data-view=bakkie] .console .display{grid-column:1;grid-row:1;min-height:138px;border-left:0;border-bottom:1px solid #294355;padding:10px}
 .radio-page .radio[data-view=bakkie] #channel{font-size:64px}
 .radio-page .radio[data-view=bakkie] .console .meter{grid-column:1;grid-row:2;min-height:170px;padding:12px}
 .radio-page .radio[data-view=bakkie] .current-speaker strong{font-size:21px}
 .radio-page .radio[data-view=bakkie] .channel-scale{margin:8px 18px 4px}
 .radio-page .radio[data-view=compact] .console{grid-template-columns:104px minmax(0,1fr);min-height:110px}
 .radio-page .radio[data-view=compact] #channel{font-size:40px}
 .radio-page .radio[data-view=compact] .console .meter{padding:10px}
 .radio-page .radio[data-view=compact] .current-speaker strong{font-size:18px}
}
@media(max-width:650px){
 /* Leave the corner screws clear of the brand lettering. */
 .radio-page .radio:is([data-view=sdr],[data-view=bakkie],[data-view=compact]) .radio-head{padding-top:24px}
}

/* Network S-style meter replaces the two external connection detail panels. */
.radio-page .radio>.recovery-note{margin:8px 18px;padding:10px 12px}
.radio-page .radio>.recovery-note[hidden]{display:none}
.radio-page .radio:not([data-view=sdr]) .link-quality{display:none}
.link-quality{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:7px 10px;background:#0b202c;border-bottom:1px solid #294355;font:9px monospace;color:#bed5e4}
.link-strength{display:grid;grid-template-columns:auto minmax(60px,1fr) 112px;align-items:center;gap:9px;min-width:0}
.link-label{color:#9abacb;font-size:8px;white-space:nowrap}
.link-scale{display:flex;justify-content:space-between;font:7px monospace;color:#7f9faf;margin-bottom:2px}
#link-quality-meter{display:block;appearance:none;width:100%;height:10px;background:#07131d;border:1px solid #3d5666;border-radius:1px;overflow:hidden}
#link-quality-meter::-webkit-meter-bar{background:#07131d;border:0;border-radius:0}
#link-quality-meter::-webkit-meter-optimum-value{background:repeating-linear-gradient(90deg,transparent 0 calc(11.11% - 2px),#07131d calc(11.11% - 2px) 11.11%),#30dcbb}
#link-quality-meter::-webkit-meter-suboptimum-value{background:#f0ca69}
#link-quality-meter::-webkit-meter-even-less-good-value{background:#f3866f}
#link-quality-meter::-moz-meter-bar{background:#30dcbb}
.link-quality[data-level=good] #link-quality-meter::-moz-meter-bar{background:#f0ca69}
.link-quality[data-level=poor] #link-quality-meter::-moz-meter-bar{background:#f3866f}
.link-quality[data-known=false] #link-quality-meter{opacity:.4}
#quality-rating{font:8px monospace;overflow-wrap:anywhere;color:#9abacb}
.link-quality[data-level=excellent] #quality-rating{color:#64e9c8}
.link-quality[data-level=good] #quality-rating{color:#f0ca69}
.link-quality[data-level=poor] #quality-rating,.link-quality[data-level=lost] #quality-rating{color:#ffa38d}
.link-metric{display:flex;align-items:center;gap:6px;white-space:nowrap}
.link-metric>span{font-size:8px;color:#85a7bb}
.link-metric output{min-width:38px;font:10px monospace;color:#d4e8f4;text-align:right}
@media(max-width:900px){.link-strength{grid-template-columns:auto minmax(50px,1fr) 100px;gap:7px}.link-quality{gap:9px}}
@media(max-width:900px){
 .link-quality{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px 14px;padding:7px 8px}
 .link-strength{grid-column:1/-1;grid-template-columns:auto minmax(60px,1fr) 105px}
 .link-metric{justify-content:space-between}
 .radio-page .radio>.recovery-note{margin-left:14px;margin-right:14px}
}

/* One real RX/TX audio bar; green → amber → red uses the fixed dBFS scale. */
.audio-gauge-scale{position:relative;height:12px;font:7px monospace;color:#8caebb;margin:0 0 3px}
.audio-gauge-scale span{position:absolute;top:0;transform:translateX(-50%)}
.audio-gauge-scale span:nth-child(1){left:0;transform:none}.audio-gauge-scale span:nth-child(2){left:33.33%}.audio-gauge-scale span:nth-child(3){left:66.67%}.audio-gauge-scale span:nth-child(4){left:80%}.audio-gauge-scale span:nth-child(5){right:0;transform:none}
.audio-gauge{position:relative;isolation:isolate;height:20px;border:1px solid #486573;border-radius:2px;background:linear-gradient(90deg,#32d9ae 0 70%,#f2cd6c 70% 90%,#f07a66 90%);--audio-level:0%;--audio-peak:0%}
.audio-gauge-shade{position:absolute;inset:0 0 0 var(--audio-level);background:#081923}
.audio-gauge::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(5% - 2px),#08131e calc(5% - 2px) 5%);pointer-events:none}
#audio-peak{display:none;position:absolute;z-index:1;top:-2px;bottom:-2px;left:clamp(0px,var(--audio-peak),calc(100% - 2px));width:2px;background:#f5f1d2;box-shadow:0 0 4px #fff8}
.audio-gauge.has-peak #audio-peak{display:block}.audio-gauge.clipping{border-color:#ff8b76;box-shadow:0 0 7px #ff685e55}
.audio-gauge-readout{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font:8px monospace;color:#a5c3d0}
#audio-clip.clipping,#audio-main-meter.clipping+#audio-main-level{color:#ff967e}
#audio-peak-label{font-size:7px;color:#7697aa}
/* Latency and packet loss sit below the audio bar in SDR. */
.radio-page .radio .meter .link-quality{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;padding:7px 0 0;margin-top:7px;border:0;border-top:1px solid #28414e;background:none}
.radio-page .radio:not([data-view=sdr]) .meter .link-quality{display:none}
.radio-page .radio .meter .link-strength{grid-column:auto;grid-template-columns:auto minmax(30px,1fr) 58px;gap:5px}
.radio-page .radio .meter .link-scale{font-size:6px}
#link-latency-meter{display:block;appearance:none;width:100%;height:7px;background:#07131d;border:1px solid #3d5666;border-radius:1px;overflow:hidden}
#link-latency-meter::-webkit-meter-bar{background:#07131d;border:0;border-radius:0}
#link-latency-meter::-webkit-meter-optimum-value{background:#37d9b1}#link-latency-meter::-webkit-meter-suboptimum-value{background:#f0ca69}#link-latency-meter::-webkit-meter-even-less-good-value{background:#f3866f}
#link-latency-meter::-moz-meter-bar{background:#37d9b1}
.link-quality[data-known=false] #link-latency-meter{opacity:.4}
.radio-page .radio .meter #quality-rtt,.radio-page .radio .meter #quality-loss{font:8px monospace;color:#d4e8f4;white-space:nowrap;text-align:right}
.radio-page .radio .meter .link-label,.radio-page .radio .meter .link-metric>span{font-size:7px}
.radio-page .radio .meter .link-metric{gap:5px}.radio-page .radio .meter .link-metric output{min-width:25px}
@media(max-width:900px){.radio-page .radio .meter .link-quality{grid-template-columns:minmax(0,1fr);gap:6px}.radio-page .radio .meter .link-metric{justify-content:space-between}.audio-gauge{height:18px}}
.audio-gauge.clipping + .audio-gauge-readout #audio-main-level{color:#ff967e}

/* Keep connection actions together; explanatory text has its own flexible cell. */
.radio-page .radio .radio-head .connection-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px}
.connection-message{display:flex;flex-direction:column;gap:3px;min-width:0;line-height:1.4}
.connection-message #connection-state{color:#55d9dd;font-size:10px;font-weight:600}
.connection-message #connection-note{color:#9bb4c4;font-size:9px;overflow-wrap:anywhere}
.connection-actions{display:flex;align-items:center;flex-wrap:nowrap;gap:6px}
.radio-page .radio .radio-head .connection-actions button{flex:none;min-height:30px;white-space:nowrap;padding:6px 8px;font-size:10px}
.radio-page .radio .connection-actions [hidden]{display:none}

/* Equal side panels put the PTT exactly on the radio's centre line. */
.radio-page .radio .transmit-controls{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;gap:16px;margin:0 20px 10px;padding:12px 0 0;border-top:1px solid #3a4e5c}
.radio-page .radio .transmit-controls .speech-queue{display:flex;flex-direction:column;align-items:stretch;gap:7px;min-width:0;margin:0;padding:0;border:0;box-shadow:none}
.transmit-controls .call-control{display:flex;justify-content:space-between;align-items:center;gap:8px}
.transmit-controls .call-control .panel-label{font-size:8px}
.transmit-controls #raise-hand{padding:6px 9px;min-height:30px;font-size:10px}
.radio-page .radio .transmit-controls .queue-display{padding:7px 9px;min-width:0}
.radio-page .radio .transmit-controls .queue-display p{font-size:9px;line-height:1.4}
.radio-page .radio .transmit-controls #speech-queue{margin:4px 0 0;padding-left:18px;font-size:10px;overflow-wrap:anywhere}
.radio-page .radio .transmit-controls #speech-queue:empty{display:none}
.radio-page .radio .transmit-controls .ptt-wrap{justify-self:center;min-width:0;width:120px}
.radio-page .radio .transmit-controls .ptt-wrap>button{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:104px;height:84px;gap:3px;padding:6px;max-width:100%}
.radio-page .radio .transmit-controls .ptt-wrap>button strong{font-size:32px;line-height:1.1}
.radio-page .radio .transmit-controls .ptt-wrap>button span{font-size:6px;line-height:1.3;letter-spacing:.3px}
.radio-page .radio .transmit-controls .ptt-wrap>button small{display:block;max-width:100%;font-size:5px;line-height:1.4;letter-spacing:.15px}
.radio-page .radio .transmit-controls .ptt-clock{width:100%;margin-top:6px}
.radio-page .radio .transmit-controls .ptt-wrap>p{font-size:8px;line-height:1.4;margin:4px 0 0}
.station-panel{display:flex;flex-direction:column;gap:8px;min-width:0}
.radio-page .radio .transmit-controls .station-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;min-width:0;margin:0;padding:0;border:0}
.radio-page .radio .transmit-controls .station-controls label{gap:3px;min-width:0;font-size:8px}
.radio-page .radio .transmit-controls .station-controls select{width:100%;max-width:100%;padding:5px;font-size:10px}
.radio-page .radio .transmit-controls .station-controls .awake-label{grid-column:1/-1;flex-direction:row;align-items:center;gap:7px}
.radio-page .radio .transmit-controls #awake-status{grid-column:1/-1;font-size:8px}
.radio-page .radio .transmit-controls #awake-status:empty{display:none}
.radio-page .radio .transmit-controls .switches{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:8px}
.radio-page .radio .transmit-controls .switches label{display:flex;align-items:center;gap:6px;margin:0}
.radio-page .radio .transmit-controls .switches button{margin:0;padding:5px;font-size:8px}
@media(max-width:900px){.radio-page .radio .radio-head .connection-bar{gap:8px}.radio-page .radio .transmit-controls{grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr);gap:12px}.radio-page .radio .transmit-controls .ptt-wrap{width:108px}}
@media(max-width:650px){
 .radio-page .radio .radio-head .connection-bar{grid-template-columns:minmax(0,1fr);padding:8px;gap:8px}
 .connection-message{gap:3px}.connection-actions{justify-content:flex-end;gap:5px}
 .radio-page .radio .radio-head .connection-actions button{min-height:32px;padding:6px 7px;font-size:10px}
 .radio-page .radio .transmit-controls{grid-template-columns:minmax(0,1fr);gap:12px;margin:0 16px 10px;padding-top:12px}
 .radio-page .radio .transmit-controls .ptt-wrap{grid-column:1;grid-row:1;width:120px}
 .radio-page .radio .transmit-controls .speech-queue{grid-row:2;display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:10px}
 .transmit-controls .call-control{flex-direction:column;align-items:stretch;gap:5px}
 .radio-page .radio .transmit-controls #raise-hand{padding:6px;font-size:9px}
 .radio-page .radio .transmit-controls .station-panel{grid-row:3;padding-top:10px;border-top:1px solid #304552}
 .radio-page .radio .transmit-controls .station-controls{gap:7px 10px}
 .radio-page .radio .transmit-controls .switches{justify-content:center;gap:8px 12px}
}
.radio-page .radio .transmit-controls #speech-queue{max-height:72px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.radio-page .radio .transmit-controls #raise-hand{width:auto;max-width:100%;flex:none}

/* A font-independent power symbol with room for the complete circular stroke. */
.radio-page .radio .power-area{flex:0 0 auto}
.radio-page .radio #power{display:grid;place-items:center;flex:none;width:40px;height:40px;min-width:40px;padding:0;line-height:1;color:#8ff2ff;background:#102b36;border:1px solid #61a9ba;border-radius:8px;box-shadow:inset 0 0 8px #55d9ed18}
.radio-page .radio #power svg{display:block;width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.radio-page .radio.off #power{color:#b0bbc5;background:#18212a;border-color:#71808d;box-shadow:none}
.radio-page .radio #power:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Power is the single control for connecting and disconnecting. */
.radio-page #connect-server,.radio-page #disconnect-server{display:none!important}
.radio-page .account-action{display:inline-block;padding:10px 14px;margin:4px 6px 8px 0;border:1px solid #61a9ba;border-radius:6px;color:#8ff2ff;text-decoration:none}

/* The auxiliary screen is part of the front panel; there is no sidebar. */
.radio-page .workspace{display:block}
.radio-page main,.radio-page:has(.radio[data-view]) main{max-width:1280px}
.radio-page .radio-drawer{margin:4px 22px 16px;border:1px solid #415361;border-radius:8px;background:linear-gradient(135deg,#19232d,#111922);box-shadow:0 3px 8px #0005,inset 0 1px #ffffff0b;overflow:hidden}
.radio-page .drawer-controls{display:flex;gap:6px;align-items:stretch;padding:6px}
.radio-page .drawer-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:1;min-width:0}
.radio-page .drawer-tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;min-width:0;padding:6px 10px;font:600 10px monospace;letter-spacing:1px;color:#b7cad6;background:linear-gradient(#34424e,#202b35);border:1px solid #52616d;box-shadow:0 2px 2px #0005}
.radio-page .drawer-key{font-size:8px;color:#7e95a6}
.radio-page .drawer-badge{display:inline-grid;place-items:center;min-width:22px;height:19px;padding:0 4px;border:1px solid #49606c;border-radius:3px;background:#0a1820;color:#8fe7ee;font:10px monospace;letter-spacing:0}
.radio-page .drawer-badge[hidden],.radio-page .drawer-panel[hidden],.radio-page .drawer-screen[hidden]{display:none}
.radio-page .drawer-tabs [aria-selected=true]{border-color:#8f9270;color:#ffd18d;background:linear-gradient(#3d443d,#262f2c)}
.radio-page .is-open .drawer-tabs [aria-selected=true]{box-shadow:inset 0 -2px #ffc477,0 0 8px #ffbf4f12}
.radio-page #drawer-unread{background:#e8b762;color:#13212a;border-color:#e8b762}
.radio-page #drawer-toggle{display:grid;place-items:center;width:34px;flex:none;padding:0;border-color:#415664;background:#14222d}
.radio-page #drawer-toggle svg{width:16px;height:16px;fill:none;stroke:#97b9c8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.radio-page .is-open #drawer-toggle svg{transform:rotate(180deg)}
.radio-page .drawer-screen{margin:0 7px 7px;border:1px solid #344b5a;border-radius:4px;background:repeating-linear-gradient(0deg,#ffffff01 0 1px,transparent 1px 4px),#08141e;box-shadow:inset 0 2px 8px #0008}
.radio-page .radio-drawer .side-card{height:260px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#415d6b #0b1821;scrollbar-width:thin;min-width:0;margin:0;padding:16px 20px;border:0;border-radius:0;background:transparent;box-shadow:none}
.radio-page .radio-drawer .card-title{margin-bottom:12px}
.radio-page .radio-drawer h2{font:600 12px monospace;letter-spacing:1px;color:#b6d8e5}
.radio-page #panel-channel:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-content:start}
.radio-page #panel-channel .card-title{grid-column:1/-1}
.radio-page #panel-channel .channel-info{grid-column:2;grid-row:2/5;border-left:1px solid #2c4250;padding:0 0 0 24px}
.radio-page #panel-channel #remote-stations{grid-column:1;max-height:90px;overflow:auto}
.radio-page #panel-channel .notice{padding:10px 0 0;border:0;margin:0}
.radio-page #panel-channel .station{margin-top:8px}
.radio-page #panel-stations:not([hidden]){display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:24px;align-content:start}
.radio-page #panel-stations .card-title{grid-column:1/-1}
.radio-page #panel-stations #network-note{grid-column:1;margin:0 0 10px}
.radio-page #panel-stations #channel-grid{grid-column:1;grid-template-columns:repeat(10,minmax(0,1fr))}
.radio-page #panel-stations #channel-grid button{min-height:29px;font-size:10px}
.radio-page #panel-stations .network-legend{grid-column:1;margin:8px 0 0;font-size:9px}
.radio-page #panel-stations #station-list{grid-column:2;grid-row:2/5;margin:0;max-height:185px;overflow:auto;padding-left:18px;border-left:1px solid #2c4250}
.radio-page .radio-drawer .network-station{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid #203746;border-radius:0;padding:8px 5px;background:transparent;overflow-wrap:anywhere}
.radio-page .radio-drawer .network-station:hover{background:#14303d}
.radio-page .radio-drawer .network-station b{color:#a6e2eb;font-size:11px}
.radio-page .radio-drawer .network-station span{color:#91aebe;font-size:10px}
.radio-page #panel-log:not([hidden]){display:flex;flex-direction:column}
.radio-page #panel-log .card-title{flex:none}
.radio-page #panel-log #log{flex:1;min-height:0;height:auto;overscroll-behavior:contain}
.radio-page #panel-log #message-form{flex:none;margin-top:8px;padding-top:8px}
.radio-page #panel-log .entry{padding:8px 4px}
.radio-page #panel-log .entry b{color:#8edce9}
.radio-page #panel-log .entry small{color:#a7a48e}
.radio-page #panel-log #message{font-size:12px;padding:5px}
@media(max-width:650px){
 .radio-page .radio-drawer{margin:4px 12px 12px}
 .radio-page .drawer-tabs button{padding:6px 3px;gap:4px;font-size:9px;letter-spacing:0}
 .radio-page .drawer-key{display:none}
 .radio-page .drawer-badge{min-width:18px;font-size:9px}
 .radio-page #drawer-toggle{width:26px}
 .radio-page .radio-drawer .side-card{padding:12px;height:310px}
 .radio-page #panel-channel:not([hidden]),.radio-page #panel-stations:not([hidden]){display:block}
 .radio-page #panel-channel .channel-info{margin-top:16px;padding:12px 0 0;border-left:0;border-top:1px solid #2c4250}
 .radio-page #panel-channel #remote-stations{max-height:70px}
 .radio-page #panel-stations #station-list{max-height:110px;margin-top:10px;padding-left:0;border-left:0;border-top:1px solid #2c4250}
 .radio-page #panel-stations #channel-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
 .radio-page #panel-stations #channel-grid button{min-height:25px;font-size:9px}
 .radio-page #panel-log #message{font-size:16px}
}

/* Station profile floats above the receiver without navigating or disconnecting. */
.radio-page #station-profile-dialog{width:min(480px,calc(100vw - 28px));max-width:480px;max-height:calc(100dvh - 28px);padding:22px 24px;border:1px solid #53798e;border-radius:12px;background:linear-gradient(135deg,#152837,#0b1824);box-shadow:0 20px 80px #0009;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#416274 #0b1824;scrollbar-width:thin}
.radio-page #station-profile-dialog::backdrop{background:#020810ac}
.radio-page .station-profile-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.radio-page #station-profile-close{padding:0 4px;border:0;background:none;font-size:25px;line-height:1;color:#abc6d8}
.radio-page #station-profile-title{font:600 29px 'Barlow Condensed',sans-serif;margin:8px 0 14px}
.radio-page #station-profile-message{font-size:11px;line-height:1.6;margin:0 0 15px;padding:10px 12px;background:#0b2632;border:1px solid #315768;border-radius:5px;color:#bbdbe5}
.radio-page #station-profile-message.error{background:#3c2422;border-color:#a66c56;color:#ffd0ba}
.radio-page .station-profile-identity{border-bottom:1px solid #2b4657;padding-bottom:12px;margin-bottom:14px;overflow-wrap:anywhere}
.radio-page .station-profile-identity strong{display:block;color:#83e2ee;font-size:15px}
.radio-page .station-profile-identity span{display:block;color:#a4bbcc;font-size:10px}
.radio-page #station-profile-dialog label{display:block;font-size:11px;color:#c9dbe7;line-height:1.5}
.radio-page #station-profile-dialog label small{color:#87a5b8;font-size:10px;margin-left:6px}
.radio-page #station-profile-dialog input,.radio-page #station-profile-dialog textarea{display:block;width:100%;min-width:0;padding:10px 12px;margin:6px 0 13px;background:#071620;color:#e5f2fa;border:1px solid #3f6175;border-radius:5px;font:13px/1.5 'DM Sans',sans-serif;box-sizing:border-box}
.radio-page #station-profile-dialog textarea{resize:vertical;min-height:80px;max-height:220px}
.radio-page .station-profile-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.radio-page #station-profile-dialog button{font-size:11px;min-height:34px}
.radio-page #station-profile-dialog .station-profile-primary{color:#13202a;background:#f5c271;border-color:#f5c271;font-weight:700}
.radio-page #station-profile-dialog button:disabled,.radio-page #station-profile-dialog input:disabled,.radio-page #station-profile-dialog textarea:disabled{opacity:.6;cursor:wait}
.radio-page .station-profile-secondary{display:inline-block;color:#8eb5c9;font-size:10px;margin-top:16px;text-decoration:none}
.radio-page .station-profile-tabs{display:flex;gap:8px;margin-bottom:16px}
.radio-page .station-profile-tabs button{flex:1;background:#132b3b;border-color:#3b5d72;color:#c1d7e5}
.radio-page .station-profile-tabs [aria-pressed=true]{color:#82e6ed;border-color:#6ab3c2;background:#173943}
.radio-page #station-profile-dialog [hidden]{display:none!important}
@media(max-width:650px){.radio-page #station-profile-dialog{padding:18px}.radio-page #station-profile-dialog input,.radio-page #station-profile-dialog textarea{font-size:16px}.radio-page #station-profile-dialog .eyebrow{font-size:8px;letter-spacing:1px}.radio-page .station-profile-actions button{flex:1}}
.radio-page #station-profile-dialog #station-profile-close{font-size:24px;min-width:34px;padding:0;line-height:1}

/* Current occupancy is separate from the waterfall's activity history. */
.radio-page .band-occupancy{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));height:24px;gap:0;border:1px solid #294355;background:#071420;margin-top:4px}
.radio-page .band-occupancy button{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-right:1px solid #071420;border-radius:0;background:#0e2231;color:#a6f0f4;box-shadow:none;touch-action:manipulation;font:10px monospace;line-height:1}
.radio-page .band-occupancy [data-tone=present]{background:#1d6674;color:#e1fcff}
.radio-page .band-occupancy [data-tone=speech]{background:#3bc7ff;color:#052037}
.radio-page .band-occupancy [data-tone=beacon]{background:#ffc46a;color:#322414}
.radio-page .band-occupancy [data-tone=locked]{background:#39404d;color:#c0c8d1}
.radio-page .band-occupancy [data-tone=unknown]{background:repeating-linear-gradient(135deg,#101c29 0 3px,#172534 3px 6px)}
.radio-page .band-occupancy [aria-pressed=true]{outline:1px solid #ffd487;outline-offset:-1px;z-index:1}
.radio-page .band-occupancy button:focus-visible{outline:2px solid #fff;outline-offset:-2px;z-index:2}
.radio-page .band-occupancy button:disabled{cursor:default;opacity:1}
.radio-page .band-occupancy [data-digits=many] .band-count{font-size:8px;letter-spacing:-1px}
.radio-page .band-occupancy-detail{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;min-height:31px;padding:6px 0 4px;font:10px monospace;color:#b0cbd9}
.radio-page .band-occupancy-detail strong{color:#ffd487;font:600 11px monospace}
.radio-page #band-detail-total{color:#d0e5ef}
.radio-page #band-detail-members{color:#86dce7}
.radio-page #band-detail-guests{color:#a7c0ce}
.radio-page .band-occupancy-detail [hidden]{display:none}
.radio-page .band-occupancy-legend{display:flex;align-items:center;flex-wrap:wrap;gap:5px 12px;font:8px monospace;color:#9bb7cd;margin-bottom:6px}
.radio-page .band-occupancy-legend span{display:inline-flex;align-items:center;gap:5px}
.radio-page .band-occupancy-legend i{display:inline-block;width:6px;height:6px;border-radius:1px}
.radio-page .band-occupancy-legend .presence-key{background:#1d6674;border:1px solid #50a5b3}
.radio-page .band-count-note{margin-left:auto;color:#88a8ba}
@media(max-width:1100px){.radio-page .band-count{display:none}.radio-page .band-occupancy{height:16px}.radio-page .band-count-note{margin-left:0}}
@media(max-width:650px){.radio-page .band-occupancy-detail{font-size:10px;gap:7px 10px;padding:8px 0 7px}.radio-page .band-occupancy-legend{font-size:7px;gap:5px 10px}.radio-page .band-footer{gap:7px}.radio-page #band-channel{min-width:72px;min-height:32px;font-size:12px}}