/* Old handheld: rubber shell, real top controls, olive LCD and speaker vents. */
.porto-top,.porto-grille,.porto-audio-settings{display:none}
.radio-page:has(.radio[data-view=portofoon]) main{max-width:440px;padding:10px 12px calc(125px + env(safe-area-inset-bottom,0px))}
.radio-page .radio[data-view=portofoon]{--info-height:230px;--page-accent:#e9bb72;background:linear-gradient(95deg,#242a26,#3d4439 18%,#353c32 78%,#202720);border:6px solid #171e19;border-radius:25px 25px 32px 32px;box-shadow:0 20px 45px #0009,inset 0 0 0 2px #56604d,0 0 0 1px #535b4f;overflow:visible}
.radio-page .radio[data-view=portofoon]::before,.radio-page .radio[data-view=portofoon]::after{display:none}
.radio-page .radio[data-view=portofoon] .porto-top{display:flex;align-items:end;gap:12px;min-height:100px;margin:0 10px;padding:9px 5px 10px;border-bottom:2px solid #141b15;position:relative;background:linear-gradient(0deg,#252c24,transparent)}
.porto-antenna{width:28px;height:92px;position:relative;flex:none;margin-left:5px;border:2px solid #0d120e;border-radius:13px 13px 7px 7px;background:repeating-linear-gradient(0deg,#111812 0 5px,#2d372c 6px 9px);box-shadow:inset 3px 0 3px #ffffff17,3px 2px 3px #0008}
.porto-antenna:after{content:'';position:absolute;bottom:-8px;left:-5px;right:-5px;height:18px;border-radius:5px;background:linear-gradient(#48503f,#161e15);border:2px solid #11180f}.porto-top-mark{align-self:center;color:#b4b39a;font:7px/1.9 monospace;letter-spacing:1px}
.radio-page .radio[data-view=portofoon] .porto-top .control-bank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:none;margin:0 0 0 auto;padding:0;border:0;align-self:center}
.radio-page .radio[data-view=portofoon] .porto-top .mic-gain-control{display:flex}.radio-page .radio[data-view=portofoon] .porto-top .rotary-control{display:flex;flex-direction:column;gap:5px;min-width:54px;grid-column:auto}
.radio-page .radio[data-view=portofoon] .porto-top .knob-label{font:8px monospace;color:#d9d2ad;letter-spacing:1px}.radio-page .radio[data-view=portofoon] .porto-top .small-control-knob{width:46px;height:46px;border-color:#11190f;background:repeating-conic-gradient(#171f16 0deg 8deg,#626a52 8deg 12deg);box-shadow:0 4px 5px #0009,0 0 0 1px #6a7158}.radio-page .radio[data-view=portofoon] .porto-top .small-control-knob:after{background:radial-gradient(at 30% 25%,#59604b,#21291c 70%)}.radio-page .radio[data-view=portofoon] .porto-top output{font-size:9px;color:#e1bd78}
.radio-page .radio[data-view=portofoon] .radio-head{padding:10px 13px 8px;border:0;background:none;gap:8px}.radio-page .radio[data-view=portofoon] .radio-brand{font-size:24px;color:#eee3bb;text-shadow:0 2px #151c12}.radio-page .radio[data-view=portofoon] .radio-head small{color:#a3ab8e;font-size:6px;letter-spacing:1px}.radio-page .radio[data-view=portofoon] #power{border-radius:50%;width:44px;height:44px;background:#222d22;border:2px solid #788568;color:#d5dbad;box-shadow:0 3px 5px #0007}.radio-page .radio[data-view=portofoon] .radio-head .connection-bar{background:#202a1f;border-color:#56634b;border-radius:3px;padding:6px;gap:6px}.radio-page .radio[data-view=portofoon] .connection-message #connection-state{color:#ced9aa;font-size:9px}.radio-page .radio[data-view=portofoon] .connection-message #connection-note{display:none}.radio-page .radio[data-view=portofoon] .connection-actions button{min-height:40px;font-size:9px;background:#41493a;border-color:#778165;color:#ede4c6}
.radio-page .radio[data-view=portofoon] .transceiver-deck{padding:6px 12px 8px;gap:12px}.radio-page .radio[data-view=portofoon] .screen-unit{background:#a4ae80;border:5px solid #161e15;border-radius:6px;box-shadow:0 0 0 1px #7b8365,inset 0 2px 8px #24341988,0 4px 8px #0005;color:#23301c}.radio-page .radio[data-view=portofoon] .screen-top{background:#919d70;color:#25321e;font-size:7px;padding:6px;border-bottom:1px solid #71805a}.radio-page .radio[data-view=portofoon] #radio-menu-open{background:#b7bd91;border-color:#69784d;color:#23301c;border-radius:2px;font-size:9px;min-height:40px}.radio-page .radio[data-view=portofoon] .screen-unit .indicators{background:#a8b185;color:#34432a;padding:5px 7px;font-size:7px}.radio-page .radio[data-view=portofoon] .screen-unit .indicators #station-label{color:#34432a;font-size:7px}.radio-page .radio[data-view=portofoon] #mode-label{color:#34432a}
.radio-page .radio[data-view=portofoon] .console .display{min-height:95px;padding:8px 4px;background:linear-gradient(#bac395,#a4b17d);color:#23311b;border-bottom:1px solid #819063;gap:7px;box-shadow:inset 0 2px 6px #33402033}.radio-page .radio[data-view=portofoon] .console .display #channel{font-size:63px;color:#26351d;text-shadow:0 1px #e0e6b088;letter-spacing:-3px}.radio-page .radio[data-view=portofoon] .console .display>span{color:#465337;font-size:7px;max-width:35px}.radio-page .radio[data-view=portofoon] .console .display b{font:700 9px monospace;color:#304124;max-width:95px}
.radio-page .radio[data-view=portofoon] .console .meter{background:#a8b583;padding:8px;color:#2b3c22}.radio-page .radio[data-view=portofoon] .meter .scale,.radio-page .radio[data-view=portofoon] .meter .audio-controls,.radio-page .radio[data-view=portofoon] .meter-bottom{display:none}.radio-page .radio[data-view=portofoon] .current-speaker{border:0;margin:0;padding:0;min-height:35px}.radio-page .radio[data-view=portofoon] .current-speaker>span{color:#4c5c3b;font-size:7px}.radio-page .radio[data-view=portofoon] .current-speaker strong{color:#283c1f;font:700 14px/1.4 monospace;white-space:normal;overflow-wrap:anywhere}.radio-page .radio[data-view=portofoon].receiving .console .display{background:linear-gradient(#d3dda5,#bacb89)}.radio-page .radio[data-view=portofoon].transmitting .console .display{background:linear-gradient(#e4c18a,#bda575)}
.radio-page .radio[data-view=portofoon] .screen-keys{border-top:4px solid #1d2619;background:#2b3425;padding:6px;box-shadow:inset 0 2px #697459}.radio-page .radio[data-view=portofoon] .screen-page-keys{gap:5px}.radio-page .radio[data-view=portofoon] .screen-page-keys button{min-height:44px;padding:6px 1px;background:linear-gradient(#566047,#303b2a);border:1px solid #788264;border-bottom:3px solid #141e11;border-radius:4px;color:#e2dab6;font:700 8px monospace;box-shadow:0 2px 3px #0005}.radio-page .radio[data-view=portofoon] .screen-page-keys [aria-selected=true]{color:#302819;background:linear-gradient(#e8bd74,#ad8547);border-color:#dfc18a;border-bottom-color:#634e2f;box-shadow:0 2px 4px #0006}
.radio-page .radio[data-view=portofoon] .porto-grille{display:block;padding:3px 16px 7px;position:relative;text-align:center}.porto-grille>span{font:700 12px monospace;letter-spacing:5px;color:#d0cfb2;text-shadow:0 2px #182014}.porto-grille>i{display:block;height:68px;margin:10px 0 6px;background:repeating-linear-gradient(0deg,#10180f 0 5px,#626a52 6px,#343e2c 8px,#222c1c 10px);border:2px solid #1d2617;border-radius:17px 17px 30px 30px;box-shadow:inset 0 3px 5px #0008,0 1px #76806055}.porto-grille>small{font:6px monospace;letter-spacing:2px;color:#9ba38a}
.radio-page .radio[data-view=portofoon] .main-tuning .presets{gap:5px}.radio-page .radio[data-view=portofoon] .main-tuning .presets button{background:linear-gradient(#333f2b,#202a19);border:1px solid #6b7858;border-bottom:3px solid #141e10;border-radius:4px;color:#ddd2a5;min-height:44px;font:700 14px monospace}.radio-page .radio[data-view=portofoon] .main-tuning .presets .selected{color:#242d18;background:#bec58f;border-color:#d8dfad}.radio-page .radio[data-view=portofoon] .main-tuning .dial-step button,.radio-page .radio[data-view=portofoon] .main-tuning #display-mode{background:linear-gradient(#5d664b,#3b462f);border:1px solid #818d68;border-bottom:3px solid #202c19;border-radius:4px;color:#eee3bd}.radio-page .radio[data-view=portofoon] .main-tuning #mode-value{color:#edc981;font-size:9px}
.radio-page .radio[data-view=portofoon] .phone-controls{background:#293422;border:1px solid #586648;border-radius:5px;padding:7px}.radio-page .radio[data-view=portofoon] .porto-audio-settings{display:block}.porto-audio-settings summary{min-height:44px;padding:12px 5px;box-sizing:border-box;font:10px monospace;color:#d5d7ae;cursor:pointer}.radio-page .radio[data-view=portofoon] .porto-audio-settings .phone-sliders{padding:6px 5px 9px}.radio-page .radio[data-view=portofoon] .phone-sliders label{color:#c2cba8}.radio-page .radio[data-view=portofoon] .phone-sliders output{color:#e9bf78}.radio-page .radio[data-view=portofoon] .phone-sliders input{accent-color:#d6b77a}.radio-page .radio[data-view=portofoon] .phone-utilities .screen-tools button{background:#4a573b;color:#e9dfb8;border-color:#829167;border-bottom:3px solid #182711;font:9px monospace;border-radius:4px}.radio-page .radio[data-view=portofoon] .phone-utilities .screen-tools{margin-top:2px}
.radio-page .radio[data-view=portofoon] .transmit-controls{margin:0 13px 8px;gap:8px;border-color:#626e52}.radio-page .radio[data-view=portofoon] .transmit-controls .station-panel{border-color:#647253}.radio-page .radio[data-view=portofoon] .station-controls select{background:#2c3823;color:#e5e4c1;border-color:#73835d}.radio-page .radio[data-view=portofoon] .station-controls label,.radio-page .radio[data-view=portofoon] .switches{color:#c3cfaf}.radio-page .radio[data-view=portofoon] .queue-display{background:#26331f;border-color:#586a46}.radio-page .radio[data-view=portofoon] .queue-display p,.radio-page .radio[data-view=portofoon] .panel-label{color:#becba7}.radio-page .radio[data-view=portofoon] #raise-hand{background:#414f32;color:#e8e6bd;border-color:#71845a}
.radio-page .radio[data-view=portofoon] .radio-foot{background:#202a1b;color:#a7b490;border-color:#657251;font-size:7px}.radio-page .radio[data-view=portofoon] .radio-foot i{background:#9cc56e}
.radio-page .radio[data-view=portofoon] .phone-ptt-dock{width:min(440px,100%);background:#222b1ef5;border:3px solid #536145;border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -7px 25px #0008;backdrop-filter:blur(8px)}.radio-page .radio[data-view=portofoon] .phone-ptt-dock #ptt{height:69px;border:2px solid #f2c18b;border-bottom:5px solid #75421e;border-radius:7px;background:linear-gradient(110deg,#b87338,#e5a35a 55%,#bc793d);box-shadow:inset 0 1px #ffe0ad,0 4px 5px #0009;color:#251e12;letter-spacing:1px}.radio-page .radio[data-view=portofoon] .phone-ptt-dock #ptt strong{font:900 29px/1 monospace}.radio-page .radio[data-view=portofoon] .phone-ptt-dock #ptt span,.radio-page .radio[data-view=portofoon] .phone-ptt-dock #ptt small{color:#3b2919}.radio-page .radio[data-view=portofoon].transmitting .phone-ptt-dock #ptt{background:linear-gradient(#d05432,#ad351e);border-color:#ffbd8f;color:#fff0cf}.radio-page .radio[data-view=portofoon].transmitting .phone-ptt-dock #ptt span,.radio-page .radio[data-view=portofoon].transmitting .phone-ptt-dock #ptt small{color:#fff0cf}
/* The same LCD becomes a readable information screen for channels, stations and log. */
.radio-page .radio[data-view=portofoon] .display-info-page,.radio-page .radio[data-view=portofoon] .sdr-full-page,.radio-page .radio[data-view=portofoon] .sdr-full-page .side-card,.radio-page .radio[data-view=portofoon] .sdr-page-summary{background:#aab585;color:#26391f;border-color:#7a8c5c}.radio-page .radio[data-view=portofoon] .sdr-full-page :is(h2,h3,b,p,small,span),.radio-page .radio[data-view=portofoon] .sdr-page-summary :is(b,small){color:#304425}.radio-page .radio[data-view=portofoon] .sdr-full-page :is(button,input,select){background:#c9d0a5;color:#25391b;border-color:#6d8251}.radio-page .radio[data-view=portofoon] .sdr-full-page a{color:#233f1a;text-decoration:underline}.radio-page .radio[data-view=portofoon] #log .entry{border-color:#7f8c65}.radio-page .radio[data-view=portofoon] #log .entry p{color:#25371d}.radio-page .radio[data-view=portofoon] .sdr-full-page #message{background:#d3d8b3;color:#23331c}.radio-page .radio[data-view=portofoon] .sdr-page-summary{padding:7px}.radio-page .radio[data-view=portofoon] .sdr-summary-channel b{color:#2a3c1e}
@media(max-width:350px){.radio-page:has(.radio[data-view=portofoon]) main{padding-left:7px;padding-right:7px}.radio-page .radio[data-view=portofoon] .transceiver-deck{padding-left:8px;padding-right:8px}.porto-top-mark{font-size:6px;letter-spacing:0}.radio-page .radio[data-view=portofoon] .porto-top{gap:7px}.radio-page .radio[data-view=portofoon] .porto-top .control-bank{gap:6px}}
@media(max-height:500px){.radio-page:has(.radio[data-view=portofoon]) main{max-width:440px}.radio-page .radio[data-view=portofoon] .porto-antenna{height:50px}.radio-page .radio[data-view=portofoon] .porto-top{min-height:70px}.radio-page .radio[data-view=portofoon] .phone-ptt-dock #ptt{height:50px}}
.radio-page .radio[data-view=portofoon] #disconnect-server{display:none}
.radio-page .radio[data-view=portofoon] .porto-top .control-bank .mic-gain-control{display:flex}
.radio-page .radio[data-view=portofoon] .display-page-body{position:relative;height:205px;min-width:0;overflow:hidden}
.radio-page .radio[data-view=portofoon] .sdr-receiver-page,.radio-page .radio[data-view=portofoon] .sdr-receiver-page .console{height:100%}
.radio-page .radio[data-view=portofoon] .sdr-receiver-page .console{grid-template-rows:minmax(0,1fr) auto}
.radio-page .radio[data-view=portofoon] .display-info-page:not([hidden]){position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.radio-page .radio[data-view=portofoon] .display-info-page .sdr-page-summary{flex:none}
.radio-page .radio[data-view=portofoon] .display-info-page .radio-drawer.sdr-full-page{height:0;min-height:0;flex:1}
.radio-page .radio[data-view=portofoon].off .sdr-receiver-page{opacity:.78}
.radio-page .radio[data-view=portofoon].off .console{opacity:1}
.radio-page .radio[data-view=portofoon] .screen-unit .screen-top #radio-menu-open{color:#26371b;background:#b8c18e;border-color:#657e48}