/* The IC-7300 replica, laid out from a photo of the real radio and the Basic
   Manual's front-panel pages (spec: docs/panel-ic7300-layout.md in the
   workspace). The drawing is a 960 x 380 SVG; everything usable is HTML laid
   over it at the same proportions, so positions here are the SVG's own
   coordinates divided by 960 (left, width) or 380 (top, height). Sizes in cqw
   scale with the radio, so it is the same radio at any width. */

.radio {
  position: relative;
  container-type: inline-size;
  width: 100%;
  /* As wide as the page gives it -- more when Mica's rail is folded -- but
     never taller than the window, so the whole radio can be seen at once,
     and never past 96rem, where the screen is already 1.3 times the real
     one and more size only costs height. */
  max-width: min(96rem, calc((100svh - 2rem) * 960 / 380));
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  color: #f4f4f4;
  font-family: var(--font-text);
}
/* A phone held sideways (844 x 390): the drawn front panel, scaled to fit
   that height, puts POWER, TRANSMIT and the screen's keys at 20-25 px, under
   a finger. No rearranging of the drawing gets them to 44 px, so a short
   touch screen gets the phone's layout -- the same radio, keys drawn as the
   7300's -- by giving the container a phone's width: the query below then
   applies as it does on a phone held upright. */
@media (pointer: coarse) and (max-height: 480px) {
  .radio { max-width: 520px; }
}
.radio [hidden] { display: none !important; }
.radio-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* The face carries the drawing's proportions. A wrapper rather than .radio
   itself, so the phone layout below -- a container query, which can only
   restyle what is inside the container -- can undo them. */
.radio-face { position: relative; aspect-ratio: 960 / 380; }
.radio-body { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph, .phone-badge, .phone-knob, .hit-word, .hit-led, .hit-sub { display: none; }

/* ---- the drawing -------------------------------------------------------- */

.radio-body text, .ph text { font-family: var(--font-text); }
.key .key-well { fill: #070708; stroke: #2c2e31; stroke-width: 1; }
.key .key-face { fill: url(#qso-key); stroke: #4a4d51; stroke-width: 0.8; }
/* A key the trainer has: a white legend. One it does not have: the same key,
   a grey legend, and nothing happens (Eskil: "Knappene har grå skrift, så de
   er ikke med. Inaktive." -- D-023). */
.key text { fill: #8a8d92; font-size: 10.5px; font-weight: 600; text-anchor: middle; letter-spacing: 0.01em; }
.key.is-live text { fill: #f1f1f1; }
/* VOX/BK-IN outside CW: VOX, which the trainer does not have. */
.key.is-live.is-dim text { fill: #8a8d92; }
.key text.sm { font-size: 9px; }
.key text.xs { font-size: 8.5px; }
.key text.tight { letter-spacing: -0.02em; }
.key text.it { font-style: italic; }
.key .key-glyph { fill: #8a8d92; }
.lbl { fill: #dcdcdc; font-size: 10px; font-weight: 700; text-anchor: middle; letter-spacing: 0.03em; }
.lbl.is-inert { fill: #8a8d92; }
.badge-box { fill: #8a8d92; }
.key text.badge-ink, .badge-ink { fill: #111; font-size: 7.5px; font-weight: 800; text-anchor: middle; }
.key text.badge-ink.small { font-size: 6.5px; }
.radio-body .badge { fill: #f2f2f2; font-size: 15px; font-weight: 800; letter-spacing: 0.06em; }
.radio-body .model { fill: #c9c9c9; font-size: 7px; letter-spacing: 0.08em; }
/* What it is based on, in words beside our badge (Eskil); no logo. */
.radio-body .badge-based { fill: #c9c9c9; font-size: 9px; letter-spacing: 0.02em; }
/* POWER's lamp: a bar along the top of the key, green while on. */
.key .key-led { fill: #1d1e20; }
.radio-body [data-key="power"].is-on .key-led { fill: #b9ff4a; }
/* TRANSMIT and TUNER have no lamp on the radio; pressed, the key's edge lights. */
.radio-body [data-key="transmit"].is-on .key-face,
.radio-body [data-key="tuner"].is-on .key-face { stroke: #c9ccd0; stroke-width: 1.2; }
/* TX/RX: green-yellow on receive, as photographed; red on transmit. */
.txrx { fill: #c7e84a; }
.txrx.is-tx { fill: #ff3b30; }

/* ---- what can be used --------------------------------------------------- */

.radio-hit {
  position: absolute;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  border-radius: 0.6cqw;
  -webkit-tap-highlight-color: transparent;
}
.radio-hit:focus-visible { outline: 2px solid #8fd3ff; outline-offset: 2px; }
/* Over the drawn keys: x 20, w 72, h 29; y 31, 78, 120, 162. */
.hit-power    { left: 2.083%; top: 8.158%;  width: 7.5%; height: 7.632%; }
.hit-transmit { left: 2.083%; top: 20.526%; width: 7.5%; height: 7.632%; }
.hit-tuner    { left: 2.083%; top: 31.579%; width: 7.5%; height: 7.632%; }
.hit-bkin     { left: 2.083%; top: 42.632%; width: 7.5%; height: 7.632%; }
/* AF, the inner knob of AF-RF/SQL (cx 164, cy 276; r 44 to the finger). */
.hit-af {
  left: 12.5%; top: 61.053%; width: 9.167%; height: 23.158%;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
/* MULTI (cx 708, cy 77, r 31; r 34 to the finger). */
.hit-multi { left: 70.208%; top: 11.053%; width: 7.083%; height: 17.895%; border-radius: 50%; }
.hit-multi[aria-expanded="true"] { outline: 2px solid #8fd3ff; outline-offset: 2px; }
/* The main dial (cx 841, cy 257, r 104). */
.hit-dial {
  left: 76.771%; top: 40.263%; width: 21.667%; height: 54.737%;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.hit-dial:active { cursor: grabbing; }

/* ---- switched off (POWER) ------------------------------------------------

   The screen goes dark -- nothing on it at all, as on the radio -- and the
   controls are inert (panel.js disables them). POWER is the one key that
   answers, so it carries a quiet ring until it is pressed. */
.radio.is-off .radio-screen > * { visibility: hidden; }
.radio.is-off .radio-hit:not(.hit-power) { cursor: default; }
.radio.is-off .txrx { fill: #1d1e20; }
.radio.is-off .hit-power { outline: 2px solid rgba(143, 211, 255, 0.7); outline-offset: 2px; }

/* ---- the screen ----------------------------------------------------------

   Laid out as the 7300's (manual pp. 1-4, 1-5), rows as a share of the
   screen's height measured from the photo: the top row, the frequency, the
   AGC line, the meter, the scope header, the scope, the soft keys. */
.radio-screen {
  position: absolute;
  left: 27.604%; top: 14.211%; width: 40.625%; height: 60.263%;
  display: grid;
  grid-template-columns: 11% minmax(0, 1fr) 19%;
  grid-template-rows: 13% 23% 5% 15% 6% minmax(0, 1fr) 11%;
  grid-template-areas:
    "ind   top   top"
    "ind   freq  side"
    "ind   agc   side"
    "meter meter meter"
    "head  head  head"
    "scope scope scope"
    "soft  soft  soft";
  background: #000;
  overflow: hidden;
  font-size: max(1.45cqw, 9px);
}
.radio-screen > * { min-height: 0; min-width: 0; }
.radio-screen button {
  font: inherit; color: inherit;
  margin: 0; border: 0; background: none; padding: 0;
  cursor: pointer;
}
.radio-screen button:focus-visible { outline: 2px solid #8fd3ff; outline-offset: 1px; }

/* Down the left: TUNE, TX, BKIN/F-BKIN (items 1, 29, 24), each shown only
   while it applies, as the radio prints them. */
.scr-ind-col { grid-area: ind; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3em; padding: 0.4em 0 0 0.4em; }
.scr-flag { font-size: 0.95em; line-height: 1.15; font-weight: 800; letter-spacing: 0.02em; padding: 0 0.2em; border-radius: 0.12em; visibility: hidden; }
.scr-flag.is-on { visibility: visible; }
.scr-flag.scr-tune.is-on { background: #ffb000; color: #111; }
.scr-flag.scr-tx.is-on { background: #ff3b30; color: #fff; }
.scr-ind { color: #fff; font-weight: 800; font-size: 0.95em; letter-spacing: 0.02em; white-space: nowrap; }

.scr-top { grid-area: top; display: flex; align-items: center; gap: 0.6em; padding: 0.2em 0.6em 0 0; }
.radio-screen .scr-mode {
  min-width: 4.4em; padding: 0.1em 0.6em;
  border-radius: 0.18em;
  background: linear-gradient(#58a8ef, #2b7fd0);
  color: #fff; font-weight: 600; font-size: 1.1em; text-align: center;
}
.scr-pb { width: 3.2em; height: 1.1em; flex: none; }
.radio-screen .scr-fil {
  padding: 0.1em 0.5em;
  border: 1px solid #6b7078; border-radius: 0.18em;
  background: linear-gradient(#4b5058, #2b2f35);
  color: #fff; font-weight: 600; font-size: 1.1em;
}
.scr-clock { margin-left: auto; color: #fff; font-weight: 600; font-size: 1.15em; font-variant-numeric: tabular-nums; }

.scr-freq {
  grid-area: freq; align-self: end; justify-self: end;
  padding-right: 0.15em;
  font-size: 5.2cqw; font-weight: 600; line-height: 0.95; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff;
}
.radio-screen .scr-mhz,
.radio-screen .scr-khz,
.radio-screen .scr-dec { border-radius: 0.06em; }
.radio-screen .scr-mhz:hover,
.radio-screen .scr-khz:hover,
.radio-screen .scr-dec:hover { background: #1c2a44; }
/* The 1 kHz quick step, marked as the IC-7300 marks it: a small triangle
   over the 1 kHz digit, pointing down at it. The figures are tabular, so the
   last digit is the group's last 0.6em or so, measured here in the
   triangle's own, smaller font. */
.radio-screen .scr-khz { position: relative; }
.radio-screen .scr-khz.is-step::after {
  content: "\25BC";
  position: absolute;
  right: 0; top: -0.4em;
  width: 2.75em;
  text-align: center;
  font-size: 0.22em;
  line-height: 1;
  color: #fff;
}
.scr-side { grid-area: side; display: flex; flex-direction: column; align-items: flex-end; padding: 0.3em 0.6em 0 0; }
.scr-band { color: #fff; font-weight: 700; font-size: 1.15em; }
.scr-agc { grid-area: agc; margin: 0; padding-left: 38%; color: #fff; font-weight: 600; font-size: 1.05em; align-self: center; }

/* The meter (item 22): S scale over the bar, the chosen TX meter's under it;
   the bar shows S on receive and the TX meter on transmit. Touched, it steps
   the TX meter (p. 3-10). The reading at the right, where the radio puts
   its RIT/dTX readout. */
.radio-screen .scr-meter {
  grid-area: meter;
  display: grid;
  grid-template-columns: 8% minmax(0, 1fr) 19%;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  overflow: hidden;
  text-align: left;
}
.radio-screen .scr-meter:hover { background: #0d1522; }
.scr-meter-names { display: grid; grid-template-rows: 1fr 1fr; align-items: center; justify-items: end; padding-right: 0.3em; font-size: 0.85em; font-weight: 600; color: #9aa0a6; }
.scr-meter[data-kind="s"] .scr-meter-names > :first-child,
.scr-meter:not([data-kind="s"]) .scr-meter-tx { color: #fff; }
.scr-meter-bar { width: 100%; height: 100%; min-height: 0; display: block; }
.scr-meter-bar .scr-tick { fill: #fff; font-size: 10px; font-weight: 600; font-family: var(--font-text); }
.scr-meter-bar .scr-tick.is-over { fill: #ff4b3e; }
.scr-meter-read { align-self: center; justify-self: end; padding-right: 0.6em; white-space: nowrap; font-family: var(--font-mono); font-size: 1.05em; }
.scr-meter-name { color: #9aa0a6; font-family: var(--font-text); font-weight: 600; }
/* "S S5" would say it twice: the S-meter's reading names itself. */
.scr-meter[data-kind="s"] .scr-meter-name { display: none; }

/* The header over the scope (p. 1-4): R/T and HOLD unlit, SPECTRUM SCOPE,
   CENTER, and the grid, which follows SPAN (scope.js). */
.scr-head {
  grid-area: head;
  display: flex; align-items: center; gap: 0.5em;
  padding: 0 0.4em;
  background: linear-gradient(#3d4651, #1d232b);
  border-top: 1px solid #5d6976; border-bottom: 1px solid #0c0f12;
  font-size: 0.82em; color: #e9eef3; white-space: nowrap; overflow: hidden;
}
.scr-head .pill { padding: 0 0.35em; border-radius: 0.6em; font-weight: 700; line-height: 1.25; }
.scr-head .pill.is-dim { background: #3a4048; color: #737b84; }
.scr-head .pill.is-hold { border: 1px solid #8b939c; color: #8b939c; }
.scr-head .arrows { color: #4da3ff; letter-spacing: -0.15em; }
.scr-head .title { flex: 1; text-align: center; font-weight: 600; letter-spacing: 0.04em; font-size: 1.15em; }
.scr-head .center { padding: 0 0.4em; background: #2b88d8; color: #fff; font-weight: 700; border-radius: 0.15em; }

.radio-scope {
  grid-area: scope;
  position: relative;
  min-height: 0;
  background: #04070b;
}

/* The soft keys (p. 1-4). SPAN and EXPD/SET work and are white; the rest are
   not in the trainer and are grey. */
.scr-soft { grid-area: soft; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35%; padding-top: 0.3%; }
.radio-screen .scr-soft .soft {
  position: static;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  padding: 0;
  border: 0; border-top: 1px solid #7e8a97; border-radius: 0.15em;
  background: linear-gradient(#4d5866, #222a33);
  color: #fff; font: inherit; font-size: 0.95em; font-weight: 600; line-height: normal;
  white-space: nowrap; overflow: hidden;
}
.radio-screen .scr-soft .soft.is-inert { color: #8a8d92; cursor: default; }
.radio-screen .scr-soft [aria-pressed="true"] { background: linear-gradient(#2b88d8, #1b5c99); }

/* EXPD/SET: the enlarged scope, as the radio's EXPD -- the AGC line gives way,
   the frequency shrinks, the meter stays (MIC GAIN is set against it). */
.radio-screen.is-expd { grid-template-rows: 13% 13% 0 13% 6% minmax(0, 1fr) 11%; }
.radio-screen.is-expd .scr-agc { display: none; }
.radio-screen.is-expd .scr-freq { font-size: 3.4cqw; align-self: center; }
.radio-screen.is-expd .scr-mode,
.radio-screen.is-expd .scr-fil { font-size: 1.05em; }

.radio-screen .scr-warn {
  position: absolute;
  left: 6%; right: 6%; bottom: 14%;
  margin: 0;
  padding: 0.6cqw 1cqw;
  border-radius: 0.4cqw;
  background: #ffb000;
  color: #111;
  font-weight: 700;
  font-size: max(1.8cqw, 11px);
  text-align: center;
  z-index: 2;
  animation: radio-warn 1.2s ease-in-out infinite alternate;
}
@keyframes radio-warn { from { opacity: 1; } to { opacity: 0.72; } }
@media (prefers-reduced-motion: reduce) { .radio-screen .scr-warn { animation: none; } }

/* A level or a word shown briefly over the scope, as the 7300 shows one. */
.radio-screen .scr-toast {
  position: absolute;
  left: 3%; bottom: 14%;
  margin: 0;
  padding: 0.3cqw 0.8cqw;
  border: 1px solid #8fd3ff;
  border-radius: 0.3cqw;
  background: rgba(2, 4, 8, 0.9);
  color: #8fd3ff;
  font-family: var(--font-mono);
  z-index: 2;
}

/* Held by the instructor's override (room.js, D-021): the readout stays as
   readable as ever -- the student should see where they have been put --
   but no setting answers a touch. Each held control on the face is washed
   dark where the hand goes; POWER and TRANSMIT, which stay the student's,
   are not. On the screen the keys keep their colour, muted; SPAN fades as
   scope.css fades it. */
.radio.is-held .radio-screen button:disabled { cursor: not-allowed; }
.radio.is-held .scr-freq button:disabled { color: inherit; }
.radio.is-held .radio-screen .scr-mode:disabled,
.radio.is-held .radio-screen .scr-fil:disabled { filter: saturate(0.35) brightness(0.75); }
.radio.is-held .radio-screen .scr-soft .soft:disabled { opacity: 0.45; }
.radio.is-held .radio-scope { cursor: not-allowed; }
.radio.is-held .radio-hit:disabled,
.radio.is-held .radio-hit[aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: inset 0 0 0 999px rgba(12, 13, 15, 0.6);
}

/* Band and mode keys. Over the screen on a radio big enough to hold
   finger-sized keys there; hung below it on a narrower one. */
.scr-pop {
  position: absolute;
  left: 27.604%; top: 14.211%; width: 40.625%; height: 60.263%;
  z-index: 3;
  display: flex; flex-direction: column; gap: 0.6cqw;
  padding: 0.8cqw;
  box-sizing: border-box;
  border-radius: 0.3cqw;
  background: rgba(2, 4, 8, 0.97);
  font-size: max(1.35cqw, 13px);
}
.scr-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.scr-pop-title { margin: 0; color: #8fd3ff; font-weight: 700; }
.scr-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6cqw; }
/* The band keys: 80, 40 and 20 m, three across the full width. */
.scr-grid.is-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scr-pop .scr-grid.is-bands .scr-cell { min-height: max(5.2cqw, 48px); font-size: 1.2em; }
.scr-pop button {
  font: inherit; color: inherit;
  margin: 0; background: none;
  cursor: pointer;
  min-height: 44px; min-width: 44px;
  box-sizing: border-box;
}
.scr-pop button:focus-visible { outline: 2px solid #8fd3ff; outline-offset: 1px; }
.scr-pop .scr-cell {
  padding: 0 0.3rem;
  border: 1px solid #3c5a8c;
  border-radius: 0.3cqw;
  background: #13213a;
  font-family: var(--font-mono);
}
.scr-pop .scr-cell.is-on { background: #2f66c5; border-color: #8fb8ff; }
.scr-pop .scr-cell:disabled { opacity: 0.3; cursor: default; }
.scr-pop .scr-close {
  padding: 0 1rem;
  border: 1px solid #6a6e73;
  border-radius: 0.3cqw;
}

@container (max-width: 800px) {
  .scr-pop {
    left: 0; top: calc(100% + 0.25rem); width: 100%; height: auto;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #3d4045;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
    font-size: 15px;
  }
  .scr-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 0.4rem; }
  .scr-grid.is-bands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The Multi-function menu (manual p. 1-7), as the 7300 draws it: a column
   down the right of the screen, under the top row, over the soft keys there
   (its back key takes EXPD/SET's place). Laid on top: nothing under it moves
   (Eskil: "multi should not make stuff jump. the new menu goes on top."), and
   the first half of the meter, the ALC zone, stays in sight. Positions as
   the screen's: right edge 68.229 %, 24 % of its width, its full height. */
.scr-multi {
  position: absolute;
  left: 58.479%; width: 9.75%; top: 14.211%; height: 60.263%;
  z-index: 3;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr)) 11%;
  gap: 0.25cqw;
  padding: 0.25cqw;
  border-left: 1px solid #8fa3b8;
  background: #05080c;
  color: #f4f4f4;
  font-size: max(1.15cqw, 9px);
}
.scr-multi .multi-item {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.25em;
  margin: 0; padding: 0.2em 0.45em;
  border: 1px solid #5e6b7a; border-radius: 0.25cqw;
  background: #0d1218;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.scr-multi .multi-item:focus-visible { outline: 2px solid #8fd3ff; outline-offset: 1px; }
.multi-name { font-weight: 700; letter-spacing: 0.04em; text-align: center; white-space: nowrap; overflow: hidden; }
.multi-bar { display: block; height: 0.45em; background: #26303b; }
.multi-fill { display: block; height: 100%; width: 0; background: #4fc3ff; }
.multi-fill.is-half { width: 50%; }
.multi-sub {
  display: flex; justify-content: space-between; gap: 0.4em;
  font-size: 0.9em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The item MULTI turns: blue, its bar yellow, as on the radio. */
.scr-multi .multi-item.is-on { border-color: #8cc0ff; background-color: #1f6fd6; }
.scr-multi .multi-item.is-on .multi-fill { background: #ffd200; }
/* Not in the trainer (COMP, MONITOR), or not in this mode (MIC GAIN in CW). */
.scr-multi .multi-item.is-inert,
.scr-multi .multi-item.is-off { color: #8a8d92; cursor: default; }
.scr-multi .multi-item.is-inert .multi-fill,
.scr-multi .multi-item.is-off .multi-fill { background: #56606b; }
.scr-multi .multi-item:disabled { cursor: default; }
.scr-multi .multi-close {
  min-width: 0; min-height: 0;
  margin: 0; padding: 0;
  border: 1px solid #6a6e73; border-radius: 0.25cqw;
  background: linear-gradient(#4d5866, #222a33);
  color: #fff; font: inherit; font-size: 1.5em; line-height: 1;
  cursor: pointer;
}
.scr-multi .multi-close:focus-visible { outline: 2px solid #8fd3ff; outline-offset: 1px; }
}

/* The demo page's instructor strip; not part of the radio. */
.radio-demo-strip { display: flex; flex-wrap: wrap; gap: var(--s-2, 0.5rem); align-items: center; margin-top: var(--s-4, 1rem); }

/* ---- on a phone ---------------------------------------------------------

   The whole front panel scaled to a phone left a waterfall and a frequency
   too small to use. Below this width the drawing gives way: the screen full
   width, the keys under it, then -- Eskil, 2026-10-21 -- MULTI and the main
   dial straight under the screen, the MULTI strip beside the key grid as on
   the radio's right, and last the radio's left: TRANSMIT, TUNER, VOX/BK-IN
   beside TWIN PBT and AF. The live controls are the same elements; the
   `.ph` drawings carry what the trainer does not have, grey as on the
   desktop. */
@container (max-width: 720px) {
  .radio-face {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    grid-template-areas:
      "badge  power"
      "screen screen"
      "multi  multi"
      "fkeys  fkeys"
      "mk     grid"
      "strip  dial"
      "tx     pbt"
      "tune   pbt"
      "bk     af";
    align-items: start;
    gap: 12px;
    padding: 10px 10px 14px;
    border: 3px solid #050506;
    border-radius: 18px;
    background: linear-gradient(#1f2124, #141517);
    box-shadow: inset 0 1px 0 #3a3d41;
    /* A tablet, or a desktop window with the rail open, gets this layout
       too: kept to a phone's proportions, centred, not stretched. */
    max-width: 520px;
    margin-inline: auto;
  }
  .radio-body { display: none; }
  .ph { display: block; }

  .phone-badge {
    display: block; grid-area: badge;
    align-self: center;
    margin: 0 0 0 4px;
    color: #f2f2f2; font-size: 15px; font-weight: 800; letter-spacing: 0.06em;
  }
  .phone-badge .badge-based {
    display: block;
    color: #c9c9c9; font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  }

  .radio-screen {
    position: relative;
    left: auto; top: auto; width: auto;
    height: clamp(400px, 118cqw, 540px);
    grid-area: screen;
    grid-template-columns: 50px minmax(0, 1fr) 64px;
    grid-template-rows: 48px 60px 24px 50px 24px minmax(0, 1fr) 46px;
    grid-template-areas:
      "top   top   top"
      "ind   freq  freq"
      "ind   agc   side"
      "meter meter meter"
      "head  head  head"
      "scope scope scope"
      "soft  soft  soft";
    border: 6px solid #050506;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #2e3033;
    font-size: 14px;
  }
  .scr-top { gap: 6px; padding: 2px 8px 0 6px; }
  .radio-screen .scr-mode { min-height: 44px; min-width: 64px; font-size: 17px; }
  .radio-screen .scr-fil { min-height: 44px; min-width: 56px; font-size: 16px; }
  .scr-pb { width: 36px; }
  .scr-ind-col { padding: 4px 0 0 6px; }
  .scr-flag, .scr-ind { font-size: 12px; }
  .scr-freq { font-size: min(12.4cqw, 60px); }
  .radio-screen .scr-mhz,
  .radio-screen .scr-khz,
  .radio-screen .scr-dec { display: inline-block; min-height: 44px; min-width: 44px; padding: 0 2px; }
  /* One MHz digit in a 44 px key: kept against its point, not centred. */
  .radio-screen .scr-mhz { text-align: right; }
  .radio-screen .scr-dec { text-align: left; }
  .scr-side { align-self: center; padding: 0 8px 0 0; }
  .scr-agc { padding-left: 20%; font-size: 13px; }
  .radio-screen .scr-meter { grid-template-columns: 30px minmax(0, 1fr) 72px; min-height: 44px; }
  .scr-head { font-size: 11px; }
  .scr-head .pill.is-dim, .scr-head .arrows { display: none; }
  .radio-screen .scr-soft .soft { font-size: 11px; letter-spacing: -0.02em; }
  /* EXPD on a phone: the readout closes up and the screen grows, so the
     scope gains most of the extra height. */
  .radio-screen.is-expd {
    height: clamp(480px, 140cqw, 640px);
    grid-template-rows: 44px 44px 22px 44px 24px minmax(0, 1fr) 46px;
  }
  .radio-screen.is-expd .scr-freq { font-size: min(9cqw, 44px); }
  .radio-screen.is-expd .scr-mode, .radio-screen.is-expd .scr-fil { font-size: 15px; }
  .radio-screen .scr-warn { padding: 8px 12px; border-radius: 6px; font-size: 16px; }
  .radio-screen .scr-toast { padding: 4px 10px; border-radius: 4px; }

  .ph-fkeys { grid-area: fkeys; width: 100%; height: auto; }
  .ph-grid { grid-area: grid; width: 100%; height: auto; }

  /* The MULTI strip, as the radio's: one dark column holding MULTI (live)
     over XFC, TX/RX, AUTO TUNE and SPEECH (drawn). */
  .hit-multi {
    grid-area: mk;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 100%; height: auto;
    padding: 8px 0 4px;
    border-radius: 10px 10px 0 0;
    background: #09090a;
    box-shadow: inset 1px 1px 0 #2a2c2f, inset -1px 0 0 #2a2c2f;
    /* The strip runs on into the row under it, past the grid's gap. */
    margin-bottom: -12px;
    align-self: stretch;
  }
  .hit-multi .hit-word { display: block; color: #dcdcdc; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
  .hit-multi .phone-knob { display: block; width: 76px; height: 76px; flex: none; }
  .hit-multi .hit-sub { display: block; color: #b9bcc0; font-family: var(--font-mono); font-size: 12px; }
  .hit-multi[aria-expanded="true"] { outline: none; }
  .hit-multi[aria-expanded="true"] .phone-knob { outline: 2px solid #8fd3ff; outline-offset: 2px; border-radius: 50%; }
  .ph-strip {
    grid-area: strip;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 0 12px;
    border-radius: 0 0 10px 10px;
    background: #09090a;
    box-shadow: inset 1px 0 0 #2a2c2f, inset -1px -1px 0 #2a2c2f;
    align-self: stretch;
  }
  .hit-dial {
    grid-area: dial; justify-self: center;
    width: 100%; max-width: 230px; height: auto; aspect-ratio: 1;
  }

  /* The live keys, drawn as the radio's: dark, rounded, in a well, white. */
  .radio-hit { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .hit-power, .hit-transmit, .hit-tuner, .hit-bkin {
    display: flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 10px;
    border: 1px solid #4a4d51; border-radius: 7px;
    background: linear-gradient(#3d3f43, #1f2123);
    box-shadow: 0 0 0 3px #070708, 0 0 0 4px #2c2e31;
    color: #f1f1f1; font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
    white-space: nowrap;
    margin: 4px;
  }
  .hit-word { display: inline; }
  .hit-power { grid-area: power; justify-self: end; min-width: 120px; }
  /* POWER's lamp: a bar along the top of the key, as on the radio. */
  .hit-power .hit-led {
    display: block; position: absolute; left: 22%; right: 22%; top: 5px;
    height: 3px; border-radius: 2px; background: #1d1e20;
  }
  .hit-power[aria-pressed="true"] .hit-led { background: #b9ff4a; }
  .hit-transmit[aria-pressed="true"], .hit-tuner[aria-pressed="true"] { border-color: #c9ccd0; }
  .hit-transmit { grid-area: tx; }
  .hit-tuner { grid-area: tune; }
  .hit-bkin { grid-area: bk; }
  .hit-bkin.is-dim { color: #8a8d92; }
  .radio.is-off .radio-hit:not(.hit-power) { opacity: 0.45; }
  /* Held, the same fading as off, on the held controls only. */
  .radio.is-held .radio-hit:disabled,
  .radio.is-held .radio-hit[aria-disabled="true"] { opacity: 0.45; }
  .radio.is-held .hit-tuner:disabled,
  .radio.is-held .hit-bkin:disabled { box-shadow: 0 0 0 3px #070708, 0 0 0 4px #2c2e31; }
  /* MULTI tops the dark strip: faded, its ground would lighten into a seam,
     so it takes the desktop's dark wash instead, under the strip's edges. */
  .radio.is-held .hit-multi:disabled {
    opacity: 1;
    box-shadow: inset 1px 1px 0 #2a2c2f, inset -1px 0 0 #2a2c2f, inset 0 0 0 999px rgba(12, 13, 15, 0.6);
  }
  .radio.is-held .hit-multi:disabled > * { opacity: 0.45; }
  .radio.is-held .hit-dial[aria-disabled="true"],
  .radio.is-held .hit-af[aria-disabled="true"] { box-shadow: none; }

  .ph-pbt { grid-area: pbt; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
  .ph-lbl { flex: 1 0 100%; margin: 4px 0 0; text-align: center; color: #dcdcdc; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
  .hit-af { grid-area: af; justify-self: center; width: 112px; height: 112px; border-radius: 50%; }
  .phone-knob { display: block; width: 100%; height: 100%; pointer-events: none; }

  /* The menu under the screen on a phone, as the radio's items: two by two,
     the back key at the end, every target finger-sized. */
  .scr-multi {
    position: relative;
    left: auto; top: auto; bottom: auto; width: auto; height: auto;
    grid-area: multi;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 6px;
    padding: 8px;
    border: 2px solid #3c5a8c;
    border-radius: 10px;
    font-size: 14px;
  }
  .scr-multi .multi-item { min-height: 64px; padding: 6px 10px; border-radius: 6px; }
  .multi-bar { height: 6px; }
  .scr-multi .multi-close { grid-column: 2; justify-self: end; min-width: 96px; min-height: 44px; border-radius: 6px; font-size: 22px; }
}

/* The smallest phones. */
@container (max-width: 340px) {
  .scr-head .pill.is-hold { display: none; }
  .scr-head .title { font-size: 1em; letter-spacing: 0; }
  .radio-screen .scr-soft .soft { font-size: 9px; letter-spacing: -0.03em; }
  .scr-top { gap: 4px; padding: 2px 4px 0 4px; }
  .radio-screen .scr-mode { min-width: 56px; }
  .scr-pb { width: 28px; }
  .hit-power, .hit-transmit, .hit-tuner, .hit-bkin { padding: 0 6px; font-size: 13px; letter-spacing: 0; }
}

/* ---- the CW key (keyer.js), shown only in CW and CW-R ---- */
.cw-key { margin-top: var(--s-4, 1rem); }
.cw-key[hidden], [data-ssb-only][hidden] { display: none; }
.cw-key-title { font-size: 1rem; margin: 0 0 0.5rem; }
.cw-key-row { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; }
.cw-straight { flex: 1 1 10rem; min-height: 64px; font-size: 1.4rem; letter-spacing: 0.1em; }
.cw-paddle { display: flex; gap: 0.5rem; flex: 1 1 10rem; }
.cw-paddle .btn { flex: 1; min-height: 64px; min-width: 64px; font-size: 2rem; line-height: 1; }
.cw-straight.is-down, .cw-paddle .btn.is-down { filter: brightness(0.8); }
.cw-wpm { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }
.cw-wpm input { flex: 1; min-height: 44px; }
.cw-wpm output { font-family: var(--font-mono, monospace); min-width: 4.5em; text-align: right; }