:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
}
@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0a0a0b;
  color: #f3f3f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.suite-bar {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -20px -20px 20px;
  padding: 18px 40px;
  border-bottom: 1px solid #242428;
  background: #0a0a0b;
}

.suite-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.suite-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.suite-logo-link:hover {
  text-decoration: none;
}

.suite-logo {
  width: 104px;
  height: auto;
  display: block;
}

.suite-divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.suite-tool {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f3f3f0;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

a.suite-tool:hover {
  opacity: 0.82;
  text-decoration: none; /* beat the global a:hover underline */
}

.suite-tool-icon {
  color: #1e9bff;
  flex-shrink: 0;
}

/* ⋯ account menu + About dialog (design_handoff_post_tools/"Audio
   Audition.html"): the full-screen dark tools have no footer, so the
   suite's utility links live in this top-right menu. */
.suite-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.suite-kebab {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #33333a;
  background: transparent;
  color: #a0a0a8;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.suite-kebab:hover {
  color: #f3f3f0;
}

.suite-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 244px;
  background: #17171a;
  border: 1px solid #33333a;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75);
  color: #f3f3f0;
  text-align: left;
  z-index: 80;
  display: none;
}

.suite-menu.open {
  display: block;
  animation: suite-menu-in 0.15s ease;
}

.suite-menu form {
  margin: 0;
}

.suite-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  color: #a0a0a8;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* `display: flex` above would otherwise defeat the hidden attribute, which is
   how the sign-in/sign-out pair is swapped once /api/viewer answers. */
.suite-menu-item[hidden] {
  display: none;
}

.suite-menu-item:hover,
.suite-menu-item:focus-visible {
  background: #26262b;
  color: #f3f3f0;
  text-decoration: none;
}

.suite-menu-item svg {
  display: none;
}

.suite-menu-identity {
  padding: 8px 11px 10px;
  color: #a0a0a8;
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suite-menu-identity strong {
  color: #f3f3f0;
  font-weight: 600;
}

.suite-menu-sep {
  height: 1px;
  background: #242428;
  margin: 6px 4px;
}

.suite-menu-support-sep {
  display: none;
}

@keyframes suite-menu-in {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.project-suite-bar {
  display: none;
}

body.viewer-authenticated .project-suite-bar {
  display: flex;
}

h1 {
  font-weight: normal;
}

/* Gate-state heading (access gate / expired / not found). Hidden by
   project.js once the player shell renders its own header. */
.gate-title {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 24px;
  font-weight: 600;
  margin: 8px 0 4px;
}

/* post.tools type system: Space Grotesk carries display headings; Inter stays
   on UI/body; JetBrains Mono on technical text (.mono). */
.dashboard-header h1,
.landing-container h1,
.modal-header h2 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
}

.mono {
  font-family: "JetBrains Mono", monospace;
}

a { color: #6cc0ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Video */
audio {
  width: 100%;
  max-width: 800px;
  margin: 10px 0;
  border-radius: 8px;
  background-color: #111113;
}

/* ---- Player shell (design_handoff_post_tools/"Audio Audition.html"):
   two columns — stage + transport left, track panel right. ---- */
.player-shell {
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: stretch;
  border: 1px solid #242428;
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a0b;
}

/* Player mode (mock model): once the player is showing, the page locks to
   the viewport — the stage column sizes to the window and the track list
   scrolls independently. Below 960px the columns stack and the page
   scrolls normally, so the lock only applies on desktop. */
@media (min-width: 961px) {
  body.player-mode {
    height: 100dvh;
    overflow: hidden;
  }

  body.player-mode .player-shell {
    flex: 1;
    min-height: 0;
    /* Row 1 (the two columns) absorbs the height; the spanning
       progress-bar row below it stays auto-sized. */
    grid-template-rows: minmax(0, 1fr);
  }

  body.player-mode .stagecol {
    min-height: 0;
    overflow-y: auto;
  }

  body.player-mode .tracks {
    min-height: 0;
  }

  body.player-mode .track-list {
    min-height: 0;
    overflow-y: auto;
  }
}

.stagecol {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #242428;
}

.pl-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #242428;
}

.pl-head-main {
  min-width: 0;
}

.pl-title {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-sub {
  font-size: 12px;
  color: #66666e;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-back {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #a0a0a8;
  padding: 6px 8px;
  border-radius: 7px;
  transition: color 0.15s ease;
}

.pl-back:hover {
  color: #f3f3f0;
  text-decoration: none;
}

.vstage {
  flex: 1;
  min-height: 0;
  background: radial-gradient(120% 100% at 50% 30%, #151517, #050506);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
}

.vframe-wrap {
  width: 100%;
  max-width: 680px;
  position: relative;
}

.vframe-wrap:not(.is-audio-only) {
  /* The stage has a fixed available height in desktop player mode. Give the
     frame that height too, so a portrait source can be limited by it rather
     than being sized solely from the stage's width. */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vframe-wrap video {
  width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 8px;
  background-color: #111113;
  box-shadow: 0 30px 80px -34px #000, 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ---- Track panel (right column) ---- */
.tracks {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tracks-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #242428;
}

.tracks-tab {
  font-size: 12px;
  font-weight: 600;
  color: #f3f3f0;
  padding: 6px 11px;
  border-radius: 7px;
  background: #17171a;
}

.tracks-count {
  color: #1e9bff;
  margin-left: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
}

.btn-add-tracks {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  font-size: 12px;
  border-radius: 7px;
  background: transparent;
  border: 1px solid #33333a;
  color: #f3f3f0;
  transition: border-color 0.15s ease;
}

.btn-add-tracks:hover,
.btn-add-tracks.active {
  background: transparent;
  border-color: #a0a0a8;
}

.track-list {
  flex: 1;
  padding: 8px 12px;
}

/* Track rows: play chip · name + mono library + mini waveform · stars/hide */
.track {
  display: grid;
  grid-template-columns: 10px 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  /* The row plays on click; only the grip drags. `grab` here was a promise the
     row could not keep — it also made clicking to play feel like the start of
     a drag. */
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

/* Six dots, the conventional "grab me" mark: two 5px columns by three 6px
   rows, drawn rather than typed so it does not depend on a glyph being in the
   font. Always visible so reordering is discoverable at rest, dim until the
   row is hovered so a list of them stays quiet. */
.track-grip {
  align-self: center;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.3px);
  background-position: center;
  background-repeat: repeat;
  background-size: 5px 6px;
  color: #52525c;
  cursor: grab;
  height: 18px;
  width: 10px;
  transition: color 0.12s ease;
}

.track:hover .track-grip {
  color: #8a8a96;
}

.track-grip:active {
  cursor: grabbing;
}

/* Touch devices get no grip: the drag that reorders is the drag that scrolls,
   and the reorder saves for everyone the moment it lands. The grip is not
   rendered there at all, so the row goes back to its original three columns —
   hiding it with `display: none` would leave a fourth column in the template
   and slide every cell into the wrong one. */
.track-list.no-reorder .track {
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.track:hover {
  background: #111113;
}

.track.active {
  background: rgba(30, 155, 255, 0.12);
  border-color: rgba(30, 155, 255, 0.35);
}

.tplay {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #33333a;
  background: #17171a center/cover no-repeat;
  display: grid;
  place-items: center;
  color: #f3f3f0;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.tplay.has-thumb {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
}

.track.active .tplay {
  background-color: #1e9bff;
  background-image: none !important;
  border-color: transparent;
  color: #fff;
  text-shadow: none;
}

.tinfo {
  min-width: 0;
}

.tinfo .track-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
}

.tinfo .track-artist {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: #66666e;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  margin-top: 6px;
  overflow: hidden;
}

.wave i {
  width: 2px;
  flex-shrink: 0;
  border-radius: 1px;
  background: #33333a;
}

.track.active .wave i {
  background: #1e9bff;
}

.track-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.below-playlist {
  display: flex;
  justify-content: flex-end;
  padding: 8px 20px 16px;
}

/* Stars */
.stars {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.star {
  cursor: pointer;
  font-size: 16px;
  color: #33333a;
}

.star.selected {
  color: #1e9bff;
}

/* Remove/hide button */
.remove-btn {
  color: #a0a0a8;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s;
  flex-shrink: 0;
}

.remove-btn:hover {
  color: #f55;
}

/* Dropzone */
.dropzone {
  border: 2px dashed #33333a;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  margin-top: 12px;
  width: 100%;
  max-width: 800px;
  color: #c6c6cc;
  background-color: #111113;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropzone.dragover {
  background-color: #17171a;
}

.upload-status {
  margin-top: 10px;
  font-size: 14px;
  color: #a0a0a8;
  font-style: italic;
  max-width: 800px;
  width: 100%;
}

/* Buttons — 8px radius, Inter 600 per the suite button spec */
.btn {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  background: #33333a;
  color: #f3f3f0;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover {
  background: #33333a;
}

.btn-primary {
  background: #1e9bff;
  color: white;
}

.btn-primary:hover {
  background: #1787e0;
}

.btn-primary:disabled {
  background: #116cb4;
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger {
  background: #5b1f2a;
  color: #ffd6dc;
}

.btn-danger:hover {
  background: #7f2635;
}

/* Form inputs */
.input {
  background: #111113;
  border: 1px solid #242428;
  border-radius: 4px;
  color: #f3f3f0;
  padding: 8px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

.input:focus {
  outline: none;
  border-color: #1e9bff;
}

.input-group {
  margin-bottom: 12px;
}

.input-group label {
  display: block;
  font-size: 12px;
  color: #a0a0a8;
  margin-bottom: 4px;
}

.slug-status {
  font-size: 12px;
  margin-top: 4px;
}

.slug-available { color: #3fbf6a; }
.slug-taken { color: #f87171; }

/* YouTube search */
.search-bar {
  display: flex;
  gap: 8px;
  max-width: 800px;
  width: 100%;
  margin: 0 0 8px;
}

.search-bar .input {
  flex-grow: 1;
}

.search-results {
  max-width: 800px;
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
  background: #111113;
  border-radius: 8px;
  margin-bottom: 16px;
}

.search-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #242428;
}

.search-results-title {
  font-size: 12px;
  color: #a0a0a8;
  text-transform: uppercase;
}

.search-results-close {
  background: none;
  border: none;
  color: #a0a0a8;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}

.search-results-close:hover {
  color: #f3f3f0;
  background: #242428;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid #242428;
  cursor: pointer;
  transition: background 0.15s;
}

.search-result:hover {
  background: #17171a;
}

.search-result-thumb {
  width: 64px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.search-result-info {
  flex-grow: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-meta {
  font-size: 12px;
  color: #a0a0a8;
}

.search-result-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.search-result-actions .btn {
  font-size: 12px;
  padding: 4px 10px;
}

/* Landing page */
.dashboard {
  max-width: 960px;
  width: 100%;
}

.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.dashboard-header h1 {
  font-size: 28px;
  margin: 0 0 8px;
}

.account-notice,
.retention-notice {
  width: 100%;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid rgba(139, 143, 255, 0.36);
  border-radius: 8px;
  background: rgba(79, 70, 229, 0.12);
  color: #c6c6cc;
  font-size: 13px;
  line-height: 1.5;
}

.account-notice strong,
.retention-notice strong {
  display: block;
  margin-bottom: 2px;
  color: #f3f3f0;
}

.account-notice a {
  font-weight: 600;
}

.account-notice.warning,
.retention-notice.warning {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
}

.retention-notice {
  max-width: 800px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.retention-unavailable {
  max-width: 560px;
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.1);
}

.project-url-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) auto minmax(0, 1.3fr);
  align-items: center;
  gap: 8px;
}

.project-url-fields > span {
  color: #66666e;
}

.url-help {
  margin-top: 6px;
  color: #82828a;
  font-size: 12px;
  line-height: 1.4;
}

.dashboard-section {
  width: 100%;
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-label {
  margin-top: 0;
}

.project-list-dashboard {
  width: 100%;
  background: #111113;
  border-radius: 8px;
  overflow: hidden;
}

.project-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #242428;
}

.project-row:last-child {
  border-bottom: none;
}

.project-row-title {
  font-size: 15px;
  font-weight: 600;
  color: #f3f3f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-row-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: #a0a0a8;
  font-size: 12px;
  margin-top: 5px;
}

.project-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.empty-projects {
  color: #a0a0a8;
  background: #111113;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

.landing-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.landing-container h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.landing-subtitle {
  color: #a0a0a8;
  margin-bottom: 32px;
  font-size: 15px;
}

.video-dropzone {
  border: 2px dashed #33333a;
  border-radius: 8px;
  padding: 48px 20px;
  text-align: center;
  color: #c6c6cc;
  background-color: #111113;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 24px;
}

.video-dropzone.dragover {
  background-color: #17171a;
}

.video-dropzone-icon {
  font-size: 40px;
  margin-bottom: 12px;
  color: #66666e;
}

.project-form {
  text-align: left;
  margin-bottom: 24px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 48px 20px;
  background: rgba(0, 0, 0, 0.6);
}

.modal {
  max-width: 640px;
  width: 100%;
  background: #111113;
  border: 1px solid #242428;
  border-radius: 8px;
  padding: 20px;
}

.modal-small {
  max-width: 460px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  color: #a0a0a8;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}

.modal-close:hover {
  color: #f3f3f0;
  background: #242428;
}

.auth-modal-copy {
  color: #c6c6cc;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
}

.auth-modal-actions {
  display: flex;
  gap: 8px;
}

.auth-modal-actions .btn {
  flex: 1;
  min-height: 38px;
}

.auth-modal-secondary {
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  border: none;
  background: transparent;
  color: #a0a0a8;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

.auth-modal-secondary:hover {
  color: #f3f3f0;
}

.danger-zone {
  border-top: 1px solid #242428;
  margin-top: 20px;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.danger-title {
  color: #ffd6dc;
  font-size: 13px;
  font-weight: 600;
}

.danger-copy {
  color: #a0a0a8;
  font-size: 12px;
  margin-top: 3px;
}

@media (max-width: 720px) {
  .dashboard-header {
    flex-direction: column;
    align-items: stretch;
  }

  .project-row {
    grid-template-columns: 1fr;
  }

  .project-row-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .retention-notice {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Layout for .project-content comes from .player-shell (two-column grid) */

.access-gate {
  max-width: 360px;
  width: 100%;
  background: #111113;
  border-radius: 8px;
  padding: 18px;
  margin-top: 16px;
}

.access-gate .btn {
  width: 100%;
}

.form-status {
  font-size: 12px;
  color: #a0a0a8;
  min-height: 16px;
  margin-top: 8px;
}

.progress-bar-container {
  max-width: 600px;
  width: 100%;
  margin-top: 16px;
}

/* Inside the player shell the progress bar spans both columns */
.player-shell .progress-bar-container {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
  padding: 12px 24px 16px;
  border-top: 1px solid #242428;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #242428;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: #1e9bff;
  width: 0%;
  transition: width 0.3s;
}

.progress-bar-container.progress-indeterminate .progress-bar-fill {
  width: 42%;
  animation: progress-indeterminate 1.35s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-120%);
  }
  50% {
    transform: translateX(90%);
  }
  100% {
    transform: translateX(240%);
  }
}

.progress-text {
  font-size: 13px;
  color: #a0a0a8;
  margin-top: 6px;
}

/* Section labels */
.section-label {
  max-width: 800px;
  width: 100%;
  font-size: 12px;
  color: #66666e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 6px;
}

/* Video toolbar — a slim utility strip under the player header */
.project-tools {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #242428;
  border-bottom: 1px solid #242428;
}

.video-version-menu {
  min-width: 0;
  position: relative;
}

.video-version-trigger {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 0;
  background: #111113;
  color: #f3f3f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.video-version-trigger:hover,
.video-version-trigger[aria-expanded="true"] {
  background: #17171a;
}

.video-version-chevron {
  color: #a0a0a8;
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}

.video-version-trigger[aria-expanded="true"] .video-version-chevron {
  transform: rotate(180deg);
}

.video-version-options {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 20;
  width: min(288px, calc(100vw - 32px));
  padding: 5px;
  border: 1px solid #303036;
  background: #17171a;
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.35);
}

.video-version-menu-item {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #d8d8d4;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
}

.video-version-menu-item:hover,
.video-version-menu-item:focus-visible {
  outline: none;
  background: #242428;
  color: #f3f3f0;
}

.video-version-menu-item.is-selected::after {
  content: "✓";
  color: #1e9bff;
  margin-left: auto;
}

.video-version-menu-separator {
  height: 1px;
  margin: 5px 4px;
  background: #303036;
}

.visually-hidden-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.tool-toggle {
  background: #111113;
  border: none;
  border-radius: 0;
  color: #a0a0a8;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  min-width: 0;
  padding: 0 14px;
  height: 40px;
  transition: background 0.2s, color 0.2s;
}

.project-tools .tool-toggle:nth-child(2) {
  text-align: center;
}

.project-tools .tool-toggle:nth-child(3) {
  text-align: right;
}

.tool-toggle:hover,
.tool-toggle.active {
  background: #17171a;
  color: #f3f3f0;
}

.video-processing-status {
  display: none;
  font-size: 12px;
  color: #a0a0a8;
}

/* Mixer */
.mixer {
  width: 100%;
  background: #111113;
  border-bottom: 1px solid #242428;
  padding: 10px 24px;
  display: flex;
  gap: 24px;
}

.mixer-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.mixer-label {
  font-size: 12px;
  color: #a0a0a8;
  min-width: 40px;
}

.mixer-slider {
  flex-grow: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #242428;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.mixer-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3f3f0;
  cursor: pointer;
}

.mixer-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3f3f0;
  border: none;
  cursor: pointer;
}

.mixer-mute {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}

.mixer-mute.muted {
  opacity: 0.4;
}

/* Sync controls */
.sync-toggle {
  max-width: 800px;
  width: 100%;
  background: none;
  border: none;
  color: #a0a0a8;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  margin: 4px 0 6px;
  padding: 0;
}

.add-tracks-panel {
  width: 100%;
  background: #111113;
  border-bottom: 1px solid #242428;
  padding: 12px 16px;
}

.add-tracks-panel .dropzone {
  max-width: none;
}

.add-tracks-panel .upload-status {
  max-width: none;
}

.sync-toggle:hover {
  color: #f3f3f0;
}

.sync-panel {
  width: 100%;
  background: #111113;
  border-bottom: 1px solid #242428;
  padding: 10px 24px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.sync-input-group {
  width: 150px;
  flex-shrink: 0;
}

.sync-input-group label {
  display: block;
  font-size: 12px;
  color: #a0a0a8;
  margin-bottom: 4px;
}

.sync-input {
  font-variant-numeric: tabular-nums;
}

.sync-status {
  margin-top: 0;
  min-width: 90px;
}

/* Transport ("Now auditioning") — bottom of the stage column */
.transport {
  width: 100%;
  background: #111113;
  border-top: 1px solid #242428;
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nowline {
  display: flex;
  gap: 12px;
  align-items: baseline;
  min-width: 0;
}

.nowline-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1e9bff;
  flex-shrink: 0;
}

.np-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-artist {
  font-size: 13px;
  color: #66666e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tbtn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #33333a;
  background: transparent;
  display: grid;
  place-items: center;
  color: #f3f3f0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: border-color 0.15s ease;
}

.tbtn:hover {
  border-color: #a0a0a8;
}

.tbtn-play {
  width: 42px;
  height: 42px;
  background: #1e9bff;
  border-color: transparent;
  color: #fff;
  font-size: 14px;
}

.tbtn-play:hover {
  background: #1787e0;
  border-color: transparent;
}

.np-stop {
  font-size: 18px;
  color: #a0a0a8;
}

.np-stop:hover {
  color: #f55;
}

.np-start-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

.np-link {
  background: none;
  border: none;
  color: #a0a0a8;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  padding: 0;
}

.np-link:hover {
  color: #f3f3f0;
  text-decoration: underline;
}

.np-reset-start {
  color: #82828a;
}

.np-trim-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.np-trim-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #a0a0a8;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.np-waveform {
  position: relative;
  height: 54px;
  border-radius: 6px;
  background: #111113;
  overflow: hidden;
}

.np-waveform-bars {
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  opacity: 0.72;
}

.np-waveform-bars span {
  width: 3px;
  min-width: 2px;
  border-radius: 999px;
  background: #82828a;
}

.np-trim-selection {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border: 2px solid #1e9bff;
  border-radius: 5px;
  background: rgba(30, 155, 255, 0.18);
  pointer-events: none;
}

.np-trim-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
}

.np-trim-range:active {
  cursor: grabbing;
}

.np-trim-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.np-trim-status {
  margin-right: auto;
  color: #a0a0a8;
  font-size: 12px;
}

.np-trim-cancel,
.np-trim-save {
  padding: 6px 12px;
  font-size: 12px;
}

.np-time {
  font-size: 12px;
  color: #a0a0a8;
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Blue-fill scrub: --sf is kept in sync with the playhead by playlist.js */
.np-scrub {
  flex-grow: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, #1e9bff var(--sf, 0%), #1e1e22 var(--sf, 0%));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.np-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3f3f0;
  cursor: pointer;
}

.np-scrub::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3f3f0;
  border: none;
  cursor: pointer;
}

/* Hidden YouTube player */
.yt-player-container {
  position: fixed;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 960px) {
  .player-shell {
    grid-template-columns: 1fr;
  }

  .stagecol {
    border-right: none;
    border-bottom: 1px solid #242428;
  }

  .vstage {
    padding: 18px;
  }
}

@media (max-width: 560px) {
  body {
    padding: 16px;
  }

  .suite-bar {
    margin: -16px -16px 18px;
    padding: 14px 16px;
  }

  .suite-brand {
    gap: 10px;
  }

  .suite-logo {
    width: 92px;
  }

  .suite-tool {
    font-size: 13px;
  }
}

/* ---- Suite account menu trigger + bug reporter ----
   The avatar circle replaces the ⋯ kebab so the trigger matches the other
   four tools; .suite-menu itself is unchanged. Values mirror
   packages/ui/src/account-menu.css — Audition can't consume that package
   (plain JS on Railway), so parity is maintained by hand. */

/* Signed-out only — toggled by suite-menu.js once /api/viewer answers.
   Deliberately quieter than a primary button: this is a way back to work the
   visitor already has, not a pitch. */
.suite-login {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #33333a;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #f3f3f0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease;
}

.suite-login:hover {
  border-color: #a0a0a8;
  background: rgba(255, 255, 255, 0.1);
}

.suite-login[hidden] {
  display: none;
}

.suite-avatar {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(127, 127, 127, 0.32);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(127, 127, 127, 0.12);
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 150ms ease;
}

.suite-avatar:hover {
  border-color: rgba(127, 127, 127, 0.55);
}

.suite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}

.bug-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
}

.bug-overlay.open {
  display: flex;
}

.bug-dialog {
  width: 520px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px 20px;
  border: 1px solid #33333a;
  border-radius: 16px;
  background: #111113;
  color: #f3f3f0;
  text-align: left;
}

.bug-title {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 21px;
  font-weight: 600;
}

.bug-lede {
  margin: 8px 0 0;
  color: #a0a0a8;
  font-size: 14px;
  line-height: 1.55;
}

.bug-textarea {
  width: 100%;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid #33333a;
  border-radius: 10px;
  background: #0a0a0b;
  color: #f3f3f0;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.bug-textarea:focus {
  border-color: #66666e;
}

.bug-dropzone {
  display: grid;
  place-items: center;
  min-height: 96px;
  margin-top: 12px;
  padding: 14px;
  border: 1px dashed #3d3d45;
  border-radius: 10px;
  color: #a0a0a8;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.bug-dropzone:hover,
.bug-dropzone.is-dragging {
  border-color: #66666e;
  background: rgba(255, 255, 255, 0.03);
}

.bug-dropzone small {
  display: block;
  margin-top: 6px;
  color: #66666e;
  font-size: 11.5px;
}

.bug-preview {
  max-width: 100%;
  max-height: 190px;
  margin-bottom: 10px;
  border: 1px solid #242428;
  border-radius: 8px;
}

.bug-fineprint {
  margin: 12px 0 0;
  color: #66666e;
  font-size: 11.5px;
  line-height: 1.5;
}

.bug-status {
  margin: 10px 0 0;
  min-height: 18px;
  color: #a0a0a8;
  font-size: 13px;
}

.bug-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

/*
 * Audio-only version on the stage.
 *
 * A <video> element pointed at an audio file plays it perfectly well but paints
 * nothing, and its intrinsic size collapses to the 300x150 default. Give it a
 * deliberate height and a quiet label so it reads as "this take has no picture"
 * rather than as a broken player.
 */
.vframe-wrap.is-audio-only {
  background: #101014;
  border-radius: 10px;
  min-height: 132px;
}

.vframe-wrap.is-audio-only video {
  height: 132px;
}

.vframe-wrap.is-audio-only::after {
  color: #6c6f78;
  content: "Audio only — no picture in this version";
  font-size: 12px;
  left: 0;
  letter-spacing: 0.01em;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 18px;
}

/*
 * Signed-out front door.
 *
 * body.is-public hides the dashboard chrome — a project list and a "Create New
 * Project" button mean nothing to someone without an account — and shows the
 * hero instead. The modal itself is identical in both states; only the upload
 * is withheld. See enterPublicMode() in js/landing.js.
 */
body.is-public .dashboard-header,
body.is-public .dashboard-section,
body.is-public .account-notice {
  display: none !important;
}

.public-hero {
  padding: 48px 0 8px;
  text-align: center;
}

.public-hero h1 {
  margin: 0;
}

.public-hero .landing-subtitle {
  margin: 8px 0 22px;
}

/*
 * The explainer on the drop-zone step.
 *
 * A collapsed <details> rather than standing copy: someone who already knows
 * what this is should see a drop zone, not a pitch. One click away is enough
 * for everyone else.
 */
.what-is {
  border: 1px solid var(--line, #2a2a31);
  border-radius: 10px;
  margin-top: 14px;
}

.what-is summary {
  cursor: pointer;
  font-size: 13px;
  list-style: none;
  padding: 10px 14px;
  color: #a9acb6;
}

.what-is summary::-webkit-details-marker {
  display: none;
}

.what-is summary::after {
  content: "+";
  float: right;
  color: #6c6f78;
}

.what-is[open] summary::after {
  content: "\2013";
}

.what-is summary:hover {
  color: #e6e7ea;
}

.what-is-body {
  border-top: 1px solid var(--line, #2a2a31);
  padding: 12px 14px 14px;
}

.what-is-body p {
  color: #a9acb6;
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 8px;
}

.what-is-body p:last-child {
  margin-bottom: 0;
}

/* Sign-in prompt inside the create modal. Hidden for signed-in users, who are
   already where this would send them. */
.modal-signin {
  display: none;
  margin: 14px 0 0;
  font-size: 13px;
  color: #a0a0a8;
  text-align: center;
}

body.is-public .modal-signin {
  display: block;
}

.modal-signin a {
  color: #f3f3f0;
  font-weight: 600;
  text-decoration: underline;
}