/* StepFlow - salsa & bachata trainer
 *
 * Theming: every colour in this file comes from a token below. To add a theme,
 * copy one block and override the tokens - no other rule needs to change.
 */

html[data-theme="havana"],
html[data-theme="system"] {
  color-scheme: dark;
  --bg: #14110f;
  --bg-tint: #2a221c;
  --bg2: #1b1714;
  --panel: #201b18;
  --panel2: #272119;
  --line: #372f28;
  --line2: #4a4038;
  --text: #f6efe6;
  --text2: #ded4ca;
  --muted: #a1948a;
  --faint: #6b6058;
  --faint2: #574d46;
  --accent: #f0a93c;
  --accent-dim: #8a6224;
  --accent-ink: #221a10;
  --accent-soft: rgba(240, 169, 60, .13);
  --accent2: #35bfae;
  --accent2-dim: #1f4a45;
  --accent2-ink: #06231f;
  --accent2-soft: rgba(53, 191, 174, .35);
  --danger: #e0533f;
  --danger-dim: #5a2d24;
  --ok: #74c46a;
  --ok-dim: #2f4a2c;
  --cell: #1a1613;
  --cell-beat: #221d19;
  --topbar: rgba(20, 17, 15, .72);
  --tapbeat-on: #3a3128;
  --shadow-c: rgba(0, 0, 0, .22);
  --cloth-m: #3d3d48;
  --cloth-f: #e05046;
}

/* Shared, palette-independent tokens. Skin, hair and shoes are the same in
   every theme - only the clothing follows the accents, which is what tells the
   two roles apart. */
:root {
  --radius: 12px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --skin: #e6b088;
  --hair: #35281e;
  --shoe: #2b2521;
  --cloth-m: #24242b;
  --cloth-f: #c62828;
}

/* Cool, low-light. Good for sensual bachata playlists at 1am. */
html[data-theme="noche"] {
  color-scheme: dark;
  --bg: #0d0f16;
  --bg-tint: #1d2133;
  --bg2: #141824;
  --panel: #171b28;
  --panel2: #1e2333;
  --line: #2a3043;
  --line2: #3a4257;
  --text: #eef1f8;
  --text2: #ccd2e2;
  --muted: #8e97b0;
  --faint: #5d657e;
  --faint2: #4a5168;
  --accent: #8b7bf5;
  --accent-dim: #4a3f96;
  --accent-ink: #100c26;
  --accent-soft: rgba(139, 123, 245, .16);
  --accent2: #4fd1c5;
  --accent2-dim: #1e4a4a;
  --accent2-ink: #05231f;
  --accent2-soft: rgba(79, 209, 197, .35);
  --danger: #f26d6d;
  --danger-dim: #5b2b2f;
  --ok: #6ed49a;
  --ok-dim: #23492f;
  --cell: #12151f;
  --cell-beat: #191d2b;
  --topbar: rgba(13, 15, 22, .74);
  --tapbeat-on: #2b3145;
  --shadow-c: rgba(0, 0, 0, .22);
  --cloth-m: #3d3d48;
  --cloth-f: #e05046;
}

/* High-contrast club palette. */
html[data-theme="neon"] {
  color-scheme: dark;
  --bg: #08080c;
  --bg-tint: #1a1030;
  --bg2: #101018;
  --panel: #14141d;
  --panel2: #1c1c28;
  --line: #2b2b3d;
  --line2: #3e3e55;
  --text: #ffffff;
  --text2: #dcdcea;
  --muted: #9494ae;
  --faint: #62627d;
  --faint2: #4d4d64;
  --accent: #ff2e88;
  --accent-dim: #8c1349;
  --accent-ink: #ffffff;
  --accent-soft: rgba(255, 46, 136, .18);
  --accent2: #00e5ff;
  --accent2-dim: #0a5c66;
  --accent2-ink: #002229;
  --accent2-soft: rgba(0, 229, 255, .4);
  --danger: #ff5252;
  --danger-dim: #6b1f1f;
  --ok: #4afa70;
  --ok-dim: #1f4a22;
  --cell: #0d0d14;
  --cell-beat: #16161f;
  --topbar: rgba(8, 8, 12, .78);
  --tapbeat-on: #2a2a3a;
  --shadow-c: rgba(0, 0, 0, .22);
  --cloth-m: #3d3d48;
  --cloth-f: #e05046;
}

/* Warm paper - the default. Readable in a bright studio or in daylight. */
:root,
html[data-theme="sala"] {
  color-scheme: light;
  --bg: #f7f2e9;
  --bg-tint: #ffffff;
  --bg2: #efe7d9;
  --panel: #fffcf6;
  --panel2: #f3ece0;
  --line: #e0d5c2;
  --line2: #cbbda4;
  --text: #241d15;
  --text2: #43382a;
  --muted: #7a6c58;
  --faint: #9c8e79;
  --faint2: #b3a591;
  --accent: #c47816;
  --accent-dim: #f0d5a8;
  --accent-ink: #fffaf2;
  --accent-soft: rgba(196, 120, 22, .13);
  --accent2: #10796e;
  --accent2-dim: #b7ded8;
  --accent2-ink: #f0fffd;
  --accent2-soft: rgba(16, 121, 110, .35);
  --danger: #b4331f;
  --danger-dim: #f0c4bb;
  --ok: #3d7d33;
  --ok-dim: #c3ddbd;
  --cell: #ece3d3;
  --cell-beat: #e0d4bd;
  --topbar: rgba(247, 242, 233, .82);
  --tapbeat-on: #e5d7bc;
  --shadow-c: rgba(90, 70, 40, .18);
}

/* Maximum contrast, minimum decoration. */
html[data-theme="mono"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-tint: #161616;
  --bg2: #0d0d0d;
  --panel: #121212;
  --panel2: #1c1c1c;
  --line: #333333;
  --line2: #4f4f4f;
  --text: #ffffff;
  --text2: #e2e2e2;
  --muted: #b0b0b0;
  --faint: #8a8a8a;
  --faint2: #6e6e6e;
  --accent: #ffffff;
  --accent-dim: #575757;
  --accent-ink: #000000;
  --accent-soft: rgba(255, 255, 255, .16);
  --accent2: #ffd400;
  --accent2-dim: #6b5a00;
  --accent2-ink: #1a1500;
  --accent2-soft: rgba(255, 212, 0, .4);
  --danger: #ff6b6b;
  --danger-dim: #5c2020;
  --ok: #6ee36e;
  --ok-dim: #1f4a1f;
  --cell: #0a0a0a;
  --cell-beat: #1a1a1a;
  --topbar: rgba(0, 0, 0, .8);
  --tapbeat-on: #2e2e2e;
  --shadow-c: rgba(0, 0, 0, .22);
  --cloth-m: #3d3d48;
  --cloth-f: #e05046;
}

/* "System" follows the OS: it takes the dark palette above, and this swaps
   it for the light one when the OS asks for light. */
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bg: #f7f2e9; --bg-tint: #ffffff; --bg2: #efe7d9;
    --panel: #fffcf6; --panel2: #f3ece0;
    --line: #e0d5c2; --line2: #cbbda4;
    --text: #241d15; --text2: #43382a; --muted: #7a6c58;
    --faint: #9c8e79; --faint2: #b3a591;
    --accent: #c47816; --accent-dim: #f0d5a8; --accent-ink: #fffaf2;
    --accent-soft: rgba(196, 120, 22, .13);
    --accent2: #10796e; --accent2-dim: #b7ded8; --accent2-ink: #f0fffd;
    --accent2-soft: rgba(16, 121, 110, .35);
    --danger: #b4331f; --danger-dim: #f0c4bb;
    --ok: #3d7d33; --ok-dim: #c3ddbd;
    --cell: #ece3d3; --cell-beat: #e0d4bd;
    --topbar: rgba(247, 242, 233, .82); --tapbeat-on: #e5d7bc;
    --shadow-c: rgba(90, 70, 40, .18);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(1200px 700px at 20% -10%, var(--bg-tint) 0%, var(--bg) 60%);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100%;
}

h1, h2, h3 { margin: 0 0 6px; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
p { margin: 0 0 10px; }
kbd {
  font: 12px var(--mono); background: var(--panel2); border: 1px solid var(--line2);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px;
}

/* ---------- layout ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding: 16px 26px;
  border-bottom: 1px solid var(--line); background: var(--topbar);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 14px; }
svg.logo { width: 40px; height: 40px; display: block; flex: 0 0 40px; }
.lg-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: .5; }
.lg-ink { fill: var(--accent); }
.lg-ink .lg-limb { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; }
.tag { margin: 0; color: var(--muted); font-size: 12.5px; }
.topright { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.tabs { display: flex; gap: 4px; background: var(--panel); padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; color: var(--muted); padding: 8px 16px; border-radius: 7px;
  font: inherit; font-weight: 550; cursor: pointer;
}
.tabs button:hover { color: var(--text); }
.tabs button.active { background: var(--accent); color: var(--accent-ink); }

.themepick { display: flex; align-items: center; gap: 7px; }
.themepick label { font-size: 12px; color: var(--muted); }
.themepick select { padding: 6px 9px; font-size: 13px; }

.view { display: none; max-width: 1180px; margin: 0 auto; padding: 22px 26px 10px; }
.view.active { display: block; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 18px;
}
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.row { display: flex; align-items: center; }
.row.gap { gap: 12px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; gap: 12px; }
.sub, .hint { color: var(--muted); font-size: 13px; }
.hint { margin: 6px 0 0; }

/* ---------- controls ---------- */
button {
  font: inherit; cursor: pointer; border-radius: 9px; border: 1px solid var(--line2);
  background: var(--panel2); color: var(--text); padding: 8px 14px;
  transition: background .12s, border-color .12s, color .12s;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
button.primary:hover { filter: brightness(1.08); }
button.primary.on { background: var(--danger); border-color: var(--danger); color: #fff; }
button.ghost { background: transparent; }
button.big { padding: 11px 22px; font-size: 15px; }
button.small { padding: 5px 11px; font-size: 13px; }
button:disabled { opacity: .4; cursor: not-allowed; }

.styleswitch { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.styleswitch button { background: none; border: 0; color: var(--muted); padding: 7px 14px; border-radius: 7px; font-size: 13.5px; }
.styleswitch button.active { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

input[type=search], select, input[type=file] {
  font: inherit; background: var(--bg2); color: var(--text);
  border: 1px solid var(--line2); border-radius: 9px; padding: 8px 12px;
}
input[type=search] { min-width: 200px; }
input[type=range] { accent-color: var(--accent); width: 150px; }
.bpmbox { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.bpmbox output { font: 13px var(--mono); color: var(--accent); min-width: 72px; }
.field { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.field label { font-size: 13px; color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); }
.pill {
  font: 12px var(--mono); background: var(--bg2); border: 1px solid var(--line);
  color: var(--muted); padding: 3px 9px; border-radius: 20px;
}

/* ---------- the counter ---------- */
.counter { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 18px 0 8px; }
.counter .beat {
  position: relative; aspect-ratio: 1 / .78; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font: 600 30px/1 var(--mono); color: var(--faint);
  transition: background .06s, color .06s, border-color .06s, transform .06s;
}
.counter .beat.tapbeat { color: var(--faint2); }
.counter .beat small {
  position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  font: 10px/1 system-ui; letter-spacing: .08em; text-transform: uppercase; color: var(--faint2);
}
.counter .beat.on { background: var(--accent-dim); border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.counter .beat.on.one { background: var(--accent); color: var(--accent-ink); }
.counter .beat.on.tapbeat { background: var(--tapbeat-on); border-color: var(--line2); color: var(--muted); transform: none; }
.counter.hiddenmode .beat { color: transparent; }
.counter.hiddenmode .beat small { color: transparent; }
.counter.hiddenmode .beat.on { background: var(--bg2); border-color: var(--line); transform: none; }
.counter.small .beat { aspect-ratio: 1 / .5; font-size: 20px; }
.counter-caption { color: var(--muted); font-size: 12.5px; margin: 0; }

/* ---------- mixer ---------- */
.mixer { list-style: none; margin: 0; padding: 0; }
.mixer li {
  display: flex; align-items: flex-start; gap: 11px; padding: 9px 0;
  border-top: 1px solid var(--line);
}
.mixer li:first-child { border-top: 0; }
.mixer .name { font-weight: 600; font-size: 14px; }
.mixer .why { color: var(--muted); font-size: 12.5px; }
.mixer .grow { flex: 1; min-width: 0; }
.mixer .solo {
  font: 600 11px/1 system-ui; letter-spacing: .06em; padding: 5px 9px; border-radius: 6px;
  background: transparent; border: 1px solid var(--line2); color: var(--muted);
}
.mixer .solo.on { background: var(--accent2); border-color: var(--accent2); color: var(--accent2-ink); }
.mixer input[type=checkbox] { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------- rhythm grid ---------- */
.grid-wrap { overflow-x: auto; }
.grid { display: grid; gap: 3px; min-width: 520px; }
.grid .grow { display: grid; grid-template-columns: 92px repeat(32, 1fr); gap: 3px; align-items: center; }
.grid .glabel { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid .cell { height: 17px; border-radius: 3px; background: var(--cell); border: 1px solid transparent; }
.grid .cell.beat { background: var(--cell-beat); }
.grid .cell.hit { background: var(--accent); }
.grid .cell.hit.soft { background: var(--accent-dim); }
.grid .cell.now { border-color: var(--accent2); }
.grid .head .cell {
  height: auto; background: none; font: 10px/1.4 var(--mono); color: var(--faint); text-align: center;
}
.grid .head .cell.beat { color: var(--text); }

/* ---------- drill modes / scoring ---------- */
.modes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.modes button { padding: 7px 13px; font-size: 13.5px; }
.modes button.active { background: var(--accent2); border-color: var(--accent2); color: var(--accent2-ink); font-weight: 600; }

.tapzone {
  margin: 14px 0; padding: 16px; border-radius: 10px; text-align: center;
  border: 1px dashed var(--line2); background: var(--bg2); cursor: pointer;
  transition: background .08s, border-color .08s;
}
.tapzone.flash { background: var(--accent-dim); border-color: var(--accent); }
.tapzone-key { font: 600 12px var(--mono); letter-spacing: .2em; color: var(--muted); }
.tapzone-text { font-size: 15px; margin-top: 4px; }

.score { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.score > div { display: flex; flex-direction: column; }
.score-num { font: 600 22px var(--mono); color: var(--accent); }
.score-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.feedback { margin-top: 12px; min-height: 44px; font-size: 14px; }
.feedback .good { color: var(--ok); }
.feedback .near { color: var(--accent); }
.feedback .bad { color: var(--danger); }
.feedback .meter { height: 6px; background: var(--bg2); border-radius: 4px; margin-top: 8px; position: relative; overflow: hidden; }
.feedback .meter i { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--accent2); }
.feedback .meter b { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line2); }

.earguide h3 { font-size: 13.5px; margin: 14px 0 3px; color: var(--accent); }
.earguide h3:first-child { margin-top: 0; }
.earguide p { font-size: 13.5px; color: var(--text2); margin: 0 0 6px; }

.steps { margin: 12px 0; padding-left: 0; list-style: none; font-size: 13.5px; color: var(--text2); }
.steps li { margin-bottom: 7px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- move visuals ---------- */
.viz { display: block; width: 100%; height: auto; }
.viz .floor { fill: var(--bg2); stroke: var(--line); }
.viz .path { fill: none; stroke-width: 2; stroke-dasharray: 5 4; }
.viz .path.l { stroke: var(--accent); }
.viz .path.f { stroke: var(--accent2); }
.viz .fig-l { fill: var(--accent); }
.viz .fig-f { fill: var(--accent2); }
.viz .fig-x { fill: var(--muted); }
.viz .ghost { opacity: .3; }
.viz .ink-l { fill: var(--accent-ink); font: 600 11px var(--mono); }
.viz .ink-f { fill: var(--accent2-ink); font: 600 11px var(--mono); }
.viz .ink-x { fill: var(--bg); font: 600 11px var(--mono); }
.viz .hand { fill: none; stroke: var(--text2); stroke-width: 1.5; stroke-dasharray: 2 3; }
.viz .lbl { fill: var(--muted); font: 9.5px system-ui; letter-spacing: .04em; }
.viz .spin { fill: none; stroke-width: 1.8; }
.viz .spin.f { stroke: var(--accent2); }
.viz .spin.l { stroke: var(--accent); }

.vizbox { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.vizbox .vizcap { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.vizgrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 720px) { .vizgrid { grid-template-columns: 1fr; } }

/* foot timeline */
.feet { display: grid; grid-template-columns: 46px repeat(8, 1fr); gap: 4px; align-items: center; }
.feet .rlabel { font: 600 10px system-ui; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.feet .fcell {
  border-radius: 6px; background: var(--cell); border: 1px solid var(--line);
  text-align: center; padding: 7px 0 6px; font: 600 12px var(--mono); color: var(--faint);
  position: relative;
}
.feet .fcell.L { background: var(--accent-dim); color: var(--text); border-color: var(--accent); }
.feet .fcell.R { background: var(--accent2-dim); color: var(--text); border-color: var(--accent2); }
.feet .fcell.tap { background: var(--cell-beat); color: var(--muted); border-style: dashed; }
.feet .fcell.now { outline: 2px solid var(--accent); outline-offset: 1px; }
.feet .num { font: 10px var(--mono); color: var(--faint); text-align: center; }
.feetkey { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 9px; font-size: 11.5px; color: var(--muted); }
.feetkey span { display: inline-flex; align-items: center; gap: 5px; }
.feetkey i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.feetkey i.l { background: var(--accent-dim); border: 1px solid var(--accent); }
.feetkey i.r { background: var(--accent2-dim); border: 1px solid var(--accent2); }
.feetkey i.t { background: var(--cell-beat); border: 1px dashed var(--line2); }

/* ---------- move library ---------- */
/* min-width:0 so a wide child cannot force the column - and therefore the page
   - to grow. Grid items default to min-width:auto, which means "at least as wide
   as my content", and that is how one oversized canvas drags the whole layout. */
.library { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
/* The filter belongs to the list, so it lives with it - but on a wide screen it
   still reads as a bar across the top of both columns. */
#movesFilter { grid-column: 1 / -1; }
.library > * { min-width: 0; }
@media (max-width: 900px) { .library { grid-template-columns: 1fr; } }
.movelist { display: flex; flex-direction: column; gap: 8px; max-height: 78vh; overflow-y: auto; padding-right: 4px; }
.movecard {
  text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start;
}
.movecard:hover { border-color: var(--accent-dim); }
.movecard.active { border-color: var(--accent); background: var(--panel2); }
.movecard .mc-body { flex: 1; min-width: 0; }
.movecard .mc-thumb { width: 92px; flex: 0 0 92px; }
.movecard .mc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.movecard .mc-name { font-weight: 640; font-size: 14.5px; }
.movecard .mc-sum { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.badge {
  font: 600 10px system-ui; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; background: var(--bg2); color: var(--muted); border: 1px solid var(--line);
  white-space: nowrap;
}
.badge.l1 { color: var(--ok); border-color: var(--ok-dim); }
.badge.l2 { color: var(--accent); border-color: var(--accent-dim); }
.badge.l3 { color: var(--danger); border-color: var(--danger-dim); }
.badge.concept { color: var(--accent2); border-color: var(--accent2-dim); }

.movedetail { min-height: 300px; }
.movedetail .md-head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 14px; }
.movedetail .md-aka { color: var(--muted); font-size: 13px; font-style: italic; }

/* ---- the three views read as one numbered flow, not three apps ---- */
.tabs button { display: inline-flex; align-items: baseline; gap: 7px; }
.tabs button b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--line); color: var(--bg);
  font-size: 10px; font-weight: 700;
}
.tabs button.active b { background: var(--accent); color: var(--bg); }
.tabs button span { font-size: 11px; color: var(--muted); font-weight: 400; }
.tabs button.active span { color: inherit; opacity: .7; }

/* the dance you are working on is the top-level choice */
.stylepick select { font-weight: 600; }

.nowdancing { display: flex; align-items: center; gap: 10px; }
.nowdancing strong { font-size: 15px; }

/* where to go next, from a move */
.handoff { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }

.linkish { cursor: pointer; }
.linkish:hover { color: var(--accent); text-decoration: underline; }

.scrubread {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px dotted var(--line);
}
.scrubread:hover { color: var(--accent); }
.scrubread.copied { color: var(--accent); border-bottom-color: transparent; }

/* Two kinds of switch on the viz control row: how you are shown the move
   (sound, cues) and how the move itself is danced (circle, travelling). */
.ctlgroup { display: inline-flex; align-items: center; gap: 10px; }
.ctlgroup + .ctlgroup { margin-left: 4px; padding-left: 14px; border-left: 1px solid var(--line); }
.ctlgroup.dancegrp .check { color: var(--accent); }

/* say-it-out-loud button, sitting on the move name */
.movedetail h2 .sayname {
  margin-left: 10px;
  padding: 0;
  width: 24px; height: 24px;
  line-height: 1;
  font-size: 10px;
  vertical-align: 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cell);
  color: var(--accent);
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s;
}
.movedetail h2 .sayname:hover { background: var(--accent); color: var(--bg); }
.movedetail h2 .sayname.saying { background: var(--accent); color: var(--bg); transform: scale(1.15); }
.movedetail .md-phon { margin-top: 2px; font-size: 13px; }
.movedetail .md-phon .phon {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .02em;
  color: var(--ink);
}
.movedetail .md-phon .phonnote { margin-left: 8px; color: var(--muted); font-size: 12px; }

/* the missing-voice notice, with the fix folded up behind it */
.movedetail .md-phon .fixlink {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.movedetail .md-phon .fixlink:hover,
.movedetail .md-phon .fixlink.open { color: var(--accent); }
.voicefix {
  margin: 8px 0 2px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--cell);
  max-width: 620px;
}
.voicefix strong { display: block; font-size: 13px; margin-bottom: 6px; }
.voicefix ol { margin: 0 0 8px; padding-left: 20px; font-size: 13px; color: var(--text2); }
.voicefix ol li { margin-bottom: 4px; }
.voicefix .tryfirst { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.movedetail .md-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.movedetail h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin: 20px 0 8px; }
.movedetail p { font-size: 14px; color: var(--text2); }
.movedetail ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--text2); }
.movedetail ul li { margin-bottom: 5px; }
.movedetail .placeholder { color: var(--muted); text-align: center; padding: 60px 20px; }

.counttable { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.counttable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 5px 8px; font-weight: 600; }
.counttable td { padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; color: var(--text2); }
.counttable td.n { font: 600 15px var(--mono); color: var(--accent); width: 34px; }
.counttable tr.tap td.n { color: var(--muted); }
.counttable tr.tap td { color: var(--muted); }
.counttable tr.now td { background: var(--accent-soft); }
.phrase-label { font: 600 12px system-ui; color: var(--accent2); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 4px; }

.md-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
a.link { color: var(--accent2); font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--accent2-soft); }
a.link:hover { border-bottom-color: var(--accent2); }

/* ---------- drill ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; min-height: 34px; align-items: center; }
.chips .empty { color: var(--muted); font-size: 13px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--panel2);
  border: 1px solid var(--line2); border-radius: 20px; padding: 5px 6px 5px 13px; font-size: 13px;
}
.chip.on { border-color: var(--accent); background: var(--accent-dim); }
.chip button { background: none; border: 0; color: var(--muted); padding: 0 5px; font-size: 15px; line-height: 1; }
.chip button:hover { color: var(--danger); }

.picker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.picker button { padding: 6px 12px; font-size: 13px; }

.drillstage { background: linear-gradient(160deg, var(--panel2), var(--panel)); }
.stage-label { font: 600 11px system-ui; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; }
.stage-move { font-size: 27px; margin: 0; }
.stage-next { font-size: 18px; margin: 0; color: var(--muted); text-align: right; }
.stage-sub { color: var(--accent2); font-size: 12.5px; margin: 4px 0 0; }
.stagegrid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.stagegrid > * { min-width: 0; }
@media (max-width: 820px) { .stagegrid { grid-template-columns: 1fr; } }
.cues { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cues.single { grid-template-columns: 1fr; }
.cue { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-height: 92px; }
.cue .role { font: 600 11px system-ui; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cue .text { font-size: 19px; line-height: 1.35; }
.cue .text.tapline { color: var(--muted); }

.foot { max-width: 1180px; margin: 10px auto 40px; padding: 0 26px; color: var(--faint); font-size: 12px; }
.foot p { margin: 0; }

/* ---------- move viz panel ---------- */
.vizpanel { margin-bottom: 16px; }
.viztabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.viztabs button { padding: 6px 12px; font-size: 13px; }
.viztabs button.active { background: var(--accent2); border-color: var(--accent2); color: var(--accent2-ink); font-weight: 600; }
.viztabs .spacer { flex: 1; }
.vizstage { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.vizstage .viz { max-height: 300px; }
.vizcap { color: var(--muted); font-size: 12.5px; margin: 9px 2px 0; }
.vizphrase { font: 600 11px system-ui; letter-spacing: .06em; text-transform: uppercase; color: var(--accent2); margin: 0 0 7px; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 560px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.stillcell { background: var(--cell); border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.stillcell.tap { border-style: dashed; opacity: .82; }
.stillnum { font: 600 10px var(--mono); color: var(--muted); text-align: center; padding: 2px 0 3px; }

.movecard .mc-thumb .viz { height: 52px; }
.movecard .mc-thumb .floor { fill: var(--cell); }

.drillviz { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.drillviz .viz { max-height: 200px; }


/* ---------- 3D stage ---------- */
.orbit { cursor: grab; touch-action: none; user-select: none; }
.orbit:active { cursor: grabbing; }
.vizstage, .drillviz { position: relative; overflow: hidden; }
canvas.stage3d { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }

/* cue labels ride on top of the canvas, positioned by projecting their 3D anchor */
.cuelayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cue3d {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  font: 700 11px system-ui; letter-spacing: .03em; padding: 2px 8px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line2); color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  transform-origin: 50% 100%;
}
.cue3d.badge { font-size: 10px; padding: 1px 6px; font-weight: 800; }
/* Colour says WHOSE cue it is. Colouring by kind made a leader's "tap" show up
   in the follower's colour, which reads as the cue belonging to her. */
.cue3d.role-l { color: var(--accent); border-color: var(--accent-dim); }
.cue3d.role-f { color: var(--accent2); border-color: var(--accent2-dim); }
.cue3d i { font-style: normal; font-weight: 800; margin-right: 5px; opacity: .95; }
.cue3d.role-l i { color: var(--accent); }
.cue3d.role-f i { color: var(--accent2); }
.cue3d.tap { font-weight: 800; }
.cue3d.hold { opacity: .85; }
.cue3d.hands { color: var(--text2); border-color: var(--line2); font-weight: 650; }

.filternote {
  width: 100%; text-align: left; font-size: 12.5px; color: var(--muted);
  background: var(--accent-soft); border: 1px solid var(--accent-dim);
  border-radius: 8px; padding: 7px 11px;
}
.filternote strong { color: var(--accent); }
.filternote:hover { border-color: var(--accent); color: var(--text); }

.stillcell img.still { display: block; width: 100%; height: auto; border-radius: 6px; }
.movecard .mc-thumb img { display: block; width: 100%; height: auto; border-radius: 6px; }
.camrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.camrow button { padding: 4px 10px; font-size: 12px; }
.camhint { color: var(--muted); font-size: 11.5px; margin-left: auto; }

.vizstage .viz.people { max-height: 340px; }
.drillviz .viz.people { max-height: 250px; }
.movecard .mc-thumb .viz.people { height: 64px; }

/* ---------- scrub bar ---------- */
.scrubrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.scrubrow .scrub { flex: 1; width: auto; accent-color: var(--accent); cursor: grab; }
.scrubrow .scrub:active { cursor: grabbing; }
.scrubread {
  font: 600 12px var(--mono); color: var(--muted); min-width: 118px; text-align: right;
}


/* ============================================================================
   SMALL SCREENS

   The layout was built for a desktop and broke in three distinct ways on a
   phone, all of which needed different fixes rather than one blanket rule:

   1. Things that must SHRINK - paddings, type, the top bar - because a desktop
      header ate a third of an 812px screen before any content appeared.
   2. Things that must STACK - the two-column panels - which mostly already had
      breakpoints, except their children could still force the column wider than
      the screen. Grid and flex children default to min-width:auto, meaning "at
      least as wide as my content", so one wide table drags the page sideways.
   3. Things that CANNOT shrink and must SCROLL instead - the 32-step rhythm
      grid, the eight-count tables. Squeezing a 32-column grid into 375px makes
      it unreadable; letting it scroll inside its own box keeps it usable and
      keeps the page from scrolling sideways.
   ========================================================================= */

/* Nothing may push the page wider than the screen. */
html, body { max-width: 100%; overflow-x: hidden; }
.view, .panel, .cols, .library, .stagegrid, .vizgrid { min-width: 0; }
.view > *, .cols > *, .library > *, .stagegrid > *, .vizgrid > *, .panel > * { min-width: 0; }

/* Wide, dense things scroll inside themselves rather than stretching the page. */
.counttable-wrap, #vizFeet, #drillFeet { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tablets and small laptops: the desktop bar still fits horizontally but wraps
   into three rows and takes 197px of height. It only needs tightening, not the
   full phone treatment - the tab sub-labels are still useful here. */
@media (max-width: 900px) {
  .topbar { padding: 10px 16px; gap: 10px 14px; }
  .tag { display: none; }
  .brand h1 { font-size: 21px; }
  svg.logo { width: 32px; height: 32px; flex-basis: 32px; }
  .topright { gap: 8px 10px; }
  .themepick label { font-size: 11px; }
  .themepick select { padding: 6px 8px; font-size: 12.5px; }
}

@media (max-width: 860px) {
  .stagegrid { grid-template-columns: 1fr; }
  .view { padding: 16px 16px 10px; }
}

@media (max-width: 680px) {
  /* --- top bar: three tight rows instead of one wide one --- */
  .topbar {
    padding: 10px 14px; gap: 10px;
    flex-direction: column; align-items: stretch;
  }
  .brand { gap: 10px; }
  .brand h1 { font-size: 20px; }
  svg.logo { width: 30px; height: 30px; flex-basis: 30px; }
  .tag { display: none; }              /* the strapline is the first thing to go */

  .topright { gap: 8px; align-items: stretch; flex-direction: column; }
  .tabs { width: 100%; justify-content: space-between; }
  .tabs button { flex: 1 1 0; padding: 9px 4px; justify-content: center; font-size: 13px; }
  .tabs button span { display: none; }  /* "rhythm lab" etc - the number and word carry it */

  /* the four pickers become a two-up grid that always fits */
  .topright { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .topright .tabs { grid-column: 1 / -1; }
  .themepick { flex-direction: column; align-items: stretch; gap: 3px; }
  .themepick label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
  .themepick select { width: 100%; padding: 8px 9px; font-size: 13px; }

  /* --- content --- */
  .view { padding: 14px 12px 10px; }
  .panel { padding: 14px; }
  .cols { gap: 14px; }

  .counter { gap: 5px; margin: 12px 0 6px; }
  .counter .beat { font-size: 17px; border-radius: 7px; aspect-ratio: 1 / .92; }
  .counter.small .beat { font-size: 14px; aspect-ratio: 1 / .7; }
  /* The "THE ONE" / "TAP" tags are absolutely positioned at the bottom of a
     cell, and once the cell is phone-sized they land on top of the number. The
     caption under the row already says what 1, 4 and 8 mean. */
  .counter .beat small { display: none; }

  /* the eight-count table is genuinely wide; let it scroll */
  .counttable { font-size: 12px; min-width: 460px; }
  .counttable td, .counttable th { padding: 5px 6px; }

  .feet { min-width: 420px; }

  /* controls wrap instead of squeezing, and stay thumb-sized */
  .viztabs, .row.gap { flex-wrap: wrap; }
  /* Thumb-sized controls - but NOT every button. A move card is a <button> too,
     and as a flex-column child a min-height plus the default flex-shrink
     squashed 96px cards down to 38px with the text spilling out of them. */
  .tabs button, .styleswitch button, .viztabs button, select,
  .ghost, .primary, button.small { min-height: 38px; }
  .movecard { flex-shrink: 0; min-height: 0; }

  /* Two controls stayed too small for a fingertip: the SOLO buttons on each
     mixer row, and the little x that removes a move from a drill. */
  .mixrow .solo, .solo { min-height: 32px; padding-inline: 12px; }
  .chip button { min-width: 30px; min-height: 30px; font-size: 16px; }

  /* the level filter scrolls rather than being clipped */
  .styleswitch { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .styleswitch button { white-space: nowrap; flex: 0 0 auto; }
  .ctlgroup + .ctlgroup { margin-left: 0; padding-left: 10px; }

  .bpmbox input[type=range] { width: 100% !important; }
  .bpmbox { flex: 1 1 100%; }

  /* Grid and flex children size to their content unless told otherwise, which
     is how an eight-cell counter ends up wider than the panel holding it. */
  .counter .beat, .grid .cell, .grid .glabel, .feet > * { min-width: 0; }
  .counter { grid-template-columns: repeat(8, minmax(0, 1fr)); }

  /* The header scrolls away on a phone instead of holding the top of the
     screen - there is not enough of it to give a third away permanently. */
  .topbar { position: static; }

  .movelist { max-height: 46vh; }
  .movedetail { min-height: 0; }
  .voicefix { max-width: 100%; }
}

@media (max-width: 420px) {
  .tabs button b { display: none; }     /* just Listen / Learn / Practise */
  .tabs button { font-size: 12.5px; padding: 9px 2px; }
  .view { padding: 12px 10px 10px; }
  .panel { padding: 12px; }
  h2 { font-size: 20px; }
  /* NB the pickers stay two-up here. Stacking them one per row was tried and
     made the header TALLER than the desktop one - 369px of a 812px screen
     before any content - which is the opposite of the point. */
}

/* Touch: the stage owns its gestures, so the page must not also pan while you
   are orbiting the camera. */
.vizstage, .drillviz { touch-action: none; }

/* A queued pair that does not actually join up. Worth saying out loud, but it is
   a caution rather than an error - the figures themselves are still correct. */
.seqnote {
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--warn-line, #7a5b1e); border-radius: 8px;
  background: rgba(190, 140, 40, .09);
  font-size: 13px; line-height: 1.45;
}
.seqnote strong { display: block; margin-bottom: 4px; color: var(--warn, #e0b25c); }
.seqnote ul { margin: 0 0 6px; padding-left: 18px; }
.seqnote li { margin: 2px 0; }
.seqnote p { margin: 0; opacity: .75; }

/* ---------------------------------------------------------------------------
   The move list on a phone

   Stacked, the list came first and filled the screen, so the Learn tab opened
   on a wall of moves with no sign that a visualisation existed below it. The
   list is how you CHOOSE; the move itself is what you came to look at. So on a
   narrow screen the list folds away behind a button that names the move you are
   on, and the detail - visualisation first - starts at the top of the screen.

   Desktop is a two-column layout where both fit at once, and is left alone. */
.listtoggle { display: none; }

@media (max-width: 900px) {
  /* This has to read as a CONTROL, not a caption. A name and a chevron alone
     looked like a heading that happened to have a mark after it - there was
     nothing to say that more moves were behind it, or how many. So it names
     what you are looking at on the left, and on the right carries an explicit,
     accent-coloured invitation with the count in it. */
  .listtoggle {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 10px 12px 10px 14px; text-align: left;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--panel); color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }
  .listtoggle .lt-now { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .listtoggle .lt-eyebrow {
    font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    opacity: .55;
  }
  .listtoggle .lt-label {
    font-size: 15px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* the invitation: coloured, boxed, and counted, so it is plainly a button */
  .listtoggle .lt-cta {
    flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
    padding: 6px 10px; border-radius: 999px;
    background: var(--accent-soft, rgba(176, 122, 44, .13));
    color: var(--accent, #b07a2c);
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
  }
  /* a chevron that turns to point the way the list will move */
  .listtoggle .lt-mark {
    flex: 0 0 auto; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
  }
  .library.browsing .listtoggle .lt-mark { transform: rotate(-135deg) translate(-1px, -1px); }
  .library.browsing .listtoggle { border-color: var(--accent, #b07a2c); }

  /* Folded away by default: the move you are looking at gets the screen. */
  .library .movelist { display: none; }
  .library.browsing .movelist { display: flex; max-height: 62vh; }
  /* while browsing, the detail is out of the way rather than pushed down the page */
  .library.browsing .movedetail { display: none; }
}

@media (max-width: 900px) {
  /* Levels and search are for finding a move, so they appear with the list they
     filter - and BELOW the button that opens it. Opening a panel above the thing
     you just tapped pushes it down the screen, so the control moves out from
     under your finger just as you look at it. */
  .library { display: flex; flex-direction: column; }
  #moveListToggle { order: 0; }
  #movesFilter { order: 1; display: none; }
  #moveList { order: 2; }
  #moveDetail { order: 3; }
  .library.browsing #movesFilter { display: block; }

  /* Inside the visualisation panel the controls came first, which put the stage
     itself off the bottom of the screen: you arrived at a row of buttons with
     no sign of what they drove. The picture goes first and the controls sit
     under it, where a caption belongs. */
  .vizpanel { display: flex; flex-direction: column; }
  .vizpanel #vizStage { order: -1; margin-bottom: 10px; }

  /* The previous/next-move links are navigation, not content: useful at the
     bottom of a move, wasteful above its title. */
  .md-head .handoff { order: 2; margin-top: 12px; }
  .md-head { display: flex; flex-direction: column; }

  /* On a phone the picture comes before the write-up. The name, pronunciation
     and badges are worth having, but they are not worth a screenful ahead of
     the thing you opened the move to see - and the button directly above the
     panel already says which move this is, so nothing is lost by reading the
     title after the shape. */
  #moveDetail { display: flex; flex-direction: column; }
  #moveDetail .vizpanel { order: -1; margin-bottom: 4px; }
}

/* The hold, given its own line rather than a fourth grey badge. */
.md-hold {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 14px;
}
.md-hold .mh-key {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  opacity: .55;
}
.md-hold .mh-val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.md-hold .mh-arrow { opacity: .5; }

/* The written position, alongside the modelled one - it carries detail the
   geometry does not, like which hands are joined. */
.md-hold .mh-note { opacity: .6; font-size: 12.5px; }
.md-hold .mh-note::before { content: "·"; margin-right: 8px; opacity: .7; }

/* The saved combinations, which now vary by style rather than being three
   fixed buttons. */
.presetlist { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* ---------------------------------------------------------------------------
   The drill's sequence panel

   Building a sequence is something you do once; running it is what you do for
   the next twenty minutes. Chips, seven preset buttons and the whole move
   picker was a screenful before you reached the thing you came to watch, and on
   a phone it WAS the screen. So it folds, and the head carries a summary - how
   many moves, how many eights, the first few names - because folded should
   still tell you what is in there.
   ------------------------------------------------------------------------ */
.seqpanel { padding: 0; overflow: hidden; }
.seqhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 12px 14px; text-align: left;
  background: none; border: 0; border-radius: 0; color: var(--ink);
}
.seqhead .sq-now { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seqhead .sq-eyebrow {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  opacity: .55;
}
.seqhead .sq-label {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seqhead .sq-cta {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--accent-soft, rgba(176, 122, 44, .13));
  color: var(--accent, #b07a2c);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.seqhead .sq-mark {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.seqpanel.open .seqhead .sq-mark { transform: rotate(-135deg) translate(-1px, -1px); }
.seqbody { display: none; padding: 0 14px 14px; }
.seqpanel.open .seqbody { display: block; }
.seqpanel .seqnote { margin: 0 14px 14px; }

/* The drill's scrub bar sits under the stage controls, like the library's. */
#drillScrubRow { margin: 6px 0 10px; }

@media (max-width: 900px) {
  /* On a phone the drill reads top to bottom: what you are dancing, the count
     you are on, then the figures. The option switches and the scrub bar are
     things you reach for between runs, not while dancing, so they sit under the
     picture rather than pushing it off the bottom of the screen. */
  .drillstage { display: flex; flex-direction: column; }
  .drillstage .stagegrid { order: 1; }
  .drillstage #drillOptions { order: 2; }
  .drillstage #drillScrubRow { order: 3; margin-top: 4px; }
}