/* learn-make.css — /learn/ part four, lesson 13 (plan C, task C9): the groove machine and the jam.
   Widgets: learn-w-groove-machine.js (.lgm-*), learn-w-jam.js (.ljam-*). Loaded after studio.css and
   learn-course.css through _lesson.html's learn_styles block.

   Look: the guides' hardware (Sub groove machine CSS :191-223, Grid jam CSS :122-133). Each widget is one charcoal
   .st-panel, dark in both themes. One bold element: the machine's chord lane, a row of glass cells, one per bar of the
   progression, the bar that is playing lit in the part's yellow with a red LED, so the harmony the bass follows can be
   seen moving. The jam's lit layers take the same yellow (the Grid guide's module 6 color is this part's accent).
   Nothing moves while silent: no keyframes; the chord lane and the 32-bar map change once a bar, on the clock. */

/* ── teaching blocks ─────────────────────────────────────────────────── */
.learn-module { margin-top: 3rem; padding-top: 0.25rem; border-top: 1px solid var(--st-line); }

/* ── shared shell ────────────────────────────────────────────────────── */
.lgm,
.ljam { display: grid; gap: 1rem; min-width: 0; }
.lgm-head,
.ljam-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1.2rem;
}
.lgm-head h3,
.ljam-head h3 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 820;
    font-stretch: 118%;
    letter-spacing: -0.015em;
    color: var(--st-panel-ink);
}
.lgm-sub,
.ljam-sub,
.lgm-hint,
.lgm-status,
.ljam-cap {
    margin: 0;
    max-width: 70ch;
    font-size: 0.86rem;
    font-weight: 560;
    line-height: 1.45;
    color: var(--st-panel-muted);
}
.lgm-status { color: var(--st-panel-ink); }
.lgm .st-slider-head,
.ljam .st-slider-head { flex-wrap: wrap; column-gap: 0.5rem; }
.lgm .learn-select { width: 100%; }

/* ── groove machine: preset bank ─────────────────────────────────────── */
.lgm-presets { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; }
.lgm-bank { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lgm-bank-label {
    font-size: 0.78rem;
    font-weight: 700;
    font-stretch: 88%;
    color: var(--st-panel-muted);
}
.lgm-bank-row > button { padding: 0 0.8rem; }

/* ── groove machine: transport strip and LCD ─────────────────────────── */
.lgm-strip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 0.75rem 1rem;
    align-items: center;
}
.lgm-faders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
.lgm-lcd {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 3.6rem;
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    background: var(--st-well);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.lgm-lcd-name {
    overflow: hidden;
    font-size: 1.12rem;
    font-weight: 820;
    font-stretch: 112%;
    line-height: 1.1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--st-accent);
}
.lgm-lcd-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.8rem;
    font-size: 0.8rem;
    color: var(--st-panel-muted);
}
.lgm-lcd-key { color: var(--st-panel-ink); }

/* ── groove machine: harmony row ─────────────────────────────────────── */
.lgm-harmony { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.lgm-harmony > .learn-field { flex: 1 1 9rem; }
.lgm-harmony > .lgm-key { flex: 0 1 9.5rem; }
.lgm-harmony > .lgm-prog { flex: 2 1 16rem; }
.lgm-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.lgm-clear { flex: 0 0 auto; }

/* ── groove machine: the chord lane (the bold element) ───────────────── */
.lgm .lgm-chords {          /* beats .learn-body ol */
    display: grid;
    grid-template-columns: repeat(var(--lgm-n, 2), minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lgm-chord {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.15rem 0.6rem;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0.7rem 0.85rem 0.6rem 1.75rem;
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
    color: var(--st-panel-muted);
}
.lgm-chord::before {            /* the LED */
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 0.75rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.lgm-chord-name {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    font-weight: 850;
    font-stretch: 118%;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--st-panel-ink);
}
.lgm-chord-rn {
    font-size: 0.86rem;
    font-weight: 700;
    font-stretch: 92%;
    font-variant-numeric: tabular-nums;
}
.lgm-chord.is-now { background: var(--st-accent); color: var(--st-on-accent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22); }
.lgm-chord.is-now .lgm-chord-name { color: var(--st-on-accent); }
.lgm-chord.is-now::before { background: var(--st-led); box-shadow: 0 0 8px 2px var(--st-led); }

/* ── groove machine: dub desk and sends ──────────────────────────────── */
.lgm-desk {
    display: grid;
    gap: 0.9rem;
    padding: clamp(12px, 2vw, 18px);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04);
}
.lgm-desk h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    font-stretch: 112%;
    color: var(--st-panel-ink);
}
.lgm-desk-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lgm-desk-pads .st-pad { min-height: 5.25rem; }
.lgm-desk-pads .st-pad-meta { overflow-wrap: anywhere; }
.lgm-desk-ctls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}
.lgm-siren-type .st-seg { display: flex; flex-wrap: nowrap; }
.lgm-siren-type .st-seg > button { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 0.4rem; }
.lgm-siren-type .st-seg > button::before { display: none; }   /* the pressed key's raised face shows the choice */
.lgm-filter-row { display: flex; align-items: flex-end; gap: 0.6rem; grid-column: 1 / -1; }
.lgm-filter-row > .st-slider { flex: 1 1 auto; }
.lgm-sends-title { margin-top: 0.2rem !important; }
.lgm-sends {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.25rem 1rem;
}
.lgm-sends .st-slider { font-size: 0.8rem; }
.lgm-dm-link { justify-self: start; max-width: 100%; }

/* ── jam: bar row, readout and the 32-bar map ────────────────────────── */
.ljam-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ljam-throw.st-pad { flex: 0 1 11rem; min-height: 3.6rem; padding: 0.5rem 0.75rem 0.55rem; }
.ljam-throw .st-pad-name { font-size: 1.02rem; }
.ljam-switches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ljam-where {
    display: grid;
    grid-template-columns: minmax(12rem, auto) minmax(0, 1fr);
    gap: 0.5rem 1rem;
    align-items: center;
}
.ljam-bar {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    font-stretch: 108%;
    color: var(--st-panel-ink);
}
.ljam-map { display: flex; gap: 5px; min-width: 0; }
.ljam-map.is-off { opacity: 0.38; }
.ljam-sec { display: flex; flex: var(--ljam-bars) 1 0; flex-direction: column; gap: 4px; min-width: 0; }
.ljam-sec-name {
    font-size: 0.7rem;
    font-weight: 700;
    font-stretch: 80%;
    line-height: 1;
    white-space: nowrap;
    color: var(--st-panel-muted);
}
.ljam-ticks { display: flex; gap: 2px; }
.ljam-tick { flex: 1 1 0; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.09); }
.ljam-tick.is-past { background: color-mix(in srgb, var(--st-accent) 38%, transparent); }
.ljam-tick.is-now { background: var(--st-accent); box-shadow: 0 0 6px var(--st-accent); }

/* ── jam: layer pads (Grid .lp) ──────────────────────────────────────── */
.ljam-layers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr));
    gap: 12px;
}
.ljam-lay { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ljam-layer {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
    min-height: 5.25rem;
    padding: 0.65rem 0.75rem 0.7rem;
    border: 0;
    border-radius: 10px;
    background: var(--st-key);
    color: var(--st-panel-muted);
    font: inherit;
    font-family: var(--st-font);
    text-align: start;
    cursor: pointer;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.ljam-led {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.ljam-name {
    max-width: calc(100% - 1rem);
    font-size: 1rem;
    font-weight: 780;
    font-stretch: 88%;
    line-height: 1.05;
    color: var(--st-panel-ink);
}
.ljam-state { font-size: 0.76rem; font-weight: 650; font-stretch: 96%; }
.ljam-layer:hover { filter: brightness(1.08); }
.ljam-layer.is-on { background: var(--st-accent); color: var(--st-on-accent); }
.ljam-layer.is-on .ljam-name { color: var(--st-on-accent); }
.ljam-layer.is-on .ljam-led { background: var(--st-led); box-shadow: 0 0 8px 2px var(--st-led); }
.ljam-layer.is-queued { box-shadow: inset 0 0 0 2px var(--st-panel-ink), inset 0 -4px 0 rgba(0, 0, 0, 0.3); }
.ljam-layer.is-on.is-queued { box-shadow: inset 0 0 0 2px var(--st-on-accent), inset 0 -4px 0 rgba(0, 0, 0, 0.22); }
.ljam-var { display: flex; }
.ljam-var > button {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding: 0 2px;
    font-size: 0.8rem;
    font-stretch: 84%;
}
.ljam-var > button::before { display: none; }
.ljam-scope { width: 100%; height: 76px; }
.ljam-ctls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}
.ljam-dj-row { display: flex; align-items: flex-end; gap: 0.6rem; grid-column: span 2; }
.ljam-dj-row > .st-slider { flex: 1 1 auto; }
.ljam-div .st-seg { display: flex; flex-wrap: nowrap; }
.ljam-div .st-seg > button { flex: 1 1 0; justify-content: center; padding: 0 0.4rem; }

/* ── narrow: one column of controls, two of pads ─────────────────────── */
@media (max-width: 900px) {
    .lgm-strip { grid-template-columns: auto minmax(0, 1fr); }
    .lgm-faders { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .ljam-dj-row { grid-column: 1 / -1; }
    .lgm-desk-pads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lgm .lgm-chords[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lgm-chord { flex-direction: column; align-items: flex-start; }
    .ljam-where { grid-template-columns: minmax(0, 1fr); }
    .ljam-sec-name { display: none; }
    .ljam-throw.st-pad { flex: 1 1 9rem; }
}
@media (max-width: 380px) {
    .lgm-faders { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
    .lgm-chord.is-now,
    .ljam-layer.is-on { outline: 3px solid Highlight; outline-offset: -3px; }
    .ljam-layer.is-queued { outline: 2px dashed CanvasText; outline-offset: -5px; }
    .ljam-tick.is-now { background: Highlight; }
}