/* Shared controls, desktop shell and feature layouts. Brand tokens live in theme.css. */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--font-ui);
}

button,input,select,textarea {
  font: inherit;
}

button,summary,.file-label {
  cursor: pointer;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 10px;
  padding: 10px 15px;
  min-height: 42px;
  color: inherit;
  background: transparent;
  line-height: 1.25;
}

button:hover {
  background: var(--soft);
}

button:disabled {
  opacity: .5;
  cursor: default;
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

input,select,textarea {
  border: 1px solid var(--control-line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--paper);
  padding: 8px 10px;
  min-height: 40px;
}

input[type=checkbox] {
  accent-color: var(--accent);
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
}

input[type=range] {
  accent-color: var(--accent);
  padding: 0;
}

h1,h2,h3,p {
  margin: 0;
}

h1,h2,h3 {
  font-family: var(--font-display);
  line-height: 1.35;
  letter-spacing: 0;
}

/* Mark dance titles explicitly, including names inside sentences and fields.
   General headings and chunk names must never inherit this role. */
.dance-name,#sheet-import .sheet-identity input.dance-name {
  font-family: var(--font-dance);
  font-weight: 700;
}

p {
  line-height: 1.5;
}

small {
  font-size: 12px;
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  vertical-align: middle;
  display: block;
}

.icon-button {
  width: 42px;
  padding: 10px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--paper);
}

.primary {
  background: var(--accent);
  color: #fff;
}

.primary:hover {
  background: var(--accent-hover);
}

.secondary {
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 13px;
}

.text-button {
  font-size: 13px;
  padding: 6px 8px;
  min-height: 36px;
  color: var(--accent);
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

#range-label {
  font-weight: 400;
}

.app-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--brand);
}

.brand>span {
  font-family: var(--font-brand);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}


/* Application layout and dance library */
.app-layout {
  max-width: 1440px;
  margin: auto;
  display: grid;
  grid-template-columns: 292px minmax(0,1fr);
  min-height: calc(100vh - 76px);
}

.library {
  padding: 30px 23px;
  background: var(--paper);
  border-right: 1px solid var(--line);
}

.dance-picker {
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  text-align: left;
  width: 100%;
  background: transparent;
  border: 1px solid var(--control-line);
  gap: 12px;
}

.dance-picker:hover {
  background: var(--soft);
  color: var(--accent);
}

.dance-picker>[data-icon] {display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:6px;background:var(--soft);color:var(--accent)}
.dance-picker>[data-icon]>.icon {width:18px;height:18px}

.dance-heading h1 {
  font-size: 24px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.dance-heading>p:last-child {
  font-size: 12px;
  color: var(--muted);
  margin: 3px 0 17px;
}

.library-tools {
  display: flex;
  gap: 8px;
}

.library-tools>.secondary {
  flex: 1;
  font-size: 12px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0 8px;
}

.section-heading h2 {
  font-size: 13px;
  letter-spacing: 0;
}

.section-heading>span {
  font-size: 11px;
  color: var(--muted);
}

.completion-track {
  height: 4px;
  border-radius: 4px;
  background: var(--track);
  margin-bottom: 13px;
  overflow: hidden;
}

.completion-track span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.chunk-list {
  display: grid;
  gap: 5px;
}

.chunk-row {
  display: flex;
  border: 1px solid transparent;
  border-radius: 12px;
  position: relative;
}

.chunk-row:has(.chunk-button[aria-pressed=true]) {
  background: var(--soft);
  border-color: var(--selected-line);
}

.chunk-row[data-connected=true] {
  background: var(--connected-bg);
  border-color: var(--connected-line);
}

.chunk-row[data-playing=true] {
  box-shadow: inset 3px 0 var(--accent);
  background: var(--playing-bg);
}

.chunk-button {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: 9px;
  text-align: left;
  justify-content: start;
  padding: 11px 7px;
  flex: 1;
  min-width: 0;
}

.chunk-button:hover {
  background: transparent;
}

.chunk-index {
  font-size: 10px;
  color: var(--muted);
  align-self: start;
  padding-top: 3px;
}

.chunk-button strong {
  display: block;
  font-family: var(--font-chunk);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.chunk-button small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

.chunk-check {
  width: 34px;
  min-height: 34px;
  padding: 6px;
  align-self: center;
  flex-shrink: 0;
}

.chunk-check>span {
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--control-line);
  border-radius: 50%;
}

.chunk-check[aria-pressed=true] {
  color: var(--accent);
}

.chunk-check .icon {
  width: 18px;
  height: 18px;
}

.full-dance {
  width: 100%;
  display: flex;
  gap: 12px;
  text-align: left;
  justify-content: space-between;
  background: var(--accent);
  color: #fff;
  padding: 17px 12px;
  margin-top: 22px;
}

.full-dance:hover {
  background: var(--accent-hover);
}

.full-dance>span:nth-child(2) {
  flex: 1;
}

.full-dance strong {
  display: block;
  font-size: 15px;
}

.full-dance small {
  display: block;
  font-size: 10px;
  color: var(--on-accent-muted);
  margin-top: 5px;
}

.full-dance[aria-pressed=true] {
  box-shadow: 0 0 0 3px var(--selected-ring);
}

.library-footer {
  padding-top: 24px;
}

.reminder-button {
  display: flex;
  width: 100%;
  text-align: left;
  justify-content: start;
  gap: 12px;
  padding: 10px 0;
  font-size: 12px;
}

.reminder-button:hover {
  background: transparent;
}

.reminder-button small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}

.library-footer>a {
  font-size: 11px;
  display: block;
  margin: 18px 0;
}

.backup-menu {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.backup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.file-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  min-height: 0;
  padding: 0;
}

.file-label:focus-within,.audio-picker:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}


/* Training workspace */
#training-workspace {
  padding: 30px 42px 28px;
  min-width: 0;
  max-width: 1000px;
}

.workspace-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.mode-switch {
  display: flex;
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--control-bg);
  border-radius: 14px;
  gap: 3px;
}

.mode-switch button {
  padding: 9px 17px;
  min-width: 132px;
  border-radius: 10px;
  justify-content: start;
  text-align: left;
  color: var(--muted);
}

.mode-switch strong {
  font-size: 13px;
  display: block;
}

.mode-switch small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  margin-top: 3px;
}

.mode-switch button[aria-pressed=true] {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 4px #25433b15;
}

.chunk-heading {
  margin: 29px 0 14px;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 7px;
}

.title-row h2 {
  font-family: var(--font-chunk);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  overflow-wrap: anywhere;
  min-width: 0;
}

.title-row h2[contenteditable="plaintext-only"] {
  cursor: text;
  outline: none;
  box-shadow: 0 2px 0 var(--accent);
  border-radius: 2px;
  min-width: 90px;
}

.title-row .icon-button {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 34px;
  min-height: 34px;
  padding: 7px;
}

.chunk-heading>p:last-child {
  font-size: 13px;
  color: var(--muted);
  margin-top: 7px;
}

.learning-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: end;
  margin: 20px 0 10px;
}

.tempo-field>span,.speed-control>span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 5px;
}

.tempo-field>div {
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding-right: 10px;
  font-size: 11px;
  color: var(--muted);
}

.tempo-field input {
  width: 75px;
  border: 0;
  min-height: 38px;
  font-size: 15px;
  font-weight: 600;
  padding: 7px 8px;
  background: transparent;
}

.speed-buttons {
  display: flex;
  gap: 3px;
  border: 1px solid var(--line);
  background: var(--control-bg);
  border-radius: 10px;
  padding: 3px;
}

.speed-buttons button {
  font-size: 12px;
  padding: 5px 11px;
  min-height: 32px;
  border-radius: 7px;
  color: var(--muted);
}

.speed-buttons button[aria-pressed=true] {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 3px #25433b10;
}

.pace-options {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#tempo-value {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 9px;
  border: 1px solid var(--selected-line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--accent);
}

.practice-settings {
  font-size: 11px;
  margin: 0 0 15px;
  color: var(--muted);
}

.practice-settings summary {
  padding: 6px 0;
  width: fit-content;
}

.practice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  border: 1px solid var(--line);
  padding: 15px;
  border-radius: 10px;
  margin-top: 6px;
  background: var(--paper);
  font-size: 12px;
}

.practice-options label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.practice-options select {
  font-size: 12px;
}

.transition-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--soft);
  border-radius: 10px;
  font-size: 11px;
  margin-bottom: 10px;
  color: var(--muted);
}

.transition-preview>span:not([data-icon]) {
  padding: 5px 8px;
  border-radius: 6px;
}

.transition-preview .current {
  background: var(--accent);
  color: white;
}

.transition-preview .icon {
  width: 15px;
  height: 15px;
}

.stage {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 22px var(--shadow);
}

#training-workspace[data-mode=practice] .stage {
  border-color: var(--selected-line);
}

.stage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 20px 0;
  gap: 8px;
}

.sequence-status {font-size:11px;line-height:1.4;color:var(--accent);background:var(--soft);border-radius:8px;padding:5px 9px;text-align:center;max-width:48%}
.custom-passage-dialog {width:min(540px,calc(100vw - 28px));padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink)}
.custom-passage-dialog form {display:grid;gap:16px}
.custom-passage-dialog label {display:grid;gap:6px;font-size:13px}
.custom-passage-dialog label:has(input[type=checkbox]) {display:flex;align-items:center;gap:8px}
.custom-passage-dialog [role=alert] {color:var(--coral)}
.sequence-status[hidden],.player-song-plan[hidden] {display:none}
.sequence-status[data-part]:not([data-part=body]) {box-shadow:inset 0 0 0 1px var(--accent)}
.player-song-plan {font-size:12px;color:var(--muted);margin:8px 0 14px;line-height:1.6}
.player-song-plan>summary {cursor:pointer;color:var(--accent);font-weight:500}
.player-song-plan ol {padding-left:20px;margin:8px 0}
.is-fullscreen .sequence-status {font-size:clamp(12px,1.1vw,17px);max-width:55%;padding:6px 12px}

.activity-light {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
}

.activity-light i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bc6555;
  box-shadow: 0 0 0 4px #bc655514;
}

.activity-light[data-state=dancing] i {
  background: #258460;
  box-shadow: 0 0 0 4px #2584601a;
}

.activity-light[data-state=count-in] i {
  background: #c8942e;
  box-shadow: 0 0 0 4px #c8942e17;
}

.wall-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wall-indicator>span {
  font-size: 10px;
  color: var(--muted);
}

.wall-indicator strong {
  font-size: 17px;
  letter-spacing: -.2px;
}

.floor-wrap {
  width: 100%;
}

#floor {
  width: 100%;
  height: 310px;
  display: block;
}

#floor text {
  font-family: inherit;
  font-size: 14px;
  fill: var(--ink);
}

#floor-grid circle {
  fill: var(--grid);
}

#floor-orientation text {
  font-size: 10px;
  fill: var(--muted);
}

#floor-motion {
  color: var(--accent);
}

#floor-hidden text {
  font-size: 22px;
  fill: var(--practice);
}

.cue-area {
  text-align: center;
  min-height: 85px;
  padding: 0 16px 15px;
}

#move-cue {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

#weight-cue {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

#hint {
  display: inline-flex;
  margin: 9px auto 0;
  min-height: 30px;
  font-size: 11px;
  padding: 5px 10px;
}

.stage-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
}

.left-key,.right-key {
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}

.left-key {
  color: var(--left);
}

.right-key {
  color: var(--right);
}

.weight-key,.free-key {
  width: 8px;
  height: 12px;
  border-radius: 6px;
  display: inline-block;
  margin-left: 10px;
  background: var(--muted);
}

.free-key {
  background: transparent;
  border: 1px solid var(--muted);
}

.lift-key {
  margin-left: 10px;
}

.rhythm {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  margin: 13px 0;
}

.counter {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 8px 12px;
}

.counter>span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.counter strong {
  font-family: var(--font-count);
  font-size: 27px;
  line-height: 1.4;
  font-weight: 650;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.counter small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.beat-dots {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

.beat-dots i {
  height: 3px;
  background: var(--track);
  flex: 1;
  border-radius: 3px;
}

.beat-dots i.active {
  background: var(--accent);
}

.counter-track {
  height: 3px;
  background: var(--track);
  margin-top: 5px;
  border-radius: 3px;
  overflow: hidden;
}

.counter-track i {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0;
}

.transport {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 15px 0 20px;
}

.play-button {
  min-width: 170px;
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
}

.transport>.secondary {
  min-height: 48px;
}

#pass-label {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}

.chunk-progress-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

#complete-chunk[aria-pressed=true] {
  color: var(--accent);
  border-color: var(--selected-line);
  background: var(--soft);
}

.review-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}

.review-toggle .icon {
  width: 15px;
  height: 15px;
}

.review-toggle:has(input:checked) {
  color: var(--coral);
}

.review-toggle input {
  accent-color: var(--coral);
}

#next-chunk {
  margin-left: auto;
  font-size: 12px;
}

#next-chunk .icon {
  width: 16px;
}

#progress-message {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--muted);
}

.music-settings {
  margin: 20px 0;
}

.music-settings summary {
  font-size: 13px;
  font-weight: 600;
}

.music-settings summary [data-icon] {
  display: inline-block;
  margin: 0 7px;
  vertical-align: middle;
}

.music-settings summary>span:last-child {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 12px;
}

.music-content {
  padding: 18px 0;
}

.sound-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
}

.sound-options label {
  display: flex;
  gap: 7px;
  align-items: center;
}

#tap-status {
  font-size: 11px;
  color: var(--muted);
}

.audio-picker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px dashed var(--control-line);
  border-radius: 10px;
  margin-top: 18px;
  position: relative;
  cursor: pointer;
  font-size: 13px;
}

.audio-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  min-height: 0;
  padding: 0;
}

#music-file-name {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 20px;
  overflow-wrap: anywhere;
}

.waveform-heading {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  margin: 17px 0 12px;
}

.waveform-heading strong {
  font-size: 14px;
}

.sheet-intro-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding: 12px;
  margin-top: 14px;
  border-radius: 10px;
  background: var(--connected-bg);
  font-size: 12px;
}

.sheet-intro-sync p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.waveform-heading p {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.waveform-heading label {
  display: grid;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
}

.waveform-heading select {
  font-size: 11px;
  min-height: 34px;
}

.waveform {
  position: relative;
  height: 142px;
  background: var(--connected-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  touch-action: none;
  cursor: crosshair;
}

.waveform canvas {
  width: 100%;
  height: 142px;
  border-radius: 12px;
}

.waveform-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  min-height: 0;
  padding: 0;
  width: 2px;
  border-radius: 0;
  background: var(--coral);
  transform: translateX(-1px);
  cursor: ew-resize;
  z-index: 2;
}

.waveform-marker:hover {
  background: var(--coral);
}

.waveform-marker span {
  position: absolute;
  top: 7px;
  left: 0;
  background: var(--coral);
  color: white;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 10px;
  transform: translateX(-50%);
}

.waveform-marker i {
  position: absolute;
  inset: 0 -14px;
}

.waveform-playhead {
  position: absolute;
  top: 40px;
  bottom: 0;
  width: 1px;
  background: var(--ink);
  pointer-events: none;
}

.waveform-ruler {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin: 4px 0;
}

.waveform-pan {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 10px;
  color: var(--muted);
  margin: 12px 0;
}

.waveform-pan input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 20px;
}

audio {
  width: 100%;
  height: 38px;
  margin: 10px 0;
}

.sync-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sync-actions .secondary {
  font-size: 11px;
}

.sync-actions label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
}

.sync-actions input {
  width: 86px;
  font-size: 12px;
}

.setting-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 12px;
}

.kindness-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}

.kindness-note [data-icon] {
  display: inline-flex;
  color: var(--accent);
}

.announcement {
  font-size: 12px;
  color: var(--accent);
  min-height: 22px;
  margin-top: 10px;
}


/* Library and shared dialogs */
dialog {
  border: 1px solid var(--line);
  border-radius: 20px;
  width: min(850px,95vw);
  max-height: 90vh;
  padding: 28px;
  background: var(--paper);
  color: var(--ink);
}

dialog::backdrop {
  background: #142b2566;
  backdrop-filter: blur(3px);
}

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

.dialog-heading h2 {
  font-size: 26px;
}

.dialog-heading .eyebrow {
  margin-bottom: 6px;
}

dialog p {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0;
}

#editor-error,#library-error {
  color: #9d302b;
}

.dance-library-list {
  display: grid;
  gap: 8px;
  margin: 18px 0;
}

.library-dance {
  display: flex;
  text-align: left;
  justify-content: space-between;
  border: 1px solid var(--line);
  padding: 16px;
  background: var(--bg);
}

.library-tabs {display:flex;gap:4px;margin:12px 0;background:var(--control-bg);padding:4px;border-radius:10px}
.library-tabs button {flex:1;font-size:13px;min-width:0}
.library-tabs button[aria-pressed=true] {background:var(--paper);color:var(--accent)}
.library-catalog-note {display:flex;align-items:center;gap:8px;margin:14px 0;font-size:12px;color:var(--muted)}
.library-catalog-note p {flex:1;margin:0}
.library-catalog-note button {flex-shrink:0}
.library-catalog-dance {display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.library-catalog-dance>div {flex:1;min-width:0;overflow-wrap:anywhere}
.library-catalog-dance strong {display:block}
.library-catalog-dance small {display:block;margin-top:5px;font-size:11px;color:var(--muted)}
.library-catalog-dance p {margin:7px 0 0}
.library-catalog-dance>button {flex-shrink:0}
#save-status[data-state=error],.save-error {color:var(--coral)}
.save-error {font-size:12px;line-height:1.5;margin:10px 0}
@media(max-width:540px) {
  .library-catalog-dance {align-items:stretch;flex-direction:column;gap:10px;padding:12px}
  .library-catalog-dance>button {align-self:flex-start}
  .library-source-row .library-source {display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:3px 8px}
  .library-source strong {grid-column:1;grid-row:1}
  .library-source small {grid-column:1;grid-row:2;font-size:11px}
  .library-source>.icon {grid-column:2;grid-row:1 / span 2}
}

.library-dance>span:nth-child(2) {
  flex: 1;
}

.library-dance strong {
  font-size: 15px;
  display: block;
  overflow-wrap: anywhere;
}

.library-dance small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
}

.library-dance-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--soft);
  color: var(--accent);
  border-radius: 10px;
}

.library-dance[aria-pressed=true] {
  border-color: var(--selected-line);
}

.import-area {
  border: 1px dashed var(--control-line);
  padding: 20px;
  border-radius: 14px;
  margin-top: 22px;
}

.import-area h3 {
  font-size: 17px;
}

.import-area .file-label {
  padding: 10px 15px;
}

.import-preview {
  margin-top: 14px;
  padding: 16px;
  background: var(--soft);
  border-radius: 10px;
}

.drag-over {
  background: var(--soft);
}

[hidden] {
  display: none!important;
}


/* Responsive layout */
@media(max-width:1050px) {

/* Application layout and dance library */
  .app-layout {
    grid-template-columns: 260px minmax(0,1fr);
  }

/* Training workspace */
  #training-workspace {
    padding: 26px;
  }
  .library {
    padding: 26px 18px;
  }
  .workspace-top {
    align-items: start;
  }
  .learning-controls {
    gap: 12px;
  }
  #tempo-value {
    max-width: 70px;
  }
  .chunk-progress-actions {
    gap: 8px;
  }
  #next-chunk {
    margin-left: 0;
  }
}

/* Floating phone tools reuse the original sidebar and reminder trigger. */
.mobile-only {display:none}
.mobile-sheet-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px 0}
.mobile-sheet-heading h2 {font-size:20px}
.mobile-sheet-heading .icon-button {border:0;background:transparent}
.mobile-chunks {padding:0;width:min(460px,calc(100vw - 20px));max-height:calc(100dvh - 28px);overscroll-behavior:contain}
.mobile-chunks .library {border:0;padding:18px;background:transparent}
.mobile-chunks .section-heading {margin-top:20px}
.mobile-chunks .chunk-list {grid-template-columns:1fr}
.mobile-chunks .chunk-button strong {font-size:14px}
.mobile-chunks .chunk-button small {font-size:12px}
.mobile-chunks .chunk-check {width:38px;min-height:44px}
.mobile-chunks .chunk-index {font-size:11px}
.mobile-chunks .button-tooltip {left:auto;right:0;transform:none}

@media(max-width:720px) {
  .mobile-only {display:flex}
  .app-header {min-height:62px;padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-bottom:0;background:var(--bg)}
  .brand {gap:9px}
  .brand>span {font-size:26px}
  .brand-mark {width:27px;height:35px}
  #mobile-dictionary {border:0;background:transparent;color:var(--muted)}
  .app-layout {display:block;min-height:0}
  .library {border:0}
  .mobile-chunks .library {padding:8px 18px 20px}
  .mobile-chunks .library-footer {display:block;padding-top:15px}
  .mobile-chunks .library-footer>a {margin:14px 0;font-size:12px}
  .mobile-chunks .backup-menu {font-size:12px;padding-top:14px;border-top:1px solid var(--line)}
  .mobile-chunks .chunk-button {padding:12px 8px;grid-template-columns:23px minmax(0,1fr);gap:9px}
  .mobile-chunks .full-dance {margin-top:18px}
  .mobile-song {align-self:stretch;justify-content:space-between;gap:10px;text-align:left;padding:0 2px;min-height:36px;font-size:16px;color:var(--muted);margin-bottom:8px}
  .mobile-song .icon {width:15px;height:15px}
  .mobile-tools {position:fixed;z-index:20;bottom:calc(14px + env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));justify-content:space-between;align-items:end;gap:12px;pointer-events:none}
  .mobile-tools>button,.mobile-tools>div {pointer-events:auto;min-width:0}
  .mobile-tools button {display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:11px 14px;width:auto;border:1px solid var(--selected-line);border-radius:24px;background:var(--paper);box-shadow:0 4px 18px #3029381c;color:var(--accent);font-size:12px;font-weight:500;position:relative}
  .mobile-tools button:hover,.mobile-tools button[aria-expanded=true] {background:var(--soft)}
  .mobile-tools .review-badge {position:absolute;top:-5px;right:-4px;margin:0;min-width:20px;height:20px;font-size:11px;padding:0 5px;border:2px solid var(--paper)}
  .has-fullscreen-player .mobile-tools {display:none}

/* Training workspace */
  #training-workspace {
    padding: 23px 18px;
    width: 100%;
    max-width: none;
  }
  .workspace-top {
    display: block;
  }
  .mode-switch {
    width: 100%;
  }
  .mode-switch button {
    flex: 1;
    min-width: 0;
    justify-content: center;
    padding: 8px 9px;
  }
  .mode-switch .icon {
    width: 17px;
  }
  .chunk-heading {
    margin-top: 23px;
  }
  .title-row h2 {
    font-size: 28px;
  }
  .learning-controls {
    flex-wrap: wrap;
    gap: 12px;
  }
  .tempo-field input {
    width: 66px;
  }
  .speed-buttons button {
    font-size: 11px;
    padding: 5px 9px;
  }
  #tempo-value {
    max-width: none;
    font-size: 11px;
    margin: 0;
    text-align: left;
  }
  .stage {
    border-radius: 16px;
  }
  .stage-top {
    padding: 15px 14px 0;
  }
  .wall-indicator strong {
    font-size: 16px;
  }
  .cue-area {
    min-height: 75px;
  }
  #move-cue {
    font-size: 19px;
  }
  .stage-legend {
    padding: 10px 5px;
    font-size: 9px;
    gap: 4px;
  }
  .left-key,.right-key {
    margin-left: 4px;
  }
  .counter {
    padding: 10px 12px;
  }
  .counter strong {
    font-family: var(--font-count);
    font-size: 24px;
    gap: 4px;
  }
  .counter small {
    font-size: 10px;
  }
  .rhythm {
    gap: 6px;
  }
  .transport {
    gap: 8px;
    flex-wrap: wrap;
  }
  .play-button {
    flex: 1;
    min-width: 145px;
  }
  .transport>.secondary {
    font-size: 12px;
  }
  .transport>#pass-label {
    flex-basis: 100%;
    text-align: center;
    margin-top: 3px;
  }
  .chunk-progress-actions {
    gap: 10px;
  }
  .chunk-progress-actions>.secondary {
    font-size: 12px;
    padding: 10px;
  }
  .review-toggle {
    font-size: 11px;
  }
  #next-chunk {
    margin-left: auto;
  }
  .music-settings summary>span:last-child {
    display: block;
    margin: 6px 0 0 23px;
    overflow-wrap: anywhere;
  }
  .waveform-heading {
    flex-wrap: wrap;
  }
  .waveform-heading label {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .sync-actions {
    gap: 8px;
  }
  .waveform-pan {
    font-size: 9px;
    gap: 8px;
  }
  .waveform-pan input {
    flex: 1;
  }
  .sync-actions label {
    flex-basis: 100%;
  }

  /* Training first; the compact controls remain available below the player. */
  #training-workspace {display:flex;flex-direction:column;padding:0 16px calc(90px + env(safe-area-inset-bottom));}
  .chunk-heading {margin:19px 0 12px}
  .learning-controls {margin:14px 0 8px}
  .practice-settings {margin-bottom:12px;font-size:12px}
  .chunk-terms {margin:0 0 14px}
  #choose-review-chunks {align-self:flex-start}
  .mode-switch {border:0;border-radius:13px}
  .mode-switch button {min-height:42px;font-size:14px}
  .mode-switch strong {font-size:14px}
  .mode-switch small,.mode-switch .icon {display:none}
  .title-row {gap:4px;margin-top:5px}
  .title-row h2 {font-size:28px;flex:1}
  .title-row .icon-button {width:36px;min-height:40px}
  .chunk-heading>.eyebrow {font-size:12px}
  .stage {border-radius:18px;box-shadow:none}
  .stage-legend {font-size:11px;padding:10px 8px;line-height:1.5}
  .rhythm {gap:8px;margin:10px 0}
  .counter {padding:7px 4px}
  .counter>span {font-size:11px}
  .counter small {font-size:12px}
  .transport {margin:10px 0 14px}
  .transport>.play-button {min-height:51px;font-size:16px}
  .play-button {scroll-margin-bottom:calc(90px + env(safe-area-inset-bottom))}
  .transport>.secondary {min-width:51px;min-height:51px;padding:12px}
  .transport .transport-label {display:none}
  #pass-label {font-size:11px}
  #tempo-value {font-size:11px}
  .tempo-field>span,.speed-control>span {font-size:11px}
  .speed-buttons button {min-height:36px}
  input:not([type=checkbox]):not([type=range]),select,textarea {font-size:16px}
  .chunk-progress-actions {gap:12px}
  .review-toggle {font-size:12px}
  #next-chunk {font-size:12px}

/* Library and shared dialogs */
  dialog {
    padding: 18px;
    border-radius: 16px;
  }
  .dialog-heading h2 {
    font-size: 23px;
  }
  .import-area {
    padding: 14px;
  }
  .mobile-chunks {padding:0;margin:auto 0 0;width:100%;max-width:none;max-height:88vh;max-height:88dvh;border-radius:22px 22px 0 0}
  .mobile-sheet-heading {position:sticky;top:0;z-index:1;background:var(--paper);border-bottom:1px solid var(--line);padding-bottom:10px}
}

/* Discrete display/overlay transitions keep native dialog dismissal and focus
   behavior intact while the sheet leaves the top layer. Older browsers snap. */
@media(max-width:720px) and (prefers-reduced-motion:no-preference) {
  .mobile-chunks {
    transform: translateY(100%);
    transition: transform .24s cubic-bezier(.2,.8,.2,1),
      display .24s allow-discrete, overlay .24s allow-discrete;
  }
  .mobile-chunks[open] {transform:translateY(0)}
  .mobile-chunks::backdrop {
    opacity: 0;
    transition: opacity .24s ease, display .24s allow-discrete, overlay .24s allow-discrete;
  }
  .mobile-chunks[open]::backdrop {opacity:1}
  @starting-style {
    .mobile-chunks[open] {transform:translateY(100%)}
    .mobile-chunks[open]::backdrop {opacity:0}
  }
}

@media(prefers-reduced-motion:no-preference) {
  .completion-track span,.counter-track i {
    transition: width .16s;
  }
  .beat-dots i {
    transition: background .1s;
  }
  .chunk-row {
    transition: background .15s;
  }
}


/* Step dictionary */
.chunk-terms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: -7px 0 17px;
  font-size: 11px;
  color: var(--muted);
}

.step-link {
  min-height: 32px;
  padding: 4px 9px;
  background: var(--soft);
  color: var(--accent);
  font-size: 12px;
  text-align: left;
}

.dictionary-search {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
}

.dictionary-search input {
  width: 100%;
  min-width: 0;
}

.dictionary-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
  font-size: 11px;
  color: var(--muted);
}

.dictionary-filter-row label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dictionary-body {
  display: grid;
  grid-template-columns: 190px minmax(0,1fr);
  gap: 22px;
}

.dictionary-list {
  display: grid;
  align-content: start;
  gap: 4px;
  max-height: 53vh;
  overflow: auto;
  padding: 3px;
}

.dictionary-list button {
  display: grid;
  grid-template-columns: minmax(0,1fr) 16px;
  justify-items: start;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 8px 9px;
  font-size: 12px;
}

.dictionary-list button[aria-pressed=true] {
  background: var(--soft);
  border-color: var(--selected-line);
}

.dictionary-context-icon {
  display: inline-flex;
  flex-shrink: 0;
  justify-self: end;
  color: var(--accent);
}

.dictionary-context-icon .icon {
  width: 16px;
  height: 16px;
}

.dictionary-detail {
  min-width: 0;
}

.dictionary-detail h3 {
  margin: 0;
  font-size: 23px;
  letter-spacing: -.4px;
}

.dictionary-detail .dictionary-memory {
  font-size: 17px;
  color: var(--accent);
  margin: 6px 0 10px;
}

.dictionary-example-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
  margin: 18px 0 10px;
}

.dictionary-example-heading label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dictionary-example-heading select {
  font-size: 12px;
  min-height: 32px;
  padding: 4px 8px;
}

.dictionary-example {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(115px,1fr));
  gap: 8px;
}

.dictionary-example li {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.dictionary-count {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dictionary-action {
  font-size: 12px;
  flex: 1;
}

.reference-diagram {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.reference-diagram svg {
  display: block;
  width: 100%;
  height: 128px;
  overflow: visible;
}

.reference-diagram figcaption {
  font-size: 10px;
  color: var(--accent);
  text-align: center;
  margin-top: 1px;
  line-height: 1.3;
}

.dictionary-detail .dictionary-view-key {
  font-size: 10px;
  color: var(--muted);
  margin: 0 0 8px;
}

.dictionary-feet {
  display: flex;
  gap: 6px;
}

.dictionary-foot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 32px;
  border: 2px solid var(--left);
  color: var(--left);
  border-radius: 11px;
  font-size: 10px;
  font-weight: 600;
}

.dictionary-foot[data-foot=R] {
  border-color: var(--right);
  color: var(--right);
}

.dictionary-foot[data-bearing=true] {
  background: var(--left);
  color: var(--paper);
}

.dictionary-foot[data-foot=R][data-bearing=true] {
  background: var(--right);
  color: var(--paper);
}

.dictionary-example small {
  font-size: 10px;
  color: var(--muted);
}

.dictionary-detail .dictionary-legend {
  font-size: 10px;
  margin: 8px 0;
}

.dictionary-detail .dictionary-note {
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

.dictionary-related {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin: 16px 0;
}

.dictionary-sources {
  font-size: 11px;
  color: var(--muted);
  margin-top: 16px;
}

.dictionary-sources ul {
  padding-left: 18px;
}

.dictionary-sources li {
  margin: 6px 0;
  overflow-wrap: anywhere;
}

@media(max-width:680px) {
  .dictionary-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dictionary-list {
    max-height: 150px;
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .dictionary-list button {
    overflow-wrap: anywhere;
  }
  .dictionary-detail h3 {
    font-size: 21px;
  }
  .dictionary-example {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}


/* Audio calibration and accessibility helpers */
.waveform-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.waveform-tools .text-button {
  font-size: 10px;
}

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

.waveform-tempo {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  background: var(--soft);
  border-radius: 5px;
  padding: 3px 6px;
  margin-left: 8px;
  white-space: nowrap;
}


/* Dance editor */
#edit-dance {
  position: relative;
}

.button-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 9px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: 6px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  z-index: 5;
}

#edit-dance:hover .button-tooltip,#edit-dance:focus-visible .button-tooltip {
  visibility: visible;
  opacity: 1;
}

#editor {
  --editor-padding: 28px;
  padding: var(--editor-padding);
  width: min(960px,calc(100vw - 32px));
  max-height: 90vh;
  overflow: auto;
}

#editor .dialog-heading {
  flex-wrap: wrap;
}

#editor .dialog-heading>div:first-child {
  flex: 1 1 200px;
  min-width: 0;
}

#editor .dialog-heading p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

.editor-dialog-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-left: auto;
}

.editor-chunk-picker {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
  margin: 16px 0;
}

#editor-chunk-button {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: left;
  font-size: 13px;
}

#editor-chunk-current {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

#editor-chunk-current-size {
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}

.editor-field-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
}

.editor-metadata-field {
  margin-top: 10px;
}

.editor-metadata-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

#editor-chunk-name {
  font-size: 18px;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.editor-metadata-row .icon-button {
  flex-shrink: 0;
  width: 34px;
  min-height: 34px;
  padding: 7px;
  color: var(--muted);
}

.editor-metadata-row [contenteditable] {
  min-width: 80px;
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.editor-description-field {
  background: var(--bg);
  border-radius: 9px;
  padding: 7px 10px;
  margin: 10px 0 17px;
}

#editor-chunk-description {
  margin: 0;
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.editor-counts-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.editor-counts-heading>div {
  margin-right: auto;
}

.editor-counts-heading h3 {
  font-size: 15px;
  margin: 0;
}

#editor-chunk-size {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.editor-counts-heading button {
  font-size: 12px;
  min-height: 36px;
  padding: 8px 10px;
}

#editor-add-position {
  color: var(--muted);
  font-size: 10px;
}

.editor-structure-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 8px;
  padding: 8px;
  background: var(--soft);
  border-radius: 10px;
}

.editor-structure-tools button {
  font-size: 12px;
  min-height: 34px;
  padding: 7px 9px;
}

#editor-selection-count {
  color: var(--accent);
  font-size: 11px;
  margin: 0 5px;
}

#editor-clear-selection {
  margin-left: auto;
}

.editor-delete {
  color: var(--coral);
}

.editor-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  border-left: 3px solid var(--accent);
  background: var(--soft);
  padding: 5px 10px;
  margin: 10px 0;
  font-size: 11px;
  color: var(--ink);
}

.editor-notice button {
  font-size: 11px;
  padding: 5px;
  min-height: 30px;
}

.editor-storyboard-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 11px 0 6px;
}

.editor-storyboard {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: start;
  gap: 11px;
  padding: 4px 4px 12px;
  margin: 0 -4px 15px;
}

.editor-beat {
  min-width: 0;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
  padding: 6px;
}

.editor-beat[data-selected=true] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--soft);
}

.editor-beat-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 0 2px 5px;
}

.editor-beat-heading label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
}

.editor-count-digit {
  font-size: 26px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.editor-drag-handle,.editor-chunk-grip {
  cursor: grab;
  touch-action: none;
  min-height: 32px;
  width: 28px;
  padding: 4px;
  color: var(--muted);
}

.editor-beat-steps {
  display: grid;
  gap: 5px;
}

.is-dragging,.is-dragging * {
  cursor: grabbing;
  user-select: none;
}

.is-dragged {
  opacity: .45;
}

.editor-beat[data-drop]::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
  border-radius: 3px;
}

.editor-beat[data-drop=before]::before {
  left: -8px;
}

.editor-beat[data-drop=after]::before {
  right: -8px;
}

.editor-beat[data-added=true] {
  outline: 2px solid #d6a13f;
  outline-offset: 2px;
}

@media(prefers-reduced-motion:no-preference) {
  .editor-beat[data-added=true] {
    animation: editor-count-added .5s ease-out;
  }
}

@keyframes editor-count-added {
  from {
    opacity: .3;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.editor-count {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 4px;
  width: 100%;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 8px;
  border-radius: 7px;
}

.editor-count strong {
  font-size: 11px;
  font-weight: 600;
}

.editor-count-cue {
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.editor-count .reference-diagram svg {
  height: 84px;
}

.editor-count[aria-pressed=true] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.editor-count[data-playing=true] {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.editor-count[data-placeholder=true] {
  border-style: dashed;
}

.editor-weight-badges {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
}

.editor-foot-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 22px;
  border-radius: 8px;
  color: white;
  font-weight: 600;
}

.editor-foot-badge.is-left {
  background: var(--left);
}

.editor-foot-badge.is-right {
  background: var(--right);
}

.editor-editing {
  border-top: 1px solid var(--line);
  padding-top: 17px;
}

.editor-editing h3 {
  font-size: 18px;
  margin: 0;
}

.editor-step-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 13px;
}

.editor-step-heading h3 {
  margin-right: auto;
}

.editor-step-heading button {
  font-size: 12px;
  min-height: 34px;
  padding: 7px;
}

.editor-action-row,.editor-choices,.editor-foot-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
}

.editor-action-row select {
  font-size: 12px;
  max-width: 100%;
}

.editor-choice {
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  padding: 8px 11px;
  min-height: 38px;
}

.editor-choice[aria-pressed=true] {
  background: var(--soft);
  color: var(--accent);
  border-color: var(--accent);
}

.editor-foot-row {
  margin: 12px 0;
  color: var(--muted);
  font-size: 11px;
  gap: 13px;
}

.editor-fine-tune {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0;
}

.editor-fine-tune summary {
  padding: 7px 0;
  width: fit-content;
}

.editor-fine-tune>label {
  display: grid;
  gap: 5px;
  margin: 12px 0;
}

.editor-fine-tune input {
  width: 100%;
}

.editor-fine-tune select {
  width: fit-content;
  font-size: 12px;
}

.editor-turn-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 15px 0 8px;
  font-size: 11px;
}

.editor-direction-pad {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
  max-width: 420px;
  margin: 8px 0;
}

#editor-placement>p {
  font-size: 11px;
  margin-top: 15px;
}

.editor-direction-pad button {
  font-size: 11px;
  padding: 8px 5px;
}

.editor-preview-tools {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 17px 0 9px;
  margin-top: 17px;
}

.editor-preview-tools>span {
  font-size: 11px;
  color: var(--muted);
}

#editor-preview-status {
  margin-left: auto;
}

.editor-preview {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 12px;
  margin: 6px 0 12px;
  padding: 13px;
}

.editor-preview-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.editor-preview-caption small {
  color: var(--muted);
  margin-left: auto;
  font-size: 11px;
}

#editor-preview-floor {
  width: 100%;
  display: block;
  color: var(--muted);
  font-size: 12px;
}

#editor-preview-floor [data-floor-layer=grid] {
  fill: var(--line);
}

#editor-preview-floor [data-floor-layer=feet] text {
  fill: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.editor-change-summary {
  font-size: 12px;
  color: var(--accent);
  margin-top: 13px;
}

.editor-footer {
  position: sticky;
  bottom: calc(0px - var(--editor-padding));
  z-index: 2;
  background: var(--paper);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 12px 0 16px;
  margin-top: 16px;
}

.editor-footer>button:first-child {
  margin-right: auto;
}

/* Native popovers stay within the editor's draft and dismiss without applying proposals. */
.editor-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(460px,calc(100vw - 32px));
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 40px #233c3729;
  font-size: 13px;
}

.editor-popover-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.editor-popover-heading h3 {
  margin: 0;
  font-size: 16px;
}

.editor-popover-heading .icon-button {
  width: 32px;
  min-height: 32px;
  padding: 6px;
}

#editor .editor-popover-note {
  font-size: 11px;
  color: var(--muted);
  margin: 5px 0 10px;
}

.editor-chunk-popover {
  width: min(560px,calc(100vw - 32px));
}

.editor-chunk-list {
  max-height: min(52vh,420px);
  overflow-y: auto;
  padding: 3px;
}

.editor-picker-row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 30px;
  gap: 3px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}

.editor-picker-row:last-child {
  border-bottom: 0;
}

.editor-picker-choice {
  text-align: left;
  padding: 8px;
  min-width: 0;
  justify-content: flex-start;
  width: 100%;
  gap: 12px;
}

.editor-picker-choice[aria-pressed=true] {
  background: var(--soft);
  color: var(--accent);
}

.editor-picker-index {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  min-width: 24px;
}

.editor-picker-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.editor-picker-copy strong {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.editor-picker-copy small {
  color: var(--muted);
  font-size: 11px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editor-picker-count {
  color: var(--muted);
  background: var(--bg);
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 6px;
}

.editor-picker-row>.icon-button {
  width: 28px;
  min-height: 32px;
  padding: 4px;
}

.editor-picker-row-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editor-picker-row-actions .icon-button {
  width: 28px;
  min-height: 24px;
  padding: 3px;
}

.editor-picker-row-actions .icon {
  width: 14px;
  height: 14px;
}

.editor-picker-row[data-drop]::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
}

.editor-picker-row[data-drop=before]::before {
  top: 0;
}

.editor-picker-row[data-drop=after]::before {
  bottom: 0;
}

.editor-action-menu {
  width: min(290px,calc(100vw - 32px));
  padding: 6px;
}

.editor-action-menu>button {
  display: flex;
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  font-size: 12px;
}

.editor-action-menu kbd {
  font: inherit;
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}

.editor-operation label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  min-width: 0;
  margin: 10px 0;
}

.editor-operation input,.editor-operation select {
  min-width: 0;
  width: 100%;
  font-size: 13px;
}

.editor-destination-fields {
  display: grid;
  grid-template-columns: minmax(0,1fr) 110px;
  gap: 8px;
}

.editor-comparison {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

.editor-mini-chunks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-chunk-mini {
  flex: 1 1 110px;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.editor-chunk-mini strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}

.editor-chunk-mini small {
  font-size: 10px;
  color: var(--muted);
}

.editor-comparison>div:last-child .editor-chunk-mini {
  background: var(--soft);
}

#editor .editor-operation-warning {
  color: var(--coral);
  font-size: 12px;
}

#editor-operation-error {
  color: var(--coral);
  font-size: 12px;
}

#editor-operation-error:empty {
  display: none;
}

.editor-operation-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
}

.editor-operation-footer button {
  font-size: 12px;
}

@media(max-width:760px) {
  .editor-storyboard {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px) {
  #editor {
    --editor-padding: 18px;
  }
}

@media(max-width:580px) {
  .editor-metadata-row {
    align-items: flex-start;
  }
  .editor-counts-heading {
    gap: 5px;
  }
  .editor-counts-heading button {
    font-size: 11px;
    padding: 7px;
  }
  #editor-add-position {
    font-size: 9px;
  }
  .editor-step-heading h3 {
    flex-basis: 100%;
  }
  #editor-preview-status {
    flex-basis: 100%;
    margin-left: 0;
  }
  .editor-preview-caption small {
    margin-left: 0;
  }
  .editor-destination-fields {
    grid-template-columns: minmax(0,1fr);
    gap: 0;
  }
}

@media(pointer:coarse) {
  .editor-drag-handle {
    min-height: 40px;
    width: 36px;
  }
  .editor-picker-row {
    grid-template-columns: 40px minmax(0,1fr) 40px;
  }
  .editor-picker-row>.icon-button {
    width: 40px;
    min-height: 40px;
  }
  .editor-picker-row-actions .icon-button {
    width: 40px;
    min-height: 32px;
  }
}


/* Practice reminders and song-start controls */
.review-badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.music-start-setting {
  display: grid;
  gap: 6px;
  margin: 12px 0 18px;
  padding: 0;
  min-width: 0;
  border: 0;
  font-size: 11px;
  color: var(--muted);
}

.music-start-setting legend {
  padding: 0;
  margin-bottom: 6px;
}

.music-start-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-bg);
}

.music-start-switch button {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  font-size: 12px;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--muted);
}

.music-start-switch button[aria-pressed=true] {
  background: var(--paper);
  color: var(--accent);
  box-shadow: 0 1px 3px #25433b15;
}



.practice-option-note {
  flex-basis: 100%;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
}

.practice-options label {
  flex-wrap: wrap;
  max-width: 100%;
}

.practice-options select {
  min-width: 0;
  max-width: 100%;
}

#fade-repeats {
  width: 55px;
  min-height: 34px;
  padding: 6px;
  font-size: 12px;
}

.contact-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 2px solid var(--coral);
  border-radius: 50%;
  margin-left: 10px;
}

.review-badge[hidden] {
  display: none;
}

.review-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  max-width: calc(100vw - 24px);
  padding: 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 35px #233c372b;
  overflow: visible;
}

.review-popover::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--paper);
  border: 1px solid var(--line);
}

.review-popover[data-placement=right]::before {
  left: -6px;
  top: var(--reminder-arrow-y);
  border-right: 0;
  border-top: 0;
}

.review-popover[data-placement=below]::before {
  top: -6px;
  left: var(--reminder-arrow-x);
  border-right: 0;
  border-bottom: 0;
}

.review-popover[data-placement=above]::before {
  bottom: -6px;
  left: var(--reminder-arrow-x);
  border-left: 0;
  border-top: 0;
}

.review-popover-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.review-popover-heading h3 {
  font-size: 18px;
  letter-spacing: -.3px;
}

.review-popover-heading .icon-button {
  border: 0;
  background: transparent;
  width: 36px;
  min-height: 36px;
  padding: 8px;
}

.review-instructions {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 12px;
}

.review-instructions strong {
  font-weight: 600;
  color: var(--accent);
}

.review-list {
  display: grid;
  max-height: min(360px,calc(100dvh - 235px));
  overflow: auto;
  padding: 5px 4px;
  margin-top: 8px;
  gap: 3px;
}

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

.review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 8px;
  padding: 11px 8px;
  border-radius: 9px;
  flex: 1;
  min-width: 0;
}

.review-item>span {
  min-width: 0;
}

.review-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.review-dance-tag {
  display: table;
  max-width: 100%;
  font-size: 10px;
  background: var(--soft);
  color: var(--accent);
  padding: 3px 6px;
  border-radius: 5px;
  margin: 6px 0;
  overflow-wrap: anywhere;
}

.review-item small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.review-item>.icon {
  width: 17px;
  color: var(--muted);
}

.review-done {
  flex-shrink: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 44px;
  min-height: 54px;
  padding: 5px;
  font-size: 10px;
  color: var(--accent);
}

.review-done>span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--selected-line);
  border-radius: 7px;
  background: var(--soft);
}

.review-done .icon {
  width: 16px;
  height: 16px;
}

.review-empty {
  font-size: 12px;
  padding: 16px 2px 5px;
  color: var(--muted);
  line-height: 1.6;
}

.review-empty strong {
  font-weight: 500;
  color: var(--ink);
}

.review-empty p {
  margin-top: 7px;
  font-size: 11px;
}

.review-unavailable {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
}

.review-queue-error {
  font-size: 11px;
  color: var(--coral);
  margin-top: 8px;
}

.review-queue-error:empty {
  display: none;
}

@media(pointer:coarse) {
  .review-popover-heading .icon-button {
    width: 44px;
    min-height: 44px;
  }
}

/* Bounded review sessions and explicit reminders */
.dance-milestone {
  font-size:  11px;
  color:  var(--accent);
  margin:  0 0 12px;
}

.review-dance {
  border-bottom:  1px solid var(--line);
  padding:  6px 0;
}

.review-dance>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 4px;
  list-style: none;
}

.review-dance>summary>.icon {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.review-dance[open]>summary>.icon {
  transform: rotate(180deg);
}

.review-dance>summary strong {
  font-size: 13px;
  overflow-wrap: anywhere;
  flex: 1;
}

.review-dance>summary span {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.review-dance-body {
  padding: 0 0 6px;
}

.review-session-start {
  width: 100%;
  min-height: 36px;
  padding: 8px;
  font-size: 12px;
  margin-bottom: 5px;
}

.review-session-start .icon {
  width: 16px;
  height: 16px;
}

.review-defer-menu {
  font-size: 10px;
  color: var(--muted);
  padding: 5px 8px;
}

.review-defer-menu>summary {
  padding: 5px 0;
}

.review-defer-menu .text-button {
  font-size: 11px;
}

.review-deferred {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
}

.review-deferred>span {
  flex: 1;
  min-width: 0;
}

.review-deferred strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.review-deferred small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.review-session,.reminder-suggestion {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  border: 1px solid var(--selected-line);
  background: var(--soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.review-session>div {
  flex: 1;
  min-width: 150px;
}

.review-session strong {
  display: block;
  font-size: 13px;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.review-session p,.reminder-suggestion p {
  font-size: 11px;
  color: var(--muted);
}

.reminder-suggestion {
  margin: 12px 0;
}

.reminder-suggestion p {
  flex: 1;
  min-width: 160px;
}

.review-session .text-button,.reminder-suggestion .text-button {
  font-size: 11px;
}

.reminder-targets {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 18px;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--selected-line);
  border-radius: 14px;
  box-shadow: 0 10px 35px #233c372b;
}

.reminder-targets h3 {
  font-size: 17px;
}

.reminder-targets>p {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 12px;
}

#reminder-target-list {
  display: grid;
  gap: 4px;
}

#reminder-target-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 9px 4px;
  cursor: pointer;
}

#reminder-target-list span {
  overflow-wrap: anywhere;
}

#reminder-target-list small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.reminder-target-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.reminder-target-actions button {
  font-size: 12px;
}

.review-more>summary {
  font-size: 11px;
  color: var(--accent);
  padding: 9px 8px;
}



/* Session planning, assessment and a persistent daily stopping point. */
#review-session-overview {
  width: 560px;
}
#review-session-overview .dialog-heading {
  align-items: start;
}
#review-overview-dance {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.review-goal-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  background: var(--connected-bg);
  border-radius: 10px;
  padding: 12px;
  margin: 20px 0 14px;
  font-size: 13px;
}
.review-goal-setting small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}
#review-session-size {
  width: 66px;
}
#review-overview-summary {
  color: var(--muted);
  font-size: 12px;
}
#review-overview-plan {
  margin: 15px 0;
  padding-left: 24px;
  display: grid;
  gap: 10px;
}
#review-overview-plan li {
  padding: 10px 12px;
  background: var(--soft);
  border-radius: 9px;
}
#review-overview-plan strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
#review-overview-plan small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
#review-overview-error {
  color: var(--coral);
  font-size: 12px;
}
.review-overview-actions,.review-session-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.review-overview-actions {
  margin-top: 18px;
}
.review-session>.review-session-actions {
  flex: 0 1 auto;
}
#review-session-route {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 9px 0 0;
}
#review-session-route li {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 10px;
  overflow-wrap: anywhere;
}
#review-session-route li[data-state=current] {
  color: var(--accent);
  border-color: var(--accent);
}
#review-session-route li[data-state=done] {
  opacity: .7;
}
.review-finished {
  padding: 13px 5px;
  border-bottom: 1px solid var(--line);
}
.review-finished>strong {
  display: block;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.review-finished>small {
  display: block;
  color: var(--accent);
  font-size: 11px;
  margin: 4px 0;
}
.review-finished>div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.review-finished .text-button {
  font-size: 11px;
}
.review-finished .icon {
  width: 16px;
  height: 16px;
}

/* The same player expands: no copied counters, footwork scene or playback controls. */
.stage-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fullscreen-toggle {
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: var(--muted);
}
body.has-fullscreen-player {
  overflow: hidden;
}
.practice-player.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(72px,10vw,144px);
  grid-template-rows: minmax(0,1fr) auto;
  gap: clamp(8px,2vw,28px);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background: var(--paper);
  color: var(--ink);
}
.practice-player.is-fullscreen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 45% 45%,rgba(var(--beat-light-color,230,154,0),.85),rgba(var(--beat-light-color,230,154,0),.5) 60%,rgba(var(--beat-light-color,230,154,0),.15));
  opacity: var(--beat-light-opacity,0);
  will-change: opacity;
}
.practice-player.is-fullscreen>.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.is-fullscreen .floor-wrap {
  height: 100%;
  min-height: 0;
}
.is-fullscreen .stage-top {
  position: static;
  min-height: 44px;
  padding: 0;
}
.is-fullscreen .activity-light {
  font-size: clamp(12px,1vw,15px);
  color: var(--muted);
}
.is-fullscreen .beat-dots,
.is-fullscreen .counter-track,
.is-fullscreen #pass-label,
.is-fullscreen #play-label,
.is-fullscreen .transport-label {
  display: none;
}
.preparation-count {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: color-mix(in srgb,var(--ink) 18%,transparent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.windowed-count-in {
  font-size: clamp(112px,20vw,220px);
}
.fullscreen-count-in {
  display: none;
}
.is-fullscreen .fullscreen-count-in {
  display: grid;
  font-size: min(70vh,65vw);
  font-size: min(70dvh,65vw);
}
.practice-player[data-counting-in=true] .cue-area {
  visibility: hidden;
}
.is-fullscreen .fullscreen-toggle {
  position: fixed;
  top: max(16px,env(safe-area-inset-top));
  right: max(16px,env(safe-area-inset-right));
  width: 44px;
  min-height: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--paper) 70%,transparent);
}
.is-fullscreen .wall-indicator strong {
  font-size: clamp(16px,1.4vw,24px);
}
.is-fullscreen .activity-light[data-state=count-in] {
  color: #976913;
}
.intro-seconds {
  font-variant-numeric: tabular-nums;
}
.is-fullscreen .cue-area {
  min-height: 72px;
  padding: 8px 12px 12px;
}
.is-fullscreen #move-cue {
  font-size: clamp(22px,2.2vw,36px);
}
.is-fullscreen #weight-cue {
  font-size: clamp(12px,1.15vw,18px);
}
.is-fullscreen #hint {
  min-height: 32px;
  margin: 6px 0 0;
  padding: 4px 10px;
  background: transparent;
}
.is-fullscreen .stage-legend {
  position: static;
  flex: 1 1 200px;
  justify-content: center;
  margin: 0;
  gap: 4px;
  padding: 0;
  border: 0;
  font-size: clamp(9px,.8vw,12px);
  line-height: 1.4;
}
.is-fullscreen .stage-legend .left-key,
.is-fullscreen .stage-legend .right-key {
  font-size: inherit;
  margin-left: 4px;
}
.is-fullscreen #floor-orientation text {
  font-size: clamp(11px,1vw,14px);
}
.is-fullscreen #floor-hidden text {
  font-size: clamp(22px,3.5vw,48px);
}
.practice-player.is-fullscreen>.rhythm {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0,1fr);
  align-self: center;
  gap: clamp(20px,5vh,48px);
  margin: 0;
}
.is-fullscreen .counter {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.is-fullscreen .counter>span {
  font-size: clamp(10px,1vw,13px);
  margin-bottom: 4px;
}
.is-fullscreen .counter strong {
  font-family: var(--font-count);
  flex-wrap: wrap;
  gap: 4px;
  font-size: clamp(26px,4.5vw,52px);
  line-height: 1.2;
  font-weight: 500;
}
.is-fullscreen .counter small {
  white-space: nowrap;
  font-size: clamp(10px,1vw,13px);
}
.is-fullscreen .fullscreen-footer .transport {
  position: static;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
}
.is-fullscreen .transport>button {
  min-width: 44px;
  width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb,var(--paper) 75%,transparent);
  color: var(--accent);
}
.is-fullscreen .transport>button:hover,
.is-fullscreen .fullscreen-toggle:hover {
  background: var(--soft);
}
@media (prefers-reduced-motion: reduce) {
  .practice-player.is-fullscreen::before {display: none;}
}

/* Step sheet workshop: one section and one interpretation at a time. */
.library-import-actions,.sheet-actions {display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.library-import-actions {margin-bottom:1rem}
.library-drafts {margin-block:1rem}
.library-drafts summary {cursor:pointer;font-weight:600}
.library-drafts summary span {font-size:.8rem;color:var(--muted);margin-left:.5rem}
.library-source {display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:.75rem .2rem}
.library-source strong {flex:1;font-weight:500}
.library-source small {color:var(--muted)}
#sheet-import {width:min(1080px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:1.4rem;overflow:auto}
#sheet-import label {display:flex;flex-direction:column;gap:.35rem;font-size:.85rem}
#sheet-import input:not([type=file]),#sheet-import select,#sheet-import textarea {width:100%;min-width:0;padding:.55rem .65rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit}
#sheet-import textarea {resize:vertical;margin-bottom:.6rem;line-height:1.55}
#sheet-import details>summary {cursor:pointer;font-size:.9rem;font-weight:600;padding:.55rem 0}
#sheet-import .dialog-heading {margin-bottom:.5rem}
.sheet-intro,.sheet-muted {color:var(--muted);font-size:.85rem}
.sheet-intro {margin-top:0;margin-bottom:1rem}
.sheet-identity {display:grid;grid-template-columns:2fr minmax(85px,.6fr) 1.5fr;gap:.8rem;margin-block:1.2rem}
.sheet-progress {display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.sheet-progress strong {font-size:.95rem}
#sheet-saved {font-size:.75rem;color:var(--muted)}
.sheet-decisions {display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.85rem 0 1.25rem}
.sheet-decisions>span {font-size:.8rem;color:var(--muted)}
.sheet-review-chip {font-size:.78rem;padding:.35rem .6rem;border:1px solid #d9bc88;background:#fcf5e9;border-radius:16px;color:#74531c}
.sheet-review-chip small {opacity:.7;margin-left:.3rem}
.sheet-layout {display:grid;grid-template-columns:210px minmax(0,1fr);gap:1.4rem;border-block:1px solid var(--line);padding-block:1rem}
.sheet-sections {display:flex;flex-direction:column;gap:.35rem;align-self:start;position:sticky;top:0;max-height:65dvh;overflow:auto}
.sheet-part-name {font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:.6rem .45rem .25rem}
.sheet-sections button {display:flex;flex-direction:column;gap:.3rem;flex-shrink:0;text-align:left;padding:.7rem;border:1px solid transparent;background:transparent;border-radius:9px;line-height:1.4}
.sheet-sections button strong {font-size:.85rem;font-weight:500}
.sheet-sections button small {font-size:.72rem;color:var(--muted)}
.sheet-sections button[aria-pressed=true] {background:var(--soft);border-color:var(--accent)}
.sheet-section {min-width:0}
.sheet-section-heading {display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.8rem}
.sheet-section-heading h3,.sheet-section-heading h4 {margin:0}
.sheet-section-heading h3 {font-size:1.1rem;line-height:1.4}
.sheet-section-heading .secondary {flex-shrink:0;font-size:.8rem}
#sheet-import .sheet-start {flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;font-size:.8rem;color:var(--muted);gap:.35rem;margin:.7rem 0 1rem}
#sheet-import .sheet-start select {width:auto;margin-left:.3rem}
.sheet-steps {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin-bottom:1rem}
.sheet-step {display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;padding:.7rem;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:9px;min-width:0}
.sheet-count {font-size:1.45rem;font-weight:650;line-height:1}
.sheet-step>span:nth-child(2) {font-size:.76rem;line-height:1.4;overflow-wrap:anywhere}
.sheet-step small {font-size:.68rem;color:#93631e}
.sheet-step[aria-pressed=true] {background:var(--soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sheet-step[data-needs-check=true]:not([aria-pressed=true]) {border-color:#d9bc88}
.sheet-step-editor {padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.sheet-step-findings {font-size:.82rem;color:#8a5d1e;line-height:1.5;margin:.5rem 0}
.sheet-step-findings:empty {display:none}
.sheet-edit-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:.6rem 0 .9rem}
#sheet-import .sheet-edit-fields label:last-child:nth-child(odd) {grid-column:1/-1}
#sheet-source {white-space:pre-wrap;overflow-wrap:anywhere;margin:.3rem 0;font-size:.85rem;border-left:2px solid var(--line);padding-left:.8rem;color:var(--muted)}
.sheet-note {padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.85rem;line-height:1.5}
.sheet-note p {margin:0 0 .5rem;white-space:pre-wrap;overflow-wrap:anywhere}
.sheet-note small {display:block;color:var(--muted);margin-top:.4rem}
.sheet-footer {display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;padding-top:1rem}
#sheet-add-note {font-size:.8rem;line-height:1.5;max-width:48ch;color:var(--muted);margin-top:0}
#sheet-error {color:var(--coral);font-size:.9rem;white-space:pre-wrap}
#sheet-error:empty {display:none}
.sheet-preview {margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:12px;text-align:center;background:var(--paper)}
.sheet-preview svg {display:block;width:100%}
.sheet-preview small {color:var(--muted)}
.sheet-preview [data-floor-layer=grid] circle {fill:var(--accent);opacity:.3}
.sheet-preview [data-floor-layer=orientation] text {fill:var(--muted);font:11px system-ui}
.sheet-preview [data-foot] text {fill:var(--ink);font:13px system-ui}
@media(max-width:760px) {
  #sheet-import {width:calc(100vw - 16px);padding:1rem}
  .sheet-layout {grid-template-columns:minmax(0,1fr);gap:1rem}
  .sheet-sections {position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:210px}
  .sheet-part-name {grid-column:1/-1}
  .sheet-identity {grid-template-columns:minmax(0,1fr) 85px}
  .sheet-identity label:last-child {grid-column:1/-1}
  .sheet-footer {flex-direction:column;align-items:stretch}
}
@media(max-width:460px) {
  .sheet-steps {grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheet-section-heading {flex-wrap:wrap}
  .sheet-edit-fields {grid-template-columns:minmax(0,1fr)}
}
.sheet-browse-checks {width:100%;font-size:.8rem}
.sheet-browse-checks button {display:block;padding:.4rem .6rem;border:0;border-radius:6px;background:transparent;text-align:left;font-size:.8rem}
.sheet-browse-checks button:hover {background:var(--soft)}
#sheet-metadata-findings:empty {display:none}
.sheet-note[data-selected=true] {background:var(--soft);padding:.75rem;border-radius:8px}
.sheet-review-chip {max-width:100%;white-space:normal;text-align:left}

.library-source-row {display:flex;align-items:center;gap:.25rem;border-bottom:1px solid var(--line)}
.library-source-row .library-source {flex:1;min-width:0;border-bottom:0}
.library-source-row .library-source strong {min-width:0;overflow-wrap:anywhere}
.library-delete-draft {flex-shrink:0;color:var(--muted)}
.library-delete-draft:hover {color:var(--coral)}
.library-draft-notice {display:flex;align-items:center;gap:.6rem;justify-content:space-between;padding:.6rem .8rem;border-radius:8px;background:var(--soft);font-size:.85rem}

/* Import authoring: named patterns above their counts; one save action for the whole count. */
.sheet-mnemonic {display:flex;align-items:center;gap:.35rem;min-width:0}
.sheet-mnemonic h3 {overflow-wrap:anywhere;min-width:0}
.sheet-mnemonic [contenteditable] {outline:0;border-bottom:2px solid var(--accent)}
.sheet-section-description {margin:.25rem 0 0;color:var(--muted);background:var(--bg);font-size:.8rem;line-height:1.5}
.sheet-pattern-band {grid-column:1/-1;display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:var(--soft);border-radius:8px;font-size:.8rem;flex-wrap:wrap}
.sheet-pattern-band>small {color:var(--muted);margin-right:auto}
.sheet-pattern-band .text-button {font-size:.75rem;padding:.25rem;display:inline-flex;align-items:center;gap:.3rem}
.sheet-pattern-band svg {width:15px;height:15px}
.sheet-pattern-editor,.sheet-publish {padding:1rem;border:1px solid var(--accent);background:var(--paper);border-radius:12px;margin:1rem 0}
.sheet-pattern-editor h4 {margin:0}
.sheet-step-save {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;margin-top:1rem;border-top:1px solid var(--line)}
#sheet-step-feedback {font-size:.8rem;line-height:1.5;color:var(--muted)}
#sheet-step-feedback[data-error=true],#sheet-pattern-feedback {color:var(--coral)}
#sheet-import [aria-invalid=true] {border-color:var(--coral);outline:1px solid var(--coral)}
#sheet-step-form {margin:0}
.dance-parts {display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0 1rem}
.dance-parts button {display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:8px;padding:.45rem .65rem;background:transparent;font-size:.8rem}
.dance-parts button[aria-pressed=true] {background:var(--soft);border-color:var(--accent);color:var(--accent)}
.dance-parts small {color:var(--muted)}

.sheet-sections button {align-items:flex-start}

.library-dance-row {display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden}
.library-dance-row:has(.library-dance[aria-pressed=true]) {border-color:var(--selected-line)}
.library-dance-row .library-dance {flex:1;min-width:0;border:0;border-radius:0;gap:.7rem;background:transparent}
.library-dance-actions {display:flex;gap:.15rem;padding-right:.6rem;flex-shrink:0}
.library-dance-actions .icon-button {width:32px;height:32px;min-width:32px}
@media(max-width:480px){.library-dance-row .library-dance {padding:.7rem;gap:.5rem}.library-dance-row .library-dance-icon {display:none}.library-dance-actions {padding-right:.35rem}.library-dance-row .library-dance>svg {display:none}}

/* A move owns its actions; opening a card reveals the same counted instructions. */
.sheet-moves,.editor-storyboard.has-moves {display:flex;flex-direction:column;gap:.7rem;min-width:0}
.move-card {border:1px solid var(--line);border-radius:11px;background:var(--paper);overflow:hidden;min-width:0}
.move-card-heading {display:flex;align-items:center;gap:.4rem;background:var(--bg);padding:.3rem}
.move-card-toggle {display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;text-align:left;background:transparent;border:0;padding:.6rem .4rem;justify-content:flex-start}
.move-card-toggle>span:last-child {display:flex;flex-direction:column;gap:.3rem;min-width:0}
.move-card-toggle strong {font-size:.9rem;line-height:1.35;overflow-wrap:anywhere}
.move-card-toggle small {font-size:.73rem;color:var(--muted)}
.move-card-toggle>span:first-child {display:flex;align-items:center;flex-shrink:0}
.move-card-toggle svg {width:14px;height:14px;transition:transform .15s}
.move-card-toggle[aria-expanded=true]>span:first-child svg {transform:rotate(180deg)}
.move-card-tools {display:flex;align-items:center;gap:.25rem;flex-shrink:0}
.move-card-tools .text-button {display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;padding:.4rem}
.move-card-tools svg {width:16px;height:16px}
.move-card-counts {padding:.6rem}
.move-card-counts[hidden] {display:none}
.move-card-counts .sheet-steps {margin:0}
.move-card[data-modified=true] {border-style:dashed}
.move-edit-panel {margin:1rem 0;padding:1rem;border:1px solid var(--accent);border-radius:12px;background:var(--paper)}
.move-edit-panel [role=alert] {color:var(--coral);font-size:.8rem;line-height:1.5}
.move-edit-panel h4 {margin:0}
.move-proposal {font-size:.8rem;line-height:1.5;margin-block:.75rem}
.move-proposal ol {padding-left:1.4rem}
.move-proposal li {padding:.2rem 0}
.move-edit-operations {display:flex;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:.75rem;margin-top:1rem}
.editor-view-switch {display:flex;align-items:center;gap:.4rem;margin:.6rem 0;flex-wrap:wrap}
.editor-view-switch>button:not(.text-button),.dictionary-example-modes button {padding:.4rem .65rem;border:1px solid var(--line);border-radius:7px;background:transparent;font-size:.8rem}
.editor-view-switch>button[aria-pressed=true],.dictionary-example-modes button[aria-pressed=true] {background:var(--soft);border-color:var(--accent);color:var(--accent)}
.editor-move-counts {display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:.5rem}
.dictionary-occurrence {padding:.75rem;background:var(--soft);border-radius:9px;margin-block:1rem;font-size:.8rem;line-height:1.5}
.dictionary-example-modes {display:flex;gap:.5rem;flex-wrap:wrap}
#dictionary-occurrence-picker {margin-top:.7rem;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
#dictionary-occurrence-picker select {min-width:0;max-width:100%}
#dictionary-occurrence-note {margin-bottom:0}
@media(max-width:480px){.move-card-heading {flex-wrap:wrap}.move-card-toggle {flex-basis:65%}.move-card-tools .text-button {font-size:.7rem}.editor-move-counts {grid-template-columns:repeat(2,minmax(0,1fr))}.move-edit-panel {padding:.75rem}}
.editor-storyboard.has-moves {align-items:stretch}
.editor-move-counts {grid-template-columns:repeat(4,minmax(0,1fr))}
.move-drag-handle {width:26px;min-width:26px;padding:.25rem;touch-action:none;cursor:grab;color:var(--muted)}
.move-card .editor-count {width:100%}
@media(max-width:600px){.editor-move-counts {grid-template-columns:repeat(2,minmax(0,1fr))}}
.move-card[data-drop=before] {border-top:3px solid var(--accent)}
.move-card[data-drop=after] {border-bottom:3px solid var(--accent)}
.sheet-description-row {display:flex;align-items:center;gap:.3rem;min-width:0}
.sheet-description-row .icon-button {width:26px;height:26px;min-width:26px;padding:.25rem}
.sheet-description-row [contenteditable] {outline:0;border-bottom:2px solid var(--accent)}
.move-edit-panel .sheet-edit-fields label {display:flex;flex-direction:column;gap:.35rem;min-width:0;font-size:.85rem}
.move-edit-panel .sheet-edit-fields input,.move-edit-panel .sheet-edit-fields select {display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.move-edit-panel .sheet-edit-fields label:last-child:nth-child(odd) {grid-column:1/-1}
.move-actions {min-width:0}
.move-actions .sheet-steps {margin:0}
.sheet-count-tools {display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:.75rem 0}
.sheet-count-tools[hidden] {display:none}
.sheet-count-tools strong {font-size:.8rem;color:var(--muted)}
.sheet-count-tile {min-width:0;padding:.45rem;border:1px solid var(--line);border-radius:9px;background:var(--bg)}
.sheet-count-tile[data-selected=true] {background:var(--soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sheet-count-heading {display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem;font-weight:600;cursor:pointer}
.sheet-count-heading input {width:auto;margin:0}
#sheet-import label.sheet-count-heading {flex-direction:row;justify-content:space-between;align-items:center}
#sheet-import .sheet-count-heading input[type=checkbox] {width:17px;padding:0;order:1}
.sheet-count-heading .sheet-count {font-size:1.5rem;line-height:1.2}
.sheet-count-tile .sheet-step {width:100%;padding:.5rem;border-color:transparent;background:var(--paper);gap:.3rem}
.sheet-count-tile .sheet-action-cue {font-size:.76rem;line-height:1.4;overflow-wrap:anywhere}
.sheet-count-tile .sheet-step[aria-pressed=true] {background:var(--soft);border-color:var(--accent)}
.move-replacement {padding:1rem;margin-block:1rem;border:1px solid var(--accent);border-radius:12px;background:var(--paper);min-width:0}
.move-replacement[hidden],.move-replacement [hidden] {display:none}
.move-replacement h4 {margin:0}
.replacement-search {display:flex;flex-direction:column;gap:.4rem;font-size:.85rem}
.replacement-search input {width:100%;box-sizing:border-box;min-width:0}
.replacement-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:.65rem;max-height:16rem;overflow:auto;margin:.65rem 0 1rem;padding:2px}
.replacement-choices button[data-replacement-concept] {flex-direction:row;align-items:center;justify-content:space-between}
.replacement-choices button[data-replacement-concept] svg {width:14px;height:14px;flex-shrink:0}
.move-controls {display:flex;flex-wrap:wrap;align-items:end;gap:.7rem;margin:.7rem 0}
.move-controls>label:not(.check) {display:grid;gap:.3rem;min-width:8rem;flex:1;font-size:.8rem}
.move-controls select,.move-controls input[type=number] {width:100%;min-width:0}
.move-controls .check {display:flex;align-items:center;gap:.4rem;font-size:.8rem}
.move-controls .check input {width:auto}
.move-controls .check[hidden] {display:none}
.move-shape-preview {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;overflow:auto;max-height:24rem;margin:.5rem 0}
.move-shape-preview>.replacement-count {min-width:0}
.move-shape-preview svg {width:100%;max-height:115px}
@media(max-width:600px) {.move-shape-preview {grid-template-columns:repeat(2,minmax(0,1fr))}}
.replacement-choices button,.replacement-reference {display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;padding:.65rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0;overflow-wrap:anywhere}
.replacement-choices strong {font-size:.8rem;line-height:1.3}
.replacement-choices small {font-size:.72rem;color:var(--muted)}
.replacement-choices button[aria-pressed=true] {background:var(--soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.replacement-choices button:disabled {opacity:.5;cursor:default}
.replacement-reference {opacity:.65}
.replacement-settings {display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;font-size:.8rem}
.replacement-settings label:not(.check) {display:flex;gap:.5rem;align-items:center}
.replacement-settings label.check {display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:.45rem;margin:0}
.replacement-settings label.check input {width:auto;margin:0;flex-shrink:0}
#sheet-import .replacement-settings label.check {flex-direction:row;align-items:center;gap:.45rem}
#sheet-import .replacement-settings input[type=checkbox] {width:17px;padding:0}
.replacement-settings select {width:auto;min-width:0}
.replacement-comparison {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;max-height:20rem;overflow:auto;padding:2px}
.replacement-comparison section {min-width:0}
.replacement-comparison h5 {font-size:.8rem;margin:.4rem 0}
.replacement-counts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;padding:2px}
.replacement-count {display:flex;flex-direction:column;gap:.35rem;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:.5rem}
.replacement-count>b {font-size:1.15rem;font-variant-numeric:tabular-nums}
.replacement-count>span {font-size:.72rem;line-height:1.4;overflow-wrap:anywhere}
.replacement-count svg {width:100%;max-height:110px}
.replacement-weight {font-size:.8rem;margin-top:.8rem;color:var(--muted)}
.move-replacement [role=status] {font-size:.8rem;line-height:1.5;color:#8a5d1e}
.move-replacement [role=alert] {font-size:.8rem;line-height:1.5;color:var(--coral)}
.move-replacement [role=status]:empty,.move-replacement [role=alert]:empty {display:none}
.replacement-footer {margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.replacement-animation {margin-top:.75rem;text-align:center;border-radius:10px;background:var(--bg)}
.replacement-animation svg {display:block;width:100%;height:245px}
.replacement-animation p {font-size:.85rem;padding:0 .5rem .75rem;margin:0}
.move-nickname {display:flex;flex-direction:column;gap:.4rem;font-size:.85rem}
.move-nickname input {width:100%;min-width:0;box-sizing:border-box}
.move-nickname small {color:var(--muted)}
#editor-replace-chunk {display:inline-flex;align-items:center;gap:.25rem}
@media(max-width:600px){.move-replacement {padding:.75rem}.replacement-counts {grid-template-columns:1fr}.replacement-count svg {max-height:90px}.sheet-count-tools {gap:.25rem}.sheet-count-tools button {font-size:.75rem}}
.workspace-old-tools,.workspace-old-metadata {display:none!important}
.chunk-workspace {min-width:0;margin-block:1rem}
.workspace-chunk {border:1px solid var(--line);border-radius:12px;background:var(--paper);min-width:0}
.workspace-chunk[data-active=true] {border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent)}
.workspace-chunk>header {display:flex;gap:.5rem;align-items:center;padding:.65rem .75rem;min-width:0}
.workspace-chunk[data-active=true]>header {border-bottom:1px solid var(--line);align-items:flex-start}
.workspace-grip {cursor:grab;touch-action:none;color:var(--muted);min-width:24px!important;width:24px!important;padding:.2rem!important}
.workspace-grip svg {width:16px;height:16px}
.workspace-choose {display:flex;align-items:center;gap:.7rem;min-width:0;flex:1;padding:.2rem;background:transparent;border:0;text-align:left}
.workspace-choose>svg {width:14px;height:14px;flex-shrink:0}
.workspace-chunk[data-active=true] .workspace-choose {flex:0 0 auto;flex-wrap:wrap;width:80px;gap:.3rem}
.workspace-chunk[data-active=true] .workspace-choose>svg {transform:rotate(180deg)}
.workspace-index {font-size:1.25rem;color:var(--accent);font-variant-numeric:tabular-nums}
.workspace-range {font-size:.7rem;color:var(--muted);white-space:nowrap;margin-left:auto}
.workspace-chunk[data-active=true] .workspace-range {order:3;width:100%;margin:0}
.workspace-names {display:flex;flex-direction:column;gap:.3rem;flex:1;min-width:0}
.workspace-names strong,.workspace-names h3 {font-size:.95rem;line-height:1.4;margin:0;overflow-wrap:anywhere}
.workspace-names h3[data-workspace-text=mnemonic] {font-family:var(--font-chunk);font-weight:400;font-size:1.15rem;line-height:1.35}
.workspace-names small {font-size:.76rem;color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.workspace-names>div {display:flex;gap:.3rem;align-items:center;min-width:0}
.workspace-names p {font-size:.78rem;color:var(--muted);line-height:1.45;margin:0;background:var(--bg);padding:.15rem .35rem;border-radius:4px;overflow-wrap:anywhere}
.workspace-names .icon-button {width:25px;height:25px;min-width:25px;min-height:25px;padding:.25rem;flex-shrink:0}
.workspace-names [contenteditable] {outline:0;border-bottom:2px solid var(--accent)}
.workspace-header-actions {display:flex;align-items:center;gap:.15rem;flex-shrink:0}
.workspace-header-actions>.icon-button {width:25px;min-width:25px;min-height:28px;padding:.25rem}
.workspace-chunk-body {padding:.8rem;min-width:0}
.workspace-tools {display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.8rem;min-height:36px}
.workspace-tools button,.workspace-new {display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem}
.workspace-tools strong {font-size:.8rem;color:var(--muted)}
.workspace-tools [data-workspace-preview-slot] {margin-left:auto}
.workspace-tools [data-workspace-preview-slot] button {font-size:.8rem;display:inline-flex;align-items:center;gap:.3rem}
.workspace-menu {position:relative;flex-shrink:0}
.workspace-menu>summary {display:flex;align-items:center;justify-content:center;list-style:none;cursor:pointer;padding:.35rem;border-radius:6px;border:1px solid var(--line);min-height:30px;box-sizing:border-box}
.workspace-menu>summary::-webkit-details-marker {display:none}
.workspace-menu>summary svg {width:17px;height:17px}
.workspace-menu>div {position:absolute;right:0;top:100%;min-width:180px;border:1px solid var(--line);border-radius:9px;background:var(--paper);box-shadow:0 8px 24px #263c3320;padding:.35rem;z-index:5;display:flex;flex-direction:column}
.workspace-menu button {display:flex;justify-content:flex-start;text-align:left;background:transparent;border:0;padding:.6rem;font-size:.8rem;border-radius:6px;white-space:nowrap}
.workspace-menu button:hover {background:var(--soft)}
.workspace-divider {display:flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:32px;border:0;background:transparent;padding:.25rem 1rem;color:var(--muted)}
.workspace-divider>span {height:1px;background:var(--line);flex:1}
.workspace-divider svg {width:14px;height:14px;opacity:.7}
.workspace-divider small {font-size:.68rem}
.workspace-divider:hover svg,.workspace-divider:focus-visible svg {opacity:1;color:var(--accent)}
.workspace-new {margin:.7rem .3rem}
.workspace-chunk[data-drop=before] {border-top:3px solid var(--accent)}
.workspace-chunk[data-drop=after] {border-bottom:3px solid var(--accent)}
.workspace-chunk.is-dragged {opacity:.5}
.workspace-proposal {border:1px solid var(--accent);border-radius:10px;padding:.8rem;margin-bottom:.8rem;background:var(--paper)}
.workspace-proposal[hidden] {display:none}
.workspace-proposal h4 {margin:0;font-size:.95rem}
.workspace-proposal [role=alert] {font-size:.8rem;color:var(--coral);line-height:1.5}
.workspace-proposal [role=alert]:empty {display:none}
.workspace-comparison {display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-block:.75rem;max-height:220px;overflow:auto}
.workspace-comparison>div {display:flex;flex-direction:column;gap:.3rem;min-width:0}
.workspace-comparison>div>small {color:var(--muted);font-size:.72rem}
.workspace-mini {display:flex;flex-direction:column;gap:.25rem;padding:.5rem;background:var(--soft);border-radius:6px;min-width:0}
.workspace-mini b {font-size:.75rem;overflow-wrap:anywhere}.workspace-mini small {font-size:.7rem;color:var(--muted)}
.workspace-boundary {display:flex;flex-wrap:wrap;gap:.4rem!important;font-size:.8rem!important}
.workspace-boundary output {font-weight:700;color:var(--accent)}
.workspace-boundary input {width:100%;padding:0!important;accent-color:var(--accent)}
.workspace-boundary-chunks {display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.7rem 0}
.workspace-empty {text-align:center;padding:1.5rem .75rem;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:.85rem}
.workspace-empty strong {color:var(--ink);font-weight:600}.workspace-empty p {margin:.4rem 0;line-height:1.5}
.workspace-layout {display:block!important}
.author-part-tabs {display:flex;gap:.4rem;flex-wrap:wrap;margin-block:.8rem}
.author-part-tabs[hidden],#sheet-decisions[hidden] {display:none}
.author-part-tabs button {display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:.82rem}
.author-part-tabs small {font-size:.7rem;color:var(--muted)}
.author-part-tabs button[aria-pressed=true] {border-color:var(--accent);background:var(--soft);color:var(--accent)}
.author-dance-details {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-block:.5rem;font-size:.8rem}
.author-dance-details>summary {color:var(--muted);font-size:.8rem!important;grid-column:1/-1}
.author-dance-details>label {margin-block:.5rem}
#sheet-import .sheet-identity {display:block;margin-block:.5rem}
#sheet-import .dialog-heading .eyebrow {display:none}
#sheet-import .sheet-progress {margin-block:.6rem;padding-block:.5rem}
#sheet-import .sheet-progress strong {font-size:.8rem;font-weight:500;color:var(--muted)}
#sheet-import .workspace-proposal label {font-size:.8rem}
#sheet-import .workspace-proposal input[type=range] {padding:0;border:0}
#sheet-import label.workspace-boundary {flex-direction:row;align-items:center}
#sheet-import .workspace-boundary input {flex-basis:100%}
.move-replacement.is-insertion .replacement-comparison {grid-template-columns:1fr}
.move-replacement.is-insertion .replacement-counts {grid-template-columns:repeat(4,minmax(0,1fr))}
.chunk-workspace .editor-preview-tools {margin:.7rem 0;justify-content:flex-end}
.chunk-workspace .editor-preview-tools[hidden] {display:none}
.chunk-workspace .move-card-heading {background:var(--paper)}
.chunk-workspace .sheet-step-editor,.chunk-workspace .editor-editing {margin-top:.8rem}
.sheet-count-tile {position:relative}
.sheet-count-grip {touch-action:none;cursor:grab;color:var(--muted)}
.sheet-count-grip svg {width:14px;height:14px}
.sheet-count-tile .sheet-count-heading {justify-content:space-between;cursor:default;gap:.2rem}
.sheet-count-actions,.sheet-inspector-actions {display:flex;align-items:center;gap:.2rem;flex-shrink:0}
.sheet-count-actions .icon-button {width:23px;min-width:23px;height:25px;min-height:25px;padding:.2rem}
.sheet-count-actions .icon-button svg {width:14px;height:14px}
.sheet-inspector-actions .icon-button {width:32px;min-width:32px;height:32px;min-height:32px;padding:.4rem}
#sheet-import .sheet-count-heading input[type=checkbox] {flex-shrink:0;height:17px;cursor:pointer}
.sheet-count-tile .sheet-step {flex-direction:row;align-items:center;justify-content:space-between;min-height:58px;padding:.35rem;gap:.2rem}
.sheet-action-text {display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}
.sheet-action-text>b {font-size:.85rem}
.sheet-count-tile .reference-diagram {width:64px;flex:0 0 64px}
.sheet-count-tile .reference-diagram svg {width:64px;height:52px}
.sheet-count-tile .editor-foot-badge {flex-shrink:0}
.tag-timing {display:flex;align-items:center;gap:.4rem;margin:.5rem 0 1rem;color:var(--muted);font-size:.8rem}
.tag-timing[hidden] {display:none}
.tag-timing>.icon {width:17px;height:17px}
.tag-timing>.icon-button {width:28px;min-width:28px;height:28px;min-height:28px;padding:.3rem}
.tag-timing form {width:100%;box-sizing:border-box;padding:.8rem;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.tag-wall-list {display:flex;flex-wrap:wrap;gap:.5rem;margin:.65rem 0}
.tag-wall-list>div {display:flex;align-items:center;gap:.25rem}
#sheet-import .tag-wall-list label {flex-direction:row;align-items:center;font-size:.8rem}
#sheet-import .tag-wall-list input {width:5rem;padding:.4rem}
.tag-wall-list .icon-button {width:28px;min-width:28px;height:28px;min-height:28px;padding:.3rem}
.tag-timing .sheet-actions {margin-top:.6rem}
.tag-timing [role=alert] {color:var(--coral);font-size:.8rem}
.tag-timing [role=alert]:empty {display:none}
.sheet-count-tile[data-drop=before] {border-left:3px solid var(--accent)}
.sheet-count-tile[data-drop=after] {border-right:3px solid var(--accent)}
.sheet-count-tile.is-dragged {opacity:.5}
@media(max-width:600px){
  .sheet-count-tile .sheet-step {flex-direction:column;gap:.15rem;align-items:flex-start;justify-content:flex-start}
  .sheet-count-tile .sheet-action-text {flex:none;width:100%;order:1}
  .sheet-count-tile .reference-diagram {align-self:center;order:0}
  .sheet-count-tile .reference-diagram {width:48px;flex-basis:48px}
  .sheet-count-tile .reference-diagram svg {width:48px;height:46px}
  .author-part-tabs button {align-items:flex-start;flex-direction:column;gap:.2rem}
  .author-part-tabs small {text-align:left;line-height:1.4}
  .workspace-chunk>header {padding:.6rem .4rem;gap:.3rem;flex-wrap:wrap}
  .workspace-chunk[data-active=true] .workspace-choose {width:48px;gap:.15rem}
  .workspace-header-actions {margin-left:auto}
  .workspace-names {flex-basis:55%}
  .workspace-chunk-body {padding:.6rem}
  .workspace-tools {gap:.35rem}
  .workspace-tools button {font-size:.75rem;padding:.45rem .55rem}
  .move-replacement.is-insertion .replacement-counts {grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-range {white-space:normal}
}

/* Optional first-use hints share the app's existing controls and never start playback. */
.app-header .tour-trigger {margin-left:auto;font-size:1.1rem;font-weight:700;border-radius:8px;width:34px;height:34px;min-width:34px;color:var(--brand);border:1px solid var(--brand);background:var(--paper)}
.app-header .tour-trigger:hover {background:#f9e9e9;color:var(--brand)}
.tour-invitation {display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 1rem;padding:.25rem .5rem;border:1px solid var(--line);border-radius:12px}
.tour-invitation[hidden] {display:none}
.tour-invitation .icon-button {width:32px;height:32px;min-width:32px}
.quick-tour {--accent:var(--brand);--accent-hover:#a93138;--focus:var(--brand);position:fixed;inset:auto;margin:0;width:min(340px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:1rem;border:1px solid var(--brand);border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 12px 40px #c63f4626}
.quick-tour h2 {margin:.2rem 0 .6rem;font-size:1.15rem}
.quick-tour p {margin:0 0 1rem;line-height:1.65;font-size:.9rem}
.tour-heading,.tour-actions {display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.tour-heading {font-size:.8rem;color:var(--brand)}
.tour-heading .icon-button {width:28px;height:28px;min-width:28px}
.tour-highlight {position:fixed;z-index:1000;pointer-events:none;border:2px solid var(--brand);border-radius:14px}
.tour-highlight[hidden] {display:none}

/* One editor owns the dance body, distinct tag definitions and their song positions. */
.editor-song-plan {margin:0 0 1.2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.editor-part-tabs {display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.editor-part-tabs button {background:var(--paper);border:1px solid var(--line);padding:.45rem .65rem;font-size:.85rem}
.editor-part-tabs button[aria-pressed=true] {background:var(--soft);border-color:var(--accent);color:var(--accent)}
.editor-part-tabs small {color:var(--muted);font-variant-numeric:tabular-nums}
.editor-song-indicators {display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 .8rem}
.editor-song-indicators:empty {display:none}
.song-shortcut {position:relative;width:44px;height:44px;min-width:44px;color:var(--accent);background:var(--paper)}
.song-shortcut>.icon {width:23px;height:23px}
.song-shortcut-jump {position:absolute;right:1px;bottom:1px;width:16px;height:16px;display:grid;place-items:center;border-radius:4px;background:var(--paper)}
.song-shortcut-jump .icon {width:13px;height:13px}
.editor-song-plan details {margin-top:.5rem;font-size:.85rem}
.editor-song-plan summary {color:var(--accent)}
.editor-song-list {max-height:19rem;overflow:auto;margin:.7rem 0}
.editor-song-rule {display:flex;align-items:center;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--line)}
.editor-song-jump {flex:1;min-width:0;justify-content:flex-start;text-align:left;background:transparent;padding:.3rem 0;font-size:.82rem}
.editor-song-rule-actions {display:flex;gap:.15rem;flex-shrink:0}
.editor-song-rule-actions .icon-button {width:32px;height:32px;min-width:32px}
.editor-song-tag,.editor-song-add,.editor-song-form-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.editor-song-tag {padding:.3rem 0}
.editor-song-tag small {flex-basis:100%;color:var(--muted)}
.editor-song-tag .text-button {font-size:.8rem;padding:.3rem 0}
.editor-song-form form {margin-top:.75rem;padding:1rem;border:1px solid var(--selected-line);border-radius:12px;background:var(--paper)}
.editor-song-form h3 {margin:0 0 .75rem;font-size:1rem}
.editor-song-form label {display:flex;flex-direction:column;gap:.3rem;margin:.6rem 0;max-width:28rem}
.editor-song-form input,.editor-song-form select {width:100%}
.editor-song-form p,.editor-song-empty {font-size:.8rem;color:var(--muted)}
.editor-song-form-actions {justify-content:flex-end;margin-top:.8rem}
.editor-song-error {color:var(--coral)}

/* Song changes: numbered destinations and one list for steps and placement. */
.song-tag-mark {display:inline-flex;align-items:center;flex-shrink:0}
.song-tag-mark sub {font-size:.65rem;line-height:1;align-self:flex-end;margin-left:-.1rem}
.song-shortcut {width:auto;gap:.4rem;padding:.5rem .7rem .5rem .5rem;min-height:44px}
.song-shortcut .song-tag-mark>.icon {width:23px;height:23px}
.song-shortcut small {font-size:.72rem;font-weight:400;white-space:nowrap}
.song-shortcut-jump {display:none}
.editor-song-jump>span>small {display:block;color:var(--muted);font-size:.72rem}

/* Phone practice: explicit next steps, optional audio, and visible reminder feedback. */
.music-shortcut {display:flex;align-items:center;margin-left:auto}
.music-shortcut .icon-button {width:36px;height:36px;min-width:36px;color:var(--accent)}
#tour-review-toggle {display:inline-flex}
.review-reminder {font-size:.78rem;gap:7px}
.review-reminder[aria-pressed=true] {background:var(--soft);border-color:var(--accent);color:var(--accent)}
#next-chunk.next-chunk-card {display:flex;align-items:center;justify-content:space-between;gap:15px;width:100%;margin:12px 0 20px;padding:14px 16px;border:1px solid var(--selected-line);border-radius:14px;background:var(--paper);text-align:left;font-size:.9rem;color:var(--accent)}
.next-chunk-card small {display:block;font-size:.72rem;color:var(--muted);margin-bottom:5px;font-weight:400}
.next-chunk-card strong {font-family:var(--font-chunk);font-size:1rem;font-weight:400}
#next-chunk.next-chunk-card>.icon {width:22px;height:22px;flex-shrink:0}
.backup-menu summary {display:flex;align-items:center;gap:5px}
.backup-menu summary>.icon {width:15px;height:15px}
.backup-note {line-height:1.7;margin-top:12px}
.quick-tour .tour-note {font-size:.75rem;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:.65rem}
.catalog-controls {display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.catalog-controls label {flex:1;min-width:120px;font-size:.75rem;color:var(--muted)}
.catalog-controls select {display:block;width:100%;margin-top:5px;font-size:.85rem}
#browser-notice {--accent:var(--brand);--accent-hover:#aa3039;--soft:#f9e9e9;--focus:var(--brand);--line:#ecd2d3;--control-line:#ddbabe;--selected-line:#ddbabe;max-width:450px;border-color:var(--brand)}
#browser-notice p {font-size:.87rem;line-height:1.7}
.browser-notice-actions {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.browser-notice-actions a {display:inline-flex;text-decoration:none;padding:10px 14px;border-radius:10px}
#browser-link {width:100%}
@media(max-width:720px) {
  .music-shortcut {margin-left:0}
  .review-reminder {min-height:44px}
  .chunk-progress-actions {align-items:center}
}

/* Difficulty stays readable by name as well as color, in either training mode. */
.catalog-difficulty {display:inline-flex;align-items:center;margin-top:7px;padding:3px 8px;border-radius:999px;font-size:11px;line-height:1.5;color:#555d60;background:#e9eceb}
.catalog-difficulty[data-difficulty=everyone] {color:#365c2d;background:#e6efdf}
.catalog-difficulty[data-difficulty=beginner] {color:#1c6156;background:#dfefe9}
.catalog-difficulty[data-difficulty=high-beginner] {color:#27626d;background:#e0eff2}
.catalog-difficulty[data-difficulty=improver] {color:#315e8b;background:#e3edf8}
.catalog-difficulty[data-difficulty=intermediate] {color:#68417f;background:#eee4f5}
.catalog-difficulty[data-difficulty=advanced] {color:#963a48;background:#f9e3e6}

#open-music {position:relative}
#open-music .button-tooltip {left:auto;right:0;transform:none}
#open-music:hover .button-tooltip,#open-music:focus-visible .button-tooltip {visibility:visible;opacity:1}

/* A first-visit foyer. The practice workspace retains its own layout and state. */
body[data-screen=welcome] {background:#f8f6f1}
body[data-screen=welcome] .app-header {background:#f8f6f1;border-bottom-color:transparent}
body[data-screen=welcome] .app-header>#open-tour,body[data-screen=welcome] .app-header>#mobile-dictionary {display:none}
.welcome {--accent:var(--brand);--accent-hover:#aa3039;--soft:#f5e5e3;--selected-line:#e5cbc7;position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:none;min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - 76px);padding:32px max(28px,calc((100vw - 1180px)/2)) 28px;background:#f8f6f1;color:var(--ink)}
.welcome-floor-sketch {position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:#81686b;opacity:.075;pointer-events:none}
.welcome-content {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:32px;min-height:530px;width:100%;max-width:1180px;margin-inline:auto}
.welcome-copy {max-width:660px}
.welcome h1 {font-family:var(--font-chunk);font-size:clamp(42px,5vw,72px);font-weight:400;line-height:1.15;letter-spacing:-.025em;margin-bottom:24px}
.welcome h1:focus {outline:none}
.welcome-dont {position:relative;display:inline-block;color:#92908a;white-space:nowrap;transform:rotate(-3deg)}
.welcome-dont svg {position:absolute;width:110%;height:72%;left:-5%;top:18%;overflow:visible;fill:none;stroke:var(--brand);stroke-width:4.5;stroke-linecap:round;transform:rotate(-4deg)}
.welcome-punctuation {position:relative;display:inline-block;width:.4em;margin-left:.03em;color:var(--ink)}
.welcome-punctuation svg {position:absolute;inset:.16em 0 auto 0;width:.33em;height:.9em;fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;transform:rotate(8deg)}
.welcome-promise {font-size:clamp(17px,1.65vw,22px);font-weight:600;line-height:1.6;margin-bottom:14px;max-width:480px}
.welcome-description {font-size:.9rem;color:var(--muted);max-width:440px;line-height:1.8}
.welcome-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.welcome-actions button {padding:14px 20px;font-size:.95rem;min-height:50px}
.welcome-actions .secondary {background:#fffefd;border-color:#d7c8c4}
.welcome-actions .primary {box-shadow:0 5px 0 #9b29332b}
.welcome-music-note {font-size:.72rem;color:var(--muted);line-height:1.75;max-width:410px;margin-top:18px}
.welcome-error {font-size:.8rem;color:var(--brand);margin-top:10px}
.welcome-demo {padding:15px 5px 20px;max-width:420px;justify-self:center;width:100%;text-align:center;transform:rotate(2deg)}
.welcome-step-loop {width:100%;display:block;overflow:visible}
.welcome-step-loop text {font-family:var(--font-ui);font-size:13px}
.welcome-right-foot {animation:welcome-right-step 4s ease-in-out 5 forwards,welcome-land-right .8s ease-in-out 20s 1 forwards}
.welcome-left-foot {animation:welcome-left-tap 4s ease-in-out 5 forwards}
.welcome-step-arrow {opacity:0;animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:5;animation-fill-mode:forwards}
.welcome-step-arrow-up {animation:welcome-arrow-up 4s ease-in-out 5 forwards,welcome-land-arrow .8s ease-in-out 20s 1 forwards}
.welcome-step-arrow-down {animation-name:welcome-arrow-down}
.welcome-beats {display:flex;justify-content:center;gap:14px;margin-top:-2px}
.welcome-beats span {display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:.8rem;font-family:var(--font-count);color:#898880;animation:welcome-count-one 4s ease-in-out 5 forwards}
.welcome-beats span:first-child {animation:welcome-count-one 4s ease-in-out 5 forwards,welcome-land-count .8s ease-in-out 20s 1 forwards}
.welcome-beats span:nth-child(2) {animation-name:welcome-count-two}
.welcome-beats span:nth-child(3) {animation-name:welcome-count-three}
.welcome-beats span:nth-child(4) {animation-name:welcome-count-four}
.welcome-demo-mnemonic {font-family:var(--font-chunk);font-size:1.05rem;margin-top:18px;color:#7c6666}
.welcome-footer {display:flex;justify-content:center;gap:36px;margin:24px auto 0;padding-top:24px;border-top:1px solid #e6e0d8;max-width:1180px;width:100%;color:#7b7770;font-size:.78rem}
.welcome-footer>span {display:flex;align-items:center;gap:9px}
.welcome-footer .icon {width:16px;height:16px;color:#b56b6a}
/* Five full phrases, then land gently on the next 1 and hold that starting pose. */
@keyframes welcome-land-right {from {transform:translateY(0)}to {transform:translateY(-70px)}}
@keyframes welcome-land-arrow {from {opacity:0}to {opacity:.65}}
@keyframes welcome-land-count {from {color:#898880;background:transparent}to {color:var(--brand);background:#f0dcda}}
@keyframes welcome-right-step {0%,100% {transform:translateY(0)}8%,49% {transform:translateY(-70px)}58%,99% {transform:translateY(0)}}
@keyframes welcome-left-tap {0%,24%,100% {transform:translateY(0)}33%,74% {transform:translateY(-70px)}83%,99% {transform:translateY(0)}}
@keyframes welcome-arrow-up {0%,25%,100% {opacity:0}5%,20% {opacity:.65}}
@keyframes welcome-arrow-down {0%,49%,75%,100% {opacity:0}55%,70% {opacity:.65}}
@keyframes welcome-count-one {0%,22% {color:var(--brand);background:#f0dcda}25%,100% {color:#898880;background:transparent}}
@keyframes welcome-count-two {0%,24%,50%,100% {color:#898880;background:transparent}28%,47% {color:var(--brand);background:#f0dcda}}
@keyframes welcome-count-three {0%,49%,75%,100% {color:#898880;background:transparent}53%,72% {color:var(--brand);background:#f0dcda}}
@keyframes welcome-count-four {0%,74%,100% {color:#898880;background:transparent}78%,97% {color:var(--brand);background:#f0dcda}}
.welcome[hidden] * {animation-play-state:paused}
@media(max-width:720px) {
  .welcome {padding:28px 24px;min-height:calc(100dvh - 72px)}
  .welcome-content {grid-template-columns:1fr;gap:28px;min-height:0}
  .welcome h1 {font-size:clamp(36px,9.8vw,62px);margin-bottom:24px}
  .welcome-promise {font-size:1rem}
  .welcome-description {font-size:.8rem}
  .welcome-actions {gap:10px;margin-top:22px}
  .welcome-actions button {font-size:.82rem;flex:1;padding:13px 10px;white-space:nowrap}
  .welcome-actions .icon {width:16px;height:16px}
  .welcome-music-note {font-size:.67rem;max-width:290px}
  .welcome-demo {max-width:290px;padding-top:10px}
  .welcome-step-loop {margin-top:-10px}
  .welcome-beats {margin-top:-10px}
  .welcome-demo-mnemonic {font-size:.95rem}
  .welcome-footer {gap:18px;flex-wrap:wrap;margin-top:16px;font-size:.65rem;padding-top:20px}
  .welcome-footer>span {gap:5px}
  .welcome-footer .icon {width:13px;height:13px}
}
@media(prefers-reduced-motion:reduce) {
  .welcome-right-foot,.welcome-left-foot,.welcome-step-arrow,.welcome-beats span,.welcome-beats span:first-child {animation:none}
  .welcome-right-foot {transform:translateY(-70px)}
}

.welcome-song {white-space:nowrap}
.welcome-apostrophe {font-family:inherit;font-feature-settings:"palt" 1}

.welcome-quote {font-family:inherit;font-feature-settings:"palt" 1;letter-spacing:-.06em}

/* The static document starts gated, including while the module graph downloads. */
body[data-boot]:not([data-boot=ready]) {background:#f8f6f1}
body[data-boot]:not([data-boot=ready]) .app-layout,
body[data-boot]:not([data-boot=ready]) #welcome,
body[data-boot]:not([data-boot=ready]) .mobile-tools,
body[data-boot]:not([data-boot=ready]) .app-header>button {display:none!important}
body[data-boot]:not([data-boot=ready])>dialog,
body[data-boot]:not([data-boot=ready])>[popover] {visibility:hidden}
.startup-panel {--accent:var(--brand);--accent-hover:#aa3039;--focus:var(--brand);min-height:calc(100dvh - 76px);padding:32px;display:grid;align-content:center;justify-items:center;text-align:center;color:var(--muted)}
.startup-loading {font-size:.9rem;opacity:0;animation:startup-reveal .2s ease .5s forwards}
.startup-slow {font-size:.75rem;margin-top:16px;opacity:0;visibility:hidden;animation:startup-reveal .2s ease 12s forwards}
.startup-panel h1 {color:var(--ink);font-size:1.5rem;margin-bottom:12px}
.startup-panel details {max-width:440px;margin:18px auto 0;font-size:.8rem;overflow-wrap:anywhere}
.startup-panel details p {margin-top:8px}
.startup-retry {display:inline-flex;padding:12px 20px;border-radius:10px;margin-top:20px}
body[data-boot=error] .startup-slow {display:none}
.startup-no-script {padding:40px;text-align:center}
@keyframes startup-reveal {to {opacity:1;visibility:visible}}

.empty-library {min-height:55vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:24px 0;max-width:540px}
.empty-library-mark>.icon {width:40px;height:40px;color:var(--accent)}
.empty-library h1 {font-size:1.7rem}
.empty-library p {font-size:.9rem;line-height:1.8;color:var(--muted)}
.empty-library-actions {display:flex;gap:10px;flex-wrap:wrap}
body[data-library=empty] #chunk-library>.section-heading,
body[data-library=empty] #chunk-library>.completion-track,
body[data-library=empty] #full-dance,
body[data-library=empty] #music-start-wrap {display:none}
@media(max-width:720px) {.empty-library {padding:20px 6px}.empty-library h1 {font-size:1.5rem}}

/* Count notes supplement movement instead of replacing the animation. */
.editor-count-note {display:flex;flex-direction:column;gap:6px;margin:16px 0;font-size:13px}
.editor-count-note small {font-size:11px;color:var(--muted)}
.count-note {font-size:14px;color:var(--accent);margin-top:8px}
.is-fullscreen .count-note {font-size:clamp(14px,1.5vw,24px)}
.rewind-button {gap:5px}
.is-fullscreen .transport>.rewind-button {width:auto;padding:0 10px;font-size:12px}

/* Mobile selects a practice range above the viewer, and a start point by Play. */
.range-heading {display:flex;align-items:center;justify-content:space-between;gap:8px}
.range-heading>.eyebrow {min-width:0}
.music-start-slot:empty,.fullscreen-footer {display:none}
.is-fullscreen .music-start-slot {display:none}
@media(max-width:720px) {
  #mobile-dance-scope .full-dance {width:auto;margin:0;padding:6px 8px;gap:5px;min-height:34px;border-radius:9px}
  #mobile-dance-scope .full-dance strong {font-family:var(--font-ui);font-size:11px;font-weight:500}
  #mobile-dance-scope .full-dance small,#mobile-dance-scope .full-dance>span:last-child {display:none}
  #mobile-dance-scope .full-dance .icon {width:16px;height:16px}
  #mobile-dance-scope .full-dance[data-ready=true] {background:var(--soft);border-color:var(--accent)}
  .music-start-slot .music-start-setting {margin:12px 0 0}
}

/* A measured footer reserves space for every transport button and the legend. */
.is-fullscreen .fullscreen-footer {display:flex;grid-column:1/-1;align-items:center;flex-wrap:wrap;gap:10px 20px;position:relative;z-index:2}
#editor #editor-error {position:sticky;top:calc(0px - var(--editor-padding));z-index:5;background:var(--paper);border:1px solid #d74a47;border-radius:10px;padding:12px;box-shadow:0 3px 12px var(--shadow)}
#editor #editor-error:empty {display:none}
.editor-note-preview {display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.5;color:var(--accent)}
.editor-note-preview>.icon {width:12px;height:12px;flex-shrink:0}

.music-retention {font-size:13px;margin-top:12px}
.music-storage-note,#saved-music-status {font-size:11px;color:var(--muted);line-height:1.6}
.music-retention {display:flex;align-items:center;gap:8px}

/* Whole-move organization stays available without expanding every count. */
.move-select {flex-shrink:0;width:18px;height:18px;margin:.35rem;accent-color:var(--accent);cursor:pointer}
.move-select:disabled {cursor:default}
.move-card:has(> .move-card-heading .move-select:checked) {border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.library-new {display:inline-flex;align-items:center;gap:.3rem;margin-left:auto;margin-right:.6rem;white-space:nowrap}
.library-new svg {width:18px;height:18px}
#editor-error .text-button,#sheet-error .text-button {display:block;margin-top:.35rem;font-weight:700}

/* Feedback, like help, belongs to the red product chrome in either training mode. */
.feedback-trigger {display:inline-flex;align-items:center;gap:.3rem;margin-left:.5rem;padding:.45rem .65rem;min-height:34px;border:1px solid var(--brand);border-radius:8px;background:var(--paper);color:var(--brand);font-size:.78rem;white-space:nowrap}
.feedback-trigger .icon {width:17px;height:17px}
#feedback {--accent:var(--brand);--accent-hover:#aa3039;--focus:var(--brand);--soft:#f9e9e9;--line:#ecd2d3;--control-line:#ddbabe;max-width:510px;border-color:var(--brand)}
#feedback p {font-size:.85rem;line-height:1.65}
#feedback fieldset {border:0;margin:0;padding:0;display:grid;gap:.8rem;min-width:0}
#feedback label {display:grid;gap:.3rem;font-size:.85rem}
#feedback label.check {display:flex;align-items:flex-start;gap:.5rem}
#feedback input:not([type=checkbox]),#feedback select,#feedback textarea {width:100%;box-sizing:border-box}
#feedback textarea {resize:vertical;min-height:130px;font:inherit;line-height:1.6;padding:.6rem;border:1px solid var(--control-line);border-radius:8px;background:var(--paper);color:var(--ink)}
#feedback small,.feedback-privacy,.feedback-context {color:var(--muted)}
.feedback-context {overflow-wrap:anywhere;background:var(--soft);padding:.6rem;border-radius:8px}
#feedback-events-preview {font-size:.75rem;color:var(--muted)}
#feedback-events {white-space:pre-wrap;overflow-wrap:anywhere;max-height:180px;overflow:auto;padding:.6rem;background:var(--soft);border-radius:8px;font:11px/1.6 ui-monospace,monospace}
#feedback-error {color:#b33638}
body[data-screen=welcome] .feedback-trigger {margin-left:auto}
@media(max-width:480px){.feedback-trigger {font-size:.7rem;padding:.4rem}}

/* Keep intentional field taps readable without triggering iPhone's input zoom. */
@media(max-width:720px),(pointer:coarse) {
  #feedback input:not([type=checkbox]),#feedback select,#feedback textarea,.dictionary-search input {font-size:16px}
  #editor #editor-dance-title {font-size:16px}
}