/* Sound controls (sound-ui.js). Own stylesheet on purpose: it must not depend on, or clash with, shared.css / components.css.
   Colours come from the DS-0 tokens (--q-*) with a v1 / neutral fallback, so the same file works on v1 pages and v2 pages. */
.qsnd {
  --qsnd-fg: var(--q-text, var(--text, #fff));
  --qsnd-muted: var(--q-text-muted, var(--text-dim, #c9d1d9));
  --qsnd-bg: var(--q-surface-raised, #1f2933);
  --qsnd-bd: var(--q-border-strong, rgb(255 255 255 / 0.4));
  --qsnd-accent: var(--q-brand, var(--btn-primary-from, #15803d));
  --qsnd-on-accent: var(--q-on-brand, var(--btn-text, #fff));
  --qsnd-r: var(--q-radius-sm, 8px);
  position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--q-space-2, 0.5rem);
  color: var(--qsnd-fg); font: inherit;
}
.qsnd--stage {
  --qsnd-fg: var(--q-stage-text, #fff);
  --qsnd-muted: var(--q-stage-muted, #b6c8cc);
  --qsnd-bd: color-mix(in srgb, var(--qsnd-fg) 40%, transparent);
}
.qsnd[hidden], .qsnd [hidden] { display: none !important; }

.qsnd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.85rem; margin: 0;
  font: inherit; font-size: var(--q-fs-sm, 0.9rem); font-weight: 600; line-height: 1.2;
  color: var(--qsnd-fg); background: color-mix(in srgb, var(--qsnd-fg) 8%, transparent);
  border: 1px solid var(--qsnd-bd); border-radius: var(--qsnd-r); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qsnd-btn:hover { background: color-mix(in srgb, var(--qsnd-fg) 16%, transparent); }
.qsnd-btn[aria-pressed="false"] { color: var(--qsnd-muted); }
.qsnd-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.qsnd-btn--primary { color: var(--qsnd-on-accent); background: var(--qsnd-accent); border-color: var(--qsnd-accent); }
.qsnd-btn--primary:hover { background: var(--qsnd-accent); filter: brightness(1.12); }
.qsnd-btn--ghost { background: transparent; border-color: transparent; }
.qsnd--phone .qsnd-mute, .qsnd--phone .qsnd-gear { background: transparent; border-color: transparent; padding: 0; }
.qsnd-i { width: 1.4rem; height: 1.4rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qsnd-kbd {
  font: inherit; font-size: 0.72rem; padding: 0 0.35em; border: 1px solid currentColor; border-radius: 4px; opacity: 0.85;
}
.qsnd-btn:focus-visible, .qsnd-sheet input:focus-visible, .qsnd-sheet select:focus-visible {
  outline: 2px solid var(--q-focus-ink, #111); outline-offset: 2px; box-shadow: 0 0 0 6px var(--q-focus-halo, #ffd25a);
}

.qsnd-chip { color: var(--qsnd-on-accent); background: var(--qsnd-accent); border-color: var(--qsnd-accent); border-radius: 999px; }

/* Caption chip: purely visual (aria-hidden); the page announces the same event through its own live region. */
.qsnd-cap {
  position: fixed; inset-inline: 0; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); margin-inline: auto; z-index: var(--q-z-toast, 60);
  width: max-content; max-width: min(90vw, 32rem); padding: 0.5rem 1.1rem; border-radius: 999px; pointer-events: none;
  color: #fff; background: rgb(8 12 16 / 0.92); font-size: var(--q-fs-md, 1.05rem); font-weight: 600; text-align: center;
  animation: qsnd-in 160ms ease-out;
}
.qsnd--stage .qsnd-cap { bottom: 5.5rem; font-size: var(--q-fs-lg, 1.35rem); }
.qsnd-cap::before { content: "\266A\00a0"; opacity: 0.8; }
@keyframes qsnd-in { from { opacity: 0; transform: translateY(0.4rem); } }

/* Sheet (native <dialog>, modal). */
.qsnd-sheet {
  /* The sheet is a raised surface on both pages, so it takes the regular (not stage) text colours. */
  --qsnd-fg: var(--q-text, var(--text, #fff)); --qsnd-muted: var(--q-text-muted, var(--text-dim, #c9d1d9)); --qsnd-bd: var(--q-border-strong, rgb(255 255 255 / 0.4));
  width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; overflow: auto;
  color: var(--q-text, var(--text, #fff)); background: var(--qsnd-bg); border: 1px solid var(--qsnd-bd); border-radius: var(--q-radius-lg, 14px);
  box-shadow: var(--q-shadow-3, 0 12px 32px rgb(0 0 0 / 0.5));
}
.qsnd-sheet::backdrop { background: var(--q-scrim, rgb(0 0 0 / 0.6)); }
.qsnd-sheet[open] { animation: qsnd-in 160ms ease-out; }
.qsnd-head, .qsnd-foot { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; }
.qsnd-head { padding-bottom: 0; justify-content: space-between; }
.qsnd-head h2 { margin: 0; font-size: var(--q-fs-xl, 1.25rem); line-height: 1.25; }
.qsnd-foot { justify-content: flex-end; flex-wrap: wrap; }
.qsnd-body { display: grid; gap: 0.25rem; padding: 0.75rem 1.25rem 0.5rem; }
.qsnd-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.qsnd-row--col { flex-direction: column; align-items: stretch; gap: 0.25rem; }
.qsnd-row label { display: grid; gap: 0.15rem; font-weight: 600; }
.qsnd-hint { display: block; font-size: 0.875rem; font-weight: 400; color: var(--qsnd-muted); }
.qsnd-sheet input[type="range"] { width: 100%; min-height: 2.75rem; margin: 0; accent-color: var(--qsnd-accent); }
.qsnd-sheet select {
  min-height: 2.75rem; padding: 0 0.6rem; font: inherit; color: var(--q-text, var(--text, #fff)); background: var(--qsnd-bg); border: 1px solid var(--qsnd-bd); border-radius: var(--qsnd-r);
}
.qsnd-switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 2.75rem; height: 1.5rem; margin: 0; cursor: pointer;
  border-radius: 999px; background: transparent; border: 2px solid var(--qsnd-bd);
}
.qsnd-switch::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--qsnd-muted); transition: transform 160ms ease;
}
.qsnd-switch:checked { background: var(--qsnd-accent); border-color: var(--qsnd-accent); }
.qsnd-switch:checked::after { background: var(--qsnd-on-accent); transform: translateX(1.2rem); }
[dir="rtl"] .qsnd-switch:checked::after { transform: translateX(-1.2rem); }
.qsnd-switch:disabled { opacity: 0.55; cursor: not-allowed; }
.qsnd-na { margin: 0.25rem 0; padding: 0.6rem 0.8rem; border-inline-start: 4px solid var(--q-warning, #f7b500); background: color-mix(in srgb, var(--qsnd-fg) 8%, transparent); border-radius: var(--qsnd-r); }

@media (max-width: 30rem) {
  .qsnd--phone .qsnd-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 1rem 1rem 0 0; }
  .qsnd-foot > .qsnd-btn { flex: 1 1 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .qsnd-cap, .qsnd-sheet[open] { animation: none; }
  .qsnd-switch::after { transition: none; }
}
@media (forced-colors: active) {
  .qsnd-btn, .qsnd-switch { border-color: ButtonText; }
  .qsnd-switch:checked { background: Highlight; border-color: Highlight; }
  .qsnd-btn:focus-visible, .qsnd-sheet input:focus-visible, .qsnd-sheet select:focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}
@media print { .qsnd, .qsnd-cap { display: none !important; } }