/* Studio > Content — BEM-prefixed to avoid collisions with other features. */

.studio-content {
  font-family: var(--font-body);
  color: var(--text);
  padding: 0 0 40px;
}

/* The head is .ch-page-header. Unlike .wire-head it carries no top padding of
   its own — Catalog Health's clearance lives on #panel-catalog (22px), as does
   the --border-med divider colour its rule reads. Both are scoped to that id,
   so this surface re-declares them or the head sits at a different height over
   a lighter rule than the page it's meant to match. The panel's inline
   padding-top:32px would override the 22px, so it's beaten with !important. */
#studioContent { padding-top: 22px !important; --divider: var(--border-med); }

.studio-content__picker-host {
  flex-shrink: 0;
}

/* Manager folder view: the whole head goes. The folder tool row already names
   the page and the folder bar already names the artist — and inside a folder
   the pill is a read-out of that same folder, not a control (artist-picker.js
   goes static there). Demo Vault keeps its head only because it carries the
   + New Playlist / Upload buttons; this surface has nothing to keep.
   The sub-tabs become the panel's first row, exactly like the vault's. */
.mgr-folders #studioContent .ch-page-header { display: none; }

/* ---- Library view container ---- */

.studio-content__body {
  min-height: 240px;
}

/* ---- Loading skeleton ---- */

.studio-content__skel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 540px;
}
.studio-content__skel-row {
  height: 18px;
  border-radius: 4px;
  background: var(--green-dim);
  animation: studio-content-pulse 1.4s ease-in-out infinite;
}
.studio-content__skel-row:nth-child(1) { width: 70%; height: 26px; }
.studio-content__skel-row:nth-child(2) { width: 40%; }
.studio-content__skel-row:nth-child(3) { width: 55%; }
.studio-content__skel-thumb {
  width: 220px;
  height: 220px;
  border-radius: 8px;
  background: var(--green-dim);
  animation: studio-content-pulse 1.4s ease-in-out infinite;
}
@keyframes studio-content-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---- Setup checklist (Library -> Render -> Schedule progression) ---- */

.studio-content__setup {
  max-width: 620px;
}
.studio-content__setup-head {
  margin-bottom: 24px;
}
.studio-content__setup-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 8px;
}
.studio-content__setup-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.studio-content__setup-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  margin: 0;
}

.studio-content__setup-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
}

.studio-content__setup-step {
  display: flex;
  gap: 18px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}

.studio-content__setup-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-med);
  color: var(--text);
  background: transparent;
  margin-top: 1px;
}

.studio-content__setup-step--active .studio-content__setup-num {
  background: var(--green);
  border-color: var(--green);
  color: var(--surface);
}

.studio-content__setup-step--disabled .studio-content__setup-num {
  color: var(--text-3);
  border-color: var(--border-med);
}

.studio-content__setup-body {
  flex: 1;
  min-width: 0;
}

.studio-content__setup-step-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 4px;
}

.studio-content__setup-step--disabled .studio-content__setup-step-label {
  color: var(--text-3);
}

.studio-content__setup-step-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0 0 12px;
}

.studio-content__setup-step--disabled .studio-content__setup-step-text {
  color: var(--text-3);
}

/* The house button is a ghost pill, not a filled slab — same recipe as
   .cal-add-btn, .auth-btn and .at-show-more: 999px, green ink on nothing,
   green wash on hover. Primary vs secondary is carried by green ink vs
   neutral, which is how the rest of the site tells them apart. */
.studio-content__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  color: var(--green);
  border: 1px solid rgba(45,106,79,0.25);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  margin-top: 4px;
  white-space: nowrap;
  transition: all 150ms var(--ease);
}
.studio-content__cta:hover { background: var(--green-dim); border-color: rgba(45,106,79,0.4); }
.studio-content__cta:focus { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---- Error state ---- */

.studio-content__error {
  border-left: 3px solid var(--coral);
  background: rgba(155,68,68,0.05);
  padding: 14px 18px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-2);
  max-width: 560px;
}
.studio-content__error-title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* ---- Connected aesthetic card ---- */

.studio-content__aesthetic {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.studio-content__thumb-wall {
  display: grid;
  grid-template-columns: repeat(4, 86px);
  gap: 6px;
  flex-shrink: 0;
}
.studio-content__thumb-tile {
  width: 86px;
  aspect-ratio: 9 / 16;
  border-radius: 6px;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}
.studio-content__meta {
  padding-top: 4px;
}
.studio-content__name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.studio-content__counts {
  display: flex;
  gap: 24px;
  margin-top: 16px;
}
.studio-content__count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.studio-content__count-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}
.studio-content__count-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
}

/* ---- Setup modal ---- */

.studio-content__modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 20, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 24px;
  animation: studio-content-fade-in 120ms ease-out;
}
@keyframes studio-content-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.studio-content__modal-panel {
  background: var(--surface);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25), 0 8px 20px var(--border-med);
  overflow: hidden;
}

.studio-content__modal-panel--wide {
  max-width: 880px;
  max-height: 85vh;
}

.studio-content__modal-header {
  position: relative;
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--border);
}
.studio-content__modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  font-family: var(--font-body);
}
.studio-content__modal-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin: 0;
}
.studio-content__modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.studio-content__modal-close:hover { color: var(--text); background: rgba(0,0,0,0.04); }
.studio-content__modal-close:focus { outline: 2px solid var(--green); outline-offset: 2px; }

.studio-content__modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px;
  font-family: var(--font-body);
}

.studio-content__modal-empty {
  font-size: 13px;
  color: var(--text-2);
  padding: 32px 8px;
  text-align: center;
  line-height: 1.6;
}

.studio-content__modal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.studio-content__modal-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border-med);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: border-color 100ms ease, background 100ms ease;
}
.studio-content__modal-row:hover { border-color: rgba(45,106,79,0.35); }
.studio-content__modal-row:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.studio-content__modal-row--active {
  border-color: var(--green);
  background: rgba(45,106,79,0.06);
}

.studio-content__modal-row--create {
  border-style: dashed;
  border-color: rgba(45,106,79,0.35);
}
.studio-content__modal-row--create:hover {
  border-color: var(--green);
  background: rgba(45,106,79,0.04);
}
.studio-content__modal-row--create .studio-content__modal-row-title {
  color: var(--green);
}

.studio-content__modal-row-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  background: var(--surface-2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

.studio-content__modal-row-text { flex: 1; min-width: 0; }
.studio-content__modal-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.studio-content__modal-row-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 2px;
}
.studio-content__modal-row-linked {
  font-size: 11px;
  color: var(--amber);
  font-style: italic;
}

.studio-content__modal-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1.5px solid var(--border-med);
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.studio-content__modal-row--active .studio-content__modal-checkbox {
  border-color: var(--green);
  background: rgba(45,106,79,0.10);
}

.studio-content__modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  gap: 12px;
}
.studio-content__modal-footer-left,
.studio-content__modal-footer-right {
  display: flex;
  gap: 10px;
}

.studio-content__footer-hint {
  font-size: 11.5px;
  color: var(--text-3);
  font-style: italic;
  align-self: center;
  margin-right: 10px;
}

.studio-content__cta-secondary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-med);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms var(--ease);
}
.studio-content__cta-secondary:hover { border-color: var(--text-3); color: var(--text); }
.studio-content__cta-secondary:focus { outline: 2px solid var(--green); outline-offset: 2px; }
.studio-content__cta-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.studio-content__cta:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Create-flow modal extras ---- */

.studio-content__create-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.studio-content__create-summary {
  font-size: 13px;
  color: var(--text);
  padding: 10px 14px;
  background: rgba(45,106,79,0.06);
  border-left: 2px solid var(--green);
  border-radius: 0 4px 4px 0;
}

.studio-content__create-duration {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.studio-content__create-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: -8px;
}

.studio-content__create-label-mini {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
  display: block;
}

.studio-content__create-select,
.studio-content__create-input {
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border-med);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  width: 100%;
}
.studio-content__create-select:focus,
.studio-content__create-input:focus {
  outline: 2px solid var(--green);
  outline-offset: 1px;
  border-color: var(--green);
}

.studio-content__create-input[type="number"] {
  font-family: var(--font-mono);
}

.studio-content__create-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.studio-content__create-time-wrap {
  display: flex;
  flex-direction: column;
}

.studio-content__create-note {
  font-size: 11.5px;
  color: var(--coral);
  font-style: italic;
}

.studio-content__create-confirm-summary {
  font-size: 13px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
}
.studio-content__create-confirm-line {
  line-height: 1.4;
}

.studio-content__sched-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.02);
  border-radius: 6px;
}
.studio-content__sched-mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.studio-content__sched-mode-option input[type="radio"] {
  accent-color: var(--green);
  cursor: pointer;
}

/* ---- Manage-aesthetic modal ---- */

.studio-content__manage-tabs {
  padding: 12px 28px 0;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.studio-content__manage-body {
  padding: 18px 28px 24px;
}

.studio-content__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 16px;
  margin-bottom: 12px;
  border: 2px dashed rgba(45,106,79,0.35);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  text-align: center;
}
.studio-content__dropzone:hover,
.studio-content__dropzone.is-over {
  border-color: var(--green);
  background: var(--green-dim);
}
.studio-content__dropzone.is-busy { pointer-events: none; opacity: 0.75; }
.studio-content__dropzone-hint { font-size: 11.5px; color: var(--text-3); }
.studio-content__dropzone-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
  margin-top: 6px;
}

.studio-content__hook-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.studio-content__hook-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 6px 5px 12px;
}
.studio-content__hook-x {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 999px;
}
.studio-content__hook-x:hover { color: var(--coral); background: rgba(155,68,68,0.08); }

.studio-content__preset-badge {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 8px;
  vertical-align: 2px;
}

.studio-content__sections-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0 4px;
}
.studio-content__sections-editor .studio-content__manage-add-row {
  grid-template-columns: 2fr 1fr 1fr auto;
}

.studio-content__manage-add {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(45,106,79,0.04);
  border: 1px solid rgba(45,106,79,0.18);
  border-radius: 8px;
  margin-bottom: 20px;
}

.studio-content__manage-add-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr auto;
  gap: 8px;
  align-items: center;
}

.studio-content__manage-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 16px;
}

.studio-content__manage-video-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.studio-content__manage-video-thumb {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--surface-2);
  object-fit: cover;
  display: block;
}

.studio-content__manage-video-meta {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.studio-content__manage-video-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.studio-content__manage-video-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

.studio-content__manage-video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.studio-content__manage-video-tag {
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--green-dim);
  color: var(--green);
}

.studio-content__aesthetic-ctas {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ---- Sub-tabs ---- */

.studio-content__sub-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  /* Holds the row at its tallest state. The action pills are taller than the
     tab buttons, so without this the row shrank 6px the moment you left
     Videos and everything below it jumped. */
  min-height: 38px;
  margin-bottom: 22px;
}

/* The tabs are pills here, not underlines — the .rh-seg-btn recipe from the
   revenue hero, verbatim. SCOPED to this row on purpose: .artist-subtab is
   shared with the wire, briefing, shell and manage tab bars, and restyling
   the bare class would convert every tab strip in the app. */
.studio-content__sub-tabs .artist-subtab,
.studio-content__manage-tabs .artist-subtab {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  background: transparent;
  padding: 8px 18px;
  border: 1px solid rgba(45,106,79,0.25);
  border-radius: 999px;
  transition: all 150ms var(--ease);
}
.studio-content__sub-tabs .artist-subtab:hover,
.studio-content__manage-tabs .artist-subtab:hover {
  color: var(--green);
  background: var(--green-dim);
  border-color: rgba(45,106,79,0.4);
}
.studio-content__sub-tabs .artist-subtab.active,
.studio-content__manage-tabs .artist-subtab.active {
  color: var(--green);
  background: var(--green-dim);
  border-color: rgba(45,106,79,0.35);
  font-weight: 700;
}

/* Pushed to the far end of the tab row. margin-left:auto rather than
   space-between so the tabs stay packed together when the slot is empty —
   every tab except Videos leaves it so.
   Appended after the tab buttons (init(), not buildSurface()) so DOM order
   matches visual order — an order:1 flip here put keyboard focus on the
   actions before the tabs while the eye read tabs first. */
.studio-content__tab-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.studio-content__tab-actions:empty { display: none; }

/* ---- Compact "no library / nothing here yet" empty state for sub-views ---- */

.studio-content__empty-mini {
  border-left: 2px solid rgba(45,106,79,0.4);
  padding: 16px 18px;
  background: rgba(45,106,79,0.04);
  border-radius: 0 6px 6px 0;
  max-width: 540px;
}

/* ---- Feed list (used by Schedule view + Posts list) ---- */

.studio-content__feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.studio-content__feed-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.studio-content__feed-row:last-child { border-bottom: none; }

.studio-content__feed-when {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
  letter-spacing: 0.02em;
  padding-top: 2px;
}

.studio-content__feed-main {
  min-width: 0;
}

.studio-content__feed-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 4px;
}

.studio-content__feed-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
}

.studio-content__feed-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.studio-content__feed-btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-med);
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: all 150ms var(--ease);
}
.studio-content__feed-btn:hover { border-color: var(--text-3); color: var(--text); }
.studio-content__feed-btn:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.studio-content__feed-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.studio-content__feed-btn--danger {
  color: var(--coral);
  border-color: rgba(155,68,68,0.32);
}
.studio-content__feed-btn--danger:hover {
  background: rgba(155,68,68,0.08); border-color: var(--coral); color: var(--coral);
}

.studio-content__feed-caption {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Metrics (Posts list) ---- */

.studio-content__metrics {
  display: flex;
  gap: 22px;
  margin-top: 4px;
}

.studio-content__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 56px;
}

.studio-content__metric-num {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  line-height: 1;
}

.studio-content__metric-label {
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-3);
}

/* ---- Bottom credit (tasteful single mention of Flowstage) ---- */

.studio-content__credit {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}


/* ---- Lyric Stage: track picker ---- */

/* The shared modal row is a two-column flex; the track row adds a state badge
   pinned right, so the text block takes the slack. */
.studio-content__track-row {
  align-items: center;
  justify-content: space-between;
}

/* The shared row meta is mono because it usually carries only data. A track's
   meta is a duration followed by a sentence, so the line goes back to the body
   font and the duration alone keeps the mono treatment (ARTERY.md rule 5). */
.studio-content__track-row .studio-content__modal-row-meta {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
}
.studio-content__track-dur {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ---- Lyric Stage: upload a song from inside the picker ---- */
/* Sits above the list and stays there when the list is empty, so the empty
   vault has an action in it rather than an instruction to go elsewhere. */
.studio-content__track-upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.studio-content__track-upload-input { display: none; }

.studio-content__track-upload-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-med);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
}
.studio-content__track-upload-btn:hover { background: rgba(0,0,0,0.04); }
.studio-content__track-upload-btn:focus { outline: 2px solid var(--green); outline-offset: 2px; }

.studio-content__track-upload-hint {
  font-size: 12px;
  color: var(--text-3);
}

/* Prose line; only the percentage inside it is data (ARTERY.md rule 5). */
.studio-content__track-upload-status {
  font-size: 12px;
  color: var(--text-2);
  width: 100%;
}
.studio-content__track-upload-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
}

.studio-content__track-upload-bar {
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.studio-content__track-upload-fill {
  height: 100%;
  background: var(--green);
  transition: width 0.2s var(--ease);
}

.studio-content__track-upload-error {
  width: 100%;
  font-size: 12px;
  line-height: 1.5;
  color: var(--coral);
}

/* Unusable and mid-transcription tracks are listed but not selectable. Muted
   rather than hidden — the reason is the point. */
.studio-content__track-row--inert {
  cursor: default;
  opacity: 0.6;
  background: var(--surface-2);
}
.studio-content__track-row--inert:hover { border-color: var(--border-med); }

.studio-content__track-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-med);
  color: var(--text-3);
  white-space: nowrap;
}
.studio-content__track-badge--ready {
  color: var(--emerald);
  border-color: rgba(74,122,94,0.4);
}
.studio-content__track-badge--transcribed {
  color: var(--green);
  border-color: rgba(45,106,79,0.4);
}
.studio-content__track-badge--transcribing {
  color: var(--amber);
  border-color: rgba(166,124,55,0.4);
}
.studio-content__track-badge--failed {
  color: var(--coral);
  border-color: rgba(155,68,68,0.4);
}

/* ---- Lyric Stage: transcribe step ---- */

.studio-content__stage-status {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 2px solid rgba(45,106,79,0.4);
  background: rgba(45,106,79,0.04);
  border-radius: 0 6px 6px 0;
}
.studio-content__stage-status-line {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.studio-content__stage-status-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* ---- Lyric Stage: Videos tab ---- */

/* Two CTAs since the montage moved in beside the lyric flow — the row needs a
   gap now that it holds more than one button. */
.studio-content__stage-head {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}

.studio-content__stage-note {
  margin-top: 20px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
  font-style: italic;
}

/* ---- Lyric Stage: narrow widths ---- */
/* Scoped to the Videos tab. content.css carries no breakpoints at all, so the
   Schedule and Posts feeds have the same 160px-date-column squeeze — that's a
   pre-existing gap on those surfaces and isn't quietly changed from here. */
@media (max-width: 900px) {
  /* The badge keeps its place; the name wraps instead of being crushed. */
  .studio-content__track-row {
    align-items: flex-start;
    gap: 10px;
  }
  .studio-content__track-row .studio-content__modal-row-text { min-width: 0; }

  /* The hint sits under a full-width button rather than being squeezed beside
     it — at this width the two together wrap mid-phrase. */
  .studio-content__track-upload-btn { width: 100%; }
  .studio-content__track-upload-hint { width: 100%; }
}

/* ---- Lyric Stage: review editor ---- */

.studio-content__lyrics { display: flex; flex-direction: column; min-height: 0; }

.studio-content__lyrics-audio {
  width: 100%;
  height: 34px;
  margin-bottom: 14px;
}
.studio-content__lyrics-noaudio {
  font-size: 12px;
  line-height: 1.5;
  color: var(--amber);
  padding: 10px 12px;
  border-left: 2px solid rgba(166,124,55,0.4);
  margin-bottom: 14px;
}

.studio-content__lyrics-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.studio-content__lyrics-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.studio-content__lyrics-ok {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
}
.studio-content__lyrics-jump {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
}
.studio-content__lyrics-jump--error {
  color: var(--coral);
  border-color: rgba(155,68,68,0.35);
}
.studio-content__lyrics-jump--error:hover { background: rgba(155,68,68,0.06); }
.studio-content__lyrics-jump--warn { color: var(--amber); }

/* The list scrolls inside the modal — a 300-line transcript must not push the
   footer (and the Save button) off the bottom of the panel. */
.studio-content__lyrics-list {
  overflow-y: auto;
  max-height: 46vh;
  padding-right: 4px;
}

.studio-content__lyric-row {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.studio-content__lyric-row:hover { background: rgba(45,106,79,0.03); }

/* The line under the playhead. A left rule rather than a fill, so a long
   transcript scrolling past doesn't strobe. */
.studio-content__lyric-row--playing {
  background: rgba(45,106,79,0.07);
  box-shadow: inset 2px 0 0 var(--green);
}
.studio-content__lyric-row--error { border-color: rgba(155,68,68,0.35); }
.studio-content__lyric-row--warning { border-color: rgba(166,124,55,0.30); }

.studio-content__lyric-times {
  display: flex;
  align-items: center;
  gap: 3px;
}
.studio-content__lyric-dash { color: var(--text-3); font-size: 11px; }
.studio-content__lyric-time {
  width: 58px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  padding: 3px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  text-align: center;
}
.studio-content__lyric-time:hover { border-color: var(--border-med); }
.studio-content__lyric-time:focus {
  outline: none;
  border-color: var(--green);
  background: var(--surface);
}

.studio-content__lyric-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text);
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  width: 100%;
  min-width: 0;
}
.studio-content__lyric-text:hover { border-color: var(--border-med); }
.studio-content__lyric-text:focus {
  outline: none;
  border-color: var(--green);
  background: var(--surface);
}

.studio-content__lyric-actions { display: flex; gap: 2px; }
.studio-content__lyric-act {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-3);
  border: 1px solid transparent;
}
.studio-content__lyric-act:hover { color: var(--green); background: var(--green-dim); }
.studio-content__lyric-act--danger:hover { color: var(--coral); background: rgba(155,68,68,0.07); }

/* Spans the full row width, under the fields it belongs to. */
.studio-content__lyric-problem {
  grid-column: 1 / -1;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--coral);
  padding: 2px 8px 4px;
}
.studio-content__lyric-row--warning .studio-content__lyric-problem { color: var(--amber); }

.studio-content__footer-hint--error { color: var(--coral); }

@media (max-width: 900px) {
  /* Times move above the text rather than shrinking into unusable fields. */
  .studio-content__lyric-row {
    grid-template-columns: 1fr auto;
  }
  .studio-content__lyric-times { grid-column: 1 / -1; }
  .studio-content__lyrics-list { max-height: 52vh; }
}

/* ---- Lyric Stage: section picker ---- */

.studio-content__section { display: flex; flex-direction: column; }

.studio-content__section-audio { width: 100%; height: 34px; margin-bottom: 14px; }

.studio-content__section-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.studio-content__section-time {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.studio-content__section-span { color: var(--text-3); }
.studio-content__section-len {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* The strip. position:relative anchors the selection, handles and playhead,
   all of which are positioned in percentages of the track's duration. */
.studio-content__wave {
  position: relative;
  height: 64px;
  border-radius: 6px;
  background: var(--surface-2);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;   /* the strip owns horizontal drags, not the scroller */
  user-select: none;
}
.studio-content__wave-bars { position: absolute; inset: 0; }
.studio-content__wave-svg { width: 100%; height: 100%; display: block; }

/* Out-of-range audio stays visible but recedes — the shape is context for the
   choice, so hiding it would make the selection harder rather than clearer. */
.studio-content__wave-bar { fill: var(--text-3); opacity: 0.35; }
.studio-content__wave-bar--in { fill: var(--green); opacity: 1; }

.studio-content__wave-sel {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(45,106,79,0.10);
  border-left: 1px solid var(--green);
  border-right: 1px solid var(--green);
  cursor: grab;
}
.studio-content__wave-sel:active { cursor: grabbing; }

/* Wider than they look: a 2px border is an unfair drag target, so the hit area
   is padded out while the visible mark stays thin. */
.studio-content__wave-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  cursor: ew-resize;
}
.studio-content__wave-handle--l { left: -7px; }
.studio-content__wave-handle--r { right: -7px; }
.studio-content__wave-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--green);
}

.studio-content__wave-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--text);
  opacity: 0.55;
  pointer-events: none;
}

.studio-content__section-note {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--amber);
}

.studio-content__section-lines { margin-top: 18px; }
.studio-content__section-lines-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.studio-content__section-empty {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-3);
  margin-top: 16px;
}

.studio-content__section-linelist {
  max-height: 30vh;
  overflow-y: auto;
  padding-right: 4px;
}
.studio-content__section-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  /* Lines outside the selection are readable but clearly not chosen — they're
     still the map you use to find the part you want. */
  opacity: 0.45;
}
.studio-content__section-line:hover { background: var(--green-dim); opacity: 0.8; }
.studio-content__section-line--in { opacity: 1; }
.studio-content__section-line--in:hover { opacity: 1; }
.studio-content__section-line-at {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  flex-shrink: 0;
  width: 42px;
}
.studio-content__section-line-text { font-size: 13px; color: var(--text); }

@media (max-width: 900px) {
  .studio-content__wave { height: 76px; }        /* a bigger target for thumbs */
  .studio-content__wave-handle { width: 22px; }
  .studio-content__wave-handle--l { left: -11px; }
  .studio-content__wave-handle--r { right: -11px; }
  .studio-content__section-linelist { max-height: 34vh; }
}

/* ---- Lyric Stage: draft, render, preview ---- */

.studio-content__draft-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  flex-wrap: wrap;
}
/* On a feed row the actions sit under the title, quieter than in the modal. */
.studio-content__draft-actions--row { margin-top: 10px; gap: 6px; }

.studio-content__draft-render { margin-top: 16px; }
.studio-content__draft-render-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.studio-content__draft-render-label--error { color: var(--coral); }

.studio-content__draft-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
  max-width: 320px;
}
.studio-content__draft-bar-fill {
  height: 100%;
  background: var(--green);
  transition: width 300ms var(--ease);
}

.studio-content__draft-preview { margin-top: 18px; }
.studio-content__draft-preview-loading {
  font-size: 12px;
  color: var(--text-3);
  padding: 10px 0;
}
/* 9:16 — the shape everything Flowstage renders comes back in. */
.studio-content__draft-frame {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--border-med);
  border-radius: 8px;
  background: var(--surface-2);
  display: block;
}

/* ---- Lyric Stage: drafts list thumbnail ---- */

/* Stage rows lead with the still instead of a date column. The shared feed grid
   is `160px 1fr`, which suits Schedule and Posts; a list of videos wants the
   picture first and the date demoted into the meta line. */
.studio-content__stage .studio-content__feed-row {
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: start;
}

/* 9:16 — the shape everything Flowstage renders comes back in. */
.studio-content__draft-thumb {
  display: block;
  width: 104px;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-med);
  background: var(--surface-2);
}
.studio-content__draft-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
a.studio-content__draft-thumb:hover { border-color: var(--green); }

/* Unrendered drafts say so rather than showing a broken frame. */
.studio-content__draft-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Narrow widths for the drafts list. This has to come after the base grid rule
   above: a media query adds no specificity, so at equal weight source order is
   what decides, and declaring it earlier left the override inert. */
@media (max-width: 900px) {
  /* The still keeps its column rather than stacking — a 104px image between
     every row's text and the next reads worse than a slightly smaller one. */
  .studio-content__stage .studio-content__feed-row {
    grid-template-columns: 84px 1fr;
    gap: 12px;
  }
  .studio-content__draft-thumb { width: 84px; }
}