/* Kelly Page -- Packet Journey: pj-sound controls (speaker toggle, volume, per-kind mutes) in the header bar */
.pj-sound-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: relative; }
.pj-sound-tog { white-space: nowrap; }
.pj-sound-tog.on { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 10px rgba(0, 229, 255, .25); }
.pj-sound-vol { width: 110px; accent-color: var(--cyan); }
.pj-sound-vol:disabled { opacity: .4; }
.pj-sound-kinds { position: relative; }
.pj-sound-kinds > summary { list-style: none; white-space: nowrap; }
.pj-sound-kinds > summary::-webkit-details-marker { display: none; }
.pj-sound-n { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.pj-sound-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(300px, calc(100vw - 32px));
  background: var(--panel-solid, #0d152a); border: 1px solid var(--line2); border-radius: 12px; padding: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .55); }
.pj-sound-pop-h { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.pj-sound-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-sound-chip { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--pj-sc); background: var(--raised); color: var(--text); font: inherit; font-size: 13px; }
.pj-sound-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--pj-sc); box-shadow: 0 0 6px var(--pj-sc); }
.pj-sound-chip.off { border-color: var(--line); color: var(--mute); text-decoration: line-through; }
.pj-sound-chip.off i { background: transparent; box-shadow: none; border: 1px solid var(--mute); }
.pj-sound-chip:focus-visible, .pj-sound-tog:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.pj-sound-pop-f { margin-top: 8px; }
@media (max-width: 560px) {
  .pj-sound-vol { width: 84px; }
  .pj-sound-lbl { display: none; }
}
/* a phone: the menu opens across the screen, not from the button (which sits mid-row and pushed it off the right edge) */
@media (max-width: 600px) { .pj-sound-pop { position: fixed; left: 16px; right: 16px; top: auto; width: auto; margin-top: 6px; } }