/* Field notes chapters (app/javascript/lessons). One stylesheet for the studio and for the
   public /learn pages, so it depends on neither the studio's CSS nor Tailwind. */
.fn-lesson{--night:#242e29;--cream:#fffefa;--lime:#dce8aa;--accent:#98bca7;display:block;border-radius:20px;background:var(--night);color:var(--cream);padding:18px 20px 20px;box-shadow:0 12px 32px #1d2c2322;font-family:"DM Sans",system-ui,sans-serif}
.fn-lesson [data-color=coral]{--accent:#df9278}.fn-lesson [data-color=gold]{--accent:#dfc183}.fn-lesson [data-color=lilac]{--accent:#b6a4c7}.fn-lesson [data-color=blue]{--accent:#8fadb9}.fn-lesson [data-color=mint]{--accent:#98bca7}
.lp-transport{display:flex;align-items:center;gap:14px}
.lp-play{display:grid;place-items:center;flex:none;width:50px;height:50px;border:0;border-radius:15px;cursor:pointer;background:var(--lime);color:var(--night);box-shadow:0 4px 0 #9db06a;transition:transform .15s cubic-bezier(.2,1.6,.4,1),box-shadow .15s}
.lp-play:hover{transform:translateY(-2px);box-shadow:0 6px 0 #9db06a}.lp-play:active{transform:translateY(3px);box-shadow:none}
.lp-play svg{width:20px;height:20px;fill:currentColor}
.lp-meta strong{display:block;font:700 15px/1.2 Manrope,sans-serif}.lp-meta small{display:block;margin-top:3px;font-size:11.5px;color:#fffefa99}
.lp-stage{display:grid;gap:14px;margin-top:16px}
.lp-caption{margin:0;font-size:12.5px;line-height:1.55;color:#fffefab3}

/* pads */
.lp-pads,.lp-notes{display:grid;gap:6px}
.lp-row{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:10px}
.lp-row>span{font-size:12px;font-weight:600;color:#fffefacc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-row>span small{font-weight:400;color:#fffefa73;margin-left:2px}
.lp-row>div{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}
.lp-ruler b{display:block;height:13px;font:600 9.5px/13px Manrope,sans-serif;color:#fffefa73;text-align:center}
.lp-pad{appearance:none;display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:7px;background:#ffffff0f;box-shadow:inset 0 -2px 0 #0000002e;cursor:pointer;transition:transform .12s cubic-bezier(.2,1.6,.4,1),background .12s,filter .08s}
.lp-pad.beat{background:#ffffff1c}
.lp-pad:not(:disabled):hover{background:#ffffff2e;transform:translateY(-1px)}
.lp-pad:disabled{cursor:default}
.lp-pad.on{background:var(--accent);box-shadow:inset 0 -3px 0 #00000033,0 0 0 1px #ffffff14}
.lp-pad.on.soft{background:color-mix(in srgb,var(--accent) 45%,#2f3b35)}
.lp-pad.held{background:color-mix(in srgb,var(--accent) 28%,#2f3b35)}
.lp-pad.hint{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--lime) 70%,transparent);animation:lp-hint 1.6s ease-in-out infinite}
.lp-pad.now{filter:brightness(1.45);transform:scale(1.08)}
.lp-pad.on.now{box-shadow:0 0 14px var(--accent)}
.lp-pad.skipped{background:#ffffff14;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent)}
.lp-row>div>:nth-child(4n+1):not(:first-child){margin-left:3px}
/* swing, drawn: every second pad sits as late as it plays */
.lp-offsets .lp-pad.late{translate:calc(var(--swing,0) * (100% + 4px)) 0;transition:translate .12s ease-out,transform .12s,background .12s}
.lp-notes .lp-pad{aspect-ratio:auto;height:20px;border-radius:5px}
.lp-notes{--accent:#8fadb9}.lp-notes[data-color=gold]{--accent:#dfc183}.lp-notes[data-color=mint]{--accent:#98bca7}.lp-notes[data-color=coral]{--accent:#df9278}.lp-notes[data-color=lilac]{--accent:#b6a4c7}
@keyframes lp-hint{50%{box-shadow:inset 0 0 0 2px transparent}}

/* controls */
.lp-slider{display:grid;gap:5px;font-size:12.5px}
.lp-slider>span{display:flex;justify-content:space-between;font-weight:600}.lp-slider output{font-weight:500;color:var(--lime)}
.lp-slider small{color:#fffefa80;font-size:11.5px}
.lp-slider input{width:100%;accent-color:#dce8aa;height:22px;cursor:pointer}
.lp-choices{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}
.lp-choices>span{margin-right:4px;font-weight:600;color:#fffefacc}
.lp-choices button{padding:7px 12px;border:1px solid #ffffff26;border-radius:999px;background:transparent;color:#fffefacc;font:600 12px "DM Sans",sans-serif;cursor:pointer;transition:transform .12s cubic-bezier(.2,1.6,.4,1),background .12s}
.lp-choices button:hover{transform:translateY(-1px);background:#ffffff14}
.lp-choices button.active{background:var(--lime);border-color:var(--lime);color:var(--night)}

/* piano */
.lp-keys{position:relative;display:flex;height:112px;padding-bottom:2px;user-select:none;touch-action:none}
.lp-key{appearance:none;position:relative;flex:1;border:0;padding:0;cursor:pointer;border-radius:0 0 6px 6px;transition:background .1s,transform .08s}
.lp-key.white{background:#e9ecdf;box-shadow:inset 0 -5px 0 #00000014;margin-right:2px;opacity:.38}
.lp-key.black{flex:0 0 0;width:0;z-index:1}
.lp-key.black::before{content:"";position:absolute;top:0;left:-9px;width:16px;height:66px;border-radius:0 0 4px 4px;background:#141b17;opacity:.75;box-shadow:inset 0 -4px 0 #ffffff12}
.lp-key.white.lit{opacity:1;background:#fffefa}.lp-key.white.lit.home{background:var(--lime)}
.lp-key.black.lit::before{opacity:1;background:#3d5a4b}.lp-key.black.lit.home::before{background:#7a9440}
.lp-key.down,.lp-key.white.down{transform:translateY(2px);background:#b9c97f}
.lp-key i{position:absolute;left:0;right:0;bottom:7px;font:700 10px Manrope,sans-serif;font-style:normal;color:#2b5140;text-align:center;pointer-events:none}
.lp-key.black i{left:-9px;right:auto;width:16px;bottom:auto;top:46px;color:#dce8aa}

/* graphs */
.lp-graph{border-radius:12px;background:#ffffff0a;padding:8px 8px 2px}
.lp-graph svg{display:block;width:100%;height:auto}
.lp-graph .lp-line{fill:none;stroke:#dce8aa;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.lp-graph .lp-fill{fill:#dce8aa22;stroke:none}
.lp-graph .lp-bars rect{fill:#98bca7aa}
.lp-graph text{font:600 8px Manrope,sans-serif;fill:#fffefa80}

/* sections */
.lp-strip{display:flex;gap:4px;min-height:58px}
.lp-strip span{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--accent) 80%,#242e29);color:#1d2c23;transition:transform .12s,filter .12s}
.lp-strip span.now{transform:translateY(-3px);filter:brightness(1.15);box-shadow:0 6px 16px #00000040}
.lp-strip strong{font:700 11.5px Manrope,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lp-strip small{font-size:10px;opacity:.7}
.lp-strip em{align-self:center;font-size:12px;color:#fffefa80}

/* goals */
.lp-goals{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff1f}
.lp-goals p{margin:0 0 8px;font:700 10px Manrope,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fffefa80}
.lp-goals ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.lp-goals li{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.45;color:#fffefacc;transition:color .2s}
.lp-goals li svg{flex:none;width:17px;height:17px;margin-top:1px;fill:currentColor;opacity:.45}
.lp-goals li.met{color:var(--lime)}.lp-goals li.met svg{opacity:1;animation:lp-pop .4s cubic-bezier(.2,1.8,.4,1)}
.fn-lesson.complete{box-shadow:0 0 0 2px var(--lime),0 12px 32px #1d2c2322}
@keyframes lp-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@media (max-width:560px){.lp-row{grid-template-columns:52px minmax(0,1fr);gap:6px}.lp-row>div{gap:2px}.lp-pad{border-radius:4px}.fn-lesson{padding:14px}}
/* On a phone each instrument's name sits above its pads: sixteen pads across 390px are only big enough to tap with the whole width. */
@media (max-width:430px){.fn-lesson{padding:12px}.lp-row{grid-template-columns:minmax(0,1fr);gap:3px}.lp-row>span{font-size:11px}.lp-ruler>span{display:none}.lp-row>div>:nth-child(4n+1):not(:first-child){margin-left:2px}.lp-pads,.lp-notes{gap:8px}}
@media (prefers-reduced-motion:reduce){.lp-pad,.lp-play,.lp-goals li svg,.lp-pad.hint{transition:none;animation:none}}