/*
  Studio v2, milestone 4: the review of changes since the live version, shown with the publish card.
  Blue means "needs you", green means "passed". Never red against green, and every state
  has its words on screen.
*/

.studio-v2 .v2-review {
  display: grid;
  gap: 8px;
  border-inline-start: 3px solid var(--accent-blue);
}

.studio-v2 .v2-review .section-label {
  margin: 0;
}

/* As in ElevenLabs and Mistral: what is live, and what this makes live. */
.v2r-versions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.v2r-chip {
  display: inline-grid;
  padding: 3px 10px;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.v2r-chip-new {
  color: var(--v2-attn-ink);
  background: var(--v2-attn-bg);
  border-color: var(--v2-attn-line);
}

.v2r-chip-label {
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
}

.v2r-chip-new .v2r-chip-label {
  color: inherit;
}

.v2r-arrow {
  color: var(--text-muted);
}

.v2r-heading {
  margin: 6px 0 0;
  font-size: 13px;
}

.v2r-version-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2r-version {
  padding: 8px 10px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.v2r-version-head {
  margin: 0;
  overflow-wrap: anywhere;
}

.v2r-when {
  color: var(--text-muted);
  font-size: 12px;
}

.v2r-changes {
  display: grid;
  gap: 3px;
  margin: 6px 0 0;
  padding-inline-start: 18px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.v2r-applies,
.v2r-none {
  color: var(--text-muted);
  font-size: 12px;
}

.v2r-none {
  margin: 4px 0 0;
}

.v2r-done,
.v2r-attn {
  margin: 0;
  font-weight: 700;
}

.v2r-done {
  color: var(--v2-done-ink);
}

.v2r-attn {
  color: var(--v2-attn-ink);
}

.v2r-checks {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 13px;
  list-style: none;
}

.v2r-checks li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 8px;
}

.v2r-check-word {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.v2r-check-ok .v2r-check-word {
  color: var(--v2-done-ink);
}

.v2r-check-attn .v2r-check-word {
  color: var(--v2-attn-ink);
}

.v2r-audience {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}

.v2r-audience dt {
  color: var(--text-muted);
}

.v2r-audience dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* studio.css gives the publish gate's reason a rust colour. In v2 a blocked gate is
   something that needs you, so it is blue, as everywhere else. */
.studio-v2 .publish-blocked {
  color: var(--v2-attn-ink);
}

/* What the output is checked against: the approved examples, and who signed them off. */
.v2r-examples {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0;
  font-size: 13px;
  list-style: none;
}

.v2r-example {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 8px;
}

.v2r-example .v2r-check-word {
  color: var(--text-muted);
}