/* Atelier — Onglet Morceau */
.workshopPanel__inner--piece {
  max-width: min(1680px, 100%);
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.75rem);
}

.workshopPiece__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.workshopPiece__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.workshopPiece__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 700;
}

.workshopPiece__headActions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pieceSaveBtn {
  position: relative;
  min-width: 7.25rem;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

.pieceSaveBtn__label {
  display: inline-block;
  transition: opacity 0.18s ease;
}

.pieceSaveBtn__check {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.46em;
  height: 0.82em;
  border: solid currentColor;
  border-width: 0 0.16em 0.16em 0;
  transform: translate(-50%, -62%) rotate(45deg) scale(0.35);
  opacity: 0;
  pointer-events: none;
}

.pieceSaveBtn--success {
  background: linear-gradient(145deg, #237042, #2f8f5a) !important;
  border-color: color-mix(in srgb, #22c55e 42%, transparent) !important;
  color: #f8fffb !important;
  box-shadow:
    0 6px 20px rgba(34, 160, 84, 0.28),
    0 0 0 2px color-mix(in srgb, #22c55e 32%, transparent) !important;
  animation: pieceSaveBtnSuccessPop 0.48s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

.pieceSaveBtn--success .pieceSaveBtn__label {
  opacity: 0;
}

.pieceSaveBtn--success .pieceSaveBtn__check {
  opacity: 1;
  animation: pieceSaveBtnCheckPop 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pieceSaveBtnCheckPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -62%) rotate(45deg) scale(0.2);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -62%) rotate(45deg) scale(1.12);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -62%) rotate(45deg) scale(1);
  }
}

@keyframes pieceSaveBtnSuccessPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pieceSaveBtn--success,
  .pieceSaveBtn--success .pieceSaveBtn__check {
    animation: none;
  }

  .pieceSaveBtn--success .pieceSaveBtn__check {
    opacity: 1;
    transform: translate(-50%, -62%) rotate(45deg) scale(1);
  }
}

.workshopPiece__intro {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
  max-width: 52ch;
}

.workshopPiece--denied {
  padding: 2rem 1rem;
  text-align: center;
}

.workshopPiece__deniedText {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

.workshopPiece__step {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--da-base, #f7f5f0) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 65%, transparent);
}

.workshopPiece__fold > .workshopPiece__foldSummary {
  list-style: none;
  cursor: pointer;
  margin-bottom: 0;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.workshopPiece__fold > .workshopPiece__foldSummary::-webkit-details-marker {
  display: none;
}

.workshopPiece__fold > .workshopPiece__foldSummary::before {
  content: "▸";
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.85rem;
  opacity: 0.65;
  align-self: center;
  transition: transform 0.15s ease;
}

.workshopPiece__fold[open] > .workshopPiece__foldSummary::before {
  transform: rotate(90deg);
}

.workshopPiece__fold:not([open]) > .workshopPiece__foldSummary {
  margin-bottom: 0;
}

.workshopPiece__fold[open] > .workshopPiece__foldSummary {
  margin-bottom: 1rem;
}

.workshopPiece__step--structure[open] > .workshopPiece__foldSummary {
  margin-bottom: 0.55rem;
}

.workshopPiece__step--structure .workshopPiece__structureActions {
  margin-bottom: 0.45rem;
}

.workshopPiece__step--structure .workshopPiece__quickSections {
  margin-bottom: 0.45rem;
}

.workshopPiece__colFoldSummary .workshopPiece__colTitle {
  margin: 0 0 0.2rem;
}

.workshopPiece__colFoldSummary .workshopPiece__pickerHint {
  margin: 0;
}

.workshopPiece__structureActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.workshopPiece__fold:not([open]) > .workshopPiece__structureActions {
  display: none;
}

.workshopPiece__step.is-locked .workshopPiece__structureBody {
  opacity: 0.45;
  pointer-events: none;
}

.workshopPiece__stepHead {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.workshopPiece__stepHead--structure {
  flex-wrap: wrap;
}

.workshopPiece__stepHeadMain {
  flex: 1 1 220px;
  min-width: 0;
}

.workshopPiece__structureSelectionCount {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.75;
  white-space: nowrap;
}

.workshopPiece__structureActionBtn.is-active {
  border-color: var(--da-accent, #4a6fa5);
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 65%, transparent);
  color: var(--da-accent, #4a6fa5);
}

.workshopPiece__structureActionBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workshopPiece__stepNum {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--da-accent, #4a6fa5);
  color: var(--da-accent-ink, #fff);
}

.workshopPiece__stepTitle {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.workshopPiece__stepHint {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.8;
}

.workshopPiece__identityGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

@media (max-width: 720px) {
  .workshopPiece__identityGrid {
    grid-template-columns: 1fr;
  }
}

.workshopPiece__field--wide {
  grid-column: 1 / -1;
}

.workshopPiece__field--key .adminSongKeyPicker {
  width: 100%;
}

.workshopPiece__field .adminBpmAssistRow {
  width: 100%;
}

.workshopPiece__field .adminBpmAssistRow__input {
  width: auto;
  flex: 1 1 auto;
}

.workshopPiece__bpmTapHint {
  margin: 0.15rem 0 0;
}

.workshopPiece__field textarea {
  width: 100%;
  min-height: 4.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 80%, transparent);
  background: var(--da-base, #fff);
  resize: vertical;
  font: inherit;
}

.workshopPiece__importNote {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8rem;
  color: var(--da-accent, #4a6fa5);
  font-weight: 600;
}

.workshopPiece__fieldHint {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.75;
}

.workshopPiece__fieldLabel {
  font: inherit;
  font-weight: inherit;
}

.workshopPiece__identityGrid .adminAudiencePresets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workshopPiece__identityGrid .adminDifficultyRow,
.workshopPiece__identityGrid .adminDurationRow {
  width: 100%;
}

.workshopPiece__identityGrid .adminDifficultyInput,
.workshopPiece__identityGrid .adminDurationInput {
  width: auto;
  max-width: 6.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 80%, transparent);
  background: var(--da-base, #fff);
  font: inherit;
}

.workshopPiece__externalPageLink {
  display: inline-flex;
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--da-accent, #4a6fa5);
  text-decoration: none;
}

.workshopPiece__externalPageLink:hover {
  text-decoration: underline;
}

.workshopPiece__draftRestore {
  position: relative;
}

.workshopPiece__draftRestoreSummary {
  list-style: none;
  cursor: pointer;
}

.workshopPiece__draftRestoreSummary::-webkit-details-marker {
  display: none;
}

.workshopPiece__draftRestoreList {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 20;
  min-width: min(22rem, 92vw);
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 85%, transparent);
  background: var(--da-base, #fff);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--da-ink, #1a1a1a) 12%, transparent);
}

.workshopPiece__draftRestoreItem {
  display: block;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.workshopPiece__draftRestoreItem:hover {
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 45%, transparent);
}

.workshopPiece__streamingAudio {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.workshopPiece__streamingAudioLabel {
  font-size: 0.85rem;
  font-weight: 600;
}

.workshopPiece__streamingAudioMount {
  max-width: min(420px, 100%);
}

.workshopPiece__streamingWidget.exercise-streaming.open {
  max-width: 100%;
}

/* Atelier morceau : lecteur Spotify toujours visible (pas de clip « casque fermé ») */
.workshopPiece__streamingWidget.exercise-streaming .musicPlatformReveal {
  clip-path: none !important;
}

.workshopPiece__streamingWidget.exercise-streaming .musicPlatformRevealOuter {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  min-width: 0;
}

.workshopPiece__streamingWidget.exercise-streaming .musicPlatformEmbedHost {
  min-height: 152px;
}

.workshopPiece__streamingWidget.exercise-streaming .musicPlatformEmbedHost iframe {
  display: block;
  width: 100%;
  min-height: 152px;
  border: 0;
  border-radius: 10px;
}

.workshopPiece__quickSections {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.workshopPiece__quickLabel {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
}

.workshopPiece__quickBtn {
  font-size: 0.82rem;
}

.workshopPiece__timelineEmpty {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  font-size: 0.85rem;
  opacity: 0.75;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
}

.workshopPiece__grid {
  display: block;
  margin-top: 1rem;
}

.workshopPiece__col--full {
  max-width: 100%;
}

/* Diagrammes pleine largeur → structure + édition en dessous (même largeur que l’identité) */
.workshopPiece__editorWorkspace {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.workshopPiece__editorMain {
  min-width: 0;
  width: 100%;
}

.workshopPiece__diagramCompanion {
  margin: 0;
  width: 100%;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 65%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f0) 88%, transparent);
  min-width: 0;
}

.workshopPiece__diagramCompanion.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

.workshopPiece__diagramCompanionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 45%, transparent);
}

.workshopPiece__diagramCompanionHeadMain {
  min-width: 0;
}

.workshopPiece__diagramCompanionHeadActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.workshopPiece__timecodeEditBtn.is-active {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 55%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 16%, #fff);
  color: var(--da-accent-ink, #1e3a5f);
}

.workshopPiece__timecodeEditBtn.is-hidden-student,
.workshopPiece__editorWorkspace.is-student .workshopPiece__timecodeEditBtn,
.workshopPiece__editorWorkspace.is-student .workshopPiece__chordCapture {
  display: none !important;
}

.workshopPiece__editorWorkspace.is-timecode-edit .workshopPiece__practiceRunShell--dock {
  display: block;
}

.workshopPiece__practiceRunShell--dock[hidden] {
  display: none !important;
}

/* FAB / panneau capture — pile fixe à droite */
.workshopPiece__captureFabStack {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  max-width: min(16.5rem, 46vw);
  width: min(16.5rem, 46vw);
}

.workshopPiece__captureFabStack.is-hidden-student,
.workshopPiece__editorWorkspace.is-student .workshopPiece__captureFabStack {
  display: none !important;
}

.workshopPiece__captureFabStack[hidden] {
  display: none !important;
}

.workshopPiece__captureFabStack.is-capture-dock {
  max-width: min(17rem, 48vw);
  width: min(17rem, 48vw);
}

/* Panneau capture flottant (remplace les anciens FAB seuls) */
.workshopPiece__practiceRunShell--dock {
  margin: 0;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRun,
.workshopPiece__practiceRunShell--dock .workshopPiece__chordCaptureSession {
  margin: 0;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 42%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f1) 92%, #fff);
  box-shadow:
    0 10px 32px color-mix(in srgb, var(--da-ink, #1a1a1a) 18%, transparent),
    0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 12%, transparent);
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunTitle {
  font-size: 0.82rem;
  font-family: var(--typo-display, "League Spartan", sans-serif);
  letter-spacing: 0.01em;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunHint {
  margin: 0.2rem 0 0.55rem;
  font-size: 0.68rem;
  line-height: 1.3;
  opacity: 0.72;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunControls--capture {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunControls--capture .workshopPiece__practiceRunBtn--start,
.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunControls--capture .workshopPiece__practiceRunBtn--markNext,
.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunControls--capture .workshopPiece__practiceRunBtn--cancel {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  justify-content: center;
  text-align: center;
  font-size: 0.78rem;
  padding: 0.55rem 0.6rem;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunBtn--start {
  background: var(--da-accent, #4a6fa5);
  color: var(--da-accent-ink, #fff);
  border-color: color-mix(in srgb, var(--da-accent, #4a6fa5) 70%, transparent);
  font-weight: 700;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunStopEditRow {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunBtn--stopEdit,
.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunBtn--clearAll,
.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunBtn--clearSection {
  width: 100%;
  font-size: 0.76rem;
  padding: 0.5rem 0.55rem;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunStatus {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunTime {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunSection {
  opacity: 0.78;
  font-size: 0.7rem;
}

.workshopPiece__practiceRunShell--dock .workshopPiece__practiceRunError {
  margin: 0.35rem 0 0;
  font-size: 0.7rem;
}

.workshopPiece__captureFab {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  z-index: auto;
  min-width: 7.5rem;
  max-width: none;
  width: 100%;
  padding: 0.85rem 0.75rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--da-accent, #4a6fa5) 55%, transparent);
  background: var(--da-accent, #4a6fa5);
  color: var(--da-accent-ink, #fff);
  font-family: var(--typo-display, "League Spartan", sans-serif);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--da-ink, #1a1a1a) 22%, transparent);
  cursor: pointer;
}

.workshopPiece__captureFab[hidden] {
  display: none !important;
}

.workshopPiece__captureFab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workshopPiece__captureFab.is-stamp-flash {
  transform: scale(1.04);
  filter: brightness(1.08);
}

.workshopPiece__captureFab--stopEdit {
  padding: 0.65rem 0.75rem;
  border-color: color-mix(in srgb, var(--da-ink, #2a2824) 28%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f1) 88%, #fff);
  color: var(--da-ink, #2a2824);
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--da-ink, #1a1a1a) 12%, transparent);
}

.workshopPiece__captureFab--stopEdit:hover {
  border-color: color-mix(in srgb, var(--da-accent, #4a6fa5) 45%, transparent);
  background: #fff;
}

.workshopPiece__timelineItem.is-capture-scope {
  outline: 2.5px solid var(--da-accent, #6b8cae);
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 35%, transparent),
    0 0 0 4px color-mix(in srgb, var(--da-accent-glow, #6b8cae) 18%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 10%, var(--da-base, #fff));
}

.workshopPiece__timelineCaptureScopeBadge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.08rem 0.4rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--da-accent-ink, #fff);
  background: var(--da-accent, #6b8cae);
  vertical-align: middle;
  white-space: nowrap;
}

.workshopPiece__timelineItem.is-capture-scope.is-selected {
  outline-color: var(--da-accent, #6b8cae);
}

.workshopPiece__diagramCompanionTitle {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--typo-display, "League Spartan", sans-serif);
}

.workshopPiece__diagramCompanionHint {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.72;
  line-height: 1.35;
}

.workshopPiece__diagramCompanionToggle {
  flex: 0 0 auto;
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
}

.workshopPiece__diagramCompanionBody {
  padding: 0 1.1rem 1.15rem;
}

.workshopPiece__diagramCompanion.is-collapsed .workshopPiece__diagramCompanionBody,
.workshopPiece__diagramCompanion.is-collapsed .workshopPiece__diagramCompanionHint {
  display: none;
}

.workshopPiece__diagramCompanion.is-collapsed .workshopPiece__diagramCompanionHead {
  border-bottom: none;
  align-items: center;
}

.workshopPiece__diagramCompanion.is-collapsed {
  position: sticky;
  top: 0.75rem;
}

.workshopPiece__previewPieceSection {
  margin-top: 0.85rem;
}

.workshopPiece__previewPieceSection .faPiecePreviewHost {
  margin-top: 0;
}

/* Répétition guidée admin (atelier uniquement) */
.workshopPiece__practiceRunShell.is-hidden-student,
.workshopPiece__editorWorkspace.is-student .workshopPiece__practiceRunShell {
  display: none;
}

.workshopPiece__practiceRun {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--da-accent, #6b8cae) 45%, var(--da-line, #c8c0b4));
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 35%, var(--da-base, #f7f5f0));
}

.workshopPiece__practiceRunTitle {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.workshopPiece__practiceRunHint {
  margin: 0.25rem 0 0.65rem;
  font-size: 0.78rem;
  opacity: 0.78;
  line-height: 1.35;
}

.workshopPiece__practiceRunControls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.workshopPiece__practiceRunBtn--start {
  font-weight: 700;
}

.workshopPiece__practiceRunBtn--start.is-section-scoped {
  border-color: var(--da-accent, #4a6fa5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #4a6fa5) 35%, transparent);
}

.workshopPiece__practiceRunControls--capture {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
}

.workshopPiece__practiceRunControls--capture .workshopPiece__practiceRunBtn--start,
.workshopPiece__practiceRunControls--capture .workshopPiece__practiceRunBtn--go,
.workshopPiece__practiceRunControls--capture .workshopPiece__practiceRunBtn--markNext {
  flex: 1 1 auto;
  min-width: 8rem;
}

.workshopPiece__practiceRunBtn--go {
  border-color: color-mix(in srgb, var(--da-accent, #4a6fa5) 55%, transparent);
  background: var(--da-accent, #4a6fa5);
  color: var(--da-accent-ink, #fff);
  font-weight: 700;
}

.workshopPiece__practiceRunBtn--go[hidden] {
  display: none !important;
}

.workshopPiece__practiceRunBtn--go.is-go-flash {
  animation: pieceCaptureGoPulse 0.9s ease-in-out infinite;
}

@keyframes pieceCaptureGoPulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.1);
  }
}

.workshopPiece__practiceRunBtn--markNext {
  font-weight: 800;
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 60%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 18%, #fff);
  color: var(--da-ink, #2a2824);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.workshopPiece__practiceRunBtn--markNext:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workshopPiece__practiceRunBtn--markNext.is-stamp-flash {
  transform: scale(0.96);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 42%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--da-accent, #6b8cae) 55%, transparent);
}

.workshopPiece__practiceRunStopEditRow {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
}

.workshopPiece__practiceRunBtn--stopEdit {
  width: 100%;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--da-ink, #2a2824) 22%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f1) 90%, #fff);
  color: var(--da-ink, #2a2824);
}

.workshopPiece__practiceRunBtn--clearAll {
  width: 100%;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--da-accent-2, #8b7355) 45%, transparent);
  background: color-mix(in srgb, var(--da-accent-2, #8b7355) 12%, #fff);
  color: var(--da-ink, #2a2824);
}

.workshopPiece__practiceRunBtn--clearSection {
  width: 100%;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 40%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 10%, #fff);
  color: var(--da-ink, #2a2824);
}

.workshopPiece__practiceRunBtn--clearSection[hidden] {
  display: none !important;
}

.workshopPiece__practiceRunBtn--cancel {
  flex: 0 0 auto;
  font-weight: 600;
  opacity: 0.9;
}

.workshopPiece__practiceRunBtn--cancel:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.workshopPiece__diagramTimecodeStack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16rem;
  margin-top: 0.28rem;
}

.workshopPiece__diagramTimecode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.workshopPiece__diagramTimecode.is-empty {
  border: 1px dashed color-mix(in srgb, var(--da-line, #c8c0b4) 80%, transparent);
  color: color-mix(in srgb, var(--da-ink, #2a2824) 45%, transparent);
  background: transparent;
}

.workshopPiece__diagramTimecode.is-set {
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 45%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 14%, #fff);
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 92%, var(--da-ink, #2a2824));
}

.workshopPiece__diagramTimecode.is-pass {
  font-size: 0.62rem;
  font-weight: 600;
  opacity: 0.92;
  border-style: dashed;
}

.workshopPiece__diagramTimecode.is-editable {
  cursor: text;
}

.workshopPiece__diagramTimecode.is-editable:hover,
.workshopPiece__diagramTimecode.is-editable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--da-accent, #6b8cae) 50%, transparent);
  outline-offset: 1px;
}

.workshopPiece__diagramTimecodeInput {
  width: 4.2rem;
  margin: 0;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 50%, transparent);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: #fff;
  color: var(--da-ink, #2a2824);
}

.workshopPiece__diagramItem.is-chord-capture-next .workshopPiece__diagramTimecode {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 70%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 35%, transparent);
}

.workshopPiece__practiceRunStatus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
  font-size: 0.85rem;
}

.workshopPiece__practiceRunTime {
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

.workshopPiece__practiceRunSection {
  opacity: 0.85;
}

.workshopPiece__practiceRunError {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: color-mix(in srgb, #b42318 85%, var(--da-ink, #1a1a1a));
}

.workshopPiece__practiceRun[data-run-state="running"],
.workshopPiece__practiceRun[data-run-state="countIn"] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 55%, transparent);
}

.workshopPiece__practiceRunCountdown {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 18%, var(--da-base, #f7f5f0));
  color: var(--da-accent-ink, #1e3a5f);
  transition: transform 0.12s ease, background 0.12s ease;
}

.workshopPiece__practiceRunCountdown.is-beat-flash {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 32%, var(--da-base, #f7f5f0));
}

/* Enchaînement — une structure ouverte, repère fixe, scroll page */
.mpPiecePanel.is-practiceRun-flow {
  --workshop-piece-practice-horizon: 6.5rem;
}

.mpPiecePanel.is-practiceRun-flow .mpPiecePanel__sections {
  overflow-anchor: none;
}

.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails {
  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    opacity 0.32s ease,
    background-color 0.28s ease;
}

.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails:not(.is-practice-playing) {
  opacity: 0.68;
}

.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails.is-practice-closing {
  opacity: 0.42;
}

.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails.is-media-active,
.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails.is-practice-playing {
  opacity: 1;
  border-width: 2px;
  border-color: var(--da-accent, #6b8cae);
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 38%, #fff 62%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 52%, transparent),
    0 6px 22px color-mix(in srgb, var(--da-accent, #6b8cae) 22%, transparent);
}

.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails.is-media-active .mpPieceSectionDetails__summary,
.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails.is-practice-playing .mpPieceSectionDetails__summary {
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 16%, var(--da-accent-glow, #dbeafe) 48%);
  color: var(--da-accent-ink, #1e3a5f);
  font-weight: 700;
}

.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails.is-media-active .mpPieceSectionDetails__timecode,
.mpPiecePanel.is-practiceRun-flow .mpPieceSectionDetails.is-practice-playing .mpPieceSectionDetails__timecode {
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 78%, #fff);
  color: var(--da-accent-ink, #1e3a5f);
  font-weight: 700;
}

.workshopPiece__timelineItem {
  display: grid;
  grid-template-columns: auto minmax(84px, 110px) minmax(52px, 0.55fr) minmax(140px, 3fr) auto auto;
  gap: 0.4rem 0.45rem;
  align-items: center;
  padding: 0.42rem 0.55rem;
  border-radius: 10px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--da-base, #fff) 70%, var(--da-accent-glow, #dbeafe));
  cursor: pointer;
  list-style: none;
}

.workshopPiece__timelineItem[draggable="true"] {
  cursor: grab;
}

.workshopPiece__timelineItem[draggable="true"]:active {
  cursor: grabbing;
}

.workshopPiece__timelineItem.is-dragging {
  opacity: 0.55;
}

.workshopPiece__timelineItem input,
.workshopPiece__timelineItem select,
.workshopPiece__timelineItem button {
  cursor: auto;
  pointer-events: auto;
}

.workshopPiece__timelineItem.has-repeat {
  box-shadow: inset 3px 0 0 var(--da-accent, #4a6fa5);
}

.workshopPiece__timelineDegrees {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem 0.4rem;
  min-width: 0;
  flex-wrap: wrap;
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  opacity: 0.92;
  white-space: normal;
}

.workshopPiece__repeatWrap {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.85;
}

.workshopPiece__repeatInput {
  width: 2.5rem;
  padding: 0.2rem 0.25rem;
  font-size: 0.78rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
  text-align: center;
}

.workshopPiece__videoStartWrap {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
}

.workshopPiece__videoStartInput {
  width: 4rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.workshopPiece__chordCapture {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-top: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 28%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 6%, #fff);
}

.workshopPiece__chordCapture[hidden] {
  display: none !important;
}

.workshopPiece__chordCaptureMain {
  flex: 1 1 14rem;
  min-width: 0;
}

.workshopPiece__chordCaptureHint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--da-ink, #2a2824) 78%, transparent);
}

.workshopPiece__chordCaptureHint kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
  background: #fff;
  font-size: 0.72rem;
  font-family: var(--typo-body, Manrope, sans-serif);
  font-weight: 700;
}

.workshopPiece__chordCaptureStatus {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 88%, var(--da-ink, #2a2824));
}

.workshopPiece__chordCaptureActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.workshopPiece__chordCaptureNext {
  font-weight: 700;
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 55%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 14%, #fff);
  color: var(--da-accent-ink, var(--da-ink, #2a2824));
}

.workshopPiece__chordCaptureNext:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.workshopPiece__chordCaptureClear,
.workshopPiece__chordCaptureReset {
  flex-shrink: 0;
  border-color: color-mix(in srgb, var(--da-accent-2, #8b7355) 45%, transparent);
}

.workshopPiece__chordCaptureScope.is-section-scope {
  border-color: var(--da-accent, #4a6fa5);
  color: var(--da-accent, #4a6fa5);
}

.workshopPiece__timelineTimedBadge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--da-accent, #4a6fa5) 18%, transparent);
  color: var(--da-accent, #4a6fa5);
}

.workshopPiece__timelineItem.is-chords-timed {
  box-shadow: inset 3px 0 0 var(--da-accent, #4a6fa5);
}

.workshopPiece__degreeRowTimecodeInput {
  width: 4.25rem;
  margin-left: 0.35rem;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 75%, transparent);
  font: inherit;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: var(--da-base, #fff);
  color: var(--da-ink, #2a2824);
}

.workshopPiece__degreeRow.has-timecode .workshopPiece__degreeRowTimecodeInput {
  border-color: color-mix(in srgb, var(--da-accent, #4a6fa5) 45%, transparent);
}

/* FAB capture — styles déplacés près de .workshopPiece__captureFabStack (panneau dock) */

.workshopPiece__degreeRowTimecode {
  display: inline-flex;
  align-items: center;
  margin-left: 0.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 38%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 12%, #fff);
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 90%, var(--da-ink, #2a2824));
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.workshopPiece__degreeRow.has-timecode {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 42%, transparent);
}

.workshopPiece__degreeEditor {
  margin-top: 0.5rem;
}

.workshopPiece__sectionLabel {
  width: 100%;
  max-width: 7.5rem;
  padding: 0.2rem 0.35rem;
  font-size: 0.72rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 65%, transparent);
  background: var(--da-base, #fff);
  cursor: text;
}

.workshopPiece__tonicBadge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 70%, transparent);
  color: var(--da-accent, #4a6fa5);
  white-space: nowrap;
}

.workshopPiece__tonicBadge--inline {
  flex-shrink: 0;
  font-size: 0.65rem;
  padding: 0.1rem 0.32rem;
}

.workshopPiece__modulation {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 50%, transparent);
  background: color-mix(in srgb, var(--da-base, #fff) 80%, transparent);
}

.workshopPiece__modulationToggle {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.workshopPiece__modulationRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.workshopPiece__modulationResult {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--da-accent, #4a6fa5);
}

.workshopPiece__modulationSelect {
  min-width: 5.5rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
}

.workshopPiece__degreeStrip {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.workshopPiece__degreeList {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.35rem;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.workshopPiece__degreeRow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.3rem 0.45rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 45%, transparent);
  background: var(--da-base, #fff);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.workshopPiece__degreeRow:active {
  cursor: grabbing;
}

.workshopPiece__degreeRow.is-dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.workshopPiece__degreeRow.is-dropTarget {
  border-color: var(--da-accent, #4a6fa5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #4a6fa5) 35%, transparent);
}

.workshopPiece__degreeTrash {
  flex-shrink: 0;
  align-self: center;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.65;
  color: #a33;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s;
}

.workshopPiece__degreeTrash.is-active {
  opacity: 1;
  border-color: #a33;
  background: color-mix(in srgb, #fcc 40%, transparent);
}

.workshopPiece__degreeRowBody {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.35rem;
}

.workshopPiece__degreeSep {
  list-style: none;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.82rem;
  opacity: 0.4;
  padding: 0 0.05rem;
  user-select: none;
}

.workshopPiece__degreeRow.is-altered {
  border-color: color-mix(in srgb, var(--da-accent-2, #8b7355) 45%, transparent);
}

.workshopPiece__degreeRow.is-custom {
  border-style: dashed;
}

.workshopPiece__degreeRow.is-silence {
  border-style: dotted;
  opacity: 0.92;
  background: color-mix(in srgb, var(--da-base, #fff) 88%, var(--da-accent-2-glow, #e8dfd4));
}

.workshopPiece__degreeRow.is-silence .workshopPiece__degreeRowRoman,
.workshopPiece__degreeRow.is-silence .workshopPiece__degreeRowSymbol {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.workshopPiece__degreeAddBtn--silence {
  margin-left: 0.55rem;
  min-width: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.workshopPiece__degreeRowRoman {
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
}

.workshopPiece__degreeRowSymbol {
  font-size: 0.76rem;
  font-weight: 600;
  opacity: 0.8;
  line-height: 1;
  white-space: nowrap;
}

.workshopPiece__degreeRowActions {
  display: flex;
  gap: 0.2rem;
}

.workshopPiece__degreeRowBtn {
  font-size: 0.72rem;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 60%, transparent);
  background: transparent;
  cursor: pointer;
}

.workshopPiece__degreeRowBtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.workshopPiece__degreeRowBtn--danger {
  color: #a33;
}

.workshopPiece__degreeTabs {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 45%, transparent);
}

.workshopPiece__degreeTabBar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.workshopPiece__degreeTabBtn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 60%, transparent);
  background: transparent;
  cursor: pointer;
}

.workshopPiece__degreeTabBtn.is-active {
  background: var(--da-accent, #4a6fa5);
  color: var(--da-accent-ink, #fff);
  border-color: transparent;
}

.workshopPiece__alteredForm,
.workshopPiece__customForm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.workshopPiece__alteredSelect {
  font-size: 0.82rem;
  padding: 0.3rem 0.45rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
}

.workshopPiece__alteredSeventh {
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.workshopPiece__capoLabLinkRow {
  margin-top: 0.35rem;
}

.workshopPiece__capoLabLink {
  display: inline-flex;
  align-items: center;
  font-family: var(--typo-body, Manrope, system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--da-accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.workshopPiece__capoLabLink:hover {
  color: var(--da-accent-hover);
}

.workshopPiece__alteredHint {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  opacity: 0.75;
}

.workshopPiece__customInput {
  min-width: 8rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
}

.workshopPiece__seqTarget {
  list-style: none;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 55%, transparent);
}

.workshopPiece__degreeAddRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 45%, transparent);
}

.workshopPiece__extBlock {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.workshopPiece__extLabel {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--da-ink-muted, #64748b) 90%, transparent);
}

.workshopPiece__extGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.workshopPiece__extBtn {
  min-width: 2.6rem;
  min-height: 1.85rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.workshopPiece__degreeAddLabel {
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 0.25rem;
}

.workshopPiece__degreeAddBtn {
  min-width: 2.25rem;
  font-weight: 700;
}

.workshopPiece__degreePreview {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.5rem 0;
}

.workshopPiece__studentPreviewBanner {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--da-accent-ink, #1a3d5c);
  background: color-mix(in srgb, var(--da-accent, #4a7c9b) 14%, var(--da-base, #f7f5f0));
  border: 1px solid color-mix(in srgb, var(--da-accent, #4a7c9b) 35%, transparent);
}

@media (max-width: 800px) {
  .workshopPiece__timelineItem {
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto auto auto;
  }
  .workshopPiece__timelineOrder {
    grid-row: 1;
  }
  .workshopPiece__sectionType {
    grid-column: 2 / -1;
  }
  .workshopPiece__sectionLabel {
    grid-column: 1 / -1;
    max-width: 7.5rem;
  }
  .workshopPiece__timelineDegrees {
    grid-column: 1 / -1;
  }
  .workshopPiece__repeatWrap,
  .workshopPiece__timelineActions {
    grid-column: span 1;
  }
}

.workshopPiece__grid.is-student .workshopPiece__col--picker,
.workshopPiece__grid.is-student .workshopPiece__transposeBar {
  display: none;
}

.workshopPiece__col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--da-base, #f7f5f0) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 65%, transparent);
}

.workshopPiece__field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.workshopPiece__field input,
.workshopPiece__field select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 80%, transparent);
  background: var(--da-base, #fff);
}

.workshopPiece__field--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.workshopPiece__field--inline input,
.workshopPiece__field--inline select {
  width: auto;
  min-width: 4rem;
}

.workshopPiece__timelineHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

.workshopPiece__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(34vh, 22rem);
  overflow-y: auto;
}

.workshopPiece__timelineOrder {
  font-weight: 700;
  font-size: 0.85rem;
  opacity: 0.7;
  min-width: 1.25rem;
  text-align: center;
  user-select: none;
}

.workshopPiece__timelineItem.is-selected {
  border-color: var(--da-accent, #4a6fa5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #4a6fa5) 35%, transparent);
}

.workshopPiece__timelineItem.is-media-active {
  box-shadow: inset 3px 0 0 var(--da-accent, #4a6fa5);
}

.workshopPiece__timelineItem.is-multi-selected {
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 55%, var(--da-base, #fff));
}

.workshopPiece__timeline.is-multi-select .workshopPiece__timelineItem {
  grid-template-columns: auto auto minmax(84px, 110px) minmax(52px, 0.55fr) minmax(140px, 3fr) auto auto;
}

.workshopPiece__timelinePick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.workshopPiece__timelinePickInput {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--da-accent, #4a6fa5);
  cursor: pointer;
}

.workshopPiece__timelineDropTail {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

.workshopPiece__timelineDropTail.is-active {
  opacity: 1;
  border-color: var(--da-accent, #4a6fa5);
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 45%, transparent);
}

.workshopPiece__timelineActions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  white-space: nowrap;
}

.workshopPiece__timelineActions .followingGhostBtn {
  padding: 0.25rem 0.45rem;
  font-size: 0.72rem;
}

.workshopPiece__colTitle {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.workshopPiece__pickerHint {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.workshopPiece__seqEmpty {
  list-style: none;
  font-size: 0.85rem;
  opacity: 0.75;
  padding: 0.5rem 0;
}

.workshopPiece__advanced {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.workshopPiece__advanced summary {
  cursor: pointer;
  font-weight: 600;
  opacity: 0.85;
}

.workshopPiece__detailHead h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.workshopPiece__detailSub {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

.workshopPiece__empty {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

.workshopPiece__previewBody {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.workshopPiece__previewEmpty {
  margin: 0;
  padding: 0.35rem 0 0;
  font-size: 0.82rem;
}

.workshopPiece__previewSection {
  display: grid;
  grid-template-columns: minmax(128px, 180px) minmax(0, 1fr);
  gap: 0.85rem 1.25rem;
  align-items: center;
  min-height: 6.25rem;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 65%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f0) 92%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (max-width: 640px) {
  .workshopPiece__previewSection {
    grid-template-columns: 1fr;
  }
}

.workshopPiece__previewSection:hover {
  border-color: color-mix(in srgb, var(--da-accent, #4a6fa5) 45%, var(--da-line, #c8c0b4));
}

.workshopPiece__previewSection.is-selected {
  border-color: var(--da-accent, #4a6fa5);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #4a6fa5) 35%, transparent);
}

.workshopPiece__previewSectionHead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28rem;
  min-height: 3.5rem;
}

.workshopPiece__previewSection--diagramsOnly {
  display: block;
  grid-template-columns: none;
  min-height: 0;
  padding: 0.65rem 0.75rem 0.85rem;
  cursor: default;
}

.workshopPiece__previewSection--diagramsOnly .workshopPiece__previewCapoNote {
  margin: 0 0 0.45rem;
}

.faPiecePreviewHost .workshopPiece__previewSection--diagramsOnly {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.workshopPiece__previewTypeBadge {
  display: inline-block;
  width: fit-content;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.14rem 0.42rem;
  border-radius: 4px;
  color: var(--da-accent-ink, #fff);
  background: var(--da-accent, #4a6fa5);
}

.workshopPiece__previewSectionTitle {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.workshopPiece__previewSectionMeta {
  font-size: 0.74rem;
  opacity: 0.85;
  line-height: 1.35;
  word-break: break-word;
}

.workshopPiece__previewCapoNote {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.workshopPiece__previewCapoNote.is-muted {
  opacity: 0.72;
}

.workshopPiece__previewCapoBanner {
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--da-accent-ink, #fff);
  background: color-mix(in srgb, var(--da-accent, #4a6fa5) 88%, var(--da-ink, #2a2824));
}

.workshopPiece__previewCapoNote.is-recommended {
  color: var(--da-accent, #4a6fa5);
}

.workshopPiece__previewCapoNote.is-muted {
  opacity: 0.72;
  font-weight: 500;
}

.workshopPiece__diagramItem.is-capo-adapted::after {
  content: none;
}

.workshopPiece__diagramItem.is-high-position .workshopPiece__diagramSymbol,
.workshopPiece__diagramItem.is-high-position .workshopPiece__diagramRoman {
  color: color-mix(in srgb, var(--da-accent-2, #8b7355) 85%, var(--da-ink, #2a2824));
}

.workshopPiece__diagramRoman.is-altered,
.workshopPiece__diagramSymbol.is-altered {
  color: var(--da-accent, #6b8cae);
  font-weight: 800;
}

.workshopPiece__diagramQualityTag {
  margin-left: 0.1rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  opacity: 0.95;
  vertical-align: super;
  line-height: 0;
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 88%, var(--da-ink, #2a2824));
}

.workshopPiece__diagramItem.is-high-position::before {
  content: none;
}

.workshopPiece__diagramBadges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.35rem;
  width: 100%;
  min-height: 0.85rem;
}

.workshopPiece__diagramBadge {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
  padding: 0.08rem 0.28rem;
  border-radius: 4px;
}

.workshopPiece__diagramBadge--capo {
  color: var(--da-accent-ink, #fff);
  background: var(--da-accent, #4a6fa5);
}

.workshopPiece__diagramBadge--high {
  color: var(--da-accent-2-ink, #fff);
  background: var(--da-accent-2, #8b7355);
}

.workshopPiece__diagramBadge--playbook {
  color: var(--da-accent-ink, #fff);
  background: color-mix(in srgb, var(--da-accent, #4a6fa5) 72%, #fff);
}

.workshopPiece__previewBar {
  margin: 0.35rem 0 0.75rem;
  justify-content: space-between;
  align-items: center;
}

.workshopPiece__previewBarMain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
}

.workshopPiece__previewBarModeSlot {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.workshopPiece__previewBarModeSlot[hidden],
.workshopPiece__previewBarModeSlot.is-hidden {
  display: none !important;
}

.workshopPiece__previewBarDisplay {
  flex: 0 0 auto;
  margin-left: auto;
  padding-left: 0.85rem;
  border-left: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 80%, transparent);
}

@media (max-width: 720px) {
  .workshopPiece__previewBarDisplay {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    width: 100%;
  }
}

.workshopPiece__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  user-select: none;
}

.workshopPiece__diagramStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.05rem 1.5rem;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  padding: 0.25rem 0.15rem;
}

.workshopPiece__diagramStrip--compact {
  --piece-diagram-cols: 4;
  --piece-diagram-slot: 100%;
  display: grid;
  grid-template-columns: repeat(var(--piece-diagram-cols), minmax(0, 1fr));
  gap: 1.15rem 1.25rem;
  max-width: 100%;
}

.workshopPiece__diagramStrip--compact .workshopPiece__diagramItem {
  width: 100%;
  max-width: none;
  flex: unset;
}

.workshopPiece__diagramStrip--compact .workshopPiece__diagramCard,
.workshopPiece__diagramStrip--compact .workshopPiece__diagramName,
.workshopPiece__diagramStrip--compact .workshopPiece__diagramHost,
.workshopPiece__diagramStrip--compact .workshopPiece__diagramPlaceholder {
  width: 100%;
  max-width: 100%;
}

.workshopPiece__diagramItem {
  flex: 0 0 var(--piece-diagram-slot, 112px);
  width: var(--piece-diagram-slot, 112px);
  max-width: var(--piece-diagram-slot, 112px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.workshopPiece__diagramCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  width: var(--piece-diagram-slot, 112px);
  margin: 0 auto;
  padding: 0.45rem 0.35rem 0.5rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f1) 72%, #fff);
  box-sizing: border-box;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.workshopPiece__diagramItem.is-chord-active .workshopPiece__diagramCard {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 72%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 22%, #fff);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--da-accent, #6b8cae) 35%, transparent),
    0 8px 18px color-mix(in srgb, var(--da-accent, #6b8cae) 16%, transparent);
  transform: translateY(-2px);
}

.workshopPiece__diagramItem.is-chord-capture-next .workshopPiece__diagramCard {
  border-color: color-mix(in srgb, var(--da-accent-2, #8b7355) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--da-accent-2, #8b7355) 28%, transparent);
}

.workshopPiece__practiceRun[data-practice-mode="capture"] {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 35%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 5%, #fff);
}

.workshopPiece__diagramItem.is-zoomable {
  cursor: zoom-in;
  border-radius: 10px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.workshopPiece__diagramItem.is-zoomable:hover {
  background: color-mix(in srgb, var(--da-accent-glow, #dbeafe) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #4a6fa5) 18%, transparent);
}

.workshopPiece__diagramItem.is-zoomable:focus-visible {
  outline: 2px solid var(--da-accent, #4a6fa5);
  outline-offset: 2px;
}

.workshopPiece__diagramCard--zoomable {
  cursor: zoom-in;
}

.workshopPiece__diagramCard--zoomable:focus-visible {
  outline: 2px solid var(--da-focus-ring, rgba(92, 125, 151, 0.55));
  outline-offset: 2px;
  border-radius: 8px;
}

.workshopPiece__diagramCard .diagramExportBar--compact {
  justify-content: center;
  width: 100%;
}

.workshopPiece__diagramCard .diagramExportBar--compact .diagramExportBar__btn.followingGhostBtn {
  min-height: 24px;
  padding: 0 0.4rem;
  font-size: 0.65rem;
}

.workshopPiece__diagramItem.is-label-only .workshopPiece__diagramPlaceholder {
  font-size: 0.72rem;
}

.workshopPiece__diagramName {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: var(--piece-diagram-slot, 112px);
  text-align: center;
}

.workshopPiece__diagramName--degrees .workshopPiece__diagramRoman,
.workshopPiece__diagramName--chords .workshopPiece__diagramSymbol {
  font-size: 0.84rem;
  line-height: 1.2;
}

.workshopPiece__diagramRoman {
  display: block;
  width: 100%;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  opacity: 0.85;
  text-align: center;
}

.workshopPiece__diagramSymbol {
  display: block;
  width: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  word-break: break-word;
  text-align: center;
}

.workshopPiece__diagramHost {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: var(--piece-diagram-slot, 112px);
  flex-shrink: 0;
}

.workshopPiece__diagramPlaceholder {
  width: var(--piece-diagram-slot, 112px);
  max-width: var(--piece-diagram-slot, 112px);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  border-radius: 8px;
  border: 1px dashed color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
  background: color-mix(in srgb, var(--da-base, #fff) 85%, var(--da-accent-glow, #dbeafe));
}

.workshopPiece__diagramCard--silence {
  opacity: 0.9;
}

.workshopPiece__diagramPlaceholder--silence {
  font-family: var(--typo-display, "League Spartan", sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--da-ink, #1c2430) 55%, transparent);
  border-style: dotted;
  background: color-mix(in srgb, var(--da-base, #fff) 90%, var(--da-accent-2-glow, #e8dfd4));
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram {
  width: auto;
  max-width: var(--piece-diagram-slot, 112px);
  flex-shrink: 0;
  margin: 0 auto;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram {
  --string-gap: 18px;
  --fret-gap: 24px;
  --dot-size: 14px;
  --label-col-w: 14px;
  --label-to-neck-gap: 4px;
  --string-w: 1.2px;
  --nut-h: 3px;
  width: auto;
  max-width: none;
  margin: 0 auto;
  padding: 0.32rem 0.38rem 0.44rem;
  box-sizing: border-box;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__fretLabels {
  display: grid;
  font-size: 0.52rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--da-ink, #2a2824) 72%, transparent);
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__fretLabels span {
  padding-left: 0;
  justify-content: center;
  text-align: center;
}

@media (max-width: 900px) {
  .workshopPiece__diagramStrip--compact {
    --piece-diagram-cols: 3;
  }
}

@media (max-width: 560px) {
  .workshopPiece__diagramStrip--compact {
    --piece-diagram-cols: 2;
  }
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__head {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__headSpacer {
  display: block;
  flex: 0 0 calc(var(--label-col-w) + var(--label-to-neck-gap));
  width: calc(var(--label-col-w) + var(--label-to-neck-gap));
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__headMain {
  flex: 0 0 auto;
  width: var(--neck-w);
  margin-inline: 0;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--label-to-neck-gap);
  justify-content: flex-start;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__name {
  min-height: 0.85rem;
  font-size: 0.68rem;
  line-height: 1.08;
  text-align: center;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__stringFlag {
  width: 18px;
  min-height: 17px;
  font-size: 0.52rem;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__stringRow {
  height: 17px;
  margin-bottom: 0.1rem;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__openDot {
  margin-top: 1px;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram.followingSeqDiagram--intervals .chordDiagram__openDeg {
  font-size: 7px;
}

.workshopPiece__diagramStrip--compact .followingSeqDiagram .chordDiagram__dot--labeled .chordDiagram__dotMark {
  font-size: 7px;
}

/* Zoom accord — modale légère */
body.workshopPiece--diagramZoomOpen {
  overflow: hidden;
}

.workshopPiece__diagramZoom {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.workshopPiece__diagramZoom[hidden] {
  display: none !important;
}

.workshopPiece__diagramZoomBackdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: color-mix(in srgb, var(--da-ink, #1a1a1a) 42%, transparent);
  cursor: pointer;
}

.workshopPiece__diagramZoomPanel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: min(420px, 96vw);
  padding: 1.15rem 1.35rem 1rem;
  border-radius: 14px;
  background: var(--da-base, #f7f5f0);
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--da-ink, #1a1a1a) 22%, transparent);
}

.workshopPiece__diagramZoomHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.workshopPiece__diagramZoomRoman {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.85;
}

.workshopPiece__diagramZoomSymbol {
  font-size: 1.35rem;
  font-weight: 800;
}

.workshopPiece__diagramZoomHost {
  display: flex;
  justify-content: center;
  width: 100%;
}

.workshopPiece__diagramZoomExport {
  display: flex;
  justify-content: center;
  width: 100%;
}

.workshopPiece__diagramZoomHost .followingSeqDiagram .chordDiagram {
  margin: 0 auto;
}

.workshopPiece__diagramZoomHost .followingSeqDiagram .chordDiagram__fretLabels {
  display: grid;
  font-size: 0.88rem;
  font-weight: 700;
}

.workshopPiece__diagramZoomHint {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.7;
  text-align: center;
}

.workshopPiece__transposeBar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 50%, transparent);
}

.workshopPiece__seqList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 45vh;
  overflow-y: auto;
}

.workshopPiece__seqItem {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--da-base, #fff) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 45%, transparent);
}

.workshopPiece__seqMeta {
  font-size: 0.78rem;
  opacity: 0.8;
}

.workshopPiece__studioBtn {
  margin-top: 0.25rem;
}

.workshopPiece__status {
  margin: 0.75rem 0 0;
  font-size: 0.85rem;
  min-height: 1.25em;
  opacity: 0.85;
}

/* Studio — panneau degrés harmoniques */
.workshopStudio__harmonicBand {
  margin-top: 0.75rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 55%, transparent);
  background: color-mix(in srgb, var(--da-base, #f7f5f0) 92%, transparent);
}

.workshopStudio__harmonicHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.workshopStudio__harmonicControls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.workshopHarmonicSlots {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.workshopHarmonicSlot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
}

.workshopHarmonicSlot__roman {
  min-width: 2rem;
  font-weight: 700;
}

.workshopHarmonicSlot__degree,
.workshopHarmonicSlot__form,
.workshopHarmonicSlot__borrow {
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--da-line, #c8c0b4) 70%, transparent);
}

.workshopHarmonicSlot__borrow {
  width: 5.5rem;
}

.workshopStreamingLibraryRow__arrLink {
  font-size: 0.78rem;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--da-accent-ink, #fff);
  background: var(--da-accent, #4a6fa5);
}

.workshopPiece__grid.is-student .workshopPiece__timelineItem {
  cursor: default;
}

/* Bibliothèque morceaux enregistrés + mode édition */
.workshopPiece__savedLibrary {
  margin-bottom: 1rem;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 88%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--da-base, #fff) 96%, #eef4ff);
  overflow: hidden;
}

.workshopPiece__savedLibrarySummary {
  padding: 0.65rem 0.85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.workshopPiece__savedLibrarySummary::-webkit-details-marker {
  display: none;
}

.workshopPiece__savedLibraryBody {
  padding: 0 0.85rem 0.85rem;
}

.workshopPiece__savedLibraryHint {
  margin: 0 0 0.65rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #64748b;
}

.workshopPiece__savedLibraryToolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.workshopPiece__savedLibrarySearch {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 90%, transparent);
  font: inherit;
  font-size: 0.88rem;
}

.workshopPiece__savedLibraryCards {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: min(200px, 28vh);
  overflow-y: auto;
  padding-right: 0.15rem;
}

.workshopPiece__savedLibraryEmpty {
  margin: 0;
  padding: 0.65rem;
  font-size: 0.88rem;
  color: #64748b;
  text-align: center;
}

.workshopPiece__savedCard {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--da-line, #dbe3ef) 90%, transparent);
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.workshopPiece__savedCard:hover {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 45%, transparent);
}

.workshopPiece__savedCard.is-active {
  border-color: color-mix(in srgb, var(--da-accent, #6b8cae) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--da-accent, #6b8cae) 35%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 8%, #fff);
}

.workshopPiece__savedCardTitle {
  flex: 1 1 12rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
}

.workshopPiece__savedCardMeta {
  font-size: 0.78rem;
  color: #64748b;
}

.workshopPiece__savedCardDate {
  width: 100%;
  font-size: 0.74rem;
  color: #94a3b8;
}

.workshopPiece__editBanner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--da-accent, #6b8cae) 40%, transparent);
  background: color-mix(in srgb, var(--da-accent, #6b8cae) 10%, #fff);
}

.workshopPiece__editBannerKicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--da-accent, #6b8cae) 85%, #0f172a);
}

.workshopPiece__editBannerTitle {
  font-size: 1rem;
  color: #0f172a;
}

.workshopPiece__editBannerMeta {
  font-size: 0.82rem;
  color: #64748b;
}