/* -------------------------------------------------------------------------- */
/* OpenCB Ranger 2000DX faceplate (skin "ranger")                              */
/*                                                                             */
/* Geometry follows the reference base station: a wide, shallow cabinet with   */
/* a raised display section (frequency, twin meters, channel display and       */
/* selector), a shallow sloped control shelf with the knobs and switch bank    */
/* together, a narrow lower fascia (sockets, audio, branding) and a separate   */
/* speaker as tall as the cabinet. The operator strip ("now receiving", the    */
/* channel and mode status) and the footer sit outside the cabinet.            */
/*                                                                             */
/* Layout is chosen by the radio panel's own width (container queries):       */
/*   >= 1460 px  cabinet + speaker      940-1459 px  cabinet, no speaker       */
/*   641-939 px  tablet (the shelf, with Enable audio, before the meters)     */
/*   <= 640 px   compact (phones, the map column, small landscape tablets)     */
/* No row in the cabinet wraps on its own; each layout sets its arrangement.   */
/* Markup comes from modules/ranger-faceplate.js.                              */
/* -------------------------------------------------------------------------- */

.ranger[hidden] {
  display: none !important;
}

.ranger {
  --rg-wood-hi: #8f6139;
  --rg-wood: #6c4325;
  --rg-wood-lo: #432914;
  /* Warm aluminium, as in the reference photographs (red and green level,
     blue a little lower), at r7's lightness so the engraving reads as before. */
  --rg-silver-hi: #e9e7e2;
  --rg-silver: #cbc8c1;
  --rg-silver-lo: #a9a69f;
  --rg-chrome-edge: #7b8188;
  /* A vertical chrome strip: across it (the light falls from the left) and
     down it (a glint near the top, the horizon's dark band, then shade). */
  --rg-chrome-across: linear-gradient(90deg, #4c5258 0%, #a7adb3 17%, #ffffff 31%, #e6e9ec 40%, #858b92 58%, #bfc4c9 76%, #555b62 100%);
  --rg-chrome-fall: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.06) 16%, rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.12) 47%, rgba(255, 255, 255, 0.05) 58%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.18) 100%);
  --rg-ink: #23262a;
  --rg-ink-soft: #484d55;
  --rg-engrave-hi: rgba(255, 255, 255, 0.55);
  --rg-glass: #0d0a0b;
  --rg-glass-edge: #050405;
  --rg-seg-on: #ff3a5c;
  --rg-seg-glow: rgba(255, 40, 80, 0.32);
  --rg-seg-off: rgba(255, 70, 100, 0.07);
  --rg-lamp-green: #3bd67f;
  --rg-lamp-red: #f04444;
  --rg-lamp-amber: #f5ac2c;
  --rg-meter-face-hi: #1b211e;
  --rg-meter-face: #070908;
  --rg-meter-green: #56c487;
  --rg-meter-red: #f2664f;
  --rg-meter-ink: #d3dfd7;
  --rg-focus: #ffd34d;
  --rg-radio-max: 1180px;
  --rg-knob: 64px;
  --rg-seg-h: 42px;
  --rg-display-h: 156px;
  /* The frequency window's height on the cabinet (its metal surround
     included); the COUNTER / TIME and DYNALERT caps fill the rest of the
     display row. */
  --rg-freq-h: 87px;
  --rg-fascia-h: 58px;
  --rg-lid-h: 20px;
  /* Brushed grain: a seamless tile of noise drawn long and thin along the
     brushing (fractal noise, about 240 px by 1.5 px features), grey at 3 %
     opacity, so the streaks vary in length and strength and no stripe
     repeats at a fixed pitch. An SVG image: rasterised once per size and
     scale, then tiled. */
  --rg-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='140'%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0042 0.62' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2 0 0 0 -0.5 2 0 0 0 -0.5 2 0 0 0 -0.5 0 0 0 0 0.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");

  container: ranger / inline-size;
  flex: 0 0 auto;
  width: 100%;
  padding: 12px 18px 12px;
  color: var(--rg-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.ranger *,
.ranger *::before,
.ranger *::after {
  box-sizing: border-box;
}

.ranger-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ranger-engrave {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--rg-ink);
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
}

/* --- Desk: operator strip, speaker, cabinet, footer ------------------------ */

.ranger__desk {
  display: grid;
  grid-template-columns: minmax(0, var(--rg-radio-max));
  grid-template-areas:
    "operator"
    "cabinet"
    "footer";
  justify-content: center;
  row-gap: 8px;
}

.ranger-operator { grid-area: operator; }
.ranger-speaker { grid-area: speaker; }
.ranger-cabinet { grid-area: cabinet; }
.ranger-footer { grid-area: footer; }

/* --- Operator strip (application information, outside the cabinet) -------- */

.ranger-operator {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
  /* The station on the left over two rows; beside it the on-air line over
     the TALK hint; STATION SETUP at the end, across both rows, so the strip
     is no taller than the station panel. */
  grid-template-areas:
    "now onair setup"
    "now hint  setup";
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
  padding: 5px 6px 5px 5px;
  border-radius: 5px;
  border: 1px solid #3a2c1e;
  background: rgba(14, 11, 8, 0.72);
}

.ranger-now { grid-area: now; }
.ranger-onair { grid-area: onair; align-self: end; }

/* STATION SETUP and the TALK hint: application controls, so they are drawn
   as the operator strip's, not the radio's. In the strip their wrapper
   dissolves into its grid; the copy under the cabinet (phones) is a row. */
.ranger-optools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.ranger-optools--top { display: contents; }
.ranger-optools--top .ranger-ptt-hint { grid-area: hint; align-self: start; }
.ranger-optools--top .ranger-optools__setup { grid-area: setup; }
.ranger-optools--below { display: none; }

.ranger-ptt-hint {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #cfc8ba;
}

.ranger-optools__setup {
  appearance: none;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 12px;
  border-radius: 4px;
  border: 1px solid #6b5a43;
  background: linear-gradient(180deg, #3a3128, #251f19);
  color: #f2e6cf;
  font: 700 12px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.12);
  cursor: pointer;
}

.ranger-optools__setup:hover { border-color: #a08660; }

.ranger-now {
  min-width: 0;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #120f0b, #090706);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8);
  color: #f2c879;
}

.ranger-now__headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.ranger-now__label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(242, 200, 121, 0.88);
}

.ranger-now__station {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 17px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.03em;
}

/* SKIP / GROUND WAVE beside the station: that station's path as the server
   reported it (rx.metadata), never a prediction. One line high, so the strip
   keeps its height and the cabinet does not move. */
.ranger-now__path {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font: 700 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ranger-now__path[hidden] { display: none; }
.ranger-now__path[data-path="skip"] { color: #ffc861; background: rgba(255, 176, 64, 0.14); }
.ranger-now__path[data-path="groundwave"] { color: #8fdcff; background: rgba(96, 186, 255, 0.12); }
.ranger-now__path[data-path="unknown"] { color: #c2b9aa; border-style: dashed; background: transparent; }

/* Last heard: the same label, drawn as history. */
.ranger-now[data-historical="true"] .ranger-now__path {
  background: transparent;
  border-style: dotted;
  font-style: italic;
  opacity: 0.82;
}

.ranger-now__detail {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(242, 200, 121, 0.92);
}

.ranger-now[data-live="true"] { color: #8dffb9; }
.ranger-now[data-live="true"] .ranger-now__label { color: var(--rg-lamp-green); }
.ranger-now[data-live="true"] .ranger-now__detail { color: rgba(141, 255, 185, 0.88); }

.ranger-now[data-historical="true"] .ranger-now__station,
.ranger-now[data-historical="true"] .ranger-now__detail {
  color: rgba(242, 200, 121, 0.74);
  font-style: italic;
}

.ranger-onair {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #d9d3c6;
}

.ranger-onair[data-state="pending"],
.ranger-onair[data-state="offline"],
.ranger-onair[data-state="standby"],
.ranger-onair[data-state="unconfirmed"] {
  color: #ffcf6a;
}

.ranger-onair[data-state="rejected"] {
  color: #ff9a8a;
}

/* --- Speaker ---------------------------------------------------------------- */
/*
 * A matching speaker cabinet, after the reference photograph, drawn frontally:
 * an upright brushed-silver section framing a black grille; below it a
 * projecting, sloped tray where the black grille material folds forward onto
 * a flat badge plate; then a tall silver fascia. Its rows line up with the
 * radio's display row, shelf and fascia (the tray takes whatever height the
 * shelf has). Decoration only: the whole cabinet is aria-hidden.
 */
.ranger-speaker {
  position: relative;
  display: none;
  grid-template-rows: var(--rg-lid-h) calc(var(--rg-display-h) + 23px) minmax(0, 1fr) calc(var(--rg-fascia-h) + 4px);
  min-width: 0;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5));
}

/* Chrome strips down both front corners, below the lid. One light from the
   upper left: each strip's highlight sits left of its centre, brighter at
   the top. */
.ranger-speaker::before,
.ranger-speaker::after {
  content: "";
  position: absolute;
  top: var(--rg-lid-h);
  bottom: 0;
  width: 6px;
  z-index: 1;
  pointer-events: none;
  background: var(--rg-chrome-fall), var(--rg-chrome-across);
}

.ranger-speaker::before { left: 0; }
.ranger-speaker::after {
  right: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)), var(--rg-chrome-fall), var(--rg-chrome-across);
}

.ranger-speaker__lid,
.ranger-cabinet__lid {
  height: var(--rg-lid-h);
  border-radius: 4px 4px 0 0;
  /* Grain, faint and irregular: uneven lines inside long periods that share
     no factor (29, 37 and 89 px), at slight angles, so no repeat or stripe
     shows across the cabinet; one soft light from the upper left. */
  background:
    radial-gradient(130% 260% at 22% -60%, rgba(255, 222, 176, 0.13), rgba(255, 222, 176, 0) 62%),
    repeating-linear-gradient(90.6deg, transparent 0 3px, rgba(40, 20, 6, 0.045) 3px 4px, transparent 4px 11px, rgba(40, 20, 6, 0.03) 11px 13px, transparent 13px 29px),
    repeating-linear-gradient(89.3deg, transparent 0 7px, rgba(255, 214, 160, 0.03) 7px 8px, transparent 8px 22px, rgba(255, 214, 160, 0.02) 22px 23px, transparent 23px 37px),
    repeating-linear-gradient(90.2deg, transparent 0 19px, rgba(25, 12, 3, 0.05) 19px 21px, transparent 21px 53px, rgba(25, 12, 3, 0.035) 53px 54px, transparent 54px 89px),
    linear-gradient(180deg, var(--rg-wood-hi), var(--rg-wood) 55%, var(--rg-wood-lo));
  box-shadow: inset 0 -2px 0 #2a1a0c, inset 0 1px 0 rgba(255, 220, 170, 0.25);
}

/* Upright section: brushed silver around the black grille. */
.ranger-speaker__upper {
  padding: 13px 12% 0;
  background:
    var(--rg-brush),
    linear-gradient(162deg, #e6e4de, #d0cdc6);
  box-shadow: inset 0 2px 0 #f4f2ee, inset 0 3px 0 rgba(0, 0, 0, 0.12);
}

/* The grille: dark ribs on black, restrained. */
.ranger-speaker__grille {
  height: 100%;
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(180deg, #0e0f10 0 5px, #2a2d30 5px 6px, #151618 6px 9px),
    #0f1011;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 7px 9px rgba(0, 0, 0, 0.55), 0 -1px 0 rgba(255, 255, 255, 0.45);
}

/* The sloped tray, facing up: lighter toward the operator, in the upright's
   shadow at the back, with a lip along the front. */
.ranger-speaker__tray {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  /* The tray's black is a little wider than the grille's: the nearer
     surface reads larger, as it does on the reference. */
  padding: 0 9% 18px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0) 93%, rgba(0, 0, 0, 0.12)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0) 26%),
    var(--rg-brush),
    linear-gradient(180deg, #d0cdc6 0%, #e4e2dc 50%, #efede9 100%);
  /* The bend where the upright meets the tray. */
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.55);
}

.ranger-speaker__tray::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f5f4f1 35%, #d8d5cf 60%, #88857f 100%);
  box-shadow: 0 1px 0 #6a7077;
}

/* The deck: the black grille material folded forward onto the tray (drawn by
   SVG, see SPEAKER_DECK), with the badge on its flat part. */
.ranger-speaker__deck {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

.ranger-speaker__deck-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ranger-speaker__deck-edge { stroke: rgba(0, 0, 0, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ranger-speaker__rib { stroke: #474a4f; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.ranger-speaker__slot { fill: #060607; }

.ranger-speaker__badge {
  position: absolute;
  left: 52%;
  top: 62%;
  transform: translateY(-50%);
  color: #cfd3d7;
  font: italic 700 17px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.85);
}

/* The lower fascia, under the tray's lip. */
.ranger-speaker__fascia {
  display: flex;
  align-items: center;
  padding: 0 14%;
  border-bottom: 4px solid #5d6268;
  background:
    var(--rg-brush),
    linear-gradient(172deg, #cdcac3, #bab7b0);
  box-shadow: inset 0 5px 5px -3px rgba(0, 0, 0, 0.32);
}

.ranger-speaker__legend {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  white-space: nowrap;
  color: rgba(52, 56, 62, 0.72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* --- Cabinet and face ------------------------------------------------------- */

.ranger-cabinet {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.5));
}

/* One light over the whole cabinet, from the upper left, on top of each
   row's own shading: a faint warm lift toward the top left and a faint shade
   toward the bottom right. A plain translucent gradient (no blend mode or
   filter); it never takes the pointer. */
.ranger-cabinet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(255, 247, 232, 0.08) 0%, rgba(255, 247, 232, 0) 32%, rgba(28, 22, 14, 0) 62%, rgba(28, 22, 14, 0.07) 100%);
}

.ranger-cabinet__vent {
  display: block;
  width: 56%;
  height: 8px;
  margin: 6px auto 0;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #1b1009 0 3px, #3c2615 3px 5px);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.ranger-face {
  display: grid;
  grid-template-rows: auto auto auto;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 4px solid #5d6268;
  /* Chrome corner strips lit from the upper left around a matte face. Each
     strip mirrors its surroundings: a crisp highlight, the room's dark band,
     a second glint; brightest at the top, with a dark band where the
     horizon would reflect. The right strip catches a little less light. */
  background:
    var(--rg-chrome-fall) left top / 6px 100% no-repeat border-box,
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) right top / 6px 100% no-repeat border-box,
    var(--rg-chrome-fall) right top / 6px 100% no-repeat border-box,
    var(--rg-chrome-across) left top / 6px 100% no-repeat border-box,
    var(--rg-chrome-across) right top / 6px 100% no-repeat border-box,
    linear-gradient(170deg, var(--rg-silver-hi), var(--rg-silver)) padding-box;
}

.ranger-face__row {
  min-width: 0;
}

/* Raised display section. */
.ranger-face__row--displays {
  display: grid;
  /* The channel column is never narrower than its legends (RECEIVE and
     TRANSMIT side by side); the frequency and meter columns give way. */
  grid-template-columns: minmax(0, 29fr) minmax(0, 29fr) minmax(min-content, 15fr) auto;
  grid-template-areas: "freq meters channel chsel";
  align-items: start;
  gap: 14px;
  padding: 10px 14px 12px;
  /* Matte brushed aluminium: faint grain, a broad fall-off from the upper
     left, no gloss. */
  background:
    var(--rg-brush),
    linear-gradient(162deg, #f0eee9, #d8d5ce);
  border-bottom: 1px solid #7c828a;
  box-shadow: 0 1px 0 #a9aeb4, 0 3px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 1;
}

.ranger-freq { grid-area: freq; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ranger-channel { display: contents; }
.ranger-channel__window { grid-area: channel; }
/* The selector sits low in the row: its knob level with the middle of the
   channel window, as on the reference. */
.ranger-chsel { grid-area: chsel; align-self: end; }

.ranger-window {
  position: relative;
  border-radius: 3px;
  border: 1px solid var(--rg-glass-edge);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%),
    radial-gradient(120% 90% at 50% 40%, #1f1315 0%, var(--rg-glass) 70%);
  /* A metal bevel lit from the upper left: bright top and left edges,
     shaded bottom and right, and the recess shadow falling from the top. */
  box-shadow:
    -1px -1px 0 2px #c3c8cd,
    1px 1px 0 2px #6c7279,
    0 0 0 2px #8f959c,
    -1px -1px 0 3px rgba(255, 255, 255, 0.9),
    1px 1px 0 3px rgba(96, 102, 109, 0.55),
    inset 1px 3px 9px rgba(0, 0, 0, 0.85);
}

.ranger-seg {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  filter: drop-shadow(0 0 3px var(--rg-seg-glow));
}

.ranger-seg svg {
  height: 100%;
  width: auto;
  overflow: visible;
}

.ranger-seg .on { fill: var(--rg-seg-on); }
.ranger-seg .off { fill: var(--rg-seg-off); }

.ranger-freq__window {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 7px 10px;
}

/* Six digit cells (27.1850) share the width left beside the flags, capped at
   the segment height; TIME uses the same cell size. Nothing clips or wraps:
   on a narrow window the digits get smaller instead. */
.ranger-freq__digits {
  height: var(--rg-seg-h);
  align-items: center;
  gap: 2px;
}

.ranger-freq__digits .ranger-seg__cell {
  flex: 0 0 auto;
  width: min(calc(var(--rg-seg-h) * 0.66), calc((100% - 10px) / 6));
  height: auto;
}

.ranger-freq__digits .ranger-seg__colon {
  flex: 0 0 auto;
  width: min(calc(var(--rg-seg-h) * 0.2), calc((100% - 10px) / 20));
  height: auto;
}

.ranger-flags {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 90, 120, 0.3);
}

.ranger-flags .is-lit { color: var(--rg-seg-on); }

/*
 * On the cabinet and tablet (wider than the compact layout), after the
 * reference: the frequency window has a taller opening in a substantial metal
 * surround lit from the upper left, an inner recess and a little glass depth.
 */
@container ranger (min-width: 641px) {
  .ranger-freq { gap: 7px; container: freq / inline-size; }

  .ranger-freq__window {
    height: var(--rg-freq-h);
    min-height: 0;
    gap: 12px;
    padding: 6px 14px;
    border: 7px solid transparent;
    border-radius: 4px;
    background:
      linear-gradient(168deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.012) 28%, transparent 44%) padding-box,
      radial-gradient(120% 90% at 50% 40%, #1d1214 0%, var(--rg-glass) 70%) padding-box,
      linear-gradient(152deg, #fbfbfc 0%, #e3e6e9 18%, #c2c7cc 42%, #9aa0a6 70%, #81878d 88%, #a3a9af 100%) border-box;
    box-shadow:
      -1px -1px 0 0 rgba(255, 255, 255, 0.75),
      1px 1px 0 0 #5a5f65,
      0 0 0 1px #6a7077,
      inset 0 0 0 1px #050405,
      inset 2px 6px 11px rgba(0, 0, 0, 0.9),
      inset -1px -1px 0 rgba(255, 255, 255, 0.05);
  }
}

/*
 * COUNTER / TIME and DYNALERT: on the cabinet, square mechanical caps in
 * dark wells under engraved legends, their names engraved beneath; the two
 * groups sit under the window's two ends, as on the reference. A narrow lamp
 * in each cap shows what is selected or armed. On phones the same buttons
 * (a second copy) are large pushbuttons after the audio group.
 */
.ranger-capbank--compact { display: none; }

.ranger-capbank--cabinet {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  padding: 0 3px;
}

.ranger-capgroup {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-items: center;
  column-gap: 4px;
  row-gap: 3px;
}

.ranger-capgroup__legend {
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--rg-ink-soft);
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
}

.ranger-cap {
  appearance: none;
  position: relative;
  cursor: pointer;
  color: var(--rg-ink);
}

.ranger-capbank--cabinet .ranger-cap {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 0;
  padding: 0 1px 1px;
  border: 0;
  border-radius: 2px;
  background: none;
  font: 500 11px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
}

/* The cap, square, sitting in a dark well; lit from the upper left. */
.ranger-capbank--cabinet .ranger-cap::before {
  content: "";
  width: 36px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(160deg, #f1f2f4 0%, #d6dadd 52%, #b8bdc2 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset -1px -2px 0 rgba(0, 0, 0, 0.14),
    0 0 0 2px #2f3338,
    0 2px 0 2px #2f3338,
    0 3px 0 3px rgba(255, 255, 255, 0.55);
}

/* Pressed (selected or armed): the cap sits lower in its well. */
.ranger-capbank--cabinet .ranger-cap[aria-checked="true"]::before,
.ranger-capbank--cabinet .ranger-cap[aria-pressed="true"]::before {
  transform: translateY(2px);
  background: linear-gradient(160deg, #cbcfd3, #b0b5ba);
  box-shadow:
    inset 1px 2px 3px rgba(0, 0, 0, 0.32),
    0 0 0 2px #2f3338,
    0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* The lamp: a narrow window in the cap face, dark until lit. */
.ranger-cap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 16px;
  height: 3px;
  margin-left: -8px;
  border-radius: 1.5px;
  background: rgba(40, 18, 22, 0.16);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.45);
}

.ranger-capbank--cabinet .ranger-cap[aria-checked="true"]::after,
.ranger-capbank--cabinet .ranger-cap[aria-pressed="true"]::after { top: 8px; }

.ranger-cap[aria-checked="true"]::after,
.ranger-cap[data-lamp="armed"]::after,
.ranger-cap[data-lamp="standby"]::after,
.ranger-cap[data-lamp="ringing"]::after {
  background: var(--rg-seg-on);
  box-shadow: 0 0 5px var(--rg-seg-glow), 0 0 1px #ff8fa3;
}

.ranger-cap[data-lamp="ringing"]::after { animation: ranger-blink 0.5s steps(2, start) infinite; }

.ranger-cap[data-lamp="blocked"]::after,
.ranger-cap[data-lamp="held"]::after {
  background: var(--rg-lamp-amber);
  box-shadow: 0 0 5px rgba(245, 172, 44, 0.55);
}

/* Forced colours (Windows High Contrast) drop the lamps' backgrounds: an
   outline marks what is selected or armed instead. */
@media (forced-colors: active) {
  .ranger-cap[aria-checked="true"],
  .ranger-cap[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }
}

/* Narrow frequency columns (the smallest cabinets and tablets): smaller
   lettering and gaps; every cap keeps a 44 px target. */
@container freq (max-width: 318px) {
  .ranger-capbank--cabinet { padding: 0; gap: 4px; }
  .ranger-capgroup { column-gap: 2px; }
  .ranger-capbank--cabinet .ranger-cap { font-size: 10px; letter-spacing: 0.02em; }
}

/*
 * Instrument cluster, after the reference: a shallow twin-meter window (two
 * recessed faces either side of a brushed-metal divider, each under its own
 * smoked glass) with a secondary readout below it, beside a taller, nearly
 * square channel window. --rg-display-h is the display row's height; the
 * channel window takes all of it and the meter column never more.
 */
.ranger-meters {
  grid-area: meters;
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  container: meters / inline-size;
}

.ranger-meters__window {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  width: 100%;
  max-width: 380px;
  padding: 5px;
  background: linear-gradient(180deg, #2b2e32, #131416);
}

/* A matte brushed strip between the faces, as on the reference. */
.ranger-meters__divider {
  margin-block: -5px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(0, 0, 0, 0.04) 1px 2px, transparent 2px 3px),
    linear-gradient(90deg, #5d6268 0%, #9399a0 16%, #b9bdc2 42%, #a6abb1 64%, #7f858c 86%, #53585e 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 6px 6px -4px rgba(0, 0, 0, 0.45);
}

.ranger-meter {
  position: relative;
  margin: 0;
  min-width: 0;
  border-radius: 2px;
  overflow: hidden;
  background: radial-gradient(130% 120% at 50% 100%, var(--rg-meter-face-hi), var(--rg-meter-face) 72%);
  box-shadow:
    inset 0 7px 10px rgba(0, 0, 0, 0.92),
    inset 4px 0 6px -2px rgba(0, 0, 0, 0.6),
    inset -4px 0 6px -2px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(0, 0, 0, 0.7);
}

/* Each face's smoked glass: a faint tint, a soft curved reflection of the
   light at the upper left, a fainter diagonal one, and the glass's top edge
   catching the light. All faint enough that the scales read through them. */
.ranger-meter::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(150% 70% at 24% -22%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 46%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0.035) 61%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(10, 12, 14, 0.06), rgba(10, 12, 14, 0.16));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ranger-meter__svg { display: block; width: 100%; height: auto; }
.ranger-meter__face { fill: transparent; }
.ranger-meter__arc { fill: none; stroke-width: 1.8; }
.ranger-meter__arc--green { stroke: var(--rg-meter-green); }
.ranger-meter__arc--red { stroke: var(--rg-meter-red); stroke-width: 3.6; }
.ranger-meter__arc--rf { stroke: var(--rg-meter-red); stroke-width: 1.3; }
.ranger-meter__arc--rf-low { stroke: var(--rg-meter-ink); stroke-width: 1.1; opacity: 0.65; }
.ranger-meter__mark { stroke: var(--rg-meter-green); stroke-width: 1.1; fill: var(--rg-meter-green); font: 700 11px/1 "Helvetica Neue", Arial, sans-serif; }
.ranger-meter__mark.ranger-meter__mark--red,
.ranger-meter__mark--rf { stroke: var(--rg-meter-red); fill: var(--rg-meter-red); }
.ranger-meter__mark--small { font-size: 9.5px; }
text.ranger-meter__mark { stroke: none; }
.ranger-meter__minor { stroke-width: 0.9; opacity: 0.8; }
.ranger-meter__legend { fill: var(--rg-meter-ink); font: 700 9.5px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.08em; }
.ranger-meter__legend--rf { fill: var(--rg-meter-red); }
.ranger-meter__glow { opacity: 0.7; }

/* A fine needle with a dark edge, turning about the visible pivot. The
   faceplate moves it every animation frame; there is no CSS transition. */
.ranger-meter__needle-edge {
  stroke: rgba(0, 0, 0, 0.75);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.ranger-meter__needle-core {
  stroke: #f4efe1;
  stroke-width: 1.05;
  stroke-linecap: round;
}

.ranger-meter__pivot {
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 0.8;
}

/* The needle's shadow on the scale, cast down and to the right by the light
   at the upper left: a copy of the needle's line, drawn first and offset in
   the face's own coordinates. It takes each turn the needle takes. */
.ranger-meter__needle-shadow line {
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* Secondary readout: the number each needle shows, with its unit. */
.ranger-meters__readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 20px;
  width: 100%;
  max-width: 380px;
  padding-inline: 5px;
}

.ranger-meters__cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 2px;
  background: #16181b;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.6);
  line-height: 1.3;
  white-space: nowrap;
}

.ranger-meters__name {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rg-meter-ink);
}

.ranger-meters__value {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rg-meter-green);
}

/* Transmitting: the readings the key drives read in red, as on the faces. */
.ranger-meters__cell[data-tone="tx"] .ranger-meters__value { color: var(--rg-meter-red); }
.ranger-meters__cell[data-tone="idle"] .ranger-meters__value { color: rgba(211, 223, 215, 0.7); }

/* The receiver's input power, beside the S units when there is room. */
.ranger-meters__extra { color: var(--rg-meter-green); }
.ranger-meters__extra:empty { display: none; }
.ranger-meters__extra::before { content: "\00a0\00b7\00a0"; color: var(--rg-meter-ink); }

@container meters (max-width: 345px) {
  .ranger-meters__extra { display: none; }
}

/* Channel display: nearly square, slim digits with dark space around them,
   small lit legends. */
.ranger-channel__window {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  justify-items: center;
  align-items: center;
  justify-self: center;
  gap: 3px;
  width: min(100%, calc(var(--rg-display-h) * 1.12));
  height: var(--rg-display-h);
  min-width: 0;
  padding: 9px 8px 10px;
}

.ranger-modelamps {
  display: flex;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(120, 255, 170, 0.13);
}

.ranger-modelamps .is-lit {
  color: var(--rg-lamp-green);
  text-shadow: 0 0 6px rgba(59, 214, 127, 0.45);
}

.ranger-modelamps .is-pending {
  color: var(--rg-lamp-amber);
  animation: ranger-blink 1.1s steps(2, start) infinite;
}

.ranger-modelamps .is-rejected { color: var(--rg-lamp-red); animation: none; }

.ranger-channel__digits { height: 46px; }

.ranger-channel__tag {
  min-height: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--rg-lamp-amber);
}

.ranger-channel__lamps { display: flex; gap: 5px; }

/* RECEIVE / TRANSMIT: small legends that light, not buttons. */
.ranger-lamp {
  padding: 1px 4px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.27);
}

.ranger-lamp--rx.is-lit {
  color: #7ff0aa;
  border-color: rgba(127, 240, 170, 0.62);
  background: rgba(59, 214, 127, 0.1);
  text-shadow: 0 0 5px rgba(59, 214, 127, 0.6);
  box-shadow: 0 0 6px rgba(59, 214, 127, 0.22);
}

.ranger-lamp--tx.is-lit {
  color: #ff7d74;
  border-color: rgba(255, 125, 116, 0.68);
  background: rgba(240, 68, 68, 0.12);
  text-shadow: 0 0 5px rgba(240, 68, 68, 0.65);
  box-shadow: 0 0 6px rgba(240, 68, 68, 0.26);
}

.ranger-lamp--tx.is-lit.is-awaiting {
  color: #c4534c;
  border-color: rgba(196, 83, 76, 0.55);
  background: none;
  text-shadow: none;
  box-shadow: none;
  animation: ranger-blink 0.8s steps(2, start) infinite;
}

/* Not on the air: the selected channel is drawn dim; pending blinks. The
   frequency window does so only while it shows the frequency (the clock is
   not a request). */
.ranger:not([data-channel-state="on-air"]):not([data-channel-state="scan"]) .ranger-channel__digits,
.ranger:not([data-channel-state="on-air"]):not([data-channel-state="scan"]) .ranger-freq__window[data-shows="frequency"] .ranger-freq__digits {
  opacity: 0.5;
}

.ranger[data-channel-state="pending"] .ranger-channel__digits,
.ranger[data-channel-state="pending"] .ranger-freq__window[data-shows="frequency"] .ranger-freq__digits {
  opacity: 1;
  animation: ranger-blink 1.1s steps(2, start) infinite;
}

.ranger[data-channel-state="rejected"] .ranger-channel__tag { color: var(--rg-lamp-red); }

.ranger-chsel {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-areas:
    "knob knob knob"
    "down entry up";
  align-items: center;
  justify-items: center;
  gap: 0 5px;
}

.ranger-knobwrap--channel { grid-area: knob; }
.ranger-chsel [data-ref="channelDown"] { grid-area: down; }
.ranger-chsel [data-ref="channelUp"] { grid-area: up; }
.ranger-chsel__entry { grid-area: entry; display: flex; align-items: center; gap: 3px; }
.ranger-chsel__entry .ranger-engrave { font-size: 10.5px; }

.ranger-step {
  appearance: none;
  width: 30px;
  height: 26px;
  border-radius: 2px;
  border: 1px solid #6e737a;
  background: linear-gradient(180deg, #f8f9fa, #b9bec4);
  color: var(--rg-ink);
  font-size: 11px;
  box-shadow: 0 2px 0 #5d6268, inset 0 1px 0 #fff;
  cursor: pointer;
}

.ranger-step:active { transform: translateY(1px); box-shadow: 0 1px 0 #5d6268; }

.ranger-chsel__entry input {
  width: 2.9em;
  height: 26px;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid #5d6268;
  background: #1b1416;
  color: var(--rg-seg-on);
  font: 700 14px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-align: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
}

.ranger-chsel__entry input::placeholder { color: rgba(255, 80, 110, 0.35); }

/* --- Knobs: short machined metal cylinders --------------------------------- */
/*
 * A knob is a metal cylinder standing on the shelf, seen from above and in
 * front: an elliptical top face (the cap, which turns), a side wall with
 * vertical machining, and a small cast shadow. Its scale is printed on the
 * shelf around the base, foreshortened the same way, so the cylinder hides
 * the far ticks as on the reference.
 *   --d  scale diameter (the control's width)   --c  top face diameter
 *   --k  foreshortening of horizontal circles    --s  visible side wall
 * The cap's rotation (set by the faceplate) is applied before the CSS
 * `scale`, so the index line turns in the foreshortened plane. Everything
 * here is drawn inside the control's own box; its values never change.
 */
.ranger-knob {
  --d: var(--rg-knob);
  --c: calc(var(--d) * 0.66);
  --k: 0.6;
  --s: calc(var(--d) * 0.42);
  --top: calc(var(--c) * var(--k) / 2 + 1px);
  --base: calc(var(--top) + var(--s));
  --ring: var(--base);
  position: relative;
  width: var(--d);
  height: calc(var(--base) + var(--d) * var(--k) / 2 + 2px);
  touch-action: none;
  cursor: grab;
  outline: none;
  flex: 0 0 auto;
}

.ranger-knob.is-turning { cursor: grabbing; }

/* Contact shadow on the shelf around the base, drawn under the scale. */
.ranger-knob::before {
  content: "";
  position: absolute;
  left: calc((var(--d) - var(--c) * 1.4) / 2);
  top: calc(var(--base) - var(--c) * var(--k) * 0.3);
  width: calc(var(--c) * 1.4);
  height: calc(var(--c) * var(--k) * 1.05);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.16) 62%, rgba(0, 0, 0, 0));
}

.ranger-knob__ticks {
  position: absolute;
  left: 0;
  top: calc(var(--ring) - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  scale: 1 var(--k);
  pointer-events: none;
}

.ranger-knob__ticks line {
  stroke: var(--rg-ink);
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* Barrel: one continuous turned aluminium cylinder from the top face down
   to the shelf, lit from the upper left: fine vertical machining, one narrow
   specular band left of centre and a soft reflection opposite. Where it
   meets the shelf a narrow base rim, a hair wider than the barrel, follows
   the cylinder's curve; it is drawn as outlines of the barrel itself (a dark
   seam, the lit rim, its shaded lower edge), so it adds no height and stays
   inside the control's box. */
.ranger-knob__body {
  position: absolute;
  left: calc((var(--d) - var(--c)) / 2);
  top: calc(var(--top) - var(--c) * var(--k) / 2);
  width: var(--c);
  height: calc(var(--c) * var(--k) + var(--s));
  border-radius: 50% / calc(var(--c) * var(--k) / 2);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.045) 0 1px, rgba(255, 255, 255, 0.03) 1px 2px, transparent 2px 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.1)),
    linear-gradient(90deg, #555b62 0%, #8d939a 10%, #cdd1d5 23%, #f3f4f5 30%, #d9dde0 36%, #aeb4ba 54%, #bdc2c7 69%, #81878e 86%, #4e545a 100%);
  box-shadow:
    inset 0 -2px 2px -1px rgba(0, 0, 0, 0.32),
    0 0.6px 0 0.4px rgba(38, 42, 47, 0.6),
    0 1.6px 0 1.4px #cdd1d5,
    0 2.8px 0 1.4px #80868d,
    0 3.6px 1.5px 1.4px rgba(0, 0, 0, 0.32);
}

/* Top face: spun finish, a bright chamfer and a dark index line. */
.ranger-knob__cap {
  position: absolute;
  left: 0;
  top: calc(var(--c) * (var(--k) - 1) / 2);
  width: var(--c);
  height: var(--c);
  border-radius: 50%;
  scale: 1 var(--k);
  border: 1px solid #f4f5f6;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.025) 1px 2px),
    radial-gradient(circle at 50% 50%, #e6e9ec 0%, #d5d9dd 55%, #bcc1c6 100%);
  box-shadow: 0 0 0 1px rgba(70, 75, 82, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.12);
  transition: transform 90ms ease-out;
}

/* A fixed sheen across the top face: it stays put while the cap turns. */
.ranger-knob__body::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--c);
  height: calc(var(--c) * var(--k));
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 8%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 66%, rgba(0, 0, 0, 0.08) 100%);
}

.ranger-knob__pointer {
  position: absolute;
  left: 50%;
  top: 4%;
  width: 3px;
  height: 44%;
  margin-left: -1.5px;
  border-radius: 1px;
  background: #15171a;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.35);
}

.ranger-knob:focus-visible,
.ranger-step:focus-visible,
.ranger-optools__setup:focus-visible,
.ranger-cap:focus-visible,
.ranger-alarm-stop:focus-visible,
.ranger-alarm-dialog select:focus-visible,
.ranger-alarm-dialog__button:focus-visible,
.ranger-audio__button:focus-visible,
.ranger-mode__pos:focus-visible,
.ranger-switch__pos:focus-visible,
.ranger-chsel__entry input:focus-visible,
.ranger-na-list summary:focus-visible {
  outline: 3px solid var(--rg-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.ranger-knob:focus-visible { outline-offset: 2px; border-radius: 10px; }

.ranger-knob--channel {
  --rg-knob: 94px;
  --c: calc(var(--d) * 0.7);
  --k: 0.9;
  --s: calc(var(--d) * 0.1);
  --top: calc(var(--d) * var(--k) / 2 + 1px);
  --ring: calc(var(--top) + var(--s) / 2);
  height: calc(var(--ring) + var(--d) * var(--k) / 2 + 2px);
}

.ranger-knob--channel .ranger-knob__ticks line { stroke-width: 1.2; }
.ranger-knob--channel::before { display: none; }

/* The channel selector stays distinct: a large, flat knob on a turned
   collar (unchanged from r6), not the ordinary knobs' tall barrel and rim. */
.ranger-knob--channel .ranger-knob__body {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, rgba(255, 255, 255, 0.04) 1px 2px, transparent 2px 3px),
    linear-gradient(90deg, #4f555c 0%, #868c93 9%, #c7cbd0 22%, #f4f5f6 31%, #d6dade 38%, #a9afb5 55%, #c1c6ca 70%, #7c8289 86%, #4b5157 100%);
  box-shadow:
    inset 0 -3px 3px -1px rgba(0, 0, 0, 0.3),
    0 2px 1px rgba(0, 0, 0, 0.3);
}

.ranger-knob--channel .ranger-knob__body::before {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -1px;
  height: calc(var(--c) * var(--k) / 2 + 6px);
  border-radius: 0 0 50% 50% / 0 0 calc(var(--c) * var(--k) / 2) calc(var(--c) * var(--k) / 2);
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #565c63 0%, #959ba2 12%, #d9dde0 29%, #eff1f2 37%, #c0c5ca 55%, #8c9299 76%, #535960 100%);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.38),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -2px 2px rgba(0, 0, 0, 0.25);
}

.ranger-knob--static { cursor: not-allowed; touch-action: auto; }

.ranger-knob--concentric .ranger-knob__cap::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid rgba(40, 44, 48, 0.45);
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}

/* --- Control shelf (sloped): knobs and switch bank in one row ------------- */

/*
 * The shelf slopes up toward the display section: shaded under the raised
 * section's overhang, lighter toward the operator, with a rounded front lip
 * that casts a shadow onto the fascia. Depth comes from shading only; the
 * shelf is not transformed, so the labels and targets stay where they are
 * drawn.
 */
.ranger-face__row--controls {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0, rgba(0, 0, 0, 0.12) 6px, rgba(0, 0, 0, 0) 22px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.03)),
    var(--rg-brush),
    linear-gradient(180deg, #afaca5 0%, #c7c4bd 26%, #dbd8d2 66%, #eae8e3 100%);
}

/* Front lip: a rounded edge catching the light. */
.ranger-face__row--controls::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f7f6f3 30%, #dcd9d3 55%, #8d8a84 100%);
  box-shadow: 0 1px 0 #6f757c;
}

/* Knobs spread evenly across the shelf (each two-knob group takes an equal
   share); the switch bank keeps its own width at the right. */
.ranger-zone,
.ranger-zone__knobs {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-around;
  gap: 8px;
}

.ranger-zone { flex: 2 1 0; }
.ranger-zone__knobs { flex: 1 1 auto; }

/* DYNAMIKE PLUS leads the cabinet's shelf (one knob, one share); RF gain
   stands alone here, and the tablet/phone copy of DYNAMIKE is not shown. */
.ranger-zone--mic,
.ranger-zone--rx { flex: 1 1 0; }
[data-ref="micCompact"] { display: none; }

/* The same restrained lettering as the other knobs; the name is wider than
   the knob, as on the reference. */
.ranger-knobgroup[data-knob="micGain"] { width: 100px; }

.ranger-knobgroup {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  width: 74px;
}

.ranger-knobgroup__label {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--rg-ink);
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
}

.ranger-knobgroup__value {
  min-height: 14px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--rg-ink-soft);
}

.ranger-knobgroup--na { cursor: not-allowed; }

/*
 * On the cabinet's shelf the knob names are joined by an engraved rule, as on
 * the reference, from DYNAMIKE PLUS to CLARIFIER (MODE sits lower, under its
 * position labels, so it stands alone). Each knob group takes an equal share
 * of its zone instead of a fixed width in an evenly spaced row: the knobs
 * stay where that spacing put them, and each name's rule runs to its share's
 * edge and across the gap to the next. Decoration only.
 */
@container ranger (min-width: 940px) {
  .ranger-zone__knobs > .ranger-knobgroup,
  .ranger-zone--na > .ranger-knobgroup {
    flex: 1 1 0;
    width: auto;
    min-width: 74px;
    /* A group's name and rules never widen it: as narrow as r7's fixed
       width allowed, so a tight shelf lays out exactly as before. */
    contain: inline-size;
  }

  .ranger-knobgroup[data-knob="micGain"] { min-width: 100px; }

  .ranger-zone__knobs > .ranger-knobgroup .ranger-knobgroup__label,
  .ranger-zone--na > .ranger-knobgroup .ranger-knobgroup__label {
    justify-self: stretch;
    /* Never wider than its group's column, so the knob above stays centred;
       if the name is wider than the column it overflows equally both ways. */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  .ranger-zone__knobs > .ranger-knobgroup .ranger-knobgroup__label::before,
  .ranger-zone__knobs > .ranger-knobgroup .ranger-knobgroup__label::after,
  .ranger-zone--na > .ranger-knobgroup .ranger-knobgroup__label::before,
  .ranger-zone--na > .ranger-knobgroup .ranger-knobgroup__label::after {
    content: "";
    flex: 1 1 0;
    min-width: 0;
    height: 1px;
    background: #8f8d88;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .ranger-zone__knobs > .ranger-knobgroup .ranger-knobgroup__label::before,
  .ranger-zone--na > .ranger-knobgroup .ranger-knobgroup__label::before { margin-left: -5px; }

  .ranger-zone__knobs > .ranger-knobgroup .ranger-knobgroup__label::after,
  .ranger-zone--na > .ranger-knobgroup .ranger-knobgroup__label::after { margin-right: -5px; }

  /* Each rule reaches half-way across the gap beside it (5 px of the 10 px
     between zones, 4 px of the 8 px inside one), where the neighbour's meets
     it; so each name stays centred under its knob. */
  .ranger-zone__knobs > .ranger-knobgroup:not(:first-child) .ranger-knobgroup__label::before,
  .ranger-zone--na > .ranger-knobgroup:not(:first-child) .ranger-knobgroup__label::before { margin-left: -4px; }

  .ranger-zone__knobs > .ranger-knobgroup:not(:last-child) .ranger-knobgroup__label::after,
  .ranger-zone--na > .ranger-knobgroup:not(:last-child) .ranger-knobgroup__label::after { margin-right: -4px; }

  /* The rule starts at DYNAMIKE PLUS and ends at CLARIFIER. */
  [data-ref="micWide"] > .ranger-knobgroup .ranger-knobgroup__label::before,
  .ranger-zone--na > .ranger-knobgroup:last-child .ranger-knobgroup__label::after { visibility: hidden; }
}

.ranger-knobgroup--na .ranger-knob,
.ranger-switch--na .ranger-switch__lever {
  opacity: 0.45;
  filter: grayscale(1);
}

.ranger-knobgroup--na .ranger-knobgroup__label,
.ranger-switch--na .ranger-switch__caption { color: var(--rg-ink-soft); }

.ranger-na-badge {
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
  border: 1px solid #7a4b4b;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7a2a2a;
}

/* Mode: three positions around a knob. The knob sits clear of the LSB and
   USB positions, so each position keeps its whole target. */
.ranger-knobgroup--mode { flex: 1.3 1 0; width: auto; min-width: 116px; }

.ranger-mode {
  --rg-knob: 58px;
  position: relative;
  width: 116px;
  /* 18 px for AM above, then the knob's height (see .ranger-knob). */
  height: calc(var(--rg-knob) * 0.918 + 3px + 18px);
}

.ranger-mode__pos {
  appearance: none;
  position: absolute;
  min-width: 34px;
  min-height: 22px;
  padding: 2px 3px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--rg-ink);
  font: 600 12px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
  cursor: pointer;
}

.ranger-mode__pos[data-mode="lsb"] { left: -6px; top: 26px; }
.ranger-mode__pos[data-mode="am"] { left: 41px; top: -4px; }
.ranger-mode__pos[data-mode="usb"] { right: -6px; top: 26px; }

.ranger-mode__pos[aria-checked="true"] {
  background: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
}

.ranger-knob--mode {
  position: absolute;
  left: calc((116px - var(--rg-knob)) / 2);
  top: 18px;
  cursor: pointer;
}

.ranger-mode[data-state="pending"] .ranger-mode__pos[aria-checked="true"],
.ranger-mode[data-state="queued"] .ranger-mode__pos[aria-checked="true"],
.ranger-mode[data-state="deferred"] .ranger-mode__pos[aria-checked="true"],
.ranger-mode[data-state="offline"] .ranger-mode__pos[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px var(--rg-lamp-amber);
}

.ranger-mode[data-state="rejected"] .ranger-mode__pos[aria-checked="true"],
.ranger-mode[data-state="unapplied"] .ranger-mode__pos[aria-checked="true"] {
  box-shadow: inset 0 0 0 2px #b03a2e;
}

/* Switch bank, in its own engraved panel on the shelf. */
.ranger-switches {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  background: linear-gradient(180deg, #cdd0d4, #bfc3c8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ranger-switch {
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  gap: 2px;
  min-width: 42px;
}

.ranger-switch__caption {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rg-ink);
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
  white-space: nowrap;
}

.ranger-switch__pos {
  appearance: none;
  min-width: 40px;
  min-height: 22px;
  padding: 2px 4px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--rg-ink-soft);
  font: 600 11.5px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.ranger-switch__pos[aria-checked="true"] {
  color: var(--rg-ink);
  background: rgba(0, 0, 0, 0.08);
}

.ranger-switch__lever {
  position: relative;
  width: 14px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #2b2d31 0 30%, #8d9399 32%, #e5e7ea 60%, #8d9399 100%);
}

.ranger-switch__lever::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -5px;
  width: 8px;
  height: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8c9298, #f6f7f8 45%, #9aa0a6);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease;
  transform-origin: 50% 85%;
}

.ranger-switch:has([data-meter="swr"][aria-checked="true"]) .ranger-switch__lever::before {
  transform: translateY(10px) scaleY(-1);
}

.ranger-switch--na { cursor: not-allowed; }

/* --- Audio activation ------------------------------------------------------- */

.ranger-audio {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
}

/* Two copies: the fascia one on the cabinet, the shelf one in compact. */
.ranger-audio--compact { display: none; }

.ranger-audio__button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 10px 4px 6px;
  border-radius: 17px;
  border: 1px solid #6e737a;
  background: linear-gradient(180deg, #f8f9fa, #c6cacf 70%, #b0b5bb);
  color: var(--rg-ink);
  font: 600 13px/1.15 "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  box-shadow: 0 2px 0 #5d6268, inset 0 1px 0 #ffffff;
  cursor: pointer;
}

.ranger-audio__button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #5d6268, inset 0 2px 3px rgba(0, 0, 0, 0.2);
}

.ranger-audio__lamp {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3b4a40;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.ranger-audio__button[data-enabled="true"] .ranger-audio__lamp {
  background: var(--rg-lamp-green);
  box-shadow: 0 0 5px rgba(59, 214, 127, 0.6);
}

.ranger-audio__button[data-enabled="false"] {
  border-color: #8a6a1e;
  box-shadow: 0 2px 0 #5d6268, inset 0 1px 0 #ffffff, 0 0 0 2px rgba(245, 172, 44, 0.5);
}

/* On the fascia, where the reference has its POWER switch: a chrome-bezelled
   push button with its lamp under a small bezel. The words, the lamp and the
   amber ring until audio runs say the same as before; the target is as big. */
.ranger-audio__button--fascia {
  border-radius: 6px;
  border-color: #5c6168;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #f2f3f4, #cbcfd3 55%, #a9afb5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 3px rgba(0, 0, 0, 0.32), inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.ranger-audio__button--fascia .ranger-audio__lamp {
  box-shadow: 0 0 0 1.5px #c9cdd1, 0 0 0 2.5px #5c6168, inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.ranger-audio__button--fascia[data-enabled="true"] .ranger-audio__lamp {
  box-shadow: 0 0 0 1.5px #c9cdd1, 0 0 0 2.5px #5c6168, 0 0 6px 2px rgba(59, 214, 127, 0.55);
}

.ranger-audio__button--fascia[data-enabled="false"] {
  border-color: #8a6a1e;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 3px rgba(0, 0, 0, 0.32), inset 0 1px 0 #ffffff, 0 0 0 2px rgba(245, 172, 44, 0.55);
}

/* --- Lower fascia: sockets, audio, branding --------------------------------- */

.ranger-face__row--base {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-height: var(--rg-fascia-h);
  padding: 6px 16px;
  box-shadow: inset 0 5px 5px -3px rgba(0, 0, 0, 0.32);
  background:
    var(--rg-brush),
    linear-gradient(172deg, #ccc9c2, #b6b3ac);
}

.ranger-jack {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ranger-jack__socket {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #050505 0 26%, #4c5056 28%, #e2e4e7 55%, #7f858b 100%);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

.ranger-jack--na .ranger-jack__socket { opacity: 0.5; }

.ranger-mic-socket {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.35));
}

.ranger-mic-socket__shell { stroke: #4b5056; stroke-width: 0.8; }
.ranger-mic-socket__thread { fill: none; stroke: rgba(0, 0, 0, 0.3); stroke-width: 1.3; stroke-dasharray: 0.8 0.6; }
.ranger-mic-socket__collar { fill: #8a9097; stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.8; }
.ranger-mic-socket__insert { stroke: #000; stroke-width: 0.6; }
.ranger-mic-socket__pin { fill: #d4d7da; stroke: #34373a; stroke-width: 0.45; }
.ranger-mic-socket__key { fill: #a9aeb3; }

.ranger-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-left: auto;
  white-space: nowrap;
}

.ranger-brand__maker {
  font-size: 13px;
  font-style: italic;
  font-weight: 800;
  color: #3a3d42;
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
}

.ranger-brand__name {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #24272b;
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
}

/* A model designation engraved like the name, never lit like a lamp. */
.ranger-brand__model {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #2f3237;
  text-shadow: 0 1px 0 var(--rg-engrave-hi);
}

/* --- DYNALERT status line (operator strip) and the SET editor -------------- */

.ranger-dynalert-line {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 6px 4px 10px;
  border-radius: 3px;
  border: 1px solid #000;
  background: #0d0b09;
}

.ranger-dynalert-line[hidden] { display: none; }

.ranger-dynalert-line__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: #ffcf6a;
}

.ranger-dynalert-line[data-kind="armed"] .ranger-dynalert-line__text,
.ranger-dynalert-line[data-kind="standby"] .ranger-dynalert-line__text { color: #ff8a9e; }
.ranger-dynalert-line[data-kind="missed"] .ranger-dynalert-line__text { color: #ffb08a; }

.ranger-dynalert-line[data-kind="ringing"] {
  border-color: #ff6b6b;
  background: #4a1010;
}

.ranger-dynalert-line[data-kind="ringing"] .ranger-dynalert-line__text { color: #ffe0e0; }

.ranger-alarm-stop {
  appearance: none;
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 44px;
  padding: 6px 16px;
  border-radius: 4px;
  border: 1px solid #2a0505;
  background: linear-gradient(180deg, #ff6a6a, #c41f1f);
  color: #ffffff;
  font: 800 15px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 0 #3d0808, inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.ranger-alarm-stop[hidden] { display: none; }
.ranger-alarm-stop:active { transform: translateY(1px); box-shadow: 0 1px 0 #3d0808; }

.ranger-alarm-dialog {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1px solid #4d5258;
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px),
    linear-gradient(162deg, #eef0f2, #d3d7db);
  color: var(--rg-ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65);
}

.ranger-alarm-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.ranger-alarm-dialog__form {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.ranger-alarm-dialog__title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ranger-alarm-dialog__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

/* The app's global label style is light-on-dark; this panel is light. */
.ranger-alarm-dialog__field {
  display: grid;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rg-ink);
}

.ranger-alarm-dialog__field select {
  min-width: 72px;
  min-height: 44px;
  padding: 4px 8px;
  border-radius: 3px;
  border: 1px solid #5d6268;
  background: #1b1416;
  color: var(--rg-seg-on);
  font: 700 20px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

.ranger-alarm-dialog__colon {
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 800;
}

.ranger-alarm-dialog__preview {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.ranger-alarm-dialog__note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--rg-ink-soft);
}

.ranger-alarm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ranger-alarm-dialog__button {
  appearance: none;
  min-width: 104px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 3px;
  border: 1px solid #6e737a;
  background: linear-gradient(180deg, #f8f9fa, #c4c8cd 70%, #aeb3b9);
  color: var(--rg-ink);
  font: 700 14px/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 0 #5d6268, inset 0 1px 0 #ffffff;
  cursor: pointer;
}

.ranger-alarm-dialog__button--save {
  border-color: #2a3a2e;
  background: linear-gradient(180deg, #e9f5ec, #b9d3c0 70%, #9fbca8);
}

/* --- Footer (outside the cabinet) ------------------------------------------ */

.ranger-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  color: #cfc8ba;
}

.ranger-notice {
  margin: 0;
  min-height: 1em;
  font-size: 13px;
  font-weight: 700;
  color: #ffcf6a;
}

.ranger-na-list {
  margin-left: auto;
  max-width: 64ch;
  font-size: 12px;
  color: #cfc8ba;
}

.ranger-na-list summary {
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: right;
}

.ranger-na-list p { margin: 4px 0 0; line-height: 1.4; }

/* --- Wide: cabinet with the speaker beside it ------------------------------ */
/*
 * The speaker appears only when the radio still gets at least ~1060 px, so
 * it never pushes the shelf into wrapping. Both share one grid row, so the
 * speaker's top and bottom align with the cabinet; its lower plate lines up
 * with the fascia.
 */
@container ranger (min-width: 1460px) {
  .ranger__desk {
    column-gap: 4px;
    grid-template-columns: clamp(380px, 27cqi, 480px) minmax(0, var(--rg-radio-max));
    grid-template-areas:
      ".       operator"
      "speaker cabinet"
      ".       footer";
  }

  .ranger-speaker { display: grid; }
}

/* --- Tablet and below ------------------------------------------------------ */
/*
 * Below ~940 px the shelf keeps only working controls (the unavailable ones
 * are listed under "Not simulated"), and Enable audio joins volume and
 * squelch in it. The tablet arrangement (641-939 px) follows; nothing
 * reflows by accident in between.
 */
@container ranger (max-width: 939px) {
  .ranger-zone--na,
  .ranger-switch--na,
  .ranger-jack--na {
    display: none;
  }

  /* Touch-sized operator button from tablets down. */
  .ranger-optools__setup { min-height: 44px; }

  /* Enable audio joins volume and squelch at the head of the shelf (the
     fascia copy is not shown), and DYNAMIKE PLUS follows RF gain. */
  .ranger-audio--compact { display: grid; }
  .ranger-audio--fascia { display: none; }
  .ranger-zone--mic { display: none; }
  [data-ref="micCompact"] { display: flex; }
  .ranger-zone--audio { flex: 3 1 0; }
  .ranger-zone--rx { flex: 2 1 0; }

  .ranger-knobgroup[data-knob="micGain"] { width: 74px; }
  .ranger-knobgroup[data-knob="micGain"] .ranger-knobgroup__label {
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
}

/*
 * Tablet (641-939 px of panel): a deliberate reflow so Enable audio, volume
 * and squelch stay in the first view. The frequency column (with its
 * COUNTER / TIME and DYNALERT caps) sits beside the channel window and
 * selector; the shelf follows at once; the meters take their own raised band
 * below it; then the fascia. The display row's own box dissolves here, so the
 * face draws the two raised bands behind them.
 */
@container ranger (min-width: 641px) and (max-width: 939px) {
  .ranger-face {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "freq   channel chsel"
      "shelf  shelf   shelf"
      "meters meters  meters"
      "base   base    base";
    column-gap: 14px;
  }

  .ranger-face__row--displays { display: contents; }

  .ranger-face::before,
  .ranger-face::after {
    content: "";
    z-index: 0;
    background:
      var(--rg-brush),
      linear-gradient(162deg, #f0eee9, #d8d5ce);
    border-bottom: 1px solid #7c828a;
    box-shadow: 0 1px 0 #a9aeb4, 0 3px 5px rgba(0, 0, 0, 0.3);
  }

  .ranger-face::before { grid-area: 1 / 1 / 2 / -1; }
  .ranger-face::after { grid-area: 3 / 1 / 4 / -1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 #a9aeb4, 0 3px 5px rgba(0, 0, 0, 0.3); }

  .ranger-freq,
  .ranger-channel__window,
  .ranger-chsel,
  .ranger-meters {
    z-index: 1;
    margin-block: 10px 12px;
  }

  .ranger-freq { grid-area: freq; align-self: start; margin-left: 14px; }
  .ranger-channel__window { align-self: start; }
  .ranger-chsel { margin-right: 14px; }
  .ranger-meters { grid-area: meters; margin-inline: 14px; }
  .ranger-face__row--controls { grid-area: shelf; }
  .ranger-face__row--base { grid-area: base; }

  .ranger-meters__window,
  .ranger-meters__readout {
    max-width: 440px;
  }

  /* Enable audio in the shelf: as tall as the knobs beside it, its lamp
     above the words. */
  .ranger-audio--compact .ranger-audio__button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    width: 96px;
    min-height: calc(var(--rg-knob) * 0.918 + 3px);
    padding: 6px 6px;
    border-radius: 8px;
    text-align: center;
  }

  .ranger-audio--compact .ranger-knobgroup__label { margin-top: 1px; }

  /* The shelf holds seven working controls in one row from 641 px. */
  .ranger-knobgroup { width: 70px; }
  .ranger-knobgroup[data-knob="micGain"] { width: 70px; }
  .ranger-zone,
  .ranger-zone__knobs { gap: 6px; }
}

/* --- Compact (phones, the column beside the desktop map) ------------------ */
/*
 * Order: the frequency window; channel display beside the selector knob;
 * step buttons and the typed channel; then Enable audio, volume and squelch;
 * the COUNTER / TIME and DYNALERT buttons (their phone copy); meters, RF gain
 * with DYNAMIKE PLUS, mode, the meter switch and the fascia follow. The
 * operator strip sits above the radio. The DOM order is the focus order;
 * wrappers dissolved here carry no role or label.
 */
@container ranger (max-width: 640px) {
  /* Set on the desk: a container query styles the container's descendants,
     not the .ranger container itself. */
  .ranger__desk {
    --rg-knob: 64px;
    --rg-seg-h: 30px;
  }

  .ranger__desk { grid-template-columns: minmax(0, 1fr); }

  .ranger-operator {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    gap: 6px;
  }

  .ranger-operator > * { grid-area: auto; }

  /* No height to spare above Enable audio, volume and squelch: STATION SETUP
     and the TALK hint sit under the cabinet instead (the footer's copy). */
  .ranger-optools--top { display: none; }

  .ranger-optools--below {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px 12px;
  }

  .ranger-optools--below .ranger-optools__setup { order: -1; }
  .ranger-optools--below .ranger-ptt-hint { flex-basis: 100%; }

  /* Only when it explains something (pending, rejected, no link...). */
  .ranger-onair[data-explain="false"] { display: none; }
  .ranger-now__station { font-size: 17px; }

  .ranger-cabinet__vent { display: none; }

  .ranger-face {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "freq   freq   freq   freq   freq   freq"
      "chwin  chwin  chwin  chwin  knob   knob"
      "down   down   entry  entry  up     up"
      "audio  audio  audio  audio  audio  audio"
      "caps   caps   caps   caps   caps   caps"
      "meters meters meters meters meters meters"
      "rx     rx     rx     rx     rx     rx"
      "mode   mode   mode   mode   mode   mode"
      "sw     sw     sw     sw     sw     sw"
      "base   base   base   base   base   base";
    gap: 10px 8px;
    padding: 10px 10px 12px;
    border-left-width: 4px;
    border-right-width: 4px;
    /* The five chrome-strip layers, then the face. */
    background-size: 4px 100%, 4px 100%, 4px 100%, 4px 100%, 4px 100%, auto;
  }

  .ranger-face__row--displays,
  .ranger-freq,
  .ranger-chsel,
  .ranger-face__row--controls {
    display: contents;
  }

  /* The shelf's lip belongs to the cabinet; the dissolved shelf has none. */
  .ranger-face__row--controls::after { content: none; }

  .ranger-freq__window { grid-area: freq; }
  .ranger-capbank--cabinet { display: none; }
  .ranger-capbank--compact { grid-area: caps; }
  .ranger-channel__window { grid-area: chwin; }
  .ranger-knobwrap--channel { grid-area: knob; }
  .ranger-chsel [data-ref="channelDown"] { grid-area: down; }
  .ranger-chsel__entry { grid-area: entry; }
  .ranger-chsel [data-ref="channelUp"] { grid-area: up; }
  .ranger-zone--audio { grid-area: audio; }
  .ranger-meters { grid-area: meters; }
  .ranger-zone--rx { grid-area: rx; }
  .ranger-knobgroup--mode { grid-area: mode; }
  .ranger-switches { grid-area: sw; }
  .ranger-face__row--base { grid-area: base; }

  .ranger-freq__window { min-height: 0; padding: 6px 10px; gap: 8px; }
  .ranger-flags { gap: 2px; }

  /* COUNTER / TIME and DYNALERT side by side, large pushbuttons with their
     names on them and the lamp above the name. */
  .ranger-capbank--compact {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .ranger-capbank--compact .ranger-capgroup {
    /* All three columns flexible: the spanning legend is shared out by
       their factors instead of widening COUNTER's column alone. */
    grid-template-columns: 1.35fr 1fr 1fr;
    justify-items: stretch;
    gap: 4px;
    padding: 5px 3px 4px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .ranger-capbank--compact .ranger-capgroup--dynalert { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* DYNALERT's status sits under its buttons here; above the radio only a
     ringing alarm (with Stop) is shown, so the first view keeps its place. */
  .ranger-dynalert-line:not([data-kind="ringing"]) { display: none; }

  .ranger-capbank__status {
    grid-column: 1 / -1;
    margin: 0;
    padding: 6px 8px;
    border-radius: 3px;
    background: #16120e;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffcf6a;
  }

  .ranger-capbank__status[hidden] { display: none; }
  .ranger-capbank__status[data-kind="armed"],
  .ranger-capbank__status[data-kind="standby"] { color: #ff8a9e; }
  .ranger-capbank__status[data-kind="missed"] { color: #ffb08a; }
  .ranger-capbank--compact .ranger-capgroup__legend { font-size: 11.5px; letter-spacing: 0.06em; }

  .ranger-capbank--compact .ranger-cap {
    min-width: 44px;
    min-height: 46px;
    padding: 10px 3px 3px;
    border-radius: 3px;
    border: 1px solid #6e737a;
    background: linear-gradient(180deg, #f8f9fa, #c4c8cd 70%, #aeb3b9);
    font: 600 11.5px/1 "Helvetica Neue", Arial, sans-serif;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 2px 0 #5d6268, inset 0 1px 0 #ffffff;
  }

  .ranger-capbank--compact .ranger-cap[aria-checked="true"],
  .ranger-capbank--compact .ranger-cap[aria-pressed="true"] {
    transform: translateY(1px);
    background: linear-gradient(180deg, #d4d7db, #b0b5bb);
    box-shadow: 0 1px 0 #5d6268, inset 0 2px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #3b3f45;
  }

  .ranger-channel__window {
    justify-self: stretch;
    width: auto;
    height: auto;
    min-height: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "digits modes"
      "digits tag"
      "lamps  lamps";
    justify-items: start;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 8px 10px;
  }

  .ranger-channel__digits { grid-area: digits; height: 46px; }
  .ranger-modelamps { grid-area: modes; gap: 8px; }
  .ranger-channel__tag { grid-area: tag; }
  .ranger-channel__lamps { grid-area: lamps; justify-self: stretch; justify-content: center; }

  .ranger-knobwrap--channel { display: grid; place-items: center; }
  .ranger-knob--channel { --rg-knob: 80px; }

  .ranger-step,
  .ranger-chsel__entry input {
    width: 100%;
    min-width: 44px;
    height: 46px;
  }

  .ranger-chsel__entry { display: block; }
  .ranger-step { font-size: 15px; }
  .ranger-chsel__entry input { font-size: 18px; }
  .ranger-chsel__entry .ranger-engrave { display: none; }

  /* Audio activation, volume and squelch: one row near the top. */
  .ranger-audio--compact { display: grid; }
  .ranger-audio--fascia { display: none; }

  .ranger-zone--audio,
  .ranger-zone--rx {
    display: grid;
    gap: 8px;
    padding: 8px 6px 6px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.2));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }

  .ranger-zone--audio { grid-template-columns: repeat(3, minmax(0, 1fr)); flex: none; }
  .ranger-zone--rx { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; }
  .ranger-zone__knobs,
  [data-ref="micCompact"] { display: contents; }
  .ranger-knobgroup[data-knob="micGain"] { width: auto; }
  .ranger-knobgroup[data-knob="micGain"] .ranger-knobgroup__label { white-space: nowrap; }

  .ranger-knobgroup { width: auto; min-width: 0; }
  .ranger-knobgroup__label { font-size: 12px; }
  .ranger-knobgroup__value { font-size: 13px; }

  .ranger-audio--compact .ranger-audio__button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px;
    width: 100%;
    /* As tall as the knobs beside it (see .ranger-knob). */
    min-height: calc(var(--rg-knob) * 0.918 + 3px);
    padding: 6px 6px;
    border-radius: 8px;
    text-align: center;
  }

  .ranger-meters__window,
  .ranger-meters__readout { max-width: none; }

  .ranger-knobgroup--mode { width: auto; min-width: 0; flex: none; justify-items: stretch; }

  .ranger-mode {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    height: auto;
  }

  .ranger-mode__pos,
  .ranger-mode__pos[data-mode] {
    position: static;
    min-height: 48px;
    border-radius: 3px;
    border: 1px solid #6e737a;
    background: linear-gradient(180deg, #f8f9fa, #c3c8cd);
    font-size: 15px;
    box-shadow: 0 2px 0 #5d6268;
  }

  .ranger-mode__pos[aria-checked="true"] {
    background: linear-gradient(180deg, #d4d7db, #aeb3b9);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 2px #3b3f45;
  }

  .ranger-knob--mode { display: none; }
  .ranger-knobgroup--mode .ranger-knobgroup__label,
  .ranger-knobgroup--mode .ranger-knobgroup__value { justify-self: center; }

  .ranger-switches { justify-content: center; }

  .ranger-switch {
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto;
    align-items: center;
  }

  .ranger-switch__pos { min-height: 44px; min-width: 56px; font-size: 13px; }
  .ranger-switch__lever { transform: rotate(-90deg); }

  .ranger-zone--na,
  .ranger-switch--na,
  .ranger-jack {
    display: none;
  }

  .ranger-face__row--base {
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 10px 6px 4px;
    background: none;
    box-shadow: 0 -1px 0 #8b9198;
  }

  .ranger-brand { margin-left: 0; flex-wrap: wrap; }
  .ranger-brand__name { font-size: 21px; letter-spacing: 0.12em; }

  .ranger-footer { flex-direction: column; }
  .ranger-na-list { margin-left: 0; }
  .ranger-na-list summary { text-align: left; min-height: 32px; display: list-item; }
}

/* Narrow phones (under about 367 px of panel, e.g. 360 px screens): the
   COUNTER / TIME and DYNALERT groups stack, so every button keeps a 44 px
   target. */
@container ranger (max-width: 366px) {
  .ranger-capbank--compact { grid-template-columns: minmax(0, 1fr); }
}

/* Very narrow (about 340 px of panel or less): three columns, so step
   buttons, the knob and the audio row keep usable sizes. */
@container ranger (max-width: 340px) {
  .ranger-face {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "freq   freq   freq"
      "chwin  chwin  knob"
      "down   entry  up"
      "audio  audio  audio"
      "caps   caps   caps"
      "meters meters meters"
      "rx     rx     rx"
      "mode   mode   mode"
      "sw     sw     sw"
      "base   base   base";
  }

  .ranger-channel__window {
    grid-template-areas:
      "modes  modes"
      "digits tag"
      "lamps  lamps";
  }

  .ranger-knob--channel { --rg-knob: 72px; }
  .ranger-capbank--compact { grid-template-columns: minmax(0, 1fr); }
  .ranger-channel__lamps { gap: 6px; }
  .ranger-lamp { padding: 3px 5px; }
  /* The faces stack; the divider and the readout cells follow. */
  .ranger-meters__window { grid-template-columns: 1fr; row-gap: 5px; }
  .ranger-meters__divider { display: none; }
  .ranger-meters__readout { grid-template-columns: 1fr; row-gap: 4px; }
}

@keyframes ranger-blink {
  0% { opacity: 1; }
  100% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .ranger *,
  .ranger *::before,
  .ranger *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* --- The shell around the Ranger ------------------------------------------ */

/* The radio may use wide screens: the console cap (1180-1320 px) is for the
   classic faceplate. The TALK button keeps its own cap. */
@media (min-width: 1024px) {
  body[data-skin="ranger"] .app-shell {
    --app-radio-solo-max: 1880px;
  }
}

/* The radio panel scrolls when the radio is taller than the screen. */
body[data-skin="ranger"] .app-shell .app-panel--radio {
  overflow-x: hidden;
  overflow-y: auto;
  justify-content: flex-start;
  background: radial-gradient(120% 60% at 50% 0%, #2a2018 0%, #12100e 60%, #0b0a09 100%);
}

/* Desktop: the classic faceplate becomes the station log under the radio,
   keeping the single #stationMonitor and channel activity nodes in place. */
body[data-skin="ranger"] .app-shell .app-panel--radio > .cb-faceplate {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 1180px;
  height: auto;
  max-height: none;
  margin: 0 auto 18px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

body[data-skin="ranger"] .app-shell .app-panel--radio > .cb-faceplate::before,
body[data-skin="ranger"] .app-shell .app-panel--radio > .cb-faceplate::after {
  display: none;
}

body[data-skin="ranger"] .app-shell .app-panel--radio > .cb-faceplate > :not(.cb-channel-section) {
  display: none !important;
}

body[data-skin="ranger"] .app-shell .app-panel--radio .cb-channel-section {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  height: auto;
  overflow: visible;
}

body[data-skin="ranger"] .app-shell .app-panel--radio .cb-channel-section > :not(.cb-channel-display):not(.channel-activity-mount) {
  display: none !important;
}

body[data-skin="ranger"] .app-shell .app-panel--radio .cb-channel-display {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

body[data-skin="ranger"] .app-shell .app-panel--radio .cb-channel-display > :not(.cb-monitor-window) {
  display: none !important;
}

body[data-skin="ranger"] .app-shell .app-panel--radio .cb-monitor-window {
  margin-top: 0;
  max-height: 260px;
}

body[data-skin="ranger"] .app-shell .app-panel--radio .cb-channel-activity {
  margin-top: 0;
  max-height: 260px;
  overflow-y: auto;
}

/* Phones and tablets keep the station list on the Stations tab. */
@media (max-width: 1023.98px) {
  body[data-skin="ranger"] .app-shell .app-panel--radio > .cb-faceplate {
    display: none;
  }

  body[data-skin="ranger"] .ranger {
    padding: 8px 8px 14px;
  }
}

/* The TALK bar in the dock matches the radio. */
body[data-skin="ranger"] .app-shell .app-ptt-dock {
  background: linear-gradient(180deg, #3a2614, #1f140b);
  border-top-color: #5b3d22;
}

body[data-skin="ranger"] .app-shell .app-ptt-dock .cb-ptt-button {
  border: 1px solid #6e737a;
  background: linear-gradient(180deg, #f4f5f6, #c4c8cd 60%, #a9aeb4);
  color: #23262a;
  box-shadow: 0 3px 0 #4d5156, inset 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* #pttButton.active in styles.css is an id rule; match it to win. */
body[data-skin="ranger"] .app-shell .app-ptt-dock #pttButton.active,
body[data-skin="ranger"] .app-shell .app-ptt-dock #pttButton:active {
  background: linear-gradient(180deg, #f25c5c, #c41f1f);
  color: #ffffff;
  text-shadow: none;
  transform: translateY(1px);
  box-shadow: 0 1px 0 #4d5156, 0 0 10px rgba(240, 68, 68, 0.45);
}

body[data-skin="ranger"] .app-shell .app-ptt-dock .cb-ptt-button.is-unavailable,
body[data-skin="ranger"] .app-shell .app-ptt-dock .cb-ptt-button:disabled {
  background: linear-gradient(180deg, #b9bdc2, #9ea3a9);
  color: #3d4147;
}

/* The faceplate carries the model name; the shell header keeps the maker. */
body[data-skin="ranger"] .app-header__model {
  display: none;
}

/* The station list names who is on the channel. Its TX flags come from the
   presence list, which can be stale between keyframes; the operator strip's
   "now receiving" is the current evidence, so with Ranger the list does not
   mark anyone as transmitting. */
body[data-skin="ranger"] .cb-station-monitor__item.is-active {
  border-color: rgba(0, 208, 132, 0.16);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.35);
}

body[data-skin="ranger"] .cb-station-monitor__item.is-active .cb-station-monitor__state {
  background: #3a4552;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

body[data-skin="ranger"] .cb-station-monitor__tag {
  display: none;
}