/* learn-sound.css — /learn/ part one, sound and synthesis (plan C, task C6): how-sound-works, synthesizer,
   effects-and-mix. Widgets: learn-w-tone.js, learn-w-synth-lab.js, learn-w-bass-synth.js. Loaded after studio.css and
   learn-course.css through _lesson.html's learn_styles block.

   Look: the guides' hardware. Each widget is one charcoal .st-panel (dark in both themes, like the machine it
   imitates); its screens are sunk wells with a graticule; the part accent (--st-accent, orange) is the trace and the
   lit state. The Synth Lab's five modules carry the colors of the signal-flow diagram above them (envelope 1 orange
   on the filter, envelope 2 red on the amp, LFO yellow), so the picture and the instrument read as one. No keyframes,
   no transitions beyond the kit's; nothing moves while silent. */

/* ── teaching blocks ─────────────────────────────────────────────────── */
.learn-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.learn-table-scroll table { min-width: 34rem; }

.learn-diagram {
    --ink: var(--st-ink);
    --surface: var(--st-surface);
    --muted: var(--st-muted);
    --y808: var(--st-808-yellow);
    --o808: var(--st-808-orange);
    --r808: var(--st-808-red);
    margin: 1.6rem 0 2rem;
    padding: clamp(0.8rem, 2vw, 1.4rem);
    border: 1px solid var(--st-line);
    border-radius: 16px;
    background: var(--st-sunk);
}
.learn-diagram svg { display: block; width: 100%; height: auto; font-family: var(--st-font); }
.learn-diagram figcaption {
    max-width: var(--learn-measure);
    margin-top: 0.7rem;
    font-size: 0.92rem;
    color: var(--st-muted);
}

.learn-recipes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin: 0.5rem 0 1.5rem;
}
.learn-recipes .learn-recipe { margin: 0; max-width: none; }
.learn-recipes .learn-recipe-head {          /* Play first, then the name: the same in every card, however long */
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
}
.learn-recipes .learn-recipe-play[aria-pressed="true"] {   /* the recipe that is playing */
    border-color: var(--learn-accent);
    background: var(--learn-accent);
    color: var(--st-on-accent);
}
.learn-recipes .learn-recipe-play[aria-pressed="true"] .learn-recipe-icon {
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 2px;
    background: currentColor;
}

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

/* ── widget shell ────────────────────────────────────────────────────── */
.lw-panel { display: grid; gap: 1rem; }
.lw-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.2rem; }
.lw-head h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: -0.01em;
    color: var(--st-panel-ink);
}
.lw-sub,
.lw-hint {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 560;
    font-stretch: 92%;
    color: var(--st-panel-muted);
}
.lw-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.9rem 1.2rem;
    align-items: end;
}

/* screens: sunk wells with a graticule (the kit's .st-scope look, taller) */
.lw-screens { display: grid; gap: 0.75rem; }
.lw-screens--2 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.lw-screens--3 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.lw-screen { margin: 0; min-width: 0; }
.lw-screen figcaption {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-stretch: 88%;
    line-height: 1.3;
    color: var(--st-panel-muted);
}
.lw-screen-cv {
    display: block;
    width: 100%;
    height: 8.75rem;
    border-radius: 10px;
    background-color: var(--st-well);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 10% 25%;
    background-position: -1px -1px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.st-scope.lw-screen-cv { height: 8.75rem; }

/* ── tone generator ──────────────────────────────────────────────────── */
.lw-tone-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}
.lw-tone-readout { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.lw-tone-display { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; min-width: 0; }
.lw-tone-big {
    --st-display-size: clamp(2.6rem, 6vw, 3.6rem);
    color: var(--st-panel-ink);
    white-space: nowrap;
}
.lw-tone-name {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-stretch: 100%;
}
.lw-tone-note {
    font-size: 1.45rem;
    font-weight: 820;
    font-stretch: 112%;
    line-height: 1;
    color: var(--st-accent);
}
.lw-tone-cents {
    font-size: 0.85rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--st-panel-muted);
}
.lw-tone-desc {
    max-width: 62ch;
    margin: 0;
    font-size: 0.95rem;
    color: var(--st-panel-ink);
}
.lw-waves { display: flex; flex-direction: column; gap: 0.4rem; }
.lw-waves-row { display: grid; grid-template-columns: repeat(4, minmax(4.4rem, 1fr)); gap: 0.4rem; }
.lw-wave {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 4.4rem;
    padding: 0.5rem 0.4rem 0.45rem;
    border: 0;
    border-radius: 8px;
    background: var(--st-key);
    color: var(--st-key-ink);
    font: inherit;
    font-family: var(--st-font);
    font-size: 0.8rem;
    font-weight: 700;
    font-stretch: 92%;
    cursor: pointer;
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.lw-wave:hover { filter: brightness(1.1); }
.lw-wave[aria-pressed="true"] {
    background: var(--st-accent);
    color: var(--st-on-accent);
    box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.22);
}
.lw-glyph { width: 2.4rem; height: 2rem; overflow: visible; }
.lw-glyph path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.lw-wave:not([aria-pressed="true"]) .lw-glyph path { stroke: var(--st-accent); }
.lw-jumps .learn-chip { font-variant-numeric: tabular-nums; }

/* ── Synth Lab ───────────────────────────────────────────────────────── */
.lw-banks { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem 1.2rem; }
.lw-bank { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.lw-banks .learn-chip { min-height: 2.75rem; padding: 0 0.8rem; font-size: 0.86rem; }
.lw-lab-note {
    min-height: 1.4em;
    margin: -0.2rem 0 0;
    padding-inline-start: 0.7rem;
    border-inline-start: 3px solid var(--st-accent);
    font-size: 0.92rem;
    color: var(--st-panel-ink);
}
.lw-lab-adsr { padding: 0; }
.lw-adsr-line { fill: none; stroke: var(--st-accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lw-adsr-lbl { fill: var(--st-panel-muted); font: 700 12px var(--st-font); }

.lw-mods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.lw-mod[data-mod="osc"] { grid-column: 1 / -1; }
.lw-mod-ctls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.8rem 1.1rem;
    align-items: end;
}
.lw-mod {
    --mod: var(--st-808-ivory);
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem 0.95rem;
    border-radius: 12px;
    background: var(--st-panel-2);
    box-shadow: inset 0 3px 0 var(--mod), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lw-mod[data-mod="filter"] { --mod: var(--st-808-orange); }
.lw-mod[data-mod="amp"] { --mod: var(--st-808-red); }
.lw-mod[data-mod="lfo"] { --mod: var(--st-808-yellow); }
.lw-mod[data-mod="drive"] { --mod: var(--st-accent); }
.lw-mod-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.1rem 0 0;
    font-size: 0.98rem;
    font-weight: 800;
    font-stretch: 108%;
    color: var(--st-panel-ink);
}
.lw-mod-title::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--mod);
}
.lw-lab-fx { padding-top: 0.2rem; }
.lw-lab-play {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1.4rem;
}
.lw-lab-demo-wrap { display: flex; align-items: center; gap: 0.8rem; }
.lw-lab-demo-label { font-size: 1.05rem; font-weight: 780; font-stretch: 108%; color: var(--st-panel-ink); }
.lw-oct { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.lw-oct .learn-field-label { margin-inline-end: 0.3rem; }
.lw-oct-btn { width: var(--st-target); padding: 0; font-size: 1.2rem; }
.lw-oct-out {
    min-width: 2.8em;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 780;
    color: var(--st-panel-ink);
}
.lw-lab-kb { margin-top: 0; }

/* ── bass synth ──────────────────────────────────────────────────────── */
.lw-bass-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem 1.2rem; }
.lw-seg-field { gap: 0.35rem; }
.lw-bass-drums { align-self: flex-end; }
.lw-bass-segs { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; }
.lw-roll-grid {
    --st-label-w: 4.6rem;
    gap: 4px 4px;
}
.lw-roll-corner { display: block; }
.lw-roll-beat {
    padding-bottom: 2px;
    font-size: 0.78rem;
    font-weight: 800;
    font-stretch: 110%;
    text-align: center;
    color: var(--st-panel-muted);
}
.lw-roll-beat.is-beat { color: var(--st-panel-ink); }
.lw-roll-beat.is-beat:not(:nth-child(2)) { margin-inline-start: 6px; }
.lw-roll-label {
    display: flex;
    align-items: center;
    min-height: var(--st-target);
    font-size: 0.86rem;
    font-weight: 750;
    font-stretch: 92%;
    font-variant-numeric: tabular-nums;
    color: var(--st-panel-ink);
}
.lw-roll-label--a,
.lw-roll-label--s { color: var(--st-panel-muted); }
.lw-roll .st-cell[data-kind="a"],
.lw-roll .st-cell[data-kind="s"] { --st-on: var(--st-808-yellow); }
.lw-bass-screen { display: grid; gap: 0.4rem; }
.lw-bass-screen .lw-screen-cv { height: 6.25rem; }
.lw-bass-readout { min-height: 1.4em; margin: 0; font-size: 0.9rem; color: var(--st-panel-muted); }

/* ── narrow ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .lw-panel { gap: 0.85rem; }
    .lw-tone-top { flex-direction: column; align-items: stretch; }
    .lw-waves-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lw-screen-cv,
    .st-scope.lw-screen-cv { height: 7.5rem; }
    .lw-screens--3 .lw-screen:last-child .lw-screen-cv { height: 6.5rem; }
    .lw-row { grid-template-columns: 1fr; }
    .lw-bass-ctls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.9rem; }
    .lw-mods { grid-template-columns: 1fr; }
    .lw-mod-ctls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.9rem; }
    .lw-mod-ctls .st-slider-head { flex-wrap: wrap; column-gap: 0.4rem; }
    .lw-roll-grid { --st-label-w: 3.6rem; }
}

@media (forced-colors: active) {
    .lw-wave[aria-pressed="true"] { outline: 2px solid CanvasText; }
    .lw-mod { border: 1px solid CanvasText; }
}