/* Settings, Audio: the microphone picker and the "Hear call audio" guide.
   30 September 2026 brief, section 6b. Trybe glass: the tokens come from
   live.css and muse.css, with fallbacks so the panel also reads correctly
   when the shell draws it in its own Settings view. Light text on dark glass
   only, 44px minimum tap targets, phone first. */

.audio-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  min-width: 0;
  color: var(--ink, #f8fbff);
  font-family: "Poppins", sans-serif;
  /* The stage sets everything in capitals; instructions are read, so sentence case. */
  text-transform: none;
  letter-spacing: normal;
}
.audio-h {
  margin: 4px 4px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mode-1, #8cf7e2);
}
.audio-label {
  margin: 0 4px;
  font-size: 13px;
  color: var(--muted, rgba(241, 247, 255, 0.72));
}
.audio-select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.22));
  border-radius: 16px;
  background-color: var(--panel, rgba(3, 8, 18, 0.72));
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink, #f8fbff);
  font: inherit;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}
.audio-select:focus-visible,
.audio-btn:focus-visible,
.audio-sec summary:focus-visible,
.audio-link:focus-visible {
  outline: 2px solid var(--mode-2, #76bcff);
  outline-offset: 2px;
}
.audio-select option {
  background: var(--panel-strong, #040913);
  color: var(--ink, #f8fbff);
}
.audio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.audio-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.22));
  border-radius: 22px;
  background: var(--panel, rgba(3, 8, 18, 0.72));
  color: var(--ink, #f8fbff);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.audio-btn:hover { border-color: var(--mode-2, #76bcff); }
.audio-btn[hidden] { display: none; }
.audio-meter {
  height: 10px;
  margin: 0 4px;
  overflow: hidden;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.22));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}
.audio-meter[hidden] { display: none; }
.audio-meter-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #00b2a9, #8cf7e2);
  transition: width 80ms linear;
}
.audio-note {
  min-height: 1.4em;
  margin: 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, rgba(241, 247, 255, 0.72));
}
.audio-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.audio-sec {
  border: 1px solid var(--line, rgba(255, 255, 255, 0.22));
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  padding: 0 14px 4px;
}
.audio-sec[open] { border-color: rgba(0, 178, 169, 0.5); }
.audio-sec summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #f8fbff);
}
.audio-p,
.audio-steps {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink, #f8fbff);
}
.audio-steps { padding-left: 20px; }
.audio-steps li { margin-bottom: 8px; padding-left: 2px; }
.audio-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 10px;
}
.audio-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13px;
  color: var(--mode-1, #8cf7e2);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
@media (prefers-reduced-motion: reduce) {
  .audio-meter-bar { transition: none; }
}