/* Keep scrolling notes crisp beneath the play page navigation. */
body[data-page="play"] .site-header { background: #101010; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 8px 18px #0005; }

/* The play console shares the site's charcoal, brass and ivory instrument palette. */
.instrument-console {
  --console-ivory: #efe5d2;
  --console-brass: #c6a05a;
  scroll-margin-top: 6rem;
  margin: 0 auto 2.5rem;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: linear-gradient(160deg, #201f1f, #131313 65%);
  border: 1px solid #42382b;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px #0005;
}
.instrument-console [hidden] { display: none !important; }
.console-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-bottom: 0.75rem; }
.console-title { margin: 0; font-family: var(--font-headline); font-size: 1.6rem; color: var(--on-surface); }
.has-lesson .console-title { display: none; }
.instrument-console .practice-context { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; gap: 0.5rem 1rem; }
.instrument-console .practice-context h2 { margin: 0.2rem 0; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.25; }
.instrument-console .practice-context p { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--on-surface-variant); }
.console-back { display: inline-flex; align-items: center; min-height: 28px; font-size: 0.78rem; color: var(--console-brass); text-decoration: none; }
.console-back:hover { color: var(--primary); text-decoration: underline; }
.instrument-console .practice-context__actions button { padding: 0.4rem 0.7rem; border-color: transparent; color: var(--on-surface-variant); font-size: 0.8rem; }
.instrument-console .practice-context__actions button:hover { border-color: var(--outline-variant); color: var(--primary); }
.instrument-console .practice-context__status { min-height: 0; }
.instrument-console .practice-context__status:empty { display: none; }
.console-utility { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.instrument-console .streak-badge { margin: 0; padding: 0; gap: 0.4rem; border: 0; background: none; font-size: 0.72rem; white-space: nowrap; color: var(--on-surface-variant); }
.instrument-console .streak-fire { display: none; }
.instrument-console .streak-badge strong { color: inherit; font-weight: 500; }
.console-settings-toggle { display: inline-flex; min-height: 44px; align-items: center; gap: 0.5rem; padding: 0.45rem 0.7rem; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); background: #131313; color: var(--on-surface); font: inherit; font-size: 0.8rem; cursor: pointer; }
.console-settings-toggle svg { width: 18px; height: 18px; fill: #131313; stroke: currentColor; stroke-width: 1.5; }
.console-settings-toggle[aria-expanded="true"] { color: var(--primary); border-color: var(--console-brass); }
.console-settings { padding-bottom: 1rem; }
.console-settings .control-bar { margin: 0 0 0.5rem; box-shadow: none; background: #131313; }
.console-settings .raga-chip { border: 0; border-radius: 0; padding: 0.4rem 0; background: none; font-size: 0.8rem; }
.instrument-console .keyboard-shell { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.instrument-console .keyboard-status-row { min-height: 44px; gap: 0.6rem; padding: 0 0 0.75rem; }
.instrument-console #sound-toggle { min-height: 44px; padding: 0.5rem 0.9rem; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0; text-transform: none; box-shadow: none; }
.instrument-console .status-pill { min-width: 0; padding: 0; border: 0; background: none; font-size: 0.78rem; line-height: 1.45; }
.instrument-console .held-notes-stop { min-height: 44px; font-family: var(--font-body); letter-spacing: 0; text-transform: none; border-radius: var(--radius-md); }
.phrase-practice { padding: 0.6rem 0 0.85rem; border: 0; border-top: 1px solid #ffffff0d; scroll-margin-top: 6.5rem; }
.phrase-heading { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.phrase-practice h2 { margin: 0; color: var(--on-surface); font-size: 1rem; }
.phrase-practice #phrase-position { margin: 0; font-size: 0.78rem; color: var(--on-surface-variant); }
.phrase-body { display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 0.35rem; }
.phrase-practice__notes { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.phrase-note { display: grid; gap: 0.1rem; min-width: 3.2rem; padding: 0.25rem 0.65rem; text-align: center; border-bottom: 3px solid transparent; border-radius: 3px 3px 0 0; }
.phrase-note strong { font-family: var(--font-headline); font-size: 1.65rem; font-weight: 500; line-height: 1.1; color: var(--console-ivory); }
.phrase-note small { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--on-surface-variant); }
.phrase-note.is-current { border-color: var(--primary-container); background: #ffb00012; }
.phrase-note.is-current strong { color: var(--primary); }
.phrase-transport { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.phrase-transport p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.phrase-transport button, .phrase-practice__controls button, .instrument-console .keyboard-range button {
  min-width: 44px; min-height: 44px; padding: 0.5rem 0.8rem; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); background: #161513; color: var(--on-surface); font: inherit; font-size: 0.8rem; cursor: pointer;
}
.phrase-transport button:hover, .phrase-practice__controls button:not(:disabled):hover, .instrument-console .keyboard-range button:hover { border-color: var(--console-brass); color: var(--primary); }
.phrase-transport button span { padding-right: 0.25rem; font-size: 0.7rem; }
.is-audio-ready #phrase-demo { border-color: var(--primary-container); background: var(--primary-container); color: #2d2007; }
.is-audio-ready #phrase-demo:hover { background: #ffbe36; }
.is-audio-ready #phrase-demo[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #432c0055; }
.phrase-practice__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.6rem 0; }
.phrase-practice__controls label { min-height: 44px; display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--on-surface-variant); }
.phrase-practice__controls select { min-height: 44px; max-width: 10rem; padding: 0.4rem 1.4rem 0.4rem 0.6rem; border: 1px solid var(--outline-variant); border-radius: var(--radius-md); background: #131313; color: var(--on-surface); font: inherit; cursor: pointer; }
.phrase-practice__controls input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--primary-container); }
.phrase-pagination { display: flex; gap: 0.5rem; margin-left: auto; }
.phrase-practice__controls button:disabled { color: #a39b8f; border-color: #52453366; background: none; opacity: 0.65; cursor: default; }
.instrument-console .keyboard-stage { box-shadow: none; background: #080808; padding: 0 0.65rem; border-bottom: 3px solid #30291f; }
.instrument-console .play-key--white { background: linear-gradient(#f3eddf, #e5d9c2); box-shadow: inset 0 -3px 2px #9e8e6e55, 1px 0 1px #0006; }
.instrument-console .play-key--black { background: linear-gradient(#202020, #050505); box-shadow: inset 0 1px 1px #ffffff18, 1px 3px 4px #0009; }
.instrument-console .play-key--out-raga { opacity: 1; }
.instrument-console .play-key--white .play-key__sargam { color: #30281c; }
.instrument-console .play-key--black .play-key__sargam { color: #e7c77f; }
.instrument-console .play-key__western { opacity: 0.9; font-variant-numeric: tabular-nums; }
.instrument-console .play-key--in-raga { border-bottom: 2px solid var(--console-brass); }
.instrument-console .is-phrase-note { box-shadow: inset 0 -3px var(--primary-container), 1px 0 1px #0006; }
.instrument-console .play-key.is-pressed, .instrument-console .play-key:active { background: linear-gradient(#e9bd70, #e0a233); box-shadow: inset 0 -3px #805600; transform: translateY(2px); }
.instrument-console .play-key.is-pressed .play-key__sargam, .instrument-console .play-key:active .play-key__sargam { color: #302005; }
.instrument-console .keyboard-range { min-height: 28px; margin: 0.35rem 0 0; font-size: 0.75rem; color: var(--on-surface-variant); }
.instrument-console .keyboard-range button { padding: 0.4rem 0.6rem; }
.instrument-console .recording-shell { margin: 0; border-top: 1px solid #ffffff0d; }
.instrument-console .recording-bar { gap: 0.6rem; padding: 0.65rem 0; border: 0; background: none; }
.instrument-console .record-button { min-height: 44px; padding: 0.5rem 0.7rem; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0; text-transform: none; border-radius: var(--radius-md); }
.instrument-console .record-timer { min-width: 2.75rem; font-size: 0.8rem; }
.instrument-console .record-status { font-size: 0.75rem; line-height: 1.45; }
.instrument-console .record-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0; text-transform: none; }
.console-help { padding: 0.25rem 0; font-size: 0.75rem; color: var(--on-surface-variant); }
.console-help summary { width: fit-content; min-height: 44px; cursor: pointer; }
.instrument-console .microcopy { max-width: 70ch; padding: 0; margin: 0.25rem 0 0.6rem; text-align: left; opacity: 1; font-size: 0.8rem; }
.instrument-console :is(button, select, input, a, summary):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (min-width: 641px) and (min-height: 521px) {
  .has-excerpt .keyboard-range { display: none; }
}
@media (max-width: 760px) {
  .console-heading { gap: 0.5rem; padding-bottom: 0.65rem; align-items: start; }
  .instrument-console .practice-context { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .instrument-console .practice-context h2 { font-size: 1.1rem; }
  .instrument-console .practice-context__actions { grid-row: 2; }
  .instrument-console .practice-context__actions button { min-height: 44px; padding: 0; }
  .instrument-console .streak-badge { display: none; }
  .console-title { font-size: 1.3rem; }
  .phrase-body { flex-wrap: wrap; gap: 0.6rem; }
  .phrase-pagination { margin-left: 0; }
  .instrument-console .record-status { flex-basis: calc(100% - 9rem); }
}
@media (max-width: 640px) {
  .instrument-console { scroll-margin-top: 10.25rem; margin-bottom: 2rem; padding: 0.65rem; }
  .console-back { min-height: 44px; font-size: 0.75rem; }
  .instrument-console .practice-context p { font-size: 0.72rem; }
  .instrument-console .keyboard-status-row { gap: 0.45rem; }
  .instrument-console .status-pill { flex: 1; font-size: 0.72rem; }
  .phrase-practice { scroll-margin-top: 10.25rem; padding: 0.5rem 0 0.65rem; }
  .phrase-heading { gap: 0.25rem 0.65rem; }
  .phrase-practice h2 { font-size: 0.95rem; }
  .phrase-practice #phrase-position { font-size: 0.72rem; }
  .phrase-body { gap: 0.5rem; }
  .phrase-practice__notes { gap: 0.3rem; }
  .phrase-note { min-width: 2.6rem; padding: 0.25rem 0.4rem; }
  .phrase-note strong { font-size: 1.45rem; }
  .phrase-transport { margin-left: auto; }
  .phrase-practice__controls { gap: 0.5rem 0.7rem; }
  .phrase-practice__controls select { padding-right: 0.6rem; }
  .phrase-practice__controls label { gap: 0.35rem; font-size: 0.75rem; }
  .phrase-pagination { flex-basis: 100%; justify-content: flex-end; }
  .instrument-console .record-link { margin-left: auto; }
  .console-settings .control-bar { padding: 0.75rem; }
}
@media (max-height: 520px) and (min-width: 641px) {
  .has-excerpt .keyboard-shell { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(0, 2fr); gap: 0.5rem; }
  .has-excerpt .keyboard-status-row { grid-column: 1 / -1; }
  .has-excerpt .phrase-practice { grid-column: 1; grid-row: 2 / span 2; align-self: start; padding: 0; border: 0; scroll-margin-top: 6.5rem; }
  .has-excerpt .phrase-body { flex-wrap: wrap; }
  .has-excerpt .phrase-transport { margin-left: 0; }
  .has-excerpt .keyboard-stage { grid-column: 2; grid-row: 2; height: 170px; justify-content: flex-start; overflow-x: auto; }
  .has-excerpt .play-key--white { height: 160px; flex: 0 0 44px; min-width: 44px; }
  .has-excerpt .play-key--black { height: 100px; margin-top: 10px; }
  .has-excerpt .keyboard-range { grid-column: 2; grid-row: 3; }
  .has-excerpt .keyboard-range button { display: inline-flex; align-items: center; }
  .has-excerpt :is(.phrase-practice__controls, .console-help, .recording-shell) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .instrument-console * { transition: none !important; animation: none !important; } }
@media print { .site-header, .site-footer, .song-detail__practice-actions, .song-detail__quick-links, [data-access-bar], .access-bar { display: none !important; } .song-detail { color: #000; background: #fff; } .song-detail__lines { break-inside: avoid; } }