/* CLAUDE 10-09: the audio editor on the right (app-audioed.js): Basic / Voice changer / Speed for the selected song,
   voiceover, extracted sound, placed sound effect, or the video's own sound. It takes the place of the Style studio the
   way the Text tab's layer editor does (.layer-ed, editor.css); the head, tabs, switches and sliders reuse the
   editor's own look. */
.audio-ed {
  display: none;
}
.inspector.audio-open:not(.dnd-on) > :not(.audio-ed) {
  display: none !important;
}
.inspector.audio-open:not(.dnd-on) > .audio-ed {
  display: block;
}
.audio-ed .overlay-card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.audio-ed .overlay-head {
  position: sticky;
  top: -14px;
  z-index: 2;
  margin: 0 0 8px;
  padding: 2px 0 8px;
  background: #0f120f;
  font-size: 13px;
}
.audio-ed .overlay-head button {
  min-width: 32px;
  min-height: 32px;
}
.audio-ed .ae-tabs {
  display: flex;
  margin-bottom: 12px;
}
.audio-ed .ae-tabs button {
  flex: 1 1 auto;
  padding-inline: 6px;
  font-size: 12px;
}
.audio-ed .ae-tabs button[aria-selected='true'] {
  border-color: #afafb2;
  background: #29292b;
  color: #fff;
}
.audio-ed .ae-pane[hidden] {
  display: none;
}
.audio-ed .ae-pane {
  display: grid;
  gap: 12px;
  align-content: start;
}
.audio-ed small,
.audio-ed .hint {
  color: #8e8e91;
  font-size: 11px;
  line-height: 1.45;
  margin: 0;
}
/* a slider with its number: name, track, value + unit; a diamond on volume */
.ae-f {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'l n' 'r r';
  align-items: center;
  gap: 4px 8px;
  margin: 0;
}
.ae-f .ae-lab {
  grid-area: l;
  color: #cfcfd2;
  font-size: 12px;
}
.ae-f input[type='range'] {
  grid-area: r;
  width: 100%;
  min-height: 24px;
  margin: 0;
}
.ae-n {
  grid-area: n;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 24px;
}
.ae-f:not(.kf-host) .ae-n {
  margin-right: 0;
}
.ae-n input {
  width: 64px;
  min-height: 28px;
  padding: 2px 6px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ae-n em {
  min-width: 22px;
  color: #8e8e91;
  font-size: 11px;
  font-style: normal;
}
.ae-f.off {
  opacity: 0.45;
}
.ae-f.kf-host > .kf-dia {
  top: 4px;
}
.ae-vol .kf-bar {
  margin: 6px 0 0;
}
/* a switch with its hint under it */
.ae-sw {
  display: grid;
  gap: 4px;
}
.ae-sw .switch-row {
  min-height: 28px;
  font-size: 12px;
  color: #cfcfd2;
}
.ae-sw .ae-lab {
  color: #cfcfd2;
  font-size: 12px;
}
/* Fill channel */
.ae-seg {
  display: flex;
  gap: 4px;
}
.ae-seg button {
  flex: 1 1 0;
  padding: 7px 4px;
  font-size: 11.5px;
}
.ae-seg button[aria-checked='true'],
.ae-tile[aria-checked='true'] {
  border-color: #53fc18;
  background: #1b1b1d;
  color: #fff;
}
/* Voice changer */
.ae-vhead {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ae-vhead button {
  flex: 1 1 auto;
  padding: 7px 10px;
  font-size: 12px;
}
.ae-vhead .ae-favf[aria-pressed='true'] {
  border-color: #ffd400;
  color: #ffd400;
}
.ae-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
.ae-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 72px;
  padding: 10px 4px 8px;
  border: 1px solid #28282a;
  border-radius: 10px;
  background: #121214;
  cursor: pointer;
}
.ae-tile[hidden] {
  display: none;
}
.ae-tile i {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
}
.ae-tile span {
  font-size: 11px;
  color: #bfbfc2;
  text-align: center;
}
.ae-tile[aria-checked='true'] span {
  color: #f5f5f8;
}
.ae-tile:focus-visible,
.ae-seg button:focus-visible,
.ae-vhead button:focus-visible,
.audio-ed .ae-tabs button:focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 1px;
}
/* the Premium pill goes under the name (the tile is a column; a row's tiles stay the same height) */
.pro-free .ae-tile[data-pro]::after {
  margin: 0;
  padding: 0 5px;
  font-size: 8px;
}
.ae-tile .fav-star {
  position: absolute;
  top: 3px;
  left: 3px;
  opacity: 0;
}
.ae-tile:hover .fav-star,
.ae-tile:focus-within .fav-star,
.ae-tile .fav-star[aria-pressed='true'] {
  opacity: 1;
}
/* CLAUDE 10-10: the prepared-preview line under Reduce noise / Normalize loudness, and the clip Volume sheet
   (panels.js volumePanel): the value rides above the slider's thumb (--p) with a tick at 100 % */
.ae-clean {
  color: #9ba4b3;
  font-size: 11px;
  line-height: 1.5;
}
.ae-clean[hidden] {
  display: none;
}
.ae-clean .quiet {
  min-height: 0;
  padding: 0 4px;
  text-decoration: underline;
}
.cc-vol .range-field {
  position: relative;
  padding-top: 18px;
  margin-bottom: 12px;
}
.cc-vol .range-field output {
  position: absolute;
  top: 0;
  left: calc(8px + var(--p, 0.1) * (100% - 16px));
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #f1f1f4;
  pointer-events: none;
}
.cc-vol-num {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #b0b0b3;
  margin-bottom: 10px;
}
.cc-vol-num input {
  width: 84px;
}
.cc-vol-num {
  white-space: nowrap;
}
/* the phone's sheet is short: the presets are one row, so the slider, the number and the switches show without scrolling */
@media (max-width: 767px) {
  .cc-vol .cc-speed-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    margin-bottom: 4px;
  }
  .cc-vol .cc-speed-grid button {
    padding: 0;
    min-height: 44px;
    font-size: 12px;
  }
  .cc-vol .range-field {
    margin-bottom: 0;
  }
}
.cc-vol-sw {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}
.cc-vol-sw small {
  color: #9ba4b3;
  font-size: 11px;
}
@media (hover: none) {
  .ae-tile .fav-star {
    opacity: 0.55;
  }
  .ae-tile .fav-star[aria-pressed='true'] {
    opacity: 1;
  }
}
.ae-none {
  margin: 0;
  padding: 14px 0;
  text-align: center;
  color: #8e8e91;
  font-size: 12px;
}
/* Speed */
.ae-marks {
  display: flex;
  justify-content: space-between;
  margin: -6px 2px 0;
  color: #6f6f73;
  font-size: 10px;
}
.ae-dur {
  margin: 0;
  color: #cfcfd2;
  font-size: 12px;
}
.ae-dur strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ae-reset {
  justify-self: start;
  padding: 7px 14px;
  font-size: 12px;
}
.cc-voice-more {
  margin: 0 0 10px;
  padding: 7px 12px;
  font-size: 12px;
}
/* a placed sound effect shows it is the one being edited (a clip block has its own .tl-voice.selected) */
.tl-sfx.selected {
  border-color: #53fc18;
  box-shadow: 0 0 0 1px #53fc18;
}
/* the toolbar button of the video's own sound lights up while its editor is open */
#tlVideoSound[aria-pressed='true'] {
  background: #29292b;
  color: #fff;
}
/* phone and touch: 44 px targets, one column of room */
@media (hover: none), (pointer: coarse), (max-width: 760px) {
  .audio-ed .overlay-head button,
  .audio-ed .ae-tabs button,
  .ae-seg button,
  .ae-vhead button,
  .ae-reset,
  .cc-voice-more,
  .ae-n input {
    min-height: 44px;
  }
  .audio-ed .overlay-head button {
    min-width: 44px;
  }
  .ae-f input[type='range'] {
    min-height: 44px;
  }
  .ae-sw .switch-row,
  .cc-vol-sw .switch-row,
  .cc-vol-num input,
  .cc-vol input[type='range'] {
    min-height: 44px;
  }
  .ae-clean .quiet {
    min-height: 44px;
    min-width: 44px;
  }
  .ae-tile {
    min-height: 76px;
  }
  .ae-n input {
    width: 72px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ae-tile,
  .ae-seg button {
    transition:
      border-color 0.12s,
      background-color 0.12s;
  }
}