/* QETHER 1.3 additions, independent of original cockpit */
.dial { --q-energy: .12; }
.dial::before {
  content: ''; position: absolute; inset: 16%; z-index: 0; pointer-events: none;
  border-radius: 50%; border: 1px solid rgba(255,133,38,.3);
  box-shadow: inset 0 0 34px rgba(154,74,255,.25), 0 0 28px rgba(255,100,20,.17);
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,106,30,.14) 27%, transparent 37% 62%,rgba(176,98,255,.17) 70%,transparent 85%);
  animation: qether-core-orbit 34s linear infinite;
  opacity: .9;
}
.dial:has(canvas.core[hidden])::before { display: none; }
.dial svg.ring { z-index: 2; }
.dial canvas.core { z-index: 1; }
.dial .play, .dial .play-label { z-index: 3; }
.dial.q-music-playing::before { opacity: calc(.65 + var(--q-energy) * .35);filter:brightness(calc(1 + var(--q-energy) * .4)); }
@keyframes qether-core-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dial::before { animation: none !important; } }
.q-music-deck {
  width: min(100%,380px);border:1px solid rgba(245,168,99,.36);border-radius:15px;
  color:#f8f4ff;background:linear-gradient(160deg,rgba(55,17,83,.88),rgba(29,9,49,.93));
  box-shadow:0 8px 28px rgba(0,0,0,.25);overflow:hidden;
}
.q-music-deck summary{min-height:49px;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;font-weight:700;letter-spacing:.025em;color:#ffb562;}
.q-music-deck summary::-webkit-details-marker{display:none}
.q-music-chevron{font-size:22px;line-height:1;transform-origin:center;transition:transform .2s}
.q-music-deck[open] .q-music-chevron{transform:rotate(180deg)}
.q-music-inner{padding:0 14px 14px;display:grid;gap:12px}
.q-music-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.q-music-option{padding:9px 7px;min-height:38px;border:1px solid rgba(215,180,240,.24);border-radius:9px;text-align:center;
  font-size:12px;font-weight:600;background:rgba(12,3,27,.45);color:#e9daf2;}
.q-music-option[aria-pressed="true"]{border-color:#ffad64;color:#190526;background:linear-gradient(135deg,#ffb464,#fa751d)}
.q-music-option:hover{border-color:#ffb464}
.q-music-controls{display:grid;gap:10px}
.q-music-toggle{padding:9px;border:1px solid rgba(255,152,71,.6);border-radius:10px;text-align:center;background:rgba(255,117,34,.15);
  color:#ffbd83;font-weight:700;font-size:13px}
.q-music-toggle[aria-pressed="false"]{background:#331943;color:#ddd1eb}
.q-music-controls label{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;align-items:center;font-size:12px;color:#e2d4f2}
.q-music-controls input{accent-color:#ff861c;min-width:0;width:100%}
.q-music-hint{font-size:11px;line-height:1.5;color:#cdbddd;margin:0}
@media(max-width:960px){.q-music-deck{width:min(84vw,380px)}}
@media(max-width:480px){.q-music-deck{width:min(84vw,360px)}.q-music-option{font-size:11px}}

/* QETHER 1.3 — channel selector is the primary cockpit navigation, not a welcome card */
.channel-select { width:min(96vw,500px); min-height:83px; padding:13px 18px;
  border:2px solid rgba(255,138,45,.58);
  background:linear-gradient(155deg,rgba(83,24,122,.93),rgba(37,10,65,.95));
  box-shadow:0 14px 35px rgba(0,0,0,.36),0 0 27px rgba(255,116,22,.10); }
.channel-select .cs-group { font-family:var(--font-display); font-size:clamp(17px,1.4vw,21px);
  font-weight:800;line-height:1.15;letter-spacing:.01em;text-transform:none;color:#fff; }
.channel-select .cs-name {font-size:12px;font-weight:600;color:#ffbf86;margin-top:3px}
.channel-select .cs-status {font-size:10px;letter-spacing:.10em}
.channel-select .cs-caret {width:42px;height:42px;background:rgba(255,106,27,.26);}
.channel-select .cs-caret svg {width:21px;height:21px}
/* Former now-line duplicates the current programme under the dial. Keep for screen readers. */
.now-line {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important; }
.dial-stage {gap:clamp(10px,1.4vh,18px)}
@media (min-width:961px){.dial-stage {transform:translateY(-12px)} }
@media (max-width:960px){.dial-stage{transform:none;gap:13px}.channel-select{max-width:calc(100vw - 28px)}}
/* Readable distinct music titles, including long titles on 320px devices. */
.q-music-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.q-music-option {text-wrap:balance;line-height:1.3;min-height:43px;font-size:12px}
@media(max-width:350px){.q-music-option{font-size:11px}.channel-select .cs-group{font-size:18px}}

/* V1.4: make the music-specific volume audibly and visibly adjustable. */
.q-music-controls label{grid-template-columns:1fr minmax(90px,1.2fr) 48px}
.q-music-controls output{font-family:var(--font-mono);font-size:12px;color:#ffbb82;text-align:right}
.q-music-option:focus-visible,.q-music-toggle:focus-visible,.q-music-controls input:focus-visible{outline:2px solid #ffb464;outline-offset:2px}

/* Phone: give the translated background-volume label its own line. */
@media(max-width:410px) {
  .q-music-controls label{grid-template-columns:minmax(0,1fr) 50px;gap:6px 9px;}
  .q-music-controls label span{grid-column:1 / -1;overflow-wrap:anywhere;}
  .q-music-controls label input{grid-column:1;}
  .q-music-controls label output{grid-column:2;}
}