/* The play page's radio (cpsim.radio; play.js "radio"): a Night City car radio.
 *
 * Ported from the "faithful" design candidate (reference/radio-panel-faithful.zip),
 * which drew it after the concept art in reference/. That prototype styled the
 * whole page — body, every button, every svg — so here every rule sits under
 * .radio-dialog or #radioBtn, and its palette reads the site's tokens. Desktop
 * is an overlay at the design's own size (up to 752px); at 600px and under the
 * phone layout takes over: frequency first, one preset per row.
 *
 * Barlow Condensed is bundled (SIL OFL, barlow-condensed-OFL.txt); the skyline
 * is a crop of the concept art, shown dim behind a gradient. */

@font-face { font-family: "Radio Condensed"; src: url("/static/barlow-condensed-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Radio Condensed"; src: url("/static/barlow-condensed-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Radio Condensed"; src: url("/static/barlow-condensed-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

/* ---- the dialog ----------------------------------------------------------------------- */
dialog.radio-dialog {
  --rc: var(--you); --ry: var(--turn); --rw: #e7ece8; --rm: #94a4a5;
  --rfont: "Radio Condensed", "Barlow Condensed", "Arial Narrow", var(--font-display);
  width: min(752px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px);
  padding: 0; border: 0; background: transparent; color: var(--rw); overflow: auto;
  scrollbar-width: thin; font-family: var(--rfont);
}
dialog.radio-dialog::backdrop { background: rgba(3, 7, 9, .8); }
.radio-dialog *, .radio-dialog *::before, .radio-dialog *::after { box-sizing: border-box; }
.radio-dialog button, .radio-dialog input { font: inherit; color: inherit; }
.radio-dialog button { cursor: pointer; }
.radio-dialog button:disabled { cursor: not-allowed; }
.radio-dialog button:focus-visible, .radio-dialog input:focus-visible { outline: 2px solid var(--rc); outline-offset: 4px; }
.radio-dialog [hidden] { display: none !important; }
.radio-dialog svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; width: 24px; height: 24px; }
/* Unscoped on purpose: an icon drawn through <use> is a shadow copy, which a
 * `.radio-dialog …` descendant rule cannot reach. The name is the radio's own. */
.ri-fill { fill: currentColor; stroke: none; }
.radio-dialog .symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the panel and its frame ---------------------------------------------------------- */
.radio-dialog .radio-panel {
  position: relative; isolation: isolate; padding: 9px 12px 7px;
  background: linear-gradient(115deg, #0e171a77, transparent 25%), #050d10; box-shadow: 0 15px 55px #0009;
  clip-path: polygon(22px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}
.radio-dialog .radio-panel::before {  /* film grain */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 170 170' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E");
}
.radio-dialog .outer-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke-width: 1.1; stroke-linecap: butt; }
.radio-dialog .outer-frame path { vector-effect: non-scaling-stroke; }  /* the frame stretches; its lines should not */
.radio-dialog .frame-muted { stroke: #667276; }
.radio-dialog .frame-lit { stroke: var(--ry); filter: drop-shadow(0 0 2px #f1f34055); }
.radio-dialog .frame-detail { stroke: #6e7975; }
.radio-dialog .radio-top { height: 42px; border-bottom: 1px solid #3e4c4d; display: flex; align-items: center; padding: 0 3px 0 22px; justify-content: space-between; }
.radio-dialog .desktop-heading { display: flex; align-items: center; gap: 17px; }
.radio-dialog .desktop-heading strong { font-size: 25px; letter-spacing: 3px; font-weight: 600; }
.radio-dialog .desktop-heading span { font-size: 13px; letter-spacing: 2.5px; color: #bac7c6; }
.radio-dialog .mobile-heading { display: none; }
.radio-dialog .close { padding: 2px; background: #071114; border: 1px solid #889895; width: 29px; height: 29px; display: grid; place-items: center; }
.radio-dialog .close svg { width: 20px; height: 20px; stroke-width: 1.2; }
.radio-dialog .radio-body { padding: 12px 14px 0; }

/* ---- now playing ---------------------------------------------------------------------- */
.radio-dialog .now-playing { position: relative; display: grid; grid-template-columns: 224px minmax(0, 1fr); column-gap: 29px; min-height: 230px; padding: 0 0 12px; isolation: isolate; }
.radio-dialog .now-playing::before {
  content: ""; position: absolute; inset: 0 0 0 31%; z-index: -1; opacity: .65;
  background: linear-gradient(90deg, #050d10 0%, #050d1070 45%, #050d1000), linear-gradient(0deg, #050d10, transparent 65%),
    url("/static/radio-city.png") center right / auto 100% no-repeat;
}
.radio-dialog .logo-bay { height: 218px; position: relative; padding: 7px; border: 1px solid #83918c; background: linear-gradient(#0b12155e, #050b0d80); display: grid; place-items: center; }
.radio-dialog .logo-bay::before, .radio-dialog .logo-bay::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.radio-dialog .logo-bay::before { left: 5px; top: 5px; border-left: 2px solid var(--ry); border-top: 2px solid var(--ry); }
.radio-dialog .logo-bay::after { right: 5px; bottom: 5px; border-right: 2px solid var(--ry); border-bottom: 2px solid var(--ry); }
.radio-dialog .logo-bay > img { display: block; width: 100%; height: 100%; object-fit: contain; min-height: 0; filter: drop-shadow(0 0 5px #ffffff15); }
.radio-dialog .no-logo { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #a6b2b3; letter-spacing: 2px; font-size: 12px; }
.radio-dialog .no-logo svg { width: 48px; height: 48px; }
.radio-dialog .station-info { padding-top: 6px; min-width: 0; }
.radio-dialog .eyebrow { font-size: 15px; letter-spacing: 2.5px; margin-bottom: 1px; }
.radio-dialog .eyebrow em { font-style: normal; color: var(--rc); letter-spacing: 4px; margin-left: 9px; }
.radio-dialog .station-name { font-size: clamp(40px, 7.3vw, 70px); line-height: 1.02; letter-spacing: 1px; margin: 0 0 9px; font-weight: 700; overflow-wrap: anywhere; }
.radio-dialog .station-name.long { font-size: 40px; }
.radio-dialog .frequency {
  display: inline-flex; gap: 6px; align-items: baseline; background: var(--ry); color: #091111;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 6px);
  padding: 0 12px 2px; line-height: 1.2; font-size: 23px; font-weight: 600;
}
.radio-dialog .frequency strong { font-weight: 700; }
.radio-dialog .frequency i { display: none; }
.radio-dialog .track { margin-top: 17px; margin-right: 120px; min-width: 0; }
.radio-dialog .track-title { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: 1px; margin-bottom: 5px; overflow-wrap: anywhere; }
.radio-dialog .track-artist { font-size: 18px; line-height: 1.25; letter-spacing: 1px; text-transform: uppercase; overflow-wrap: anywhere; color: #c9d4d3; }
.radio-dialog .mobile-genre { display: none; }
.radio-dialog .signal { position: absolute; right: 3px; bottom: 21px; width: 115px; }
.radio-dialog .signal > span { font-size: 14px; line-height: 1.38; letter-spacing: 1.7px; display: block; margin-top: 12px; text-transform: uppercase; }
.radio-dialog .equalizer { height: 49px; display: flex; align-items: flex-end; gap: 3px; }
.radio-dialog .equalizer i {
  flex: 1; min-width: 0; height: 12%;
  background: repeating-linear-gradient(to top, var(--rc) 0 2px, transparent 2px 5px);
  transition: height .12s linear; filter: drop-shadow(0 0 3px #00d5d533);
}
.radio-dialog .off-icon, .radio-dialog .off-message { display: none; }

/* ---- transport, volume ---------------------------------------------------------------- */
/* Previous/Next are .track-skip: the page's own .skip is its skip-to-content link, parked off-screen. */
.radio-dialog .transport { display: grid; grid-template-columns: 112px 88px 88px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid #2b3a3e; border-bottom: 1px solid #2b3a3e; position: relative; }
.radio-dialog .hardware {
  position: relative; height: 57px; border: 1px solid transparent; background: linear-gradient(110deg, #17212566, #070f13);
  box-shadow: inset 0 0 0 3px #060e11; display: flex; align-items: center; justify-content: center; gap: 20px;
  clip-path: polygon(5px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 5px);
}
.radio-dialog .hardware:hover { background: #18272c; }
.radio-dialog .hardware:active { transform: translateY(1px); }
.radio-dialog .hardware:disabled { opacity: .35; }
.radio-dialog .power svg { width: 33px; height: 33px; stroke-width: 2.8; }
.radio-dialog .power span { font-size: 17px; letter-spacing: 1px; }
.radio-dialog .power.active { color: var(--ry); box-shadow: inset 0 0 0 2px #060e11, inset 0 0 17px #edff0018; }
.radio-dialog .track-skip svg { width: 23px; height: 23px; }
.radio-dialog .volume { display: flex; align-items: center; gap: 14px; padding-left: 18px; height: 68px; border-left: 1px solid #304044; margin: -12px 0; }
.radio-dialog .volume button { border: 0; background: none; padding: 0; display: flex; }
.radio-dialog .volume button svg { width: 25px; height: 25px; }
.radio-dialog .volume button[aria-pressed="true"] { color: var(--rm); }
.radio-dialog .volume-track { position: relative; flex: 1; min-width: 30px; height: 13px; background: #17242a; border-radius: 10px; }
.radio-dialog .volume-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rc); box-shadow: 0 0 7px #00e2e328; border-radius: 2px; }
.radio-dialog .volume input { position: absolute; inset: -12px 0; width: 100%; height: 37px; appearance: none; -webkit-appearance: none; background: transparent; margin: 0; cursor: pointer; }
.radio-dialog .volume input::-webkit-slider-runnable-track { background: transparent; height: 13px; }
.radio-dialog .volume input::-webkit-slider-thumb { -webkit-appearance: none; width: 19px; height: 19px; margin-top: -3px; background: #ecf9f3; border-radius: 50%; box-shadow: 0 0 5px #bdeff66b; }
.radio-dialog .volume input::-moz-range-track { background: transparent; }
.radio-dialog .volume input::-moz-range-thumb { width: 19px; height: 19px; border: 0; border-radius: 50%; background: #ecf9f3; }
.radio-dialog .volume output { min-width: 38px; text-align: right; font-size: 18px; letter-spacing: .5px; }

/* ---- crossfade, presets --------------------------------------------------------------- */
.radio-dialog .crossfade { padding: 0; border: 0; margin: 13px 0 0; min-width: 0; }
.radio-dialog .crossfade legend, .radio-dialog .presets-title { font-size: 17px; letter-spacing: 1.5px; font-weight: 400; width: 100%; margin: 0; padding: 0 0 7px; border-bottom: 1px solid #344446; }
.radio-dialog .crossfade legend span, .radio-dialog .presets-title span { font-size: 12px; letter-spacing: 1.4px; color: #899b9b; margin-left: 9px; }
.radio-dialog .crossfade small, .radio-dialog .presets-title small { display: none; }
.radio-dialog .fade-options { display: flex; gap: 48px; padding: 10px 5px 14px; }
.radio-dialog .fade-options label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 18px; letter-spacing: .7px; }
.radio-dialog .fade-options input { appearance: none; margin: 0; border-radius: 50%; width: 24px; height: 24px; border: 1px solid #c9d5d3; display: grid; place-content: center; cursor: pointer; }
.radio-dialog .fade-options input:checked { border: 2px solid var(--rc); box-shadow: 0 0 5px #00dddd44; }
.radio-dialog .fade-options input:checked::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--rc); }
.radio-dialog .presets-section { border-top: 1px solid #344446; padding-top: 9px; }
.radio-dialog .presets-title { border: 0; padding-bottom: 8px; }
.radio-dialog .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.radio-dialog .preset {
  position: relative; display: grid; grid-template-columns: 54px 100px 1fr; align-items: center; min-width: 0; text-align: left;
  background: linear-gradient(115deg, #14202677, #070e12); border: 1px solid transparent; padding: 0; height: 73px; box-shadow: inset 0 0 0 3px #071014;
  clip-path: polygon(9px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.radio-dialog .preset:hover { background: #132429; }
.radio-dialog .preset[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #071014, inset 0 0 13px #f3f30012; }
.radio-dialog .preset .number { display: grid; place-items: center; justify-self: center; width: 34px; height: 40px; font-size: 25px; font-weight: 600; background: #10202470; border: 1px solid #1c292e; line-height: 1; }
.radio-dialog .preset[aria-pressed="true"] .number { color: #071211; background: var(--ry); box-shadow: 0 0 7px #f1f30022; }
.radio-dialog .preset-art { height: 66px; display: grid; place-items: center; border-left: 1px solid #354144; border-right: 1px solid #354144; padding: 6px 18px; color: #7d8b8c; }
.radio-dialog .preset-art img { max-width: 100%; max-height: 55px; object-fit: contain; }
.radio-dialog .preset-copy { min-width: 0; padding: 0 10px; }
.radio-dialog .preset-name { display: block; font-size: 18px; line-height: 1.15; letter-spacing: .7px; overflow-wrap: anywhere; }
.radio-dialog .preset-frequency { display: block; font-size: 17px; letter-spacing: 1.5px; color: #b7c5c6; margin-top: 4px; }
.radio-dialog .preset[aria-pressed="true"] .preset-frequency { color: var(--ry); }
.radio-dialog .preset .mobile-frequency, .radio-dialog .preset .preset-genre, .radio-dialog .preset-chevron { display: none; }
.radio-dialog .radio-footer { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0 5px; font-size: 10px; letter-spacing: 1.5px; color: #a0afae; }
.radio-dialog .radio-footer i { font-style: normal; margin: 0 10px; }

/* Cut corners keep their line: an SVG outline drawn by play.js (`radioEdges`), since
 * clip-path clips a CSS border along with everything else. */
.radio-dialog .cut-edge { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; stroke: #91a3a2; stroke-width: 1; stroke-linecap: butt; z-index: 1; }
.radio-dialog .cut-edge path { vector-effect: non-scaling-stroke; }
.radio-dialog .hardware.active > .cut-edge, .radio-dialog .preset[aria-pressed="true"] > .cut-edge { stroke: var(--ry); }

/* ---- off ------------------------------------------------------------------------------ */
.radio-dialog .is-off .frame-lit { stroke: #81928f; filter: none; }
.radio-dialog .is-off .logo-bay { border-color: #465354; }
.radio-dialog .is-off .logo-bay::before, .radio-dialog .is-off .logo-bay::after { border-color: #546662; }
.radio-dialog .is-off .logo-bay > img, .radio-dialog .is-off .no-logo, .radio-dialog .is-off .station-info { display: none !important; }
.radio-dialog .is-off .off-icon { display: block; width: 72px; height: 72px; color: #849593; stroke-width: 2.7; }
.radio-dialog .is-off .off-message { display: block; grid-column: 2; padding-top: 18px; }
.radio-dialog .off-message h2 { font-size: 40px; line-height: 1; margin: 0 0 12px; font-weight: 700; }
.radio-dialog .off-message p { font-size: 18px; letter-spacing: 2px; line-height: 1.5; margin: 0; color: #9caeac; }
.radio-dialog .is-off .signal { opacity: .15; }
.radio-dialog .is-off .signal > span { visibility: hidden; }
.radio-dialog .is-off .now-playing::before { opacity: .1; }
.radio-dialog .is-off .volume-fill { opacity: .15; }
.radio-dialog .is-off .preset { opacity: .5; }
.radio-dialog .is-off .preset:hover { opacity: 1; }
.radio-dialog .is-off .preset[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #071014; }
.radio-dialog .is-off .preset[aria-pressed="true"] .number { color: #bdc5c5; background: #152124; box-shadow: none; }
.radio-dialog .is-off .preset[aria-pressed="true"] .preset-frequency { color: #a7b7b7; }
.radio-dialog .is-off .preset[aria-pressed="true"] > .cut-edge { stroke: #718681; }
.radio-dialog .is-off .preset-art { filter: grayscale(1); }

/* ---- a long preset list scrolls on its own (2026-09-27) --------------------------------
 * With a dozen stations the panel outgrew the screen and the whole of it scrolled.
 * Now the panel is a column: header, now-playing, controls and Crossfade keep their
 * size, and only the preset list scrolls — so the display and the power button stay
 * in reach. On a screen too short even for the fixed parts (a phone on its side) a
 * scroll inside a scroll is worse than one, so there the panel scrolls whole. */
@media (min-height: 521px) {
  dialog.radio-dialog[open] { display: flex; flex-direction: column; }
  .radio-dialog .radio-panel { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .radio-dialog .radio-top, .radio-dialog .radio-footer { flex: 0 0 auto; }
  .radio-dialog .radio-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .radio-dialog .now-playing, .radio-dialog .transport, .radio-dialog .crossfade { flex: 0 0 auto; }
  .radio-dialog .presets-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .radio-dialog .presets-title { flex: 0 0 auto; }
  .radio-dialog .presets {
    flex: 1 1 auto; min-height: 118px; overflow-y: auto; overscroll-behavior: contain;
    padding: 2px 6px 4px 2px; margin-right: -6px;  /* room for a focus ring and the scrollbar */
    scrollbar-width: thin; scrollbar-color: #5d6b6c transparent;
  }
  .radio-dialog .presets::-webkit-scrollbar { width: 6px; }
  .radio-dialog .presets::-webkit-scrollbar-thumb { background: #5d6b6c; }
}
/* A little shorter than the design's 73px, so more fit before the list scrolls. */
@media (min-width: 601px) {
  .radio-dialog .preset { height: 62px; }
  .radio-dialog .preset-art { height: 56px; padding: 5px 16px; }
  .radio-dialog .preset-art img { max-height: 46px; }
  .radio-dialog .preset .number { height: 36px; width: 32px; font-size: 23px; }
}

/* ---- a narrower desktop -------------------------------------------------------------- */
@media (min-width: 601px) and (max-width: 790px) {
  .radio-dialog .preset { grid-template-columns: 42px 68px 1fr; }
  .radio-dialog .preset-art { padding: 8px; }
  .radio-dialog .now-playing { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
  .radio-dialog .logo-bay { height: 210px; }
  .radio-dialog .transport { grid-template-columns: 96px 64px 64px minmax(0, 1fr); gap: 10px; }
  .radio-dialog .volume { padding-left: 9px; gap: 8px; }
  .radio-dialog .track { margin-right: 95px; }
  .radio-dialog .signal { width: 90px; }
  .radio-dialog .track-title { font-size: 22px; }
  .radio-dialog .track-artist { font-size: 15px; }
  .radio-dialog .fade-options { gap: 28px; }
}

/* ---- phones: frequency first, one preset per row ------------------------------------- */
@media (max-width: 600px) {
  dialog.radio-dialog { width: min(420px, calc(100vw - 20px)); max-height: calc(100dvh - 16px); }
  .radio-dialog .radio-panel { padding: 5px 9px 8px; clip-path: polygon(13px 0, calc(100% - 11px) 0, 100% 11px, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px), 0 13px); }
  .radio-dialog .outer-frame { stroke-width: 1.3; }
  .radio-dialog .radio-top { height: 32px; padding: 0 0 0 2px; }
  .radio-dialog .desktop-heading { display: none; }
  .radio-dialog .mobile-heading { display: block; font-size: 12px; letter-spacing: 1.5px; color: #859698; }
  .radio-dialog .mobile-heading span { color: var(--rc); }
  .radio-dialog .mobile-heading b { color: var(--ry); font-weight: 400; }
  .radio-dialog .close { border: 0; width: 27px; height: 27px; background: transparent; }
  .radio-dialog .close svg { width: 22px; height: 22px; }
  .radio-dialog .radio-body { padding: 11px 3px 0; }
  .radio-dialog .now-playing { min-height: 158px; grid-template-columns: 43% 1fr; column-gap: 12px; padding-bottom: 9px; }
  .radio-dialog .now-playing::before { inset: 0; background-size: cover; opacity: .26; }
  .radio-dialog .logo-bay { height: 150px; padding: 6px; border-color: #283c3f; background: #05101535; }
  .radio-dialog .logo-bay::before, .radio-dialog .logo-bay::after { width: 9px; height: 9px; border-width: 1px; border-color: #44534f; }
  .radio-dialog .station-info { padding-top: 3px; display: flex; flex-direction: column; align-items: flex-start; }
  .radio-dialog .eyebrow { display: none; }
  .radio-dialog .frequency { order: -2; background: none; clip-path: none; padding: 0 26px 0 0; color: var(--ry); font-size: 56px; line-height: .9; gap: 6px; position: relative; font-weight: 700; letter-spacing: -1px; }
  .radio-dialog .frequency span { position: absolute; right: 0; top: 1px; color: var(--rc); font-size: 15px; letter-spacing: .5px; }
  .radio-dialog .frequency i { display: block; position: absolute; right: 1px; top: 21px; color: var(--rc); font-size: 10px; letter-spacing: 0; font-style: normal; }
  .radio-dialog .station-name, .radio-dialog .station-name.long { order: -1; font-size: 24px; letter-spacing: 1px; line-height: 1.05; color: var(--rc); margin: 6px 0 2px; font-weight: 600; }
  .radio-dialog .no-frequency .station-name { font-size: 26px; }
  .radio-dialog .mobile-genre { display: block; font-size: 10px; color: #bbb561; letter-spacing: .35px; line-height: 1.2; }
  .radio-dialog .track { margin: 12px 0 0; min-width: 0; }
  .radio-dialog .track-title { font-size: 16px; font-weight: 400; letter-spacing: .3px; margin-bottom: 3px; }
  .radio-dialog .track-artist { font-size: 12px; letter-spacing: .4px; color: #a8babc; text-transform: none; }
  .radio-dialog .signal { display: none; }
  .radio-dialog .transport { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 3px 0 0; border-top: 0; border-bottom: 1px solid #304549; }
  .radio-dialog .hardware { height: 41px; gap: 12px; }
  .radio-dialog .hardware svg { height: 23px; width: 23px; }
  .radio-dialog .power span { display: none; }
  .radio-dialog .volume { grid-column: 1 / -1; height: 39px; margin: 0; padding: 7px 1px; gap: 13px; border-left: 0; border-top: 1px solid #263b3f; }
  .radio-dialog .volume button svg { width: 20px; height: 20px; }
  .radio-dialog .volume output { font-size: 14px; min-width: 35px; }
  .radio-dialog .volume-track { height: 14px; border: 1px solid #263b3b; border-radius: 0; background: repeating-linear-gradient(90deg, #15262c 0 5px, transparent 5px 8px); }
  .radio-dialog .volume-fill { border-radius: 0; background: repeating-linear-gradient(90deg, var(--rc) 0 5px, transparent 5px 8px); box-shadow: 0 0 8px #00ffff20; }
  .radio-dialog .volume input::-webkit-slider-runnable-track { height: 14px; }
  .radio-dialog .volume input::-webkit-slider-thumb { width: 6px; height: 20px; margin-top: -4px; border-radius: 0; background: transparent; box-shadow: none; }
  .radio-dialog .volume input:focus-visible::-webkit-slider-thumb { background: #fff; }
  .radio-dialog .volume input::-moz-range-thumb { width: 6px; height: 20px; background: transparent; }
  .radio-dialog .crossfade { margin: 10px 0 0; }
  .radio-dialog .crossfade legend, .radio-dialog .presets-title { font-size: 12px; letter-spacing: .5px; border: 0; padding-bottom: 5px; }
  .radio-dialog .crossfade legend span, .radio-dialog .presets-title span { display: none; }
  .radio-dialog .crossfade small, .radio-dialog .presets-title small { display: inline; font-size: 11px; font-weight: 400; color: #8ea4a6; letter-spacing: .4px; }
  .radio-dialog .fade-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 0 11px; }
  .radio-dialog .fade-options label { position: relative; justify-content: center; gap: 0; font-size: 14px; letter-spacing: .1px; min-height: 33px; }
  .radio-dialog .fade-options input { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; border: 1px solid #3e5457; background: #10212640; }
  .radio-dialog .fade-options input:checked { border: 1px solid var(--rc); background: #003b3c99; box-shadow: inset 0 0 8px #00ffff13; }
  .radio-dialog .fade-options input:checked::after { display: none; }
  .radio-dialog .fade-options span { position: relative; pointer-events: none; }
  .radio-dialog .presets-section { padding-top: 2px; border-top: 0; }
  .radio-dialog .presets { grid-template-columns: 1fr; gap: 6px; }
  .radio-dialog .preset { height: 49px; grid-template-columns: 34px 47px minmax(0, 1fr) 16px; clip-path: polygon(4px 0, calc(100% - 5px) 0, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 4px); }
  .radio-dialog .preset .number { width: 25px; height: 33px; font-size: 23px; border: 1px solid #42504f; background: #111c2080; }
  .radio-dialog .preset[aria-pressed="true"] { box-shadow: inset 0 0 10px #00f0eb19; }
  .radio-dialog .preset[aria-pressed="true"] > .cut-edge { stroke: var(--rc); }
  .radio-dialog .preset[aria-pressed="true"] .number { color: var(--ry); background: #151f1c; box-shadow: none; border: 1px solid var(--ry); }
  .radio-dialog .preset-art { height: 45px; border: 0; padding: 4px 5px; position: relative; }
  .radio-dialog .preset-art img { max-height: 38px; }
  /* The phone art tints the white line-art logos yellow into pink. */
  .radio-dialog .preset-art.tinted img { opacity: 0; }
  .radio-dialog .preset-art.tinted::after {
    content: ""; position: absolute; inset: 4px 5px; pointer-events: none;
    background: linear-gradient(170deg, var(--ry) 20%, #fff740 40%, #fa0584 70%);
    mask: var(--logo) center / contain no-repeat; -webkit-mask: var(--logo) center / contain no-repeat;
  }
  .radio-dialog .preset-copy { padding: 0 7px; }
  .radio-dialog .preset-name { font-size: 15px; letter-spacing: .35px; line-height: 1.08; }
  .radio-dialog .preset .mobile-frequency { display: inline; }
  .radio-dialog .preset-frequency { display: none; }
  .radio-dialog .preset .preset-genre { display: block; color: #9ea9a3; font-size: 10px; letter-spacing: .15px; margin-top: 3px; line-height: 1.1; }
  .radio-dialog .preset-chevron { display: block; width: 14px; height: 20px; transform: rotate(-90deg); stroke-width: 1.4; }
  .radio-dialog .preset[aria-pressed="true"] .preset-name { color: var(--ry); }
  .radio-dialog .preset[aria-pressed="true"] .preset-chevron { color: var(--rc); }
  .radio-dialog .radio-footer { font-size: 8px; letter-spacing: .8px; padding: 12px 1px 1px; }
  .radio-dialog .radio-footer i { margin: 0 4px; }
  .radio-dialog .is-off .now-playing { display: flex; flex-direction: column; align-items: center; min-height: 168px; padding-bottom: 12px; }
  .radio-dialog .is-off .logo-bay { border: 0; height: 74px; width: 75px; padding: 10px; }
  .radio-dialog .is-off .logo-bay::before, .radio-dialog .is-off .logo-bay::after { display: none; }
  .radio-dialog .is-off .off-icon { width: 46px; height: 46px; }
  .radio-dialog .is-off .off-message { padding: 0; text-align: center; }
  .radio-dialog .off-message h2 { font-size: 25px; font-weight: 400; letter-spacing: 1px; margin: 0 0 8px; }
  .radio-dialog .off-message p { font-size: 13px; letter-spacing: .8px; line-height: 1.4; }
  .radio-dialog .off-message br { display: none; }
  .radio-dialog .is-off .preset[aria-pressed="true"] .number { border: 1px solid #42504f; }
  .radio-dialog .is-off .preset[aria-pressed="true"] .preset-name { color: #c1c9c8; }
}
@media (max-width: 359px) {
  .radio-dialog .now-playing { gap: 9px; grid-template-columns: 41% 1fr; }
  .radio-dialog .frequency { font-size: 48px; }
  .radio-dialog .logo-bay { height: 142px; }
  .radio-dialog .preset-copy { padding-left: 4px; }
  .radio-dialog .preset-name { font-size: 14px; }
}

/* ---- the launcher in the app bar ------------------------------------------------------- */
#radioBtn { font-family: "Radio Condensed", var(--font-display); letter-spacing: .06em; }
#radioBtn .lbl { text-transform: uppercase; }
#radioBtn.on { color: var(--you); }

/* ---- motion ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .radio-dialog *, .radio-dialog *::before, .radio-dialog *::after { animation: none !important; transition: none !important; }
}
html[data-motion="reduced"] .radio-dialog *, html[data-motion="reduced"] .radio-dialog *::before, html[data-motion="reduced"] .radio-dialog *::after {
  animation: none !important; transition: none !important;
}