/* Touch-first receiver: big tabs, direct sliders and a thumb-accessible PTT dock. */
.phone-controls,.phone-ptt-dock{display:none}
.radio-page:has(.radio:is([data-view=telefoon],[data-view=portofoon])) main{max-width:560px;padding:8px 8px calc(116px + env(safe-area-inset-bottom,0px))}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]){--info-height:clamp(240px,40svh,360px);--page-accent:#72efe0;background:linear-gradient(145deg,#192b38,#0d1721 75%);border-color:#436170;border-radius:16px;box-shadow:0 14px 45px #0008,inset 0 0 0 3px #0a131b;overflow:visible}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon])::before,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon])::after{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .radio-head{padding:12px 10px 9px;gap:8px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .radio-head>div:first-child{padding-left:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .radio-brand{font-size:25px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .radio-head small{font-size:7px;letter-spacing:.6px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .power-area{margin-left:auto}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .power-area>span{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #power{width:46px;height:46px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .radio-head .connection-bar{order:3;flex-basis:100%;display:flex;flex-wrap:nowrap;gap:8px;padding:8px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .connection-message{flex:1;min-width:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .connection-message #connection-state{font-size:10px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .connection-message #connection-note{font-size:9px;line-height:1.4}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .connection-actions{flex-wrap:wrap;max-width:145px;gap:4px;justify-content:flex-end}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .connection-actions button{min-height:40px;padding:6px 8px;font-size:10px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .transceiver-deck{grid-template-columns:minmax(0,1fr);gap:10px;padding:9px 10px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-unit{border:0;border-radius:9px;box-shadow:0 0 0 1px #355769;background:#081622;overflow:hidden}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-top{font-size:7px;padding:7px 9px;background:#0f2c40}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-unit .indicators{padding:7px 9px;font-size:8px;gap:5px 10px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-unit .indicators #station-label{font-size:8px;grid-column:1/-1;text-align:left}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .sdr-panel,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .audio-scope-panel{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console{display:grid;grid-template-columns:minmax(0,1fr);min-height:0;margin:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console .display{grid-column:1;grid-row:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:12px;min-height:100px;border:0;border-bottom:1px solid #28485b;padding:10px;background:radial-gradient(ellipse at 50% 20%,#193e50,#071824);color:#ffce83}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console .display #channel{font-size:60px;line-height:1.2;padding:3px 0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console .display>span{font-size:8px;max-width:45px;line-height:1.6}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console .display b{font:600 11px monospace;max-width:100px;overflow-wrap:anywhere}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console .display small{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console .meter{grid-column:1;grid-row:2;display:flex;flex-direction:column;min-height:0;padding:9px 12px;background:#081824}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .meter .scale{font-size:8px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .meter .audio-controls{margin:6px 0 0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .meter .current-speaker{margin:7px 0 0;min-height:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .current-speaker strong{font:600 17px/1.4 'Barlow Condensed',sans-serif;overflow-wrap:anywhere}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .current-speaker>span{font-size:7px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .meter-bottom{margin-top:6px;padding-top:6px;font-size:7px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-keys{display:block}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-page-keys{grid-template-columns:repeat(4,minmax(0,1fr))}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-page-keys button{min-height:48px;font-size:10px;padding:10px 3px;gap:3px;letter-spacing:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .screen-page-keys #screen-station-count{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .sdr-page-summary{padding:9px 12px;grid-template-columns:60px minmax(0,1fr);gap:10px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .sdr-summary-speaker b{font-size:12px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .sdr-full-page .side-card{padding:13px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #panel-channel:not([hidden]),.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #panel-stations:not([hidden]){display:block}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #panel-channel .channel-info{padding:12px 0 0;margin-top:12px;border:0;border-top:1px solid #29495d}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #panel-stations #station-list{max-height:none;margin-top:12px;padding-left:0;border-left:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #panel-stations #channel-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #channel-grid button{min-height:44px;font-size:12px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .personal-mute{min-height:44px;padding:9px;font-size:11px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #message{font-size:16px;min-height:44px;box-sizing:border-box;min-width:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) #message-form button{min-width:44px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .channel-share-button{min-height:44px;font-size:11px}
/* Presets, channel stepping and sliders replace tiny rotary controls. */
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .model-mark,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .dial,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .dial-caption,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning>small,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .control-bank{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .presets{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;width:100%;gap:6px;margin:0}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .presets button{min-height:44px;font-size:17px;padding:8px 2px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning #display-mode{grid-column:2;grid-row:2;min-height:44px;padding:10px;font-size:10px;max-width:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning #mode-value{font-size:10px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .dial-step{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .main-tuning .dial-step button{min-height:44px;font-size:24px;padding:3px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-controls{grid-column:1/-1;grid-row:3;display:block;min-width:0;background:#0a1a26;border:1px solid #2c4555;border-radius:8px;padding:10px}
.phone-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.phone-sliders label{min-width:0;font:10px monospace;color:#a9cedd}
.phone-sliders output{float:right;font:10px monospace;color:#7deddf}
.phone-sliders input{display:block;width:100%;height:40px;margin:2px 0 0;accent-color:#60dbc8;cursor:pointer;box-sizing:border-box}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-utilities .screen-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;border:0;margin-top:5px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-utilities .screen-tools button{min-height:44px;padding:8px;font-size:10px;background:#142f3e;border:1px solid #365363;border-radius:5px;color:#bce5ed}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .channel-scale,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon])>.tuning,.radio-page .radio:is([data-view=telefoon],[data-view=portofoon])>.speaker-strip{display:none}
/* The existing PTT keeps its original pointer capture and permission checks. */
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock{display:block;position:fixed;z-index:30;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);box-sizing:border-box;padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px));background:#091722f5;border:1px solid #355969;border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 -8px 25px #0006;backdrop-filter:blur(12px)}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock .ptt-wrap{width:100%;text-align:center}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock #ptt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;max-width:none;height:65px;padding:6px;border-radius:8px;border:1px solid #58b7a8;background:linear-gradient(130deg,#1d524d,#102b35);box-shadow:inset 0 1px #9df3dc26;color:#cdfbf0;touch-action:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock #ptt strong{font:700 28px/1 'Barlow Condensed',sans-serif;letter-spacing:2px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock #ptt span{font-size:7px;letter-spacing:.4px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock #ptt small{font-size:7px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]).transmitting .phone-ptt-dock #ptt{background:linear-gradient(130deg,#733e28,#3c2124);border-color:#ffb18a;color:#ffe2ca}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock .ptt-wrap>p{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock .ptt-clock{width:100%;margin:4px 0 0}
.radio-page.phone-editing .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .transmit-controls{display:flex;flex-direction:column;align-items:stretch;margin:0 12px 8px;gap:10px;padding-top:9px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .transmit-controls .speech-queue{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;align-items:center}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .transmit-controls .call-control{display:flex;flex-direction:column;align-items:stretch;gap:4px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .transmit-controls #raise-hand{min-height:44px;font-size:10px;padding:7px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .transmit-controls .station-panel{padding-top:9px;border-top:1px solid #2d4658;gap:8px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .station-controls select{min-height:44px;padding:8px;font-size:13px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .station-controls label{font-size:10px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .switches{font-size:9px;gap:8px 12px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .radio-foot{font-size:7px;padding:9px 12px}
@media(max-height:500px){
 .radio-page .radio:is([data-view=telefoon],[data-view=portofoon]){--info-height:220px}
 .radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-ptt-dock #ptt{height:52px}
 .radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .console .display{min-height:75px}
}

.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-utilities .screen-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-utilities #screen-display{display:none}
.phone-band-picker[hidden]{display:none}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-band-picker{margin:10px 0;border:1px solid #2f5061;border-radius:5px;padding:0 8px}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-band-picker summary{min-height:44px;box-sizing:border-box;padding:13px 2px;font:11px monospace;color:#9be9e2;cursor:pointer}
.radio-page .radio:is([data-view=telefoon],[data-view=portofoon]) .phone-band-picker #channel-grid{padding-bottom:6px}

.phone-sliders .phone-squelch{grid-column:1/-1}.phone-sliders .phone-squelch input{accent-color:#f5c574;height:44px}.phone-sliders .phone-squelch output{color:#f5c574}