/* All geometry is scoped to this optional meter; the original controls and their event handlers move with it and return when another meter is chosen. */ #proMeterX[hidden] { display:none!important; } #radio[data-meter="pro-meter-x"] .meter-bezel { position:relative;height:350px;min-height:0;background:#140e0a;border-color:#77604b; } #radio[data-meter="pro-meter-x"] .meter-bezel > :is(.horizontal-meter-face,.network-readout) { visibility:hidden; } #proMeterX { position:absolute;inset:5px 5px calc(var(--ticker-space) + var(--ticker-inset) + 3px);display:grid;grid-template-rows:28px minmax(0,1fr);gap:7px;padding:9px;overflow:hidden;border:1px solid #a17b56;border-radius:12px;background:radial-gradient(ellipse at 90% 0%,#84513288,transparent 55%),repeating-linear-gradient(100deg,#292017 0,#292017 1px,#1c1510 1px,#1c1510 4px);box-shadow:inset 0 0 0 2px #1d140e,inset 0 1px 8px #f6d4aa55;color:#fff2df;font:11px/1.25 Arial,Helvetica,sans-serif;container-type:size; } #proMeterX * { box-sizing:border-box;min-width:0; } #proMeterX .pmx-header { display:flex;gap:12px;align-items:center;white-space:nowrap;border-bottom:1px solid #9d6940;box-shadow:0 2px 4px #ce82492b; } #proMeterX .pmx-brand { font:bold italic 23px/1 Arial,sans-serif;letter-spacing:-1px;color:#fff0da; } #proMeterX .pmx-header strong { color:#ffc46d;font-style:italic;font-size:14px;letter-spacing:.6px; } #proMeterX .pmx-header em { color:#dc9563;font-size:19px; } #proMeterX .pmx-header > span { margin-left:auto;font-size:8px;color:#d5b392; } #proMeterX .pmx-dashboard { display:grid;grid-template-columns:minmax(0,3fr) minmax(100px,1fr);gap:8px;min-height:0; } #proMeterX .pmx-analysis { display:grid;grid-template-rows:minmax(0,1.6fr) minmax(0,1fr) 33px;gap:7px;min-height:0; } #proMeterX :is(.pmx-gauges,.pmx-charts) { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;min-height:0; } #proMeterX .pmx-module { min-height:0;overflow:hidden;display:grid;grid-template-rows:19px minmax(0,1fr) 16px;border:1px solid #815b3b;border-radius:8px;background:radial-gradient(ellipse at 50% 100%,#75472566,transparent 70%),linear-gradient(145deg,#2a1d14,#100c08);box-shadow:inset 0 1px 0 #eab78533; } #proMeterX h3 { margin:0;padding:4px 7px 0;color:#f4dfc8;font:700 10px/1.2 Arial,sans-serif;letter-spacing:.5px;display:flex;justify-content:space-between;white-space:nowrap; } #proMeterX h3 small { font-size:8px;font-weight:400;color:#cfb69c; } #proMeterX svg { display:block;width:100%;height:100%;min-height:0;overflow:hidden; } #proMeterX .pmx-scale text { font:18px 'Courier New',monospace;fill:#e5c7a5; } #proMeterX .pmx-value { font:bold 40px 'Courier New',monospace;fill:#ffc46d;filter:drop-shadow(0 0 7px #e9933544); } #proMeterX #pmxTxValue { fill:#f4a979; } #proMeterX .pmx-unit { font:12px Arial,sans-serif;letter-spacing:1px;fill:#c9ae92; } #proMeterX .pmx-pointer { filter:drop-shadow(0 0 3px #ffd49b99); } #proMeterX .pmx-foot { padding:2px 5px;border-top:1px solid #4f3827;color:#c9ae93;font-size:7px;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis; } #proMeterX[data-clipping="true"] #pmxTxFoot { color:#ff8393;background:#4e152b; } #proMeterX .pmx-grid { stroke:#533c29;stroke-width:1;fill:none; } #proMeterX .pmx-network { display:grid;grid-template-columns:1.2fr .7fr .7fr 1.3fr;gap:5px;background:#1d150f;border:1px solid #67482e;border-radius:6px;padding:4px 6px; } #proMeterX :is(.pmx-network,.pmx-facts) span { color:#c9ad92;font-size:7px;display:flex;flex-direction:column;justify-content:center;gap:3px; } #proMeterX :is(.pmx-network,.pmx-facts) b { color:#ffe7c7;font:700 10px/1.1 'Courier New',monospace;white-space:nowrap; } #proMeterX #pmxLink { color:#74dfbd;font-size:8px; } #proMeterX .pmx-tuning { display:grid;grid-template-rows:minmax(72px,1fr) 55px 68px;gap:7px;min-height:0; } #proMeterX #pmxChannelSlot { min-height:0; } #proMeterX .pmx-facts { display:grid;gap:5px;padding:5px 8px;border:1px solid #785334;border-radius:6px;background:#281b13; } #radio[data-meter="pro-meter-x"] #channelDisplay { position:relative;display:grid;grid-area:auto;grid-template-columns:1fr;grid-template-rows:12px minmax(25px,1fr) auto;width:100%;height:100%;min-height:0;max-height:none;padding:5px 2px;border:1px solid #ba814b;border-radius:9px;background:radial-gradient(ellipse at 50% 40%,#482c16,#180f09 75%);box-shadow:inset 0 0 14px #d8893522,0 0 7px #c1723622; } #radio[data-meter="pro-meter-x"] #channelDisplay .display-label { color:#ddbd95;font-size:9px; } #radio[data-meter="pro-meter-x"] #channelDisplay .seven-segment-display { height:56px;transform:scale(1.15);transform-origin:center;filter:drop-shadow(0 0 4px #ffb64e55); } #radio[data-meter="pro-meter-x"] #channelDisplay .seven-digit i { background:#4a311c; } #radio[data-meter="pro-meter-x"] #channelDisplay .seven-digit i.on { background:#ffc46d;box-shadow:0 0 6px #ffad4755; } #radio[data-meter="pro-meter-x"] #channelDisplay .channel-details { height:auto;flex-wrap:wrap;gap:2px 5px;padding:0;justify-content:center; } #radio[data-meter="pro-meter-x"] #channelDisplay :is(.channel-tag,.channel-dw) { font-size:8px;line-height:1.2;color:#e3bd8f; } #radio[data-meter="pro-meter-x"] .channel-selection { display:none; } #radio[data-meter="pro-meter-x"] .display-section { grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;padding-block:5px; } #radio[data-meter="pro-meter-x"] .channel-shortcuts { width:100%;grid-template-columns:minmax(0,4fr) minmax(36px,1fr); } #radio[data-meter="pro-meter-x"] .channel-presets { width:100%;grid-template-columns:repeat(4,minmax(0,1fr)); } #radio[data-meter="pro-meter-x"] .preset-button { min-width:0;width:100%; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot { align-self:end; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .channel-controls { display:grid;grid-area:auto;grid-template-columns:1fr 50px 1fr;gap:4px;width:100%;height:64px;align-items:center; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .step-button { width:100%;height:40px;min-width:0;padding:0;font-size:23px;color:#ffdcad;background:linear-gradient(145deg,#573e29,#1c130d);border:1px solid #9a6b43;border-radius:6px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot :is(.channel-knob,.knob-face) { display:block;width:50px;height:50px;grid-area:auto; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .knob-face { border:2px solid #f5bf7e;background:repeating-conic-gradient(#21180f 0 4deg,#59402b 4deg 7deg);box-shadow:inset 0 0 0 5px #281a10,inset 0 0 0 8px #94704e,0 0 8px #b8773588; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .knob-face i { height:13px;background:#ffda97; } #radio[data-meter="pro-meter-x"] .radio-ticker { border-color:#87613d;background:#1d140c;color:#f1c481; } @media (min-width:1101px),(min-width:761px) and (pointer:fine) { #radio[data-meter="pro-meter-x"] .radio-main { grid-template-columns:minmax(0,1.6fr) minmax(190px,1fr);grid-template-areas:"meter ptt" "display ptt";gap:12px 24px; } #radio[data-meter="pro-meter-x"] .meter-section { grid-area:meter; } #radio[data-meter="pro-meter-x"] .display-section { grid-area:display; } #radio[data-meter="pro-meter-x"] .ptt-section { grid-area:ptt; } } :is(.android-tablet,.ipad-pro,.desktop-radio) #radio[data-meter="pro-meter-x"] { grid-template-rows:54px minmax(240px,1.7fr) 64px 104px 22px; } :is(.android-tablet,.ipad-pro,.desktop-radio) #radio[data-meter="pro-meter-x"] .radio-main { display:contents; } :is(.android-tablet,.ipad-pro,.desktop-radio) #radio[data-meter="pro-meter-x"] .meter-bezel { height:100%; } :is(.android-tablet,.ipad-pro,.desktop-radio) #radio[data-meter="pro-meter-x"] .display-section { grid-area:channel;width:auto; } :is(.ipad-pro,.desktop-radio) #radio[data-meter="pro-meter-x"] { grid-template-rows:64px minmax(260px,1.7fr) 78px 146px 28px; } @media (max-height:850px) { :is(.ipad-pro,.desktop-radio) #radio[data-meter="pro-meter-x"] { grid-template-rows:54px minmax(240px,1.7fr) 64px 112px 24px; } } @media (max-width:760px) and (orientation:portrait) { #radio[data-meter="pro-meter-x"] .meter-bezel { height:260px; } #proMeterX { padding:5px;gap:4px;grid-template-rows:22px minmax(0,1fr);border-radius:8px; } #proMeterX .pmx-dashboard { grid-template-columns:minmax(0,1fr) 92px;gap:4px; } #proMeterX .pmx-analysis { grid-template-rows:minmax(0,1.6fr) minmax(0,1fr) 29px;gap:4px; } #proMeterX :is(.pmx-gauges,.pmx-charts) { gap:3px; } #proMeterX .pmx-brand { font-size:17px; } #proMeterX .pmx-header { gap:7px; } #proMeterX .pmx-header strong { font-size:11px; } #proMeterX .pmx-header em { font-size:14px; } #proMeterX .pmx-header > span { font-size:6px; } #proMeterX .pmx-module { grid-template-rows:16px minmax(0,1fr) 12px;border-radius:4px; } #proMeterX h3 { font-size:7px;padding:3px 4px 0;letter-spacing:0; } #proMeterX h3 small { font-size:6px; } #proMeterX .pmx-foot { font-size:5px;padding:1px 2px; } #proMeterX .pmx-tuning { grid-template-rows:minmax(64px,1fr) 43px 44px;gap:4px; } #proMeterX .pmx-facts { padding:3px 5px;gap:2px; } #proMeterX :is(.pmx-network,.pmx-facts) span { font-size:5px;gap:2px; } #proMeterX :is(.pmx-network,.pmx-facts) b { font-size:7px; } #proMeterX #pmxLink { font-size:6px; } #proMeterX .pmx-network { gap:3px;padding:3px; } #radio[data-meter="pro-meter-x"] #channelDisplay .seven-segment-display { height:32px;transform:scale(.7); } #radio[data-meter="pro-meter-x"] #channelDisplay :is(.channel-tag,.channel-dw) { font-size:6px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .channel-controls { height:44px;grid-template-columns:1fr 36px 1fr;gap:2px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot :is(.channel-knob,.knob-face) { width:36px;height:36px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .step-button { height:36px;font-size:17px; } #radio[data-meter="pro-meter-x"] .display-section { gap:0; } } @media (orientation:landscape) and (max-width:1100px) and (max-height:600px) and (pointer:coarse) { #radio[data-meter="pro-meter-x"] .meter-bezel { height:100%; } #radio[data-meter="pro-meter-x"] .display-section { display:flex;flex-direction:column;justify-content:center; } #radio[data-meter="pro-meter-x"] .channel-shortcuts { grid-template-columns:1fr; } #radio[data-meter="pro-meter-x"] .channel-presets { grid-template-columns:repeat(2,minmax(0,1fr)); } #proMeterX { padding:4px;gap:3px;grid-template-rows:18px minmax(0,1fr); } #proMeterX .pmx-dashboard { grid-template-columns:minmax(0,1fr) 92px;gap:3px; } #proMeterX .pmx-tuning { grid-template-rows:minmax(50px,1fr) 40px 40px;gap:3px; } #proMeterX .pmx-header > span { display:none; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .channel-controls { height:40px;grid-template-columns:1fr 32px 1fr;gap:2px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot :is(.channel-knob,.knob-face) { width:32px;height:32px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .step-button { height:32px; } } body.compact-radio #radio[data-meter="pro-meter-x"] { grid-template-columns:minmax(0,1fr) var(--compact-right);grid-template-rows:40px minmax(0,1fr) 44px 42px; } body.compact-radio #radio[data-meter="pro-meter-x"] .display-section { display:flex;flex-direction:row;padding:0;gap:4px; } body.compact-radio #radio[data-meter="pro-meter-x"] .channel-shortcuts { display:contents; } body.compact-radio #radio[data-meter="pro-meter-x"] .channel-presets { grid-template-columns:repeat(4,minmax(0,1fr)); } body.compact-radio #radio[data-meter="pro-meter-x"] #compactMeterButton { inset:auto 0 -2px auto;width:22px;height:18px; } body.compact-radio:not(.compact-meter-open) #radio #proMeterX { inset:1px 1px calc(var(--ticker-space) + 1px);padding:2px;grid-template-rows:13px minmax(0,1fr); } body.compact-radio:not(.compact-meter-open) #radio #proMeterX .pmx-header :is(.pmx-brand,strong) { font-size:10px; } body.compact-radio:not(.compact-meter-open) #radio #proMeterX .pmx-header em { font-size:11px; } body.compact-radio:not(.compact-meter-open) #radio #proMeterX :is(.pmx-charts,.pmx-network,.pmx-facts,.pmx-foot) { display:none; } body.compact-radio:not(.compact-meter-open) #radio #proMeterX .pmx-analysis { grid-template-rows:1fr; } body.compact-radio:not(.compact-meter-open) #radio #proMeterX .pmx-tuning { grid-template-rows:minmax(40px,1fr) 32px; } body.compact-radio:not(.compact-meter-open) #radio #proMeterX .pmx-module { grid-template-rows:12px minmax(0,1fr); } body.compact-radio:not(.compact-meter-open) #radio #proMeterX h3 { font-size:7px;padding:2px; } body.compact-radio:not(.compact-meter-open) #radio[data-meter="pro-meter-x"] #channelDisplay .seven-segment-display { height:24px;transform:scale(.4); } body.compact-radio:not(.compact-meter-open) #radio[data-meter="pro-meter-x"] #channelDisplay :is(.display-label,.channel-tag,.channel-dw) { font-size:6px; } @media (prefers-reduced-motion:reduce) { #proMeterX * { transition:none; } } #proMeterX .pmx-header button { padding:0;width:23px;height:23px;flex:none;border:1px solid #8f6642;background:#3a2719;border-radius:4px;color:#ffdaa6;font:16px/1 Arial,sans-serif;cursor:pointer; } #proMeterXDialog { width:min(1000px,96vw);height:min(660px,94dvh);max-width:none;max-height:none;margin:auto;padding:6px;border:1px solid #aa794b;border-radius:14px;background:#20150e;overflow:hidden; } #proMeterXDialog::backdrop { background:#100b07d9; } #proMeterXDialog #proMeterX .pmx-tuning { grid-template-rows:minmax(72px,1fr) 55px 68px; } #proMeterXDialog #proMeterX { position:relative;inset:auto;width:100%;height:100%; } /* Short landscape screens retain channel operation and both signal scales. Open the built-in magnifier for the full history/spectrum/network panel. */ @media (orientation:landscape) and (max-width:1100px) and (max-height:600px) and (pointer:coarse) { body:not(.compact-radio) #radio[data-meter="pro-meter-x"] { grid-template-columns:minmax(0,1fr) 86px minmax(154px,var(--landscape-right)); } body:not(.compact-radio) #radio[data-meter="pro-meter-x"] .display-section { padding:2px;gap:0; } body:not(.compact-radio) #radio[data-meter="pro-meter-x"] .channel-shortcuts { height:100%;grid-template-columns:1fr;grid-template-rows:1fr 28px;gap:3px; } body:not(.compact-radio) #radio[data-meter="pro-meter-x"] .channel-presets { height:100%;gap:3px; } body:not(.compact-radio) #radio[data-meter="pro-meter-x"] .preset-button { height:100%;gap:2px; } body:not(.compact-radio) #radio[data-meter="pro-meter-x"] .preset-button span { font-size:6px; } body:not(.compact-radio) #radio[data-meter="pro-meter-x"] .scan-button { height:28px; } #radio[data-meter="pro-meter-x"] #proMeterX :is(.pmx-charts,.pmx-network,.pmx-facts,.pmx-foot) { display:none; } #radio[data-meter="pro-meter-x"] #proMeterX .pmx-analysis { grid-template-rows:1fr; } #radio[data-meter="pro-meter-x"] #proMeterX .pmx-tuning { grid-template-rows:minmax(30px,1fr) 30px; } #radio[data-meter="pro-meter-x"] #proMeterX .pmx-module { grid-template-rows:12px minmax(0,1fr); } #radio[data-meter="pro-meter-x"] #proMeterX h3 { font-size:7px;padding:2px 4px; } #radio[data-meter="pro-meter-x"] #proMeterX .pmx-header button { width:17px;height:17px;font-size:13px;margin-left:auto; } #radio[data-meter="pro-meter-x"] #channelDisplay { padding:2px;grid-template-rows:7px minmax(0,1fr) auto; } #radio[data-meter="pro-meter-x"] #channelDisplay .seven-segment-display { height:20px;transform:scale(.32); } #radio[data-meter="pro-meter-x"] #channelDisplay :is(.display-label,.channel-tag,.channel-dw) { font-size:5px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .channel-controls { height:30px;grid-template-columns:1fr 28px 1fr; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot :is(.channel-knob,.knob-face) { width:28px;height:28px; } #radio[data-meter="pro-meter-x"] #pmxControlsSlot .step-button { height:28px;font-size:17px; } } /* A moved control must retain its visual theme inside the enlarged dialog. */ #proMeterXDialog #channelDisplay { display:grid;grid-template-rows:12px minmax(0,1fr) auto;width:100%;height:100%;min-height:0;max-height:none;border:1px solid #ba814b;border-radius:9px;padding:5px;background:#291b10; } #proMeterXDialog #channelDisplay .seven-segment-display { height:56px;transform:scale(1.15); } #proMeterXDialog #channelDisplay .channel-details { height:auto;flex-wrap:wrap;gap:3px; } #proMeterXDialog #channelDisplay :is(.channel-tag,.channel-dw) { font-size:10px; } #proMeterXDialog .seven-digit i.on { background:#ffc46d;box-shadow:0 0 6px #ffad4755; } #proMeterXDialog #pmxControlsSlot .channel-controls { display:grid;grid-area:auto;grid-template-columns:1fr 50px 1fr;gap:5px;align-items:center;height:64px; } #proMeterXDialog #pmxControlsSlot .step-button { width:100%;height:40px;border:1px solid #a27449;border-radius:6px;background:#432d1c;color:#ffdbab;font-size:23px; } #proMeterXDialog #pmxControlsSlot :is(.channel-knob,.knob-face) { display:block;width:50px;height:50px;grid-area:auto; } #proMeterXDialog #pmxControlsSlot .knob-face { border:2px solid #ffc46d; } @media (max-width:600px) { #proMeterXDialog #proMeterX .pmx-dashboard { grid-template-columns:minmax(0,1fr) 105px; } #proMeterXDialog #proMeterX .pmx-tuning { grid-template-rows:minmax(65px,1fr) 50px 52px; } #proMeterXDialog #pmxControlsSlot .channel-controls { height:52px;grid-template-columns:1fr 36px 1fr;gap:3px; } #proMeterXDialog #pmxControlsSlot :is(.channel-knob,.knob-face) { width:36px;height:36px; } #proMeterXDialog #pmxControlsSlot .step-button { height:36px; } }