/*
 * Jam (#/jam) and its card on Home and Songs. Everything here is prefixed jx-.
 * Each style has its own colour: --jc (strong) and --jt (tint), set by .jx-s-<style>.
 */

.jx-s-pop     { --jc: #F27165; --jt: #FDE1DE; --jd: #C9564B; }
.jx-s-groove  { --jc: #8E6CCF; --jt: #ECE4FA; --jd: #6E50AE; }
.jx-s-ballad  { --jc: #5B8DD6; --jt: #E2ECFA; --jd: #4370B5; }
.jx-s-blues   { --jc: #3F5AA8; --jt: #DEE4F5; --jd: #2E4486; }
.jx-s-rock    { --jc: #D9443A; --jt: #FADBD8; --jd: #AE3129; }
.jx-s-reggae  { --jc: #3E9F5B; --jt: #DDF2E3; --jd: #2D7E46; }
.jx-s-bossa   { --jc: #2FA3A0; --jt: #D6F1F0; --jd: #21817E; }
.jx-s-gospel  { --jc: #D9A030; --jt: #FBEFD6; --jd: #AE7D1C; }
.jx-s-lofi    { --jc: #A27BA8; --jt: #F1E6F2; --jd: #815D87; }
.jx-s-neosoul { --jc: #B0517A; --jt: #F7E0EA; --jd: #8D3B5F; }
.jx-s-country { --jc: #B7793E; --jt: #F5E7D8; --jd: #925C2A; }
.jx-s-swing   { --jc: #2E3D44; --jt: #E3E8EA; --jd: #18242A; }

.jx-main { display: block; }
.jx-stage { width: 100%; max-width: 1040px; margin: 0 auto; padding: 8px 16px 48px; }
.jx { display: grid; gap: 14px; min-width: 0; }
.jx :focus-visible { outline: 3px solid rgba(46, 61, 68, 0.28); outline-offset: 3px; }
.jx-label { margin: 10px 0 0; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.jx-row-hint { color: var(--ink-soft); font-size: 0.85rem; }

/* Emblems */
.jx-emblem { flex: none; width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; background: var(--jc); color: var(--white); box-shadow: var(--sh-solid); }
.jx-emblem-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jx-emblem-ic .jx-fill { fill: rgba(255, 255, 255, 0.28); }

/* ---------- Setup ---------- */

.jx-head { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 10px; align-items: center; }
.jx-title { margin: 4px 0 6px; }
.jx-lede { margin: 0; }
.jx-head-bud { width: 92px; }
.jx-head-bud .bud { width: 100%; height: auto; overflow: visible; }

.jx-styles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jx-style {
  position: relative; width: 100%; height: 100%; min-height: 128px;
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px; justify-items: start;
  padding: 12px; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
  font: inherit; color: var(--ink); background: var(--jt);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jc) 22%, transparent);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms ease;
  -webkit-tap-highlight-color: transparent;
}
.jx-style:hover { transform: translateY(-1px); }
.jx-style:active { transform: translateY(1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jc) 30%, transparent); }
.jx-style.is-on { box-shadow: inset 0 0 0 2px var(--ink), 0 6px 16px -10px rgba(46, 61, 68, 0.35); }
.jx-style-text { display: grid; gap: 2px; min-width: 0; align-content: start; }
.jx-style-text b { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.15; }
.jx-style-text small { font-size: 0.82rem; line-height: 1.3; color: var(--ink-soft); }
.jx-style-meta { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.jx-style-meta small { font-size: 0.78rem; font-weight: 700; color: var(--jd); }
.jx-style-meta .ic { width: 18px; height: 18px; }
.jx-style.is-locked { filter: saturate(0.55); }
.jx-style.is-locked .jx-emblem { opacity: 0.75; }

/* The little equaliser: still until the style previews */
.jx-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.jx-eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--jc); opacity: 0.55; }
.jx-style.is-previewing .jx-eq i { opacity: 1; animation: jx-eq 0.62s ease-in-out infinite alternate; }
.jx-style.is-previewing .jx-eq i:nth-child(2) { animation-delay: -0.3s; }
.jx-style.is-previewing .jx-eq i:nth-child(3) { animation-delay: -0.15s; }
@keyframes jx-eq { from { height: 25%; } to { height: 100%; } }
.jx-preview-status { margin: 0; min-height: 1px; font-size: 0.85rem; color: var(--ink-soft); }

.jx-panel { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-card); }
.jx-panel .jx-label { margin: 0; }
.jx-row { display: grid; gap: 8px; min-width: 0; }
.jx-row-label { font-weight: 700; font-size: 0.95rem; }

.jx-seg { display: grid; gap: 6px; padding: 4px; border-radius: 14px; background: var(--mint); }
.jx-seg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jx-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jx-seg button {
  min-height: 44px; padding: 8px 10px; border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; color: var(--ink); background: transparent; text-align: center;
  display: grid; gap: 2px; align-content: center;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.jx-seg button b { font-size: 0.95rem; }
.jx-seg button small { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.25; }
.jx-seg button[aria-checked="true"] { background: var(--white); box-shadow: var(--sh-card), inset 0 0 0 2px var(--ink); }

.jx-tempo { display: flex; align-items: center; gap: 12px; }
.jx-tempo input { flex: 1; min-width: 0; accent-color: var(--jc, var(--coral)); height: 32px; }
.jx-tempo output { flex: none; min-width: 72px; text-align: right; font-weight: 700; }

.jx-key { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.jx-step {
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  font: 700 1.35rem/1 var(--font-body); color: var(--ink); background: var(--mint);
  box-shadow: var(--sh-card);
}
.jx-step:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.jx-step[disabled] { opacity: 0.4; cursor: default; }
.jx-key-name { min-width: 104px; text-align: center; font-family: var(--font-head); font-size: 1.1rem; }
.jx-key-yours { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--belly); }

.jx-mix { display: flex; flex-wrap: wrap; gap: 8px; }
.jx-part {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 0; border-radius: 999px; cursor: pointer; font: 700 0.95rem/1 var(--font-body);
  color: var(--ink-soft); background: var(--mint); box-shadow: inset 0 0 0 2px var(--dash);
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.jx-part .ic { width: 20px; height: 20px; }
.jx-part[aria-pressed="true"] { color: var(--ink); background: var(--white); box-shadow: inset 0 0 0 2px var(--ink), var(--sh-card); }
.jx-part[aria-pressed="false"] { text-decoration: line-through; }

.jx-side { display: grid; gap: 18px; min-width: 0; }
.jx-go { display: grid; justify-items: center; gap: 8px; margin-top: 4px; }
.jx-go .btn { width: 100%; max-width: 360px; }
.jx-go .mic-status { margin: 0; text-align: center; }
.jx-phones { display: flex; align-items: center; gap: 8px; margin: 0; }
.jx-phones .ic { flex: none; width: 20px; height: 20px; }

.jx-fav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jx-fav { display: flex; align-items: center; gap: 8px; }
.jx-fav-play {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 16px; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  background: var(--white); box-shadow: var(--sh-card);
}
.jx-fav-play .jx-emblem { width: 40px; height: 40px; border-radius: 14px; }
.jx-fav-play .jx-emblem-ic { width: 22px; height: 22px; }
.jx-fav-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.jx-fav-text small { color: var(--ink-soft); font-size: 0.82rem; }
.jx-fav-icon { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: var(--jc); }
.jx-fav-icon .ic { width: 18px; height: 18px; stroke: currentColor; }
.jx-fav-del { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink-soft); background: transparent; }
.jx-fav-del:hover { background: var(--white); }
.jx-fav-del .ic { width: 20px; height: 20px; }

/* ---------- Live ---------- */

.jx-live-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.jx-tag { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.jx-tag .jx-emblem { width: 38px; height: 38px; border-radius: 13px; }
.jx-tag .jx-emblem-ic { width: 22px; height: 22px; }
.jx-tag b { font-family: var(--font-head); font-size: 1.1rem; }
.jx-tag small { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.jx-tag > b + small { margin-left: 0; }
.jx-barcount { padding: 5px 12px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; background: var(--white); box-shadow: var(--sh-card); font-variant-numeric: tabular-nums; }
.jx-barcount:empty { visibility: hidden; }

.jx-band-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "bud chords" "beats beats";
  gap: 10px 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--jt);
}
.jx-bud-wrap { grid-area: bud; position: relative; }
.jx-bud { width: 96px; transform-origin: 50% 90%; }
.jx-bud .bud { width: 100%; height: auto; overflow: visible; }
.jx-bud.is-beat { animation: jx-bob 0.26s cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes jx-bob { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(3px) scale(1.03, 0.97); } 100% { transform: translateY(0) scale(1); } }
.jx-bubble {
  position: absolute; z-index: 2; left: 70px; top: -10px; margin: 0; max-width: 190px;
  padding: 7px 12px; border-radius: 16px 16px 16px 4px; font-weight: 700; font-size: 0.9rem; line-height: 1.25;
  background: var(--white); box-shadow: var(--sh-card), inset 0 0 0 2px var(--ink);
  opacity: 0; transform: translateY(6px) scale(0.92); transform-origin: 0 100%; pointer-events: none;
}
.jx-bubble.is-on { animation: jx-bubble 2.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes jx-bubble {
  0% { opacity: 0; transform: translateY(6px) scale(0.92); }
  10%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-4px); }
}

.jx-chords { grid-area: chords; display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.jx-chord { position: relative; overflow: hidden; display: grid; gap: 0; justify-items: center; min-width: 84px; padding: 8px 12px 10px; border-radius: 14px; background: var(--white); }
.jx-chord small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.jx-chord b { font-family: var(--font-head); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jx-chord.is-now { min-width: 104px; box-shadow: inset 0 0 0 3px var(--ink), var(--sh-solid); }
.jx-chord.is-now b { color: var(--jd); font-size: 2.3rem; }
.jx-chord.is-next { opacity: 0.8; }
.jx-chord-fill { position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--p, 0) * 100%); background: var(--jc); }
.jx-chord-arrow .ic { width: 20px; height: 20px; color: var(--ink-soft); }

.jx-beats { grid-area: beats; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jx-beats li { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); transition: background 80ms linear; }
.jx-beats li.is-past { background: color-mix(in srgb, var(--jc) 35%, white); }
.jx-beats li.is-on { background: var(--jc); }
.jx-beats li:first-child.is-on { box-shadow: 0 0 0 2px var(--ink); }

.jx-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr)); gap: 4px; }
.jx-bars li { height: 26px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--cream-deep); }
.jx-bars li span { font-size: 0.66rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.jx-bars li.ph-bud { background: var(--sun); }
.jx-bars li.ph-you { background: var(--belly); }
.jx-bars li.ph-free { background: var(--jt); }
.jx-bars li.is-done { opacity: 0.45; }
.jx-bars li.is-now { box-shadow: inset 0 0 0 2.5px var(--ink); opacity: 1; }
@media (max-width: 520px) {
  .jx-bars[style*="--n: 16"] li span { display: none; }
  .jx-band-row { grid-template-columns: 72px minmax(0, 1fr); padding: 12px; gap: 10px; }
  .jx-bud { width: 72px; }
  .jx-bubble { left: 52px; max-width: 170px; }
  .jx-chords { gap: 6px; }
  .jx-chord-arrow { display: none; }
  .jx-chord { min-width: 0; flex: 1; padding: 6px 8px 9px; }
  .jx-chord.is-now { min-width: 0; flex: 1.2; }
  .jx-chord b { font-size: 1.5rem; }
  .jx-chord.is-now b { font-size: 1.9rem; }
}

.jx-phase { margin: 0; font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; text-align: center; min-height: 1.6em; }
.jx-phase.ph-bud { color: var(--ink-soft); }
.jx-phase.ph-you, .jx-phase.ph-free { color: var(--coral-text); }
.jx-canvas { height: 260px; border-radius: 16px; background: var(--white); box-shadow: var(--sh-card); }
.jx-legend { margin: -4px 0 0; display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.jx-sw { flex: none; width: 18px; height: 10px; border-radius: 5px; }
.jx-sw-safe { background: var(--belly); }
.jx-sw-chord { background: var(--yellow); margin-right: 4px; }

.jx-live-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.jx-live-mix { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jx-live-mix .jx-row-label { font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- Result ---------- */

.jx-res-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
.jx-res-head .ob-title { margin: 4px 0; }
.jx-res-head .ob-hint { margin: 0; }
.jx-res-bud .bud { width: 96px; height: auto; overflow: visible; }
.jx-res-grid { display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: "ring stats" "heat heat"; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; background: var(--jt); }
.jx-ring {
  grid-area: ring; width: 128px; height: 128px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--white) 76%, transparent 77%), conic-gradient(var(--jc) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.7) 0);
}
.jx-ring b { font-family: var(--font-head); font-size: 2rem; line-height: 1; }
.jx-ring small { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.jx-stats { grid-area: stats; margin: 0; display: grid; gap: 10px; }
.jx-stats div { display: grid; gap: 0; }
.jx-stats dt { font-size: 0.82rem; color: var(--ink-soft); font-weight: 700; }
.jx-stats dd { margin: 0; font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; }
.jx-heat-box { grid-area: heat; display: grid; gap: 6px; }
.jx-heat-box .jx-label { margin: 0; }
.jx-heat { list-style: none; margin: 0; padding: 0; height: 54px; display: flex; align-items: flex-end; gap: 3px; }
.jx-heat li { flex: 1; min-width: 3px; height: calc(12% + var(--v) * 88%); border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, #3E9F5B calc(var(--v) * 100%), var(--cheek)); }
.jx-heat li.is-bud { height: 12%; background: rgba(255, 255, 255, 0.85); }
.jx-heat li.is-quiet { height: 8%; background: var(--dash); }

.jx-player { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: var(--white); box-shadow: var(--sh-card); }
.jx-play { width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--white); background: var(--jc); box-shadow: var(--sh-solid); transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1); }
.jx-play:active { transform: translateY(1px); box-shadow: var(--sh-press); }
.jx-play .ic { width: 28px; height: 28px; stroke: currentColor; }
.jx-track { min-width: 0; }
.jx-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jx-meta small { color: var(--ink-soft); }
.jx-meta .btn-link { margin-left: auto; }
.jx-wave { margin-top: 10px; height: 44px; display: flex; align-items: center; gap: 2px; }
.jx-wave i { flex: 1; height: calc(var(--h, 0.12) * 100%); min-height: 4px; border-radius: 2px; background: var(--cream-deep); transition: background 120ms, height 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.jx-wave i.on { background: var(--jc); }

.jx-res-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jx-save.is-saved { --edge: var(--coral-dark); background: var(--blush); }
.jx-save.is-saved .ic { color: var(--coral); }
.jx-next {
  justify-self: center; display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px;
  border: 0; border-radius: 999px; cursor: pointer; font: 700 1rem/1.2 var(--font-body); color: var(--ink);
  background: var(--jt); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jc) 25%, transparent);
}
.jx-next .jx-emblem { width: 38px; height: 38px; border-radius: 50%; }
.jx-next .jx-emblem-ic { width: 20px; height: 20px; }
.jx-next > .ic { width: 18px; height: 18px; }
.jx-private { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 0; }
.jx-private .ic { width: 18px; height: 18px; }

/* ---------- The card on Home and Songs ---------- */

.jx-card {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "text" "cta";
  gap: 12px; justify-items: start; text-decoration: none; color: var(--ink);
  background: linear-gradient(135deg, #FFF3D9 0%, #FDE1DE 55%, #E9E1FA 100%);
  box-shadow: var(--sh-card);
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.jx-card:hover { transform: translateY(-2px); }
.jx-card:active { transform: translateY(1px); }
.jx-card-art { grid-area: art; display: flex; gap: 8px; }
.jx-card-dot { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; color: var(--white); background: var(--jc); box-shadow: var(--sh-solid); transform: rotate(calc((var(--i) - 2.5) * 4deg)); }
.jx-card-dot .jx-emblem-ic { width: 22px; height: 22px; }
.jx-card:hover .jx-card-dot { animation: jx-hop 0.5s cubic-bezier(0.23, 1, 0.32, 1); animation-delay: calc(var(--i) * 45ms); }
@keyframes jx-hop { 40% { transform: translateY(-6px) rotate(0); } }
.jx-card-text { grid-area: text; display: grid; gap: 3px; min-width: 0; }
.jx-card-text small { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-text); }
.jx-card-text b { font-family: var(--font-head); font-size: 1.2rem; line-height: 1.2; }
.jx-card-text span { font-size: 0.92rem; color: var(--ink-soft); }
.jx-card-cta { grid-area: cta; }

/* On Home's side column (laptops and up): a shorter card, so the whole home fits on one screen. */
@media (min-width: 960px) {
  .home-side .jx-card { gap: 10px; }
  .home-side .jx-card-dot { width: 34px; height: 34px; border-radius: 12px; }
  .home-side .jx-card-dot .jx-emblem-ic { width: 19px; height: 19px; }
}
@media (min-width: 1240px) {
  .home-side .jx-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "art art" "text cta"; align-items: end; column-gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .jx-style, .jx-card, .jx-card-dot, .jx-bud, .jx-bubble, .jx-eq i { animation: none !important; transition: none !important; }
  .jx-bubble.is-on { opacity: 1; transform: none; }
}

@media (min-width: 600px) {
  .jx-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jx-head { grid-template-columns: minmax(0, 1fr) 120px; }
  .jx-head-bud { width: 120px; }
  .jx-band-row { grid-template-columns: 110px minmax(0, 1fr); }
  .jx-bud { width: 110px; }
  .jx-bubble { left: 86px; }
  .jx-canvas { height: 300px; }
  .jx-row-inline { grid-template-columns: 90px minmax(0, 1fr); align-items: center; }
  .jx-row-inline .jx-row-hint { grid-column: 2; }
  .jx-res-grid { grid-template-columns: 140px 200px minmax(0, 1fr); grid-template-areas: "ring stats heat"; }
  .jx-ring { width: 140px; height: 140px; }
}

@media (min-width: 960px) {
  .jx-stage { padding: 28px 32px 64px; }
  .jx-setup { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "head head" "label side" "styles side" "status side" "favs side"; grid-template-rows: auto auto auto auto 1fr; column-gap: 28px; align-items: start; }
  .jx-setup > .jx-head { grid-area: head; }
  .jx-setup > .jx-label { grid-area: label; }
  .jx-setup > .jx-styles { grid-area: styles; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .jx-setup > .jx-preview-status { grid-area: status; }
  .jx-setup > .jx-side { grid-area: side; align-self: start; margin-top: 10px; }
  .jx-setup > .jx-favs { grid-area: favs; }
  .jx-setup .jx-row-inline { grid-template-columns: 1fr; }
  .jx-setup .jx-row-inline .jx-row-hint { grid-column: auto; }
  .jx-live { grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "top top" "band canvas" "phase canvas" "bars canvas" ". canvas" "legend legend" "foot foot"; grid-template-rows: auto auto auto auto 1fr auto auto; column-gap: 24px; align-items: start; }
  .jx-live > .jx-live-top { grid-area: top; }
  .jx-live > .jx-band-row { grid-area: band; grid-template-columns: 1fr; grid-template-areas: "bud" "chords" "beats"; justify-items: center; }
  .jx-live .jx-bud { width: 140px; }
  .jx-live .jx-bubble { left: 110px; }
  .jx-live .jx-chords { justify-content: center; }
  .jx-live .jx-beats { width: 100%; }
  .jx-live > .jx-bars { grid-area: bars; }
  .jx-live > .jx-phase { grid-area: phase; }
  .jx-live > .jx-canvas { grid-area: canvas; height: clamp(320px, 46vh, 460px); }
  .jx-live > .jx-legend { grid-area: legend; }
  .jx-live > .jx-live-foot { grid-area: foot; }
  .jx-result { max-width: 820px; margin: 0 auto; }
}

/* Tall screens: the settings and Start stay in view while scrolling the styles. */
@media (min-width: 960px) and (min-height: 900px) {
  .jx-setup > .jx-side { position: sticky; top: calc(var(--top-h, 72px) + 16px); }
}

/* Phones: compact style cards (icon, name, tempo) and "Start jamming" pinned in thumb reach, so the
   setup isn't a 2,000px scroll to the one button that matters. */
.jx-title:focus { outline: none; }
@media (max-width: 759px) {
  .jx-styles { gap: 8px; }
  .jx-style { min-height: 0; padding: 10px; gap: 10px; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; align-items: center; }
  .jx-side { display: contents; }   /* so the pinned button below sticks for the whole setup screen */
  .jx-style .jx-emblem { width: 38px; height: 38px; border-radius: 13px; }
  .jx-style .jx-emblem .ic { width: 20px; height: 20px; }
  .jx-style-text small { display: none; }
  .jx-style-text b { font-size: 0.98rem; line-height: 1.15; }
  .jx-style:not(.is-locked) .jx-style-meta { display: none; }
  .jx-style.is-locked .jx-style-meta { position: absolute; top: 8px; right: 8px; width: auto; }
  .jx-style.is-locked .jx-style-meta small { display: none; }
  .jx-go {
    position: sticky; bottom: 0; z-index: 6; margin: 8px calc(-1 * var(--gutter)) 0;
    padding: 12px var(--gutter) max(12px, env(safe-area-inset-bottom));
    background: var(--mint); box-shadow: 0 -20px 16px -6px var(--mint);
  }
  .jx-go .btn { max-width: none; }
  .jx-go .jx-phones { font-size: 0.82rem; }
}