/* No Cover Charge · Solo Sessions styles: take a chorus over a backing track, play the session chorus by chorus,
   thumb your favorite. Linked from both hosts (GuitarSuperSystem/wwwroot/index.html,
   GuitarSuperSystem.Web/Components/App.razor) after ncc/ncc.css with the shared build stamp, so it can use the
   tokens. Plain CSS (Tailwind does not compile this file): every rule sits under a .jm-* class, colours come from
   the var(--n-*) tokens (gold = --n-amber), motion from the ncc.css kit.

   Roots: .jm-page (SoloSession, SoloLeaderboard), .jm-wave (JamWave), .jm-mix (JamMix), .jm-rec (JamRecorder's
   sheet panel: the sheet moves to <body>, so nothing here reaches it through a page ancestor), .jm-feed (the
   session on a Backstage card and post), and the Solo Sessions blocks at the end: .jm-solo-strip (SoloSlotStrip),
   .jm-solo-card / .jm-solo-rail (the Tracks rail, SoloRailCard), .jm-solo-live (SoloLiveLine), .jm-solo-chain
   (the chain player), .jm-solo-row (SoloChorusRow), .jm-solo-thumb (SoloThumbButton), .jm-solo-hero (a released
   session), .jm-solo-lb (the leaderboard), .jm-solo-players (the Backstage card's players), .jm-lab (Admin › Jam
   Lab's timing editor), .jm-scale (ScaleFretboard) with .jm-scale-card (ScaleCard on the session page) and
   .jm-scale-bar / .jm-scale-panel (the recorder's Scale chip).

   Light theme: everything follows html[data-theme] through the tokens. The Backstage card's player is an
   .n-dark island in its markup (it stands in for media, like a clip). The few values with no token keep the
   ncc.css pattern: dark on :root and .n-dark, light under html[data-theme="light"]. */
:root, .n-dark {
  --jm-knob: #fff;
  --jm-knob-shadow: 0 2px 6px rgba(0,0,0,.5);
  --jm-stop-ring: 0 0 0 8px var(--n-red-wash);
}
html[data-theme="light"] {
  /* A white thumb on a white card needs an edge to read as a handle. */
  --jm-knob-shadow: 0 0 0 1px var(--n-line-2), 0 1px 4px rgba(0,0,0,.26);
}

/* ---- Shared bits ----------------------------------------------------------------------------------- */
/* JamWave: bars from the mix's peaks; the part already heard in red. Flat = one quiet line. */
.jm-wave { display: flex; align-items: center; gap: 2px; min-width: 0; height: 36px; }
.jm-wave > i { display: block; flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--n-line-3); transition: background-color var(--n-dur-fast) ease; }
.jm-wave > i.is-played { background: var(--n-red); }
.jm-wave.is-flat { align-items: center; }
.jm-wave__line { position: relative; display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--n-line-2); overflow: hidden; }
.jm-wave__line > span { position: absolute; inset: 0 auto 0 0; background: var(--n-red); }
.jm-wave--lg { height: 64px; }

/* ---- Pages (SoloSession, SoloLeaderboard) ---------------------------------------------------------- */
.jm-page { color: var(--n-text); }
.jm-head__line { margin: 4px 0 0; }
.jm-head__key { color: var(--n-text); font-weight: 600; }
.jm-start { margin-top: var(--n-3); }
/* The Pro lock on the red button: white on a light wash in both themes (the pink badge vanishes on red). */
.jm-start .n-badge { margin-left: 2px; background: color-mix(in srgb, var(--n-on-red) 22%, transparent); color: var(--n-on-red); box-shadow: none; }
/* One column that can't grow past the page: a card's own min-content (a long nowrap names line) would
   otherwise widen the track and the card past the gutter. */
.jm-stack-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--n-3); }
.jm-page .n-empty { margin-top: var(--n-4); }

/* ---- JamMix: a mix (or a track's preview) with its waveform ------------------------------------------ */
.jm-mix { position: relative; display: flex; align-items: center; gap: var(--n-3); min-width: 0; color: var(--n-text); }
.jm-mix__wave { flex: 1 1 auto; }
.jm-mix__play {
  position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--n-red); color: var(--n-on-red); text-decoration: none; cursor: pointer;
  transition: scale var(--n-dur-fast) ease, background-color var(--n-dur) ease;
}
.jm-mix__play:active { scale: .94; }
.jm-mix__play:disabled { background: var(--n-card-3); color: var(--n-text-3); cursor: default; scale: none; }
.jm-mix__play[aria-busy="true"] { opacity: .8; }
.jm-mix__time { flex: none; }
.jm-mix__state { display: inline-flex; align-items: center; gap: var(--n-2); flex: none; color: var(--n-text-2); font: 600 var(--n-fs-small)/1 var(--n-font-body); }
.jm-mix__signin { flex: none; color: var(--n-pink); font: 600 var(--n-fs-small)/1 var(--n-font-body); text-decoration: none; }
.jm-mix__error { position: absolute; left: 0; right: 0; top: 100%; margin: 4px 0 0; color: var(--n-danger); }
/* Large (the jam player): the waveform full width, the big button over its middle, the times under it. */
.jm-mix--lg { flex-wrap: wrap; gap: var(--n-2); }
.jm-mix--lg > .jm-mix__wave { flex-basis: 100%; height: 64px; }
.jm-mix--lg > .jm-mix__play {
  position: absolute; top: 32px; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; box-shadow: var(--n-shadow-card); --n-icon-size: 32px;
}
.jm-mix--lg > .jm-mix__play:active { scale: .94; }
.jm-mix--lg > .jm-mix__state { position: absolute; top: 32px; left: 50%; translate: -50% -50%; padding: 8px 14px; border-radius: var(--n-r-pill); background: var(--n-float); }
.jm-mix__times { flex-basis: 100%; display: flex; justify-content: space-between; }
.jm-mix--lg .jm-mix__error { position: static; flex-basis: 100%; }
/* With the chorus strip (a session's mix): the strip stands in for the waveform, the times under it. */
.jm-mix--strip { flex-wrap: wrap; row-gap: 6px; }
.jm-mix--strip > .jm-mix__wave { flex: 1 1 0; min-width: 0; }
.jm-mix--strip > .jm-mix__times { flex-basis: 100%; padding-left: calc(44px + var(--n-3)); }
.jm-mix--strip.jm-mix--lg > .jm-mix__wave { flex-basis: auto; height: auto; }
.jm-mix--strip.jm-mix--lg > .jm-mix__play { position: relative; top: auto; left: auto; margin: 0; width: 52px; height: 52px; --n-icon-size: 26px; }
.jm-mix--strip.jm-mix--lg > .jm-mix__state { position: static; translate: none; padding: 0; background: none; }

/* Backstage reactions and comments on a released session (SoloSession). */
.jm-act {
  display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--n-r-pill);
  color: var(--n-text-2); font: 700 var(--n-fs-small)/1 var(--n-font-display); text-decoration: none; font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .jm-act:hover { color: var(--n-pink); } }
/* The recorder's Listening on chips: drawn at 34 like every NChip, the tap target reaches 44. */
.jm-setup__choice .n-chip { position: relative; }
.jm-setup__choice .n-chip::after { content: ""; position: absolute; inset: -5px 0; }

/* ---- JamRecorder (the sheet panel) ------------------------------------------------------------------- */
.jm-rec { color: var(--n-text); }
.jm-rec--live { background: var(--n-sunken); }
.jm-rec__body { display: flex; flex-direction: column; gap: var(--n-2); }
.jm-rec__alert { margin-top: var(--n-2); }
.jm-rec__actions { display: grid; gap: 10px; }

/* The setup card: mic, where you're listening, calibration */
.jm-setup { display: grid; gap: var(--n-2); margin-top: 6px; padding: var(--n-3); border-radius: var(--n-r-md); background: var(--n-card-2); }
.jm-setup__row { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0; min-width: 0; }
.jm-setup__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--n-card); color: var(--n-text-2); }
.jm-setup__val { margin-left: auto; min-width: 0; font: 600 var(--n-fs-small)/1.2 var(--n-font-body); color: var(--n-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-setup__select {
  margin-left: auto; min-width: 0; max-width: 60%; min-height: 44px; padding: 0 24px 0 8px; border: 1px solid var(--n-line-2); border-radius: var(--n-r-sm);
  background: var(--n-card) var(--n-select-chev) no-repeat right 8px center; color: var(--n-text);
  font: 600 var(--n-fs-small)/1.2 var(--n-font-body); -webkit-appearance: none; appearance: none;
}
.jm-setup__choice { display: flex; flex-wrap: wrap; gap: var(--n-2); padding-left: 38px; }
.jm-setup__cal {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 -12px -12px; padding: 0 12px;
  border: 0; border-top: 1px solid var(--n-line); border-radius: 0 0 var(--n-r-md) var(--n-r-md); background: none;
  color: var(--n-amber); font: inherit; text-align: left; cursor: pointer;
}
.jm-setup__cal .jm-setup__ic { background: var(--n-amber-wash); color: var(--n-amber); }
.jm-setup__cal-text { flex: 1 1 auto; min-width: 0; font: 600 var(--n-fs-small)/1.3 var(--n-font-body); }
.jm-setup__cal.is-done { color: var(--n-go); }
.jm-setup__cal.is-done .jm-setup__ic { background: var(--n-go-wash); color: var(--n-go); }
.jm-setup__cal-again { flex: none; color: var(--n-pink); font: 600 var(--n-fs-small)/1 var(--n-font-body); }
.jm-setup__note { margin: 0; padding-left: 38px; }
/* "Listening on" not answered yet: Start recording waits on it, so the choice is marked as the step left. */
.jm-setup__choice.is-needed .n-chip:not(.on) { border-color: var(--n-red-line); color: var(--n-text); }
.jm-setup__need { color: var(--n-text-2); }
/* "Hear the song from the top": its own card under the setup card, the design system's switch (.acc-switch) on the
   right, what will play under it. */
.jm-top { margin-top: 0; }
.jm-top__label { flex: 1 1 auto; min-width: 0; font: 600 var(--n-fs-small)/1.3 var(--n-font-body); color: var(--n-text); }
.jm-top__note { display: flex; align-items: center; gap: 8px; }

/* Calibrate */
.jm-cal { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--n-2); }
.jm-cal__art { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--n-red-wash); color: var(--n-red); }
/* The earbud drawing: line art in the text colour, the chirps in red. */
.jm-cal__drawing { display: block; max-width: 100%; height: auto; color: var(--n-text); }
.jm-cal__drawing .is-dim { opacity: .55; }
.jm-cal__drawing .is-soft { opacity: .35; }
.jm-cal__drawing .is-faint { opacity: .2; }
.jm-cal__drawing .is-bud { fill: var(--n-card-2); }
.jm-cal__drawing .is-wave { stroke: var(--n-red); }
.jm-cal__how { max-width: 300px; margin: var(--n-4) 0 0; }
.jm-cal__text { max-width: 320px; margin: 6px 0 0; }
.jm-cal__dots { display: flex; gap: 14px; margin-top: 18px; }
.jm-cal__dots > span { width: 14px; height: 14px; border-radius: 50%; background: var(--n-card-3); transition: background-color var(--n-dur) ease; }
.jm-cal__dots > span.is-on { background: var(--n-red); box-shadow: 0 0 12px var(--n-red-line); }
.jm-cal__dots.is-running > span { animation: jm-chirp calc(1000ms / var(--n-tempo)) ease-in-out infinite; }
.jm-cal__dots.is-running > span:nth-child(2) { animation-delay: 200ms; }
.jm-cal__dots.is-running > span:nth-child(3) { animation-delay: 400ms; }
.jm-cal__dots.is-running > span:nth-child(4) { animation-delay: 600ms; }
.jm-cal__dots.is-running > span:nth-child(5) { animation-delay: 800ms; }
@keyframes jm-chirp { 0%, 100% { background: var(--n-card-3); } 40% { background: var(--n-red); } }
.jm-cal__result {
  display: flex; align-items: center; gap: var(--n-3); width: 100%; margin-top: 18px; padding: 12px 14px; border-radius: var(--n-r-sm);
  background: var(--n-go-wash); border-left: 3px solid var(--n-go); text-align: left;
}
.jm-cal__result-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--n-go-wash); color: var(--n-go); }
.jm-cal__result-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.jm-cal__result-title { font: 700 var(--n-fs-body)/1.3 var(--n-font-body); color: var(--n-text); }

/* Recording */
.jm-live { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
/* The top bar (Recording.dc.html): cancel, "Recording · Lead guitar" with a live dot, and the mic. */
.jm-live__top { display: flex; align-items: center; gap: var(--n-2); width: 100%; margin-top: calc(-1 * var(--n-2)); }
.jm-live__cancel { flex: none; margin-left: calc(-1 * var(--n-2)); }
.jm-live__rec {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 var(--n-fs-kicker)/1.2 var(--n-font-display); letter-spacing: var(--n-ls-btn); text-transform: uppercase; color: var(--n-text);
}
.jm-live__rec-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-live__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--n-red); box-shadow: 0 0 0 4px var(--n-red-wash);
  animation: jm-rec-pulse calc(1400ms / var(--n-tempo)) ease-in-out infinite;
}
@keyframes jm-rec-pulse { 50% { opacity: .45; } }
.jm-live__mic { flex: none; max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-live__count { margin-top: var(--n-3); font: 700 96px/1 var(--n-font-display); letter-spacing: -.04em; color: var(--n-red); font-variant-numeric: tabular-nums; }
.jm-live__time { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; font-family: var(--n-font-display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.jm-live__now { font-size: 60px; line-height: 1; color: var(--n-text-hi); }
.jm-live__total { font-size: 20px; color: var(--n-text-3); }
.jm-live__track {
  position: relative; width: 100%; margin-top: 14px; padding: 10px 12px; border-radius: var(--n-r-md);
  background: var(--n-card); border: 1px solid var(--n-line);
}
.jm-live__track > .jm-wave { height: 72px; }
/* jam.js sets --jm-pos (0..1 of the track) on [data-jam-playhead] every frame; .NET never does. */
.jm-live__head {
  position: absolute; top: 6px; bottom: 6px; left: calc(12px + (100% - 24px) * var(--jm-pos, 0)); width: 2px;
  border-radius: 1px; background: var(--n-text-hi); pointer-events: none;
}
.jm-live__head::before { content: ""; position: absolute; top: -5px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--n-text-hi); }
.jm-live__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--n-2); width: 100%; margin-top: var(--n-4); }
.jm-live__note { width: 100%; margin: 6px 0 0; text-align: left; }
/* From the top: who's playing while the song comes round to your chorus. */
.jm-live__playing { max-width: 100%; margin: 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-ears { width: 100%; margin-top: var(--n-2); text-align: left; overflow: hidden; }
.jm-ears__row { display: flex; align-items: center; gap: var(--n-3); min-height: 52px; padding: 4px 4px 4px 14px; border-top: 1px solid var(--n-line); }
.jm-ears__row:first-child { border-top: 0; }
.jm-ears__main { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-ears__part { color: var(--n-text-3); }
.jm-ears__who { font-weight: 600; }
.jm-ears__row.is-muted .jm-ears__who { color: var(--n-text-3); }
/* The input meter: jam.js sets --jm-level (0..1, −60..0 dBFS) on [data-jam-meter] every frame. Green, then amber near the
   top, then red, in segments the width of the whole meter however much is lit. */
.jm-meter {
  container-type: inline-size; position: relative; width: 100%; height: 12px; margin-top: var(--n-2);
  background: repeating-linear-gradient(90deg, var(--n-card-3) 0 calc(100% / 22 - 3px), transparent calc(100% / 22 - 3px) calc(100% / 22));
}
.jm-meter__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--jm-level, 0) * 100%); overflow: hidden; }
.jm-meter__fill::before {
  content: ""; display: block; width: 100cqw; height: 100%;
  background: linear-gradient(90deg, var(--n-go) 0 62%, var(--n-amber) 62% 86%, var(--n-red) 86%);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(100cqw / 22 - 3px), transparent calc(100cqw / 22 - 3px) calc(100cqw / 22));
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(100cqw / 22 - 3px), transparent calc(100cqw / 22 - 3px) calc(100cqw / 22));
}
.jm-stop {
  display: grid; place-items: center; width: 84px; height: 84px; margin-top: 22px; padding: 0; border: 0; border-radius: 50%;
  background: var(--n-red); color: var(--n-on-red); box-shadow: var(--jm-stop-ring); cursor: pointer;
  transition: scale var(--n-dur-fast) ease;
}
.jm-stop:active { scale: .94; }
.jm-stop:disabled { opacity: .6; cursor: progress; }
/* Stop in the sheet's footer while recording, on the same sunken ground as the screen. */
.jm-rec--live .n-sheet__foot { border-top: 0; background: var(--n-sunken); }
.jm-live__stopbar { display: flex; flex-direction: column; align-items: center; }
.jm-live__stopbar > .jm-stop { margin-top: 4px; }
.jm-live__stopbar > .n-meta { margin: 8px 0 0; }

/* Review */
.jm-review { padding: var(--n-3); }
.jm-review__play { display: flex; align-items: center; gap: var(--n-3); }
.jm-review__track { position: relative; flex: 1 1 auto; min-width: 0; }
.jm-review__wave { height: 48px; }
/* Where the review is: jam.js sets --jm-pos on it while the take plays. */
.jm-review__head {
  position: absolute; top: 0; bottom: 0; left: calc(100% * var(--jm-pos, 0)); width: 2px; border-radius: 1px;
  background: var(--n-text-hi); pointer-events: none; opacity: 0; transition: opacity var(--n-dur-fast) ease;
}
.jm-review__head.is-on { opacity: 1; }
.jm-review__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; margin-top: var(--n-2); }
/* Play full song, under the review's own play. Your chorus is marked on the waveform while the full song is up. */
.jm-review__full { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: var(--n-3); padding-top: var(--n-3); border-top: 1px solid var(--n-line); }
.jm-review__full-note { flex: 1 1 12em; min-width: 0; }
.jm-review__you { position: absolute; top: 0; bottom: 0; border-radius: var(--n-r-sm); background: var(--n-red-wash); box-shadow: inset 0 0 0 1px var(--n-red-line); pointer-events: none; }
.jm-slider { padding: 14px 16px; }
.jm-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--n-2); }
.jm-slider__val { font: 700 var(--n-fs-h3)/1 var(--n-font-display); color: var(--n-text-hi); font-variant-numeric: tabular-nums; }
.jm-slider__ends { display: flex; justify-content: space-between; gap: var(--n-2); }
.jm-slider__hint { margin: 10px 0 0; }
.jm-slider__level { display: flex; align-items: center; gap: var(--n-3); color: var(--n-text-2); }
/* A centred range: --lo and --hi are the red stretch from 0 to the value (percent of the track). */
.jm-range {
  --lo: 50%; --hi: 50%;
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
}
.jm-range:disabled { opacity: .45; cursor: default; }
.jm-range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--n-line-2) var(--lo), var(--n-red) var(--lo) var(--hi), var(--n-line-2) var(--hi));
}
.jm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: var(--jm-knob); box-shadow: var(--jm-knob-shadow);
}
.jm-range::-moz-range-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--n-line-2) var(--lo), var(--n-red) var(--lo) var(--hi), var(--n-line-2) var(--hi));
}
.jm-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--jm-knob); box-shadow: var(--jm-knob-shadow); }
.jm-range:focus-visible { outline: 2px solid var(--n-pink); outline-offset: 2px; border-radius: var(--n-r-xs); }

/* Uploading and done */
.jm-up { display: flex; flex-direction: column; align-items: center; gap: var(--n-2); padding: var(--n-8) 0; text-align: center; }
.jm-up > p { margin: 0; }
.jm-up__bar { width: 100%; max-width: 320px; height: 4px; border-radius: 2px; background: var(--n-line-2); overflow: hidden; }
.jm-up__bar > span { display: block; height: 100%; background: var(--n-red); transition: width var(--n-dur) ease; }
.jm-up__done { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--n-go-wash); color: var(--n-go); }

/* ---- A session on a Backstage card (JamFeedBlock) ------------------------------------------------------ */
.jm-feed { display: grid; gap: var(--n-3); cursor: default; }
.jm-feed__mix { padding: 8px 12px 8px 8px; border-radius: var(--n-r-md); background: var(--n-sunken); border: 1px solid var(--n-line); }
.jm-feed__line { margin: 0; }
/* The players in slot order: a 44px button each (avatar + chorus number); tap = the mix jumps to their chorus. */
.jm-solo-players { display: flex; flex-wrap: wrap; gap: 4px; }
.jm-solo-pl-wrap { display: contents; }
.jm-solo-pl {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
}
.jm-solo-pl:disabled { cursor: default; }
.jm-solo-pl > .n-avatar { transition: box-shadow var(--n-dur) ease; }
.jm-solo-pl.is-lead > .n-avatar { box-shadow: 0 0 0 2px var(--n-amber); }
.jm-solo-pl.is-now > .n-avatar { box-shadow: 0 0 0 2px var(--n-red); }
.jm-solo-pl__n {
  position: absolute; right: 0; bottom: 0; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: 8px; background: var(--n-card-3); color: var(--n-text); font: 700 var(--n-fs-micro)/1 var(--n-font-display);
  font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--n-card);
}
.jm-solo-pl.is-lead .jm-solo-pl__n { background: var(--n-amber); color: var(--n-bg); }

/* ---- Solo Sessions ------------------------------------------------------------------------------------- */

/* Badges with no N tone: "2 new" and LIVE (solid red, like the mockups' count badges). */
.jm-solo-badge {
  display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 7px; border-radius: var(--n-r-xs);
  background: var(--n-red); color: var(--n-on-red); font: 700 var(--n-fs-micro)/1 var(--n-font-display);
  letter-spacing: var(--n-ls-btn); text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* SoloSlotStrip: one segment per chorus. Overview: filled red, new pink, open dashed, held dashed red, leader
   gold. Playback: played dim red, now red, ahead grey. */
.jm-solo-strip { display: flex; gap: 3px; min-width: 0; }
.jm-solo-strip > i { flex: 1 1 0; min-width: 0; height: 6px; border-radius: 3px; background: var(--n-line-2); transition: background-color var(--n-dur) ease; }
.jm-solo-strip--lg > i { height: 8px; }
.jm-solo-strip > i.is-filled, .jm-solo-strip > i.is-now { background: var(--n-red); }
.jm-solo-strip > i.is-new { background: var(--n-pink); }
.jm-solo-strip > i.is-lead { background: var(--n-amber); }
.jm-solo-strip > i.is-played { background: color-mix(in srgb, var(--n-red) 55%, transparent); }
.jm-solo-strip > i.is-ahead { background: var(--n-line-2); }
.jm-solo-strip > i.is-open { background: none; outline: 1.5px dashed var(--n-line-3); outline-offset: -1.5px; }
.jm-solo-strip > i.is-held { outline-color: var(--n-red-line); }

/* The Tracks rail: songs in progress, then the released ones on a line each. */
.jm-solo-rail__board { gap: 4px; }
.jm-solo-card {
  flex: none; display: flex; flex-direction: column; gap: var(--n-2); width: min(66vw, 236px); padding: var(--n-3);
  scroll-snap-align: start; border-radius: var(--n-r-md); background: var(--n-card); border: 1px solid var(--n-line);
  color: var(--n-text); text-decoration: none;
}
.jm-solo-card:first-child { border-color: var(--n-red-line); }
@media (hover: hover) { .jm-solo-card:hover { border-color: var(--n-line-3); } }
.jm-solo-card__top { display: flex; align-items: center; gap: var(--n-2); min-width: 0; min-height: 22px; }
.jm-solo-card__title { flex: 1 1 auto; min-width: 0; font: 700 var(--n-fs-h3)/1.25 var(--n-font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-solo-card__open { font: 600 var(--n-fs-small)/1.3 var(--n-font-body); color: var(--n-text); }
.jm-solo-card__last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.jm-solo-live {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; padding: 0 6px 0 4px;
  color: var(--n-text); text-decoration: none; font-size: var(--n-fs-ui);
}
.jm-solo-live.is-card { margin: var(--n-3) 0 0; padding: 8px 8px 8px 14px; border-radius: var(--n-r-md); background: var(--n-card); border: 1px solid var(--n-red-line); }
.jm-solo-live__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--n-red); box-shadow: 0 0 0 4px var(--n-red-wash); }
.jm-solo-live__text { flex: 1 1 auto; min-width: 0; }
.jm-solo-live__title { font-weight: 600; color: var(--n-text); }
.jm-solo-live__go { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--n-pink); font: 600 var(--n-fs-small)/1 var(--n-font-body); }

/* Under the playing track on /tracks: the way into its session. */
.jm-solo-trackcta-wrap { margin: -2px 0 2px; grid-column: 1 / -1; }
/* Two columns on desktop: the CTA spans both under the active track's row, and dense packing moves the next track
   back beside the active one, so the other tracks keep their columns. */
@media (min-width: 1024px) { .ln-tlist:has(> .jm-solo-trackcta-wrap) { grid-auto-flow: row dense; } }
.jm-solo-trackcta {
  display: flex; align-items: center; gap: var(--n-2); min-height: 44px; padding: 0 12px; border-radius: var(--n-r-md);
  background: var(--n-red-wash); border: 1px solid var(--n-red-line); color: var(--n-pink); text-decoration: none;
  font: 600 var(--n-fs-small)/1.2 var(--n-font-body);
}
.jm-solo-trackcta > .n-icon:first-child { color: var(--n-red); }
.jm-solo-trackcta__text { flex: 1 1 auto; min-width: 0; }
.jm-solo-trackcta__chev { color: var(--n-text-3); }

/* The session page */
.jm-solo-page .jm-head__line { color: var(--n-text-2); }
.jm-solo-tabs { margin-top: var(--n-3); }
.jm-solo-chain { margin-top: 10px; padding: var(--n-3); }
.jm-solo-chain__who { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 10px; }
.jm-solo-chain__disc { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--n-card-3); color: var(--n-pink); }
.jm-solo-chain__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.jm-solo-chain__name { font: 600 var(--n-fs-body)/1.25 var(--n-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-solo-chain__ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: var(--n-2); }
.jm-solo-chain__tap { margin-top: var(--n-3); }
.jm-solo-chain__empty { margin: var(--n-2) 0 0; text-align: center; }
.jm-solo-ctl {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--n-text); cursor: pointer; transition: scale var(--n-dur-fast) ease;
}
.jm-solo-ctl:active { scale: .94; }
.jm-solo-ctl:disabled { color: var(--n-text-4); cursor: default; scale: none; }
.jm-solo-ctl.is-play { width: 52px; height: 52px; background: var(--n-red); color: var(--n-on-red); --n-icon-size: 26px; }
.jm-solo-ctl.is-play:disabled { background: var(--n-card-3); color: var(--n-text-3); }

.jm-solo-list { margin-top: 10px; overflow: hidden; }
.jm-solo-foot { margin: 6px 0 0; text-align: center; }
.jm-solo-take { margin-top: 10px; }
.jm-solo-post { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.jm-solo-post__go { margin-left: auto; }
.jm-solo-nav { display: flex; justify-content: space-between; gap: var(--n-2); margin-top: var(--n-2); }
.jm-solo-nav__next { margin-left: auto; }
.jm-solo-board { display: flex; justify-content: center; margin: var(--n-4) 0 0; }
.jm-solo-boardlink { margin: 0 0 var(--n-2); }
.jm-solo-boardlink .n-textlink, .jm-solo-board .n-textlink, .jm-solo-rail__board { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }

/* SoloChorusRow */
.jm-solo-row {
  display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 0 8px 0 0; border-top: 1px solid var(--n-line);
  transition: background-color var(--n-dur) ease;
}
.jm-solo-row:first-child { border-top: 0; }
.jm-solo-row.is-now { background: var(--n-red-wash); }
.jm-solo-row.is-lead { background: var(--n-amber-wash); }
.jm-solo-row.is-lead .n-avatar { box-shadow: 0 0 0 2px var(--n-amber); }
.jm-solo-row.is-held, .jm-solo-row.is-open:not(.is-offer) { padding-left: 12px; gap: 10px; }
.jm-solo-row__main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 4px 6px 12px;
  border: 0; background: none; color: var(--n-text); text-align: left; font: inherit; cursor: pointer;
}
.jm-solo-row__main:disabled { cursor: default; }
.jm-solo-row.is-offer .jm-solo-row__main:active { background: var(--n-card-2); }
.jm-solo-row__n { flex: none; width: 22px; font: 700 var(--n-fs-body)/1 var(--n-font-display); color: var(--n-text-3); font-variant-numeric: tabular-nums; text-align: center; }
.jm-solo-row.is-now .jm-solo-row__n { color: var(--n-red); }
.jm-solo-row.is-lead .jm-solo-row__n { color: var(--n-amber); }
.jm-solo-row__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.jm-solo-row__name { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 var(--n-fs-ui)/1.2 var(--n-font-body); }
.jm-solo-row__who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-solo-row__who.is-pink { color: var(--n-pink); }
.jm-solo-row__who.is-quiet { color: var(--n-text-2); font-weight: 500; }
.jm-solo-row__name .n-badge { flex: none; }
.jm-solo-row__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-solo-row__playing { color: var(--n-red); font-weight: 600; }
.jm-solo-row__new { color: var(--n-pink); font-weight: 600; }
.jm-solo-row__open {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px dashed var(--n-line-3); color: var(--n-red);
}
.jm-solo-row.is-held .jm-solo-row__open { border-color: var(--n-red-line); color: var(--n-text-3); }
.jm-solo-row__chev { flex: none; color: var(--n-text-3); }
.jm-solo-row__remove { flex: none; color: var(--n-text-3); }

/* SoloThumbButton: a 44px pill with the count. */
.jm-solo-thumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 64px; height: 44px; padding: 0 12px;
  border: 1px solid var(--n-line); border-radius: var(--n-r-pill); background: var(--n-card-2); color: var(--n-text-2);
  font: 700 var(--n-fs-small)/1 var(--n-font-display); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color var(--n-dur) ease, border-color var(--n-dur) ease, color var(--n-dur) ease, scale var(--n-dur-fast) ease;
}
.jm-solo-thumb:active { scale: .96; }
.jm-solo-thumb[aria-pressed="true"] { background: var(--n-red-wash); border-color: var(--n-red-line); color: var(--n-pink); }
.jm-solo-thumb[aria-pressed="true"] .n-icon { color: var(--n-red); }
.jm-solo-thumb[aria-busy="true"] { opacity: .8; }
.jm-solo-thumb.is-static { cursor: default; background: transparent; }
.jm-solo-thumb.is-static:active { scale: none; }

/* A released session's card (SessionLive mockup) */
.jm-solo-hero { margin-top: 4px; padding: 14px; }
.jm-solo-hero__top { display: flex; align-items: center; gap: var(--n-2); min-width: 0; }
.jm-solo-hero__when { min-width: 0; color: var(--n-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-solo-hero__share { margin-left: auto; flex: none; }
.jm-solo-hero__meta { margin: 6px 0 0; }
.jm-solo-hero__mix { margin-top: var(--n-3); }
.jm-solo-hero__mix > .jm-mix__play { width: 52px; height: 52px; --n-icon-size: 26px; }
.jm-solo-hero__mix > .jm-mix__times { padding-left: calc(52px + var(--n-3)); }

/* Past / Mine */
.jm-solo-srow-wrap { display: block; border-top: 1px solid var(--n-line); }
.jm-solo-srow-wrap:first-child { border-top: 0; }
.jm-solo-srow { display: grid; gap: 8px; padding: 12px 14px; color: var(--n-text); text-decoration: none; }
.jm-solo-srow:active { background: var(--n-card-2); }
.jm-solo-srow__top { display: flex; align-items: center; gap: var(--n-2); min-width: 0; }
.jm-solo-srow__title { font: 700 var(--n-fs-h3)/1.25 var(--n-font-display); }
.jm-solo-srow__chev { margin-left: auto; color: var(--n-text-3); }

/* SoloLeaderboard */
.jm-solo-lb { list-style: none; margin: 10px 0 0; padding: 0; overflow: hidden; }
.jm-solo-lb > li + li { border-top: 1px solid var(--n-line); }
.jm-solo-lb.is-me { margin-top: 10px; border-color: var(--n-red-line); }
.jm-solo-lb__resets { padding-bottom: 3px; white-space: nowrap; }
.jm-solo-lb__note { margin: 10px 0 0; text-align: center; color: var(--n-text-2); }
.jm-solo-lbrow { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 12px; color: var(--n-text); text-decoration: none; }
.jm-solo-lbrow:active { background: var(--n-card-2); }
.jm-solo-lbrow__pos { flex: none; width: 26px; font: 700 17px/1 var(--n-font-display); color: var(--n-text-3); font-variant-numeric: tabular-nums; text-align: center; }
.jm-solo-lbrow.is-first .jm-solo-lbrow__pos { color: var(--n-amber); }
.jm-solo-lbrow.is-you .jm-solo-lbrow__pos { color: var(--n-pink); }
.jm-solo-lbrow__av { position: relative; flex: none; display: grid; place-items: center; }
.jm-solo-lbrow.is-first .n-avatar { box-shadow: 0 0 0 2px var(--n-amber); }
.jm-solo-lbrow__crown { position: absolute; top: -12px; left: 50%; translate: -50% 0; color: var(--n-amber); z-index: 1; }
.jm-solo-lbrow__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.jm-solo-lbrow__name { font: 600 var(--n-fs-ui)/1.2 var(--n-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-solo-lbrow__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jm-solo-lbrow__score { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 700 var(--n-fs-body)/1 var(--n-font-display); font-variant-numeric: tabular-nums; }
.jm-solo-lbrow__score .n-icon { color: var(--n-text-3); }

/* Admin › Jam Lab: chorus timing */
.jm-lab__search { margin-top: var(--n-3); }
.jm-lab__editor { display: grid; gap: var(--n-3); margin-top: var(--n-3); padding: var(--n-4); }
.jm-lab__editor > p { margin: 0; }
.jm-lab__head { display: flex; align-items: center; gap: var(--n-2); }
.jm-lab__title { flex: 1 1 auto; min-width: 0; font: 700 var(--n-fs-h3)/1.25 var(--n-font-display); }
.jm-lab__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--n-3); }
@media (max-width: 419px) { .jm-lab__fields { grid-template-columns: minmax(0, 1fr); } }
.jm-lab__player { padding: 8px 12px 8px 8px; border-radius: var(--n-r-md); background: var(--n-sunken); border: 1px solid var(--n-line); }
.jm-lab__slots { list-style: none; margin: 0; padding: 0; display: grid; }
.jm-lab__slot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; border-top: 1px solid var(--n-line); }
.jm-lab__slot:first-child { border-top: 0; }
.jm-lab__slot-n { font: 700 var(--n-fs-small)/1 var(--n-font-display); min-width: 72px; }
.jm-lab__slot > .n-btn { margin-left: auto; }
.jm-lab__actions { display: flex; flex-wrap: wrap; gap: var(--n-2); }
.jm-lab__list { margin-top: var(--n-3); overflow: hidden; }
.jm-lab__row-wrap { display: block; border-top: 1px solid var(--n-line); }
.jm-lab__row-wrap:first-child { border-top: 0; }
.jm-lab__row {
  display: grid; gap: 2px; width: 100%; min-height: 52px; padding: 8px 14px; border: 0; background: none;
  color: var(--n-text); text-align: left; font: inherit; cursor: pointer;
}
.jm-lab__row:active { background: var(--n-card-2); }
.jm-lab__row.is-on { background: var(--n-red-wash); }
.jm-lab__row-title { font: 600 var(--n-fs-ui)/1.3 var(--n-font-body); }
.jm-lab__none { margin: 0; padding: 14px; }

/* ---- Scales for a track (ScaleFretboard, ScaleCard, the recorder's Scale chip) ---------------------------- */
/* The neck draws with the tokens: strings and frets in the line greys, the scale's notes in the text colour with
   the card colour inside (high contrast in both themes), the roots in red. The whole neck keeps its size and scrolls
   sideways in its own well on a phone; a box fills the width. */
.jm-scale { display: grid; gap: var(--n-2); min-width: 0; }
.jm-scale__picks { display: flex; flex-wrap: wrap; gap: 6px; }
.jm-scale__name { margin: 2px 0 0; font: 400 var(--n-fs-small)/1.3 var(--n-font-body); color: var(--n-text); }
.jm-scale__name strong { font-weight: 600; }
.jm-scale__board {
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  padding: 4px 0; border-radius: var(--n-r-sm); background: var(--n-sunken); border: 1px solid var(--n-line);
}
.jm-scale__svg { display: block; margin: 0 auto; }
.jm-scale__board:not(.is-neck) .jm-scale__svg { width: 100%; max-width: 420px; height: auto; }
.jm-scale__board.is-neck .jm-scale__svg { max-width: none; }
.jm-scale__string { stroke: var(--n-text-4); }
.jm-scale__fret { stroke: var(--n-line-3); stroke-width: 1.5; }
.jm-scale__nut { stroke: var(--n-text-2); stroke-width: 4; stroke-linecap: round; }
.jm-scale__inlay { fill: var(--n-line-2); }
.jm-scale__sname, .jm-scale__fnum {
  fill: var(--n-text-3); font: 600 10px/1 var(--n-font-body); text-anchor: middle; dominant-baseline: central;
}
.jm-scale__note circle { fill: var(--n-text); stroke: var(--n-sunken); stroke-width: 1.5; }
.jm-scale__note text {
  fill: var(--n-sunken); font: 700 10px/1 var(--n-font-body); letter-spacing: -.02em; text-anchor: middle; dominant-baseline: central;
}
.jm-scale__note.is-root circle { fill: var(--n-red); }
.jm-scale__note.is-root text { fill: var(--n-on-red); }
.jm-scale__ctl { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--n-2); }
.jm-scale__ctl .n-seg__opt { padding: 0 4px; min-height: 32px; font-size: 12px; }
@media (max-width: 419px) { .jm-scale__ctl { grid-template-columns: minmax(0, 1fr); } }
/* One row, however many notes: seven share a phone's width, five stop at a comfortable size. */
.jm-scale__tones { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.jm-scale__tone {
  display: grid; justify-items: center; gap: 2px; flex: 1 1 0; min-width: 0; max-width: 56px; padding: 5px 2px; border-radius: var(--n-r-xs);
  background: var(--n-card-2); font-variant-numeric: tabular-nums;
}
.jm-scale__tname { font: 700 var(--n-fs-small)/1 var(--n-font-body); color: var(--n-text); }
.jm-scale__tdeg { font: 600 var(--n-fs-meta)/1 var(--n-font-body); color: var(--n-text-3); }
.jm-scale__tone.is-root { background: var(--n-red-wash); }
.jm-scale__tone.is-root .jm-scale__tname { color: var(--n-pink); }

/* The session page's card: one row until it's opened. */
.jm-scale-card { margin-top: 10px; padding: 0; overflow: hidden; }
.jm-scale-card__head {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; border: 0; background: none;
  color: var(--n-text); text-align: left; font: inherit; cursor: pointer;
}
.jm-scale-card__head:active { background: var(--n-card-2); }
/* The card clips (overflow: hidden) and the header fills it: the global ring (offset 2px) would sit outside, unseen. */
.jm-scale-card__head:focus-visible { outline-offset: -2px; border-radius: inherit; }
.jm-scale-card__ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--n-card-3); color: var(--n-pink); }
.jm-scale-card__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.jm-scale-card__title { font: 600 var(--n-fs-ui)/1.25 var(--n-font-body); }
.jm-scale-card__chev { flex: none; color: var(--n-text-3); transition: rotate var(--n-dur) var(--n-out); }
.jm-scale-card.is-open .jm-scale-card__chev { rotate: 180deg; }
.jm-scale-card__body { padding: 0 12px 12px; animation: jm-scale-in var(--n-dur) var(--n-out); }
@keyframes jm-scale-in { from { opacity: 0; translate: 0 -4px; } }

/* The recorder: the chip above every stage, the board under it on the sheet's own card colour. */
.jm-scale-bar { display: flex; }
.jm-scale-panel { padding: var(--n-3); border-radius: var(--n-r-md); background: var(--n-card-2); animation: jm-scale-in var(--n-dur) var(--n-out); }
.jm-scale-panel .jm-scale__tone { background: var(--n-card); }
.jm-scale-panel .jm-scale__tone.is-root { background: var(--n-red-wash); }
.jm-rec--live .jm-scale-panel { background: var(--n-card); }
.jm-rec--live .jm-scale-panel .jm-scale__tone { background: var(--n-card-2); }
/* The live screen's top bar tucks up under the sheet's head; under the chip it keeps its place. */
.jm-scale-bar ~ .jm-live .jm-live__top { margin-top: 0; }