/* A little instrument-panel theatre. Every face is drawn locally in CSS. */
.awos.has-radio { position:relative; isolation:isolate }
.awos-radio-host {
  position:relative;
  overflow:hidden;
  container-type:inline-size;
  width:100%;
  margin:0 0 15px;
  color:#ddd9c6;
  --radio-face:#282c2c;
  --radio-metal:#444947;
  --radio-letter:#d0d3c7;
  --radio-glow:#ffad4b;
  --dial-turn:0deg;
}
.awos-radio-stage { padding:21px 12px 5px }
.awos-radio-scene {
  position:relative;
  width:min(100%,650px);
  margin:0 auto;
  padding:7px;
  perspective:800px;
}
.awos-radio-tear {
  position:absolute;
  inset:0;
  background:#787d6c;
  clip-path:polygon(0 8%,3% 3%,8% 5%,12% 0,17% 3%,25% 1%,30% 4%,37% 1%,43% 3%,49% 0,55% 4%,62% 1%,68% 3%,74% 0,79% 4%,87% 2%,91% 5%,97% 1%,100% 7%,98% 16%,100% 25%,98% 35%,100% 46%,98% 55%,100% 68%,98% 76%,100% 88%,97% 97%,91% 95%,86% 100%,79% 96%,74% 99%,67% 97%,59% 100%,53% 96%,47% 100%,41% 97%,34% 99%,28% 96%,20% 100%,14% 96%,8% 99%,3% 96%,0 91%,2% 82%,0 70%,2% 60%,0 49%,2% 39%,0 28%,2% 17%);
  filter:drop-shadow(0 3px 2px #555b3c55);
}
.awos-radio-tear::after {
  content:"";
  position:absolute;
  inset:3px;
  background:#19201b;
  clip-path:inherit;
  box-shadow:inset 0 0 14px #000;
}
.awos-radio-impact {
  position:absolute;
  inset:-7px;
  border:2px solid #a79c6c88;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.awos-radio-face {
  position:relative;
  z-index:2;
  min-height:154px;
  padding:14px 23px 9px;
  border:1px solid #535951;
  border-radius:7px;
  background:
    linear-gradient(175deg,#ffffff0c,#ffffff00 38%,#0000001b),
    repeating-linear-gradient(90deg,#ffffff02 0,#ffffff02 1px,#00000002 1px,#00000002 3px),
    var(--radio-face);
  box-shadow:0 2px 0 #777c6c,0 5px 0 #111713,0 9px 9px #1521176b,inset 0 1px 0 #ffffff30,inset 0 -2px 3px #0007;
  transform-origin:50% 65%;
  font:9px/1.3 var(--mono,monospace);
  letter-spacing:.6px;
}
.awos-radio-screws { position:absolute; inset:0; pointer-events:none }
.awos-radio-screw {
  position:absolute;
  width:8px;
  height:8px;
  border:1px solid #1119;
  border-radius:50%;
  background:linear-gradient(120deg,#868b80,#2c312b);
  box-shadow:inset 0 1px 1px #fff4,0 1px 1px #000;
}
.awos-radio-screw::after {
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:3px;
  height:1px;
  background:#111c;
  transform:rotate(-35deg);
  box-shadow:0 1px 0 #a4a89188;
}
.awos-radio-screw:nth-child(1) { top:8px; left:7px }
.awos-radio-screw:nth-child(2) { top:8px; right:7px; transform:rotate(75deg) }
.awos-radio-screw:nth-child(3) { bottom:8px; left:7px; transform:rotate(20deg) }
.awos-radio-screw:nth-child(4) { bottom:8px; right:7px; transform:rotate(-50deg) }
.awos-radio-brand {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:13px;
  color:var(--radio-letter);
  white-space:nowrap;
}
.awos-radio-brand strong { font-size:10px; font-weight:600; letter-spacing:2px }
.awos-radio-brand > span { font-size:8px; opacity:.65 }
.awos-radio-amber-layout {
  display:grid;
  grid-template-columns:46px minmax(0,1.3fr) minmax(0,.9fr) 48px;
  align-items:center;
  gap:16px;
}
.awos-radio-readout {
  position:relative;
  min-width:0;
  padding:7px 11px 6px;
  border:2px solid #111510;
  border-radius:3px;
  background:linear-gradient(165deg,#33301f,#161b15 60%);
  box-shadow:0 1px 0 #ffffff1a,inset 0 2px 6px #000c;
}
.awos-radio-readout::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(155deg,#ffffff0c,#ffffff02 48%,transparent 49%);
}
.awos-radio-display-label,.awos-radio-display-baseline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  color:#8e8b64;
  font-size:7px;
  letter-spacing:.75px;
  white-space:nowrap;
}
.awos-radio-frequency {
  display:block;
  padding:2px 0 1px;
  color:#76502a;
  font-family:"Courier New",var(--mono,monospace);
  font-size:clamp(28px,5.8cqw,42px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  transition:color .24s,text-shadow .24s;
}
.is-powered .awos-radio-frequency {
  color:var(--radio-glow);
  text-shadow:0 0 5px color-mix(in srgb,var(--radio-glow),transparent 50%),0 0 12px color-mix(in srgb,var(--radio-glow),transparent 80%);
}
.awos-radio-standby {
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  border:1px solid #111510;
  border-radius:3px;
  color:#a5a086;
  background:linear-gradient(165deg,#343025,#1a1e17);
  box-shadow:inset 0 2px 4px #0008;
  font-size:7px;
}
.awos-radio-standby strong { font:700 clamp(19px,3.8cqw,27px)/1.2 "Courier New",monospace; letter-spacing:-1px; color:#a7682e }
.is-powered .awos-radio-standby strong { color:#ed9747; text-shadow:0 0 5px #f2943a33 }
.awos-radio-knob-group { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; color:var(--radio-letter); white-space:nowrap; font-size:6px; letter-spacing:.5px }
.awos-radio-knob {
  position:relative;
  display:block;
  width:34px;
  height:34px;
  border:3px solid #141615;
  border-radius:50%;
  background:repeating-conic-gradient(#272b29 0deg 5deg,#464a43 5deg 8deg,#242824 8deg 12deg);
  box-shadow:0 3px 3px #0009,0 -1px 1px #ffffff20;
}
.awos-radio-knob::before { content:""; position:absolute; inset:4px; border-radius:50%; background:linear-gradient(135deg,#565b52,#222723 70%); border:1px solid #6e746040; box-shadow:inset 0 1px 1px #fff1 }
.awos-radio-knob i { position:absolute; inset:0; transform:rotate(var(--dial-turn)); transition:transform .17s ease-out }
.awos-radio-knob i::after { content:""; position:absolute; top:5px; left:calc(50% - 1px); width:2px; height:7px; border-radius:1px; background:#c2c5ac; box-shadow:0 0 1px #000 }
.awos-radio-knob-group.is-large .awos-radio-knob { width:43px; height:43px }
.awos-radio-knob-group.is-large .awos-radio-knob::after { content:""; position:absolute; inset:-5px; border:1px solid #878b7466; border-radius:50%; z-index:-1 }
.awos-radio-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  margin-top:13px;
  padding-top:6px;
  border-top:1px solid #8e97732a;
  color:var(--radio-letter);
  font-size:6px;
  letter-spacing:.85px;
  opacity:.8;
  white-space:nowrap;
}
.awos-radio-power { display:inline-flex; align-items:center; gap:5px; color:var(--radio-letter) }
.awos-radio-power i,.awos-radio-lamp { display:inline-block; width:4px; height:4px; border-radius:50%; background:#426040; box-shadow:inset 0 1px 1px #0008; transition:background .2s,box-shadow .2s }
.is-powered .awos-radio-power i { background:#aacd65; box-shadow:0 0 5px #a6cb6170 }
.awos-radio-receive { display:inline-flex; align-items:center; gap:4px }
.awos-radio-lamp { background:#3b492f }
.awos-radio-lamp-label { opacity:.55 }
.is-receiving .awos-radio-lamp { background:#d6ec7b; box-shadow:0 0 6px #d6ec7b88 }
.is-receiving .awos-radio-lamp-label { color:#d6ec7b; opacity:1 }
.awos-radio-caption { display:flex; align-items:center; justify-content:center; gap:10px; margin:17px auto 0; max-width:500px; color:#69755c; font:8px/1.5 var(--mono,monospace); letter-spacing:1.1px; white-space:nowrap }
.awos-radio-caption-line { width:30px; height:1px; background:#bac4ad }
.awos-radio-debris { position:absolute; z-index:3; width:var(--chip-size); height:calc(var(--chip-size)*.6); background:linear-gradient(150deg,#fcfdf3,#c3cab5); clip-path:polygon(0 8%,85% 0,100% 76%,30% 100%); filter:drop-shadow(0 2px 1px #25301d33); pointer-events:none; opacity:0 }
/* The field receiver has a large centre display and a real moving needle. */
.awos-radio-field { --radio-face:#4c5444; --radio-metal:#5e6954; --radio-letter:#e0dfbd; --radio-glow:#d6e99b }
.awos-radio-field .awos-radio-face { border:2px solid #687258; border-radius:8px; background:repeating-linear-gradient(0deg,#ffffff03 0,#ffffff03 1px,transparent 1px,transparent 3px),linear-gradient(160deg,#57604e,#3d483a); box-shadow:0 2px 0 #889278,0 5px 0 #222c22,0 9px 10px #18221770,inset 0 1px 0 #ffffff24 }
.awos-radio-field .awos-radio-brand strong { font-size:9px; letter-spacing:1.6px }
.awos-radio-field-layout { display:grid; grid-template-columns:85px minmax(0,1fr) 61px; gap:19px; align-items:center }
.awos-radio-field .awos-radio-readout { padding:8px 15px; background:linear-gradient(150deg,#303b28,#192419); border-color:#20281d; border-width:3px; border-radius:5px }
.awos-radio-field .awos-radio-display-label,.awos-radio-field .awos-radio-display-baseline { color:#a7b58b }
.awos-radio-field .awos-radio-frequency { font-size:clamp(28px,7.3cqw,50px); letter-spacing:0; text-align:center; color:#5b6544 }
.awos-radio-field.is-powered .awos-radio-frequency { color:#d6e99b }
.awos-radio-field .awos-radio-knob-group.is-large .awos-radio-knob { width:51px; height:51px; border-color:#20261b; background:repeating-conic-gradient(#3c4434 0deg 6deg,#60694e 6deg 9deg,#394332 9deg 13deg) }
.awos-radio-field .awos-radio-knob::before { background:linear-gradient(135deg,#767e59,#36432f) }
.awos-radio-field-meter { text-align:center; color:#d0d4b1; font-size:7px; letter-spacing:.8px }
.awos-radio-meter-face { position:relative; height:38px; margin-top:4px; overflow:hidden; border:3px solid #283023; border-radius:4px 4px 2px 2px; background:#c1c0a0; color:#414c36; box-shadow:inset 0 2px 5px #0005 }
.awos-radio-meter-face::after { content:""; position:absolute; top:7px; left:7%; width:86%; height:22px; border:1px solid #626b4d; border-bottom:0; border-radius:50% 50% 0 0 }
.awos-radio-meter-face > span { position:relative; z-index:1; top:5px; font-size:6px; letter-spacing:0 }
.awos-radio-meter-face > i { position:absolute; z-index:2; bottom:-15px; left:50%; width:1px; height:41px; background:#754429; transform:rotate(-48deg); transform-origin:center 100%; transition:transform .35s ease-out }
.is-receiving .awos-radio-meter-face > i { transform:rotate(29deg) }
.awos-radio-field-toggle { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; font-size:6px }
.awos-radio-field-toggle i { display:block; width:8px; height:14px; border:2px solid #303a2a; border-radius:50%; background:linear-gradient(90deg,#4b5440,#d6d9bb 50%,#727e5c); transform:rotate(12deg); box-shadow:1px 2px 2px #0007; transition:transform .2s }
.is-powered .awos-radio-field-toggle i { transform:rotate(-12deg) }
.awos-radio-field .awos-radio-footer { border-color:#afb98a35 }
/* An early ivory panel, with chrome trim and a mechanical frequency window. */
.awos-radio-ivory { --radio-face:#c6c3af; --radio-letter:#4e5248; --radio-glow:#ead7a4 }
.awos-radio-ivory .awos-radio-face { border:2px solid #787e75; border-radius:4px; background:repeating-linear-gradient(0deg,#ffffff16 0,#ffffff16 1px,#00000004 1px,#00000004 2px),linear-gradient(165deg,#e7e2ca,#b7b9ab 85%); box-shadow:0 2px 0 #f5f2e4,0 5px 0 #5f685d,0 9px 9px #22301b6b,inset 0 1px 1px #fff9,inset 0 -1px 1px #6a7467 }
.awos-radio-ivory .awos-radio-brand { border-bottom:1px solid #7b837555; padding-bottom:6px; margin-bottom:8px }
.awos-radio-ivory .awos-radio-brand strong { font-family:Georgia,serif; font-style:italic; font-size:15px; letter-spacing:2px; color:#3d4b4b; line-height:1 }
.awos-radio-ivory-layout { display:grid; grid-template-columns:54px minmax(0,1fr) 68px; align-items:center; gap:20px }
.awos-radio-ivory-power { display:flex; flex-direction:column; align-items:center; gap:8px }
.awos-radio-ivory-power > .awos-radio-power { font-size:6px }
.awos-radio-ivory .awos-radio-readout { border:2px solid #8d9387; border-radius:3px; padding:4px 9px; background:#d2d0ba; box-shadow:inset 0 1px 2px #fff7,0 1px 1px #fff8 }
.awos-radio-ivory .awos-radio-display-label,.awos-radio-ivory .awos-radio-display-baseline { color:#626b5e; font-size:6px }
.awos-radio-mechanical { position:relative; margin:4px 0; padding:0 7px; overflow:hidden; border:3px solid #434d42; border-radius:2px; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(14.28% - 1px),#9e9b7644 calc(14.28% - 1px),#9e9b7644 14.28%),linear-gradient(#33392d,#202a22 52%,#141e17 53%,#30382a); box-shadow:inset 0 2px 4px #0009,0 1px 0 #fff7 }
.awos-radio-ivory .awos-radio-frequency { font-family:"Courier New",monospace; font-size:clamp(28px,6.2cqw,43px); text-align:center; line-height:1.2; letter-spacing:1px; color:#948d6e; text-shadow:0 1px 0 #0b130d }
.awos-radio-ivory.is-powered .awos-radio-frequency { color:#ead7a4; text-shadow:0 0 5px #f7d88955 }
.awos-radio-ivory .awos-radio-knob { border:3px solid #575f52; background:repeating-conic-gradient(#777e70 0deg 6deg,#d5d5c0 6deg 9deg,#636c60 9deg 13deg) }
.awos-radio-ivory .awos-radio-knob::before { background:linear-gradient(130deg,#d4d4bd,#818b7d); border-color:#e5e6d4; box-shadow:0 1px 2px #0008 }
.awos-radio-ivory .awos-radio-knob i::after { background:#3b4638 }
.awos-radio-ivory .awos-radio-footer { margin-top:10px; border-color:#7d867249; opacity:.8 }
.awos-radio-tuning-stack { display:flex; flex-direction:column; gap:7px; align-items:center }
.awos-radio-grille { display:block; width:48px; height:14px; background:repeating-linear-gradient(0deg,#65705c 0,#65705c 1px,#d2d5bb 1px,#d2d5bb 3px); border-radius:1px; opacity:.7 }
.awos-radio-ivory .is-receiving .awos-radio-lamp-label,.awos-radio-ivory.is-receiving .awos-radio-lamp-label { color:#586a32 }
.awos-radio-ivory .awos-radio-power i { background:#7f875f }
.awos-radio-ivory.is-powered .awos-radio-power i { background:#9aa85d; box-shadow:0 0 5px #b2bb6888 }
@container (max-width:450px) {
  .awos-radio-stage { padding:13px 0 3px }
  .awos-radio-scene { padding:5px }
  .awos-radio-face { min-height:135px; padding:12px 16px 8px }
  .awos-radio-brand { margin-bottom:10px }
  .awos-radio-brand strong { font-size:9px; letter-spacing:1.4px }
  .awos-radio-brand > span { font-size:6px; letter-spacing:.1px }
  .awos-radio-amber-layout { grid-template-columns:30px minmax(0,1fr) 33px; gap:9px }
  .awos-radio-standby { display:none }
  .awos-radio-readout { padding:7px 8px 6px }
  .awos-radio-display-label,.awos-radio-display-baseline { font-size:6px; letter-spacing:.2px }
  .awos-radio-frequency { text-align:center; font-size:clamp(26px,9cqw,38px); letter-spacing:-1.4px }
  .awos-radio-knob { width:26px; height:26px; border-width:2px }
  .awos-radio-knob::before { inset:3px }
  .awos-radio-knob i::after { top:4px; height:6px }
  .awos-radio-knob-group.is-large .awos-radio-knob { width:31px; height:31px }
  .awos-radio-knob-group > span:last-child { font-size:5px; letter-spacing:0 }
  .awos-radio-footer { margin-top:12px; padding-top:6px; font-size:5px; letter-spacing:.2px }
  .awos-radio-caption { gap:6px; margin-top:12px; font-size:7px; letter-spacing:.4px }
  .awos-radio-caption-line { width:15px }
  .awos-radio-field-layout { grid-template-columns:36px minmax(0,1fr) 32px; gap:9px }
  .awos-radio-field .awos-radio-readout { padding:7px 6px }
  .awos-radio-field .awos-radio-frequency { font-size:clamp(25px,9cqw,37px); letter-spacing:-1px }
  .awos-radio-field .awos-radio-brand strong { font-size:8px; letter-spacing:.5px }
  .awos-radio-field .awos-radio-brand > span { font-size:6px }
  .awos-radio-field .awos-radio-knob-group.is-large .awos-radio-knob { width:31px; height:31px }
  .awos-radio-field-meter { font-size:5px; letter-spacing:0 }
  .awos-radio-meter-face { height:29px; border-width:2px }
  .awos-radio-meter-face > span { font-size:4px; white-space:nowrap }
  .awos-radio-meter-face::after { top:6px; height:19px }
  .awos-radio-field-toggle { gap:3px; font-size:4px }
  .awos-radio-field-toggle i { width:6px; height:12px }
  .awos-radio-ivory-layout { grid-template-columns:30px minmax(0,1fr) 33px; gap:8px }
  .awos-radio-ivory .awos-radio-brand strong { font-size:13px }
  .awos-radio-ivory .awos-radio-readout { padding:4px 5px }
  .awos-radio-ivory .awos-radio-display-label,.awos-radio-ivory .awos-radio-display-baseline { font-size:5px; letter-spacing:.05px }
  .awos-radio-mechanical { padding:0 2px; border-width:2px; margin:6px 0 }
  .awos-radio-ivory .awos-radio-frequency { font-size:clamp(24px,8cqw,34px); letter-spacing:-1px }
  .awos-radio-grille { width:29px; height:11px }
  .awos-radio-ivory-power > .awos-radio-power { font-size:5px }
  .awos-radio-ivory .awos-radio-footer { margin-top:10px }
}
@media (prefers-reduced-motion:reduce) {
  .awos-radio-host *, .awos-radio-host *::before, .awos-radio-host *::after { transition:none!important; animation:none!important }
  .awos-radio-impact,.awos-radio-debris { display:none }
}
@container (max-width:300px) {
  .awos-radio-amber-layout { grid-template-columns:22px minmax(0,1fr) 26px; gap:6px }
  .awos-radio-knob { width:22px; height:22px }
  .awos-radio-knob-group.is-large .awos-radio-knob { width:26px; height:26px }
  .awos-radio-readout { padding-left:5px; padding-right:5px }
  .awos-radio-display-label,.awos-radio-display-baseline { font-size:5px }
  .awos-radio-frequency { font-size:22px }
  .awos-radio-field-layout { grid-template-columns:minmax(0,1fr) 32px; gap:9px }
  .awos-radio-field-meter { display:none }
  .awos-radio-field .awos-radio-frequency { font-size:24px }
  .awos-radio-ivory-layout { grid-template-columns:22px minmax(0,1fr) 26px; gap:6px }
  .awos-radio-ivory .awos-radio-frequency { font-size:20px }
  .awos-radio-ivory .awos-radio-display-baseline { font-size:4px }
  .awos-radio-grille { width:24px }
  .awos-radio-caption { font-size:6px; letter-spacing:.25px; gap:5px }
  .awos-radio-caption-line { width:11px }
}