/* 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: var(--c-surface);
  font-size: var(--t-title);
  font-weight: 600;
}
.audio-ed .overlay-head button {
  min-width: 32px;
  min-height: 32px;
}
/* CLAUDE 10-12 Graphite (the inspector pattern, owner 10-11): the pages are text tabs with an underline */
.audio-ed .ae-tabs {
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}
.audio-ed .ae-tabs button {
  flex: 0 0 auto;
  min-height: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-fg-3);
  font-size: var(--t-label);
  font-weight: 500;
}
.audio-ed .ae-tabs button[aria-selected='true'] {
  border-color: transparent;
  background: transparent;
  color: var(--c-fg);
}
.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 */
/* CLAUDE 10-12 Graphite: a segmented choice is text with an underline under the chosen one */
.ae-seg {
  display: flex;
  gap: var(--s-4);
}
.ae-seg button {
  flex: 0 0 auto;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-fg-3);
  font-size: var(--t-label);
  font-weight: 500;
}
.ae-seg button[aria-checked='true'] {
  border-color: transparent;
  background: transparent;
  color: var(--c-fg);
}
.ae-tile[aria-checked='true'] {
  border-color: transparent;
  background: var(--c-overlay);
  box-shadow: 0 0 0 1.5px var(--c-fg);
  color: var(--c-fg);
}
/* Voice changer */
.ae-vhead {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ae-vhead button {
  flex: 0 0 auto;
  padding: 6px 8px;
  font-size: var(--t-label);
  color: var(--c-fg-2);
}
.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: 0;
  border-radius: var(--r-sm);
  background: var(--c-raised); /* a voice tile is its own picture (the icon on a quiet fill), no outline */
  cursor: pointer;
  transition: background-color var(--d-hover) ease;
}
.ae-tile:hover {
  background: var(--c-overlay);
}
.ae-tile[hidden],
.ae-f[hidden] {
  display: none;
}
.ae-tile i {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
}
.ae-tile span {
  font-size: var(--t-meta);
  color: var(--c-fg-2);
  text-align: center;
}
.ae-tile[aria-checked='true'] span {
  color: var(--c-fg);
}
.ae-tile:focus-visible,
.ae-seg button:focus-visible,
.ae-vhead button:focus-visible,
.audio-ed .ae-tabs button:focus-visible {
  outline: 2px solid var(--c-focus);
  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;
}
/* 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;
}
/* Speed */
.ae-marks {
  display: flex;
  justify-content: space-between;
  margin: -6px 2px 0;
  color: #6f6f73;
  font-size: var(--t-meta);
}
.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;
}
/* Audio > Voice (left, panels.js voiceTiles): the search, group tabs and Starred filter are the Effects library's
   (fxlib.css); the tiles are the .ae-tile above */
.cc-voicelib {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.cc-voicelib > .hint {
  margin: 0;
  color: var(--c-fg-3);
  font-size: var(--t-label);
}
.cc-voicelib .cc-fx-tab {
  scroll-margin-inline: 14px;
}
/* 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: var(--c-fg);
  box-shadow: 0 0 0 1px var(--c-fg);
}
/* 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,
  .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 {
    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;
  }
}