/* iPad Pro and desktop share this layout; the foundation lives in tablet-radio.css. */
:is(.ipad-pro, .desktop-radio) {
  --ipad-safe-top: env(safe-area-inset-top);
  --ipad-safe-right: env(safe-area-inset-right);
  --ipad-safe-bottom: env(safe-area-inset-bottom);
  --ipad-safe-left: env(safe-area-inset-left);
}
html:is(.ipad-pro, .desktop-radio) { overflow-y: auto; }
html:is(.ipad-pro, .desktop-radio) body { height: auto; min-height: 100%; overflow: visible; }
:is(.ipad-pro, .desktop-radio) .app-shell {
  width: min(1600px, 100%); height: calc(var(--ipad-view-height, 100dvh) - 76px - var(--ipad-safe-bottom)); min-height: 760px;
  padding: max(16px, var(--ipad-safe-top)) max(20px, var(--ipad-safe-right)) 12px max(20px, var(--ipad-safe-left));
  grid-template-rows: 54px minmax(0, 1fr); gap: 16px; margin-inline: auto;
}
:is(.ipad-pro, .desktop-radio) .topbar, :is(.ipad-pro, .desktop-radio) .topbar:has(.admin-desktop-link:not([hidden])) { height: 54px; gap: 24px; padding: 0 2px 10px; }
:is(.ipad-pro, .desktop-radio) .brand-logo { width: 144px; height: 42px; }
:is(.ipad-pro, .desktop-radio) .callsign-field { width: 240px; }
:is(.ipad-pro, .desktop-radio) .callsign-field span { font-size: 11px; }
:is(.ipad-pro, .desktop-radio) .callsign-field input { font-size: 16px; }
:is(.ipad-pro, .desktop-radio) .ether-state { font-size: 14px; gap: 16px; }
:is(.ipad-pro, .desktop-radio) .community-counts { display: flex; font-size: 12px; gap: 12px; }
:is(.ipad-pro, .desktop-radio) .admin-desktop-link { min-height: 44px; display: grid; place-items: center; }
:is(.ipad-pro, .desktop-radio) .admin-desktop-link[hidden] { display: none; }
:is(.ipad-pro, .desktop-radio) .workspace { grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: minmax(0, 1fr); gap: 24px; }
:is(.ipad-pro, .desktop-radio) .radio {
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: 64px minmax(230px, 1.15fr) minmax(190px, 1fr) 146px 28px;
  column-gap: 20px;
}
:is(.ipad-pro, .desktop-radio) .radio-topline, :is(.ipad-pro, .desktop-radio) .radio-topline.private-channels-available, :is(.ipad-pro, .desktop-radio) .radio-topline.admin-ptt-controls { height: 64px; padding: 8px 18px; gap: 14px; }
:is(.ipad-pro, .desktop-radio) .radio-topline .radio-transmitter { font-size: 14px; height: 36px; line-height: 36px; }
:is(.ipad-pro, .desktop-radio) .member-status-controls { height: 44px; gap: 7px; }
:is(.ipad-pro, .desktop-radio) .member-status-controls button { width: 44px; height: 44px; flex-basis: 44px; }
:is(.ipad-pro, .desktop-radio) .member-status-controls button svg { width: 22px; height: 22px; }
:is(.ipad-pro, .desktop-radio) .meter-section { margin-left: 18px; padding-top: 16px; grid-template-rows: minmax(0, 1fr) 34px; }
:is(.ipad-pro, .desktop-radio) .meter-bezel { padding: 8px; grid-template-rows: minmax(0, 1fr) 32px; }
:is(.ipad-pro, .desktop-radio) .radio .horizontal-meter-face { padding: 14px; gap: 20px; }
:is(.ipad-pro, .desktop-radio) .line-meter-row { gap: 12px; }
:is(.ipad-pro, .desktop-radio) .line-meter-heading { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
:is(.ipad-pro, .desktop-radio) .line-meter-heading strong, :is(.ipad-pro, .desktop-radio) .line-meter-scale { font-size: 13px; }
:is(.ipad-pro, .desktop-radio) .line-meter-track { height: 8px; margin-left: 66px; }
:is(.ipad-pro, .desktop-radio) .line-meter-indicator { height: 19px; }
:is(.ipad-pro, .desktop-radio) .network-readout { padding: 5px 4px; font-size: 11px; gap: 8px; }
:is(.ipad-pro, .desktop-radio) .network-readout b { font-size: 10px; }
:is(.ipad-pro, .desktop-radio) .indicator-row { font-size: 13px; gap: 18px; padding-top: 8px; }
:is(.ipad-pro, .desktop-radio) .display-section { margin-left: 18px; padding: 12px 0 18px; grid-template-rows: minmax(0, 1fr) 62px; gap: 16px; }
:is(.ipad-pro, .desktop-radio) .channel-selection { grid-template-columns: minmax(150px, 1fr) auto; gap: 16px; }
:is(.ipad-pro, .desktop-radio) .channel-display { max-height: 158px; border-width: 6px; grid-template-rows: 16px minmax(0, 1fr) 22px; }
:is(.ipad-pro, .desktop-radio) .display-label { font-size: 12px; }
:is(.ipad-pro, .desktop-radio) .seven-segment-display { transform: none; height: 60px; }
:is(.ipad-pro, .desktop-radio) .channel-details { height: 22px; gap: 8px; }
:is(.ipad-pro, .desktop-radio) .channel-tag, :is(.ipad-pro, .desktop-radio) .channel-tag.channel-frequency, :is(.ipad-pro, .desktop-radio) .channel-dw { font-size: 11px; }
:is(.ipad-pro, .desktop-radio) .channel-controls { grid-template-columns: 48px 68px 48px; grid-template-rows: auto; gap: 7px; }
:is(.ipad-pro, .desktop-radio) .step-button { width: 48px; height: 50px; font-size: 28px; }
:is(.ipad-pro, .desktop-radio) .channel-knob, :is(.ipad-pro, .desktop-radio) .knob-face { width: 68px; height: 68px; }
:is(.ipad-pro, .desktop-radio) .channel-knob { grid-row: auto; grid-column: auto; }
:is(.ipad-pro, .desktop-radio) .knob-face i { height: 19px; }
:is(.ipad-pro, .desktop-radio) .channel-shortcuts { height: 62px; grid-template-columns: minmax(0, 4fr) minmax(56px, 1fr); gap: 7px; }
:is(.ipad-pro, .desktop-radio) .channel-presets { gap: 7px; }
:is(.ipad-pro, .desktop-radio) .preset-button, :is(.ipad-pro, .desktop-radio) .scan-button { height: 62px; }
:is(.ipad-pro, .desktop-radio) .preset-button strong { font-size: 22px; }
:is(.ipad-pro, .desktop-radio) .preset-button span, :is(.ipad-pro, .desktop-radio) .scan-button strong { font-size: 10px; }
:is(.ipad-pro, .desktop-radio) .ptt-section { padding: 18px 18px 18px 0; gap: 28px; }
:is(.ipad-pro, .desktop-radio) body:not(.ptt-classic) .ptt-button { width: min(100%, 320px); height: auto; aspect-ratio: 1; }
:is(.ipad-pro, .desktop-radio) .ptt-round-label strong { font-size: 64px; }
:is(.ipad-pro, .desktop-radio) .ptt-round-label small, :is(.ipad-pro, .desktop-radio) .ptt-round-status, :is(.ipad-pro, .desktop-radio) .ptt-round-mode { font-size: 13px; }
:is(.ipad-pro, .desktop-radio) .speaker-actions { max-width: 320px; padding: 10px; gap: 10px; }
:is(.ipad-pro, .desktop-radio) .speaker-actions :is(.friend-button, .mute-button, .joker-nominate, .stealth-button) { width: 48px; height: 48px; flex-basis: 48px; }
:is(.ipad-pro, .desktop-radio) .speaker-actions button svg { width: 24px; height: 24px; }
:is(.ipad-pro, .desktop-radio) .speaker-actions .joker-nominate img { width: 34px; height: 34px; }
:is(.ipad-pro, .desktop-radio) body.ptt-classic .ptt-button { width: min(100%, 260px); }
:is(.ipad-pro, .desktop-radio) .radio-controls {
  height: 146px; padding: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)) 164px 64px;
  grid-template-rows: auto; gap: 16px;
}
:is(.ipad-pro, .desktop-radio) .dial-control { gap: 14px; }
:is(.ipad-pro, .desktop-radio) .dial-label, :is(.ipad-pro, .desktop-radio) .squelch-control .dial-label { max-width: none; font-size: 12px; gap: 6px; }
:is(.ipad-pro, .desktop-radio) .rotary-knob, :is(.ipad-pro, .desktop-radio) .rotary-face { width: 68px; height: 68px; }
:is(.ipad-pro, .desktop-radio) .rotary-face i { height: 20px; }
:is(.ipad-pro, .desktop-radio) .gain-dual-knob .vox-delay-input, :is(.ipad-pro, .desktop-radio) .vox-delay-face { inset: -4px; width: 76px; height: 76px; }
:is(.ipad-pro, .desktop-radio) .gain-dual-knob #gain, :is(.ipad-pro, .desktop-radio) .gain-inner-face { inset: 10px; width: 48px; height: 48px; }
:is(.ipad-pro, .desktop-radio) .gain-inner-face i { height: 13px; top: 5px; }
:is(.ipad-pro, .desktop-radio) .vox-delay-caption { top: 80px; font-size: 10px; }
:is(.ipad-pro, .desktop-radio) .switch-bank { grid-column: auto; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
:is(.ipad-pro, .desktop-radio) .switch-bank .switch-control, :is(.ipad-pro, .desktop-radio) .switch-bank .switch-control:nth-child(odd) { min-height: 44px; font-size: 11px; gap: 5px; }
:is(.ipad-pro, .desktop-radio) .switch-control i { width: 48px; height: 24px; }
:is(.ipad-pro, .desktop-radio) .switch-control i::after { width: 20px; height: 18px; }
:is(.ipad-pro, .desktop-radio) .switch-control input:checked + i::after { transform: translateX(20px); }
:is(.ipad-pro, .desktop-radio) .modulation-control i::after { width: 10px; transform: translateX(calc(var(--quality-position) * 16px)); }
:is(.ipad-pro, .desktop-radio) .defaults-control { grid-column: auto; grid-row: auto; font-size: 10px; gap: 14px; }
:is(.ipad-pro, .desktop-radio) .reset-defaults-button { width: 64px; height: 48px; font-size: 11px; }
:is(.ipad-pro, .desktop-radio) .radio-footer { height: 28px; font-size: 10px; padding-inline: 18px; }
:is(.ipad-pro, .desktop-radio) .traffic-panel, :is(.ipad-pro, .desktop-radio) .traffic-panel.mobile-log-open {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 52px minmax(0, 1fr) auto;
  gap: 0;
}
:is(.ipad-pro, .desktop-radio) .traffic-panel .panel-heading { grid-column: 1; grid-row: 1; padding: 4px 0 12px; }
:is(.ipad-pro, .desktop-radio) .panel-heading h2 { font-size: 26px; }
:is(.ipad-pro, .desktop-radio) .panel-heading .eyebrow { font-size: 12px; }
:is(.ipad-pro, .desktop-radio) .traffic-tabs { grid-column: 1; grid-row: 2; margin: 0 0 8px; }
:is(.ipad-pro, .desktop-radio) .traffic-tabs button { font-size: 12px; }
:is(.ipad-pro, .desktop-radio) .traffic-view { grid-column: 1; grid-row: 3; min-height: 0; }
:is(.ipad-pro, .desktop-radio) .channel-member { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 12px 5px; }
:is(.ipad-pro, .desktop-radio) .channel-member-copy strong { font-size: 15px; }
:is(.ipad-pro, .desktop-radio) .channel-member .message-actions { gap: 9px; }
:is(.ipad-pro, .desktop-radio) .channel-member .message-actions button { width: 40px; height: 40px; }
:is(.ipad-pro, .desktop-radio) .desktop-channel-occupancy { grid-column: 1; grid-row: 4; margin-top: 16px; padding-top: 12px; }
:is(.ipad-pro, .desktop-radio) .desktop-channel-occupancy-head { height: 22px; font-size: 12px; margin-bottom: 8px; }
:is(.ipad-pro, .desktop-radio) .desktop-channel-occupancy-head span { font-size: 11px; }
:is(.ipad-pro, .desktop-radio) .desktop-channel-occupancy-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(7, 44px); gap: 6px; }
:is(.ipad-pro, .desktop-radio) .desktop-channel-button { font-size: 13px; }
:is(.ipad-pro, .desktop-radio) .mobile-menu {
  width: var(--ipad-view-width, 100%); right: auto; bottom: auto;
  top: calc(var(--ipad-view-height, 100dvh) - 76px - var(--ipad-safe-bottom));
  height: calc(76px + var(--ipad-safe-bottom)); padding: 8px max(20px, var(--ipad-safe-right)) max(8px, var(--ipad-safe-bottom)) max(20px, var(--ipad-safe-left));
}
:is(.ipad-pro, .desktop-radio) .mobile-menu-button { font-size: 13px; flex-direction: row; gap: 12px; }
:is(.ipad-pro, .desktop-radio) .mobile-menu-icon { width: 30px; height: 30px; font-size: 28px; }
:is(.ipad-pro, .desktop-radio) .mobile-menu-badge { top: 2px; left: 22%; }
:is(.ipad-pro, .desktop-radio) #mobileLogButton:disabled,
:is(.ipad-pro, .desktop-radio) #mobileLogButton:disabled .mobile-menu-icon { color: #81837b; opacity: 1; cursor: default; text-shadow: none; }
:is(.ipad-pro, .desktop-radio) #mobileLogButton:disabled .mobile-menu-badge { background: #55574f; color: #d0d1ca; box-shadow: none; }
:is(.ipad-pro, .desktop-radio) .digital-meter { padding: 14px; gap: 12px; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); }
:is(.ipad-pro, .desktop-radio) .digital-meter-header { display: flex; font-size: 10px; }
:is(.ipad-pro, .desktop-radio) .digital-heading { font-size: 13px; }
:is(.ipad-pro, .desktop-radio) .digital-heading output { font-size: 16px; }
:is(.ipad-pro, .desktop-radio) .digital-meter-scale, :is(.ipad-pro, .desktop-radio) .digital-network-values { font-size: 11px; }
:is(.ipad-pro, .desktop-radio) .digital-bar { max-height: 30px; }
:is(.ipad-pro, .desktop-radio) dialog, :is(.ipad-pro, .desktop-radio) .media-access-panel { max-height: calc(100dvh - var(--ipad-safe-top) - var(--ipad-safe-bottom) - 32px); }

/* Narrow windows and portrait: radio above, independent log and channel grid below. */
@media (max-width: 1179px) {
  :is(.ipad-pro, .desktop-radio) .app-shell { min-height: 1110px; }
  :is(.ipad-pro, .desktop-radio) .community-counts { display: none; }
  :is(.ipad-pro, .desktop-radio) .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(650px, 1.6fr) minmax(340px, 1fr); gap: 18px; }
  :is(.ipad-pro, .desktop-radio) .radio { grid-template-rows: 64px minmax(220px, 1.15fr) minmax(190px, 1fr) 146px 28px; grid-template-columns: minmax(0, 1fr) 340px; }
  :is(.ipad-pro, .desktop-radio) .traffic-panel, :is(.ipad-pro, .desktop-radio) .traffic-panel.mobile-log-open { grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: 44px 52px minmax(0, 1fr); column-gap: 28px; }
  :is(.ipad-pro, .desktop-radio) .traffic-panel .panel-heading { padding: 0 0 8px; }
  :is(.ipad-pro, .desktop-radio) .panel-heading > div:first-child { display: flex; align-items: baseline; gap: 14px; }
  :is(.ipad-pro, .desktop-radio) .panel-heading h2 { font-size: 22px; }
  :is(.ipad-pro, .desktop-radio) .desktop-channel-occupancy { display: block !important; grid-column: 2; grid-row: 1 / 4; margin: 0; padding: 0 0 0 20px; border-top: 0; border-left: 1px solid #42463a; overflow-y: auto; }
  :is(.ipad-pro, .desktop-radio) .desktop-channel-occupancy-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(7, 40px); gap: 5px; }
}
@media (max-width: 900px) {
  :is(.ipad-pro, .desktop-radio) .app-shell { padding-inline: 12px; }
  :is(.ipad-pro, .desktop-radio) .callsign-field { width: 160px; }
  :is(.ipad-pro, .desktop-radio) .topbar { gap: 12px; }
  :is(.ipad-pro, .desktop-radio) .radio { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 14px; }
  :is(.ipad-pro, .desktop-radio) .channel-controls { grid-template-columns: 44px 44px; grid-template-rows: 44px 54px; gap: 5px; }
  :is(.ipad-pro, .desktop-radio) .channel-knob { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  :is(.ipad-pro, .desktop-radio) .channel-knob, :is(.ipad-pro, .desktop-radio) .knob-face { width: 52px; height: 52px; }
  :is(.ipad-pro, .desktop-radio) .step-button { width: 44px; height: 44px; }
  :is(.ipad-pro, .desktop-radio) .radio-controls { padding-inline: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)) 138px 56px; gap: 8px; }
  :is(.ipad-pro, .desktop-radio) .dial-label, :is(.ipad-pro, .desktop-radio) .squelch-control .dial-label { font-size: 10px; }
  :is(.ipad-pro, .desktop-radio) .reset-defaults-button { width: 56px; }
  :is(.ipad-pro, .desktop-radio) .traffic-panel, :is(.ipad-pro, .desktop-radio) .traffic-panel.mobile-log-open { column-gap: 16px; grid-template-columns: minmax(0, 1fr) 300px; }
  :is(.ipad-pro, .desktop-radio) .mobile-menu-button { font-size: 11px; gap: 6px; }
}

/* Keep the same arrangement on laptops with less vertical room than an iPad. */
@media (min-width: 1180px) and (max-height: 899px) {
  .desktop-radio .app-shell { height: calc(100dvh - 64px); min-height: 610px; padding-block: 12px 10px; grid-template-rows: 48px minmax(0, 1fr); gap: 12px; }
  .desktop-radio .topbar, .desktop-radio .topbar:has(.admin-desktop-link:not([hidden])) { height: 48px; padding-bottom: 6px; }
  .desktop-radio .radio { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: 54px minmax(162px, .9fr) minmax(154px, 1fr) 112px 24px; column-gap: 16px; }
  .desktop-radio .radio-topline, .desktop-radio .radio-topline.private-channels-available, .desktop-radio .radio-topline.admin-ptt-controls { height: 54px; padding-block: 5px; }
  .desktop-radio .meter-section { padding-top: 10px; grid-template-rows: minmax(0, 1fr) 28px; }
  .desktop-radio .radio .horizontal-meter-face { padding: 10px; gap: 10px; }
  .desktop-radio .display-section { padding: 8px 0 12px; grid-template-rows: minmax(0, 1fr) 48px; gap: 10px; }
  .desktop-radio .channel-display { max-height: 130px; }
  .desktop-radio .seven-segment-display { height: 48px; transform: scale(.8); }
  .desktop-radio .channel-shortcuts, .desktop-radio .preset-button, .desktop-radio .scan-button { height: 48px; }
  .desktop-radio .ptt-section { padding-block: 12px; gap: 18px; }
  .desktop-radio body:not(.ptt-classic) .ptt-button { width: min(100%, 260px); }
  .desktop-radio .ptt-round-label strong { font-size: 52px; }
  .desktop-radio .speaker-actions { padding: 7px; gap: 7px; }
  .desktop-radio .speaker-actions :is(.friend-button, .mute-button, .joker-nominate, .stealth-button) { width: 42px; height: 42px; flex-basis: 42px; }
  .desktop-radio .radio-controls { height: 112px; padding: 12px 18px; gap: 12px; }
  .desktop-radio .dial-control { gap: 9px; }
  .desktop-radio .rotary-knob, .desktop-radio .rotary-face { width: 52px; height: 52px; }
  .desktop-radio .gain-dual-knob .vox-delay-input, .desktop-radio .vox-delay-face { inset: -4px; width: 60px; height: 60px; }
  .desktop-radio .gain-dual-knob #gain, .desktop-radio .gain-inner-face { inset: 8px; width: 36px; height: 36px; }
  .desktop-radio .gain-inner-face i { height: 9px; }
  .desktop-radio .vox-delay-caption { top: 64px; font-size: 9px; }
  .desktop-radio .switch-bank { gap: 6px 12px; }
  .desktop-radio .switch-bank .switch-control, .desktop-radio .switch-bank .switch-control:nth-child(odd) { min-height: 36px; }
  .desktop-radio .radio-footer { height: 24px; }
  .desktop-radio .desktop-channel-occupancy { margin-top: 10px; padding-top: 8px; }
  .desktop-radio .desktop-channel-occupancy-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(5, 32px); gap: 5px; }
  .desktop-radio .mobile-menu { top: auto; bottom: 0; height: 64px; padding-block: 6px; }
  .desktop-radio #radio[data-meter="bronze-news"] { grid-template-rows: 54px minmax(230px, 1.7fr) 78px 112px 24px; }
}
@media (max-width: 1179px), (max-height: 673px) {
  html.desktop-radio body { padding-bottom: 76px; }
}

/* Match the 1366 x 1024 CSS-pixel iPad Pro reference on larger desktops.
   Keep the radio and log aligned; longer lists scroll inside the log. */
.desktop-radio .app-shell { width: min(1366px, 100%); }
.desktop-radio .mobile-menu {
  width: min(1366px, 100%);
  left: max(0px, calc((100% - 1366px) / 2));
}
@media (min-width: 1180px) {
  .desktop-radio .workspace { height: 100%; max-height: 850px; align-self: center; }
}